chore: Refactors towards shared menu component (#4445)

app/editor/menus/block.tsx

@@ -41,7 +41,7 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
       name: "heading",
       title: dictionary.h1,
       keywords: "h1 heading1 title",
-      icon: Heading1Icon,
+      icon: <Heading1Icon />,
       shortcut: "^ ⇧ 1",
       attrs: { level: 1 },
     },
@@ -49,7 +49,7 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
       name: "heading",
       title: dictionary.h2,
       keywords: "h2 heading2",
-      icon: Heading2Icon,
+      icon: <Heading2Icon />,
       shortcut: "^ ⇧ 2",
       attrs: { level: 2 },
     },
@@ -57,7 +57,7 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
       name: "heading",
       title: dictionary.h3,
       keywords: "h3 heading3",
-      icon: Heading3Icon,
+      icon: <Heading3Icon />,
       shortcut: "^ ⇧ 3",
       attrs: { level: 3 },
     },
@@ -67,20 +67,20 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
     {
       name: "checkbox_list",
       title: dictionary.checkboxList,
-      icon: TodoListIcon,
+      icon: <TodoListIcon />,
       keywords: "checklist checkbox task",
       shortcut: "^ ⇧ 7",
     },
     {
       name: "bullet_list",
       title: dictionary.bulletList,
-      icon: BulletedListIcon,
+      icon: <BulletedListIcon />,
       shortcut: "^ ⇧ 8",
     },
     {
       name: "ordered_list",
       title: dictionary.orderedList,
-      icon: OrderedListIcon,
+      icon: <OrderedListIcon />,
       shortcut: "^ ⇧ 9",
     },
     {
@@ -89,52 +89,52 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
     {
       name: "image",
       title: dictionary.image,
-      icon: ImageIcon,
+      icon: <ImageIcon />,
       keywords: "picture photo",
     },
     {
       name: "link",
       title: dictionary.link,
-      icon: LinkIcon,
+      icon: <LinkIcon />,
       shortcut: `${metaDisplay} k`,
       keywords: "link url uri href",
     },
     {
       name: "attachment",
       title: dictionary.file,
-      icon: AttachmentIcon,
+      icon: <AttachmentIcon />,
       keywords: "file upload attach",
     },
     {
       name: "table",
       title: dictionary.table,
-      icon: TableIcon,
+      icon: <TableIcon />,
       attrs: { rowsCount: 3, colsCount: 3 },
     },
     {
       name: "blockquote",
       title: dictionary.quote,
-      icon: BlockQuoteIcon,
+      icon: <BlockQuoteIcon />,
       shortcut: `${metaDisplay} ]`,
     },
     {
       name: "code_block",
       title: dictionary.codeBlock,
-      icon: CodeIcon,
+      icon: <CodeIcon />,
       shortcut: "^ ⇧ \\",
       keywords: "script",
     },
     {
       name: "hr",
       title: dictionary.hr,
-      icon: HorizontalRuleIcon,
+      icon: <HorizontalRuleIcon />,
       shortcut: `${metaDisplay} _`,
       keywords: "horizontal rule break line",
     },
     {
       name: "hr",
       title: dictionary.pageBreak,
-      icon: PageBreakIcon,
+      icon: <PageBreakIcon />,
       keywords: "page print break line",
       attrs: { markup: "***" },
     },
@@ -142,19 +142,19 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
       name: "date",
       title: dictionary.insertDate,
       keywords: "clock",
-      icon: CalendarIcon,
+      icon: <CalendarIcon />,
     },
     {
       name: "time",
       title: dictionary.insertTime,
       keywords: "clock",
-      icon: ClockIcon,
+      icon: <ClockIcon />,
     },
     {
       name: "datetime",
       title: dictionary.insertDateTime,
       keywords: "clock",
-      icon: CalendarIcon,
+      icon: <CalendarIcon />,
     },
     {
       name: "separator",
@@ -162,21 +162,21 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
     {
       name: "container_notice",
       title: dictionary.infoNotice,
-      icon: InfoIcon,
+      icon: <InfoIcon />,
       keywords: "notice card information",
       attrs: { style: "info" },
     },
     {
       name: "container_notice",
       title: dictionary.warningNotice,
-      icon: WarningIcon,
+      icon: <WarningIcon />,
       keywords: "notice card error",
       attrs: { style: "warning" },
     },
     {
       name: "container_notice",
       title: dictionary.tipNotice,
-      icon: StarredIcon,
+      icon: <StarredIcon />,
       keywords: "notice card suggestion",
       attrs: { style: "tip" },
     },
@@ -186,7 +186,7 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
     {
       name: "code_block",
       title: "Mermaid Diagram",
-      icon: () => <Img src="/images/mermaidjs.png" alt="Mermaid Diagram" />,
+      icon: <Img src="/images/mermaidjs.png" alt="Mermaid Diagram" />,
       keywords: "diagram flowchart",
       attrs: { language: "mermaidjs" },
     },