@gravity-ui/markdown-editor 14.4.0 → 14.5.0

package/build/esm/bundle/config/wysiwyg.js

@@ -3,36 +3,34 @@ import { gptHotKeys } from '../../extensions/additional/GPT/constants';
 import { i18n as i18nHint } from '../../i18n/hints';
 import { i18n } from '../../i18n/menubar';
 import { Action as A, formatter as f } from '../../shortcuts';
-import { ToolbarDataType, } from '../../toolbar/types';
+import { ToolbarDataType, } from '../../toolbar';
 import { WToolbarColors } from '../toolbar/wysiwyg/WToolbarColors';
 import { WToolbarTextSelect } from '../toolbar/wysiwyg/WToolbarTextSelect';
 import { ActionName } from './action-names';
 import { icons } from './icons';
-export const wHistoryGroupConfig = [
-    {
-        id: ActionName.undo,
-        type: ToolbarDataType.SingleButton,
-        title: i18n.bind(null, 'undo'),
-        icon: icons.undo,
-        hotkey: f.toView(A.Undo),
-        hintWhenDisabled: false,
-        exec: (e) => e.actions.undo.run(),
-        isActive: (e) => e.actions.undo.isActive(),
-        isEnable: (e) => e.actions.undo.isEnable(),
-    },
-    {
-        id: ActionName.redo,
-        type: ToolbarDataType.SingleButton,
-        title: i18n.bind(null, 'redo'),
-        icon: icons.redo,
-        hotkey: f.toView(A.Redo),
-        hintWhenDisabled: false,
-        exec: (e) => e.actions.redo.run(),
-        isActive: (e) => e.actions.redo.isActive(),
-        isEnable: (e) => e.actions.redo.isEnable(),
-    },
-];
-/** Bold, Italic, Underline, Strike buttons group */
+export const wUndoItemData = {
+    id: ActionName.undo,
+    type: ToolbarDataType.SingleButton,
+    title: i18n.bind(null, 'undo'),
+    icon: icons.undo,
+    hotkey: f.toView(A.Undo),
+    hintWhenDisabled: false,
+    exec: (e) => e.actions.undo.run(),
+    isActive: (e) => e.actions.undo.isActive(),
+    isEnable: (e) => e.actions.undo.isEnable(),
+};
+export const wRedoItemData = {
+    id: ActionName.redo,
+    type: ToolbarDataType.SingleButton,
+    title: i18n.bind(null, 'redo'),
+    icon: icons.redo,
+    hotkey: f.toView(A.Redo),
+    hintWhenDisabled: false,
+    exec: (e) => e.actions.redo.run(),
+    isActive: (e) => e.actions.redo.isActive(),
+    isEnable: (e) => e.actions.redo.isEnable(),
+};
+// ----
 export const wBoldItemData = {
     id: ActionName.bold,
     type: ToolbarDataType.SingleButton,
@@ -91,131 +89,7 @@ export const wMarkedItemData = {
     isActive: (e) => e.actions.mark.isActive(),
     isEnable: (e) => e.actions.mark.isEnable(),
 };
-export const wBiusGroupConfig = [
-    wBoldItemData,
-    wItalicItemData,
-    wUnderlineItemData,
-    wStrikethroughItemData,
-    wMonospaceItemData,
-    wMarkedItemData,
-];
-export const wTextItemData = {
-    id: ActionName.paragraph,
-    title: i18n.bind(null, 'text'),
-    icon: icons.text,
-    hotkey: f.toView(A.Text),
-    exec: (e) => e.actions.toParagraph.run(),
-    isActive: (e) => e.actions.toParagraph.isActive(),
-    isEnable: (e) => e.actions.toParagraph.isEnable(),
-    doNotActivateList: true,
-};
-export const wHeadingListConfig = {
-    icon: icons.headline,
-    withArrow: true,
-    title: i18n.bind(null, 'heading'),
-    data: [
-        wTextItemData,
-        {
-            id: ActionName.heading1,
-            title: i18n.bind(null, 'heading1'),
-            icon: icons.h1,
-            hotkey: f.toView(A.Heading1),
-            exec: (e) => e.actions.toH1.run(),
-            isActive: (e) => e.actions.toH1.isActive(),
-            isEnable: (e) => e.actions.toH1.isEnable(),
-        },
-        {
-            id: ActionName.heading2,
-            title: i18n.bind(null, 'heading2'),
-            icon: icons.h2,
-            hotkey: f.toView(A.Heading2),
-            exec: (e) => e.actions.toH2.run(),
-            isActive: (e) => e.actions.toH2.isActive(),
-            isEnable: (e) => e.actions.toH2.isEnable(),
-        },
-        {
-            id: ActionName.heading3,
-            title: i18n.bind(null, 'heading3'),
-            icon: icons.h3,
-            hotkey: f.toView(A.Heading3),
-            exec: (e) => e.actions.toH3.run(),
-            isActive: (e) => e.actions.toH3.isActive(),
-            isEnable: (e) => e.actions.toH3.isEnable(),
-        },
-        {
-            id: ActionName.heading4,
-            title: i18n.bind(null, 'heading4'),
-            icon: icons.h4,
-            hotkey: f.toView(A.Heading4),
-            exec: (e) => e.actions.toH4.run(),
-            isActive: (e) => e.actions.toH4.isActive(),
-            isEnable: (e) => e.actions.toH4.isEnable(),
-        },
-        {
-            id: ActionName.heading5,
-            title: i18n.bind(null, 'heading5'),
-            icon: icons.h5,
-            hotkey: f.toView(A.Heading5),
-            exec: (e) => e.actions.toH5.run(),
-            isActive: (e) => e.actions.toH5.isActive(),
-            isEnable: (e) => e.actions.toH5.isEnable(),
-        },
-        {
-            id: ActionName.heading6,
-            title: i18n.bind(null, 'heading6'),
-            icon: icons.h6,
-            hotkey: f.toView(A.Heading6),
-            exec: (e) => e.actions.toH6.run(),
-            isActive: (e) => e.actions.toH6.isActive(),
-            isEnable: (e) => e.actions.toH6.isEnable(),
-        },
-    ],
-};
-export const wListsListConfig = {
-    icon: icons.bulletList,
-    withArrow: true,
-    title: i18n.bind(null, 'list'),
-    data: [
-        {
-            id: ActionName.bulletList,
-            title: i18n.bind(null, 'ulist'),
-            icon: icons.bulletList,
-            hotkey: f.toView(A.BulletList),
-            exec: (e) => e.actions.toBulletList.run(),
-            isActive: (e) => e.actions.toBulletList.isActive(),
-            isEnable: (e) => e.actions.toBulletList.isEnable(),
-        },
-        {
-            id: ActionName.orderedList,
-            title: i18n.bind(null, 'olist'),
-            icon: icons.orderedList,
-            hotkey: f.toView(A.OrderedList),
-            exec: (e) => e.actions.toOrderedList.run(),
-            isActive: (e) => e.actions.toOrderedList.isActive(),
-            isEnable: (e) => e.actions.toOrderedList.isEnable(),
-        },
-        {
-            id: ActionName.sinkListItem,
-            title: i18n.bind(null, 'list__action_sink'),
-            hintWhenDisabled: () => i18n('list_action_disabled'),
-            icon: icons.sink,
-            hotkey: f.toView(A.SinkListItem),
-            exec: (e) => e.actions.sinkListItem.run(),
-            isActive: (e) => e.actions.sinkListItem.isActive(),
-            isEnable: (e) => e.actions.sinkListItem.isEnable(),
-        },
-        {
-            id: ActionName.liftListItem,
-            title: i18n.bind(null, 'list__action_lift'),
-            hintWhenDisabled: () => i18n('list_action_disabled'),
-            icon: icons.lift,
-            hotkey: f.toView(A.LiftListItem),
-            exec: (e) => e.actions.liftListItem.run(),
-            isActive: (e) => e.actions.liftListItem.isActive(),
-            isEnable: (e) => e.actions.liftListItem.isEnable(),
-        },
-    ],
-};
+// ----
 export const wCheckboxItemData = {
     id: ActionName.checkbox,
     type: ToolbarDataType.SingleButton,
@@ -255,29 +129,6 @@ export const wCutItemData = {
     isActive: (e) => e.actions.toYfmCut.isActive(),
     isEnable: (e) => e.actions.toYfmCut.isEnable(),
 };
-export const wListMoveListConfig = {
-    icon: icons.lift,
-    withArrow: true,
-    title: 'Move list item',
-    data: [
-        {
-            id: ActionName.sinkListItem,
-            title: 'Sink list item',
-            icon: icons.sink,
-            exec: (e) => e.actions.sinkListItem.run(),
-            isActive: (e) => e.actions.sinkListItem.isActive(),
-            isEnable: (e) => e.actions.sinkListItem.isEnable(),
-        },
-        {
-            id: ActionName.liftListItem,
-            title: 'Lift list item',
-            icon: icons.lift,
-            exec: (e) => e.actions.liftListItem.run(),
-            isActive: (e) => e.actions.liftListItem.isActive(),
-            isEnable: (e) => e.actions.liftListItem.isEnable(),
-        },
-    ],
-};
 export const wNoteItemData = {
     id: ActionName.yfm_note,
     type: ToolbarDataType.SingleButton,
@@ -307,21 +158,6 @@ export const wCodeItemData = {
     isActive: (e) => e.actions.code.isActive(),
     isEnable: (e) => e.actions.code.isEnable(),
 };
-export const wCodeBlockItemData = {
-    id: ActionName.code_block,
-    title: i18n.bind(null, 'codeblock'),
-    icon: icons.codeBlock,
-    hotkey: f.toView(A.CodeBlock),
-    exec: (e) => e.actions.toCodeBlock.run(),
-    isActive: (e) => e.actions.toCodeBlock.isActive(),
-    isEnable: (e) => e.actions.toCodeBlock.isEnable(),
-};
-export const wCodeListConfig = {
-    icon: icons.code,
-    withArrow: true,
-    title: i18n.bind(null, 'code'),
-    data: [wCodeItemData, wCodeBlockItemData],
-};
 export const wImageItemData = {
     id: ActionName.image,
     type: ToolbarDataType.SingleButton,
@@ -331,22 +167,6 @@ export const wImageItemData = {
     isActive: (e) => e.actions.addImageWidget.isActive(),
     isEnable: (e) => e.actions.addImageWidget.isEnable(),
 };
-export const wHruleItemData = {
-    id: ActionName.horizontalrule,
-    title: i18n.bind(null, 'hrule'),
-    icon: icons.horizontalRule,
-    exec: (e) => e.actions.hRule.run(),
-    isActive: (e) => e.actions.hRule.isActive(),
-    isEnable: (e) => e.actions.hRule.isEnable(),
-};
-export const wEmojiItemData = {
-    id: ActionName.emoji,
-    title: i18n.bind(null, 'emoji'),
-    icon: icons.emoji,
-    exec: (e) => e.actions.openEmojiSuggest.run({}),
-    isActive: (e) => e.actions.openEmojiSuggest.isActive(),
-    isEnable: (e) => e.actions.openEmojiSuggest.isEnable(),
-};
 export const wFileItemData = {
     id: ActionName.file,
     type: ToolbarDataType.SingleButton,
@@ -356,6 +176,15 @@ export const wFileItemData = {
     isActive: (e) => e.actions.addFile.isActive(),
     isEnable: (e) => e.actions.addFile.isEnable(),
 };
+export const wTabsItemData = {
+    id: ActionName.tabs,
+    type: ToolbarDataType.SingleButton,
+    title: i18n.bind(null, 'tabs'),
+    icon: icons.tabs,
+    exec: (e) => e.actions.toYfmTabs.run(),
+    isActive: (e) => e.actions.toYfmTabs.isActive(),
+    isEnable: (e) => e.actions.toYfmTabs.isEnable(),
+};
 export const wMathInlineItemData = {
     id: ActionName.math_inline,
     type: ToolbarDataType.SingleButton,
@@ -366,15 +195,6 @@ export const wMathInlineItemData = {
     isActive: (e) => e.actions.addMathInline.isActive(),
     isEnable: (e) => e.actions.addMathInline.isEnable(),
 };
-export const wTabsItemData = {
-    id: ActionName.tabs,
-    type: ToolbarDataType.SingleButton,
-    title: i18n.bind(null, 'tabs'),
-    icon: icons.tabs,
-    exec: (e) => e.actions.toYfmTabs.run(),
-    isActive: (e) => e.actions.toYfmTabs.isActive(),
-    isEnable: (e) => e.actions.toYfmTabs.isEnable(),
-};
 export const wMathBlockItemData = {
     id: ActionName.math_block,
     type: ToolbarDataType.SingleButton,
@@ -385,13 +205,6 @@ export const wMathBlockItemData = {
     isActive: (e) => e.actions.toMathBlock.isActive(),
     isEnable: (e) => e.actions.toMathBlock.isEnable(),
 };
-export const wMathListConfig = {
-    icon: icons.functionInline,
-    withArrow: true,
-    title: i18n.bind(null, 'math'),
-    data: [wMathInlineItemData, wMathBlockItemData],
-};
-export const wMathListItem = Object.assign({ id: 'math', type: ToolbarDataType.ListButton }, wMathListConfig);
 export const wYfmHtmlBlockItemData = {
     id: ActionName.yfm_html_block,
     type: ToolbarDataType.SingleButton,
@@ -411,9 +224,240 @@ export const wGptItemData = {
     isActive: (e) => e.actions.addGptWidget.isActive(),
     isEnable: (e) => e.actions.addGptWidget.isEnable(),
 };
+export const wMermaidItemData = {
+    id: ActionName.mermaid,
+    type: ToolbarDataType.SingleButton,
+    title: i18n.bind(null, 'mermaid'),
+    icon: icons.mermaid,
+    exec: (e) => e.actions.createMermaid.run(),
+    isActive: (e) => e.actions.createMermaid.isActive(),
+    isEnable: (e) => e.actions.createMermaid.isEnable(),
+};
+export const wCodeBlockItemData = {
+    id: ActionName.code_block,
+    title: i18n.bind(null, 'codeblock'),
+    icon: icons.codeBlock,
+    hotkey: f.toView(A.CodeBlock),
+    exec: (e) => e.actions.toCodeBlock.run(),
+    isActive: (e) => e.actions.toCodeBlock.isActive(),
+    isEnable: (e) => e.actions.toCodeBlock.isEnable(),
+};
+export const wHruleItemData = {
+    id: ActionName.horizontalrule,
+    title: i18n.bind(null, 'hrule'),
+    icon: icons.horizontalRule,
+    exec: (e) => e.actions.hRule.run(),
+    isActive: (e) => e.actions.hRule.isActive(),
+    isEnable: (e) => e.actions.hRule.isEnable(),
+};
+export const wEmojiItemData = {
+    id: ActionName.emoji,
+    title: i18n.bind(null, 'emoji'),
+    icon: icons.emoji,
+    exec: (e) => e.actions.openEmojiSuggest.run({}),
+    isActive: (e) => e.actions.openEmojiSuggest.isActive(),
+    isEnable: (e) => e.actions.openEmojiSuggest.isEnable(),
+};
+export const wToggleHeadingFoldingItemData = {
+    id: 'folding-heading',
+    type: ToolbarDataType.SingleButton,
+    icon: icons.foldingHeading,
+    title: () => i18n('folding-heading'),
+    hint: () => i18n('folding-heading__hint'),
+    isActive: (editor) => { var _a, _b; return (_b = (_a = editor.actions.toggleHeadingFolding) === null || _a === void 0 ? void 0 : _a.isActive()) !== null && _b !== void 0 ? _b : false; },
+    isEnable: (editor) => { var _a, _b; return (_b = (_a = editor.actions.toggleHeadingFolding) === null || _a === void 0 ? void 0 : _a.isEnable()) !== null && _b !== void 0 ? _b : false; },
+    exec: (editor) => editor.actions.toggleHeadingFolding.run(),
+    condition: 'enabled',
+};
+export const textContextItemData = {
+    id: 'text',
+    type: ToolbarDataType.ReactComponent,
+    component: WToolbarTextSelect,
+    width: 0,
+    condition: ({ selection: { $from, $to }, schema }) => {
+        if (!$from.sameParent($to))
+            return false;
+        const { parent } = $from;
+        return parent.type === pType(schema) || parent.type === headingType(schema);
+    },
+};
+export const wMathListItem = {
+    id: 'math',
+    type: ToolbarDataType.ListButton,
+    icon: icons.functionInline,
+    withArrow: true,
+    title: i18n.bind(null, 'math'),
+    data: [wMathInlineItemData, wMathBlockItemData],
+};
+export const wTextItemData = {
+    id: ActionName.paragraph,
+    title: i18n.bind(null, 'text'),
+    icon: icons.text,
+    hotkey: f.toView(A.Text),
+    exec: (e) => e.actions.toParagraph.run(),
+    isActive: (e) => e.actions.toParagraph.isActive(),
+    isEnable: (e) => e.actions.toParagraph.isEnable(),
+    doNotActivateList: true,
+};
+export const wHeading1ItemData = {
+    id: ActionName.heading1,
+    title: i18n.bind(null, 'heading1'),
+    icon: icons.h1,
+    hotkey: f.toView(A.Heading1),
+    exec: (e) => e.actions.toH1.run(),
+    isActive: (e) => e.actions.toH1.isActive(),
+    isEnable: (e) => e.actions.toH1.isEnable(),
+};
+export const wHeading2ItemData = {
+    id: ActionName.heading2,
+    title: i18n.bind(null, 'heading2'),
+    icon: icons.h2,
+    hotkey: f.toView(A.Heading2),
+    exec: (e) => e.actions.toH2.run(),
+    isActive: (e) => e.actions.toH2.isActive(),
+    isEnable: (e) => e.actions.toH2.isEnable(),
+};
+export const wHeading3ItemData = {
+    id: ActionName.heading3,
+    title: i18n.bind(null, 'heading3'),
+    icon: icons.h3,
+    hotkey: f.toView(A.Heading3),
+    exec: (e) => e.actions.toH3.run(),
+    isActive: (e) => e.actions.toH3.isActive(),
+    isEnable: (e) => e.actions.toH3.isEnable(),
+};
+export const wHeading4ItemData = {
+    id: ActionName.heading4,
+    title: i18n.bind(null, 'heading4'),
+    icon: icons.h4,
+    hotkey: f.toView(A.Heading4),
+    exec: (e) => e.actions.toH4.run(),
+    isActive: (e) => e.actions.toH4.isActive(),
+    isEnable: (e) => e.actions.toH4.isEnable(),
+};
+export const wHeading5ItemData = {
+    id: ActionName.heading5,
+    title: i18n.bind(null, 'heading5'),
+    icon: icons.h5,
+    hotkey: f.toView(A.Heading5),
+    exec: (e) => e.actions.toH5.run(),
+    isActive: (e) => e.actions.toH5.isActive(),
+    isEnable: (e) => e.actions.toH5.isEnable(),
+};
+export const wHeading6ItemData = {
+    id: ActionName.heading6,
+    title: i18n.bind(null, 'heading6'),
+    icon: icons.h6,
+    hotkey: f.toView(A.Heading6),
+    exec: (e) => e.actions.toH6.run(),
+    isActive: (e) => e.actions.toH6.isActive(),
+    isEnable: (e) => e.actions.toH6.isEnable(),
+};
+export const wBulletListItemData = {
+    id: ActionName.bulletList,
+    title: i18n.bind(null, 'ulist'),
+    icon: icons.bulletList,
+    hotkey: f.toView(A.BulletList),
+    exec: (e) => e.actions.toBulletList.run(),
+    isActive: (e) => e.actions.toBulletList.isActive(),
+    isEnable: (e) => e.actions.toBulletList.isEnable(),
+};
+export const wOrderedListItemData = {
+    id: ActionName.orderedList,
+    title: i18n.bind(null, 'olist'),
+    icon: icons.orderedList,
+    hotkey: f.toView(A.OrderedList),
+    exec: (e) => e.actions.toOrderedList.run(),
+    isActive: (e) => e.actions.toOrderedList.isActive(),
+    isEnable: (e) => e.actions.toOrderedList.isEnable(),
+};
+export const wSinkListItemData = {
+    id: ActionName.sinkListItem,
+    title: i18n.bind(null, 'list__action_sink'),
+    hintWhenDisabled: () => i18n('list_action_disabled'),
+    icon: icons.sink,
+    hotkey: f.toView(A.SinkListItem),
+    exec: (e) => e.actions.sinkListItem.run(),
+    isActive: (e) => e.actions.sinkListItem.isActive(),
+    isEnable: (e) => e.actions.sinkListItem.isEnable(),
+};
+export const wLiftListItemData = {
+    id: ActionName.liftListItem,
+    title: i18n.bind(null, 'list__action_lift'),
+    hintWhenDisabled: () => i18n('list_action_disabled'),
+    icon: icons.lift,
+    hotkey: f.toView(A.LiftListItem),
+    exec: (e) => e.actions.liftListItem.run(),
+    isActive: (e) => e.actions.liftListItem.isActive(),
+    isEnable: (e) => e.actions.liftListItem.isEnable(),
+};
+export const wHeadingListConfig = {
+    icon: icons.headline,
+    withArrow: true,
+    title: i18n.bind(null, 'heading'),
+    data: [
+        wTextItemData,
+        wHeading1ItemData,
+        wHeading2ItemData,
+        wHeading3ItemData,
+        wHeading4ItemData,
+        wHeading5ItemData,
+        wHeading6ItemData,
+    ],
+};
+export const wListsListConfig = {
+    icon: icons.bulletList,
+    withArrow: true,
+    title: i18n.bind(null, 'list'),
+    data: [wBulletListItemData, wOrderedListItemData, wSinkListItemData, wLiftListItemData],
+};
+export const wListMoveListConfig = {
+    icon: icons.lift,
+    withArrow: true,
+    title: 'Move list item',
+    data: [
+        {
+            id: ActionName.sinkListItem,
+            title: 'Sink list item',
+            icon: icons.sink,
+            exec: (e) => e.actions.sinkListItem.run(),
+            isActive: (e) => e.actions.sinkListItem.isActive(),
+            isEnable: (e) => e.actions.sinkListItem.isEnable(),
+        },
+        {
+            id: ActionName.liftListItem,
+            title: 'Lift list item',
+            icon: icons.lift,
+            exec: (e) => e.actions.liftListItem.run(),
+            isActive: (e) => e.actions.liftListItem.isActive(),
+            isEnable: (e) => e.actions.liftListItem.isEnable(),
+        },
+    ],
+};
+export const wCodeListConfig = {
+    icon: icons.code,
+    withArrow: true,
+    title: i18n.bind(null, 'code'),
+    data: [wCodeItemData, wCodeBlockItemData],
+};
+export const wMathListConfig = {
+    icon: icons.functionInline,
+    withArrow: true,
+    title: i18n.bind(null, 'math'),
+    data: [wMathInlineItemData, wMathBlockItemData],
+};
 export const wCommandMenuConfig = [
-    ...wHeadingListConfig.data,
-    ...wListsListConfig.data,
+    wTextItemData,
+    wHeading1ItemData,
+    wHeading2ItemData,
+    wHeading3ItemData,
+    wHeading4ItemData,
+    wHeading5ItemData,
+    wHeading6ItemData,
+    wBulletListItemData,
+    wOrderedListItemData,
+    wSinkListItemData,
+    wLiftListItemData,
     wLinkItemData,
     wQuoteItemData,
     wNoteItemData,
@@ -425,18 +469,53 @@ export const wCommandMenuConfig = [
     wHruleItemData,
     wEmojiItemData,
     wFileItemData,
-    // wMathInlineItemData,
-    // wMathBlockItemData,
     wTabsItemData,
 ];
 export const wHiddenData = wCommandMenuConfig;
-/** prepared wysiwyg toolbar config */
+export const wHistoryGroupConfig = [wUndoItemData, wRedoItemData];
+export const wBiusGroupConfig = [
+    wBoldItemData,
+    wItalicItemData,
+    wUnderlineItemData,
+    wStrikethroughItemData,
+    wMonospaceItemData,
+    wMarkedItemData,
+];
 export const wToolbarConfig = [
-    wHistoryGroupConfig,
-    wBiusGroupConfig,
+    [wUndoItemData, wRedoItemData],
+    [
+        wBoldItemData,
+        wItalicItemData,
+        wUnderlineItemData,
+        wStrikethroughItemData,
+        wMonospaceItemData,
+        wMarkedItemData,
+    ],
     [
-        Object.assign({ id: 'heading', type: ToolbarDataType.ListButton }, wHeadingListConfig),
-        Object.assign({ id: 'list', type: ToolbarDataType.ListButton }, wListsListConfig),
+        {
+            id: 'heading',
+            type: ToolbarDataType.ListButton,
+            icon: icons.headline,
+            withArrow: true,
+            title: i18n.bind(null, 'heading'),
+            data: [
+                wTextItemData,
+                wHeading1ItemData,
+                wHeading2ItemData,
+                wHeading3ItemData,
+                wHeading4ItemData,
+                wHeading5ItemData,
+                wHeading6ItemData,
+            ],
+        },
+        {
+            id: 'list',
+            type: ToolbarDataType.ListButton,
+            icon: icons.bulletList,
+            withArrow: true,
+            title: i18n.bind(null, 'list'),
+            data: [wBulletListItemData, wOrderedListItemData, wSinkListItemData, wLiftListItemData],
+        },
         {
             id: 'colorify',
             type: ToolbarDataType.ReactComponent,
@@ -447,36 +526,28 @@ export const wToolbarConfig = [
         wNoteItemData,
         wCutItemData,
         wQuoteItemData,
-        Object.assign({ id: 'code', type: ToolbarDataType.ListButton }, wCodeListConfig),
+        {
+            id: 'code',
+            type: ToolbarDataType.ListButton,
+            icon: icons.code,
+            withArrow: true,
+            title: i18n.bind(null, 'code'),
+            data: [wCodeItemData, wCodeBlockItemData],
+        },
     ],
     [wImageItemData, wFileItemData, wTableItemData, wCheckboxItemData],
 ];
-export const wToggleHeadingFoldingItemData = {
-    id: 'folding-heading',
-    type: ToolbarDataType.SingleButton,
-    icon: icons.foldingHeading,
-    title: () => i18n('folding-heading'),
-    hint: () => i18n('folding-heading__hint'),
-    isActive: (editor) => { var _a, _b; return (_b = (_a = editor.actions.toggleHeadingFolding) === null || _a === void 0 ? void 0 : _a.isActive()) !== null && _b !== void 0 ? _b : false; },
-    isEnable: (editor) => { var _a, _b; return (_b = (_a = editor.actions.toggleHeadingFolding) === null || _a === void 0 ? void 0 : _a.isEnable()) !== null && _b !== void 0 ? _b : false; },
-    exec: (editor) => editor.actions.toggleHeadingFolding.run(),
-    condition: 'enabled',
-};
-const textContextItemData = {
-    id: 'text',
-    type: ToolbarDataType.ReactComponent,
-    component: WToolbarTextSelect,
-    width: 0,
-    condition: ({ selection: { $from, $to }, schema }) => {
-        if (!$from.sameParent($to))
-            return false;
-        const { parent } = $from;
-        return parent.type === pType(schema) || parent.type === headingType(schema);
-    },
-};
 export const wSelectionMenuConfig = [
     [wToggleHeadingFoldingItemData, textContextItemData],
-    [...wBiusGroupConfig, wCodeItemData],
+    [
+        wBoldItemData,
+        wItalicItemData,
+        wUnderlineItemData,
+        wStrikethroughItemData,
+        wMonospaceItemData,
+        wMarkedItemData,
+        wCodeItemData,
+    ],
     [
         {
             id: 'colorify',
@@ -487,41 +558,100 @@ export const wSelectionMenuConfig = [
         wLinkItemData,
     ],
 ];
-export const wMermaidItemData = {
-    id: ActionName.mermaid,
-    type: ToolbarDataType.SingleButton,
-    title: i18n.bind(null, 'mermaid'),
-    icon: icons.mermaid,
-    exec: (e) => e.actions.createMermaid.run(),
-    isActive: (e) => e.actions.createMermaid.isActive(),
-    isEnable: (e) => e.actions.createMermaid.isEnable(),
-};
 export const wToolbarConfigByPreset = {
-    zero: [wHistoryGroupConfig],
+    zero: [[wUndoItemData, wRedoItemData]],
     commonmark: [
-        wHistoryGroupConfig,
+        [wUndoItemData, wRedoItemData],
         [wBoldItemData, wItalicItemData],
         [
-            Object.assign({ id: 'heading', type: ToolbarDataType.ListButton }, wHeadingListConfig),
-            Object.assign({ id: 'list', type: ToolbarDataType.ListButton }, wListsListConfig),
+            {
+                id: 'heading',
+                type: ToolbarDataType.ListButton,
+                icon: icons.headline,
+                withArrow: true,
+                title: i18n.bind(null, 'heading'),
+                data: [
+                    wTextItemData,
+                    wHeading1ItemData,
+                    wHeading2ItemData,
+                    wHeading3ItemData,
+                    wHeading4ItemData,
+                    wHeading5ItemData,
+                    wHeading6ItemData,
+                ],
+            },
+            {
+                id: 'list',
+                type: ToolbarDataType.ListButton,
+                icon: icons.bulletList,
+                withArrow: true,
+                title: i18n.bind(null, 'list'),
+                data: [
+                    wBulletListItemData,
+                    wOrderedListItemData,
+                    wSinkListItemData,
+                    wLiftListItemData,
+                ],
+            },
             wLinkItemData,
             wQuoteItemData,
-            Object.assign({ id: 'code', type: ToolbarDataType.ListButton }, wCodeListConfig),
+            {
+                id: 'code',
+                type: ToolbarDataType.ListButton,
+                icon: icons.code,
+                withArrow: true,
+                title: i18n.bind(null, 'code'),
+                data: [wCodeItemData, wCodeBlockItemData],
+            },
         ],
     ],
     default: [
-        wHistoryGroupConfig,
+        [wUndoItemData, wRedoItemData],
         [wBoldItemData, wItalicItemData, wStrikethroughItemData],
         [
-            Object.assign({ id: 'heading', type: ToolbarDataType.ListButton }, wHeadingListConfig),
-            Object.assign({ id: 'list', type: ToolbarDataType.ListButton }, wListsListConfig),
+            {
+                id: 'heading',
+                type: ToolbarDataType.ListButton,
+                icon: icons.headline,
+                withArrow: true,
+                title: i18n.bind(null, 'heading'),
+                data: [
+                    wTextItemData,
+                    wHeading1ItemData,
+                    wHeading2ItemData,
+                    wHeading3ItemData,
+                    wHeading4ItemData,
+                    wHeading5ItemData,
+                    wHeading6ItemData,
+                ],
+            },
+            {
+                id: 'list',
+                type: ToolbarDataType.ListButton,
+                icon: icons.bulletList,
+                withArrow: true,
+                title: i18n.bind(null, 'list'),
+                data: [
+                    wBulletListItemData,
+                    wOrderedListItemData,
+                    wSinkListItemData,
+                    wLiftListItemData,
+                ],
+            },
             wLinkItemData,
             wQuoteItemData,
-            Object.assign({ id: 'code', type: ToolbarDataType.ListButton }, wCodeListConfig),
+            {
+                id: 'code',
+                type: ToolbarDataType.ListButton,
+                icon: icons.code,
+                withArrow: true,
+                title: i18n.bind(null, 'code'),
+                data: [wCodeItemData, wCodeBlockItemData],
+            },
         ],
     ],
     yfm: [
-        wHistoryGroupConfig,
+        [wUndoItemData, wRedoItemData],
         [
             wBoldItemData,
             wItalicItemData,
@@ -530,13 +660,47 @@ export const wToolbarConfigByPreset = {
             wMonospaceItemData,
         ],
         [
-            Object.assign({ id: 'heading', type: ToolbarDataType.ListButton }, wHeadingListConfig),
-            Object.assign({ id: 'list', type: ToolbarDataType.ListButton }, wListsListConfig),
+            {
+                id: 'heading',
+                type: ToolbarDataType.ListButton,
+                icon: icons.headline,
+                withArrow: true,
+                title: i18n.bind(null, 'heading'),
+                data: [
+                    wTextItemData,
+                    wHeading1ItemData,
+                    wHeading2ItemData,
+                    wHeading3ItemData,
+                    wHeading4ItemData,
+                    wHeading5ItemData,
+                    wHeading6ItemData,
+                ],
+            },
+            {
+                id: 'list',
+                type: ToolbarDataType.ListButton,
+                icon: icons.bulletList,
+                withArrow: true,
+                title: i18n.bind(null, 'list'),
+                data: [
+                    wBulletListItemData,
+                    wOrderedListItemData,
+                    wSinkListItemData,
+                    wLiftListItemData,
+                ],
+            },
             wLinkItemData,
             wNoteItemData,
             wCutItemData,
             wQuoteItemData,
-            Object.assign({ id: 'code', type: ToolbarDataType.ListButton }, wCodeListConfig),
+            {
+                id: 'code',
+                type: ToolbarDataType.ListButton,
+                icon: icons.code,
+                withArrow: true,
+                title: i18n.bind(null, 'code'),
+                data: [wCodeItemData, wCodeBlockItemData],
+            },
         ],
         [wImageItemData, wFileItemData, wTableItemData, wCheckboxItemData],
     ],
@@ -545,24 +709,75 @@ export const wToolbarConfigByPreset = {
 export const wCommandMenuConfigByPreset = {
     zero: [],
     commonmark: [
-        ...wHeadingListConfig.data,
-        ...wListsListConfig.data,
+        wTextItemData,
+        wHeading1ItemData,
+        wHeading2ItemData,
+        wHeading3ItemData,
+        wHeading4ItemData,
+        wHeading5ItemData,
+        wHeading6ItemData,
+        wBulletListItemData,
+        wOrderedListItemData,
+        wSinkListItemData,
+        wLiftListItemData,
         wLinkItemData,
         wQuoteItemData,
         wCodeBlockItemData,
         wHruleItemData,
     ],
     default: [
-        ...wHeadingListConfig.data,
-        ...wListsListConfig.data,
+        wTextItemData,
+        wHeading1ItemData,
+        wHeading2ItemData,
+        wHeading3ItemData,
+        wHeading4ItemData,
+        wHeading5ItemData,
+        wHeading6ItemData,
+        wBulletListItemData,
+        wOrderedListItemData,
+        wSinkListItemData,
+        wLiftListItemData,
         wLinkItemData,
         wQuoteItemData,
         wCodeBlockItemData,
         wHruleItemData,
     ],
     yfm: [
-        ...wHeadingListConfig.data,
-        ...wListsListConfig.data,
+        wTextItemData,
+        wHeading1ItemData,
+        wHeading2ItemData,
+        wHeading3ItemData,
+        wHeading4ItemData,
+        wHeading5ItemData,
+        wHeading6ItemData,
+        wBulletListItemData,
+        wOrderedListItemData,
+        wSinkListItemData,
+        wLiftListItemData,
+        wLinkItemData,
+        wQuoteItemData,
+        wNoteItemData,
+        wCutItemData,
+        wCodeBlockItemData,
+        wCheckboxItemData,
+        wTableItemData,
+        wImageItemData,
+        wHruleItemData,
+        wFileItemData,
+        wTabsItemData,
+    ],
+    full: [
+        wTextItemData,
+        wHeading1ItemData,
+        wHeading2ItemData,
+        wHeading3ItemData,
+        wHeading4ItemData,
+        wHeading5ItemData,
+        wHeading6ItemData,
+        wBulletListItemData,
+        wOrderedListItemData,
+        wSinkListItemData,
+        wLiftListItemData,
         wLinkItemData,
         wQuoteItemData,
         wNoteItemData,
@@ -572,10 +787,10 @@ export const wCommandMenuConfigByPreset = {
         wTableItemData,
         wImageItemData,
         wHruleItemData,
+        wEmojiItemData,
         wFileItemData,
         wTabsItemData,
     ],
-    full: wCommandMenuConfig.slice(),
 };
 export const wHiddenDataByPreset = {
     zero: wCommandMenuConfigByPreset.zero.slice(),