From 9eb646466490eaa6f25b0b73252ea776ba810f94 Mon Sep 17 00:00:00 2001 From: Sergey Makhnatkin Date: Wed, 27 Nov 2024 11:41:56 +0100 Subject: [PATCH] refactor(toolbar): grouped toolbar elements by type, assembled configs without nesting (#497) --- src/bundle/config/markup.tsx | 744 ++++++++++++++++++-------------- src/bundle/config/wysiwyg.ts | 801 +++++++++++++++++++++-------------- 2 files changed, 891 insertions(+), 654 deletions(-) diff --git a/src/bundle/config/markup.tsx b/src/bundle/config/markup.tsx index 4dbafa23..38dcbb17 100644 --- a/src/bundle/config/markup.tsx +++ b/src/bundle/config/markup.tsx @@ -46,6 +46,7 @@ import { ToolbarButtonPopupData, ToolbarDataType, ToolbarItemData, + ToolbarListButtonItemData, ToolbarListItemData, ToolbarReactComponentData, ToolbarSingleItemData, @@ -72,30 +73,27 @@ export type MToolbarListButtonData = ToolbarListButtonData; export type MToolbarListItemData = ToolbarListItemData; export type MToolbarButtonPopupData = ToolbarButtonPopupData; -export const mHistoryGroupConfig: MToolbarGroupData = [ - { - 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, - }, -]; +export const mUndoItemData: MToolbarSingleItemData = { + 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, +}; -/** Bold, Italic, Underline, Strike buttons group */ +export const mRedoItemData: MToolbarSingleItemData = { + 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: MToolbarSingleItemData = { id: ActionName.bold, @@ -161,135 +159,6 @@ export const mMarkedItemData: MToolbarSingleItemData = { isEnable: enable, }; -export const mBiusGroupConfig: MToolbarGroupData = [ - 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: MToolbarListButtonData = { - 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: MToolbarListButtonData = { - 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: MToolbarSingleItemData = { id: ActionName.checkbox, type: ToolbarDataType.SingleButton, @@ -299,30 +168,7 @@ export const mCheckboxButton: MToolbarSingleItemData = { isActive: inactive, isEnable: enable, }; - -export const mListMoveListConfig: MToolbarListButtonData = { - 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: MToolbarSingleItemData = { id: ActionName.link, @@ -333,17 +179,7 @@ export const mLinkButton: MToolbarSingleItemData = { isActive: inactive, isEnable: enable, }; - -export const mNoteButton: MToolbarSingleItemData = { - 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: MToolbarSingleItemData = { id: ActionName.quote, @@ -354,6 +190,7 @@ export const mQuoteButton: MToolbarSingleItemData = { isActive: inactive, isEnable: enable, }; +export const mQuoteItemData = mQuoteButton; export const mCutButton: MToolbarSingleItemData = { id: ActionName.yfm_cut, @@ -365,6 +202,19 @@ export const mCutButton: MToolbarSingleItemData = { isActive: inactive, isEnable: enable, }; +export const mCutItemData = mCutButton; + +export const mNoteButton: MToolbarSingleItemData = { + 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: MToolbarSingleItemData = { id: ActionName.table, @@ -375,64 +225,79 @@ export const mTableButton: MToolbarSingleItemData = { isActive: inactive, isEnable: enable, }; +export const mTableItemData = mTableButton; -export const mCodeblockItemData: MToolbarItemData = { - id: ActionName.code_block, - title: i18n.bind(null, 'codeblock'), - icon: icons.codeBlock, - hotkey: f.toView(A.CodeBlock), - exec: (e) => wrapToCodeBlock(e.cm), +export const mCodeItemData: ToolbarListButtonItemData = { + 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, }; -export const mCodeListConfig: MToolbarListButtonData = { - 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 mImagePopupData: MToolbarButtonPopupData = { + id: 'image', + type: ToolbarDataType.ButtonPopup, + icon: icons.image, + title: i18n('image'), + exec: noop, + isActive: inactive, + isEnable: enable, + renderPopup: (props) => , }; +export const mImageItemData = mImagePopupData; -export const mMathListConfig: MToolbarListButtonData = { +export const mFilePopupData: MToolbarButtonPopupData = { + id: 'file', + type: ToolbarDataType.ButtonPopup, + icon: icons.file, + title: i18n('file'), + exec: noop, + isActive: inactive, + isEnable: enable, + renderPopup: (props) => , +}; +export const mFileItemData = mFilePopupData; + +export const mTabsItemData: MToolbarSingleItemData = { + 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: ToolbarListButtonItemData = { + id: ActionName.math_inline, + title: i18n.bind(null, 'math_inline'), 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, - }, - ], + exec: (e) => wrapToMathInline(e.cm), + isActive: inactive, + isEnable: enable, +}; +export const mMathBlockItemData: ToolbarListButtonItemData = { + 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: MToolbarListItemData = { - id: 'math', - type: ToolbarDataType.ListButton, - ...mMathListConfig, +export const mYfmHtmlBlockButton: MToolbarSingleItemData = { + 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: MToolbarSingleItemData = { id: ActionName.mermaid, @@ -443,53 +308,218 @@ export const mMermaidButton: MToolbarSingleItemData = { isActive: inactive, isEnable: enable, }; +export const mMermaidItemData = mMermaidButton; -export const mYfmHtmlBlockButton: MToolbarSingleItemData = { - id: ActionName.yfm_html_block, +export const mCodeblockItemData: MToolbarItemData = { + 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: MToolbarSingleItemData = { + id: 'hrule', + title: i18n.bind(null, 'hrule'), + icon: icons.horizontalRule, type: ToolbarDataType.SingleButton, - title: i18n.bind(null, 'html'), - icon: icons.html, - exec: (e) => insertYfmHtmlBlock(e.cm), + exec: (e) => insertHRule(e.cm), isActive: inactive, isEnable: enable, }; -export const mImagePopupData: MToolbarButtonPopupData = { - id: 'image', - type: ToolbarDataType.ButtonPopup, - icon: icons.image, - title: i18n('image'), +export const mEmojiItemData: MToolbarSingleItemData = { + id: 'emoji', + title: i18n.bind(null, 'emoji'), + icon: icons.emoji, + type: ToolbarDataType.SingleButton, exec: noop, + hintWhenDisabled: i18n.bind(null, 'emoji__hint'), + isActive: inactive, + isEnable: disable, +}; + +export const mMathListItem: MToolbarListItemData = { + id: 'math', + type: ToolbarDataType.ListButton, + icon: icons.functionInline, + withArrow: true, + title: i18n.bind(null, 'math'), + data: [mMathInlineItemData, mMathBlockItemData], +}; + +export const mHeading1ItemData: ToolbarListButtonItemData = { + 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: ToolbarListButtonItemData = { + 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: ToolbarListButtonItemData = { + 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: ToolbarListButtonItemData = { + 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: ToolbarListButtonItemData = { + 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: ToolbarListButtonItemData = { + 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, - renderPopup: (props) => , }; -export const mFilePopupData: MToolbarButtonPopupData = { - id: 'file', - type: ToolbarDataType.ButtonPopup, - icon: icons.file, - title: i18n('file'), - exec: noop, +export const mBulletListItemData: ToolbarListButtonItemData = { + id: ActionName.bulletList, + title: i18n.bind(null, 'ulist'), + icon: icons.bulletList, + exec: (e) => toBulletList(e.cm), + isActive: inactive, + isEnable: enable, +}; +export const mOrderedListItemData: ToolbarListButtonItemData = { + id: ActionName.orderedList, + title: i18n.bind(null, 'olist'), + icon: icons.orderedList, + exec: (e) => toOrderedList(e.cm), + isActive: inactive, + isEnable: enable, +}; +export const mSinkListItemData: ToolbarListButtonItemData = { + 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: ToolbarListButtonItemData = { + id: ActionName.liftListItem, + title: i18n.bind(null, 'list__action_lift'), + icon: icons.lift, + exec: (e) => liftListItem(e.cm), isActive: inactive, isEnable: enable, - renderPopup: (props) => , }; -/** prepared markup toolbar config */ +export const mHeadingListConfig: MToolbarListButtonData = { + icon: icons.headline, + withArrow: true, + title: i18n.bind(null, 'heading'), + data: [ + mHeading1ItemData, + mHeading2ItemData, + mHeading3ItemData, + mHeading4ItemData, + mHeading5ItemData, + mHeading6ItemData, + ], +}; + +export const mListsListConfig: MToolbarListButtonData = { + icon: icons.bulletList, + withArrow: true, + title: i18n.bind(null, 'list'), + data: [mBulletListItemData, mOrderedListItemData], +}; + +export const mListMoveListConfig: MToolbarListButtonData = { + icon: icons.lift, + withArrow: true, + title: 'Move list item', + data: [mSinkListItemData, mLiftListItemData], +}; + +export const mCodeListConfig: MToolbarListButtonData = { + icon: icons.code, + withArrow: true, + title: i18n.bind(null, 'code'), + data: [mCodeItemData, mCodeblockItemData], +}; + +export const mMathListConfig: MToolbarListButtonData = { + icon: icons.functionInline, + withArrow: true, + title: i18n.bind(null, 'math'), + data: [mMathInlineItemData, mMathBlockItemData], +}; + +export const mHiddenData = [mHruleItemData, mEmojiItemData, mTabsItemData]; + +export const mHistoryGroupConfig: MToolbarGroupData = [mUndoItemData, mRedoItemData]; + +export const mBiusGroupConfig: MToolbarGroupData = [ + mBoldItemData, + mItalicItemData, + mUnderlineItemData, + mStrikethroughItemData, + mMonospaceItemData, + mMarkedItemData, +]; + export const mToolbarConfig: MToolbarData = [ - mHistoryGroupConfig, + [mUndoItemData, mRedoItemData], mBiusGroupConfig, [ { id: 'heading', type: ToolbarDataType.ListButton, - ...mHeadingListConfig, + icon: icons.headline, + withArrow: true, + title: i18n.bind(null, 'heading'), + data: [ + mHeading1ItemData, + mHeading2ItemData, + mHeading3ItemData, + mHeading4ItemData, + mHeading5ItemData, + mHeading6ItemData, + ], }, { id: 'list', type: ToolbarDataType.ListButton, - ...mListsListConfig, + icon: icons.bulletList, + withArrow: true, + title: i18n.bind(null, 'list'), + data: [mBulletListItemData, mOrderedListItemData], }, { id: 'colorify', @@ -504,85 +534,97 @@ export const mToolbarConfig: MToolbarData = [ { 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) => , + icon: icons.code, + withArrow: true, + title: i18n.bind(null, 'code'), + data: [mCodeItemData, mCodeblockItemData], }, - mTableButton, - mCheckboxButton, ], + [mImagePopupData, mFilePopupData, mTableButton, mCheckboxButton], ]; -export const mHruleItemData: MToolbarSingleItemData = { - id: 'hrule', - title: i18n.bind(null, 'hrule'), - icon: icons.horizontalRule, - type: ToolbarDataType.SingleButton, - exec: (e) => insertHRule(e.cm), - isActive: inactive, - isEnable: enable, -}; - -export const mEmojiItemData: MToolbarSingleItemData = { - id: 'emoji', - title: i18n.bind(null, 'emoji'), - icon: icons.emoji, - type: ToolbarDataType.SingleButton, - exec: noop, - hintWhenDisabled: i18n.bind(null, 'emoji__hint'), - isActive: inactive, - isEnable: disable, -}; - -export const mTabsItemData: MToolbarSingleItemData = { - id: 'tabs', - title: i18n.bind(null, 'tabs'), - icon: icons.tabs, - type: ToolbarDataType.SingleButton, - exec: (e) => insertYfmTabs(e.cm), - isActive: inactive, - isEnable: enable, -}; - -export const mHiddenData = [mHruleItemData, mEmojiItemData, mTabsItemData]; - export const mToolbarConfigByPreset: Record = { zero: [mHistoryGroupConfig], commonmark: [ - mHistoryGroupConfig, + [mUndoItemData, mRedoItemData], [mBoldItemData, mItalicItemData], [ - {id: 'heading', type: ToolbarDataType.ListButton, ...mHeadingListConfig}, - {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, - {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], [ - {id: 'heading', type: ToolbarDataType.ListButton, ...mHeadingListConfig}, - {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, - {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, @@ -591,13 +633,41 @@ export const mToolbarConfigByPreset: Record mMonospaceItemData, ], [ - {id: 'heading', type: ToolbarDataType.ListButton, ...mHeadingListConfig}, - {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, - {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], ], @@ -607,24 +677,42 @@ export const mToolbarConfigByPreset: Record export const mHiddenDataByPreset: Record = { 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, @@ -638,8 +726,14 @@ export const mHiddenDataByPreset: Record; export type WToolbarListItemData = ToolbarListItemData; export type WToolbarListButtonItemData = ToolbarListButtonItemData; -export const wHistoryGroupConfig: WToolbarGroupData = [ - { - 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: WToolbarSingleItemData = { + 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: WToolbarSingleItemData = { + 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: WToolbarSingleItemData = { id: ActionName.bold, type: ToolbarDataType.SingleButton, @@ -75,7 +71,6 @@ export const wBoldItemData: WToolbarSingleItemData = { isActive: (e) => e.actions.bold.isActive(), isEnable: (e) => e.actions.bold.isEnable(), }; - export const wItalicItemData: WToolbarSingleItemData = { id: ActionName.italic, type: ToolbarDataType.SingleButton, @@ -86,7 +81,6 @@ export const wItalicItemData: WToolbarSingleItemData = { isActive: (e) => e.actions.italic.isActive(), isEnable: (e) => e.actions.italic.isEnable(), }; - export const wUnderlineItemData: WToolbarSingleItemData = { id: ActionName.underline, type: ToolbarDataType.SingleButton, @@ -97,7 +91,6 @@ export const wUnderlineItemData: WToolbarSingleItemData = { isActive: (e) => e.actions.underline.isActive(), isEnable: (e) => e.actions.underline.isEnable(), }; - export const wStrikethroughItemData: WToolbarSingleItemData = { id: ActionName.strike, type: ToolbarDataType.SingleButton, @@ -108,7 +101,6 @@ export const wStrikethroughItemData: WToolbarSingleItemData = { isActive: (e) => e.actions.strike.isActive(), isEnable: (e) => e.actions.strike.isEnable(), }; - export const wMonospaceItemData: WToolbarSingleItemData = { id: ActionName.mono, type: ToolbarDataType.SingleButton, @@ -118,7 +110,6 @@ export const wMonospaceItemData: WToolbarSingleItemData = { isActive: (e) => e.actions.mono.isActive(), isEnable: (e) => e.actions.mono.isEnable(), }; - export const wMarkedItemData: WToolbarSingleItemData = { id: ActionName.mark, type: ToolbarDataType.SingleButton, @@ -128,136 +119,7 @@ export const wMarkedItemData: WToolbarSingleItemData = { isActive: (e) => e.actions.mark.isActive(), isEnable: (e) => e.actions.mark.isEnable(), }; - -export const wBiusGroupConfig: WToolbarGroupData = [ - wBoldItemData, - wItalicItemData, - wUnderlineItemData, - wStrikethroughItemData, - wMonospaceItemData, - wMarkedItemData, -]; - -export const wTextItemData: WToolbarListButtonItemData = { - 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: WToolbarListButtonData = { - 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: WToolbarListButtonData = { - 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: WToolbarSingleItemData = { id: ActionName.checkbox, type: ToolbarDataType.SingleButton, @@ -267,7 +129,6 @@ export const wCheckboxItemData: WToolbarSingleItemData = { isActive: (e) => e.actions.addCheckbox.isActive(), isEnable: (e) => e.actions.addCheckbox.isEnable(), }; - export const wLinkItemData: WToolbarSingleItemData = { id: ActionName.link, type: ToolbarDataType.SingleButton, @@ -278,7 +139,6 @@ export const wLinkItemData: WToolbarSingleItemData = { isActive: (e) => e.actions.addLink.isActive(), isEnable: (e) => e.actions.addLink.isEnable(), }; - export const wQuoteItemData: WToolbarSingleItemData = { id: ActionName.quote, type: ToolbarDataType.SingleButton, @@ -289,7 +149,6 @@ export const wQuoteItemData: WToolbarSingleItemData = { isActive: (e) => e.actions.quote.isActive(), isEnable: (e) => e.actions.quote.isEnable(), }; - export const wCutItemData: WToolbarSingleItemData = { id: ActionName.yfm_cut, type: ToolbarDataType.SingleButton, @@ -300,31 +159,6 @@ export const wCutItemData: WToolbarSingleItemData = { isActive: (e) => e.actions.toYfmCut.isActive(), isEnable: (e) => e.actions.toYfmCut.isEnable(), }; - -export const wListMoveListConfig: WToolbarListButtonData = { - 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: WToolbarSingleItemData = { id: ActionName.yfm_note, type: ToolbarDataType.SingleButton, @@ -335,7 +169,6 @@ export const wNoteItemData: WToolbarSingleItemData = { isActive: (e) => e.actions.toYfmNote.isActive(), isEnable: (e) => e.actions.toYfmNote.isEnable(), }; - export const wTableItemData: WToolbarSingleItemData = { id: ActionName.table, type: ToolbarDataType.SingleButton, @@ -345,7 +178,6 @@ export const wTableItemData: WToolbarSingleItemData = { isActive: (e) => e.actions.createYfmTable.isActive(), isEnable: (e) => e.actions.createYfmTable.isEnable(), }; - export const wCodeItemData: WToolbarSingleItemData = { id: ActionName.code_inline, type: ToolbarDataType.SingleButton, @@ -356,24 +188,6 @@ export const wCodeItemData: WToolbarSingleItemData = { isActive: (e) => e.actions.code.isActive(), isEnable: (e) => e.actions.code.isEnable(), }; - -export const wCodeBlockItemData: WToolbarItemData = { - 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: WToolbarListButtonData = { - icon: icons.code, - withArrow: true, - title: i18n.bind(null, 'code'), - data: [wCodeItemData, wCodeBlockItemData], -}; - export const wImageItemData: WToolbarSingleItemData = { id: ActionName.image, type: ToolbarDataType.SingleButton, @@ -383,25 +197,6 @@ export const wImageItemData: WToolbarSingleItemData = { isActive: (e) => e.actions.addImageWidget.isActive(), isEnable: (e) => e.actions.addImageWidget.isEnable(), }; - -export const wHruleItemData: WToolbarItemData = { - 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: WToolbarItemData = { - 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: WToolbarSingleItemData = { id: ActionName.file, type: ToolbarDataType.SingleButton, @@ -411,7 +206,15 @@ export const wFileItemData: WToolbarSingleItemData = { isActive: (e) => e.actions.addFile.isActive(), isEnable: (e) => e.actions.addFile.isEnable(), }; - +export const wTabsItemData: WToolbarSingleItemData = { + 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: WToolbarSingleItemData = { id: ActionName.math_inline, type: ToolbarDataType.SingleButton, @@ -422,17 +225,6 @@ export const wMathInlineItemData: WToolbarSingleItemData = { isActive: (e) => e.actions.addMathInline.isActive(), isEnable: (e) => e.actions.addMathInline.isEnable(), }; - -export const wTabsItemData: WToolbarSingleItemData = { - 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: WToolbarSingleItemData = { id: ActionName.math_block, type: ToolbarDataType.SingleButton, @@ -443,20 +235,6 @@ export const wMathBlockItemData: WToolbarSingleItemData = { isActive: (e) => e.actions.toMathBlock.isActive(), isEnable: (e) => e.actions.toMathBlock.isEnable(), }; - -export const wMathListConfig: WToolbarListButtonData = { - icon: icons.functionInline, - withArrow: true, - title: i18n.bind(null, 'math'), - data: [wMathInlineItemData, wMathBlockItemData], -}; - -export const wMathListItem: WToolbarListItemData = { - id: 'math', - type: ToolbarDataType.ListButton, - ...wMathListConfig, -}; - export const wYfmHtmlBlockItemData: WToolbarSingleItemData = { id: ActionName.yfm_html_block, type: ToolbarDataType.SingleButton, @@ -466,7 +244,6 @@ export const wYfmHtmlBlockItemData: WToolbarSingleItemData = { isActive: (e) => e.actions.createYfmHtmlBlock.isActive(), isEnable: (e) => e.actions.createYfmHtmlBlock.isEnable(), }; - export const wGptItemData: WToolbarSingleItemData = { id: ActionName.gpt, type: ToolbarDataType.SingleButton, @@ -477,10 +254,246 @@ export const wGptItemData: WToolbarSingleItemData = { isActive: (e) => e.actions.addGptWidget.isActive(), isEnable: (e) => e.actions.addGptWidget.isEnable(), }; +export const wMermaidItemData: WToolbarSingleItemData = { + 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: WToolbarItemData = { + 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: WToolbarItemData = { + 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: WToolbarItemData = { + 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: SelectionContextItemData = { + id: 'folding-heading', + type: ToolbarDataType.SingleButton, + icon: icons.foldingHeading, + title: () => i18n('folding-heading'), + hint: () => i18n('folding-heading__hint'), + isActive: (editor) => editor.actions.toggleHeadingFolding?.isActive() ?? false, + isEnable: (editor) => editor.actions.toggleHeadingFolding?.isEnable() ?? false, + exec: (editor) => editor.actions.toggleHeadingFolding.run(), + condition: 'enabled', +}; +export const textContextItemData: SelectionContextItemData = { + 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: WToolbarListItemData = { + id: 'math', + type: ToolbarDataType.ListButton, + icon: icons.functionInline, + withArrow: true, + title: i18n.bind(null, 'math'), + data: [wMathInlineItemData, wMathBlockItemData], +}; + +export const wTextItemData: WToolbarListButtonItemData = { + 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: WToolbarListButtonItemData = { + 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: WToolbarListButtonItemData = { + 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: WToolbarListButtonItemData = { + 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: WToolbarListButtonItemData = { + id: ActionName.heading4, + title: i18n.bind(null, 'heading4'), + icon: icons.h4, // Предполагается, что icon исправлен для 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: WToolbarListButtonItemData = { + id: ActionName.heading5, + title: i18n.bind(null, 'heading5'), + icon: icons.h5, // Предполагается, что icon исправлен для 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: WToolbarListButtonItemData = { + id: ActionName.heading6, + title: i18n.bind(null, 'heading6'), + icon: icons.h6, // Предполагается, что icon исправлен для 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: WToolbarListButtonItemData = { + 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: WToolbarListButtonItemData = { + 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: WToolbarListButtonItemData = { + 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: WToolbarListButtonItemData = { + 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: WToolbarListButtonData = { + icon: icons.headline, + withArrow: true, + title: i18n.bind(null, 'heading'), + data: [ + wTextItemData, + wHeading1ItemData, + wHeading2ItemData, + wHeading3ItemData, + wHeading4ItemData, + wHeading5ItemData, + wHeading6ItemData, + ], +}; +export const wListsListConfig: WToolbarListButtonData = { + icon: icons.bulletList, + withArrow: true, + title: i18n.bind(null, 'list'), + data: [wBulletListItemData, wOrderedListItemData, wSinkListItemData, wLiftListItemData], +}; +export const wListMoveListConfig: WToolbarListButtonData = { + 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: WToolbarListButtonData = { + icon: icons.code, + withArrow: true, + title: i18n.bind(null, 'code'), + data: [wCodeItemData, wCodeBlockItemData], +}; +export const wMathListConfig: WToolbarListButtonData = { + icon: icons.functionInline, + withArrow: true, + title: i18n.bind(null, 'math'), + data: [wMathInlineItemData, wMathBlockItemData], +}; export const wCommandMenuConfig: WToolbarItemData[] = [ - ...wHeadingListConfig.data, - ...wListsListConfig.data, + wTextItemData, + wHeading1ItemData, + wHeading2ItemData, + wHeading3ItemData, + wHeading4ItemData, + wHeading5ItemData, + wHeading6ItemData, + wBulletListItemData, + wOrderedListItemData, + wSinkListItemData, + wLiftListItemData, wLinkItemData, wQuoteItemData, wNoteItemData, @@ -492,27 +505,54 @@ export const wCommandMenuConfig: WToolbarItemData[] = [ wHruleItemData, wEmojiItemData, wFileItemData, - // wMathInlineItemData, - // wMathBlockItemData, wTabsItemData, ]; - export const wHiddenData = wCommandMenuConfig; -/** prepared wysiwyg toolbar config */ +export const wHistoryGroupConfig: WToolbarGroupData = [wUndoItemData, wRedoItemData]; +export const wBiusGroupConfig: WToolbarGroupData = [ + wBoldItemData, + wItalicItemData, + wUnderlineItemData, + wStrikethroughItemData, + wMonospaceItemData, + wMarkedItemData, +]; + export const wToolbarConfig: WToolbarData = [ - wHistoryGroupConfig, - wBiusGroupConfig, + [wUndoItemData, wRedoItemData], + [ + wBoldItemData, + wItalicItemData, + wUnderlineItemData, + wStrikethroughItemData, + wMonospaceItemData, + wMarkedItemData, + ], [ { id: 'heading', type: ToolbarDataType.ListButton, - ...wHeadingListConfig, + icon: icons.headline, + withArrow: true, + title: i18n.bind(null, 'heading'), + data: [ + wTextItemData, + wHeading1ItemData, + wHeading2ItemData, + wHeading3ItemData, + wHeading4ItemData, + wHeading5ItemData, + wHeading6ItemData, + ], }, { id: 'list', type: ToolbarDataType.ListButton, - ...wListsListConfig, + icon: icons.bulletList, + withArrow: true, + title: i18n.bind(null, 'list'), + data: [wBulletListItemData, wOrderedListItemData, wSinkListItemData, wLiftListItemData], }, { id: 'colorify', @@ -527,39 +567,26 @@ export const wToolbarConfig: WToolbarData = [ { id: 'code', type: ToolbarDataType.ListButton, - ...wCodeListConfig, + icon: icons.code, + withArrow: true, + title: i18n.bind(null, 'code'), + data: [wCodeItemData, wCodeBlockItemData], }, ], [wImageItemData, wFileItemData, wTableItemData, wCheckboxItemData], ]; -export const wToggleHeadingFoldingItemData: SelectionContextItemData = { - id: 'folding-heading', - type: ToolbarDataType.SingleButton, - icon: icons.foldingHeading, - title: () => i18n('folding-heading'), - hint: () => i18n('folding-heading__hint'), - isActive: (editor) => editor.actions.toggleHeadingFolding?.isActive() ?? false, - isEnable: (editor) => editor.actions.toggleHeadingFolding?.isEnable() ?? false, - exec: (editor) => editor.actions.toggleHeadingFolding.run(), - condition: 'enabled', -}; - -const textContextItemData: SelectionContextItemData = { - 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: SelectionContextConfig = [ [wToggleHeadingFoldingItemData, textContextItemData], - [...wBiusGroupConfig, wCodeItemData], + [ + wBoldItemData, + wItalicItemData, + wUnderlineItemData, + wStrikethroughItemData, + wMonospaceItemData, + wMarkedItemData, + wCodeItemData, + ], [ { id: 'colorify', @@ -571,54 +598,100 @@ export const wSelectionMenuConfig: SelectionContextConfig = [ ], ]; -export const wMermaidItemData: WToolbarSingleItemData = { - 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: Record = { - zero: [wHistoryGroupConfig], + zero: [[wUndoItemData, wRedoItemData]], commonmark: [ - wHistoryGroupConfig, + [wUndoItemData, wRedoItemData], [wBoldItemData, wItalicItemData], [ - {id: 'heading', type: ToolbarDataType.ListButton, ...wHeadingListConfig}, - {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, - {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], [ { id: 'heading', type: ToolbarDataType.ListButton, - ...wHeadingListConfig, + icon: icons.headline, + withArrow: true, + title: i18n.bind(null, 'heading'), + data: [ + wTextItemData, + wHeading1ItemData, + wHeading2ItemData, + wHeading3ItemData, + wHeading4ItemData, + wHeading5ItemData, + wHeading6ItemData, + ], }, { id: 'list', type: ToolbarDataType.ListButton, - ...wListsListConfig, + icon: icons.bulletList, + withArrow: true, + title: i18n.bind(null, 'list'), + data: [ + wBulletListItemData, + wOrderedListItemData, + wSinkListItemData, + wLiftListItemData, + ], }, wLinkItemData, wQuoteItemData, { id: 'code', type: ToolbarDataType.ListButton, - ...wCodeListConfig, + icon: icons.code, + withArrow: true, + title: i18n.bind(null, 'code'), + data: [wCodeItemData, wCodeBlockItemData], }, ], ], yfm: [ - wHistoryGroupConfig, + [wUndoItemData, wRedoItemData], [ wBoldItemData, wItalicItemData, @@ -630,12 +703,31 @@ export const wToolbarConfigByPreset: Record { id: 'heading', type: ToolbarDataType.ListButton, - ...wHeadingListConfig, + icon: icons.headline, + withArrow: true, + title: i18n.bind(null, 'heading'), + data: [ + wTextItemData, + wHeading1ItemData, + wHeading2ItemData, + wHeading3ItemData, + wHeading4ItemData, + wHeading5ItemData, + wHeading6ItemData, + ], }, { id: 'list', type: ToolbarDataType.ListButton, - ...wListsListConfig, + icon: icons.bulletList, + withArrow: true, + title: i18n.bind(null, 'list'), + data: [ + wBulletListItemData, + wOrderedListItemData, + wSinkListItemData, + wLiftListItemData, + ], }, wLinkItemData, wNoteItemData, @@ -644,35 +736,88 @@ export const wToolbarConfigByPreset: Record { id: 'code', type: ToolbarDataType.ListButton, - ...wCodeListConfig, + icon: icons.code, + withArrow: true, + title: i18n.bind(null, 'code'), + data: [wCodeItemData, wCodeBlockItemData], }, ], [wImageItemData, wFileItemData, wTableItemData, wCheckboxItemData], ], full: wToolbarConfig.slice(), }; - export const wCommandMenuConfigByPreset: Record = { 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, @@ -682,12 +827,11 @@ export const wCommandMenuConfigByPreset: Record = { zero: wCommandMenuConfigByPreset.zero.slice(), commonmark: wCommandMenuConfigByPreset.commonmark.slice(), @@ -695,7 +839,6 @@ export const wHiddenDataByPreset: Record = { zero: [], commonmark: [