perf: fix rerenders of toolbar on every keydown

Author: gearoffortune

src/bundle/MarkupEditorView.tsx

@@ -1,4 +1,4 @@
-import {memo} from 'react';
+import {memo, useCallback} from 'react';
 
 import type {QAProps} from '@gravity-ui/uikit';
 
@@ -62,6 +62,8 @@ export const MarkupEditorView = memo<MarkupEditorViewProps>((props) => {
         });
     });
 
+    const toolbarFocus = useCallback(() => editor.focus(), [editor]);
+
     return (
         <div className={b({toolbar: toolbarVisible}, [className])} data-qa={qa}>
             {toolbarVisible ? (
@@ -80,7 +82,7 @@ export const MarkupEditorView = memo<MarkupEditorViewProps>((props) => {
                         hiddenActionsConfig={hiddenActionsConfig}
                         stickyToolbar={stickyToolbar}
                         toolbarConfig={toolbarConfig}
-                        toolbarFocus={() => editor.focus()}
+                        toolbarFocus={toolbarFocus}
                         settingsVisible={settingsVisible}
                         className={b('toolbar', [toolbarClassName])}
                         toolbarDisplay={toolbarDisplay}

src/bundle/ToolbarView.tsx

@@ -1,12 +1,17 @@
-import {useLayoutEffect, useRef} from 'react';
+import {memo, useCallback, useLayoutEffect, useRef} from 'react';
 
 import type {QAProps} from '@gravity-ui/uikit';
 import {useUpdate} from 'react-use';
 
 import type {ClassNameProps} from '../classname';
 import {i18n} from '../i18n/menubar';
 import {useSticky} from '../react-utils/useSticky';
-import {FlexToolbar, type ToolbarData, type ToolbarDisplay, type ToolbarItemData} from '../toolbar';
+import {
+    FlexToolbar as FlexToolbarExternal,
+    type ToolbarData,
+    type ToolbarDisplay,
+    type ToolbarItemData,
+} from '../toolbar';
 
 import type {EditorInt} from './Editor';
 import {stickyCn} from './sticky';
@@ -26,6 +31,8 @@ export type ToolbarViewProps<T> = ClassNameProps &
         toolbarDisplay?: ToolbarDisplay;
     };
 
+const FlexToolbar = memo(FlexToolbarExternal) as typeof FlexToolbarExternal;
+
 export function ToolbarView<T>({
     editor,
     editorMode,
@@ -53,6 +60,13 @@ export function ToolbarView<T>({
 
     const mobile = editor.mobile;
 
+    const handleClick = useCallback(
+        (id: string, attrs: {[key: string]: any} | undefined) => {
+            editor.emit('toolbar-action', {id, attrs, editorMode});
+        },
+        [editor, editorMode],
+    );
+
     return (
         <div
             data-qa={qa}
@@ -72,7 +86,7 @@ export function ToolbarView<T>({
                 editor={toolbarEditor}
                 focus={toolbarFocus}
                 dotsTitle={i18n('more_action')}
-                onClick={(id, attrs) => editor.emit('toolbar-action', {id, attrs, editorMode})}
+                onClick={handleClick}
                 display={toolbarDisplay}
                 disableTooltip={mobile}
                 disableHotkey={mobile}

src/bundle/WysiwygEditorView.tsx

@@ -1,4 +1,4 @@
-import {memo} from 'react';
+import {memo, useCallback} from 'react';
 
 import type {QAProps} from '@gravity-ui/uikit';
 
@@ -59,6 +59,8 @@ export const WysiwygEditorView = memo<WysiwygEditorViewProps>((props) => {
         });
     });
 
+    const toolbarFocus = useCallback(() => editor.focus(), [editor]);
+
     return (
         <div className={b({toolbar: toolbarVisible}, [className])} data-qa={qa}>
             {toolbarVisible ? (
@@ -69,7 +71,7 @@ export const WysiwygEditorView = memo<WysiwygEditorViewProps>((props) => {
                     toolbarEditor={editor}
                     stickyToolbar={stickyToolbar}
                     toolbarConfig={toolbarConfig}
-                    toolbarFocus={() => editor.focus()}
+                    toolbarFocus={toolbarFocus}
                     hiddenActionsConfig={hiddenActionsConfig}
                     settingsVisible={settingsVisible}
                     className={b('toolbar', [toolbarClassName])}