Merge pull request #3302 from udecode/fix/floating

Fix: Floating toolbar can't open when mouse is released outside of editor.
udecode · Jun 23, 2024 · 0661079 · 0661079
2 parents 984cc3f + f779372
commit 0661079
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 20 deletions.
diff --git a/.changeset/five-rockets-eat.md b/.changeset/five-rockets-eat.md
@@ -0,0 +1,5 @@
+---
+"@udecode/plate-floating": patch
+---
+
+Fix: Floating toolbar can't open when mouse is released outside of editor.
diff --git a/apps/www/src/components/ui/sheet.tsx b/apps/www/src/components/ui/sheet.tsx
@@ -11,7 +11,7 @@ const Sheet = SheetPrimitive.Root;
 
 const SheetTrigger = SheetPrimitive.Trigger;
 
-const portalVariants = cva('fixed z-100 flex', {
+const portalVariants = cva('fixed z-[100] flex', {
   defaultVariants: { modal: true, position: 'right' },
   variants: {
     modal: {

diff --git a/packages/floating/src/hooks/useFloatingToolbar.ts b/packages/floating/src/hooks/useFloatingToolbar.ts
@@ -1,10 +1,6 @@
 import React from 'react';
 
-import {
-  toDOMNode,
-  useEditorRef,
-  useEditorSelector,
-} from '@udecode/plate-common';
+import { useEditorSelector } from '@udecode/plate-common';
 import {
   getSelectionText,
   isSelectionExpanded,
@@ -38,7 +34,6 @@ export const useFloatingToolbarState = ({
   const selectionText = useEditorSelector(getSelectionText, []);
 
   const focused = useFocused();
-  const editor = useEditorRef();
 
   const [open, setOpen] = React.useState(false);
   const [waitForCollapsedSelection, setWaitForCollapsedSelection] =
@@ -57,7 +52,6 @@ export const useFloatingToolbarState = ({
   );
 
   return {
-    editor,
     editorId,
     floating,
     focused,
@@ -76,7 +70,6 @@ export const useFloatingToolbarState = ({
 };
 
 export const useFloatingToolbar = ({
-  editor,
   editorId,
   floating,
   focusedEditorId,
@@ -109,19 +102,16 @@ export const useFloatingToolbar = ({
   ]);
 
   React.useEffect(() => {
-    const container = toDOMNode(editor, editor);
     const mouseup = () => setMousedown(false);
     const mousedown = () => setMousedown(true);
 
-    if (!container) return;
-
-    container.addEventListener('mouseup', mouseup);
+    document.addEventListener('mouseup', mouseup);
 
     document.addEventListener('mousedown', mousedown);
 
     return () => {
-      container.removeEventListener('mouseup', mouseup);
-      container.removeEventListener('mousedown', mousedown);
+      document.removeEventListener('mouseup', mouseup);
+      document.removeEventListener('mousedown', mousedown);
     };
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/yarn.lock b/yarn.lock
@@ -6194,7 +6194,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-media@npm:34.0.2, @udecode/plate-media@workspace:^, @udecode/plate-media@workspace:packages/media":
+"@udecode/plate-media@npm:34.1.0, @udecode/plate-media@workspace:^, @udecode/plate-media@workspace:packages/media":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-media@workspace:packages/media"
   dependencies:
@@ -6363,15 +6363,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-serializer-docx@npm:34.0.7, @udecode/plate-serializer-docx@workspace:^, @udecode/plate-serializer-docx@workspace:packages/serializer-docx":
+"@udecode/plate-serializer-docx@npm:34.1.0, @udecode/plate-serializer-docx@workspace:^, @udecode/plate-serializer-docx@workspace:packages/serializer-docx":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-serializer-docx@workspace:packages/serializer-docx"
   dependencies:
     "@udecode/plate-common": "workspace:^"
     "@udecode/plate-heading": "npm:34.0.7"
     "@udecode/plate-indent": "npm:34.0.0"
     "@udecode/plate-indent-list": "npm:34.0.0"
-    "@udecode/plate-media": "npm:34.0.2"
+    "@udecode/plate-media": "npm:34.1.0"
     "@udecode/plate-paragraph": "npm:34.0.0"
     "@udecode/plate-table": "npm:34.0.0"
     validator: "npm:^13.11.0"
@@ -6635,7 +6635,7 @@ __metadata:
     "@udecode/plate-line-height": "npm:34.0.0"
     "@udecode/plate-link": "npm:34.0.6"
     "@udecode/plate-list": "npm:34.0.0"
-    "@udecode/plate-media": "npm:34.0.2"
+    "@udecode/plate-media": "npm:34.1.0"
     "@udecode/plate-mention": "npm:34.0.8"
     "@udecode/plate-node-id": "npm:34.0.0"
     "@udecode/plate-normalizers": "npm:34.0.0"
@@ -6644,7 +6644,7 @@ __metadata:
     "@udecode/plate-resizable": "npm:34.0.0"
     "@udecode/plate-select": "npm:34.0.0"
     "@udecode/plate-serializer-csv": "npm:34.0.0"
-    "@udecode/plate-serializer-docx": "npm:34.0.7"
+    "@udecode/plate-serializer-docx": "npm:34.1.0"
     "@udecode/plate-serializer-html": "npm:34.0.0"
     "@udecode/plate-serializer-md": "npm:34.0.0"
     "@udecode/plate-suggestion": "npm:34.0.0"