@gravity-ui/markdown-editor 14.4.0 → 14.5.0

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

@@ -12,29 +12,26 @@ const noop = () => { };
 const inactive = () => false;
 const enable = () => true;
 const disable = () => false;
-export const mHistoryGroupConfig = [
-    {
-        id: ActionName.undo,
-        type: ToolbarDataType.SingleButton,
-        title: i18n.bind(null, 'undo'),
-        icon: icons.undo,
-        hotkey: f.toView(A.Undo),
-        exec: (e) => undo(e.cm),
-        isActive: inactive,
-        isEnable: (e) => undoDepth(e.cm.state) > 0,
-    },
-    {
-        id: ActionName.redo,
-        type: ToolbarDataType.SingleButton,
-        title: i18n.bind(null, 'redo'),
-        icon: icons.redo,
-        hotkey: f.toView(A.Redo),
-        exec: (e) => redo(e.cm),
-        isActive: inactive,
-        isEnable: (e) => redoDepth(e.cm.state) > 0,
-    },
-];
-/** Bold, Italic, Underline, Strike buttons group */
+export const mUndoItemData = {
+    id: ActionName.undo,
+    type: ToolbarDataType.SingleButton,
+    title: i18n.bind(null, 'undo'),
+    icon: icons.undo,
+    hotkey: f.toView(A.Undo),
+    exec: (e) => undo(e.cm),
+    isActive: inactive,
+    isEnable: (e) => undoDepth(e.cm.state) > 0,
+};
+export const mRedoItemData = {
+    id: ActionName.redo,
+    type: ToolbarDataType.SingleButton,
+    title: i18n.bind(null, 'redo'),
+    icon: icons.redo,
+    hotkey: f.toView(A.Redo),
+    exec: (e) => redo(e.cm),
+    isActive: inactive,
+    isEnable: (e) => redoDepth(e.cm.state) > 0,
+};
 export const mBoldItemData = {
     id: ActionName.bold,
     type: ToolbarDataType.SingleButton,
@@ -93,132 +90,6 @@ export const mMarkedItemData = {
     isActive: inactive,
     isEnable: enable,
 };
-export const mBiusGroupConfig = [
-    mBoldItemData,
-    mItalicItemData,
-    {
-        id: ActionName.underline,
-        type: ToolbarDataType.SingleButton,
-        title: i18n.bind(null, 'underline'),
-        icon: icons.underline,
-        hotkey: f.toView(A.Underline),
-        exec: (e) => toggleUnderline(e.cm),
-        isActive: inactive,
-        isEnable: enable,
-    },
-    {
-        id: ActionName.strike,
-        type: ToolbarDataType.SingleButton,
-        title: i18n.bind(null, 'strike'),
-        icon: icons.strikethrough,
-        hotkey: f.toView(A.Strike),
-        exec: (e) => toggleStrikethrough(e.cm),
-        isActive: inactive,
-        isEnable: enable,
-    },
-    {
-        id: ActionName.mono,
-        type: ToolbarDataType.SingleButton,
-        title: i18n.bind(null, 'mono'),
-        icon: icons.mono,
-        exec: (e) => toggleMonospace(e.cm),
-        isActive: inactive,
-        isEnable: enable,
-    },
-    {
-        id: ActionName.mark,
-        type: ToolbarDataType.SingleButton,
-        title: i18n.bind(null, 'mark'),
-        icon: icons.mark,
-        exec: (e) => toggleMarked(e.cm),
-        isActive: inactive,
-        isEnable: enable,
-    },
-];
-export const mHeadingListConfig = {
-    icon: icons.headline,
-    withArrow: true,
-    title: i18n.bind(null, 'heading'),
-    data: [
-        {
-            id: ActionName.heading1,
-            title: i18n.bind(null, 'heading1'),
-            icon: icons.h1,
-            hotkey: f.toView(A.Heading1),
-            exec: (e) => toH1(e.cm),
-            isActive: inactive,
-            isEnable: enable,
-        },
-        {
-            id: ActionName.heading2,
-            title: i18n.bind(null, 'heading2'),
-            icon: icons.h2,
-            hotkey: f.toView(A.Heading2),
-            exec: (e) => toH2(e.cm),
-            isActive: inactive,
-            isEnable: enable,
-        },
-        {
-            id: ActionName.heading3,
-            title: i18n.bind(null, 'heading3'),
-            icon: icons.h3,
-            hotkey: f.toView(A.Heading3),
-            exec: (e) => toH3(e.cm),
-            isActive: inactive,
-            isEnable: enable,
-        },
-        {
-            id: ActionName.heading4,
-            title: i18n.bind(null, 'heading4'),
-            icon: icons.h4,
-            hotkey: f.toView(A.Heading4),
-            exec: (e) => toH4(e.cm),
-            isActive: inactive,
-            isEnable: enable,
-        },
-        {
-            id: ActionName.heading5,
-            title: i18n.bind(null, 'heading5'),
-            icon: icons.h5,
-            hotkey: f.toView(A.Heading5),
-            exec: (e) => toH5(e.cm),
-            isActive: inactive,
-            isEnable: enable,
-        },
-        {
-            id: ActionName.heading6,
-            title: i18n.bind(null, 'heading6'),
-            icon: icons.h6,
-            hotkey: f.toView(A.Heading6),
-            exec: (e) => toH6(e.cm),
-            isActive: inactive,
-            isEnable: enable,
-        },
-    ],
-};
-export const mListsListConfig = {
-    icon: icons.bulletList,
-    withArrow: true,
-    title: i18n.bind(null, 'list'),
-    data: [
-        {
-            id: ActionName.bulletList,
-            title: i18n.bind(null, 'ulist'),
-            icon: icons.bulletList,
-            exec: (e) => toBulletList(e.cm),
-            isActive: inactive,
-            isEnable: enable,
-        },
-        {
-            id: ActionName.orderedList,
-            title: i18n.bind(null, 'olist'),
-            icon: icons.orderedList,
-            exec: (e) => toOrderedList(e.cm),
-            isActive: inactive,
-            isEnable: enable,
-        },
-    ],
-};
 export const mCheckboxButton = {
     id: ActionName.checkbox,
     type: ToolbarDataType.SingleButton,
@@ -228,29 +99,7 @@ export const mCheckboxButton = {
     isActive: inactive,
     isEnable: enable,
 };
-export const mListMoveListConfig = {
-    icon: icons.lift,
-    withArrow: true,
-    title: 'Move list item',
-    data: [
-        {
-            id: ActionName.sinkListItem,
-            title: i18n.bind(null, 'list__action_sink'),
-            icon: icons.sink,
-            exec: (e) => sinkListItem(e.cm),
-            isActive: inactive,
-            isEnable: enable,
-        },
-        {
-            id: ActionName.liftListItem,
-            title: i18n.bind(null, 'list__action_lift'),
-            icon: icons.lift,
-            exec: (e) => liftListItem(e.cm),
-            isActive: inactive,
-            isEnable: enable,
-        },
-    ],
-};
+export const mCheckboxItemData = mCheckboxButton;
 export const mLinkButton = {
     id: ActionName.link,
     type: ToolbarDataType.SingleButton,
@@ -260,16 +109,7 @@ export const mLinkButton = {
     isActive: inactive,
     isEnable: enable,
 };
-export const mNoteButton = {
-    id: ActionName.yfm_note,
-    type: ToolbarDataType.SingleButton,
-    title: i18n.bind(null, 'note'),
-    icon: icons.note,
-    hotkey: f.toView(A.Note),
-    exec: (e) => wrapToYfmNote(e.cm),
-    isActive: inactive,
-    isEnable: enable,
-};
+export const mLinkItemData = mLinkButton;
 export const mQuoteButton = {
     id: ActionName.quote,
     type: ToolbarDataType.SingleButton,
@@ -279,6 +119,7 @@ export const mQuoteButton = {
     isActive: inactive,
     isEnable: enable,
 };
+export const mQuoteItemData = mQuoteButton;
 export const mCutButton = {
     id: ActionName.yfm_cut,
     type: ToolbarDataType.SingleButton,
@@ -289,6 +130,18 @@ export const mCutButton = {
     isActive: inactive,
     isEnable: enable,
 };
+export const mCutItemData = mCutButton;
+export const mNoteButton = {
+    id: ActionName.yfm_note,
+    type: ToolbarDataType.SingleButton,
+    title: i18n.bind(null, 'note'),
+    icon: icons.note,
+    hotkey: f.toView(A.Note),
+    exec: (e) => wrapToYfmNote(e.cm),
+    isActive: inactive,
+    isEnable: enable,
+};
+export const mNoteItemData = mNoteButton;
 export const mTableButton = {
     id: ActionName.table,
     type: ToolbarDataType.SingleButton,
@@ -298,71 +151,13 @@ export const mTableButton = {
     isActive: inactive,
     isEnable: enable,
 };
-export const mCodeblockItemData = {
-    id: ActionName.code_block,
-    title: i18n.bind(null, 'codeblock'),
-    icon: icons.codeBlock,
-    hotkey: f.toView(A.CodeBlock),
-    exec: (e) => wrapToCodeBlock(e.cm),
-    isActive: inactive,
-    isEnable: enable,
-};
-export const mCodeListConfig = {
+export const mTableItemData = mTableButton;
+export const mCodeItemData = {
+    id: ActionName.code_inline,
+    title: i18n.bind(null, 'code_inline'),
     icon: icons.code,
-    withArrow: true,
-    title: i18n.bind(null, 'code'),
-    data: [
-        {
-            id: ActionName.code_inline,
-            title: i18n.bind(null, 'code_inline'),
-            icon: icons.code,
-            hotkey: f.toView(A.Code),
-            exec: (e) => wrapToInlineCode(e.cm),
-            isActive: inactive,
-            isEnable: enable,
-        },
-        mCodeblockItemData,
-    ],
-};
-export const mMathListConfig = {
-    icon: icons.functionInline,
-    withArrow: true,
-    title: i18n.bind(null, 'math'),
-    data: [
-        {
-            id: ActionName.math_inline,
-            title: i18n.bind(null, 'math_inline'),
-            icon: icons.functionInline,
-            exec: (e) => wrapToMathInline(e.cm),
-            isActive: inactive,
-            isEnable: enable,
-        },
-        {
-            id: ActionName.math_block,
-            title: i18n.bind(null, 'math_block'),
-            icon: icons.functionBlock,
-            exec: (e) => wrapToMathBlock(e.cm),
-            isActive: inactive,
-            isEnable: enable,
-        },
-    ],
-};
-export const mMathListItem = Object.assign({ id: 'math', type: ToolbarDataType.ListButton }, mMathListConfig);
-export const mMermaidButton = {
-    id: ActionName.mermaid,
-    type: ToolbarDataType.SingleButton,
-    title: i18n.bind(null, 'mermaid'),
-    icon: icons.mermaid,
-    exec: (e) => insertMermaidDiagram(e.cm),
-    isActive: inactive,
-    isEnable: enable,
-};
-export const mYfmHtmlBlockButton = {
-    id: ActionName.yfm_html_block,
-    type: ToolbarDataType.SingleButton,
-    title: i18n.bind(null, 'html'),
-    icon: icons.html,
-    exec: (e) => insertYfmHtmlBlock(e.cm),
+    hotkey: f.toView(A.Code),
+    exec: (e) => wrapToInlineCode(e.cm),
     isActive: inactive,
     isEnable: enable,
 };
@@ -376,6 +171,7 @@ export const mImagePopupData = {
     isEnable: enable,
     renderPopup: (props) => React.createElement(MToolbarImagePopup, Object.assign({}, props)),
 };
+export const mImageItemData = mImagePopupData;
 export const mFilePopupData = {
     id: 'file',
     type: ToolbarDataType.ButtonPopup,
@@ -386,41 +182,62 @@ export const mFilePopupData = {
     isEnable: enable,
     renderPopup: (props) => React.createElement(MToolbarFilePopup, Object.assign({}, props)),
 };
-/** prepared markup toolbar config */
-export const mToolbarConfig = [
-    mHistoryGroupConfig,
-    mBiusGroupConfig,
-    [
-        Object.assign({ id: 'heading', type: ToolbarDataType.ListButton }, mHeadingListConfig),
-        Object.assign({ id: 'list', type: ToolbarDataType.ListButton }, mListsListConfig),
-        {
-            id: 'colorify',
-            type: ToolbarDataType.ReactComponent,
-            component: MToolbarColors,
-            width: 42,
-        },
-        mLinkButton,
-        mNoteButton,
-        mCutButton,
-        mQuoteButton,
-        Object.assign({ id: 'code', type: ToolbarDataType.ListButton }, mCodeListConfig),
-    ],
-    [
-        mImagePopupData,
-        {
-            id: 'file',
-            type: ToolbarDataType.ButtonPopup,
-            icon: icons.file,
-            title: i18n('file'),
-            exec: noop,
-            isActive: inactive,
-            isEnable: enable,
-            renderPopup: (props) => React.createElement(MToolbarFilePopup, Object.assign({}, props)),
-        },
-        mTableButton,
-        mCheckboxButton,
-    ],
-];
+export const mFileItemData = mFilePopupData;
+export const mTabsItemData = {
+    id: 'tabs',
+    title: i18n.bind(null, 'tabs'),
+    icon: icons.tabs,
+    type: ToolbarDataType.SingleButton,
+    exec: (e) => insertYfmTabs(e.cm),
+    isActive: inactive,
+    isEnable: enable,
+};
+export const mMathInlineItemData = {
+    id: ActionName.math_inline,
+    title: i18n.bind(null, 'math_inline'),
+    icon: icons.functionInline,
+    exec: (e) => wrapToMathInline(e.cm),
+    isActive: inactive,
+    isEnable: enable,
+};
+export const mMathBlockItemData = {
+    id: ActionName.math_block,
+    title: i18n.bind(null, 'math_block'),
+    icon: icons.functionBlock,
+    exec: (e) => wrapToMathBlock(e.cm),
+    isActive: inactive,
+    isEnable: enable,
+};
+export const mYfmHtmlBlockButton = {
+    id: ActionName.yfm_html_block,
+    type: ToolbarDataType.SingleButton,
+    title: i18n.bind(null, 'html'),
+    icon: icons.html,
+    exec: (e) => insertYfmHtmlBlock(e.cm),
+    isActive: inactive,
+    isEnable: enable,
+};
+export const mYfmHtmlBlockItemData = mYfmHtmlBlockButton;
+export const mMermaidButton = {
+    id: ActionName.mermaid,
+    type: ToolbarDataType.SingleButton,
+    title: i18n.bind(null, 'mermaid'),
+    icon: icons.mermaid,
+    exec: (e) => insertMermaidDiagram(e.cm),
+    isActive: inactive,
+    isEnable: enable,
+};
+export const mMermaidItemData = mMermaidButton;
+export const mCodeblockItemData = {
+    id: ActionName.code_block,
+    title: i18n.bind(null, 'codeblock'),
+    icon: icons.codeBlock,
+    hotkey: f.toView(A.CodeBlock),
+    exec: (e) => wrapToCodeBlock(e.cm),
+    isActive: inactive,
+    isEnable: enable,
+};
+export const mCodeBlockItemData = mCodeblockItemData;
 export const mHruleItemData = {
     id: 'hrule',
     title: i18n.bind(null, 'hrule'),
@@ -440,42 +257,277 @@ export const mEmojiItemData = {
     isActive: inactive,
     isEnable: disable,
 };
-export const mTabsItemData = {
-    id: 'tabs',
-    title: i18n.bind(null, 'tabs'),
-    icon: icons.tabs,
-    type: ToolbarDataType.SingleButton,
-    exec: (e) => insertYfmTabs(e.cm),
+export const mMathListItem = {
+    id: 'math',
+    type: ToolbarDataType.ListButton,
+    icon: icons.functionInline,
+    withArrow: true,
+    title: i18n.bind(null, 'math'),
+    data: [mMathInlineItemData, mMathBlockItemData],
+};
+export const mHeading1ItemData = {
+    id: ActionName.heading1,
+    title: i18n.bind(null, 'heading1'),
+    icon: icons.h1,
+    hotkey: f.toView(A.Heading1),
+    exec: (e) => toH1(e.cm),
+    isActive: inactive,
+    isEnable: enable,
+};
+export const mHeading2ItemData = {
+    id: ActionName.heading2,
+    title: i18n.bind(null, 'heading2'),
+    icon: icons.h2,
+    hotkey: f.toView(A.Heading2),
+    exec: (e) => toH2(e.cm),
+    isActive: inactive,
+    isEnable: enable,
+};
+export const mHeading3ItemData = {
+    id: ActionName.heading3,
+    title: i18n.bind(null, 'heading3'),
+    icon: icons.h3,
+    hotkey: f.toView(A.Heading3),
+    exec: (e) => toH3(e.cm),
+    isActive: inactive,
+    isEnable: enable,
+};
+export const mHeading4ItemData = {
+    id: ActionName.heading4,
+    title: i18n.bind(null, 'heading4'),
+    icon: icons.h4,
+    hotkey: f.toView(A.Heading4),
+    exec: (e) => toH4(e.cm),
+    isActive: inactive,
+    isEnable: enable,
+};
+export const mHeading5ItemData = {
+    id: ActionName.heading5,
+    title: i18n.bind(null, 'heading5'),
+    icon: icons.h5,
+    hotkey: f.toView(A.Heading5),
+    exec: (e) => toH5(e.cm),
+    isActive: inactive,
+    isEnable: enable,
+};
+export const mHeading6ItemData = {
+    id: ActionName.heading6,
+    title: i18n.bind(null, 'heading6'),
+    icon: icons.h6,
+    hotkey: f.toView(A.Heading6),
+    exec: (e) => toH6(e.cm),
+    isActive: inactive,
+    isEnable: enable,
+};
+export const mBulletListItemData = {
+    id: ActionName.bulletList,
+    title: i18n.bind(null, 'ulist'),
+    icon: icons.bulletList,
+    exec: (e) => toBulletList(e.cm),
+    isActive: inactive,
+    isEnable: enable,
+};
+export const mOrderedListItemData = {
+    id: ActionName.orderedList,
+    title: i18n.bind(null, 'olist'),
+    icon: icons.orderedList,
+    exec: (e) => toOrderedList(e.cm),
+    isActive: inactive,
+    isEnable: enable,
+};
+export const mSinkListItemData = {
+    id: ActionName.sinkListItem,
+    title: i18n.bind(null, 'list__action_sink'),
+    icon: icons.sink,
+    exec: (e) => sinkListItem(e.cm),
     isActive: inactive,
     isEnable: enable,
 };
+export const mLiftListItemData = {
+    id: ActionName.liftListItem,
+    title: i18n.bind(null, 'list__action_lift'),
+    icon: icons.lift,
+    exec: (e) => liftListItem(e.cm),
+    isActive: inactive,
+    isEnable: enable,
+};
+export const mHeadingListConfig = {
+    icon: icons.headline,
+    withArrow: true,
+    title: i18n.bind(null, 'heading'),
+    data: [
+        mHeading1ItemData,
+        mHeading2ItemData,
+        mHeading3ItemData,
+        mHeading4ItemData,
+        mHeading5ItemData,
+        mHeading6ItemData,
+    ],
+};
+export const mListsListConfig = {
+    icon: icons.bulletList,
+    withArrow: true,
+    title: i18n.bind(null, 'list'),
+    data: [mBulletListItemData, mOrderedListItemData],
+};
+export const mListMoveListConfig = {
+    icon: icons.lift,
+    withArrow: true,
+    title: 'Move list item',
+    data: [mSinkListItemData, mLiftListItemData],
+};
+export const mCodeListConfig = {
+    icon: icons.code,
+    withArrow: true,
+    title: i18n.bind(null, 'code'),
+    data: [mCodeItemData, mCodeblockItemData],
+};
+export const mMathListConfig = {
+    icon: icons.functionInline,
+    withArrow: true,
+    title: i18n.bind(null, 'math'),
+    data: [mMathInlineItemData, mMathBlockItemData],
+};
 export const mHiddenData = [mHruleItemData, mEmojiItemData, mTabsItemData];
+export const mHistoryGroupConfig = [mUndoItemData, mRedoItemData];
+export const mBiusGroupConfig = [
+    mBoldItemData,
+    mItalicItemData,
+    mUnderlineItemData,
+    mStrikethroughItemData,
+    mMonospaceItemData,
+    mMarkedItemData,
+];
+export const mToolbarConfig = [
+    [mUndoItemData, mRedoItemData],
+    mBiusGroupConfig,
+    [
+        {
+            id: 'heading',
+            type: ToolbarDataType.ListButton,
+            icon: icons.headline,
+            withArrow: true,
+            title: i18n.bind(null, 'heading'),
+            data: [
+                mHeading1ItemData,
+                mHeading2ItemData,
+                mHeading3ItemData,
+                mHeading4ItemData,
+                mHeading5ItemData,
+                mHeading6ItemData,
+            ],
+        },
+        {
+            id: 'list',
+            type: ToolbarDataType.ListButton,
+            icon: icons.bulletList,
+            withArrow: true,
+            title: i18n.bind(null, 'list'),
+            data: [mBulletListItemData, mOrderedListItemData],
+        },
+        {
+            id: 'colorify',
+            type: ToolbarDataType.ReactComponent,
+            component: MToolbarColors,
+            width: 42,
+        },
+        mLinkButton,
+        mNoteButton,
+        mCutButton,
+        mQuoteButton,
+        {
+            id: 'code',
+            type: ToolbarDataType.ListButton,
+            icon: icons.code,
+            withArrow: true,
+            title: i18n.bind(null, 'code'),
+            data: [mCodeItemData, mCodeblockItemData],
+        },
+    ],
+    [mImagePopupData, mFilePopupData, mTableButton, mCheckboxButton],
+];
 export const mToolbarConfigByPreset = {
     zero: [mHistoryGroupConfig],
     commonmark: [
-        mHistoryGroupConfig,
+        [mUndoItemData, mRedoItemData],
         [mBoldItemData, mItalicItemData],
         [
-            Object.assign({ id: 'heading', type: ToolbarDataType.ListButton }, mHeadingListConfig),
-            Object.assign({ id: 'list', type: ToolbarDataType.ListButton }, mListsListConfig),
+            {
+                id: 'heading',
+                type: ToolbarDataType.ListButton,
+                icon: icons.headline,
+                withArrow: true,
+                title: i18n.bind(null, 'heading'),
+                data: [
+                    mHeading1ItemData,
+                    mHeading2ItemData,
+                    mHeading3ItemData,
+                    mHeading4ItemData,
+                    mHeading5ItemData,
+                    mHeading6ItemData,
+                ],
+            },
+            {
+                id: 'list',
+                type: ToolbarDataType.ListButton,
+                icon: icons.bulletList,
+                withArrow: true,
+                title: i18n.bind(null, 'list'),
+                data: [mBulletListItemData, mOrderedListItemData],
+            },
             mLinkButton,
             mQuoteButton,
-            Object.assign({ id: 'code', type: ToolbarDataType.ListButton }, mCodeListConfig),
+            {
+                id: 'code',
+                type: ToolbarDataType.ListButton,
+                icon: icons.code,
+                withArrow: true,
+                title: i18n.bind(null, 'code'),
+                data: [mCodeItemData, mCodeblockItemData],
+            },
         ],
     ],
     default: [
-        mHistoryGroupConfig,
+        [mUndoItemData, mRedoItemData],
         [mBoldItemData, mItalicItemData, mStrikethroughItemData],
         [
-            Object.assign({ id: 'heading', type: ToolbarDataType.ListButton }, mHeadingListConfig),
-            Object.assign({ id: 'list', type: ToolbarDataType.ListButton }, mListsListConfig),
+            {
+                id: 'heading',
+                type: ToolbarDataType.ListButton,
+                icon: icons.headline,
+                withArrow: true,
+                title: i18n.bind(null, 'heading'),
+                data: [
+                    mHeading1ItemData,
+                    mHeading2ItemData,
+                    mHeading3ItemData,
+                    mHeading4ItemData,
+                    mHeading5ItemData,
+                    mHeading6ItemData,
+                ],
+            },
+            {
+                id: 'list',
+                type: ToolbarDataType.ListButton,
+                icon: icons.bulletList,
+                withArrow: true,
+                title: i18n.bind(null, 'list'),
+                data: [mBulletListItemData, mOrderedListItemData],
+            },
             mLinkButton,
             mQuoteButton,
-            Object.assign({ id: 'code', type: ToolbarDataType.ListButton }, mCodeListConfig),
+            {
+                id: 'code',
+                type: ToolbarDataType.ListButton,
+                icon: icons.code,
+                withArrow: true,
+                title: i18n.bind(null, 'code'),
+                data: [mCodeItemData, mCodeblockItemData],
+            },
         ],
     ],
     yfm: [
-        mHistoryGroupConfig,
+        [mUndoItemData, mRedoItemData],
         [
             mBoldItemData,
             mItalicItemData,
@@ -484,13 +536,41 @@ export const mToolbarConfigByPreset = {
             mMonospaceItemData,
         ],
         [
-            Object.assign({ id: 'heading', type: ToolbarDataType.ListButton }, mHeadingListConfig),
-            Object.assign({ id: 'list', type: ToolbarDataType.ListButton }, mListsListConfig),
+            {
+                id: 'heading',
+                type: ToolbarDataType.ListButton,
+                icon: icons.headline,
+                withArrow: true,
+                title: i18n.bind(null, 'heading'),
+                data: [
+                    mHeading1ItemData,
+                    mHeading2ItemData,
+                    mHeading3ItemData,
+                    mHeading4ItemData,
+                    mHeading5ItemData,
+                    mHeading6ItemData,
+                ],
+            },
+            {
+                id: 'list',
+                type: ToolbarDataType.ListButton,
+                icon: icons.bulletList,
+                withArrow: true,
+                title: i18n.bind(null, 'list'),
+                data: [mBulletListItemData, mOrderedListItemData],
+            },
             mLinkButton,
             mNoteButton,
             mCutButton,
             mQuoteButton,
-            Object.assign({ id: 'code', type: ToolbarDataType.ListButton }, mCodeListConfig),
+            {
+                id: 'code',
+                type: ToolbarDataType.ListButton,
+                icon: icons.code,
+                withArrow: true,
+                title: i18n.bind(null, 'code'),
+                data: [mCodeItemData, mCodeblockItemData],
+            },
         ],
         [mImagePopupData, mFilePopupData, mTableButton, mCheckboxButton],
     ],
@@ -499,24 +579,42 @@ export const mToolbarConfigByPreset = {
 export const mHiddenDataByPreset = {
     zero: [],
     commonmark: [
-        ...mHeadingListConfig.data,
-        ...mListsListConfig.data,
+        mHeading1ItemData,
+        mHeading2ItemData,
+        mHeading3ItemData,
+        mHeading4ItemData,
+        mHeading5ItemData,
+        mHeading6ItemData,
+        mBulletListItemData,
+        mOrderedListItemData,
         mLinkButton,
         mQuoteButton,
         mCodeblockItemData,
         mHruleItemData,
     ],
     default: [
-        ...mHeadingListConfig.data,
-        ...mListsListConfig.data,
+        mHeading1ItemData,
+        mHeading2ItemData,
+        mHeading3ItemData,
+        mHeading4ItemData,
+        mHeading5ItemData,
+        mHeading6ItemData,
+        mBulletListItemData,
+        mOrderedListItemData,
         mLinkButton,
         mQuoteButton,
         mCodeblockItemData,
         mHruleItemData,
     ],
     yfm: [
-        ...mHeadingListConfig.data,
-        ...mListsListConfig.data,
+        mHeading1ItemData,
+        mHeading2ItemData,
+        mHeading3ItemData,
+        mHeading4ItemData,
+        mHeading5ItemData,
+        mHeading6ItemData,
+        mBulletListItemData,
+        mOrderedListItemData,
         mLinkButton,
         mQuoteButton,
         mNoteButton,
@@ -530,8 +628,14 @@ export const mHiddenDataByPreset = {
         mTabsItemData,
     ],
     full: [
-        ...mHeadingListConfig.data,
-        ...mListsListConfig.data,
+        mHeading1ItemData,
+        mHeading2ItemData,
+        mHeading3ItemData,
+        mHeading4ItemData,
+        mHeading5ItemData,
+        mHeading6ItemData,
+        mBulletListItemData,
+        mOrderedListItemData,
         mLinkButton,
         mQuoteButton,
         mNoteButton,