refactor: support markviews (#1437)

* support markviews

* clean

* fix

* tmp

* fix case

Author: YousefED

packages/core/src/editor/BlockNoteExtensions.ts

@@ -174,7 +174,9 @@ const getTipTapExtensions = <
       protocols: VALID_LINK_PROTOCOLS,
     }),
     ...Object.values(opts.styleSpecs).map((styleSpec) => {
-      return styleSpec.implementation.mark;
+      return styleSpec.implementation.mark.configure({
+        editor: opts.editor as any,
+      });
     }),
 
     TextColorExtension,

packages/core/src/editor/BlockNoteTipTapEditor.ts

@@ -152,13 +152,23 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
   private createViewAlternative(contentComponent?: any) {
     (this as any).contentComponent = contentComponent;
 
+    const markViews: any = {};
+    this.extensionManager.extensions.forEach((extension) => {
+      if (extension.type === "mark" && extension.config.addMarkView) {
+        // Note: migrate to using `addMarkView` from tiptap as soon as this lands
+        // (currently tiptap doesn't support markviews)
+        markViews[extension.name] = extension.config.addMarkView;
+      }
+    });
+
     this.view = new EditorView(
       { mount: this.options.element as any }, // use mount option so that we reuse the existing element instead of creating a new one
       {
         ...this.options.editorProps,
         // @ts-ignore
         dispatchTransaction: this.dispatchTransaction.bind(this),
         state: this.state,
+        markViews,
       }
     );
 

packages/react/src/schema/@util/ReactRenderUtil.ts

@@ -19,12 +19,17 @@ export function renderToDOMSpec(
       div
     );
   } else {
-    // If no editor is provided, use a temporary root. This is currently only used for Styles (see ReactStyleSpec).
-    // In this case, react context etc. won't be available inside `fc`
-
-    // We also use this if _tiptapEditor or _tiptapEditor.contentComponent is undefined, use a temporary root.
-    // This is actually a fallback / temporary fix, as normally this shouldn't happen (see #755). TODO: find cause
+    // If no editor is provided, use a temporary root.
+    // This is currently only used for when we use ServerBlockNoteEditor (@blocknote/server-util)
+    // and without using `withReactContext`
+
+    if (!editor?.headless) {
+      throw new Error(
+        "elementRenderer not available, expected headless editor"
+      );
+    }
     root = createRoot(div);
+
     flushSync(() => {
       root!.render(fc((el) => (contentDOM = el || undefined)));
     });

packages/react/src/schema/ReactStyleSpec.tsx

@@ -8,6 +8,7 @@ import {
 import { Mark } from "@tiptap/react";
 import { FC } from "react";
 import { renderToDOMSpec } from "./@util/ReactRenderUtil.js";
+import { ReactMarkView } from "./markviews/ReactMarkViewRenderer.js";
 
 // this file is mostly analogoues to `customBlocks.ts`, but for React blocks
 
@@ -43,9 +44,10 @@ export function createReactStyleSpec<T extends StyleConfig>(
       }
 
       const Content = styleImplementation.render;
+
       const renderResult = renderToDOMSpec(
         (refCB) => <Content {...props} contentRef={refCB} />,
-        undefined
+        this.options.editor
       );
 
       return addStyleAttributes(
@@ -57,6 +59,26 @@ export function createReactStyleSpec<T extends StyleConfig>(
     },
   });
 
+  const markType = mark;
+
+  // this is a bit of a hack to register an `addMarkView` function on the mark type
+  //
+  // we can clean this once MarkViews land in tiptap
+  (markType as any).config.addMarkView = (mark: any, view: any) => {
+    const markView = new ReactMarkView({
+      editor: markType.child?.options.editor,
+      inline: true,
+      mark,
+      options: {
+        component: styleImplementation.render,
+        contentAs: "span",
+      },
+      view,
+    });
+    markView.render();
+    return markView;
+  };
+
   return createInternalStyleSpec(styleConfig, {
     mark,
   });

packages/react/src/schema/markviews/CoreMarkView.ts

@@ -0,0 +1,108 @@
+import type { Mark } from "prosemirror-model";
+import type {
+  EditorView,
+  MarkView,
+  ViewMutationRecord,
+} from "prosemirror-view";
+
+import type { BlockNoteEditor } from "@blocknote/core";
+import type {
+  CoreMarkViewSpec,
+  CoreMarkViewUserOptions,
+  MarkViewDOMSpec,
+} from "./CoreMarkViewOptions.js";
+
+/* eslint-disable curly */
+
+export class CoreMarkView<ComponentType> implements MarkView {
+  dom: HTMLElement;
+  contentDOM: HTMLElement | undefined;
+  mark: Mark;
+  view: EditorView;
+  inline: boolean;
+  options: CoreMarkViewUserOptions<ComponentType>;
+  editor: BlockNoteEditor<any, any, any>;
+
+  #createElement(as?: MarkViewDOMSpec) {
+    const { inline, mark } = this;
+    return as == null
+      ? document.createElement(inline ? "span" : "div")
+      : as instanceof HTMLElement
+      ? as
+      : as instanceof Function
+      ? as(mark)
+      : document.createElement(as);
+  }
+
+  createDOM(as?: MarkViewDOMSpec) {
+    return this.#createElement(as);
+  }
+
+  createContentDOM(as?: MarkViewDOMSpec) {
+    return this.#createElement(as);
+  }
+
+  constructor({
+    mark,
+    view,
+    inline,
+    options,
+    editor, // BlockNote specific
+  }: CoreMarkViewSpec<ComponentType>) {
+    this.mark = mark;
+    this.view = view;
+    this.inline = inline;
+    this.options = options;
+    this.editor = editor;
+
+    this.dom = this.createDOM(options.as);
+    this.contentDOM = options.contentAs
+      ? this.createContentDOM(options.contentAs)
+      : undefined;
+    this.dom.setAttribute("data-mark-view-root", "true");
+    if (this.contentDOM) {
+      this.contentDOM.setAttribute("data-mark-view-content", "true");
+      this.contentDOM.style.whiteSpace = "inherit";
+    }
+  }
+
+  get component() {
+    return this.options.component;
+  }
+
+  shouldIgnoreMutation: (mutation: ViewMutationRecord) => boolean = (
+    mutation
+  ) => {
+    if (!this.dom || !this.contentDOM) return true;
+
+    if (mutation.type === "selection") return false;
+
+    if (this.contentDOM === mutation.target && mutation.type === "attributes")
+      return true;
+
+    if (this.contentDOM.contains(mutation.target)) return false;
+
+    return true;
+  };
+
+  ignoreMutation: (mutation: ViewMutationRecord) => boolean = (mutation) => {
+    if (!this.dom || !this.contentDOM) return true;
+
+    let result;
+
+    const userIgnoreMutation = this.options.ignoreMutation;
+
+    if (userIgnoreMutation) result = userIgnoreMutation(mutation);
+
+    if (typeof result !== "boolean")
+      result = this.shouldIgnoreMutation(mutation);
+
+    return result;
+  };
+
+  public destroy() {
+    this.options.destroy?.();
+    this.dom.remove();
+    this.contentDOM?.remove();
+  }
+}

packages/react/src/schema/markviews/CoreMarkViewOptions.ts

@@ -0,0 +1,32 @@
+import { BlockNoteEditor } from "@blocknote/core";
+import type { Mark } from "prosemirror-model";
+import type { EditorView, ViewMutationRecord } from "prosemirror-view";
+
+export type MarkViewDOMSpec =
+  | string
+  | HTMLElement
+  | ((mark: Mark) => HTMLElement);
+
+export interface CoreMarkViewUserOptions<Component> {
+  // DOM
+  as?: MarkViewDOMSpec;
+  contentAs?: MarkViewDOMSpec;
+
+  // Component
+  component: Component;
+
+  // Overrides
+  ignoreMutation?: (mutation: ViewMutationRecord) => boolean | void;
+  destroy?: () => void;
+}
+
+export interface CoreMarkViewSpec<Component> {
+  mark: Mark;
+  view: EditorView;
+  inline: boolean;
+
+  options: CoreMarkViewUserOptions<Component>;
+
+  // BlockNote specific
+  editor: BlockNoteEditor<any, any, any>;
+}

packages/react/src/schema/markviews/README.md

@@ -0,0 +1 @@
+The implementation of MarkViews in this directory is based on `prosemirror-adapter`. We might want to migrate to the Tiptap implementation of MarkViews once this lands in Tiptap v3.

packages/react/src/schema/markviews/ReactMarkViewOptions.ts

@@ -0,0 +1,16 @@
+import type { FC } from "react";
+import type {
+  CoreMarkViewSpec,
+  CoreMarkViewUserOptions,
+} from "./CoreMarkViewOptions.js";
+
+// export type ReactMarkViewComponent = ComponentType<Record<string, never>>;
+
+export type ReactMarkViewComponent =
+  | FC<{ contentRef: (el: HTMLElement | null) => void }>
+  | FC<{ contentRef: (el: HTMLElement | null) => void; value: string }>;
+
+export type ReactMarkViewSpec = CoreMarkViewSpec<ReactMarkViewComponent>;
+
+export type ReactMarkViewUserOptions =
+  CoreMarkViewUserOptions<ReactMarkViewComponent>;

packages/react/src/schema/markviews/ReactMarkViewRenderer.tsx

@@ -0,0 +1,70 @@
+import { CoreMarkView } from "./CoreMarkView.js";
+import type { MarkViewContext } from "./markViewContext.js";
+import type { ReactMarkViewComponent } from "./ReactMarkViewOptions.js";
+
+/* eslint-disable curly */
+
+export class ReactMarkView extends CoreMarkView<ReactMarkViewComponent> {
+  // implements ReactRenderer<MarkViewContext>
+  // key: string = nanoid();
+  id = Math.floor(Math.random() * 0xffffffff).toString();
+
+  context: MarkViewContext = {
+    contentRef: (element) => {
+      if (element && this.contentDOM && element.firstChild !== this.contentDOM)
+        element.appendChild(this.contentDOM);
+    },
+    view: this.view,
+
+    mark: this.mark,
+  };
+
+  updateContext = () => {
+    Object.assign(this.context, {
+      mark: this.mark,
+    });
+  };
+
+  // render = () => {
+  //   const UserComponent = this.component;
+
+  //   return createPortal(
+  //     <markViewContext.Provider value={this.context}>
+  //       <UserComponent />
+  //     </markViewContext.Provider>,
+  //     this.dom,
+  //     this.key
+  //   );
+  // };
+
+  render = () => {
+    this.editor._tiptapEditor.contentComponent.setRenderer(
+      this.id,
+      this.renderer()
+    );
+  };
+
+  destroy = () => {
+    super.destroy();
+    this.editor._tiptapEditor.contentComponent.removeRenderer(this.id);
+  };
+
+  renderer = () => {
+    const UserComponent = this.component;
+
+    const props: any = {};
+
+    if (this.mark.attrs.stringValue) {
+      props.value = this.mark.attrs.stringValue;
+    }
+
+    return {
+      reactElement: (
+        // <markViewContext.Provider value={this.context}>
+        <UserComponent contentRef={this.context.contentRef} {...props} />
+        // </markViewContext.Provider>
+      ),
+      element: this.dom,
+    };
+  };
+}

packages/react/src/schema/markviews/markViewContext.ts

@@ -0,0 +1,33 @@
+import type { Mark } from "prosemirror-model";
+import type { EditorView, MarkViewConstructor } from "prosemirror-view";
+import { createContext, useContext } from "react";
+import type { ReactMarkViewUserOptions } from "./ReactMarkViewOptions.js";
+
+export type MarkViewContentRef = (node: HTMLElement | null) => void;
+
+export interface MarkViewContext {
+  // won't change
+  contentRef: MarkViewContentRef;
+  view: EditorView;
+  mark: Mark;
+}
+
+export const markViewContext = createContext<MarkViewContext>({
+  contentRef: () => {
+    // nothing to do
+  },
+  view: null as never,
+  mark: null as never,
+});
+
+export const useMarkViewContext = () => useContext(markViewContext);
+
+export const createMarkViewContext = createContext<
+  (options: ReactMarkViewUserOptions) => MarkViewConstructor
+>((_options) => {
+  throw new Error(
+    "No ProsemirrorAdapterProvider detected, maybe you need to wrap the component with the Editor with ProsemirrorAdapterProvider?"
+  );
+});
+
+export const useMarkViewFactory = () => useContext(createMarkViewContext);