Merge pull request #3738 from udecode/focus/selection

Focus/selection

Author: felixfeng33

.changeset/clever-buttons-attend.md

@@ -0,0 +1,6 @@
+---
+'@udecode/plate-selection': patch
+---
+
+New api `editor.getApi(BlockSelectionPlugin).blockSelection.focus();`
+Fix the issue where block selection should not be unselect when the block context menu is open.

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

@@ -167,16 +167,15 @@ export function BlockSelection() {
 
 This component should be rendered inside each block element for consistent selection feedback. Plate UI is doing it in `plate-element.tsx`.
 
-### Disable browser default scroll behavior
+## Prevent unselect
 
-When selecting text and moving the cursor to the bottom of the page, the browser's default scroll behavior can conflict with the `BlockSelectionPlugin`. To mitigate this, you can add a non-selectable area to the right side of the editor:
+To prevent unselecting blocks when clicking on certain elements, add the `data-plate-prevent-unselect` attribute to those components
 
+For example:
 ```tsx
-<div className="absolute right-0 top-0 h-full w-4 select-none" />
+  <YourSpecialButtoon data-plate-prevent-unselect />
 ```
 
-This helps prevent unexpected scrolling during selection operations.
-
 ## Plugins
 
 ### BlockSelectionPlugin
@@ -232,6 +231,10 @@ A set of IDs for the currently selected blocks.
 
 ## API
 
+
+### editor.api.blockSelection.focus
+Focuses the block selection shadow input. This input handles copy, delete, and paste events for selected blocks.
+
 ### editor.api.blockSelection.addSelectedRow
 
 Adds a selected row to the block selection.

apps/www/content/docs/components/changelog.mdx

@@ -11,6 +11,11 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## November 2024 #16
 
+### November 7 #16.4
+
+- `block-context-menu`: prevent unselect when clicking on the context menu
+- `block-selection`: Add `editor.getApi(BlockSelectionPlugin).blockSelection.focus()` in onCloseAutoFocus.
+
 ### November 6 #16.3
 
 - `editor`: add `overflow-x-hidden` to prevent horizontal scrolling

apps/www/src/registry/default/plate-ui/block-context-menu.tsx

@@ -61,7 +61,17 @@ export function BlockContextMenu({ children }: { children: React.ReactNode }) {
   );
 
   return (
-    <ContextMenu modal={false}>
+    <ContextMenu
+      onOpenChange={(open) => {
+        if (!open) {
+          // prevent unselect the block selection
+          setTimeout(() => {
+            api.blockMenu.hide();
+          }, 0);
+        }
+      }}
+      modal={false}
+    >
       <ContextMenuTrigger
         asChild
         onContextMenu={(event) => {
@@ -83,6 +93,7 @@ export function BlockContextMenu({ children }: { children: React.ReactNode }) {
         className="w-64"
         onCloseAutoFocus={(e) => {
           e.preventDefault();
+          editor.getApi(BlockSelectionPlugin).blockSelection.focus();
 
           if (value === 'askAI') {
             editor.getApi(AIChatPlugin).aiChat.show();

packages/selection/src/react/BlockMenuPlugin.tsx

@@ -70,7 +70,7 @@ export const BlockMenuPlugin = createTPlatePlugin<BlockMenuConfig>({
     handlers: {
       onMouseDown: ({ event, getOptions }) => {
         if (event.button === 0 && getOptions().openId) {
-          // event.preventDefault();
+          event.preventDefault();
           api.blockMenu.hide();
         }
         if (event.button === 2) event.preventDefault();

packages/selection/src/react/BlockSelectionPlugin.tsx

@@ -46,7 +46,6 @@ import {
 } from './transforms/setBlockSelectionNodes';
 import {
   copySelectedBlocks,
-  onChangeBlockSelection,
   pasteSelectedBlocks,
   selectInsertedBlocks,
 } from './utils';
@@ -62,6 +61,7 @@ export type BlockSelectionConfig = PluginConfig<
     query?: QueryNodeOptions;
     rightSelectionAreaClassName?: string;
     selectedIds?: Set<string>;
+    shadowInputRef?: React.RefObject<HTMLInputElement>;
     onKeyDownSelecting?: (e: KeyboardEvent) => void;
   } & BlockSelectionSelectors,
   {
@@ -82,6 +82,7 @@ export type BlockSelectionApi = {
   setSelectedIds: (
     options: Partial<ChangedElements> & { ids?: string[] }
   ) => void;
+  focus: () => void;
   getNodes: () => TNodeEntry[];
   resetSelectedIds: () => void;
   selectedAll: () => void;
@@ -90,7 +91,7 @@ export type BlockSelectionApi = {
 
 export const BlockSelectionAfterEditable: EditableSiblingComponent = () => {
   const editor = useEditorRef();
-  const { api, getOption, getOptions, useOption } =
+  const { api, getOption, getOptions, setOption, useOption } =
     useEditorPlugin<BlockSelectionConfig>({ key: 'blockSelection' });
   const isSelecting = useOption('isSelecting');
   const selectedIds = useOption('selectedIds');
@@ -102,11 +103,12 @@ export const BlockSelectionAfterEditable: EditableSiblingComponent = () => {
 
   React.useEffect(() => {
     setIsMounted(true);
+    setOption('shadowInputRef', inputRef);
 
     return () => {
       setIsMounted(false);
     };
-  }, []);
+  }, [setOption]);
 
   React.useEffect(() => {
     if (isSelecting && inputRef.current) {
@@ -278,6 +280,7 @@ export const BlockSelectionPlugin = createTPlatePlugin<BlockSelectionConfig>({
       maxLevel: 1,
     },
     selectedIds: new Set(),
+    shadowInputRef: { current: null },
   },
   plugins: [BlockMenuPlugin],
   render: {
@@ -293,8 +296,22 @@ export const BlockSelectionPlugin = createTPlatePlugin<BlockSelectionConfig>({
     afterEditable: BlockSelectionAfterEditable,
   },
   handlers: {
-    onChange: onChangeBlockSelection,
     onKeyDown: onKeyDownSelection,
+    onMouseDown: ({ api, editor, event, getOptions }) => {
+      const target = event.target as HTMLElement;
+
+      if (target.dataset.platePreventUnselect) return;
+
+      console.log(editor.getOption(BlockMenuPlugin, 'openId'), 'fj');
+
+      if (
+        event.button === 0 &&
+        getOptions().selectedIds!.size > 0 &&
+        !editor.getOption(BlockMenuPlugin, 'openId')
+      ) {
+        api.blockSelection.unselect();
+      }
+    },
   },
 })
   .extendOptions(({ getOptions }) => ({
@@ -303,6 +320,13 @@ export const BlockSelectionPlugin = createTPlatePlugin<BlockSelectionConfig>({
   }))
   .extendApi<Partial<BlockSelectionApi>>(
     ({ editor, getOption, getOptions, setOption }) => ({
+      focus: () => {
+        const shadowInputRef = getOption('shadowInputRef');
+
+        if (shadowInputRef?.current) {
+          shadowInputRef.current.focus({ preventScroll: true });
+        }
+      },
       getNodes: () => {
         const selectedIds = getOption('selectedIds');
 

packages/selection/src/react/transforms/duplicateBlockSelectionNodes.ts

@@ -30,9 +30,9 @@ export const duplicateBlockSelectionNodes = (
     })
     .filter(Boolean);
 
+  const api = editor.getApi(BlockSelectionPlugin);
+
   setTimeout(() => {
-    editor
-      .getApi(BlockSelectionPlugin)
-      .blockSelection.setSelectedIds({ ids } as any);
+    api.blockSelection.setSelectedIds({ ids } as any);
   }, 0);
 };

packages/selection/src/react/transforms/setBlockSelectionNodes.ts

@@ -35,10 +35,10 @@ export const setBlockSelectionIndent = (
   indent: number,
   options?: SetNodesOptions
 ) => {
+  const api = editor.getApi(BlockSelectionPlugin);
+
   withoutNormalizing(editor, () => {
-    const blocks = editor
-      .getApi(BlockSelectionPlugin)
-      .blockSelection.getNodes();
+    const blocks = api.blockSelection.getNodes();
 
     blocks.forEach(([node, path]) => {
       const prevIndent = (node as any).indent ?? 0;

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

@@ -3,6 +3,5 @@
  */
 
 export * from './copySelectedBlocks';
-export * from './onChangeBlockSelection';
 export * from './pasteSelectedBlocks';
 export * from './selectInsertedBlocks';