diff --git a/packages/core/src/editor/BlockNoteEditor.ts b/packages/core/src/editor/BlockNoteEditor.ts index 2fc754bbf..a0fd0a1d5 100644 --- a/packages/core/src/editor/BlockNoteEditor.ts +++ b/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); }; /** diff --git a/packages/core/src/editor/BlockNoteTipTapEditor.ts b/packages/core/src/editor/BlockNoteTipTapEditor.ts index 16dfcaead..fd936ef2d 100644 --- a/packages/core/src/editor/BlockNoteTipTapEditor.ts +++ b/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 @@ -149,7 +150,10 @@ 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, + contentComponent?: any + ) { (this as any).contentComponent = contentComponent; const markViews: any = {}; @@ -157,7 +161,8 @@ export class BlockNoteTipTapEditor extends TiptapEditor { 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, + element?: HTMLElement | null, + contentComponent?: any + ) => { if (!element) { this.destroy(); } else { this.options.element = element; - this.createViewAlternative(contentComponent); + this.createViewAlternative(blockNoteEditor, contentComponent); } }; } diff --git a/packages/react/src/schema/ReactStyleSpec.tsx b/packages/react/src/schema/ReactStyleSpec.tsx index 43c56a3ce..01595979e 100644 --- a/packages/react/src/schema/ReactStyleSpec.tsx +++ b/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( }, }); - 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) => (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,