Merge pull request #3622 from udecode/refactor/selection

Fix link
udecode · Oct 10, 2024 · f2d14b1 · f2d14b1
2 parents 67ec113 + 7291340
commit f2d14b1
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 11 deletions.
diff --git a/.changeset/cuddly-weeks-jam.md b/.changeset/cuddly-weeks-jam.md
@@ -0,0 +1,6 @@
+---
+'@udecode/plate-link': patch
+---
+
+- Fix floating link insert
+- Hide floating link edit when clicking outside
diff --git a/.changeset/curly-dolls-laugh.md b/.changeset/curly-dolls-laugh.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-resizable': patch
+---
+
+Hide ResizeHandle when read-only
diff --git a/.changeset/rare-lemons-smell.md b/.changeset/rare-lemons-smell.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-floating': patch
+---
+
+Add `getDOMSelectionBoundingClientRect`
diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
@@ -14,8 +14,9 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 ### October 10 #15.3
 
 - `dropdown-menu`(`DropdownMenuContent`): prevent default on `onCloseAutoFocus`
-- `floating-toolbar`(`FloatingToolbar`): remove portal, hide on click outside
+- `floating-toolbar`(`FloatingToolbar`): remove portal, hide on click outside, hide when floating link open
 - `turn-into-dropdown-menu`(`TurnIntoDropdownMenu`): add indent list items
+- `table-dropdown-menu`(`TableDropdownMenu`): select in `insertTable`
 
 ### October 4 #15.2
 

diff --git a/apps/www/src/components/plate-ui/playground-insert-dropdown-menu.tsx b/apps/www/src/components/plate-ui/playground-insert-dropdown-menu.tsx
@@ -203,17 +203,23 @@ export function PlaygroundInsertDropdownMenu(props: DropdownMenuProps) {
                           break;
                         }
                         case CodeBlockPlugin.key: {
-                          insertEmptyCodeBlock(editor);
+                          insertEmptyCodeBlock(editor, {
+                            insertNodesOptions: { select: true },
+                          });
 
                           break;
                         }
                         case ImagePlugin.key: {
-                          await insertMedia(editor, { type: ImagePlugin.key });
+                          await insertMedia(editor, {
+                            select: true,
+                            type: ImagePlugin.key,
+                          });
 
                           break;
                         }
                         case MediaEmbedPlugin.key: {
                           await insertMedia(editor, {
+                            select: true,
                             type: MediaEmbedPlugin.key,
                           });
 
@@ -239,7 +245,7 @@ export function PlaygroundInsertDropdownMenu(props: DropdownMenuProps) {
                           break;
                         }
                         case TablePlugin.key: {
-                          insertTable(editor);
+                          insertTable(editor, {}, { select: true });
 
                           break;
                         }

diff --git a/apps/www/src/registry/default/plate-ui/floating-toolbar.tsx b/apps/www/src/registry/default/plate-ui/floating-toolbar.tsx
@@ -6,6 +6,7 @@ import { cn, withRef } from '@udecode/cn';
 import {
   useComposedRef,
   useEditorId,
+  useEditorRef,
   useEventEditorSelectors,
 } from '@udecode/plate-common/react';
 import {
@@ -15,6 +16,7 @@ import {
   useFloatingToolbar,
   useFloatingToolbarState,
 } from '@udecode/plate-floating';
+import { LinkPlugin } from '@udecode/plate-link/react';
 
 import { Toolbar } from './toolbar';
 
@@ -24,12 +26,15 @@ export const FloatingToolbar = withRef<
     state?: FloatingToolbarState;
   }
 >(({ children, state, ...props }, componentRef) => {
+  const editor = useEditorRef();
   const editorId = useEditorId();
   const focusedEditorId = useEventEditorSelectors.focus();
+  const isFloatingLinkOpen = !!editor.useOption(LinkPlugin, 'mode');
 
   const floatingToolbarState = useFloatingToolbarState({
     editorId,
     focusedEditorId,
+    hideToolbar: isFloatingLinkOpen,
     ...state,
     floatingOptions: {
       middleware: [

diff --git a/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx
@@ -61,7 +61,7 @@ export function TableDropdownMenu(props: DropdownMenuProps) {
             <DropdownMenuItem
               className="min-w-[180px]"
               onSelect={() => {
-                insertTable(editor);
+                insertTable(editor, {}, { select: true });
                 focusEditor(editor);
               }}
             >

diff --git a/packages/floating/src/utils/getDOMSelectionBoundingClientRect.ts b/packages/floating/src/utils/getDOMSelectionBoundingClientRect.ts
@@ -0,0 +1,16 @@
+import type { ClientRectObject } from '@floating-ui/core';
+
+import { getDefaultBoundingClientRect } from '../createVirtualElement';
+
+/** Get bounding client rect of the editor selection */
+export const getDOMSelectionBoundingClientRect = (): ClientRectObject => {
+  const domSelection = window.getSelection();
+
+  if (!domSelection || domSelection.rangeCount < 1) {
+    return getDefaultBoundingClientRect();
+  }
+
+  const domRange = domSelection.getRangeAt(0);
+
+  return domRange.getBoundingClientRect();
+};
diff --git a/packages/floating/src/utils/index.ts b/packages/floating/src/utils/index.ts
@@ -4,6 +4,7 @@
 
 export * from './createVirtualRef';
 export * from './getBoundingClientRect';
+export * from './getDOMSelectionBoundingClientRect';
 export * from './getRangeBoundingClientRect';
 export * from './getSelectionBoundingClientRect';
 export * from './makeClientRect';

diff --git a/packages/link/src/react/components/FloatingLink/useFloatingLinkEdit.ts b/packages/link/src/react/components/FloatingLink/useFloatingLinkEdit.ts
@@ -7,14 +7,16 @@ import {
   someNode,
 } from '@udecode/plate-common';
 import {
+  useComposedRef,
   useEditorPlugin,
   useEditorReadOnly,
   useEditorVersion,
   useHotkeys,
+  useOnClickOutside,
 } from '@udecode/plate-common/react';
 import {
+  getDOMSelectionBoundingClientRect,
   getRangeBoundingClientRect,
-  getSelectionBoundingClientRect,
 } from '@udecode/plate-floating';
 
 import type { LinkFloatingToolbarState } from './useFloatingLinkInsert';
@@ -29,7 +31,8 @@ import { useVirtualFloatingLink } from './useVirtualFloatingLink';
 export const useFloatingLinkEditState = ({
   floatingOptions,
 }: LinkFloatingToolbarState = {}) => {
-  const { editor, getOptions, type, useOption } = useEditorPlugin(LinkPlugin);
+  const { api, editor, getOptions, type, useOption } =
+    useEditorPlugin(LinkPlugin);
 
   const { triggerFloatingLinkHotkeys } = getOptions();
   const readOnly = useEditorReadOnly();
@@ -52,7 +55,7 @@ export const useFloatingLinkEditState = ({
       });
     }
 
-    return getSelectionBoundingClientRect(editor);
+    return getDOMSelectionBoundingClientRect();
   }, [editor, type]);
 
   const isOpen = open && mode === 'edit';
@@ -118,6 +121,10 @@ export const useFloatingLinkEdit = ({
 
   useFloatingLinkEscape();
 
+  const clickOutsideRef = useOnClickOutside(() => {
+    api.floatingLink.hide();
+  });
+
   return {
     editButtonProps: {
       onClick: () => {
@@ -130,7 +137,7 @@ export const useFloatingLinkEdit = ({
         zIndex: 50,
       },
     },
-    ref: floating.refs.setFloating,
+    ref: useComposedRef(floating.refs.setFloating, clickOutsideRef),
     unlinkButtonProps: {
       onClick: () => {
         unwrapLink(editor);

diff --git a/packages/link/src/react/components/FloatingLink/useFloatingLinkInsert.ts b/packages/link/src/react/components/FloatingLink/useFloatingLinkInsert.ts
@@ -10,7 +10,7 @@ import {
 } from '@udecode/plate-common/react';
 import {
   type UseVirtualFloatingOptions,
-  getSelectionBoundingClientRect,
+  getDOMSelectionBoundingClientRect,
 } from '@udecode/plate-floating';
 import { useFocused } from 'slate-react';
 
@@ -36,7 +36,7 @@ export const useFloatingLinkInsertState = ({
 
   const floating = useVirtualFloatingLink({
     editorId: editor.id,
-    getBoundingClientRect: () => getSelectionBoundingClientRect(editor),
+    getBoundingClientRect: getDOMSelectionBoundingClientRect,
     open: isOpen && mode === 'insert',
     whileElementsMounted: () => () => {},
     ...floatingOptions,

diff --git a/packages/resizable/src/components/ResizeHandle.tsx b/packages/resizable/src/components/ResizeHandle.tsx
@@ -6,6 +6,7 @@ import {
   createAtomStore,
   createPrimitiveComponent,
 } from '@udecode/plate-common/react';
+import { useReadOnly } from 'slate-react';
 
 import type { ResizeDirection, ResizeEvent } from '../types';
 
@@ -43,6 +44,7 @@ export const useResizeHandleState = ({
   onResize: onResizeProp,
   onTouchStart,
 }: ResizeHandleOptions) => {
+  const readOnly = useReadOnly();
   const onResizeStore = useResizeHandleStore().get.onResize();
   const onResize = onResizeProp ?? onResizeStore;
 
@@ -110,6 +112,7 @@ export const useResizeHandleState = ({
     initialSize,
     isHorizontal,
     isResizing,
+    readOnly,
     setInitialPosition,
     setInitialSize,
     setIsResizing,
@@ -124,6 +127,7 @@ export const useResizeHandleState = ({
 export const useResizeHandle = ({
   isHorizontal,
   isResizing,
+  readOnly,
   setInitialPosition,
   setInitialSize,
   setIsResizing,
@@ -167,6 +171,7 @@ export const useResizeHandle = ({
   };
 
   return {
+    hidden: readOnly,
     props: {
       onMouseDown: handleMouseDown,
       onMouseOut: handleMouseOut,