refactor: regroup extensions and icons

src/extensions/character-count.ts

@@ -1,12 +1,12 @@
-import type { IExtension } from "../extensions";
+import type { ExtensionMeta } from "./index";
 import { CharacterCount, type CharacterCountOptions } from "@tiptap/extension-character-count";
 
 const defaults: Partial<CharacterCountOptions> = {
   limit: null,
   mode: "textSize",
 };
 
-const extension: IExtension<typeof CharacterCount> = {
+const extension: ExtensionMeta<typeof CharacterCount> = {
   name: "characterCount",
   title: "CharacterCount",
   package: "@tiptap/extension-character-count",

src/extensions/focus.ts

@@ -1,11 +1,11 @@
-import type { IExtension } from "../extensions";
+import type { ExtensionMeta } from "./index";
 import Focus, { type FocusOptions } from "@tiptap/extension-focus";
 
 const defaults: Partial<FocusOptions> = {
   mode: "all",
 };
 
-const extension: IExtension<typeof Focus> = {
+const extension: ExtensionMeta<typeof Focus> = {
   name: "focus",
   title: "Focus",
   package: "@tiptap/extension-focus",

src/extensions/highlight.ts

@@ -1,7 +1,7 @@
-import type { IExtension } from "../extensions";
+import type { ExtensionMeta } from "./index";
 import { Highlight } from "@tiptap/extension-highlight";
 
-const extension: IExtension<typeof Highlight> = {
+const extension: ExtensionMeta<typeof Highlight> = {
   name: "highlight",
   title: "Highlight",
   package: "@tiptap/extension-highlight",

src/extensions/image.ts

@@ -1,4 +1,4 @@
-import type { IExtension } from "../extensions";
+import type { ExtensionMeta } from "./index";
 import { mergeAttributes, Node } from "@tiptap/core";
 import { getPublicURL } from "../utils/get-root-path";
 
@@ -106,7 +106,7 @@ export const Image = Node.create<ImageOptions>({
   },
 });
 
-const extension: IExtension<typeof Image> = {
+const extension: ExtensionMeta<typeof Image> = {
   name: "image",
   title: "Image",
   package: "File Library",

src/extensions.ts → src/extensions/index.ts

@@ -7,19 +7,27 @@ import type { FocusOptions } from "@tiptap/extension-focus";
 import type { TaskItemOptions } from "@tiptap/extension-task-item";
 import type { TableOptions } from "@tiptap/extension-table";
 import type { DeepPartial, Field } from "@directus/types";
-import underline from "./extensions/underline";
-import textAlign from "./extensions/text-align";
-import characterCount from "./extensions/character-count";
-import subscript from "./extensions/subscript";
-import superscript from "./extensions/superscript";
-import highlight from "./extensions/highlight";
-import typography from "./extensions/typography";
-import placeholder from "./extensions/placeholder";
-import link from "./extensions/link";
-import focus from "./extensions/focus";
-import task from "./extensions/task";
-import table from "./extensions/table";
-import image from "./extensions/image";
+import underline from "./underline";
+import textAlign from "./text-align";
+import characterCount from "./character-count";
+import subscript from "./subscript";
+import superscript from "./superscript";
+import highlight from "./highlight";
+import typography from "./typography";
+import placeholder from "./placeholder";
+import link from "./link";
+import focus from "./focus";
+import task from "./task";
+import table from "./table";
+import image from "./image";
+
+type ExtensionGroup = "mark" | "node" | "editor";
+
+export const extensionsGroups: { group: ExtensionGroup; label: string }[] = [
+  { group: "mark", label: "Marks" },
+  { group: "node", label: "Nodes" },
+  { group: "editor", label: "Editor" },
+];
 
 interface ExtensionsProps {
   extensions: string[] | null;
@@ -32,9 +40,7 @@ interface ExtensionsProps {
   tableResizable: TableOptions["resizable"];
 }
 
-type ExtensionGroup = "mark" | "node" | "editor";
-
-export interface IExtension<E extends AnyExtension> {
+export interface ExtensionMeta<E extends AnyExtension = AnyExtension> {
   name: string;
   title: string;
   package: string;
@@ -44,7 +50,7 @@ export interface IExtension<E extends AnyExtension> {
   defaults: Partial<E["options"]>;
 }
 
-export const localExtensions: IExtension<AnyExtension>[] = [
+export const extensionsMeta: ExtensionMeta[] = [
   // marks
   highlight,
   link,
@@ -63,16 +69,10 @@ export const localExtensions: IExtension<AnyExtension>[] = [
   characterCount,
 ];
 
-export const extensionsGroups: { group: ExtensionGroup; label: string }[] = [
-  { group: "mark", label: "Marks" },
-  { group: "node", label: "Nodes" },
-  { group: "editor", label: "Editor" },
-];
-
 export function loadExtensions(props: ExtensionsProps): Extensions {
   const extensions: Extensions = [StarterKit];
 
-  for (const ext of localExtensions) {
+  for (const ext of extensionsMeta) {
     if (props.extensions?.includes(ext.name)) {
       extensions.push(ext.load(props));
     }

src/extensions/link.ts

@@ -1,7 +1,7 @@
-import type { IExtension } from "../extensions";
+import type { ExtensionMeta } from "./index";
 import { Link } from "@tiptap/extension-link";
 
-const extension: IExtension<typeof Link> = {
+const extension: ExtensionMeta<typeof Link> = {
   name: "link",
   title: "Link",
   package: "@tiptap/extension-link",

src/extensions/placeholder.ts

@@ -1,7 +1,7 @@
-import type { IExtension } from "../extensions";
+import type { ExtensionMeta } from "./index";
 import { Placeholder } from "@tiptap/extension-placeholder";
 
-const extension: IExtension<typeof Placeholder> = {
+const extension: ExtensionMeta<typeof Placeholder> = {
   name: "placeholder",
   title: "Placeholder",
   package: "@tiptap/extension-placeholder",

src/extensions/subscript.ts

@@ -1,7 +1,7 @@
-import type { IExtension } from "../extensions";
+import type { ExtensionMeta } from "./index";
 import { Subscript } from "@tiptap/extension-subscript";
 
-const extension: IExtension<typeof Subscript> = {
+const extension: ExtensionMeta<typeof Subscript> = {
   name: "subscript",
   title: "Subscript",
   package: "@tiptap/extension-subscript",

src/extensions/superscript.ts

@@ -1,7 +1,7 @@
-import type { IExtension } from "../extensions";
+import type { ExtensionMeta } from "../extensions";
 import { Superscript } from "@tiptap/extension-superscript";
 
-const extension: IExtension<typeof Superscript> = {
+const extension: ExtensionMeta<typeof Superscript> = {
   name: "superscript",
   title: "Superscript",
   package: "@tiptap/extension-superscript",

src/extensions/table.ts

@@ -4,7 +4,7 @@ import { TableRow } from "@tiptap/extension-table-row";
 import { TableCell } from "@tiptap/extension-table-cell";
 import { TableHeader } from "@tiptap/extension-table-header";
 import { Extension } from "@tiptap/core";
-import type { IExtension } from "../extensions";
+import type { ExtensionMeta } from "./index";
 
 // Wrapper for all Table extensions
 const TableKit = Extension.create<TableOptions>({
@@ -19,7 +19,7 @@ const defaults: Partial<TableOptions> = {
   resizable: false,
 };
 
-const extension: IExtension<typeof TableKit> = {
+const extension: ExtensionMeta<typeof TableKit> = {
   name: "table",
   title: "Table",
   package: "@tiptap/extension-table",

src/extensions/task.ts

@@ -2,7 +2,7 @@ import { TaskList } from "@tiptap/extension-task-list";
 import type { TaskItemOptions } from "@tiptap/extension-task-item";
 import { TaskItem } from "@tiptap/extension-task-item";
 import { Extension } from "@tiptap/core";
-import type { IExtension } from "../extensions";
+import type { ExtensionMeta } from "./index";
 
 // Wrapper for TaskList + TaskItem
 const TaskKit = Extension.create<TaskItemOptions>({
@@ -17,7 +17,7 @@ const defaults: Partial<TaskItemOptions> = {
   nested: false,
 };
 
-const extension: IExtension<typeof TaskKit> = {
+const extension: ExtensionMeta<typeof TaskKit> = {
   name: "task",
   title: "TaskList",
   package: "@tiptap/extension-task-(list|item)",

src/extensions/text-align.ts

@@ -1,11 +1,11 @@
-import type { IExtension } from "../extensions";
+import type { ExtensionMeta } from "./index";
 import { TextAlign, type TextAlignOptions } from "@tiptap/extension-text-align";
 
 const defaults: Partial<TextAlignOptions> = {
   types: ["heading", "paragraph"],
 };
 
-const extension: IExtension<typeof TextAlign> = {
+const extension: ExtensionMeta<typeof TextAlign> = {
   name: "textAlign",
   title: "TextAlign",
   package: "@tiptap/extension-text-align",

src/extensions/typography.ts

@@ -1,7 +1,7 @@
-import type { IExtension } from "../extensions";
+import type { ExtensionMeta } from "./index";
 import { Typography } from "@tiptap/extension-typography";
 
-const extension: IExtension<typeof Typography> = {
+const extension: ExtensionMeta<typeof Typography> = {
   name: "typography",
   title: "Typography",
   package: "@tiptap/extension-typography",

src/extensions/underline.ts

@@ -1,7 +1,7 @@
-import type { IExtension } from "../extensions";
+import type { ExtensionMeta } from "./index";
 import { Underline } from "@tiptap/extension-underline";
 
-const extension: IExtension<typeof Underline> = {
+const extension: ExtensionMeta<typeof Underline> = {
   name: "underline",
   title: "Underline",
   package: "@tiptap/extension-underline",

src/icons/index.ts

@@ -0,0 +1,97 @@
+import AlignCenter from "./align-center.vue";
+import AlignJustify from "./align-justify.vue";
+import AlignLeft from "./align-left.vue";
+import AlignRight from "./align-right.vue";
+import ArrowGoBackLine from "./arrow-go-back-line.vue";
+import ArrowGoForwardLine from "./arrow-go-forward-line.vue";
+import Bold from "./bold.vue";
+import CodeBoxLine from "./code-box-line.vue";
+import CodeLine from "./code-line.vue";
+import DeleteBin from "./delete-bin.vue";
+import DeleteColumn from "./delete-column.vue";
+import DeleteRow from "./delete-row.vue";
+import FormatClear from "./format-clear.vue";
+import H1 from "./h1.vue";
+import H2 from "./h2.vue";
+import H3 from "./h3.vue";
+import H4 from "./h4.vue";
+import H5 from "./h5.vue";
+import H6 from "./h6.vue";
+import Heading from "./heading.vue";
+import Image from "./image.vue";
+import InsertColumnLeft from "./insert-column-left.vue";
+import InsertColumnRight from "./insert-column-right.vue";
+import InsertRowBottom from "./insert-row-bottom.vue";
+import InsertRowTop from "./insert-row-top.vue";
+import Italic from "./italic.vue";
+import LayoutGrid from "./layout-grid.vue";
+import LayoutLeft from "./layout-left.vue";
+import LayoutTop from "./layout-top.vue";
+import Link from "./link.vue";
+import ListCheck from "./list-check.vue";
+import ListOrdered from "./list-ordered.vue";
+import ListUnordered from "./list-unordered.vue";
+import MarkPenLine from "./mark-pen-line.vue";
+import MergeCells from "./merge-cells.vue";
+import Paragraph from "./paragraph.vue";
+import QuoteText from "./quote-text.vue";
+import Separator from "./separator.vue";
+import SplitCell from "./split-cell.vue";
+import Strikethrough from "./strikethrough.vue";
+import Subscript from "./subscript.vue";
+import Superscript from "./superscript.vue";
+import Table from "./table.vue";
+import TextWrap from "./text-wrap.vue";
+import Underline from "./underline.vue";
+import Unlink from "./unlink.vue";
+
+const icons = {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  ArrowGoBackLine,
+  ArrowGoForwardLine,
+  Bold,
+  CodeBoxLine,
+  CodeLine,
+  DeleteBin,
+  DeleteColumn,
+  DeleteRow,
+  FormatClear,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Heading,
+  Image,
+  InsertColumnLeft,
+  InsertColumnRight,
+  InsertRowBottom,
+  InsertRowTop,
+  Italic,
+  LayoutGrid,
+  LayoutLeft,
+  LayoutTop,
+  Link,
+  ListCheck,
+  ListOrdered,
+  ListUnordered,
+  MarkPenLine,
+  MergeCells,
+  Paragraph,
+  QuoteText,
+  Separator,
+  SplitCell,
+  Strikethrough,
+  Subscript,
+  Superscript,
+  Table,
+  TextWrap,
+  Underline,
+  Unlink,
+};
+
+export default icons;

src/interface.ts

@@ -1,12 +1,12 @@
 import { defineInterface } from "@directus/extensions-sdk";
 import type { Field, DeepPartial } from "@directus/types";
 import TiptapEditor from "./tiptap-editor.vue";
-import { extensionsGroups, localExtensions } from "./extensions";
+import { extensionsMeta, extensionsGroups } from "./extensions";
 
 const extensionsChoices = extensionsGroups.map((group) => ({
   text: group.label,
   value: group.group,
-  children: localExtensions
+  children: extensionsMeta
     .filter((extension) => extension.group === group.group)
     .map((extension) => ({
       value: extension.name,
@@ -45,7 +45,7 @@ export default defineInterface({
 
     if (field.meta?.options) {
       // append options of selected extensions
-      for (const extension of localExtensions) {
+      for (const extension of extensionsMeta) {
         if (field.meta.options.extensions?.includes(extension.name)) {
           options.push(...extension.options);
         }