feat: excalidraw integration (#214)

* update tiptap version

* excalidraw init

* cleanup

* better file handling and other fixes

* use different modal to fix excalidraw cursor position issue
* see https://github.com/excalidraw/excalidraw/issues/7312
* fix websocket in vite dev mode

* WIP

* add align attribute

* fix table

* menu icons

* Render image in excalidraw html
* add size to custom SVG components

* rewrite undefined font urls

packages/editor-ext/package.json

@@ -8,6 +8,5 @@
   },
   "main": "dist/index.js",
   "module": "./src/index.ts",
-  "types": "dist/index.d.ts",
-  "dependencies": {}
+  "types": "dist/index.d.ts"
 }

packages/editor-ext/src/index.ts

@@ -11,4 +11,5 @@ export * from "./lib/media-utils";
 export * from "./lib/link";
 export * from "./lib/selection";
 export * from "./lib/attachment";
-export * from "./lib/custom-code-block"
+export * from "./lib/custom-code-block";
+export * from "./lib/excalidraw";

packages/editor-ext/src/lib/excalidraw.ts

@@ -0,0 +1,123 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+
+export interface ExcalidrawOptions {
+  HTMLAttributes: Record<string, any>;
+  view: any;
+}
+export interface ExcalidrawAttributes {
+  src?: string;
+  title?: string;
+  size?: number;
+  width?: string;
+  align?: string;
+  attachmentId?: string;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    excalidraw: {
+      setExcalidraw: (attributes?: ExcalidrawAttributes) => ReturnType;
+    };
+  }
+}
+
+export const Excalidraw = Node.create<ExcalidrawOptions>({
+  name: 'excalidraw',
+  inline: false,
+  group: 'block',
+  isolating: true,
+  atom: true,
+  defining: true,
+  draggable: true,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      view: null,
+    };
+  },
+  addAttributes() {
+    return {
+      src: {
+        default: '',
+        parseHTML: (element) => element.getAttribute('data-src'),
+        renderHTML: (attributes) => ({
+          'data-src': attributes.src,
+        }),
+      },
+      title: {
+        default: undefined,
+        parseHTML: (element) => element.getAttribute('data-title'),
+        renderHTML: (attributes: ExcalidrawAttributes) => ({
+          'data-title': attributes.title,
+        }),
+      },
+      width: {
+        default: '100%',
+        parseHTML: (element) => element.getAttribute('data-width'),
+        renderHTML: (attributes: ExcalidrawAttributes) => ({
+          'data-width': attributes.width,
+        }),
+      },
+      size: {
+        default: null,
+        parseHTML: (element) => element.getAttribute('data-size'),
+        renderHTML: (attributes: ExcalidrawAttributes) => ({
+          'data-size': attributes.size,
+        }),
+      },
+      align: {
+        default: 'center',
+        parseHTML: (element) => element.getAttribute('data-align'),
+        renderHTML: (attributes: ExcalidrawAttributes) => ({
+          'data-align': attributes.align,
+        }),
+      },
+      attachmentId: {
+        default: undefined,
+        parseHTML: (element) => element.getAttribute('data-attachment-id'),
+        renderHTML: (attributes: ExcalidrawAttributes) => ({
+          'data-attachment-id': attributes.attachmentId,
+        }),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: `div[data-type="${this.name}"]`,
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'div',
+      mergeAttributes(
+        { 'data-type': this.name },
+        this.options.HTMLAttributes,
+        HTMLAttributes
+      ),
+      ['img', { src: HTMLAttributes['data-src'], alt: HTMLAttributes['data-title'], width: HTMLAttributes['data-width'] }],
+    ];
+  },
+
+  addCommands() {
+    return {
+      setExcalidraw:
+        (attrs: ExcalidrawAttributes) =>
+        ({ commands }) => {
+          return commands.insertContent({
+            type: 'excalidraw',
+            attrs: attrs,
+          });
+        },
+    };
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(this.options.view);
+  },
+});