feat: synced blocks (transclusion)

packages/editor-ext/src/index.ts

@@ -21,6 +21,7 @@ export * from "./lib/markdown";
 export * from "./lib/search-and-replace";
 export * from "./lib/embed-provider";
 export * from "./lib/subpages";
+export * from "./lib/transclusion";
 export * from "./lib/highlight";
 export * from "./lib/heading/heading";
 export * from "./lib/unique-id";

packages/editor-ext/src/lib/transclusion/index.ts

@@ -0,0 +1,2 @@
+export * from "./transclusion-source";
+export * from "./transclusion-reference";

packages/editor-ext/src/lib/transclusion/transclusion-reference.ts

@@ -0,0 +1,92 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+
+export interface TransclusionReferenceOptions {
+  HTMLAttributes: Record<string, any>;
+  view: any;
+}
+
+export interface TransclusionReferenceAttributes {
+  sourcePageId?: string | null;
+  transclusionId?: string | null;
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    transclusionReference: {
+      insertTransclusionReference: (
+        attributes: TransclusionReferenceAttributes,
+      ) => ReturnType;
+    };
+  }
+}
+
+export const TransclusionReference = Node.create<TransclusionReferenceOptions>({
+  name: "transclusionReference",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      view: null,
+    };
+  },
+
+  group: "block",
+  atom: true,
+  selectable: true,
+  draggable: false,
+
+  addAttributes() {
+    return {
+      sourcePageId: {
+        default: null,
+        parseHTML: (el) => el.getAttribute("data-source-page-id"),
+        renderHTML: (attrs) =>
+          attrs.sourcePageId
+            ? { "data-source-page-id": attrs.sourcePageId }
+            : {},
+      },
+      transclusionId: {
+        default: null,
+        parseHTML: (el) => el.getAttribute("data-transclusion-id"),
+        renderHTML: (attrs) =>
+          attrs.transclusionId
+            ? { "data-transclusion-id": attrs.transclusionId }
+            : {},
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: `div[data-type="${this.name}"]` }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(
+        { "data-type": this.name },
+        this.options.HTMLAttributes,
+        HTMLAttributes,
+      ),
+    ];
+  },
+
+  addCommands() {
+    return {
+      insertTransclusionReference:
+        (attributes) =>
+        ({ commands }) =>
+          commands.insertContent({
+            type: this.name,
+            attrs: attributes,
+          }),
+    };
+  },
+
+  addNodeView() {
+    if (!this.options.view) return null;
+    this.editor.isInitialized = true;
+    return ReactNodeViewRenderer(this.options.view);
+  },
+});

packages/editor-ext/src/lib/transclusion/transclusion-source.ts

@@ -0,0 +1,171 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+
+export interface TransclusionSourceOptions {
+  HTMLAttributes: Record<string, any>;
+  view: any;
+}
+
+export interface TransclusionSourceAttributes {
+  id?: string | null;
+  name?: string | null;
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    transclusionSource: {
+      insertTransclusionSource: (
+        attributes?: TransclusionSourceAttributes,
+      ) => ReturnType;
+      setTransclusionSourceName: (name: string | null) => ReturnType;
+      toggleTransclusionSource: () => ReturnType;
+      unsyncTransclusionSource: () => ReturnType;
+    };
+  }
+}
+
+export const TransclusionSource = Node.create<TransclusionSourceOptions>({
+  name: "transclusionSource",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      view: null,
+    };
+  },
+
+  group: "block",
+  content: "block+",
+  defining: true,
+  isolating: true,
+
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+        parseHTML: (el) => el.getAttribute("data-id"),
+        renderHTML: (attrs) =>
+          attrs.id ? { "data-id": attrs.id } : {},
+      },
+      name: {
+        default: null,
+        parseHTML: (el) => el.getAttribute("data-name"),
+        renderHTML: (attrs) =>
+          attrs.name ? { "data-name": attrs.name } : {},
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: `div[data-type="${this.name}"]` }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(
+        { "data-type": this.name },
+        this.options.HTMLAttributes,
+        HTMLAttributes,
+      ),
+      0,
+    ];
+  },
+
+  addCommands() {
+    return {
+      insertTransclusionSource:
+        (attributes) =>
+        ({ commands, state, chain }) => {
+          const { $from } = state.selection;
+          for (let depth = $from.depth; depth > 0; depth -= 1) {
+            if ($from.node(depth).type.name === this.name) return false;
+          }
+
+          const node = {
+            type: this.name,
+            attrs: attributes ?? {},
+            content: [{ type: "paragraph" }],
+          };
+
+          const parent = $from.parent;
+          const isEmptyParagraph =
+            parent.type.name === "paragraph" && parent.content.size === 0;
+
+          if (isEmptyParagraph) {
+            return chain()
+              .insertContentAt(
+                { from: $from.before(), to: $from.after() },
+                node,
+              )
+              .run();
+          }
+
+          return commands.insertContent(node);
+        },
+      setTransclusionSourceName:
+        (name) =>
+        ({ commands }) =>
+          commands.updateAttributes(this.name, { name }),
+      toggleTransclusionSource:
+        () =>
+        ({ commands }) =>
+          commands.toggleWrap(this.name),
+      unsyncTransclusionSource:
+        () =>
+        ({ state, tr, dispatch }) => {
+          const { $from } = state.selection;
+          // Walk up to the nearest source wrapper.
+          let depth = $from.depth;
+          while (depth > 0 && $from.node(depth).type.name !== this.name) {
+            depth -= 1;
+          }
+          if (depth === 0) return false;
+
+          const node = $from.node(depth);
+          const start = $from.before(depth);
+          const end = start + node.nodeSize;
+
+          if (dispatch) {
+            tr.replaceWith(start, end, node.content);
+            dispatch(tr);
+          }
+          return true;
+        },
+    };
+  },
+
+  addNodeView() {
+    if (!this.options.view) return null;
+    // Force the react node view to render immediately using flush sync
+    this.editor.isInitialized = true;
+    return ReactNodeViewRenderer(this.options.view);
+  },
+
+  addProseMirrorPlugins() {
+    const typeName = this.name;
+    return [
+      new Plugin({
+        key: new PluginKey(`${typeName}-noNesting`),
+        filterTransaction: (tr) => {
+          if (!tr.docChanged) return true;
+          let nested = false;
+          tr.doc.descendants((node, pos) => {
+            if (nested) return false;
+            if (node.type.name !== typeName) return true;
+            const $pos = tr.doc.resolve(pos);
+            for (let depth = $pos.depth; depth > 0; depth -= 1) {
+              if ($pos.node(depth).type.name === typeName) {
+                nested = true;
+                return false;
+              }
+            }
+            return false;
+          });
+          return !nested;
+        },
+      }),
+    ];
+  },
+});