chore: Refactors towards shared menu component (#4445)

shared/editor/components/DisabledEmbed.tsx

@@ -9,7 +9,7 @@ export default function DisabledEmbed(props: Props & ThemeProps<DefaultTheme>) {
     <Widget
       title={props.embed.title}
       href={props.attrs.href}
-      icon={props.embed.icon(undefined)}
+      icon={props.embed.icon}
       context={props.attrs.href.replace(/^https?:\/\//, "")}
       isSelected={props.isSelected}
       theme={props.theme}

shared/editor/embeds/index.tsx

@@ -68,7 +68,7 @@ const Img = styled(Image)`
 `;
 
 export class EmbedDescriptor {
-  icon: React.FC<any>;
+  icon?: React.ReactNode;
   name?: string;
   title?: string;
   shortcut?: string;
@@ -127,264 +127,262 @@ const embeds: EmbedDescriptor[] = [
     title: "Abstract",
     keywords: "design",
     defaultHidden: true,
-    icon: () => <Img src="/images/abstract.png" alt="Abstract" />,
+    icon: <Img src="/images/abstract.png" alt="Abstract" />,
     component: Abstract,
   }),
   new EmbedDescriptor({
     title: "Airtable",
     keywords: "spreadsheet",
-    icon: () => <Img src="/images/airtable.png" alt="Airtable" />,
+    icon: <Img src="/images/airtable.png" alt="Airtable" />,
     component: Airtable,
   }),
   new EmbedDescriptor({
     title: "Berrycast",
     keywords: "video",
     defaultHidden: true,
-    icon: () => <Img src="/images/berrycast.png" alt="Berrycast" />,
+    icon: <Img src="/images/berrycast.png" alt="Berrycast" />,
     component: Berrycast,
   }),
   new EmbedDescriptor({
     title: "Bilibili",
     keywords: "video",
     defaultHidden: true,
-    icon: () => <Img src="/images/bilibili.png" alt="Bilibili" />,
+    icon: <Img src="/images/bilibili.png" alt="Bilibili" />,
     component: Bilibili,
   }),
   new EmbedDescriptor({
     title: "Cawemo",
     keywords: "bpmn process",
     defaultHidden: true,
-    icon: () => <Img src="/images/cawemo.png" alt="Cawemo" />,
+    icon: <Img src="/images/cawemo.png" alt="Cawemo" />,
     component: Cawemo,
   }),
   new EmbedDescriptor({
     title: "ClickUp",
     keywords: "project",
-    icon: () => <Img src="/images/clickup.png" alt="ClickUp" />,
+    icon: <Img src="/images/clickup.png" alt="ClickUp" />,
     component: ClickUp,
   }),
   new EmbedDescriptor({
     title: "Codepen",
     keywords: "code editor",
-    icon: () => <Img src="/images/codepen.png" alt="Codepen" />,
+    icon: <Img src="/images/codepen.png" alt="Codepen" />,
     component: Codepen,
   }),
   new EmbedDescriptor({
     title: "DBDiagram",
     keywords: "diagrams database",
-    icon: () => <Img src="/images/dbdiagram.png" alt="DBDiagram" />,
+    icon: <Img src="/images/dbdiagram.png" alt="DBDiagram" />,
     component: DBDiagram,
   }),
   new EmbedDescriptor({
     title: "Descript",
     keywords: "audio",
-    icon: () => <Img src="/images/descript.png" alt="Descript" />,
+    icon: <Img src="/images/descript.png" alt="Descript" />,
     component: Descript,
   }),
   new EmbedDescriptor({
     title: "Figma",
     keywords: "design svg vector",
-    icon: () => <Img src="/images/figma.png" alt="Figma" />,
+    icon: <Img src="/images/figma.png" alt="Figma" />,
     component: Figma,
   }),
   new EmbedDescriptor({
     title: "Framer",
     keywords: "design prototyping",
-    icon: () => <Img src="/images/framer.png" alt="Framer" />,
+    icon: <Img src="/images/framer.png" alt="Framer" />,
     component: Framer,
   }),
   new EmbedDescriptor({
     title: "GitHub Gist",
     keywords: "code",
-    icon: () => <Img src="/images/github-gist.png" alt="GitHub" />,
+    icon: <Img src="/images/github-gist.png" alt="GitHub" />,
     component: Gist,
   }),
   new EmbedDescriptor({
     title: "Gliffy",
     keywords: "diagram",
-    icon: () => <Img src="/images/gliffy.png" alt="Gliffy" />,
+    icon: <Img src="/images/gliffy.png" alt="Gliffy" />,
     component: Gliffy,
   }),
   new EmbedDescriptor({
     title: "Diagrams.net",
     keywords: "diagrams drawio",
-    icon: () => <Img src="/images/diagrams.png" alt="Diagrams.net" />,
+    icon: <Img src="/images/diagrams.png" alt="Diagrams.net" />,
     component: Diagrams,
   }),
   new EmbedDescriptor({
     title: "Google Drawings",
     keywords: "drawings",
-    icon: () => <Img src="/images/google-drawings.png" alt="Google Drawings" />,
+    icon: <Img src="/images/google-drawings.png" alt="Google Drawings" />,
     component: GoogleDrawings,
   }),
   new EmbedDescriptor({
     title: "Google Drive",
     keywords: "drive",
-    icon: () => <Img src="/images/google-drive.png" alt="Google Drive" />,
+    icon: <Img src="/images/google-drive.png" alt="Google Drive" />,
     component: GoogleDrive,
   }),
   new EmbedDescriptor({
     title: "Google Docs",
     keywords: "documents word",
-    icon: () => <Img src="/images/google-docs.png" alt="Google Docs" />,
+    icon: <Img src="/images/google-docs.png" alt="Google Docs" />,
     component: GoogleDocs,
   }),
   new EmbedDescriptor({
     title: "Google Sheets",
     keywords: "excel spreadsheet",
-    icon: () => <Img src="/images/google-sheets.png" alt="Google Sheets" />,
+    icon: <Img src="/images/google-sheets.png" alt="Google Sheets" />,
     component: GoogleSheets,
   }),
   new EmbedDescriptor({
     title: "Google Slides",
     keywords: "presentation slideshow",
-    icon: () => <Img src="/images/google-slides.png" alt="Google Slides" />,
+    icon: <Img src="/images/google-slides.png" alt="Google Slides" />,
     component: GoogleSlides,
   }),
   new EmbedDescriptor({
     title: "Google Calendar",
     keywords: "calendar",
-    icon: () => <Img src="/images/google-calendar.png" alt="Google Calendar" />,
+    icon: <Img src="/images/google-calendar.png" alt="Google Calendar" />,
     component: GoogleCalendar,
   }),
   new EmbedDescriptor({
     title: "Google Data Studio",
     keywords: "bi business intelligence",
-    icon: () => (
-      <Img src="/images/google-datastudio.png" alt="Google Data Studio" />
-    ),
+    icon: <Img src="/images/google-datastudio.png" alt="Google Data Studio" />,
     component: GoogleDataStudio,
   }),
   new EmbedDescriptor({
     title: "Google Forms",
     keywords: "form survey",
-    icon: () => <Img src="/images/google-forms.png" alt="Google Forms" />,
+    icon: <Img src="/images/google-forms.png" alt="Google Forms" />,
     component: GoogleForms,
   }),
   new EmbedDescriptor({
     title: "Grist",
     keywords: "spreadsheet",
-    icon: () => <Img src="/images/grist.png" alt="Grist" />,
+    icon: <Img src="/images/grist.png" alt="Grist" />,
     component: Grist,
   }),
   new EmbedDescriptor({
     title: "InVision",
     keywords: "design prototype",
     defaultHidden: true,
-    icon: () => <Img src="/images/invision.png" alt="InVision" />,
+    icon: <Img src="/images/invision.png" alt="InVision" />,
     component: InVision,
   }),
   new EmbedDescriptor({
     title: "JSFiddle",
     keywords: "code",
     defaultHidden: true,
-    icon: () => <Img src="/images/jsfiddle.png" alt="JSFiddle" />,
+    icon: <Img src="/images/jsfiddle.png" alt="JSFiddle" />,
     component: JSFiddle,
   }),
   new EmbedDescriptor({
     title: "Loom",
     keywords: "video screencast",
-    icon: () => <Img src="/images/loom.png" alt="Loom" />,
+    icon: <Img src="/images/loom.png" alt="Loom" />,
     component: Loom,
   }),
   new EmbedDescriptor({
     title: "Lucidchart",
     keywords: "chart",
-    icon: () => <Img src="/images/lucidchart.png" alt="Lucidchart" />,
+    icon: <Img src="/images/lucidchart.png" alt="Lucidchart" />,
     component: Lucidchart,
   }),
   new EmbedDescriptor({
     title: "Marvel",
     keywords: "design prototype",
-    icon: () => <Img src="/images/marvel.png" alt="Marvel" />,
+    icon: <Img src="/images/marvel.png" alt="Marvel" />,
     component: Marvel,
   }),
   new EmbedDescriptor({
     title: "Mindmeister",
     keywords: "mindmap",
-    icon: () => <Img src="/images/mindmeister.png" alt="Mindmeister" />,
+    icon: <Img src="/images/mindmeister.png" alt="Mindmeister" />,
     component: Mindmeister,
   }),
   new EmbedDescriptor({
     title: "Miro",
     keywords: "whiteboard",
-    icon: () => <Img src="/images/miro.png" alt="Miro" />,
+    icon: <Img src="/images/miro.png" alt="Miro" />,
     component: Miro,
   }),
   new EmbedDescriptor({
     title: "Mode",
     keywords: "analytics",
     defaultHidden: true,
-    icon: () => <Img src="/images/mode-analytics.png" alt="Mode" />,
+    icon: <Img src="/images/mode-analytics.png" alt="Mode" />,
     component: ModeAnalytics,
   }),
   new EmbedDescriptor({
     title: "Otter.ai",
     keywords: "audio transcription meeting notes",
     defaultHidden: true,
-    icon: () => <Img src="/images/otter.png" alt="Otter.ai" />,
+    icon: <Img src="/images/otter.png" alt="Otter.ai" />,
     component: Otter,
   }),
   new EmbedDescriptor({
     title: "Pitch",
     keywords: "presentation",
     defaultHidden: true,
-    icon: () => <Img src="/images/pitch.png" alt="Pitch" />,
+    icon: <Img src="/images/pitch.png" alt="Pitch" />,
     component: Pitch,
   }),
   new EmbedDescriptor({
     title: "Prezi",
     keywords: "presentation",
-    icon: () => <Img src="/images/prezi.png" alt="Prezi" />,
+    icon: <Img src="/images/prezi.png" alt="Prezi" />,
     component: Prezi,
   }),
   new EmbedDescriptor({
     title: "Scribe",
     keywords: "screencast",
-    icon: () => <Img src="/images/scribe.png" alt="Scribe" />,
+    icon: <Img src="/images/scribe.png" alt="Scribe" />,
     component: Scribe,
   }),
   new EmbedDescriptor({
     title: "Spotify",
     keywords: "music",
-    icon: () => <Img src="/images/spotify.png" alt="Spotify" />,
+    icon: <Img src="/images/spotify.png" alt="Spotify" />,
     component: Spotify,
   }),
   new EmbedDescriptor({
     title: "Tldraw",
     keywords: "draw schematics diagrams",
     visible: false,
-    icon: () => <Img src="/images/tldraw.png" alt="Tldraw" />,
+    icon: <Img src="/images/tldraw.png" alt="Tldraw" />,
     component: Tldraw,
   }),
   new EmbedDescriptor({
     title: "Trello",
     keywords: "kanban",
-    icon: () => <Img src="/images/trello.png" alt="Trello" />,
+    icon: <Img src="/images/trello.png" alt="Trello" />,
     component: Trello,
   }),
   new EmbedDescriptor({
     title: "Typeform",
     keywords: "form survey",
-    icon: () => <Img src="/images/typeform.png" alt="Typeform" />,
+    icon: <Img src="/images/typeform.png" alt="Typeform" />,
     component: Typeform,
   }),
   new EmbedDescriptor({
     title: "Vimeo",
     keywords: "video",
-    icon: () => <Img src="/images/vimeo.png" alt="Vimeo" />,
+    icon: <Img src="/images/vimeo.png" alt="Vimeo" />,
     component: Vimeo,
   }),
   new EmbedDescriptor({
     title: "Whimsical",
     keywords: "whiteboard",
-    icon: () => <Img src="/images/whimsical.png" alt="Whimsical" />,
+    icon: <Img src="/images/whimsical.png" alt="Whimsical" />,
     component: Whimsical,
   }),
   new EmbedDescriptor({
     title: "YouTube",
     keywords: "google video",
-    icon: () => <Img src="/images/youtube.png" alt="YouTube" />,
+    icon: <Img src="/images/youtube.png" alt="YouTube" />,
     component: YouTube,
   }),
 ];

shared/editor/lib/filterExcessSeparators.ts

@@ -3,7 +3,9 @@ import { MenuItem } from "../types";
 
 type Item = MenuItem | EmbedDescriptor;
 
-export default function filterExcessSeparators(items: Item[]): Item[] {
+export default function filterExcessSeparators<T extends Item>(
+  items: T[]
+): T[] {
   return items
     .reduce((acc, item) => {
       // trim separator if the previous item was a separator
@@ -14,7 +16,7 @@ export default function filterExcessSeparators(items: Item[]): Item[] {
         return acc;
       }
       return [...acc, item];
-    }, [] as Item[])
+    }, [] as T[])
     .filter((item, index, arr) => {
       if (
         item.name === "separator" &&

shared/editor/types/index.ts

@@ -15,7 +15,7 @@ export enum EventType {
 }
 
 export type MenuItem = {
-  icon?: typeof React.Component | React.FC<any>;
+  icon?: React.ReactElement;
   name?: string;
   title?: string;
   shortcut?: string;