From bb5dd66c4131c14a24580c55ae0ddb2ebaa06bca Mon Sep 17 00:00:00 2001 From: makhnatkin Date: Wed, 18 Dec 2024 09:56:42 +0100 Subject: [PATCH 1/5] feat(toolbars): added ToolbarsPreset --- src/bundle/config/markup.tsx | 207 ----------------------------------- src/bundle/config/wysiwyg.ts | 156 -------------------------- 2 files changed, 363 deletions(-) diff --git a/src/bundle/config/markup.tsx b/src/bundle/config/markup.tsx index b6835be9..c8babf3d 100644 --- a/src/bundle/config/markup.tsx +++ b/src/bundle/config/markup.tsx @@ -57,7 +57,6 @@ import { import {MToolbarColors} from '../toolbar/markup/MToolbarColors'; import {MToolbarFilePopup} from '../toolbar/markup/MToolbarFilePopup'; import {MToolbarImagePopup} from '../toolbar/markup/MToolbarImagePopup'; -import type {MarkdownEditorPreset} from '../types'; import {ActionName} from './action-names'; import {icons} from './icons'; @@ -545,209 +544,3 @@ export const mToolbarConfig: MToolbarData = [ ], [mImagePopupData, mFilePopupData, mTableButton, mCheckboxButton], ]; - -export const mToolbarConfigByPreset: Record = { - zero: [mHistoryGroupConfig], - commonmark: [ - [mUndoItemData, mRedoItemData], - [mBoldItemData, mItalicItemData], - [ - { - 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, - icon: icons.code, - withArrow: true, - title: i18n.bind(null, 'code'), - data: [mCodeItemData, mCodeblockItemData], - }, - ], - ], - default: [ - [mUndoItemData, mRedoItemData], - [mBoldItemData, mItalicItemData, mStrikethroughItemData], - [ - { - 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, - icon: icons.code, - withArrow: true, - title: i18n.bind(null, 'code'), - data: [mCodeItemData, mCodeblockItemData], - }, - ], - ], - yfm: [ - [mUndoItemData, mRedoItemData], - [ - mBoldItemData, - mItalicItemData, - mUnderlineItemData, - mStrikethroughItemData, - mMonospaceItemData, - ], - [ - { - 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, - icon: icons.code, - withArrow: true, - title: i18n.bind(null, 'code'), - data: [mCodeItemData, mCodeblockItemData], - }, - ], - [mImagePopupData, mFilePopupData, mTableButton, mCheckboxButton], - ], - full: mToolbarConfig.slice(), -}; - -export const mHiddenDataByPreset: Record = { - zero: [], - commonmark: [ - mHeading1ItemData, - mHeading2ItemData, - mHeading3ItemData, - mHeading4ItemData, - mHeading5ItemData, - mHeading6ItemData, - mBulletListItemData, - mOrderedListItemData, - mLinkButton, - mQuoteButton, - mCodeblockItemData, - mHruleItemData, - ], - default: [ - mHeading1ItemData, - mHeading2ItemData, - mHeading3ItemData, - mHeading4ItemData, - mHeading5ItemData, - mHeading6ItemData, - mBulletListItemData, - mOrderedListItemData, - mLinkButton, - mQuoteButton, - mCodeblockItemData, - mHruleItemData, - ], - yfm: [ - mHeading1ItemData, - mHeading2ItemData, - mHeading3ItemData, - mHeading4ItemData, - mHeading5ItemData, - mHeading6ItemData, - mBulletListItemData, - mOrderedListItemData, - mLinkButton, - mQuoteButton, - mNoteButton, - mCutButton, - mCodeblockItemData, - mCheckboxButton, - mTableButton, - mImagePopupData, - mHruleItemData, - mFilePopupData, - mTabsItemData, - ], - full: [ - mHeading1ItemData, - mHeading2ItemData, - mHeading3ItemData, - mHeading4ItemData, - mHeading5ItemData, - mHeading6ItemData, - mBulletListItemData, - mOrderedListItemData, - mLinkButton, - mQuoteButton, - mNoteButton, - mCutButton, - mCodeblockItemData, - mCheckboxButton, - mTableButton, - mImagePopupData, - mHruleItemData, - mEmojiItemData, - mFilePopupData, - mTabsItemData, - ], -}; diff --git a/src/bundle/config/wysiwyg.ts b/src/bundle/config/wysiwyg.ts index db9d1a38..e40b31fe 100644 --- a/src/bundle/config/wysiwyg.ts +++ b/src/bundle/config/wysiwyg.ts @@ -590,155 +590,6 @@ export const wSelectionMenuConfig: SelectionContextConfig = [ wLinkItemData, ], ]; - -export const wToolbarConfigByPreset: Record = { - zero: [[wUndoItemData, wRedoItemData]], - commonmark: [ - [wUndoItemData, wRedoItemData], - [wBoldItemData, wItalicItemData], - [ - { - 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, - icon: icons.code, - withArrow: true, - title: i18n.bind(null, 'code'), - data: [wCodeItemData, wCodeBlockItemData], - }, - ], - ], - default: [ - [wUndoItemData, wRedoItemData], - [wBoldItemData, wItalicItemData, wStrikethroughItemData], - [ - { - 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, - icon: icons.code, - withArrow: true, - title: i18n.bind(null, 'code'), - data: [wCodeItemData, wCodeBlockItemData], - }, - ], - ], - yfm: [ - [wUndoItemData, wRedoItemData], - [ - wBoldItemData, - wItalicItemData, - wUnderlineItemData, - wStrikethroughItemData, - wMonospaceItemData, - ], - [ - { - 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, - { - id: 'code', - type: ToolbarDataType.ListButton, - 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: [ @@ -825,13 +676,6 @@ export const wCommandMenuConfigByPreset: Record = { - zero: wCommandMenuConfigByPreset.zero.slice(), - commonmark: wCommandMenuConfigByPreset.commonmark.slice(), - default: wCommandMenuConfigByPreset.default.slice(), - yfm: wCommandMenuConfigByPreset.yfm.slice(), - full: wCommandMenuConfigByPreset.full.slice(), -}; export const wSelectionMenuConfigByPreset: Record = { zero: [], commonmark: [ From e26cd073c19bd26fee9ab258fff221d6215c9c80 Mon Sep 17 00:00:00 2001 From: makhnatkin Date: Thu, 19 Dec 2024 10:00:06 +0100 Subject: [PATCH 2/5] feat(toolbars): fixed types --- src/bundle/config/markup.tsx | 207 +++++++++++++++++++++++++++++++++++ src/bundle/config/wysiwyg.ts | 156 ++++++++++++++++++++++++++ 2 files changed, 363 insertions(+) diff --git a/src/bundle/config/markup.tsx b/src/bundle/config/markup.tsx index c8babf3d..b6835be9 100644 --- a/src/bundle/config/markup.tsx +++ b/src/bundle/config/markup.tsx @@ -57,6 +57,7 @@ import { import {MToolbarColors} from '../toolbar/markup/MToolbarColors'; import {MToolbarFilePopup} from '../toolbar/markup/MToolbarFilePopup'; import {MToolbarImagePopup} from '../toolbar/markup/MToolbarImagePopup'; +import type {MarkdownEditorPreset} from '../types'; import {ActionName} from './action-names'; import {icons} from './icons'; @@ -544,3 +545,209 @@ export const mToolbarConfig: MToolbarData = [ ], [mImagePopupData, mFilePopupData, mTableButton, mCheckboxButton], ]; + +export const mToolbarConfigByPreset: Record = { + zero: [mHistoryGroupConfig], + commonmark: [ + [mUndoItemData, mRedoItemData], + [mBoldItemData, mItalicItemData], + [ + { + 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, + icon: icons.code, + withArrow: true, + title: i18n.bind(null, 'code'), + data: [mCodeItemData, mCodeblockItemData], + }, + ], + ], + default: [ + [mUndoItemData, mRedoItemData], + [mBoldItemData, mItalicItemData, mStrikethroughItemData], + [ + { + 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, + icon: icons.code, + withArrow: true, + title: i18n.bind(null, 'code'), + data: [mCodeItemData, mCodeblockItemData], + }, + ], + ], + yfm: [ + [mUndoItemData, mRedoItemData], + [ + mBoldItemData, + mItalicItemData, + mUnderlineItemData, + mStrikethroughItemData, + mMonospaceItemData, + ], + [ + { + 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, + icon: icons.code, + withArrow: true, + title: i18n.bind(null, 'code'), + data: [mCodeItemData, mCodeblockItemData], + }, + ], + [mImagePopupData, mFilePopupData, mTableButton, mCheckboxButton], + ], + full: mToolbarConfig.slice(), +}; + +export const mHiddenDataByPreset: Record = { + zero: [], + commonmark: [ + mHeading1ItemData, + mHeading2ItemData, + mHeading3ItemData, + mHeading4ItemData, + mHeading5ItemData, + mHeading6ItemData, + mBulletListItemData, + mOrderedListItemData, + mLinkButton, + mQuoteButton, + mCodeblockItemData, + mHruleItemData, + ], + default: [ + mHeading1ItemData, + mHeading2ItemData, + mHeading3ItemData, + mHeading4ItemData, + mHeading5ItemData, + mHeading6ItemData, + mBulletListItemData, + mOrderedListItemData, + mLinkButton, + mQuoteButton, + mCodeblockItemData, + mHruleItemData, + ], + yfm: [ + mHeading1ItemData, + mHeading2ItemData, + mHeading3ItemData, + mHeading4ItemData, + mHeading5ItemData, + mHeading6ItemData, + mBulletListItemData, + mOrderedListItemData, + mLinkButton, + mQuoteButton, + mNoteButton, + mCutButton, + mCodeblockItemData, + mCheckboxButton, + mTableButton, + mImagePopupData, + mHruleItemData, + mFilePopupData, + mTabsItemData, + ], + full: [ + mHeading1ItemData, + mHeading2ItemData, + mHeading3ItemData, + mHeading4ItemData, + mHeading5ItemData, + mHeading6ItemData, + mBulletListItemData, + mOrderedListItemData, + mLinkButton, + mQuoteButton, + mNoteButton, + mCutButton, + mCodeblockItemData, + mCheckboxButton, + mTableButton, + mImagePopupData, + mHruleItemData, + mEmojiItemData, + mFilePopupData, + mTabsItemData, + ], +}; diff --git a/src/bundle/config/wysiwyg.ts b/src/bundle/config/wysiwyg.ts index e40b31fe..db9d1a38 100644 --- a/src/bundle/config/wysiwyg.ts +++ b/src/bundle/config/wysiwyg.ts @@ -590,6 +590,155 @@ export const wSelectionMenuConfig: SelectionContextConfig = [ wLinkItemData, ], ]; + +export const wToolbarConfigByPreset: Record = { + zero: [[wUndoItemData, wRedoItemData]], + commonmark: [ + [wUndoItemData, wRedoItemData], + [wBoldItemData, wItalicItemData], + [ + { + 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, + icon: icons.code, + withArrow: true, + title: i18n.bind(null, 'code'), + data: [wCodeItemData, wCodeBlockItemData], + }, + ], + ], + default: [ + [wUndoItemData, wRedoItemData], + [wBoldItemData, wItalicItemData, wStrikethroughItemData], + [ + { + 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, + icon: icons.code, + withArrow: true, + title: i18n.bind(null, 'code'), + data: [wCodeItemData, wCodeBlockItemData], + }, + ], + ], + yfm: [ + [wUndoItemData, wRedoItemData], + [ + wBoldItemData, + wItalicItemData, + wUnderlineItemData, + wStrikethroughItemData, + wMonospaceItemData, + ], + [ + { + 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, + { + id: 'code', + type: ToolbarDataType.ListButton, + 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: [ @@ -676,6 +825,13 @@ export const wCommandMenuConfigByPreset: Record = { + zero: wCommandMenuConfigByPreset.zero.slice(), + commonmark: wCommandMenuConfigByPreset.commonmark.slice(), + default: wCommandMenuConfigByPreset.default.slice(), + yfm: wCommandMenuConfigByPreset.yfm.slice(), + full: wCommandMenuConfigByPreset.full.slice(), +}; export const wSelectionMenuConfigByPreset: Record = { zero: [], commonmark: [ From 2aa3f2e0a5a7b63af70507fbfadbd35bd3ba2ecc Mon Sep 17 00:00:00 2001 From: makhnatkin Date: Thu, 19 Dec 2024 17:56:16 +0100 Subject: [PATCH 3/5] feat(toolbars): updated flattenPreset --- jest.config.js | 5 + src/bundle/toolbar/utils.test.ts | 310 +++++++++++++++++++++++++++++++ src/bundle/toolbar/utils.ts | 18 +- 3 files changed, 328 insertions(+), 5 deletions(-) create mode 100644 src/bundle/toolbar/utils.test.ts diff --git a/jest.config.js b/jest.config.js index cc6eb78b..fb83084c 100644 --- a/jest.config.js +++ b/jest.config.js @@ -8,6 +8,11 @@ module.exports = { moduleNameMapper: { '\\.(css|less|scss|sss|styl)$': '/node_modules/jest-css-modules', '.+\\.(svg|png|jpg)$': 'identity-obj-proxy', + '^@gravity-ui/uikit/i18n$': '/node_modules/@gravity-ui/uikit/build/cjs/i18n', + '^@diplodoc/cut-extension/runtime$': + '/node_modules/@diplodoc/cut-extension/build/runtime', + '^@diplodoc/tabs-extension/runtime$': + '/node_modules/@diplodoc/tabs-extension/build/runtime', }, moduleFileExtensions: ['tsx', 'ts', 'js'], globals: { diff --git a/src/bundle/toolbar/utils.test.ts b/src/bundle/toolbar/utils.test.ts new file mode 100644 index 00000000..d400aa2d --- /dev/null +++ b/src/bundle/toolbar/utils.test.ts @@ -0,0 +1,310 @@ +import {FileIcon} from '../../icons'; +import {ToolbarDataType} from '../../toolbar'; +import {WToolbarData} from '../config'; + +import {flattenPreset} from './utils'; +import {WToolbarColors} from './wysiwyg/WToolbarColors'; + +jest.mock('@gravity-ui/uikit/i18n', () => ({ + addComponentKeysets: jest.fn(), + t: jest.fn((key: string) => `mocked_${key}`), + i18n: { + registerKeyset: jest.fn(), + keyset: jest.fn(), + }, +})); + +const input: WToolbarData = [ + [ + { + type: ToolbarDataType.SingleButton, + id: 'undo', + icon: {data: FileIcon}, + hotkey: 'mod+z', + hintWhenDisabled: false, + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + { + type: ToolbarDataType.SingleButton, + id: 'redo', + icon: {data: FileIcon}, + hotkey: 'mod+shift+z', + hintWhenDisabled: false, + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + ], + [ + { + type: ToolbarDataType.SingleButton, + id: 'bold', + icon: {data: FileIcon}, + hotkey: 'mod+b', + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + { + type: ToolbarDataType.SingleButton, + id: 'italic', + icon: {data: FileIcon}, + hotkey: 'mod+i', + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + { + type: ToolbarDataType.SingleButton, + id: 'underline', + icon: {data: FileIcon}, + hotkey: 'mod+u', + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + { + type: ToolbarDataType.SingleButton, + id: 'strike', + icon: {data: FileIcon}, + hotkey: 'mod+shift+s', + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + { + type: ToolbarDataType.SingleButton, + id: 'mono', + icon: {data: FileIcon}, + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + { + type: ToolbarDataType.SingleButton, + id: 'mark', + icon: {data: FileIcon}, + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + ], + [ + { + type: ToolbarDataType.ListButton, + id: 'heading', + icon: {data: FileIcon}, + withArrow: true, + title: '', + data: [ + { + id: 'paragraph', + icon: {data: FileIcon}, + hotkey: 'cmd+alt+0', + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + { + id: 'heading1', + icon: {data: FileIcon}, + hotkey: 'cmd+alt+1', + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + { + id: 'heading2', + icon: {data: FileIcon}, + hotkey: 'cmd+alt+2', + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + { + id: 'heading3', + icon: {data: FileIcon}, + hotkey: 'cmd+alt+3', + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + { + id: 'heading4', + icon: {data: FileIcon}, + hotkey: 'cmd+alt+4', + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + { + id: 'heading5', + icon: {data: FileIcon}, + hotkey: 'cmd+alt+5', + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + { + id: 'heading6', + icon: {data: FileIcon}, + hotkey: 'cmd+alt+6', + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + ], + }, + { + type: ToolbarDataType.ListButton, + id: 'lists', + icon: {data: FileIcon}, + withArrow: true, + title: '', + data: [ + { + id: 'bulletList', + icon: {data: FileIcon}, + hotkey: 'mod+shift+l', + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + { + id: 'orderedList', + icon: {data: FileIcon}, + hotkey: 'mod+shift+m', + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + { + id: 'sinkListItem', + icon: {data: FileIcon}, + hotkey: 'tab', + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + { + id: 'liftListItem', + icon: {data: FileIcon}, + hotkey: 'shift+tab', + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + ], + }, + { + type: ToolbarDataType.ReactComponent, + id: 'colorify', + width: 42, + component: WToolbarColors, + }, + { + type: ToolbarDataType.SingleButton, + id: 'link', + icon: {data: FileIcon}, + hotkey: 'mod+k', + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + { + type: ToolbarDataType.SingleButton, + id: 'note', + icon: {data: FileIcon}, + hotkey: 'cmd+alt+8', + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + { + type: ToolbarDataType.SingleButton, + id: 'cut', + icon: {data: FileIcon}, + hotkey: 'cmd+alt+7', + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + { + type: ToolbarDataType.SingleButton, + id: 'quote', + icon: {data: FileIcon}, + hotkey: 'mod+shift+.', + exec: () => {}, + isActive: () => false, + isEnable: () => false, + title: '', + }, + ], +]; + +const expectedIds = [ + 'undo', + 'redo', + 'bold', + 'italic', + 'underline', + 'strike', + 'mono', + 'mark', + 'paragraph', + 'heading1', + 'heading2', + 'heading3', + 'heading4', + 'heading5', + 'heading6', + 'bulletList', + 'orderedList', + 'sinkListItem', + 'liftListItem', + 'colorify', + 'link', + 'note', + 'cut', + 'quote', +]; + +describe('flattenPreset', () => { + it('should flatten nested toolbar data and return a correctly flattened structure', () => { + const result = flattenPreset(input); + const expectedOutput = expectedIds.map((id) => expect.objectContaining({id})); + + expect(result).toEqual(expect.arrayContaining(expectedOutput)); + }); + + it('should return a list of flattened IDs', () => { + const result = flattenPreset(input); + const resultIds = result.map((item) => item.id); + + expect(resultIds).toEqual(expectedIds); + }); +}); diff --git a/src/bundle/toolbar/utils.ts b/src/bundle/toolbar/utils.ts index 94447bc1..db91fc92 100644 --- a/src/bundle/toolbar/utils.ts +++ b/src/bundle/toolbar/utils.ts @@ -84,11 +84,17 @@ export const createConfig = ( return toolbarData as T; }; -const flattenPreset = (config: T) => { - // TODO: @makhnatkin add logic for flatten - return (config[0] ?? []) as unknown as T extends WToolbarData - ? WToolbarItemData[] - : MToolbarItemData[]; +export const flattenPreset = ( + config: T, +): T extends WToolbarData ? WToolbarItemData[] : MToolbarItemData[] => { + return config.flat().reduce<(WToolbarItemData | MToolbarItemData)[]>((acc, item) => { + if (item.type === ToolbarDataType.ListButton && Array.isArray(item.data)) { + return acc.concat(item.data); + } + + acc.push(item as WToolbarItemData | MToolbarItemData); + return acc; + }, []) as unknown as T extends WToolbarData ? WToolbarItemData[] : MToolbarItemData[]; }; interface GetToolbarsConfigsArgs { @@ -113,6 +119,8 @@ export const getToolbarsConfigs = ({toolbarsPreset, props, preset}: GetToolbarsC : props.markupToolbarConfig ?? createConfig('markup', preset, ToolbarName.markupMain); + console.log('flattenPreset', JSON.stringify(wysiwygToolbarConfig)); + const wysiwygHiddenActionsConfig = toolbarsPreset ? flattenPreset( createConfig('wysiwyg', toolbarsPreset, ToolbarName.wysiwygHidden), From 4e492affd385c61e5257142525dccf5ed88d4942 Mon Sep 17 00:00:00 2001 From: makhnatkin Date: Sat, 21 Dec 2024 23:04:39 +0100 Subject: [PATCH 4/5] feat(toolbars): reverted jest.config.js, updated imports --- jest.config.js | 5 -- src/bundle/MarkdownEditorView.tsx | 2 +- .../flattenPreset.test.tsx} | 77 ++++++++++--------- src/bundle/toolbar/utils/flattenPreset.ts | 15 ++++ .../{utils.ts => utils/toolbarsConfigs.ts} | 55 +++++++------ 5 files changed, 81 insertions(+), 73 deletions(-) rename src/bundle/toolbar/{utils.test.ts => utils/flattenPreset.test.tsx} (83%) create mode 100644 src/bundle/toolbar/utils/flattenPreset.ts rename src/bundle/toolbar/{utils.ts => utils/toolbarsConfigs.ts} (66%) diff --git a/jest.config.js b/jest.config.js index fb83084c..cc6eb78b 100644 --- a/jest.config.js +++ b/jest.config.js @@ -8,11 +8,6 @@ module.exports = { moduleNameMapper: { '\\.(css|less|scss|sss|styl)$': '/node_modules/jest-css-modules', '.+\\.(svg|png|jpg)$': 'identity-obj-proxy', - '^@gravity-ui/uikit/i18n$': '/node_modules/@gravity-ui/uikit/build/cjs/i18n', - '^@diplodoc/cut-extension/runtime$': - '/node_modules/@diplodoc/cut-extension/build/runtime', - '^@diplodoc/tabs-extension/runtime$': - '/node_modules/@diplodoc/tabs-extension/build/runtime', }, moduleFileExtensions: ['tsx', 'ts', 'js'], globals: { diff --git a/src/bundle/MarkdownEditorView.tsx b/src/bundle/MarkdownEditorView.tsx index d0fe9d6f..98cbb49f 100644 --- a/src/bundle/MarkdownEditorView.tsx +++ b/src/bundle/MarkdownEditorView.tsx @@ -20,7 +20,7 @@ import {MToolbarData, MToolbarItemData, WToolbarData, WToolbarItemData} from './ import {useMarkdownEditorContext} from './context'; import {EditorSettings, EditorSettingsProps} from './settings'; import {stickyCn} from './sticky'; -import {getToolbarsConfigs} from './toolbar/utils'; +import {getToolbarsConfigs} from './toolbar/utils/toolbarsConfigs'; import type {MarkdownEditorMode} from './types'; import '../styles/styles.scss'; diff --git a/src/bundle/toolbar/utils.test.ts b/src/bundle/toolbar/utils/flattenPreset.test.tsx similarity index 83% rename from src/bundle/toolbar/utils.test.ts rename to src/bundle/toolbar/utils/flattenPreset.test.tsx index d400aa2d..341160ac 100644 --- a/src/bundle/toolbar/utils.test.ts +++ b/src/bundle/toolbar/utils/flattenPreset.test.tsx @@ -1,25 +1,26 @@ -import {FileIcon} from '../../icons'; -import {ToolbarDataType} from '../../toolbar'; -import {WToolbarData} from '../config'; +import React from 'react'; -import {flattenPreset} from './utils'; -import {WToolbarColors} from './wysiwyg/WToolbarColors'; +import {ToolbarDataType} from '../../../toolbar/types'; +import type {WToolbarData} from '../../config/wysiwyg'; -jest.mock('@gravity-ui/uikit/i18n', () => ({ - addComponentKeysets: jest.fn(), - t: jest.fn((key: string) => `mocked_${key}`), - i18n: { - registerKeyset: jest.fn(), - keyset: jest.fn(), - }, -})); +import {flattenPreset} from './flattenPreset'; + +interface IconProps {} +const Icon: React.FC = () => { + return
; +}; + +interface WToolbarColorsProps {} +const WToolbarColors: React.FC = () => { + return
; +}; const input: WToolbarData = [ [ { type: ToolbarDataType.SingleButton, id: 'undo', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'mod+z', hintWhenDisabled: false, exec: () => {}, @@ -30,7 +31,7 @@ const input: WToolbarData = [ { type: ToolbarDataType.SingleButton, id: 'redo', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'mod+shift+z', hintWhenDisabled: false, exec: () => {}, @@ -43,7 +44,7 @@ const input: WToolbarData = [ { type: ToolbarDataType.SingleButton, id: 'bold', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'mod+b', exec: () => {}, isActive: () => false, @@ -53,7 +54,7 @@ const input: WToolbarData = [ { type: ToolbarDataType.SingleButton, id: 'italic', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'mod+i', exec: () => {}, isActive: () => false, @@ -63,7 +64,7 @@ const input: WToolbarData = [ { type: ToolbarDataType.SingleButton, id: 'underline', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'mod+u', exec: () => {}, isActive: () => false, @@ -73,7 +74,7 @@ const input: WToolbarData = [ { type: ToolbarDataType.SingleButton, id: 'strike', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'mod+shift+s', exec: () => {}, isActive: () => false, @@ -83,7 +84,7 @@ const input: WToolbarData = [ { type: ToolbarDataType.SingleButton, id: 'mono', - icon: {data: FileIcon}, + icon: {data: Icon}, exec: () => {}, isActive: () => false, isEnable: () => false, @@ -92,7 +93,7 @@ const input: WToolbarData = [ { type: ToolbarDataType.SingleButton, id: 'mark', - icon: {data: FileIcon}, + icon: {data: Icon}, exec: () => {}, isActive: () => false, isEnable: () => false, @@ -103,13 +104,13 @@ const input: WToolbarData = [ { type: ToolbarDataType.ListButton, id: 'heading', - icon: {data: FileIcon}, + icon: {data: Icon}, withArrow: true, title: '', data: [ { id: 'paragraph', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'cmd+alt+0', exec: () => {}, isActive: () => false, @@ -118,7 +119,7 @@ const input: WToolbarData = [ }, { id: 'heading1', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'cmd+alt+1', exec: () => {}, isActive: () => false, @@ -127,7 +128,7 @@ const input: WToolbarData = [ }, { id: 'heading2', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'cmd+alt+2', exec: () => {}, isActive: () => false, @@ -136,7 +137,7 @@ const input: WToolbarData = [ }, { id: 'heading3', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'cmd+alt+3', exec: () => {}, isActive: () => false, @@ -145,7 +146,7 @@ const input: WToolbarData = [ }, { id: 'heading4', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'cmd+alt+4', exec: () => {}, isActive: () => false, @@ -154,7 +155,7 @@ const input: WToolbarData = [ }, { id: 'heading5', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'cmd+alt+5', exec: () => {}, isActive: () => false, @@ -163,7 +164,7 @@ const input: WToolbarData = [ }, { id: 'heading6', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'cmd+alt+6', exec: () => {}, isActive: () => false, @@ -175,13 +176,13 @@ const input: WToolbarData = [ { type: ToolbarDataType.ListButton, id: 'lists', - icon: {data: FileIcon}, + icon: {data: Icon}, withArrow: true, title: '', data: [ { id: 'bulletList', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'mod+shift+l', exec: () => {}, isActive: () => false, @@ -190,7 +191,7 @@ const input: WToolbarData = [ }, { id: 'orderedList', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'mod+shift+m', exec: () => {}, isActive: () => false, @@ -199,7 +200,7 @@ const input: WToolbarData = [ }, { id: 'sinkListItem', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'tab', exec: () => {}, isActive: () => false, @@ -208,7 +209,7 @@ const input: WToolbarData = [ }, { id: 'liftListItem', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'shift+tab', exec: () => {}, isActive: () => false, @@ -226,7 +227,7 @@ const input: WToolbarData = [ { type: ToolbarDataType.SingleButton, id: 'link', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'mod+k', exec: () => {}, isActive: () => false, @@ -236,7 +237,7 @@ const input: WToolbarData = [ { type: ToolbarDataType.SingleButton, id: 'note', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'cmd+alt+8', exec: () => {}, isActive: () => false, @@ -246,7 +247,7 @@ const input: WToolbarData = [ { type: ToolbarDataType.SingleButton, id: 'cut', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'cmd+alt+7', exec: () => {}, isActive: () => false, @@ -256,7 +257,7 @@ const input: WToolbarData = [ { type: ToolbarDataType.SingleButton, id: 'quote', - icon: {data: FileIcon}, + icon: {data: Icon}, hotkey: 'mod+shift+.', exec: () => {}, isActive: () => false, diff --git a/src/bundle/toolbar/utils/flattenPreset.ts b/src/bundle/toolbar/utils/flattenPreset.ts new file mode 100644 index 00000000..40412fa2 --- /dev/null +++ b/src/bundle/toolbar/utils/flattenPreset.ts @@ -0,0 +1,15 @@ +import {ToolbarDataType} from '../../../toolbar/types'; +import type {MToolbarData, MToolbarItemData, WToolbarData, WToolbarItemData} from '../../config'; + +export const flattenPreset = ( + config: T, +): T extends WToolbarData ? WToolbarItemData[] : MToolbarItemData[] => { + return config.flat().reduce<(WToolbarItemData | MToolbarItemData)[]>((acc, item) => { + if (item.type === ToolbarDataType.ListButton && Array.isArray(item.data)) { + return acc.concat(item.data); + } + + acc.push(item as WToolbarItemData | MToolbarItemData); + return acc; + }, []) as unknown as T extends WToolbarData ? WToolbarItemData[] : MToolbarItemData[]; +}; diff --git a/src/bundle/toolbar/utils.ts b/src/bundle/toolbar/utils/toolbarsConfigs.ts similarity index 66% rename from src/bundle/toolbar/utils.ts rename to src/bundle/toolbar/utils/toolbarsConfigs.ts index db91fc92..84139fc4 100644 --- a/src/bundle/toolbar/utils.ts +++ b/src/bundle/toolbar/utils/toolbarsConfigs.ts @@ -1,15 +1,17 @@ -import {ToolbarName} from '../../modules/toolbars/constants'; -import {commonmark, defaultPreset, full, yfm, zero} from '../../modules/toolbars/presets'; +import {ToolbarName} from '../../../modules/toolbars/constants'; +import {commonmark, defaultPreset, full, yfm, zero} from '../../../modules/toolbars/presets'; import type { ToolbarItem, ToolbarItemMarkup, ToolbarItemWysiwyg, ToolbarsPreset, -} from '../../modules/toolbars/types'; -import type {MToolbarData, MToolbarItemData, WToolbarData, WToolbarItemData} from '../../toolbar'; -import {ToolbarDataType, ToolbarIconData} from '../../toolbar'; -import type {MarkdownEditorViewProps} from '../MarkdownEditorView'; -import {MarkdownEditorPreset} from '../types'; +} from '../../../modules/toolbars/types'; +import type {MToolbarData, WToolbarData} from '../../../toolbar'; +import {ToolbarDataType, ToolbarIconData} from '../../../toolbar'; +import type {MarkdownEditorViewProps} from '../../MarkdownEditorView'; +import {MarkdownEditorPreset} from '../../types'; + +import {flattenPreset} from './flattenPreset'; const defaultPresets: Record = { zero, @@ -58,7 +60,7 @@ const transformItem = ( }; }; -export const createConfig = ( +export const createToolbarConfig = ( editorType: 'wysiwyg' | 'markup', toolbarPreset: ToolbarsPreset | MarkdownEditorPreset, toolbarName: string, @@ -84,19 +86,6 @@ export const createConfig = ( return toolbarData as T; }; -export const flattenPreset = ( - config: T, -): T extends WToolbarData ? WToolbarItemData[] : MToolbarItemData[] => { - return config.flat().reduce<(WToolbarItemData | MToolbarItemData)[]>((acc, item) => { - if (item.type === ToolbarDataType.ListButton && Array.isArray(item.data)) { - return acc.concat(item.data); - } - - acc.push(item as WToolbarItemData | MToolbarItemData); - return acc; - }, []) as unknown as T extends WToolbarData ? WToolbarItemData[] : MToolbarItemData[]; -}; - interface GetToolbarsConfigsArgs { toolbarsPreset?: ToolbarsPreset; props: Pick< @@ -110,30 +99,38 @@ interface GetToolbarsConfigsArgs { } export const getToolbarsConfigs = ({toolbarsPreset, props, preset}: GetToolbarsConfigsArgs) => { const wysiwygToolbarConfig = toolbarsPreset - ? createConfig('wysiwyg', toolbarsPreset, ToolbarName.wysiwygMain) + ? createToolbarConfig('wysiwyg', toolbarsPreset, ToolbarName.wysiwygMain) : props.wysiwygToolbarConfig ?? - createConfig('wysiwyg', preset, ToolbarName.wysiwygMain); + createToolbarConfig('wysiwyg', preset, ToolbarName.wysiwygMain); const markupToolbarConfig = toolbarsPreset - ? createConfig('markup', toolbarsPreset, ToolbarName.markupMain) + ? createToolbarConfig('markup', toolbarsPreset, ToolbarName.markupMain) : props.markupToolbarConfig ?? - createConfig('markup', preset, ToolbarName.markupMain); + createToolbarConfig('markup', preset, ToolbarName.markupMain); console.log('flattenPreset', JSON.stringify(wysiwygToolbarConfig)); const wysiwygHiddenActionsConfig = toolbarsPreset ? flattenPreset( - createConfig('wysiwyg', toolbarsPreset, ToolbarName.wysiwygHidden), + createToolbarConfig( + 'wysiwyg', + toolbarsPreset, + ToolbarName.wysiwygHidden, + ), ) : props.wysiwygHiddenActionsConfig ?? - flattenPreset(createConfig('wysiwyg', preset, ToolbarName.wysiwygHidden)); + flattenPreset( + createToolbarConfig('wysiwyg', preset, ToolbarName.wysiwygHidden), + ); const markupHiddenActionsConfig = toolbarsPreset ? flattenPreset( - createConfig('markup', toolbarsPreset, ToolbarName.markupHidden), + createToolbarConfig('markup', toolbarsPreset, ToolbarName.markupHidden), ) : props.markupHiddenActionsConfig ?? - flattenPreset(createConfig('markup', preset, ToolbarName.markupHidden)); + flattenPreset( + createToolbarConfig('markup', preset, ToolbarName.markupHidden), + ); return { wysiwygToolbarConfig, From 50ccc9c3a08e76bbd2e8e8fdd9a8d249c0b3f87f Mon Sep 17 00:00:00 2001 From: makhnatkin Date: Mon, 23 Dec 2024 13:10:21 +0300 Subject: [PATCH 5/5] fix(toolbars): deleted console.log --- src/bundle/toolbar/utils/toolbarsConfigs.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/bundle/toolbar/utils/toolbarsConfigs.ts b/src/bundle/toolbar/utils/toolbarsConfigs.ts index 84139fc4..a3dfcbf5 100644 --- a/src/bundle/toolbar/utils/toolbarsConfigs.ts +++ b/src/bundle/toolbar/utils/toolbarsConfigs.ts @@ -108,8 +108,6 @@ export const getToolbarsConfigs = ({toolbarsPreset, props, preset}: GetToolbarsC : props.markupToolbarConfig ?? createToolbarConfig('markup', preset, ToolbarName.markupMain); - console.log('flattenPreset', JSON.stringify(wysiwygToolbarConfig)); - const wysiwygHiddenActionsConfig = toolbarsPreset ? flattenPreset( createToolbarConfig(