diff --git a/.changeset/polite-dingos-itch.md b/.changeset/polite-dingos-itch.md new file mode 100644 index 0000000000..4d205a1c1e --- /dev/null +++ b/.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. \ No newline at end of file diff --git a/apps/www/content/docs/block-menu.mdx b/apps/www/content/docs/block-menu.mdx index 200ae94ed9..d72f5e165c 100644 --- a/apps/www/content/docs/block-menu.mdx +++ b/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, }, }), diff --git a/apps/www/content/docs/block-selection.mdx b/apps/www/content/docs/block-selection.mdx index b862570054..b7f3ea831c 100644 --- a/apps/www/content/docs/block-selection.mdx +++ b/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, }, }, } diff --git a/apps/www/src/registry/default/components/editor/plugins/block-selection-plugins.ts b/apps/www/src/registry/default/components/editor/plugins/block-selection-plugins.ts index eb855ab3c7..246efe37b7 100644 --- a/apps/www/src/registry/default/components/editor/plugins/block-selection-plugins.ts +++ b/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, }, }), diff --git a/packages/selection/src/internal/SelectionArea.ts b/packages/selection/src/internal/SelectionArea.ts index 6441644b0f..0974ede32f 100644 --- a/packages/selection/src/internal/SelectionArea.ts +++ b/packages/selection/src/internal/SelectionArea.ts @@ -99,19 +99,19 @@ export class SelectionArea extends EventTarget { ...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 { ) { _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 { _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; diff --git a/packages/selection/src/react/BlockSelectionPlugin.tsx b/packages/selection/src/react/BlockSelectionPlugin.tsx index 4994580959..f56a335365 100644 --- a/packages/selection/src/react/BlockSelectionPlugin.tsx +++ b/packages/selection/src/react/BlockSelectionPlugin.tsx @@ -92,13 +92,6 @@ export const BlockSelectionPlugin = createTPlatePlugin({ }, options: { areaOptions: { - behaviour: { - scrolling: { - speedDivider: 5, - startScrollMargins: { x: 20, y: 0 }, - }, - startThreshold: 5, - }, features: { singleTap: { allow: false, diff --git a/yarn.lock b/yarn.lock index 677ad30dc6..27371fb53d 100644 --- a/yarn.lock +++ b/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"