Remove renderable

packages/selection/src/react/components/BlockSelection.tsx → .changeset/witty-turkeys-fix.md

@@ -1,16 +1,19 @@
-import React from 'react';
+---
+'@udecode/plate-selection': patch
+---
 
-import { useEditorPlugin } from '@udecode/plate-common/react';
+Remove the Div rendered above the editor.
 
-import { BlockSelectionPlugin } from '../BlockSelectionPlugin';
+This div is to solve the issue of the browser's default scrolling behavior being too fast.
 
-export const BlockSelection = ({ children }: any) => {
-  const { getOptions } = useEditorPlugin(BlockSelectionPlugin);
+However, it caused some other issues and complicated configurations, such as being unable to focus on the editor when clicking the padding-right area.
 
-  const { editorPaddingRight, rightSelectionAreaClassName } = getOptions();
-
-  return (
-    <div style={{ position: 'relative', width: '100%' }}>
+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)
@@ -19,7 +22,6 @@ export const BlockSelection = ({ children }: any) => {
 
       {/* TODO: click to focus the node */}
       <div
-        className={rightSelectionAreaClassName}
         style={{
           height: '100%',
           position: 'absolute',
@@ -32,6 +34,8 @@ export const BlockSelection = ({ children }: any) => {
         data-plate-selectable
       />
       {children}
-    </div>
-  );
-};
+      </div>)
+  },
+    },
+  }),
+```

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

@@ -107,19 +107,18 @@ 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.
 
-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).
+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)
 
-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 .
+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 .
 
-If you find this issue occurring in your editor, please check the width of this div. You can use the option `editorPaddingRight` to set the width of this div or the class `rightSelectionAreaClassName` to style it.
+This will make configuration and maintenance cumbersome so we remove this div from plate.
 
-Make sure the width is the same with the editor's padding-right.
+If you encounter this issue, you might consider disabling it in this way.
 
 ## Plugins
 

packages/selection/src/react/BlockSelectionPlugin.tsx

@@ -1,4 +1,4 @@
-import React, { type CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 import {
   type PluginConfig,
@@ -13,7 +13,6 @@ import type { ChangedElements, PartialSelectionOptions } from '../internal';
 import { getAllSelectableDomNode, getSelectedDomNode } from '../lib';
 import { extractSelectableIds } from '../lib/extractSelectableIds';
 import { BlockContextMenuPlugin } from './BlockContextMenuPlugin';
-import { BlockSelection } from './components';
 import { BlockSelectable } from './components/BlockSelectable';
 import { onKeyDownSelection } from './onKeyDownSelection';
 import { useHooksBlockSelection } from './useHooksBlockSelection';
@@ -75,7 +74,6 @@ export const BlockSelectionPlugin = createTPlatePlugin<BlockSelectionConfig>({
     query: {
       maxLevel: 1,
     },
-    rightSelectionAreaClassName: 'slate-right-selection-area',
     selectedIds: new Set(),
   },
   plugins: [BlockContextMenuPlugin],
@@ -154,11 +152,4 @@ export const BlockSelectionPlugin = createTPlatePlugin<BlockSelectionConfig>({
         });
       },
     })
-  )
-  .extend(() => ({
-    render: {
-      aboveEditable: ({ children }) => (
-        <BlockSelection>{children}</BlockSelection>
-      ),
-    },
-  }));
+  );

packages/selection/src/react/components/index.ts

@@ -3,4 +3,3 @@
  */
 
 export * from './BlockSelectable';
-export * from './BlockSelection';