chore: Refactors towards shared menu component (#4445)

2022-11-19 13:15:38 -08:00
parent 924b554281
commit ae6855f3df
21 changed files with 186 additions and 194 deletions
--- a/app/editor/menus/block.tsx
+++ b/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" },
    },
--- a/app/editor/menus/divider.tsx
+++ b/app/editor/menus/divider.tsx
@@ -1,5 +1,6 @@
 import { PageBreakIcon, HorizontalRuleIcon } from "outline-icons";
 import { EditorState } from "prosemirror-state";
+import * as React from "react";
 import isNodeActive from "@shared/editor/queries/isNodeActive";
 import { MenuItem } from "@shared/editor/types";
 import { Dictionary } from "~/hooks/useDictionary";
@@ -16,14 +17,14 @@ export default function dividerMenuItems(
      tooltip: dictionary.pageBreak,
      attrs: { markup: "***" },
      active: isNodeActive(schema.nodes.hr, { markup: "***" }),
-      icon: PageBreakIcon,
+      icon: <PageBreakIcon />,
    },
    {
      name: "hr",
      tooltip: dictionary.hr,
      attrs: { markup: "---" },
      active: isNodeActive(schema.nodes.hr, { markup: "---" }),
-      icon: HorizontalRuleIcon,
+      icon: <HorizontalRuleIcon />,
    },
  ];
 }
--- a/app/editor/menus/formatting.tsx
+++ b/app/editor/menus/formatting.tsx
@@ -11,9 +11,11 @@ import {
  TodoListIcon,
  InputIcon,
  HighlightIcon,
+  ItalicIcon,
 } from "outline-icons";
 import { EditorState } from "prosemirror-state";
 import { isInTable } from "prosemirror-tables";
+import * as React from "react";
 import isInCode from "@shared/editor/queries/isInCode";
 import isInList from "@shared/editor/queries/isInList";
 import isMarkActive from "@shared/editor/queries/isMarkActive";
@@ -36,7 +38,7 @@ export default function formattingMenuItems(
    {
      name: "placeholder",
      tooltip: dictionary.placeholder,
-      icon: InputIcon,
+      icon: <InputIcon />,
      active: isMarkActive(schema.marks.placeholder),
      visible: isTemplate,
    },
@@ -47,28 +49,35 @@ export default function formattingMenuItems(
    {
      name: "strong",
      tooltip: dictionary.strong,
-      icon: BoldIcon,
+      icon: <BoldIcon />,
      active: isMarkActive(schema.marks.strong),
      visible: !isCode,
    },
+    {
+      name: "em",
+      tooltip: dictionary.em,
+      icon: <ItalicIcon />,
+      active: isMarkActive(schema.marks.em),
+      visible: !isCode,
+    },
    {
      name: "strikethrough",
      tooltip: dictionary.strikethrough,
-      icon: StrikethroughIcon,
+      icon: <StrikethroughIcon />,
      active: isMarkActive(schema.marks.strikethrough),
      visible: !isCode,
    },
    {
      name: "highlight",
      tooltip: dictionary.mark,
-      icon: HighlightIcon,
+      icon: <HighlightIcon />,
      active: isMarkActive(schema.marks.highlight),
      visible: !isTemplate && !isCode,
    },
    {
      name: "code_inline",
      tooltip: dictionary.codeInline,
-      icon: CodeIcon,
+      icon: <CodeIcon />,
      active: isMarkActive(schema.marks.code_inline),
    },
    {
@@ -78,7 +87,7 @@ export default function formattingMenuItems(
    {
      name: "heading",
      tooltip: dictionary.heading,
-      icon: Heading1Icon,
+      icon: <Heading1Icon />,
      active: isNodeActive(schema.nodes.heading, { level: 1 }),
      attrs: { level: 1 },
      visible: allowBlocks && !isCode,
@@ -86,7 +95,7 @@ export default function formattingMenuItems(
    {
      name: "heading",
      tooltip: dictionary.subheading,
-      icon: Heading2Icon,
+      icon: <Heading2Icon />,
      active: isNodeActive(schema.nodes.heading, { level: 2 }),
      attrs: { level: 2 },
      visible: allowBlocks && !isCode,
@@ -94,7 +103,7 @@ export default function formattingMenuItems(
    {
      name: "blockquote",
      tooltip: dictionary.quote,
-      icon: BlockQuoteIcon,
+      icon: <BlockQuoteIcon />,
      active: isNodeActive(schema.nodes.blockquote),
      attrs: { level: 2 },
      visible: allowBlocks && !isCode,
@@ -106,7 +115,7 @@ export default function formattingMenuItems(
    {
      name: "checkbox_list",
      tooltip: dictionary.checkboxList,
-      icon: TodoListIcon,
+      icon: <TodoListIcon />,
      keywords: "checklist checkbox task",
      active: isNodeActive(schema.nodes.checkbox_list),
      visible: (allowBlocks || isList) && !isCode,
@@ -114,14 +123,14 @@ export default function formattingMenuItems(
    {
      name: "bullet_list",
      tooltip: dictionary.bulletList,
-      icon: BulletedListIcon,
+      icon: <BulletedListIcon />,
      active: isNodeActive(schema.nodes.bullet_list),
      visible: (allowBlocks || isList) && !isCode,
    },
    {
      name: "ordered_list",
      tooltip: dictionary.orderedList,
-      icon: OrderedListIcon,
+      icon: <OrderedListIcon />,
      active: isNodeActive(schema.nodes.ordered_list),
      visible: (allowBlocks || isList) && !isCode,
    },
@@ -132,7 +141,7 @@ export default function formattingMenuItems(
    {
      name: "link",
      tooltip: dictionary.createLink,
-      icon: LinkIcon,
+      icon: <LinkIcon />,
      active: isMarkActive(schema.marks.link),
      attrs: { href: "" },
      visible: !isCode,
--- a/app/editor/menus/image.tsx
+++ b/app/editor/menus/image.tsx
@@ -7,6 +7,7 @@ import {
  AlignImageCenterIcon,
 } from "outline-icons";
 import { EditorState } from "prosemirror-state";
+import * as React from "react";
 import isNodeActive from "@shared/editor/queries/isNodeActive";
 import { MenuItem } from "@shared/editor/types";
 import { Dictionary } from "~/hooks/useDictionary";
@@ -27,14 +28,14 @@ export default function imageMenuItems(
    {
      name: "alignLeft",
      tooltip: dictionary.alignLeft,
-      icon: AlignImageLeftIcon,
+      icon: <AlignImageLeftIcon />,
      visible: true,
      active: isLeftAligned,
    },
    {
      name: "alignCenter",
      tooltip: dictionary.alignCenter,
-      icon: AlignImageCenterIcon,
+      icon: <AlignImageCenterIcon />,
      visible: true,
      active: (state) =>
        isNodeActive(schema.nodes.image)(state) &&
@@ -44,7 +45,7 @@ export default function imageMenuItems(
    {
      name: "alignRight",
      tooltip: dictionary.alignRight,
-      icon: AlignImageRightIcon,
+      icon: <AlignImageRightIcon />,
      visible: true,
      active: isRightAligned,
    },
@@ -55,21 +56,21 @@ export default function imageMenuItems(
    {
      name: "downloadImage",
      tooltip: dictionary.downloadImage,
-      icon: DownloadIcon,
+      icon: <DownloadIcon />,
      visible: !!fetch,
      active: () => false,
    },
    {
      name: "replaceImage",
      tooltip: dictionary.replaceImage,
-      icon: ReplaceIcon,
+      icon: <ReplaceIcon />,
      visible: true,
      active: () => false,
    },
    {
      name: "deleteImage",
      tooltip: dictionary.deleteImage,
-      icon: TrashIcon,
+      icon: <TrashIcon />,
      visible: true,
      active: () => false,
    },
--- a/app/editor/menus/table.tsx
+++ b/app/editor/menus/table.tsx
@@ -1,4 +1,5 @@
 import { TrashIcon } from "outline-icons";
+import * as React from "react";
 import { MenuItem } from "@shared/editor/types";
 import { Dictionary } from "~/hooks/useDictionary";

@@ -7,7 +8,7 @@ export default function tableMenuItems(dictionary: Dictionary): MenuItem[] {
    {
      name: "deleteTable",
      tooltip: dictionary.deleteTable,
-      icon: TrashIcon,
+      icon: <TrashIcon />,
      active: () => false,
    },
  ];
--- a/app/editor/menus/tableCol.tsx
+++ b/app/editor/menus/tableCol.tsx
@@ -7,6 +7,7 @@ import {
  InsertRightIcon,
 } from "outline-icons";
 import { EditorState } from "prosemirror-state";
+import * as React from "react";
 import isNodeActive from "@shared/editor/queries/isNodeActive";
 import { MenuItem } from "@shared/editor/types";
 import { Dictionary } from "~/hooks/useDictionary";
@@ -23,7 +24,7 @@ export default function tableColMenuItems(
    {
      name: "setColumnAttr",
      tooltip: dictionary.alignLeft,
-      icon: AlignLeftIcon,
+      icon: <AlignLeftIcon />,
      attrs: { index, alignment: "left" },
      active: isNodeActive(schema.nodes.th, {
        colspan: 1,
@@ -34,7 +35,7 @@ export default function tableColMenuItems(
    {
      name: "setColumnAttr",
      tooltip: dictionary.alignCenter,
-      icon: AlignCenterIcon,
+      icon: <AlignCenterIcon />,
      attrs: { index, alignment: "center" },
      active: isNodeActive(schema.nodes.th, {
        colspan: 1,
@@ -45,7 +46,7 @@ export default function tableColMenuItems(
    {
      name: "setColumnAttr",
      tooltip: dictionary.alignRight,
-      icon: AlignRightIcon,
+      icon: <AlignRightIcon />,
      attrs: { index, alignment: "right" },
      active: isNodeActive(schema.nodes.th, {
        colspan: 1,
@@ -59,13 +60,13 @@ export default function tableColMenuItems(
    {
      name: rtl ? "addColumnAfter" : "addColumnBefore",
      tooltip: rtl ? dictionary.addColumnAfter : dictionary.addColumnBefore,
-      icon: InsertLeftIcon,
+      icon: <InsertLeftIcon />,
      active: () => false,
    },
    {
      name: rtl ? "addColumnBefore" : "addColumnAfter",
      tooltip: rtl ? dictionary.addColumnBefore : dictionary.addColumnAfter,
-      icon: InsertRightIcon,
+      icon: <InsertRightIcon />,
      active: () => false,
    },
    {
@@ -74,7 +75,7 @@ export default function tableColMenuItems(
    {
      name: "deleteColumn",
      tooltip: dictionary.deleteColumn,
-      icon: TrashIcon,
+      icon: <TrashIcon />,
      active: () => false,
    },
  ];
--- a/app/editor/menus/tableRow.tsx
+++ b/app/editor/menus/tableRow.tsx
@@ -1,5 +1,6 @@
 import { TrashIcon, InsertAboveIcon, InsertBelowIcon } from "outline-icons";
 import { EditorState } from "prosemirror-state";
+import * as React from "react";
 import { MenuItem } from "@shared/editor/types";
 import { Dictionary } from "~/hooks/useDictionary";

@@ -12,7 +13,7 @@ export default function tableRowMenuItems(
    {
      name: "addRowAfter",
      tooltip: dictionary.addRowBefore,
-      icon: InsertAboveIcon,
+      icon: <InsertAboveIcon />,
      attrs: { index: index - 1 },
      active: () => false,
      visible: index !== 0,
@@ -20,7 +21,7 @@ export default function tableRowMenuItems(
    {
      name: "addRowAfter",
      tooltip: dictionary.addRowAfter,
-      icon: InsertBelowIcon,
+      icon: <InsertBelowIcon />,
      attrs: { index },
      active: () => false,
    },
@@ -30,7 +31,7 @@ export default function tableRowMenuItems(
    {
      name: "deleteRow",
      tooltip: dictionary.deleteRow,
-      icon: TrashIcon,
+      icon: <TrashIcon />,
      active: () => false,
    },
  ];