fix

Author: zbeyens

.changeset/cuddly-weeks-jam.md

@@ -0,0 +1,6 @@
+---
+'@udecode/plate-link': patch
+---
+
+- Fix floating link insert
+- Hide floating link edit when clicking outside

.changeset/curly-dolls-laugh.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-resizable': patch
+---
+
+Hide ResizeHandle when read-only

.changeset/rare-lemons-smell.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-floating': patch
+---
+
+Add `getDOMSelectionBoundingClientRect`

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
 

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;
                         }

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: [

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);
               }}
             >

packages/floating/src/utils/getDOMSelectionBoundingClientRect copy.ts renamed to packages/floating/src/utils/getDOMSelectionBoundingClientRect.ts

@@ -4,7 +4,7 @@
 
 export * from './createVirtualRef';
 export * from './getBoundingClientRect';
-export * from './getDOMSelectionBoundingClientRect copy';
+export * from './getDOMSelectionBoundingClientRect';
 export * from './getRangeBoundingClientRect';
 export * from './getSelectionBoundingClientRect';
 export * from './makeClientRect';

packages/floating/src/utils/index.ts

@@ -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,