docs

.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 ( <div style={{ position: 'relative', width: '100%' }}>
+      {/*
+       *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 */}
+      <div
+        style={{
+          height: '100%',
+          position: 'absolute',
+          right: 0,
+          top: 0,
+          userSelect: 'none',
+          width: editorPaddingRight ?? 'max(5%, 24px)',
+          zIndex: 1,
+        }}
+        data-plate-selectable
+      />
+      {children}
+      </div>)
+  },
+    },
+  }),
+```

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