Merge pull request #3774 from udecode/fix/selection-area

Fix/selection area

.changeset/polite-dingos-itch.md

@@ -0,0 +1,6 @@
+---
+'@udecode/plate-selection': minor
+---
+
+Fix the issue of slow scrolling speed when the cursor is at the bottom.(areaOption needs to be removed to fix the issue.)
+If there are no special requirements, there is no need to pass areaOptions; the default configuration is the optimal one.

apps/www/content/docs/block-menu.mdx

@@ -45,14 +45,6 @@ const plugins = [
   NodeIdPlugin,
   BlockSelectionPlugin.configure({
     options: {
-      areaOptions: {
-        behaviour: {
-          scrolling: {
-            speedDivider: 1.5,
-          },
-          startThreshold: 10,
-        },
-      },
       enableContextMenu: true,
     },
   }),

apps/www/content/docs/block-selection.mdx

@@ -92,7 +92,7 @@ BlockSelectionPlugin.configure({
 
 useing `options.areaOptions.behaviour.scrolling.speedDivider` to set the scroll speed.
 
-The value of `1.5` is our recommended speed since it's near the browser-native speed.
+The value of `0.8` is our recommended speed since it's near the browser-native speed.
 
 
 ```ts
@@ -101,11 +101,12 @@ BlockSelectionPlugin.configure({
     areaOptions: {
       behaviour: {
       scrolling: {
+        // You can slow down the scroll speed by setting a bigger value.
         speedDivider: 1.5,
       },
       // The distance needed to move for the selection area to appear.
       // If it’s too small, it may cause the mouse click event to be blocked. 10 is a good default.
-      startThreshold: 10,
+      startThreshold: 4,
     },
   },
 }

apps/www/src/registry/default/components/editor/plugins/block-selection-plugins.ts

@@ -9,14 +9,6 @@ export const blockSelectionPlugins = [
       excludePlugins: ['table', 'code_line', 'column_group', 'column'],
     },
     options: {
-      areaOptions: {
-        behaviour: {
-          scrolling: {
-            speedDivider: 1.5,
-          },
-          startThreshold: 4,
-        },
-      },
       enableContextMenu: true,
     },
   }),

packages/selection/src/internal/SelectionArea.ts

@@ -99,19 +99,19 @@ export class SelectionArea extends EventTarget<SelectionEvents> {
         ...opt.behaviour,
         scrolling: {
           manualSpeed: 750,
-          speedDivider: 10,
+          speedDivider: 0.7,
           ...opt.behaviour?.scrolling,
           startScrollMargins: {
             x: 20,
-            y: 20,
+            y: 40,
             ...opt.behaviour?.scrolling?.startScrollMargins,
           },
         },
         startThreshold: opt.behaviour?.startThreshold
           ? typeof opt.behaviour.startThreshold === 'number'
             ? opt.behaviour.startThreshold
-            : { x: 20, y: 20, ...opt.behaviour.startThreshold }
-          : { x: 20, y: 20 },
+            : { x: 4, y: 4, ...opt.behaviour.startThreshold }
+          : { x: 4, y: 4 },
       },
 
       features: {
@@ -663,7 +663,10 @@ export class SelectionArea extends EventTarget<SelectionEvents> {
     ) {
       _scrollSpeed.y = scrollTop
         ? -abs(
-            _containerRect!.top - _areaClientLocation.y2 - this._scrollDelta.y
+            _containerRect!.top -
+              _areaClientLocation.y2 -
+              this._scrollDelta.y +
+              startScrollMargins.y
           )
         : 0;
       y2 = max(y2, this._container!.scrollTop);
@@ -674,10 +677,11 @@ export class SelectionArea extends EventTarget<SelectionEvents> {
       _scrollSpeed.y =
         scrollHeight - scrollTop - clientHeight
           ? abs(
-              _containerRect!.top +
-                this._container!.clientHeight -
-                _areaClientLocation.y2 -
-                this._scrollDelta.y
+              _areaClientLocation.y2 +
+                this._scrollDelta.y -
+                (_containerRect!.top +
+                  this._container!.clientHeight -
+                  startScrollMargins.y)
             )
           : 0;
       y2 = clientHeight + scrollTop;

packages/selection/src/react/BlockSelectionPlugin.tsx

@@ -92,13 +92,6 @@ export const BlockSelectionPlugin = createTPlatePlugin<BlockSelectionConfig>({
   },
   options: {
     areaOptions: {
-      behaviour: {
-        scrolling: {
-          speedDivider: 5,
-          startScrollMargins: { x: 20, y: 0 },
-        },
-        startThreshold: 5,
-      },
       features: {
         singleTap: {
           allow: false,

yarn.lock

@@ -6203,7 +6203,7 @@ __metadata:
   resolution: "@udecode/plate-ai@workspace:packages/ai"
   dependencies:
     "@udecode/plate-combobox": "npm:40.0.0"
-    "@udecode/plate-markdown": "npm:40.0.4"
+    "@udecode/plate-markdown": "npm:40.0.5"
     "@udecode/plate-selection": "npm:40.0.0"
     ai: "npm:^3.4.10"
     lodash: "npm:^4.17.21"
@@ -6909,7 +6909,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-markdown@npm:40.0.4, @udecode/plate-markdown@workspace:^, @udecode/plate-markdown@workspace:packages/markdown":
+"@udecode/plate-markdown@npm:40.0.5, @udecode/plate-markdown@workspace:^, @udecode/plate-markdown@workspace:packages/markdown":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-markdown@workspace:packages/markdown"
   dependencies:
@@ -7300,7 +7300,7 @@ __metadata:
     "@udecode/plate-line-height": "npm:40.0.0"
     "@udecode/plate-link": "npm:40.0.0"
     "@udecode/plate-list": "npm:40.0.0"
-    "@udecode/plate-markdown": "npm:40.0.4"
+    "@udecode/plate-markdown": "npm:40.0.5"
     "@udecode/plate-media": "npm:40.0.0"
     "@udecode/plate-mention": "npm:40.0.0"
     "@udecode/plate-node-id": "npm:40.0.0"