/* eslint-disable max-lines */ import { HeadingOneIcon, HeadingTwoIcon, HeadingThreeIcon, ToDoIcon, NumberIcon, BulletIcon, FormatBoldEmphasisIcon, FormatItalicIcon, FormatStrikethroughIcon, LinkIcon, CodeIcon, FormatColorTextIcon, FormatBackgroundIcon, AlignLeftIcon, AlignCenterIcon, AlignRightIcon, TurnIntoIcon, BacklinksIcon, MoreIcon, TextFontIcon, QuoteIcon, CalloutIcon, FileIcon, ImageIcon, PagesIcon, CodeBlockIcon, CommentIcon, } from '@toeverything/components/icons'; import { fontBgColorPalette, fontColorPalette, type TextAlignOptions, } from '@toeverything/components/common'; import { Virgo } from '@toeverything/framework/virgo'; import { BlockFlavorKeys, Protocol } from '@toeverything/datasource/db-service'; import { ClickItemHandler, InlineMenuItem } from './types'; import { inlineMenuNamesKeys, inlineMenuNamesForFontColor, INLINE_MENU_UI_TYPES, inlineMenuNames, } from './config'; const convert_to_block_type = async ({ editor, blockId, blockType, }: { editor: Virgo; blockId: string; blockType: BlockFlavorKeys; }) => { if (Protocol.Block.Type[blockType]) { await editor.commands.blockCommands.convertBlock(blockId, blockType); } }; const toggle_text_format = ({ editor, nodeId, format, }: { editor: Virgo; nodeId: string; format: 'bold' | 'italic' | 'underline' | 'strikethrough' | 'inlinecode'; }) => { editor.blockHelper.toggleTextFormatBySelection(nodeId, format); }; const add_link = ({ editor, blockId }: { editor: Virgo; blockId: string }) => { editor.blockHelper.setLinkModalVisible(blockId, true); }; const set_paragraph_align = ({ editor, nodeId, align, }: { editor: Virgo; nodeId: string; align: TextAlignOptions; }) => { editor.blockHelper.setParagraphAlign(nodeId, align); }; const set_font_color = ({ editor, nodeId, color, }: { editor: Virgo; nodeId: string; color: keyof typeof fontColorPalette; }) => { editor.blockHelper.setTextFontColor(nodeId, color); }; const set_font_bg_color = ({ editor, nodeId, bgColor, }: { editor: Virgo; nodeId: string; bgColor: keyof typeof fontBgColorPalette; }) => { editor.blockHelper.setTextFontBgColor(nodeId, bgColor); }; const common_handler_for_inline_menu: ClickItemHandler = ({ editor, anchorNodeId, type, }) => { switch (type) { case inlineMenuNamesKeys.text: convert_to_block_type({ editor, blockId: anchorNodeId, blockType: Protocol.Block.Type.text, }); break; case inlineMenuNamesKeys.heading1: convert_to_block_type({ editor, blockId: anchorNodeId, blockType: Protocol.Block.Type.heading1, }); break; case inlineMenuNamesKeys.heading2: convert_to_block_type({ editor, blockId: anchorNodeId, blockType: Protocol.Block.Type.heading2, }); break; case inlineMenuNamesKeys.heading3: convert_to_block_type({ editor, blockId: anchorNodeId, blockType: Protocol.Block.Type.heading3, }); break; case inlineMenuNamesKeys.bullet: convert_to_block_type({ editor, blockId: anchorNodeId, blockType: Protocol.Block.Type.bullet, }); break; case inlineMenuNamesKeys.todo: convert_to_block_type({ editor, blockId: anchorNodeId, blockType: Protocol.Block.Type.todo, }); break; case inlineMenuNamesKeys.numbered: convert_to_block_type({ editor, blockId: anchorNodeId, blockType: Protocol.Block.Type.numbered, }); break; case inlineMenuNamesKeys.textBold: toggle_text_format({ editor, nodeId: anchorNodeId, format: 'bold', }); break; case inlineMenuNamesKeys.textItalic: toggle_text_format({ editor, nodeId: anchorNodeId, format: 'italic', }); break; case inlineMenuNamesKeys.textStrikethrough: toggle_text_format({ editor, nodeId: anchorNodeId, format: 'strikethrough', }); break; case inlineMenuNamesKeys.link: add_link({ editor, blockId: anchorNodeId, }); break; case inlineMenuNamesKeys.code: toggle_text_format({ editor, nodeId: anchorNodeId, format: 'inlinecode', }); break; case inlineMenuNamesKeys.alignLeft: set_paragraph_align({ editor, nodeId: anchorNodeId, align: undefined, }); break; case inlineMenuNamesKeys.alignCenter: set_paragraph_align({ editor, nodeId: anchorNodeId, align: 'center', }); break; case inlineMenuNamesKeys.alignRight: set_paragraph_align({ editor, nodeId: anchorNodeId, align: 'right', }); break; case inlineMenuNamesKeys.colorDefault: set_font_color({ editor, nodeId: anchorNodeId, color: inlineMenuNamesForFontColor[ inlineMenuNamesKeys.colorDefault as keyof typeof inlineMenuNamesForFontColor ], }); break; case inlineMenuNamesKeys.colorGray: set_font_color({ editor, nodeId: anchorNodeId, color: inlineMenuNamesForFontColor[ inlineMenuNamesKeys.colorGray as keyof typeof inlineMenuNamesForFontColor ], }); break; case inlineMenuNamesKeys.colorBrown: set_font_color({ editor, nodeId: anchorNodeId, color: inlineMenuNamesForFontColor[ inlineMenuNamesKeys.colorBrown as keyof typeof inlineMenuNamesForFontColor ], }); break; case inlineMenuNamesKeys.colorOrange: set_font_color({ editor, nodeId: anchorNodeId, color: inlineMenuNamesForFontColor[ inlineMenuNamesKeys.colorOrange as keyof typeof inlineMenuNamesForFontColor ], }); break; case inlineMenuNamesKeys.colorYellow: set_font_color({ editor, nodeId: anchorNodeId, color: inlineMenuNamesForFontColor[ inlineMenuNamesKeys.colorYellow as keyof typeof inlineMenuNamesForFontColor ], }); break; case inlineMenuNamesKeys.colorGreen: set_font_color({ editor, nodeId: anchorNodeId, color: inlineMenuNamesForFontColor[ inlineMenuNamesKeys.colorGreen as keyof typeof inlineMenuNamesForFontColor ], }); break; case inlineMenuNamesKeys.colorBlue: set_font_color({ editor, nodeId: anchorNodeId, color: inlineMenuNamesForFontColor[ inlineMenuNamesKeys.colorBlue as keyof typeof inlineMenuNamesForFontColor ], }); break; case inlineMenuNamesKeys.colorPurple: set_font_color({ editor, nodeId: anchorNodeId, color: inlineMenuNamesForFontColor[ inlineMenuNamesKeys.colorPurple as keyof typeof inlineMenuNamesForFontColor ], }); break; case inlineMenuNamesKeys.colorPink: set_font_color({ editor, nodeId: anchorNodeId, color: inlineMenuNamesForFontColor[ inlineMenuNamesKeys.colorPink as keyof typeof inlineMenuNamesForFontColor ], }); break; case inlineMenuNamesKeys.colorRed: set_font_color({ editor, nodeId: anchorNodeId, color: inlineMenuNamesForFontColor[ inlineMenuNamesKeys.colorRed as keyof typeof inlineMenuNamesForFontColor ], }); break; case inlineMenuNamesKeys.bgDefault: set_font_bg_color({ editor, nodeId: anchorNodeId, bgColor: inlineMenuNamesForFontColor[ inlineMenuNamesKeys.bgDefault as keyof typeof inlineMenuNamesForFontColor ], }); break; case inlineMenuNamesKeys.bgGray: set_font_bg_color({ editor, nodeId: anchorNodeId, bgColor: inlineMenuNamesForFontColor[ inlineMenuNamesKeys.bgGray as keyof typeof inlineMenuNamesForFontColor ], }); break; case inlineMenuNamesKeys.bgBrown: set_font_bg_color({ editor, nodeId: anchorNodeId, bgColor: inlineMenuNamesForFontColor[ inlineMenuNamesKeys.bgBrown as keyof typeof inlineMenuNamesForFontColor ], }); break; case inlineMenuNamesKeys.bgOrange: set_font_bg_color({ editor, nodeId: anchorNodeId, bgColor: inlineMenuNamesForFontColor[ inlineMenuNamesKeys.bgOrange as keyof typeof inlineMenuNamesForFontColor ], }); break; case inlineMenuNamesKeys.bgYellow: set_font_bg_color({ editor, nodeId: anchorNodeId, bgColor: inlineMenuNamesForFontColor[ inlineMenuNamesKeys.bgYellow as keyof typeof inlineMenuNamesForFontColor ], }); break; case inlineMenuNamesKeys.bgGreen: set_font_bg_color({ editor, nodeId: anchorNodeId, bgColor: inlineMenuNamesForFontColor[ inlineMenuNamesKeys.bgGreen as keyof typeof inlineMenuNamesForFontColor ], }); break; case inlineMenuNamesKeys.bgBlue: set_font_bg_color({ editor, nodeId: anchorNodeId, bgColor: inlineMenuNamesForFontColor[ inlineMenuNamesKeys.bgBlue as keyof typeof inlineMenuNamesForFontColor ], }); break; case inlineMenuNamesKeys.bgPurple: set_font_bg_color({ editor, nodeId: anchorNodeId, bgColor: inlineMenuNamesForFontColor[ inlineMenuNamesKeys.bgPurple as keyof typeof inlineMenuNamesForFontColor ], }); break; case inlineMenuNamesKeys.bgPink: set_font_bg_color({ editor, nodeId: anchorNodeId, bgColor: inlineMenuNamesForFontColor[ inlineMenuNamesKeys.bgPink as keyof typeof inlineMenuNamesForFontColor ], }); break; case inlineMenuNamesKeys.bgRed: set_font_bg_color({ editor, nodeId: anchorNodeId, bgColor: inlineMenuNamesForFontColor[ inlineMenuNamesKeys.bgRed as keyof typeof inlineMenuNamesForFontColor ], }); break; case inlineMenuNamesKeys.quote: convert_to_block_type({ editor, blockId: anchorNodeId, blockType: Protocol.Block.Type.quote, }); break; case inlineMenuNamesKeys.callout: convert_to_block_type({ editor, blockId: anchorNodeId, blockType: Protocol.Block.Type.callout, }); break; case inlineMenuNamesKeys.codeBlock: convert_to_block_type({ editor, blockId: anchorNodeId, blockType: Protocol.Block.Type.code, }); break; case inlineMenuNamesKeys.image: convert_to_block_type({ editor, blockId: anchorNodeId, blockType: Protocol.Block.Type.image, }); break; case inlineMenuNamesKeys.file: convert_to_block_type({ editor, blockId: anchorNodeId, blockType: Protocol.Block.Type.file, }); break; default: // do nothing } }; type InlineMenuDataConfigType = { enableCommentFeature: boolean; }; export const getInlineMenuData = ({ enableCommentFeature, }: InlineMenuDataConfigType): InlineMenuItem[] => { const inlineMenuData = [ { type: INLINE_MENU_UI_TYPES.dropdown, icon: HeadingOneIcon, name: inlineMenuNames.currentText, nameKey: inlineMenuNamesKeys.currentText, children: [ { type: INLINE_MENU_UI_TYPES.icon, icon: HeadingOneIcon, name: inlineMenuNames.heading1, nameKey: inlineMenuNamesKeys.heading1, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: HeadingTwoIcon, name: inlineMenuNames.heading2, nameKey: inlineMenuNamesKeys.heading2, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: HeadingThreeIcon, name: inlineMenuNames.heading3, nameKey: inlineMenuNamesKeys.heading3, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: TextFontIcon, name: inlineMenuNames.text, nameKey: inlineMenuNamesKeys.text, onClick: common_handler_for_inline_menu, }, ], }, { type: INLINE_MENU_UI_TYPES.dropdown, icon: ToDoIcon, name: inlineMenuNames.currentList, nameKey: inlineMenuNamesKeys.currentList, children: [ { type: INLINE_MENU_UI_TYPES.icon, icon: ToDoIcon, name: inlineMenuNames.todo, nameKey: inlineMenuNamesKeys.todo, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: NumberIcon, name: inlineMenuNames.numbered, nameKey: inlineMenuNamesKeys.numbered, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: BulletIcon, name: inlineMenuNames.bullet, nameKey: inlineMenuNamesKeys.bullet, active: false, onClick: common_handler_for_inline_menu, }, ], }, { type: INLINE_MENU_UI_TYPES.separator, name: 'separator ' + inlineMenuNames.currentList, }, enableCommentFeature ? { type: INLINE_MENU_UI_TYPES.icon, icon: CommentIcon, name: inlineMenuNames.comment, nameKey: inlineMenuNamesKeys.comment, onClick: common_handler_for_inline_menu, } : null, enableCommentFeature ? { type: INLINE_MENU_UI_TYPES.separator, name: 'separator ' + inlineMenuNames.comment, } : null, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatBoldEmphasisIcon, name: inlineMenuNames.textBold, nameKey: inlineMenuNamesKeys.textBold, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatItalicIcon, name: inlineMenuNames.textItalic, nameKey: inlineMenuNamesKeys.textItalic, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatStrikethroughIcon, name: inlineMenuNames.textStrikethrough, nameKey: inlineMenuNamesKeys.textStrikethrough, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: LinkIcon, name: inlineMenuNames.link, nameKey: inlineMenuNamesKeys.link, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: CodeIcon, name: inlineMenuNames.code, nameKey: inlineMenuNamesKeys.code, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.separator, name: 'separator ' + inlineMenuNames.code, }, { type: INLINE_MENU_UI_TYPES.dropdown, icon: FormatColorTextIcon, name: inlineMenuNames.currentFontColor, nameKey: inlineMenuNamesKeys.currentFontColor, children: [ { type: INLINE_MENU_UI_TYPES.icon, icon: FormatColorTextIcon, name: inlineMenuNames.colorDefault, nameKey: inlineMenuNamesKeys.colorDefault, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatColorTextIcon, name: inlineMenuNames.colorGray, nameKey: inlineMenuNamesKeys.colorGray, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatColorTextIcon, name: inlineMenuNames.colorBrown, nameKey: inlineMenuNamesKeys.colorBrown, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatColorTextIcon, name: inlineMenuNames.colorOrange, nameKey: inlineMenuNamesKeys.colorOrange, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatColorTextIcon, name: inlineMenuNames.colorYellow, nameKey: inlineMenuNamesKeys.colorYellow, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatColorTextIcon, name: inlineMenuNames.colorGreen, nameKey: inlineMenuNamesKeys.colorGreen, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatColorTextIcon, name: inlineMenuNames.colorBlue, nameKey: inlineMenuNamesKeys.colorBlue, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatColorTextIcon, name: inlineMenuNames.colorPurple, nameKey: inlineMenuNamesKeys.colorPurple, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatColorTextIcon, name: inlineMenuNames.colorPink, nameKey: inlineMenuNamesKeys.colorPink, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatColorTextIcon, name: inlineMenuNames.colorRed, nameKey: inlineMenuNamesKeys.colorRed, onClick: common_handler_for_inline_menu, }, ], }, { type: INLINE_MENU_UI_TYPES.dropdown, icon: FormatBackgroundIcon, name: inlineMenuNames.currentFontBackground, nameKey: inlineMenuNamesKeys.currentFontBackground, children: [ { type: INLINE_MENU_UI_TYPES.icon, icon: FormatBackgroundIcon, name: inlineMenuNames.bgDefault, nameKey: inlineMenuNamesKeys.bgDefault, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatBackgroundIcon, name: inlineMenuNames.bgGray, nameKey: inlineMenuNamesKeys.bgGray, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatBackgroundIcon, name: inlineMenuNames.bgBrown, nameKey: inlineMenuNamesKeys.bgBrown, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatBackgroundIcon, name: inlineMenuNames.bgOrange, nameKey: inlineMenuNamesKeys.bgOrange, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatBackgroundIcon, name: inlineMenuNames.bgYellow, nameKey: inlineMenuNamesKeys.bgYellow, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatBackgroundIcon, name: inlineMenuNames.bgGreen, nameKey: inlineMenuNamesKeys.bgGreen, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatBackgroundIcon, name: inlineMenuNames.bgBlue, nameKey: inlineMenuNamesKeys.bgBlue, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatBackgroundIcon, name: inlineMenuNames.bgPurple, nameKey: inlineMenuNamesKeys.bgPurple, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatBackgroundIcon, name: inlineMenuNames.bgPink, nameKey: inlineMenuNamesKeys.bgPink, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FormatBackgroundIcon, name: inlineMenuNames.bgRed, nameKey: inlineMenuNamesKeys.bgRed, onClick: common_handler_for_inline_menu, }, ], }, { type: INLINE_MENU_UI_TYPES.dropdown, icon: AlignLeftIcon, name: inlineMenuNames.currentTextAlign, nameKey: inlineMenuNamesKeys.currentTextAlign, children: [ { type: INLINE_MENU_UI_TYPES.icon, icon: AlignLeftIcon, name: inlineMenuNames.alignLeft, nameKey: inlineMenuNamesKeys.alignLeft, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: AlignCenterIcon, name: inlineMenuNames.alignCenter, nameKey: inlineMenuNamesKeys.alignCenter, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: AlignRightIcon, name: inlineMenuNames.alignRight, nameKey: inlineMenuNamesKeys.alignRight, onClick: common_handler_for_inline_menu, }, ], }, { type: INLINE_MENU_UI_TYPES.separator, name: 'separator ' + inlineMenuNames.alignRight, }, { type: INLINE_MENU_UI_TYPES.dropdown, icon: TurnIntoIcon, name: inlineMenuNames.turnInto, nameKey: inlineMenuNamesKeys.turnInto, children: [ { type: INLINE_MENU_UI_TYPES.icon, icon: PagesIcon, name: inlineMenuNames.page, nameKey: inlineMenuNamesKeys.page, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: QuoteIcon, name: inlineMenuNames.quote, nameKey: inlineMenuNamesKeys.quote, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: CalloutIcon, name: inlineMenuNames.callout, nameKey: inlineMenuNamesKeys.callout, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: CodeBlockIcon, name: inlineMenuNames.codeBlock, nameKey: inlineMenuNamesKeys.codeBlock, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: ImageIcon, name: inlineMenuNames.image, nameKey: inlineMenuNamesKeys.image, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: FileIcon, name: inlineMenuNames.file, nameKey: inlineMenuNamesKeys.file, onClick: common_handler_for_inline_menu, }, ], }, { type: INLINE_MENU_UI_TYPES.icon, icon: BacklinksIcon, name: inlineMenuNames.backlinks, nameKey: inlineMenuNamesKeys.backlinks, onClick: common_handler_for_inline_menu, }, { type: INLINE_MENU_UI_TYPES.icon, icon: MoreIcon, name: inlineMenuNames.moreActions, nameKey: inlineMenuNamesKeys.moreActions, onClick: common_handler_for_inline_menu, }, ]; return inlineMenuData.filter(item => Boolean(item)); };