fix: improve markview setup (#1544)

Author: YousefED

packages/core/src/editor/BlockNoteEditor.ts

@@ -688,7 +688,7 @@ export class BlockNoteEditor<
     parentElement?: HTMLElement | null,
     contentComponent?: any
   ) => {
-    this._tiptapEditor.mount(parentElement, contentComponent);
+    this._tiptapEditor.mount(this, parentElement, contentComponent);
   };
 
   /**

packages/core/src/editor/BlockNoteTipTapEditor.ts

@@ -10,6 +10,7 @@ import { EditorState, Transaction } from "@tiptap/pm/state";
 import { blockToNode } from "../api/nodeConversions/blockToNode.js";
 import { PartialBlock } from "../blocks/defaultBlocks.js";
 import { StyleSchema } from "../schema/index.js";
+import type { BlockNoteEditor } from "./BlockNoteEditor.js";
 
 export type BlockNoteTipTapEditorOptions = Partial<
   Omit<EditorOptions, "content">
@@ -149,15 +150,19 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
   /**
    * Replace the default `createView` method with a custom one - which we call on mount
    */
-  private createViewAlternative(contentComponent?: any) {
+  private createViewAlternative(
+    blockNoteEditor: BlockNoteEditor<any, any, any>,
+    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;
+        markViews[extension.name] =
+          extension.config.addMarkView(blockNoteEditor);
       }
     });
 
@@ -198,12 +203,16 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
    *
    * @param element DOM element to mount to, ur null / undefined to destroy
    */
-  public mount = (element?: HTMLElement | null, contentComponent?: any) => {
+  public mount = (
+    blockNoteEditor: BlockNoteEditor<any, any, any>,
+    element?: HTMLElement | null,
+    contentComponent?: any
+  ) => {
     if (!element) {
       this.destroy();
     } else {
       this.options.element = element;
-      this.createViewAlternative(contentComponent);
+      this.createViewAlternative(blockNoteEditor, contentComponent);
     }
   };
 }

packages/react/src/schema/ReactStyleSpec.tsx

@@ -1,9 +1,10 @@
 import {
+  StyleConfig,
   addStyleAttributes,
   createInternalStyleSpec,
   getStyleParseRules,
-  StyleConfig,
   stylePropsToAttributes,
+  type BlockNoteEditor,
 } from "@blocknote/core";
 import { Mark } from "@tiptap/react";
 import { FC } from "react";
@@ -59,25 +60,24 @@ 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;
-  };
+  mark.config.addMarkView =
+    (editor: BlockNoteEditor<any, any, any>) => (mark: any, view: any) => {
+      const markView = new ReactMarkView({
+        editor,
+        inline: true,
+        mark,
+        options: {
+          component: styleImplementation.render,
+          contentAs: "span",
+        },
+        view,
+      });
+      markView.render();
+      return markView;
+    };
 
   return createInternalStyleSpec(styleConfig, {
     mark,