diff --git a/.changeset/witty-turkeys-fix.md b/.changeset/witty-turkeys-fix.md new file mode 100644 index 0000000000..985dcb49e6 --- /dev/null +++ b/.changeset/witty-turkeys-fix.md @@ -0,0 +1,41 @@ +--- +'@udecode/plate-selection': patch +--- + +Remove the Div rendered above the editor. + +This div is to solve the issue of the browser's default scrolling behavior being too fast. + +However, it caused some other issues and complicated configurations, such as being unable to focus on the editor when clicking the padding-right area. + +If you think this issue is more important, you refer to the flowing code. +```tsx + BlockSelectionPlugin.configure({ + render: { + aboveEditable: ({ children }) => { + return (
+ {/* + *select text then move cursor to the very bottom will trigger the default browser behavior + *this div is a workaround to prevent the default browser behavior (set userSelect: none) + *Make sure the div with is the same with the editor's padding-right + */} + + {/* TODO: click to focus the node */} +
+ {children} +
) + }, + }, + }), +``` diff --git a/apps/www/content/docs/block-selection.mdx b/apps/www/content/docs/block-selection.mdx index 2264dde339..abb68b1177 100644 --- a/apps/www/content/docs/block-selection.mdx +++ b/apps/www/content/docs/block-selection.mdx @@ -107,6 +107,19 @@ You can style the selected element by adding this class to the container '[&_.slate-selected]:!bg-primary/20 ' ``` +### Disable browser default scroll behavior +If we select some text and then move(keep pressed) the cursor to the very bottom of the page, the page will start scrolling to the bottom. + +Sometimes this scroll is so fast and confilicts with `BlockSelectionPlugin` scroll behavior(After the selection area appears, move the mouse to the bottom of the scroll container). + +I don't find any way to disable this scroll behavior of browser.(if you find the way to disable it, please tell me that will so appreciate it) + +So the solution is add an empty `div` above the editer's right side(The right side is the easiest place to trigger this behavior.) and set `user-select: none` to it . + +This will make configuration and maintenance cumbersome so we remove this div from plate. + +If you encounter this issue, you might consider disabling it in this way. + ## Plugins ### BlockSelectionPlugin