Reduce selection toolbar rerenders (#291)

client/components/Editor.tsx

@@ -28,7 +28,6 @@ import {
   setSelection,
   useSaveSelection,
 } from '~/lib/editor/restoreSelection';
-import { SelectionToolbar } from '~/lib/editor/SelectionToolbar';
 import { SlatePlaywrightEffects } from '~/lib/editor/slate-playwright';
 import { useInitialValue } from '~/lib/editor/useInitialValue';
 import { useNavigateAwayOnDelete } from '~/lib/editor/useNavigateAwayOnDelete';
@@ -209,8 +208,6 @@ export const Editor = ({ clientId, initialDocument }: EditorProps) => {
         />
 
         <SlatePlaywrightEffects />
-
-        {!isReadOnly && <SelectionToolbar />}
       </Plate>
     ),
     [plugins, isReadOnly, fontSize, lockedProps]

client/lib/editor/plugins.tsx

@@ -54,6 +54,7 @@ import { softBreakOptions } from '~/lib/editor/softBreak';
 import { createSplitInsertedDataIntoParagraphsPlugin } from '~/lib/editor/splitInsertedDataIntoParagraphs';
 import { tabbableOptions } from '~/lib/editor/tabbable';
 import { groupedClassNames } from '../groupedClassNames';
+import { createSelectionToolbarPlugin } from './selectionToolbar';
 
 const makeElementComponent =
   (Component: ElementType, className?: string) =>
@@ -167,6 +168,7 @@ export const usePlugins = () => {
       createTrailingBlockPlugin(),
       createAutoformatPlugin(autoformatOptions),
       createSplitInsertedDataIntoParagraphsPlugin(),
+      createSelectionToolbarPlugin(),
     ],
     []
   );

client/lib/editor/selectionToolbar.tsx

@@ -0,0 +1,79 @@
+import React, { MouseEvent } from 'react';
+import {
+  createPluginFactory,
+  isRangeInSameBlock,
+  isSelectionExpanded,
+  useEditorReadOnly,
+  useEditorState,
+} from '@udecode/plate';
+import { useSlateSelector } from 'slate-react';
+import { FloatingToolbar, FloatingToolbarItem } from './FloatingToolbar';
+import {
+  formattingButtonClassNames,
+  useInlineFormattingButtons,
+} from './FormattingToolbar';
+
+const SelectionToolbar = () => {
+  const open = useSlateSelector(
+    (editor) =>
+      isSelectionExpanded(editor as any) &&
+      (isRangeInSameBlock(editor as any) ?? false),
+    /**
+     * If open is true, we want to rerender every time the selection changes so
+     * that we keep the toolbar position up to date. If open is false, we only
+     * want to rerender when it becomes true.
+     */
+    (prevOpen, newOpen) => !prevOpen && !newOpen
+  );
+
+  const readOnly = useEditorReadOnly();
+  if (readOnly) return null;
+
+  return (
+    <FloatingToolbar
+      open={open}
+      items={open && <SelectionToolbarInner />}
+      tippyProps={{
+        getReferenceClientRect: () => {
+          const selection = window.getSelection()!;
+          const range = selection.getRangeAt(0);
+          return range.getBoundingClientRect();
+        },
+      }}
+      containerProps={
+        {
+          'data-testid': 'selection-toolbar',
+        } as any
+      }
+    />
+  );
+};
+
+const SelectionToolbarInner = () => {
+  const editor = useEditorState();
+
+  const formattingButtons = useInlineFormattingButtons(editor).filter(
+    ({ disabled }) => !disabled
+  );
+
+  return (
+    <>
+      {formattingButtons.map(({ label, icon, active, onClick }) => (
+        <FloatingToolbarItem
+          key={label}
+          icon={icon}
+          label={label}
+          className={formattingButtonClassNames}
+          data-active={active}
+          onClick={onClick}
+          onMouseDown={(event: MouseEvent) => event.preventDefault()}
+        />
+      ))}
+    </>
+  );
+};
+
+export const createSelectionToolbarPlugin = createPluginFactory({
+  key: 'selectionToolbar',
+  renderAfterEditable: SelectionToolbar,
+});

package.json

@@ -22,7 +22,7 @@
     "@rails/actioncable": "^7.1.2",
     "@tippyjs/react": "^4.2.6",
     "@types/js-cookie": "^3.0.6",
-    "@udecode/plate": "^26.0.6",
+    "@udecode/plate": "^27.0.3",
     "axios": "^1.6.2",
     "comlink": "^4.4.1",
     "compressorjs": "^1.2.1",
@@ -84,7 +84,7 @@
     "tailwindcss": "^3.3.6",
     "typescript": "^5.3.3",
     "typescript-language-server": "^3.3.2",
-    "vite": "^5.0.10",
+    "vite": "^5.0.0",
     "vite-plugin-ruby": "^5.0.0"
   },
   "packageManager": "yarn@4.0.2",