fix

liudaolunboluo · Sep 2, 2024 · 182a700 · 182a700
1 parent 97f322d
commit 182a700
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 18 deletions.
diff --git a/.changeset/witty-oranges-punch.md b/.changeset/witty-oranges-punch.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-floating': patch
+---
+
+Fix: add state.showWhenReadOnly prop to show the toolbar when read-only
diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
@@ -8,8 +8,15 @@ Since Plate UI is not a component library, a changelog is maintained here.
 
 Use the [CLI](https://platejs.org/docs/components/cli) to install the latest version of the components.
 
+## September 2024 #14
+
+### September 10 #14.1
+
+- fix `floating-toolbar`: show toolbar when readOnly
+
 ## August 2024 #13
 
+
 ### August 27 #13.3
 
 - Migrate to Plate 37

diff --git a/apps/www/public/registry/styles/default/floating-toolbar-buttons.json b/apps/www/public/registry/styles/default/floating-toolbar-buttons.json
@@ -4,7 +4,7 @@
   ],
   "files": [
     {
-      "content": "import React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FloatingToolbarButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <>\n      {!readOnly && (\n        <>\n          <TurnIntoDropdownMenu />\n\n          <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n            <Icons.bold />\n          </MarkToolbarButton>\n          <MarkToolbarButton nodeType={ItalicPlugin.key} tooltip=\"Italic (⌘+I)\">\n            <Icons.italic />\n          </MarkToolbarButton>\n          <MarkToolbarButton\n            nodeType={UnderlinePlugin.key}\n            tooltip=\"Underline (⌘+U)\"\n          >\n            <Icons.underline />\n          </MarkToolbarButton>\n          <MarkToolbarButton\n            nodeType={StrikethroughPlugin.key}\n            tooltip=\"Strikethrough (⌘+⇧+M)\"\n          >\n            <Icons.strikethrough />\n          </MarkToolbarButton>\n          <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n            <Icons.code />\n          </MarkToolbarButton>\n        </>\n      )}\n\n      <MoreDropdownMenu />\n    </>\n  );\n}\n",
+      "content": "import React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FloatingToolbarButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <>\n      {!readOnly && (\n        <>\n          <TurnIntoDropdownMenu />\n\n          <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n            <Icons.bold />\n          </MarkToolbarButton>\n          <MarkToolbarButton nodeType={ItalicPlugin.key} tooltip=\"Italic (⌘+I)\">\n            <Icons.italic />\n          </MarkToolbarButton>\n          <MarkToolbarButton\n            nodeType={UnderlinePlugin.key}\n            tooltip=\"Underline (⌘+U)\"\n          >\n            <Icons.underline />\n          </MarkToolbarButton>\n          <MarkToolbarButton\n            nodeType={StrikethroughPlugin.key}\n            tooltip=\"Strikethrough (⌘+⇧+M)\"\n          >\n            <Icons.strikethrough />\n          </MarkToolbarButton>\n          <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n            <Icons.code />\n          </MarkToolbarButton>\n        </>\n      )}\n    </>\n  );\n}\n",
       "name": "floating-toolbar-buttons.tsx"
     }
   ],

diff --git a/apps/www/src/components/plate-ui/playground-floating-toolbar-buttons.tsx b/apps/www/src/components/plate-ui/playground-floating-toolbar-buttons.tsx
@@ -60,7 +60,7 @@ export function PlaygroundFloatingToolbarButtons({ id }: { id?: ValueId }) {
 
       {isEnabled('comment', id) && <CommentToolbarButton />}
 
-      <PlaygroundMoreDropdownMenu />
+      {!readOnly && <PlaygroundMoreDropdownMenu />}
     </>
   );
 }
diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx
@@ -375,7 +375,9 @@ export default function PlaygroundDemo({
               />
 
               {enabled['floating-toolbar'] && (
-                <FloatingToolbar>
+                <FloatingToolbar
+                  state={{ showWhenReadOnly: isEnabled('comment', id) }}
+                >
                   {enabled['floating-toolbar-buttons'] && (
                     <PlaygroundFloatingToolbarButtons id={id} />
                   )}

diff --git a/apps/www/src/registry/default/plate-ui/floating-toolbar-buttons.tsx b/apps/www/src/registry/default/plate-ui/floating-toolbar-buttons.tsx
@@ -12,7 +12,6 @@ import { useEditorReadOnly } from '@udecode/plate-common/react';
 import { Icons } from '@/components/icons';
 
 import { MarkToolbarButton } from './mark-toolbar-button';
-import { MoreDropdownMenu } from './more-dropdown-menu';
 import { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';
 
 export function FloatingToolbarButtons() {
@@ -47,8 +46,6 @@ export function FloatingToolbarButtons() {
           </MarkToolbarButton>
         </>
       )}
-
-      <MoreDropdownMenu />
     </>
   );
 }
diff --git a/packages/floating/src/hooks/useFloatingToolbar.ts b/packages/floating/src/hooks/useFloatingToolbar.ts
@@ -5,7 +5,10 @@ import {
   isSelectionExpanded,
   mergeProps,
 } from '@udecode/plate-common';
-import { useEditorSelector } from '@udecode/plate-common/react';
+import {
+  useEditorReadOnly,
+  useEditorSelector,
+} from '@udecode/plate-common/react';
 import { useFocused } from 'slate-react';
 
 import {
@@ -17,21 +20,22 @@ import {
 export type FloatingToolbarState = {
   floatingOptions?: UseVirtualFloatingOptions;
   hideToolbar?: boolean;
-  ignoreReadOnly?: boolean;
+  showWhenReadOnly?: boolean;
 };
 
 export const useFloatingToolbarState = ({
   editorId,
   floatingOptions,
   focusedEditorId,
   hideToolbar,
-  ignoreReadOnly,
+  showWhenReadOnly,
 }: {
   editorId: string;
   focusedEditorId: null | string;
 } & FloatingToolbarState) => {
   const selectionExpanded = useEditorSelector(isSelectionExpanded, []);
   const selectionText = useEditorSelector(getSelectionText, []);
+  const readOnly = useEditorReadOnly();
 
   const focused = useFocused();
 
@@ -57,14 +61,15 @@ export const useFloatingToolbarState = ({
     focused,
     focusedEditorId,
     hideToolbar,
-    ignoreReadOnly,
     mousedown,
     open,
+    readOnly,
     selectionExpanded,
     selectionText,
     setMousedown,
     setOpen,
     setWaitForCollapsedSelection,
+    showWhenReadOnly,
     waitForCollapsedSelection,
   };
 };
@@ -74,20 +79,21 @@ export const useFloatingToolbar = ({
   floating,
   focusedEditorId,
   hideToolbar,
-  ignoreReadOnly,
   mousedown,
   open,
+  readOnly,
   selectionExpanded,
   selectionText,
   setMousedown,
   setOpen,
   setWaitForCollapsedSelection,
+  showWhenReadOnly,
   waitForCollapsedSelection,
 }: ReturnType<typeof useFloatingToolbarState>) => {
   // On refocus, the editor keeps the previous selection,
   // so we need to wait it's collapsed at the new position before displaying the floating toolbar.
   React.useEffect(() => {
-    if (!(editorId === focusedEditorId) || ignoreReadOnly) {
+    if (!(editorId === focusedEditorId)) {
       setWaitForCollapsedSelection(true);
     }
     if (!selectionExpanded) {
@@ -96,7 +102,6 @@ export const useFloatingToolbar = ({
   }, [
     editorId,
     focusedEditorId,
-    ignoreReadOnly,
     selectionExpanded,
     setWaitForCollapsedSelection,
   ]);
@@ -106,7 +111,6 @@ export const useFloatingToolbar = ({
     const mousedown = () => setMousedown(true);
 
     document.addEventListener('mouseup', mouseup);
-
     document.addEventListener('mousedown', mousedown);
 
     return () => {
@@ -122,13 +126,14 @@ export const useFloatingToolbar = ({
       !selectionExpanded ||
       !selectionText ||
       (mousedown && !open) ||
-      hideToolbar
+      hideToolbar ||
+      (readOnly && !showWhenReadOnly)
     ) {
       setOpen(false);
     } else if (
       selectionText &&
       selectionExpanded &&
-      !waitForCollapsedSelection
+      (!waitForCollapsedSelection || readOnly)
     ) {
       setOpen(true);
     }
@@ -137,12 +142,13 @@ export const useFloatingToolbar = ({
     editorId,
     focusedEditorId,
     hideToolbar,
-    ignoreReadOnly,
+    showWhenReadOnly,
     selectionExpanded,
     selectionText,
     mousedown,
     waitForCollapsedSelection,
     open,
+    readOnly,
   ]);
 
   const { update } = floating;

diff --git a/templates/plate-playground-template/src/components/plate-ui/floating-toolbar-buttons.tsx b/templates/plate-playground-template/src/components/plate-ui/floating-toolbar-buttons.tsx
@@ -53,7 +53,7 @@ export function FloatingToolbarButtons() {
 
       <CommentToolbarButton />
 
-      <MoreDropdownMenu />
+      {!readOnly && <MoreDropdownMenu />}
     </>
   );
 }