feat(toolbars): support presets for selection and slash menus

demo/src/stories/presets/Presets.stories.tsx

@@ -1,12 +1,3 @@
-import {
-    textContextItemData,
-    wBoldItemData,
-    wHeading1ItemData,
-    wHeading2ItemData,
-    wItalicItemData,
-    wTextItemData,
-    wToggleHeadingFoldingItemData,
-} from '@gravity-ui/markdown-editor';
 import type {StoryObj} from '@storybook/react';
 
 import {Preset as component} from './Preset';
@@ -37,19 +28,6 @@ export const Full: StoryObj<typeof component> = {
 export const Custom: StoryObj<typeof component> = {
     args: {
         toolbarsPreset: custom,
-        wysiwygConfig: {
-            extensionOptions: {
-                commandMenu: {
-                    actions: [wTextItemData, wHeading1ItemData, wHeading2ItemData],
-                },
-                selectionContext: {
-                    config: [
-                        [wToggleHeadingFoldingItemData, textContextItemData],
-                        [wBoldItemData, wItalicItemData],
-                    ],
-                },
-            },
-        },
     },
 };
 

demo/src/stories/presets/presets.ts

@@ -7,11 +7,22 @@ import {
     colorifyItemMarkup,
     colorifyItemView,
     colorifyItemWysiwyg,
+    heading1ItemView,
+    heading1ItemWysiwyg,
+    heading2ItemView,
+    heading2ItemWysiwyg,
     italicItemMarkup,
     italicItemView,
+    italicItemWysiwyg,
+    paragraphItemView,
+    paragraphItemWisywig,
     redoItemMarkup,
     redoItemView,
     redoItemWysiwyg,
+    textContextItemView,
+    textContextItemWisywig,
+    toggleHeadingFoldingItemView,
+    toggleHeadingFoldingItemWysiwyg,
     undoItemMarkup,
     undoItemView,
     undoItemWysiwyg,
@@ -36,17 +47,31 @@ export const toolbarPresets: Record<string, ToolbarsPreset> = {
             },
             [Action.italic]: {
                 view: italicItemView,
+                wysiwyg: italicItemWysiwyg,
                 markup: italicItemMarkup,
             },
             [Action.colorify]: {
                 view: colorifyItemView,
                 wysiwyg: colorifyItemWysiwyg,
                 markup: colorifyItemMarkup,
             },
+            [Action.text]: {view: textContextItemView, wysiwyg: textContextItemWisywig},
+            [Action.foldingHeading]: {
+                view: toggleHeadingFoldingItemView,
+                wysiwyg: toggleHeadingFoldingItemWysiwyg,
+            },
+            [Action.paragraph]: {view: paragraphItemView, wysiwyg: paragraphItemWisywig},
+            [Action.heading1]: {view: heading1ItemView, wysiwyg: heading1ItemWysiwyg},
+            [Action.heading2]: {view: heading2ItemView, wysiwyg: heading2ItemWysiwyg},
         },
         orders: {
             [Toolbar.wysiwygMain]: [[Action.colorify], [Action.bold], [Action.undo, Action.redo]],
             [Toolbar.markupMain]: [[Action.colorify], [Action.italic], [Action.undo, Action.redo]],
+            [Toolbar.wysiwygSelection]: [
+                [Action.foldingHeading, Action.text],
+                [Action.bold, Action.italic],
+            ],
+            [Toolbar.wysiwygSlash]: [[Action.paragraph, Action.heading1, Action.heading2]],
         },
     },
 };

demo/tests/visual-tests/ContextualToolbars.helpers.tsx

@@ -0,0 +1,139 @@
+import {useState} from 'react';
+
+import {
+    type MarkdownEditorPreset,
+    MarkdownEditorView,
+    type ToolbarsPreset,
+    useMarkdownEditor,
+    wHeading1ItemData,
+    wItalicItemData,
+} from '@gravity-ui/markdown-editor';
+import {
+    ActionName as Action,
+    ToolbarName as Toolbar,
+} from '@gravity-ui/markdown-editor/_/modules/toolbars/constants.js';
+import {full} from '@gravity-ui/markdown-editor/_/modules/toolbars/presets.js';
+
+const custom: ToolbarsPreset = {
+    items: {
+        ...full.items,
+        customHeading: {
+            ...full.items[Action.heading2],
+            view: {
+                ...full.items[Action.heading2].view,
+                title: 'Custom heading',
+                aliases: ['topic'],
+            },
+        },
+    },
+    orders: {
+        ...full.orders,
+        [Toolbar.wysiwygSelection]: [[Action.italic, Action.bold]],
+        [Toolbar.wysiwygSlash]: [['customHeading', Action.paragraph]],
+    },
+};
+const alternate: ToolbarsPreset = {
+    items: full.items,
+    orders: {
+        ...full.orders,
+        [Toolbar.wysiwygSelection]: [[Action.strike]],
+        [Toolbar.wysiwygSlash]: [[Action.heading1]],
+    },
+};
+const empty: ToolbarsPreset = {
+    items: full.items,
+    orders: {...full.orders, [Toolbar.wysiwygSelection]: [], [Toolbar.wysiwygSlash]: []},
+};
+const mainOnly: ToolbarsPreset = {
+    items: full.items,
+    orders: {[Toolbar.wysiwygMain]: [[Action.bold]]},
+};
+const zeroCustom: ToolbarsPreset = {
+    items: {paragraph: full.items[Action.paragraph]},
+    orders: {
+        [Toolbar.wysiwygSelection]: [[Action.paragraph]],
+        [Toolbar.wysiwygSlash]: [[Action.paragraph]],
+    },
+};
+const refreshed: ToolbarsPreset = {...custom};
+const conditional: ToolbarsPreset = {
+    items: {
+        hidden: {...full.items.bold, wysiwyg: {...full.items.bold.wysiwyg, condition: () => false}},
+        disabled: {
+            ...full.items.italic,
+            wysiwyg: {...full.items.italic.wysiwyg, condition: 'enabled', isEnable: () => false},
+        },
+    },
+    orders: {[Toolbar.wysiwygSelection]: [['hidden'], ['disabled']]},
+};
+const configs = {
+    custom,
+    alternate,
+    empty,
+    mainOnly,
+    zeroCustom,
+    refreshed,
+    conditional,
+    default: undefined,
+};
+
+export function ContextualToolbars({
+    initialConfig = 'custom',
+    preset = 'full',
+    legacy = false,
+    mobile = false,
+    initialMode = 'wysiwyg',
+    initialMarkup = 'Select this text',
+}: {
+    initialConfig?: keyof typeof configs;
+    preset?: MarkdownEditorPreset;
+    legacy?: boolean | 'empty';
+    mobile?: boolean;
+    initialMode?: 'wysiwyg' | 'markup';
+    initialMarkup?: string;
+}) {
+    const [config, setConfig] = useState(initialConfig);
+    const editor = useMarkdownEditor({
+        preset,
+        mobile,
+        initial: {markup: initialMarkup, mode: initialMode},
+        wysiwygConfig: legacy
+            ? {
+                  extensionOptions: {
+                      selectionContext: {config: legacy === 'empty' ? [] : [[wItalicItemData]]},
+                      commandMenu: {actions: legacy === 'empty' ? [] : [wHeading1ItemData]},
+                  },
+              }
+            : undefined,
+    });
+
+    return (
+        <div style={{width: 800}}>
+            {(
+                [
+                    'custom',
+                    'alternate',
+                    'empty',
+                    'zeroCustom',
+                    'refreshed',
+                    'conditional',
+                    'default',
+                ] as const
+            ).map((name) => (
+                <button
+                    key={name}
+                    onMouseDown={(event) => event.preventDefault()}
+                    onClick={() => setConfig(name)}
+                >
+                    Use {name} toolbar
+                </button>
+            ))}
+            <MarkdownEditorView
+                editor={editor}
+                toolbarsPreset={configs[config]}
+                autofocus
+                stickyToolbar={false}
+            />
+        </div>
+    );
+}