@blocknote/core 0.30.0 → 0.31.0

package/src/editor/BlockNoteExtensions.ts

@@ -9,13 +9,13 @@ import * as Y from "yjs";
 import { createDropFileExtension } from "../api/clipboard/fromClipboard/fileDropExtension.js";
 import { createPasteFromClipboardExtension } from "../api/clipboard/fromClipboard/pasteExtension.js";
 import { createCopyToClipboardExtension } from "../api/clipboard/toClipboard/copyExtension.js";
+import type { ThreadStore } from "../comments/index.js";
 import { BackgroundColorExtension } from "../extensions/BackgroundColor/BackgroundColorExtension.js";
 import { CursorPlugin } from "../extensions/Collaboration/CursorPlugin.js";
-import { UndoPlugin } from "../extensions/Collaboration/UndoPlugin.js";
 import { SyncPlugin } from "../extensions/Collaboration/SyncPlugin.js";
+import { UndoPlugin } from "../extensions/Collaboration/UndoPlugin.js";
 import { CommentMark } from "../extensions/Comments/CommentMark.js";
 import { CommentsPlugin } from "../extensions/Comments/CommentsPlugin.js";
-import type { ThreadStore } from "../comments/index.js";
 import { FilePanelProsemirrorPlugin } from "../extensions/FilePanel/FilePanelPlugin.js";
 import { FormattingToolbarProsemirrorPlugin } from "../extensions/FormattingToolbar/FormattingToolbarPlugin.js";
 import { HardBreak } from "../extensions/HardBreak/HardBreak.js";
@@ -31,6 +31,11 @@ import { PreviousBlockTypePlugin } from "../extensions/PreviousBlockType/Previou
 import { ShowSelectionPlugin } from "../extensions/ShowSelection/ShowSelectionPlugin.js";
 import { SideMenuProsemirrorPlugin } from "../extensions/SideMenu/SideMenuPlugin.js";
 import { SuggestionMenuProseMirrorPlugin } from "../extensions/SuggestionMenu/SuggestionPlugin.js";
+import {
+  SuggestionAddMark,
+  SuggestionDeleteMark,
+  SuggestionModificationMark,
+} from "../extensions/Suggestions/SuggestionMarks.js";
 import { TableHandlesProsemirrorPlugin } from "../extensions/TableHandles/TableHandlesPlugin.js";
 import { TextAlignmentExtension } from "../extensions/TextAlignment/TextAlignmentExtension.js";
 import { TextColorExtension } from "../extensions/TextColor/TextColorExtension.js";
@@ -49,13 +54,14 @@ import {
 import type {
   BlockNoteEditor,
   BlockNoteEditorOptions,
-  BlockNoteExtension,
+  SupportedExtension,
 } from "./BlockNoteEditor.js";
+import { ForkYDocPlugin } from "../extensions/Collaboration/ForkYDocPlugin.js";
 
 type ExtensionOptions<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 > = {
   editor: BlockNoteEditor<BSchema, I, S>;
   domAttributes: Partial<BlockNoteDOMAttributes>;
@@ -97,11 +103,11 @@ type ExtensionOptions<
 export const getBlockNoteExtensions = <
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
-  opts: ExtensionOptions<BSchema, I, S>
+  opts: ExtensionOptions<BSchema, I, S>,
 ) => {
-  const ret: Record<string, BlockNoteExtension> = {};
+  const ret: Record<string, SupportedExtension> = {};
   const tiptapExtensions = getTipTapExtensions(opts);
 
   for (const ext of tiptapExtensions) {
@@ -115,17 +121,21 @@ export const getBlockNoteExtensions = <
     if (opts.collaboration.provider?.awareness) {
       ret["yCursorPlugin"] = new CursorPlugin(opts.collaboration);
     }
+    ret["forkYDocPlugin"] = new ForkYDocPlugin({
+      editor: opts.editor,
+      collaboration: opts.collaboration,
+    });
   }
 
   // Note: this is pretty hardcoded and will break when user provides plugins with same keys.
   // Define name on plugins instead and not make this a map?
   ret["formattingToolbar"] = new FormattingToolbarProsemirrorPlugin(
-    opts.editor
+    opts.editor,
   );
   ret["linkToolbar"] = new LinkToolbarProsemirrorPlugin(opts.editor);
   ret["sideMenu"] = new SideMenuProsemirrorPlugin(
     opts.editor,
-    opts.sideMenuDetection
+    opts.sideMenuDetection,
   );
   ret["suggestionMenus"] = new SuggestionMenuProseMirrorPlugin(opts.editor);
   ret["filePanel"] = new FilePanelProsemirrorPlugin(opts.editor as any);
@@ -139,14 +149,6 @@ export const getBlockNoteExtensions = <
     ret["tableHandles"] = new TableHandlesProsemirrorPlugin(opts.editor as any);
   }
 
-  ret["dropCursor"] = {
-    plugin: opts.dropCursor({
-      width: 5,
-      color: "#ddeeff",
-      editor: opts.editor,
-    }),
-  };
-
   ret["nodeSelectionKeyboard"] = new NodeSelectionKeyboardPlugin();
 
   ret["showSelection"] = new ShowSelectionPlugin(opts.editor);
@@ -155,7 +157,7 @@ export const getBlockNoteExtensions = <
     ret["comments"] = new CommentsPlugin(
       opts.editor,
       opts.comments.threadStore,
-      CommentMark.name
+      CommentMark.name,
     );
   }
 
@@ -175,9 +177,9 @@ let LINKIFY_INITIALIZED = false;
 const getTipTapExtensions = <
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
-  opts: ExtensionOptions<BSchema, I, S>
+  opts: ExtensionOptions<BSchema, I, S>,
 ) => {
   const tiptapExtensions: AnyExtension[] = [
     extensions.ClipboardTextSerializer,
@@ -190,6 +192,17 @@ const getTipTapExtensions = <
     Gapcursor,
 
     // DropCursor,
+    Extension.create({
+      name: "dropCursor",
+      addProseMirrorPlugins: () => [
+        opts.dropCursor({
+          width: 5,
+          color: "#ddeeff",
+          editor: opts.editor,
+        }),
+      ],
+    }),
+
     UniqueID.configure({
       // everything from bnBlock group (nodes that represent a BlockNote block should have an id)
       types: ["blockContainer", "columnList", "column"],
@@ -202,6 +215,9 @@ const getTipTapExtensions = <
     Text,
 
     // marks:
+    SuggestionAddMark,
+    SuggestionDeleteMark,
+    SuggestionModificationMark,
     Link.extend({
       inclusive: false,
     }).configure({
@@ -264,7 +280,7 @@ const getTipTapExtensions = <
           ext.configure({
             editor: opts.editor,
             domAttributes: opts.domAttributes,
-          })
+          }),
         ),
         // the actual node itself
         blockSpec.implementation.node.configure({
@@ -282,7 +298,7 @@ const getTipTapExtensions = <
             prioritizeMarkdownOverHTML?: boolean;
             plainTextAsMarkdown?: boolean;
           }) => boolean | undefined;
-        }) => context.defaultPasteHandler())
+        }) => context.defaultPasteHandler()),
     ),
     createDropFileExtension(opts.editor),
 

package/src/editor/BlockNoteSchema.ts

@@ -28,14 +28,14 @@ function removeUndefined<T extends Record<string, any> | undefined>(obj: T): T {
     return obj;
   }
   return Object.fromEntries(
-    Object.entries(obj).filter(([, value]) => value !== undefined)
+    Object.entries(obj).filter(([, value]) => value !== undefined),
   ) as T;
 }
 
 export class BlockNoteSchema<
   BSchema extends BlockSchema,
   ISchema extends InlineContentSchema,
-  SSchema extends StyleSchema
+  SSchema extends StyleSchema,
 > {
   public readonly blockSpecs: BlockSpecs;
   public readonly inlineContentSpecs: InlineContentSpecs;
@@ -61,7 +61,7 @@ export class BlockNoteSchema<
   public static create<
     BSpecs extends BlockSpecs = typeof defaultBlockSpecs,
     ISpecs extends InlineContentSpecs = typeof defaultInlineContentSpecs,
-    SSpecs extends StyleSpecs = typeof defaultStyleSpecs
+    SSpecs extends StyleSpecs = typeof defaultStyleSpecs,
   >(options?: {
     /**
      * A list of custom block types that should be available in the editor.
@@ -100,7 +100,7 @@ export class BlockNoteSchema<
 
     this.blockSchema = getBlockSchemaFromSpecs(this.blockSpecs) as any;
     this.inlineContentSchema = getInlineContentSchemaFromSpecs(
-      this.inlineContentSpecs
+      this.inlineContentSpecs,
     ) as any;
     this.styleSchema = getStyleSchemaFromSpecs(this.styleSpecs) as any;
   }

package/src/editor/BlockNoteTipTapEditor.ts

@@ -1,5 +1,9 @@
-import { Editor, EditorOptions, createDocument } from "@tiptap/core";
-import { Editor as TiptapEditor } from "@tiptap/core";
+import {
+  Editor,
+  EditorOptions,
+  Editor as TiptapEditor,
+  createDocument,
+} from "@tiptap/core";
 
 import { Node } from "@tiptap/pm/model";
 
@@ -26,7 +30,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
 
   public static create = (
     options: BlockNoteTipTapEditorOptions,
-    styleSchema: StyleSchema
+    styleSchema: StyleSchema,
   ) => {
     // because we separate the constructor from the creation of the view,
     // we need to patch setTimeout to prevent this code from having any effect:
@@ -48,7 +52,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
 
   protected constructor(
     options: BlockNoteTipTapEditorOptions,
-    styleSchema: StyleSchema
+    styleSchema: StyleSchema,
   ) {
     // possible fix for next.js server side rendering
     // const d = globalThis.document;
@@ -93,7 +97,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
 
     try {
       const pmNodes = options?.content.map((b) =>
-        blockToNode(b, this.schema, styleSchema).toJSON()
+        blockToNode(b, this.schema, styleSchema).toJSON(),
       );
       doc = createDocument(
         {
@@ -106,17 +110,17 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
           ],
         },
         this.schema,
-        this.options.parseOptions
+        this.options.parseOptions,
       );
     } catch (e) {
       // eslint-disable-next-line no-console
       console.error(
         "Error creating document from blocks passed as `initialContent`. Caused by exception: ",
-        e
+        e,
       );
       throw new Error(
         "Error creating document from blocks passed as `initialContent`:\n" +
-          +JSON.stringify(options.content)
+          +JSON.stringify(options.content),
       );
     }
 
@@ -141,6 +145,10 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
     if (!this.view) {
       // before view has been initialized
       this._state = this.state.apply(transaction);
+      this.emit("transaction", {
+        editor: this,
+        transaction,
+      });
       return;
     }
     // This is a verbatim copy of the default dispatch method, but with the following changes:
@@ -216,12 +224,25 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
     });
   }
 
+  // a helper method that can enable plugins before the view has been initialized
+  // currently only used for testing
+  forceEnablePlugins() {
+    if (this.view) {
+      throw new Error(
+        "forcePluginsEnabled called after view has been initialized",
+      );
+    }
+    this._state = this.state.reconfigure({
+      plugins: this.extensionManager.plugins,
+    });
+  }
+
   /**
    * Replace the default `createView` method with a custom one - which we call on mount
    */
   private createViewAlternative(
     blockNoteEditor: BlockNoteEditor<any, any, any>,
-    contentComponent?: any
+    contentComponent?: any,
   ) {
     (this as any).contentComponent = contentComponent;
 
@@ -244,7 +265,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
         state: this.state,
         markViews,
         nodeViews: this.extensionManager.nodeViews,
-      }
+      },
     );
 
     // `editor.view` is not yet available at this time.
@@ -263,7 +284,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
     this.commands.focus(
       this.options.autofocus ||
         this.options.element.getAttribute("data-bn-autofocus") === "true",
-      { scrollIntoView: false }
+      { scrollIntoView: false },
     );
     this.emit("create", { editor: this });
     this.isInitialized = true;
@@ -277,7 +298,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
   public mount = (
     blockNoteEditor: BlockNoteEditor<any, any, any>,
     element?: HTMLElement | null,
-    contentComponent?: any
+    contentComponent?: any,
   ) => {
     if (!element) {
       this.destroy();

package/src/editor/README.md

@@ -1,3 +1,3 @@
 ### @blocknote/core/src/editor
 
-Contains main functions to set up the editor
+Contains main functions to set up the editor

package/src/editor/cursorPositionTypes.ts

@@ -8,7 +8,7 @@ import {
 export type TextCursorPosition<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 > = {
   block: Block<BSchema, I, S>;
   prevBlock: Block<BSchema, I, S> | undefined;

package/src/editor/editor.css

@@ -55,9 +55,21 @@ Tippy popups that are appended to document.body directly
 .bn-default-styles {
   font-size: 16px;
   font-weight: normal;
-  font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
-    "Open Sans", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
-    "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family:
+    "Inter",
+    "SF Pro Display",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Open Sans",
+    "Segoe UI",
+    "Roboto",
+    "Oxygen",
+    "Ubuntu",
+    "Cantarell",
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
+    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

package/src/editor/selectionTypes.ts

@@ -8,7 +8,7 @@ import {
 export type Selection<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 > = {
   blocks: Block<BSchema, I, S>[];
 };

package/src/editor/transformPasted.ts

@@ -36,7 +36,7 @@ export function wrapTableRows(f: Fragment, schema: Schema) {
         // create new table to wrap tableRow with
         const newTable = schema.nodes.table.createChecked(
           undefined,
-          f.child(i)
+          f.child(i),
         );
         newItems.push(newTable);
       }
@@ -96,7 +96,7 @@ export function transformPasted(slice: Slice, view: EditorView) {
       }
       const container = view.state.schema.nodes.blockContainer.createChecked(
         undefined,
-        content
+        content,
       );
       f = f.replaceChild(i, container);
     }

package/src/exporter/Exporter.ts

@@ -42,7 +42,7 @@ export abstract class Exporter<
   RB,
   RI,
   RS,
-  TS
+  TS,
 > {
   public constructor(
     _schema: BlockNoteSchema<B, I, S>, // only used for type inference
@@ -51,7 +51,7 @@ export abstract class Exporter<
       inlineContentMapping: InlineContentMapping<I, S, RI, TS>;
       styleMapping: StyleMapping<S, RS>;
     },
-    public readonly options: ExporterOptions
+    public readonly options: ExporterOptions,
   ) {}
 
   public async resolveFile(url: string) {
@@ -76,7 +76,7 @@ export abstract class Exporter<
   public mapInlineContent(inlineContent: InlineContent<I, S>) {
     return this.mappings.inlineContentMapping[inlineContent.type](
       inlineContent,
-      this
+      this,
     );
   }
 
@@ -89,13 +89,13 @@ export abstract class Exporter<
   public async mapBlock(
     block: BlockFromConfig<B[keyof B], I, S>,
     nestingLevel: number,
-    numberedListIndex: number
+    numberedListIndex: number,
   ) {
     return this.mappings.blockMapping[block.type](
       block,
       this,
       nestingLevel,
-      numberedListIndex
+      numberedListIndex,
     );
   }
 }

package/src/exporter/mapping.ts

@@ -17,7 +17,7 @@ export type BlockMapping<
   I extends InlineContentSchema,
   S extends StyleSchema,
   RB,
-  RI
+  RI,
 > = {
   [K in keyof B]: (
     block: BlockFromConfigNoChildren<B[K], I, S>,
@@ -26,7 +26,7 @@ export type BlockMapping<
     // this is why there are many `any` types here (same for types below)
     exporter: Exporter<any, any, any, RB, RI, any, any>,
     nestingLevel: number,
-    numberedListIndex?: number
+    numberedListIndex?: number,
   ) => RB | Promise<RB>;
 };
 
@@ -37,11 +37,11 @@ export type InlineContentMapping<
   I extends InlineContentSchema,
   S extends StyleSchema,
   RI,
-  TS
+  TS,
 > = {
   [K in keyof I]: (
     inlineContent: InlineContentFromConfig<I[K], S>,
-    exporter: Exporter<any, I, S, any, RI, any, TS>
+    exporter: Exporter<any, I, S, any, RI, any, TS>,
   ) => RI;
 };
 
@@ -51,7 +51,7 @@ export type InlineContentMapping<
 export type StyleMapping<S extends StyleSchema, RS> = {
   [K in keyof S]: (
     style: Styles<S>[K],
-    exporter: Exporter<any, any, any, any, any, RS, any>
+    exporter: Exporter<any, any, any, any, any, RS, any>,
   ) => RS;
 };
 
@@ -62,13 +62,13 @@ export type StyleMapping<S extends StyleSchema, RS> = {
 export function mappingFactory<
   B extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(_schema: BlockNoteSchema<B, I, S>) {
   return {
     createBlockMapping: <R, RI>(mapping: BlockMapping<B, I, S, R, RI>) =>
       mapping,
     createInlineContentMapping: <R, RS>(
-      mapping: InlineContentMapping<I, S, R, RS>
+      mapping: InlineContentMapping<I, S, R, RS>,
     ) => mapping,
     createStyleMapping: <R>(mapping: StyleMapping<S, R>) => mapping,
   };

package/src/extensions/BackgroundColor/BackgroundColorMark.ts

@@ -44,5 +44,5 @@ const BackgroundColorMark = Mark.create({
 
 export const BackgroundColor = createStyleSpecFromTipTapMark(
   BackgroundColorMark,
-  "string"
+  "string",
 );

package/src/extensions/Collaboration/CursorPlugin.ts

@@ -1,7 +1,7 @@
-import { Plugin } from "prosemirror-state";
 import { defaultSelectionBuilder, yCursorPlugin } from "y-prosemirror";
 import { Awareness } from "y-protocols/awareness.js";
 import * as Y from "yjs";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 
 export type CollaborationUser = {
   name: string;
@@ -9,8 +9,11 @@ export type CollaborationUser = {
   [key: string]: string;
 };
 
-export class CursorPlugin {
-  public plugin: Plugin;
+export class CursorPlugin extends BlockNoteExtension {
+  public static name() {
+    return "yCursorPlugin";
+  }
+
   private provider: { awareness: Awareness };
   private recentlyUpdatedCursors: Map<
     number,
@@ -23,8 +26,9 @@ export class CursorPlugin {
       provider: { awareness: Awareness };
       renderCursor?: (user: CollaborationUser) => HTMLElement;
       showCursorLabels?: "always" | "activity";
-    }
+    },
   ) {
+    super();
     this.provider = collaboration.provider;
     this.recentlyUpdatedCursors = new Map();
 
@@ -58,14 +62,16 @@ export class CursorPlugin {
               });
             }
           }
-        }
+        },
       );
     }
 
-    this.plugin = yCursorPlugin(this.provider.awareness, {
-      selectionBuilder: defaultSelectionBuilder,
-      cursorBuilder: this.renderCursor,
-    });
+    this.addProsemirrorPlugin(
+      yCursorPlugin(this.provider.awareness, {
+        selectionBuilder: defaultSelectionBuilder,
+        cursorBuilder: this.renderCursor,
+      }),
+    );
   }
 
   public get priority() {