feat(toolbars): restructured toolbar configuration and presets (#509)

Author: makhnatkin

demo/components/Playground.tsx

@@ -18,7 +18,6 @@ import {
     type UseMarkdownEditorProps,
     WysiwygPlaceholderOptions,
     logger,
-    markupToolbarConfigs,
     useMarkdownEditor,
     wysiwygToolbarConfigs,
 } from '../../src';
@@ -29,8 +28,8 @@ import {Math} from '../../src/extensions/additional/Math';
 import {Mermaid} from '../../src/extensions/additional/Mermaid';
 import {YfmHtmlBlock} from '../../src/extensions/additional/YfmHtmlBlock';
 import {getSanitizeYfmHtmlBlock} from '../../src/extensions/additional/YfmHtmlBlock/utils';
-import {cloneDeep} from '../../src/lodash';
 import type {CodeEditor} from '../../src/markup';
+import {ToolbarsPreset} from '../../src/modules/toolbars/types';
 import {VERSION} from '../../src/version';
 import {getPlugins} from '../defaults/md-plugins';
 import useYfmHtmlBlockStyles from '../hooks/useYfmHtmlBlockStyles';
@@ -52,19 +51,6 @@ const fileUploadHandler: FileUploadHandler = async (file) => {
     return {url: URL.createObjectURL(file)};
 };
 
-const mToolbarConfig = [
-    ...markupToolbarConfigs.mToolbarConfig,
-    [markupToolbarConfigs.mMermaidButton, markupToolbarConfigs.mYfmHtmlBlockButton],
-];
-mToolbarConfig[2].push(markupToolbarConfigs.mMathListItem);
-
-const wToolbarConfig = cloneDeep(wysiwygToolbarConfigs.wToolbarConfig);
-wToolbarConfig[2].push(wysiwygToolbarConfigs.wMathListItem);
-wToolbarConfig.push([
-    wysiwygToolbarConfigs.wMermaidItemData,
-    wysiwygToolbarConfigs.wYfmHtmlBlockItemData,
-]);
-
 const wCommandMenuConfig = wysiwygToolbarConfigs.wCommandMenuConfig.concat(
     wysiwygToolbarConfigs.wMathInlineItemData,
     wysiwygToolbarConfigs.wMathBlockItemData,
@@ -92,6 +78,7 @@ export type PlaygroundProps = {
     escapeConfig?: EscapeConfig;
     wysiwygCommandMenuConfig?: wysiwygToolbarConfigs.WToolbarItemData[];
     markupToolbarConfig?: ToolbarGroupData<CodeEditor>[];
+    toolbarsPreset?: ToolbarsPreset;
     onChangeEditorType?: (mode: MarkdownEditorMode) => void;
     onChangeSplitModeEnabled?: (splitModeEnabled: boolean) => void;
     directiveSyntax?: DirectiveSyntaxValue;
@@ -137,6 +124,7 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
         height,
         extraExtensions,
         extensionOptions,
+        toolbarsPreset,
         wysiwygToolbarConfig,
         wysiwygCommandMenuConfig,
         markupConfigExtensions,
@@ -175,6 +163,47 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
 
     const mdEditor = useMarkdownEditor(
         {
+            preset: 'full',
+            wysiwygConfig: {
+                escapeConfig,
+                placeholderOptions: placeholderOptions,
+                extensions: (builder) => {
+                    builder
+                        .use(Math, {
+                            loadRuntimeScript: () => {
+                                import(
+                                    /* webpackChunkName: "latex-runtime" */ '@diplodoc/latex-extension/runtime'
+                                );
+                                import(
+                                    // @ts-expect-error // no types for styles
+                                    /* webpackChunkName: "latex-styles" */ '@diplodoc/latex-extension/runtime/styles'
+                                );
+                            },
+                        })
+                        .use(Mermaid, {
+                            loadRuntimeScript: () => {
+                                import(
+                                    /* webpackChunkName: "mermaid-runtime" */ '@diplodoc/mermaid-extension/runtime'
+                                );
+                            },
+                        })
+                        .use(FoldingHeading)
+                        .use(YfmHtmlBlock, {
+                            useConfig: useYfmHtmlBlockStyles,
+                            sanitize: getSanitizeYfmHtmlBlock({options: defaultOptions}),
+                            head: `
+                        <base target="_blank" />
+                        <style>
+                            html, body {
+                                margin: 0;
+                                padding: 0;
+                            }
+                        </style
+                    `,
+                        });
+                    if (extraExtensions) builder.use(extraExtensions);
+                },
+            },
             allowHTML,
             linkify,
             linkifyTlds,
@@ -184,13 +213,9 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
             initialSplitModeEnabled: initialSplitModeEnabled,
             initialToolbarVisible: true,
             splitMode: splitModeOrientation,
-            escapeConfig: escapeConfig,
             needToSetDimensionsForUploadedImages,
             renderPreview: renderPreviewDefined ? renderPreview : undefined,
             fileUploadHandler,
-            wysiwygConfig: {
-                placeholderOptions: placeholderOptions,
-            },
             experimental: {
                 ...experimental,
                 directiveSyntax,
@@ -209,42 +234,6 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
                 extensions: markupConfigExtensions,
                 parseInsertedUrlAsImage,
             },
-            extraExtensions: (builder) => {
-                builder
-                    .use(Math, {
-                        loadRuntimeScript: () => {
-                            import(
-                                /* webpackChunkName: "latex-runtime" */ '@diplodoc/latex-extension/runtime'
-                            );
-                            import(
-                                // @ts-expect-error // no types for styles
-                                /* webpackChunkName: "latex-styles" */ '@diplodoc/latex-extension/runtime/styles'
-                            );
-                        },
-                    })
-                    .use(Mermaid, {
-                        loadRuntimeScript: () => {
-                            import(
-                                /* webpackChunkName: "mermaid-runtime" */ '@diplodoc/mermaid-extension/runtime'
-                            );
-                        },
-                    })
-                    .use(FoldingHeading)
-                    .use(YfmHtmlBlock, {
-                        useConfig: useYfmHtmlBlockStyles,
-                        sanitize: getSanitizeYfmHtmlBlock({options: defaultOptions}),
-                        head: `
-                        <base target="_blank" />
-                        <style>
-                            html, body {
-                                margin: 0;
-                                padding: 0;
-                            }
-                        </style
-                    `,
-                    });
-                if (extraExtensions) builder.use(extraExtensions);
-            },
         },
         [
             allowHTML,
@@ -394,8 +383,9 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
                         toaster={toaster}
                         className={b('editor-view')}
                         stickyToolbar={Boolean(stickyToolbar)}
-                        wysiwygToolbarConfig={wysiwygToolbarConfig ?? wToolbarConfig}
-                        markupToolbarConfig={markupToolbarConfig ?? mToolbarConfig}
+                        toolbarsPreset={toolbarsPreset}
+                        wysiwygToolbarConfig={wysiwygToolbarConfig}
+                        markupToolbarConfig={markupToolbarConfig}
                         settingsVisible={settingsVisible}
                         editor={mdEditor}
                         enableSubmitInPreview={enableSubmitInPreview}

demo/stories/presets/Preset.tsx

@@ -11,6 +11,7 @@ import {
     logger,
     useMarkdownEditor,
 } from '../../../src';
+import {ToolbarsPreset} from '../../../src/modules/toolbars/types';
 import type {FileUploadHandler} from '../../../src/utils/upload';
 import {VERSION} from '../../../src/version';
 // ---
@@ -41,6 +42,7 @@ export type PresetDemoProps = {
     splitModeOrientation?: 'horizontal' | 'vertical' | false;
     stickyToolbar?: boolean;
     height?: CSSProperties['height'];
+    toolbarsPreset?: ToolbarsPreset;
 };
 
 logger.setLogger({
@@ -60,6 +62,7 @@ export const Preset = React.memo<PresetDemoProps>((props) => {
         splitModeOrientation,
         stickyToolbar,
         height,
+        toolbarsPreset,
     } = props;
     const [editorMode, setEditorMode] = React.useState<MarkdownEditorMode>('wysiwyg');
     const [mdRaw, setMdRaw] = React.useState<MarkupString>('');
@@ -130,6 +133,7 @@ export const Preset = React.memo<PresetDemoProps>((props) => {
                 <div className={b('editor')} style={{height: height ?? 'initial'}}>
                     <MarkdownEditorView
                         autofocus
+                        toolbarsPreset={toolbarsPreset}
                         toaster={toaster}
                         className={b('editor-view')}
                         stickyToolbar={Boolean(stickyToolbar)}

demo/stories/presets/Presets.stories.tsx

@@ -1,5 +1,23 @@
 import {StoryObj} from '@storybook/react';
 
+import {ActionName as Action} from '../../../src/bundle/config/action-names';
+import {ToolbarName as Toolbar} from '../../../src/modules/toolbars/constants';
+import {
+    boldItemView,
+    boldItemWysiwyg,
+    colorifyItemMarkup,
+    colorifyItemView,
+    colorifyItemWysiwyg,
+    italicItemMarkup,
+    italicItemView,
+    redoItemMarkup,
+    redoItemView,
+    redoItemWysiwyg,
+    undoItemMarkup,
+    undoItemView,
+    undoItemWysiwyg,
+} from '../../../src/modules/toolbars/items';
+
 import {Preset as component} from './Preset';
 
 export const Zero: StoryObj<typeof component> = {
@@ -22,6 +40,50 @@ export const Full: StoryObj<typeof component> = {
     args: {preset: 'full'},
 };
 
+export const Custom: StoryObj<typeof component> = {
+    args: {
+        toolbarsPreset: {
+            items: {
+                [Action.undo]: {
+                    view: undoItemView,
+                    wysiwyg: undoItemWysiwyg,
+                    markup: undoItemMarkup,
+                },
+                [Action.redo]: {
+                    view: redoItemView,
+                    wysiwyg: redoItemWysiwyg,
+                    markup: redoItemMarkup,
+                },
+                [Action.bold]: {
+                    view: boldItemView,
+                    wysiwyg: boldItemWysiwyg,
+                },
+                [Action.italic]: {
+                    view: italicItemView,
+                    markup: italicItemMarkup,
+                },
+                [Action.colorify]: {
+                    view: colorifyItemView,
+                    wysiwyg: colorifyItemWysiwyg,
+                    markup: colorifyItemMarkup,
+                },
+            },
+            orders: {
+                [Toolbar.wysiwygMain]: [
+                    [Action.colorify],
+                    [Action.bold],
+                    [Action.undo, Action.redo],
+                ],
+                [Toolbar.markupMain]: [
+                    [Action.colorify],
+                    [Action.italic],
+                    [Action.undo, Action.redo],
+                ],
+            },
+        },
+    },
+};
+
 export default {
     component,
     title: 'Extensions / Presets',

src/bundle/MarkdownEditorView.tsx

@@ -7,6 +7,7 @@ import {useEnsuredForwardedRef, useKey, useUpdate} from 'react-use';
 import {ClassNameProps, cn} from '../classname';
 import {i18n} from '../i18n/bundle';
 import {logger} from '../logger';
+import type {ToolbarsPreset} from '../modules/toolbars/types';
 import {ToasterContext, useBooleanState, useSticky} from '../react-utils';
 import {isMac} from '../utils';
 
@@ -15,19 +16,11 @@ import {HorizontalDrag} from './HorizontalDrag';
 import {MarkupEditorView} from './MarkupEditorView';
 import {SplitModeView} from './SplitModeView';
 import {WysiwygEditorView} from './WysiwygEditorView';
-import {
-    MToolbarData,
-    MToolbarItemData,
-    WToolbarData,
-    WToolbarItemData,
-    mHiddenDataByPreset,
-    mToolbarConfigByPreset,
-    wHiddenDataByPreset,
-    wToolbarConfigByPreset,
-} from './config';
+import {MToolbarData, MToolbarItemData, WToolbarData, WToolbarItemData} from './config';
 import {useMarkdownEditorContext} from './context';
 import {EditorSettings, EditorSettingsProps} from './settings';
 import {stickyCn} from './sticky';
+import {getToolbarsConfigs} from './toolbar/utils';
 import type {MarkdownEditorMode} from './types';
 
 import '../styles/styles.scss';
@@ -39,9 +32,22 @@ const b = cnEditorComponent;
 export type MarkdownEditorViewProps = ClassNameProps & {
     editor?: Editor;
     autofocus?: boolean;
+    toolbarsPreset?: ToolbarsPreset;
+    /**
+     * @deprecated use `toolbarsPreset` instead
+     */
     markupToolbarConfig?: MToolbarData;
+    /**
+     * @deprecated use `toolbarsPreset` instead
+     */
     wysiwygToolbarConfig?: WToolbarData;
+    /**
+     * @deprecated use `toolbarsPreset` instead
+     */
     markupHiddenActionsConfig?: MToolbarItemData[];
+    /**
+     * @deprecated use `toolbarsPreset` instead
+     */
     wysiwygHiddenActionsConfig?: WToolbarItemData[];
     /** @default true */
     settingsVisible?: boolean;
@@ -73,16 +79,44 @@ export const MarkdownEditorView = React.forwardRef<HTMLDivElement, MarkdownEdito
             autofocus,
             className,
             settingsVisible = true,
-            markupToolbarConfig = mToolbarConfigByPreset[editor.preset],
-            wysiwygToolbarConfig = wToolbarConfigByPreset[editor.preset],
-            markupHiddenActionsConfig = mHiddenDataByPreset[editor.preset],
-            wysiwygHiddenActionsConfig = wHiddenDataByPreset[editor.preset],
+            toolbarsPreset,
             toaster,
             stickyToolbar,
+            wysiwygToolbarConfig: initialWysiwygToolbarConfig,
+            markupToolbarConfig: initialMarkupToolbarConfig,
+            wysiwygHiddenActionsConfig: initialWysiwygHiddenActionsConfig,
+            markupHiddenActionsConfig: initialMarkupHiddenActionsConfig,
             enableSubmitInPreview = true,
             hidePreviewAfterSubmit = false,
         } = props;
 
+        const {
+            wysiwygToolbarConfig,
+            markupToolbarConfig,
+            wysiwygHiddenActionsConfig,
+            markupHiddenActionsConfig,
+        } = 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(() => {
             editor.on('rerender', rerender);