Merge pull request #577 from prezly/feature/dev-15524-story-editor-sn…

…ippet-dropdown-scroll-resets [DEV-15524] Fix - Make sure FloatingSnippetInput is not re-rendering if not needed
prezly · Jan 14, 2025 · 046755a · 046755a
2 parents cfbb1cf + d3768d6
commit 046755a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/packages/slate-editor/src/extensions/snippet/lib/useFloatingSnippetInput.ts b/packages/slate-editor/src/extensions/snippet/lib/useFloatingSnippetInput.ts
@@ -3,6 +3,8 @@ import type { DocumentNode } from '@prezly/slate-types';
 import type { SlateEditor } from '@udecode/plate-common';
 import { useState } from 'react';
 
+import { useFunction } from '#lib';
+
 import { EventsEditor } from '#modules/events';
 
 interface State {
@@ -13,29 +15,29 @@ interface Actions {
     close: () => void;
     open: () => void;
     rootClose: () => void;
-    submit: (node: DocumentNode) => Promise<void>;
+    submit: (node: DocumentNode) => void;
 }
 
 export function useFloatingSnippetInput(editor: SlateEditor): [State, Actions] {
     const [isOpen, setIsOpen] = useState<boolean>(false);
     const savedSelection = useSavedSelection();
 
-    function close() {
+    const close = useFunction(() => {
         savedSelection.restore(editor, { focus: true });
         setIsOpen(false);
-    }
+    });
 
-    function rootClose() {
+    const rootClose = useFunction(() => {
         setIsOpen(false);
-    }
+    });
 
-    function open() {
+    const open = useFunction(() => {
         EventsEditor.dispatchEvent(editor, 'snippet-dialog-opened');
         setIsOpen(true);
         savedSelection.save(editor);
-    }
+    });
 
-    async function submit(node: DocumentNode) {
+    const submit = useFunction((node: DocumentNode) => {
         EventsEditor.dispatchEvent(editor, 'snippet-dialog-submitted');
 
         close();
@@ -56,7 +58,7 @@ export function useFloatingSnippetInput(editor: SlateEditor): [State, Actions] {
                 type: 'error',
             });
         }
-    }
+    });
 
     return [{ isOpen }, { close, open, rootClose, submit }];
 }
diff --git a/packages/slate-editor/src/modules/components/FloatingSnippetInput/FloatingSnippetInput.tsx b/packages/slate-editor/src/modules/components/FloatingSnippetInput/FloatingSnippetInput.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode, RefObject } from 'react';
-import React from 'react';
+import React, { memo } from 'react';
 
 import { FloatingContainer } from '#modules/components';
 
@@ -13,7 +13,7 @@ interface Props {
     renderInput: () => ReactNode;
 }
 
-export function FloatingSnippetInput({
+function FloatingSnippetInputComponent({
     availableWidth,
     containerRef,
     onClose,
@@ -34,3 +34,5 @@ export function FloatingSnippetInput({
         </FloatingContainer.Container>
     );
 }
+
+export const FloatingSnippetInput = memo(FloatingSnippetInputComponent);
diff --git a/packages/slate-editor/src/modules/editor/Editor.tsx b/packages/slate-editor/src/modules/editor/Editor.tsx
@@ -850,6 +850,15 @@ export const Editor = forwardRef<EditorRef, EditorProps>((props, forwardedRef) =
         props.onChange(editor.serialize(value) as Value);
     });
 
+    const floatingSnippetRenderInput = useFunction(() => {
+        return (
+            withSnippets &&
+            withSnippets.renderInput({
+                onCreate: submitFloatingSnippetInput,
+            })
+        );
+    });
+
     return (
         <PopperOptionsContext.Provider value={popperMenuOptions}>
             <div
@@ -983,11 +992,7 @@ export const Editor = forwardRef<EditorRef, EditorProps>((props, forwardedRef) =
                                         containerRef={containerRef}
                                         onClose={closeFloatingSnippetInput}
                                         onRootClose={rootCloseFloatingSnippetInput}
-                                        renderInput={() =>
-                                            withSnippets.renderInput({
-                                                onCreate: submitFloatingSnippetInput,
-                                            })
-                                        }
+                                        renderInput={floatingSnippetRenderInput}
                                     />
                                 )}
                             </>