feat(toolbars): fixed types, i18n, memo

gravity-ui · Dec 19, 2024 · f0524e0 · f0524e0
1 parent e29ff33
commit f0524e0
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 12 deletions.
diff --git a/src/bundle/MarkdownEditorView.tsx b/src/bundle/MarkdownEditorView.tsx
@@ -82,6 +82,10 @@ export const MarkdownEditorView = React.forwardRef<HTMLDivElement, MarkdownEdito
             toolbarsPreset,
             toaster,
             stickyToolbar,
+            wysiwygToolbarConfig: initialWysiwygToolbarConfig,
+            markupToolbarConfig: initialMarkupToolbarConfig,
+            wysiwygHiddenActionsConfig: initialWysiwygHiddenActionsConfig,
+            markupHiddenActionsConfig: initialMarkupHiddenActionsConfig,
             enableSubmitInPreview = true,
             hidePreviewAfterSubmit = false,
         } = props;
@@ -91,11 +95,27 @@ export const MarkdownEditorView = React.forwardRef<HTMLDivElement, MarkdownEdito
             markupToolbarConfig,
             wysiwygHiddenActionsConfig,
             markupHiddenActionsConfig,
-        } = getToolbarsConfigs({
-            toolbarsPreset,
-            props,
-            preset: editor.preset,
-        });
+        } = useMemo(
+            () =>
+                getToolbarsConfigs({
+                    toolbarsPreset,
+                    props: {
+                        wysiwygToolbarConfig: initialWysiwygToolbarConfig,
+                        markupToolbarConfig: initialMarkupToolbarConfig,
+                        wysiwygHiddenActionsConfig: initialWysiwygHiddenActionsConfig,
+                        markupHiddenActionsConfig: initialMarkupHiddenActionsConfig,
+                    },
+                    preset: editor.preset,
+                }),
+            [
+                toolbarsPreset,
+                initialWysiwygToolbarConfig,
+                initialMarkupToolbarConfig,
+                initialWysiwygHiddenActionsConfig,
+                initialMarkupHiddenActionsConfig,
+                editor.preset,
+            ],
+        );
 
         const rerender = useUpdate();
         React.useLayoutEffect(() => {

diff --git a/src/bundle/toolbar/utils.ts b/src/bundle/toolbar/utils.ts
@@ -1,7 +1,6 @@
 import {ToolbarName} from '../../modules/toolbars/constants';
 import {commonmark, defaultPreset, full, yfm, zero} from '../../modules/toolbars/presets';
 import type {
-    EditorPreset,
     ToolbarItem,
     ToolbarItemMarkup,
     ToolbarItemWysiwyg,
@@ -10,8 +9,9 @@ import type {
 import type {MToolbarData, MToolbarItemData, WToolbarData, WToolbarItemData} from '../../toolbar';
 import {ToolbarDataType, ToolbarIconData} from '../../toolbar';
 import type {MarkdownEditorViewProps} from '../MarkdownEditorView';
+import {MarkdownEditorPreset} from '../types';
 
-const defaultPresets: Record<EditorPreset, ToolbarsPreset> = {
+const defaultPresets: Record<MarkdownEditorPreset, ToolbarsPreset> = {
     zero,
     commonmark,
     default: defaultPreset,
@@ -60,7 +60,7 @@ const transformItem = (
 
 export const createConfig = <T extends WToolbarData | MToolbarData>(
     editorType: 'wysiwyg' | 'markup',
-    toolbarPreset: ToolbarsPreset | EditorPreset,
+    toolbarPreset: ToolbarsPreset | MarkdownEditorPreset,
     toolbarName: string,
 ): T => {
     const preset =
@@ -100,7 +100,7 @@ interface GetToolbarsConfigsArgs {
         | 'wysiwygHiddenActionsConfig'
         | 'markupHiddenActionsConfig'
     >;
-    preset: EditorPreset;
+    preset: MarkdownEditorPreset;
 }
 export const getToolbarsConfigs = ({toolbarsPreset, props, preset}: GetToolbarsConfigsArgs) => {
     const wysiwygToolbarConfig = toolbarsPreset

diff --git a/src/i18n/menubar/en.json b/src/i18n/menubar/en.json
@@ -44,6 +44,7 @@
   "mermaid": "Mermaid",
   "mono": "Monospace",
   "more_action": "More action",
+  "move_list": "Move list item",
   "note": "Note",
   "olist": "Ordered list",
   "quote": "Quote",

diff --git a/src/i18n/menubar/ru.json b/src/i18n/menubar/ru.json
@@ -44,6 +44,7 @@
   "mermaid": "Mermaid",
   "mono": "Моноширинный",
   "more_action": "Другие действия",
+  "move_list": "Переместить элемент списка",
   "note": "Примечание",
   "olist": "Нумерованный список",
   "quote": "Цитата",

diff --git a/src/modules/toolbars/items.tsx b/src/modules/toolbars/items.tsx
@@ -793,7 +793,7 @@ export const moveListItemView: ToolbarItemView<ToolbarDataType.ListButton> = {
     type: ToolbarDataType.ListButton,
     icon: icons.lift,
     withArrow: true,
-    title: 'Move list item', // TODO: @makhnatkin add i18n
+    title: i18n.bind(null, 'move_list'),
 };
 
 // ---- Code list ----

diff --git a/src/modules/toolbars/types.ts b/src/modules/toolbars/types.ts
@@ -16,6 +16,9 @@ export interface ToolbarList {
     items: ToolbarItemId[];
 }
 
+/**
+ * The default value for the `type` property is `ToolbarDataType.SingleButton`.
+ */
 export type ToolbarItemView<T extends ToolbarDataType = ToolbarDataType.SingleButton> = {
     className?: string;
     hint?: string | (() => string);
@@ -81,5 +84,3 @@ export interface ToolbarsPreset {
     items: ToolbarsItems;
     orders: ToolbarsOrders;
 }
-
-export type EditorPreset = 'zero' | 'commonmark' | 'default' | 'yfm' | 'full';