@blocknote/core 0.27.2 → 0.29.0

package/src/editor/BlockNoteTipTapEditor.ts

@@ -1,5 +1,4 @@
-import { EditorOptions, createDocument } from "@tiptap/core";
-// import "./blocknote.css";
+import { Editor, EditorOptions, createDocument } from "@tiptap/core";
 import { Editor as TiptapEditor } from "@tiptap/core";
 
 import { Node } from "@tiptap/pm/model";
@@ -138,13 +137,83 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
     return this._state;
   }
 
-  dispatch(tr: Transaction) {
-    if (this.view) {
-      this.view.dispatch(tr);
-    } else {
+  dispatch(transaction: Transaction) {
+    if (!this.view) {
       // before view has been initialized
-      this._state = this.state.apply(tr);
+      this._state = this.state.apply(transaction);
+      return;
+    }
+    // This is a verbatim copy of the default dispatch method, but with the following changes:
+    // - We provide the appendedTransactions to a new `v3-update` event
+    // In the future, we can remove this dispatch method entirely and rely on the new `update` event signature which does what we want by providing the appendedTransactions
+    ////////////////////////////////////////////////////////////////////////////////
+    // if the editor / the view of the editor was destroyed
+    // the transaction should not be dispatched as there is no view anymore.
+    if (this.view.isDestroyed) {
+      return;
+    }
+
+    if (this.isCapturingTransaction) {
+      // Do the default capture behavior
+      (this as any).dispatchTransaction(transaction);
+
+      return;
+    }
+
+    const { state, transactions: appendedTransactions } =
+      this.state.applyTransaction(transaction);
+    const selectionHasChanged = !this.state.selection.eq(state.selection);
+
+    this.emit("beforeTransaction", {
+      editor: this,
+      transaction,
+      nextState: state,
+    });
+    this.view.updateState(state);
+    this.emit("transaction", {
+      editor: this,
+      transaction,
+    });
+
+    if (selectionHasChanged) {
+      this.emit("selectionUpdate", {
+        editor: this,
+        transaction,
+      });
+    }
+
+    const focus = transaction.getMeta("focus");
+    const blur = transaction.getMeta("blur");
+
+    if (focus) {
+      this.emit("focus", {
+        editor: this,
+        event: focus.event,
+        transaction,
+      });
+    }
+
+    if (blur) {
+      this.emit("blur", {
+        editor: this,
+        event: blur.event,
+        transaction,
+      });
     }
+
+    if (!transaction.docChanged || transaction.getMeta("preventUpdate")) {
+      return;
+    }
+
+    this.emit("update", {
+      editor: this,
+      transaction,
+    });
+    this.emit("v3-update", {
+      editor: this,
+      transaction,
+      appendedTransactions: appendedTransactions.slice(1),
+    });
   }
 
   /**
@@ -171,7 +240,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
       {
         ...this.options.editorProps,
         // @ts-ignore
-        dispatchTransaction: this.dispatchTransaction.bind(this),
+        dispatchTransaction: this.dispatch.bind(this),
         state: this.state,
         markViews,
         nodeViews: this.extensionManager.nodeViews,
@@ -228,3 +297,17 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
   // (note: can probably be removed after tiptap upgrade fixed in 2.8.0)
   this.options.onPaste = this.options.onDrop = undefined;
 };
+
+declare module "@tiptap/core" {
+  interface EditorEvents {
+    /**
+     * This is a custom event that will be emitted in Tiptap V3.
+     * We use it to provide the appendedTransactions, until Tiptap V3 is released.
+     */
+    "v3-update": {
+      editor: Editor;
+      transaction: Transaction;
+      appendedTransactions: Transaction[];
+    };
+  }
+}

package/src/extensions/Comments/CommentsPlugin.ts

@@ -89,41 +89,39 @@ export class CommentsPlugin extends EventEmitter<any> {
    * when a thread is resolved or deleted, we need to update the marks to reflect the new state
    */
   private updateMarksFromThreads = (threads: Map<string, ThreadData>) => {
-    const ttEditor = this.editor._tiptapEditor;
-
-    ttEditor.state.doc.descendants((node, pos) => {
-      node.marks.forEach((mark) => {
-        if (mark.type.name === this.markType) {
-          const markType = mark.type;
-          const markThreadId = mark.attrs.threadId;
-          const thread = threads.get(markThreadId);
-          const isOrphan = !!(!thread || thread.resolved || thread.deletedAt);
-
-          if (isOrphan !== mark.attrs.orphan) {
-            const { tr } = ttEditor.state;
-            const trimmedFrom = Math.max(pos, 0);
-            const trimmedTo = Math.min(
-              pos + node.nodeSize,
-              ttEditor.state.doc.content.size - 1
-            );
-            tr.removeMark(trimmedFrom, trimmedTo, mark);
-            tr.addMark(
-              trimmedFrom,
-              trimmedTo,
-              markType.create({
-                ...mark.attrs,
-                orphan: isOrphan,
-              })
-            );
-            ttEditor.dispatch(tr);
+    this.editor.transact((tr) => {
+      tr.doc.descendants((node, pos) => {
+        node.marks.forEach((mark) => {
+          if (mark.type.name === this.markType) {
+            const markType = mark.type;
+            const markThreadId = mark.attrs.threadId;
+            const thread = threads.get(markThreadId);
+            const isOrphan = !!(!thread || thread.resolved || thread.deletedAt);
+
+            if (isOrphan !== mark.attrs.orphan) {
+              const trimmedFrom = Math.max(pos, 0);
+              const trimmedTo = Math.min(
+                pos + node.nodeSize,
+                tr.doc.content.size - 1
+              );
+              tr.removeMark(trimmedFrom, trimmedTo, mark);
+              tr.addMark(
+                trimmedFrom,
+                trimmedTo,
+                markType.create({
+                  ...mark.attrs,
+                  orphan: isOrphan,
+                })
+              );
 
-            if (isOrphan && this.selectedThreadId === markThreadId) {
-              // unselect
-              this.selectedThreadId = undefined;
-              this.emitStateUpdate();
+              if (isOrphan && this.selectedThreadId === markThreadId) {
+                // unselect
+                this.selectedThreadId = undefined;
+                this.emitStateUpdate();
+              }
             }
           }
-        }
+        });
       });
     });
   };
@@ -262,8 +260,8 @@ export class CommentsPlugin extends EventEmitter<any> {
     }
     this.selectedThreadId = threadId;
     this.emitStateUpdate();
-    this.editor.dispatch(
-      this.editor.prosemirrorView!.state.tr.setMeta(PLUGIN_KEY, {
+    this.editor.transact((tr) =>
+      tr.setMeta(PLUGIN_KEY, {
         name: SET_SELECTED_THREAD_ID,
       })
     );

package/src/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts

@@ -45,14 +45,10 @@ export const KeyboardShortcutsExtension = Extension.create<{
 
             if (selectionAtBlockStart && !isParagraph) {
               return commands.command(
-                updateBlockCommand(
-                  this.options.editor,
-                  blockInfo.bnBlock.beforePos,
-                  {
-                    type: "paragraph",
-                    props: {},
-                  }
-                )
+                updateBlockCommand(blockInfo.bnBlock.beforePos, {
+                  type: "paragraph",
+                  props: {},
+                })
               );
             }
 

package/src/extensions/LinkToolbar/LinkToolbarPlugin.ts

@@ -12,6 +12,7 @@ import {
   StyleSchema,
 } from "../../schema/index.js";
 import { EventEmitter } from "../../util/EventEmitter.js";
+import { getPmSchema } from "../../api/pmUtil.js";
 
 export type LinkToolbarState = UiElementPosition & {
   // The hovered link's URL, and the text it's displayed with in the
@@ -153,17 +154,15 @@ class LinkToolbarView implements PluginView {
   };
 
   editLink(url: string, text: string) {
-    const tr = this.pmView.state.tr.insertText(
-      text,
-      this.linkMarkRange!.from,
-      this.linkMarkRange!.to
-    );
-    tr.addMark(
-      this.linkMarkRange!.from,
-      this.linkMarkRange!.from + text.length,
-      this.pmView.state.schema.mark("link", { href: url })
-    );
-    this.editor.dispatch(tr);
+    this.editor.transact((tr) => {
+      const pmSchema = getPmSchema(tr);
+      tr.insertText(text, this.linkMarkRange!.from, this.linkMarkRange!.to);
+      tr.addMark(
+        this.linkMarkRange!.from,
+        this.linkMarkRange!.from + text.length,
+        pmSchema.mark("link", { href: url })
+      );
+    });
     this.pmView.focus();
 
     if (this.state?.show) {
@@ -173,8 +172,8 @@ class LinkToolbarView implements PluginView {
   }
 
   deleteLink() {
-    this.editor.dispatch(
-      this.pmView.state.tr
+    this.editor.transact((tr) =>
+      tr
         .removeMark(
           this.linkMarkRange!.from,
           this.linkMarkRange!.to,

package/src/extensions/ShowSelection/ShowSelectionPlugin.ts

@@ -41,9 +41,7 @@ export class ShowSelectionPlugin {
 
     this.enabled = enabled;
 
-    this.editor.prosemirrorView?.dispatch(
-      this.editor.prosemirrorView?.state.tr.setMeta(PLUGIN_KEY, {})
-    );
+    this.editor.transact((tr) => tr.setMeta(PLUGIN_KEY, {}));
   }
 
   public getEnabled() {

package/src/extensions/SideMenu/MultipleNodeSelection.ts

@@ -82,6 +82,8 @@ export class MultipleNodeSelection extends Selection {
   }
 
   toJSON(): any {
-    return { type: "node", anchor: this.anchor, head: this.head };
+    return { type: "multiple-node", anchor: this.anchor, head: this.head };
   }
 }
+
+Selection.jsonID("multiple-node", MultipleNodeSelection);

package/src/extensions/SideMenu/dragging.ts

@@ -201,7 +201,7 @@ export function dragStart<
 
     const externalHTMLExporter = createExternalHTMLExporter(schema, editor);
 
-    const blocks = fragmentToBlocks(selectedSlice.content, editor.schema);
+    const blocks = fragmentToBlocks(selectedSlice.content);
     const externalHTML = externalHTMLExporter.exportBlocks(blocks, {});
 
     const plainText = cleanHTMLToMarkdown(externalHTML);

package/src/extensions/SuggestionMenu/SuggestionPlugin.ts

@@ -10,6 +10,7 @@ import {
   StyleSchema,
 } from "../../schema/index.js";
 import { EventEmitter } from "../../util/EventEmitter.js";
+import { trackPosition } from "../../api/positionMapping.js";
 
 const findBlock = findParentNode((node) => node.type.name === "blockContainer");
 
@@ -114,9 +115,7 @@ class SuggestionMenuView<
   }
 
   closeMenu = () => {
-    this.editor.dispatch(
-      this.editor._tiptapEditor.state.tr.setMeta(suggestionMenuPluginKey, null)
-    );
+    this.editor.transact((tr) => tr.setMeta(suggestionMenuPluginKey, null));
   };
 
   clearQuery = () => {
@@ -127,13 +126,14 @@ class SuggestionMenuView<
     this.editor._tiptapEditor
       .chain()
       .focus()
+      // TODO need to make an API for this
       .deleteRange({
         from:
-          this.pluginState.queryStartPos! -
+          this.pluginState.queryStartPos() -
           (this.pluginState.deleteTriggerCharacter
             ? this.pluginState.triggerCharacter!.length
             : 0),
-        to: this.editor._tiptapEditor.state.selection.from,
+        to: this.editor.transact((tr) => tr.selection.from),
       })
       .run();
   };
@@ -143,7 +143,7 @@ type SuggestionPluginState =
   | {
       triggerCharacter: string;
       deleteTriggerCharacter: boolean;
-      queryStartPos: number;
+      queryStartPos: () => number;
       query: string;
       decorationId: string;
       ignoreQueryLength?: boolean;
@@ -195,7 +195,12 @@ export class SuggestionMenuProseMirrorPlugin<
         },
 
         // Apply changes to the plugin state from an editor transaction.
-        apply(transaction, prev, _oldState, newState): SuggestionPluginState {
+        apply: (
+          transaction,
+          prev,
+          _oldState,
+          newState
+        ): SuggestionPluginState => {
           // TODO: More clearly define which transactions should be ignored.
           if (transaction.getMeta("orderedListIndexing") !== undefined) {
             return prev;
@@ -214,19 +219,30 @@ export class SuggestionMenuProseMirrorPlugin<
             ignoreQueryLength?: boolean;
           } | null = transaction.getMeta(suggestionMenuPluginKey);
 
-          // Only opens a menu of no menu is already open
           if (
             typeof suggestionPluginTransactionMeta === "object" &&
-            suggestionPluginTransactionMeta !== null &&
-            prev === undefined
+            suggestionPluginTransactionMeta !== null
           ) {
+            if (prev) {
+              // Close the previous menu if it exists
+              this.closeMenu();
+            }
+            const trackedPosition = trackPosition(
+              editor,
+              newState.selection.from -
+                // Need to account for the trigger char that was inserted, so we offset the position by the length of the trigger character.
+                suggestionPluginTransactionMeta.triggerCharacter.length
+            );
             return {
               triggerCharacter:
                 suggestionPluginTransactionMeta.triggerCharacter,
               deleteTriggerCharacter:
                 suggestionPluginTransactionMeta.deleteTriggerCharacter !==
                 false,
-              queryStartPos: newState.selection.from,
+              // When reading the queryStartPos, we offset the result by the length of the trigger character, to make it easy on the caller
+              queryStartPos: () =>
+                trackedPosition() +
+                suggestionPluginTransactionMeta.triggerCharacter.length,
               query: "",
               decorationId: `id_${Math.floor(Math.random() * 0xffffffff)}`,
               ignoreQueryLength:
@@ -252,7 +268,11 @@ export class SuggestionMenuProseMirrorPlugin<
             transaction.getMeta("pointer") ||
             // Moving the caret before the character which triggered the menu should hide it.
             (prev.triggerCharacter !== undefined &&
-              newState.selection.from < prev.queryStartPos!)
+              newState.selection.from < prev.queryStartPos()) ||
+            // Moving the caret to a new block should hide the menu.
+            !newState.selection.$from.sameParent(
+              newState.doc.resolve(prev.queryStartPos())
+            )
           ) {
             return undefined;
           }
@@ -261,7 +281,7 @@ export class SuggestionMenuProseMirrorPlugin<
 
           // Updates the current query.
           next.query = newState.doc.textBetween(
-            prev.queryStartPos!,
+            prev.queryStartPos(),
             newState.selection.from
           );
 
@@ -271,21 +291,14 @@ export class SuggestionMenuProseMirrorPlugin<
 
       props: {
         handleTextInput(view, _from, _to, text) {
-          const suggestionPluginState: SuggestionPluginState = (
-            this as Plugin
-          ).getState(view.state);
-
-          if (
-            triggerCharacters.includes(text) &&
-            suggestionPluginState === undefined
-          ) {
+          if (triggerCharacters.includes(text)) {
+            view.dispatch(view.state.tr.insertText(text));
             view.dispatch(
               view.state.tr
-                .insertText(text)
-                .scrollIntoView()
                 .setMeta(suggestionMenuPluginKey, {
                   triggerCharacter: text,
                 })
+                .scrollIntoView()
             );
 
             return true;
@@ -324,9 +337,9 @@ export class SuggestionMenuProseMirrorPlugin<
           // Creates an inline decoration around the trigger character.
           return DecorationSet.create(state.doc, [
             Decoration.inline(
-              suggestionPluginState.queryStartPos! -
+              suggestionPluginState.queryStartPos() -
                 suggestionPluginState.triggerCharacter!.length,
-              suggestionPluginState.queryStartPos!,
+              suggestionPluginState.queryStartPos(),
               {
                 nodeName: "span",
                 class: "bn-suggestion-decorator",

package/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -234,8 +234,8 @@ export function getDefaultSlashMenuItems<
         });
 
         // Immediately open the file toolbar
-        editor.dispatch(
-          editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
+        editor.transact((tr) =>
+          tr.setMeta(editor.filePanel!.plugin, {
             block: insertedBlock,
           })
         );
@@ -253,8 +253,8 @@ export function getDefaultSlashMenuItems<
         });
 
         // Immediately open the file toolbar
-        editor.dispatch(
-          editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
+        editor.transact((tr) =>
+          tr.setMeta(editor.filePanel!.plugin, {
             block: insertedBlock,
           })
         );
@@ -272,8 +272,8 @@ export function getDefaultSlashMenuItems<
         });
 
         // Immediately open the file toolbar
-        editor.dispatch(
-          editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
+        editor.transact((tr) =>
+          tr.setMeta(editor.filePanel!.plugin, {
             block: insertedBlock,
           })
         );
@@ -291,8 +291,8 @@ export function getDefaultSlashMenuItems<
         });
 
         // Immediately open the file toolbar
-        editor.dispatch(
-          editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
+        editor.transact((tr) =>
+          tr.setMeta(editor.filePanel!.plugin, {
             block: insertedBlock,
           })
         );