Merge pull request #551 from prezly/feature/care-1487-improve-slate-e…

…ditor-performance [CARE-1487] Performance optimizations
prezly · Jul 11, 2024 · 58aa680 · 58aa680
2 parents fe24bf1 + b965010
commit 58aa680
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 25 deletions.
diff --git a/packages/slate-editor/src/components/EditorBlock/EditorBlock.tsx b/packages/slate-editor/src/components/EditorBlock/EditorBlock.tsx
@@ -9,7 +9,7 @@ import type { RenderElementProps } from 'slate-react';
 import { ReactEditor, useSelected, useSlateStatic } from 'slate-react';
 
 import { NewParagraphDelimiter } from '#components';
-import { useFunction, useSlateDom } from '#lib';
+import { useFunction } from '#lib';
 
 import {
     type PopperOptionsContextType,
@@ -99,7 +99,6 @@ export const EditorBlock = forwardRef<HTMLDivElement, Props>(function (
     }
 
     const editor = useSlateStatic();
-    const editorElement = useSlateDom(editor);
     const isNodeSelected = useSelected();
     const isOnlyBlockSelected =
         isNodeSelected &&
@@ -175,26 +174,19 @@ export const EditorBlock = forwardRef<HTMLDivElement, Props>(function (
                 ref={setContainer}
                 style={{ width }}
             >
-                {isOnlyBlockSelected &&
-                    !loading &&
-                    renderMenu &&
-                    container &&
-                    editorElement &&
-                    menuOpen && (
-                        <Menu
-                            className={styles.Menu}
-                            onClick={preventBubbling}
-                            popperOptions={{
-                                ...popperOptions,
-                                placement: menuPlacement ?? popperOptions.placement,
-                            }}
-                            reference={container}
-                        >
-                            {({ updatePosition }) =>
-                                renderMenu({ onClose: closeMenu, updatePosition })
-                            }
-                        </Menu>
-                    )}
+                {isOnlyBlockSelected && !loading && renderMenu && container && menuOpen && (
+                    <Menu
+                        className={styles.Menu}
+                        onClick={preventBubbling}
+                        popperOptions={{
+                            ...popperOptions,
+                            placement: menuPlacement ?? popperOptions.placement,
+                        }}
+                        reference={container}
+                    >
+                        {({ updatePosition }) => renderMenu({ onClose: closeMenu, updatePosition })}
+                    </Menu>
+                )}
                 {isOverlayEnabled && (
                     <Overlay className={styles.Overlay} onClick={handleFrameClick} />
                 )}

diff --git a/packages/slate-editor/src/modules/editor/Editor.tsx b/packages/slate-editor/src/modules/editor/Editor.tsx
@@ -141,8 +141,45 @@ export const Editor = forwardRef<EditorRef, EditorProps>((props, forwardedRef) =
         [setFloatingAddMenuOpen],
     );
 
-    const extensions = Array.from(
-        getEnabledExtensions({
+    const extensions = useMemo(
+        () =>
+            Array.from(
+                getEnabledExtensions({
+                    align,
+                    availableWidth,
+                    onFloatingAddMenuToggle,
+                    withAllowedBlocks,
+                    withAttachments,
+                    withAutoformat,
+                    withBlockquotes,
+                    withButtonBlocks,
+                    withCallouts,
+                    withCoverage,
+                    withCustomNormalization,
+                    withDivider,
+                    withEmbeds,
+                    withFloatingAddMenu,
+                    withGalleries,
+                    withGalleryBookmarks,
+                    withHeadings,
+                    withImages,
+                    withInlineContacts,
+                    withInlineLinks,
+                    withLists,
+                    withPlaceholders,
+                    withPressContacts,
+                    withTextStyling,
+                    withTables,
+                    withUserMentions,
+                    withVariables,
+                    withVideos,
+                    withWebBookmarks,
+                    withStoryEmbeds,
+                    withStoryBookmarks,
+                    withSnippets,
+                }),
+            ),
+        [
             align,
             availableWidth,
             onFloatingAddMenuToggle,
@@ -175,7 +212,7 @@ export const Editor = forwardRef<EditorRef, EditorProps>((props, forwardedRef) =
             withStoryEmbeds,
             withStoryBookmarks,
             withSnippets,
-        }),
+        ],
     );
 
     const { editor, onKeyDownList } = useCreateEditor({