@blocknote/core 0.30.1 → 0.31.1

package/src/extensions/SuggestionMenu/SuggestionPlugin.ts

@@ -2,15 +2,15 @@ import { findParentNode } from "@tiptap/core";
 import { EditorState, Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
 
+import { trackPosition } from "../../api/positionMapping.js";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition.js";
 import {
   BlockSchema,
   InlineContentSchema,
   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");
 
@@ -166,190 +166,194 @@ export class SuggestionMenuProseMirrorPlugin<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema,
-> extends EventEmitter<any> {
-  private view: SuggestionMenuView<BSchema, I, S> | undefined;
-  public readonly plugin: Plugin;
+> extends BlockNoteExtension {
+  public static key() {
+    return "suggestionMenu";
+  }
 
+  private view: SuggestionMenuView<BSchema, I, S> | undefined;
   private triggerCharacters: string[] = [];
 
   constructor(editor: BlockNoteEditor<BSchema, I, S>) {
     super();
     const triggerCharacters = this.triggerCharacters;
-    this.plugin = new Plugin({
-      key: suggestionMenuPluginKey,
-
-      view: () => {
-        this.view = new SuggestionMenuView<BSchema, I, S>(
-          editor,
-          (triggerCharacter, state) => {
-            this.emit(`update ${triggerCharacter}`, state);
-          },
-        );
-        return this.view;
-      },
-
-      state: {
-        // Initialize the plugin's internal state.
-        init(): SuggestionPluginState {
-          return undefined;
+    this.addProsemirrorPlugin(
+      new Plugin({
+        key: suggestionMenuPluginKey,
+
+        view: () => {
+          this.view = new SuggestionMenuView<BSchema, I, S>(
+            editor,
+            (triggerCharacter, state) => {
+              this.emit(`update ${triggerCharacter}`, state);
+            },
+          );
+          return this.view;
         },
 
-        // Apply changes to the plugin state from an editor transaction.
-        apply: (
-          transaction,
-          prev,
-          _oldState,
-          newState,
-        ): SuggestionPluginState => {
-          // TODO: More clearly define which transactions should be ignored.
-          if (transaction.getMeta("orderedListIndexing") !== undefined) {
-            return prev;
-          }
-
-          // Ignore transactions in code blocks.
-          if (transaction.selection.$from.parent.type.spec.code) {
-            return prev;
-          }
-
-          // Either contains the trigger character if the menu should be shown,
-          // or null if it should be hidden.
-          const suggestionPluginTransactionMeta: {
-            triggerCharacter: string;
-            deleteTriggerCharacter?: boolean;
-            ignoreQueryLength?: boolean;
-          } | null = transaction.getMeta(suggestionMenuPluginKey);
-
-          if (
-            typeof suggestionPluginTransactionMeta === "object" &&
-            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,
-              // 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:
-                suggestionPluginTransactionMeta?.ignoreQueryLength,
-            };
-          }
-
-          // Checks if the menu is hidden, in which case it doesn't need to be hidden or updated.
-          if (prev === undefined) {
-            return prev;
-          }
-
-          // Checks if the menu should be hidden.
-          if (
-            // Highlighting text should hide the menu.
-            newState.selection.from !== newState.selection.to ||
-            // Transactions with plugin metadata should hide the menu.
-            suggestionPluginTransactionMeta === null ||
-            // Certain mouse events should hide the menu.
-            // TODO: Change to global mousedown listener.
-            transaction.getMeta("focus") ||
-            transaction.getMeta("blur") ||
-            transaction.getMeta("pointer") ||
-            // Moving the caret before the character which triggered the menu should hide it.
-            (prev.triggerCharacter !== undefined &&
-              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()),
-            )
-          ) {
+        state: {
+          // Initialize the plugin's internal state.
+          init(): SuggestionPluginState {
             return undefined;
-          }
+          },
 
-          const next = { ...prev };
+          // Apply changes to the plugin state from an editor transaction.
+          apply: (
+            transaction,
+            prev,
+            _oldState,
+            newState,
+          ): SuggestionPluginState => {
+            // TODO: More clearly define which transactions should be ignored.
+            if (transaction.getMeta("orderedListIndexing") !== undefined) {
+              return prev;
+            }
 
-          // Updates the current query.
-          next.query = newState.doc.textBetween(
-            prev.queryStartPos(),
-            newState.selection.from,
-          );
+            // Ignore transactions in code blocks.
+            if (transaction.selection.$from.parent.type.spec.code) {
+              return prev;
+            }
 
-          return next;
-        },
-      },
-
-      props: {
-        handleTextInput(view, _from, _to, text) {
-          if (triggerCharacters.includes(text)) {
-            view.dispatch(view.state.tr.insertText(text));
-            view.dispatch(
-              view.state.tr
-                .setMeta(suggestionMenuPluginKey, {
-                  triggerCharacter: text,
-                })
-                .scrollIntoView(),
+            // Either contains the trigger character if the menu should be shown,
+            // or null if it should be hidden.
+            const suggestionPluginTransactionMeta: {
+              triggerCharacter: string;
+              deleteTriggerCharacter?: boolean;
+              ignoreQueryLength?: boolean;
+            } | null = transaction.getMeta(suggestionMenuPluginKey);
+
+            if (
+              typeof suggestionPluginTransactionMeta === "object" &&
+              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,
+                // 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:
+                  suggestionPluginTransactionMeta?.ignoreQueryLength,
+              };
+            }
+
+            // Checks if the menu is hidden, in which case it doesn't need to be hidden or updated.
+            if (prev === undefined) {
+              return prev;
+            }
+
+            // Checks if the menu should be hidden.
+            if (
+              // Highlighting text should hide the menu.
+              newState.selection.from !== newState.selection.to ||
+              // Transactions with plugin metadata should hide the menu.
+              suggestionPluginTransactionMeta === null ||
+              // Certain mouse events should hide the menu.
+              // TODO: Change to global mousedown listener.
+              transaction.getMeta("focus") ||
+              transaction.getMeta("blur") ||
+              transaction.getMeta("pointer") ||
+              // Moving the caret before the character which triggered the menu should hide it.
+              (prev.triggerCharacter !== undefined &&
+                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;
+            }
+
+            const next = { ...prev };
+
+            // Updates the current query.
+            next.query = newState.doc.textBetween(
+              prev.queryStartPos(),
+              newState.selection.from,
             );
 
-            return true;
-          }
-          return false;
+            return next;
+          },
         },
 
-        // Setup decorator on the currently active suggestion.
-        decorations(state) {
-          const suggestionPluginState: SuggestionPluginState = (
-            this as Plugin
-          ).getState(state);
-
-          if (suggestionPluginState === undefined) {
-            return null;
-          }
-
-          // If the menu was opened programmatically by another extension, it may not use a trigger character. In this
-          // case, the decoration is set on the whole block instead, as the decoration range would otherwise be empty.
-          if (!suggestionPluginState.deleteTriggerCharacter) {
-            const blockNode = findBlock(state.selection);
-            if (blockNode) {
-              return DecorationSet.create(state.doc, [
-                Decoration.node(
-                  blockNode.pos,
-                  blockNode.pos + blockNode.node.nodeSize,
-                  {
-                    nodeName: "span",
-                    class: "bn-suggestion-decorator",
-                    "data-decoration-id": suggestionPluginState.decorationId,
-                  },
-                ),
-              ]);
+        props: {
+          handleTextInput(view, _from, _to, text) {
+            if (triggerCharacters.includes(text)) {
+              view.dispatch(view.state.tr.insertText(text));
+              view.dispatch(
+                view.state.tr
+                  .setMeta(suggestionMenuPluginKey, {
+                    triggerCharacter: text,
+                  })
+                  .scrollIntoView(),
+              );
+
+              return true;
             }
-          }
-          // Creates an inline decoration around the trigger character.
-          return DecorationSet.create(state.doc, [
-            Decoration.inline(
-              suggestionPluginState.queryStartPos() -
-                suggestionPluginState.triggerCharacter!.length,
-              suggestionPluginState.queryStartPos(),
-              {
-                nodeName: "span",
-                class: "bn-suggestion-decorator",
-                "data-decoration-id": suggestionPluginState.decorationId,
-              },
-            ),
-          ]);
+            return false;
+          },
+
+          // Setup decorator on the currently active suggestion.
+          decorations(state) {
+            const suggestionPluginState: SuggestionPluginState = (
+              this as Plugin
+            ).getState(state);
+
+            if (suggestionPluginState === undefined) {
+              return null;
+            }
+
+            // If the menu was opened programmatically by another extension, it may not use a trigger character. In this
+            // case, the decoration is set on the whole block instead, as the decoration range would otherwise be empty.
+            if (!suggestionPluginState.deleteTriggerCharacter) {
+              const blockNode = findBlock(state.selection);
+              if (blockNode) {
+                return DecorationSet.create(state.doc, [
+                  Decoration.node(
+                    blockNode.pos,
+                    blockNode.pos + blockNode.node.nodeSize,
+                    {
+                      nodeName: "span",
+                      class: "bn-suggestion-decorator",
+                      "data-decoration-id": suggestionPluginState.decorationId,
+                    },
+                  ),
+                ]);
+              }
+            }
+            // Creates an inline decoration around the trigger character.
+            return DecorationSet.create(state.doc, [
+              Decoration.inline(
+                suggestionPluginState.queryStartPos() -
+                  suggestionPluginState.triggerCharacter!.length,
+                suggestionPluginState.queryStartPos(),
+                {
+                  nodeName: "span",
+                  class: "bn-suggestion-decorator",
+                  "data-decoration-id": suggestionPluginState.decorationId,
+                },
+              ),
+            ]);
+          },
         },
-      },
-    });
+      }),
+    );
   }
 
   public onUpdate(

package/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -235,7 +235,7 @@ export function getDefaultSlashMenuItems<
 
         // Immediately open the file toolbar
         editor.transact((tr) =>
-          tr.setMeta(editor.filePanel!.plugin, {
+          tr.setMeta(editor.filePanel!.plugins[0], {
             block: insertedBlock,
           }),
         );
@@ -254,7 +254,7 @@ export function getDefaultSlashMenuItems<
 
         // Immediately open the file toolbar
         editor.transact((tr) =>
-          tr.setMeta(editor.filePanel!.plugin, {
+          tr.setMeta(editor.filePanel!.plugins[0], {
             block: insertedBlock,
           }),
         );
@@ -273,7 +273,7 @@ export function getDefaultSlashMenuItems<
 
         // Immediately open the file toolbar
         editor.transact((tr) =>
-          tr.setMeta(editor.filePanel!.plugin, {
+          tr.setMeta(editor.filePanel!.plugins[0], {
             block: insertedBlock,
           }),
         );
@@ -292,7 +292,7 @@ export function getDefaultSlashMenuItems<
 
         // Immediately open the file toolbar
         editor.transact((tr) =>
-          tr.setMeta(editor.filePanel!.plugin, {
+          tr.setMeta(editor.filePanel!.plugins[0], {
             block: insertedBlock,
           }),
         );

package/src/extensions/Suggestions/SuggestionMarks.ts

@@ -0,0 +1,175 @@
+import { Mark } from "@tiptap/core";
+import { MarkSpec } from "prosemirror-model";
+
+// This copies the marks from @handlewithcare/prosemirror-suggest-changes,
+// but uses the Tiptap Mark API instead so we can use them in BlockNote
+
+// The ideal solution would be to not depend on tiptap nodes / marks, but be able to use prosemirror nodes / marks directly
+// this way we could directly use the exported marks from @handlewithcare/prosemirror-suggest-changes
+export const SuggestionAddMark = Mark.create({
+  name: "insertion",
+  inclusive: false,
+  excludes: "deletion modification insertion",
+  addAttributes() {
+    return {
+      id: { default: null, validate: "number" }, // note: validate is supported in prosemirror but not in tiptap, so this doesn't actually work (considered not critical)
+    };
+  },
+  extendMarkSchema(extension) {
+    if (extension.name !== "insertion") {
+      return {};
+    }
+    return {
+      blocknoteIgnore: true,
+      inclusive: false,
+
+      toDOM(mark, inline) {
+        return [
+          "ins",
+          {
+            "data-id": String(mark.attrs["id"]),
+            "data-inline": String(inline),
+            ...(!inline && { style: "display: contents" }), // changed to "contents" to make this work for table rows
+          },
+          0,
+        ];
+      },
+      parseDOM: [
+        {
+          tag: "ins",
+          getAttrs(node) {
+            if (!node.dataset["id"]) {
+              return false;
+            }
+            return {
+              id: parseInt(node.dataset["id"], 10),
+            };
+          },
+        },
+      ],
+    } satisfies MarkSpec;
+  },
+});
+
+export const SuggestionDeleteMark = Mark.create({
+  name: "deletion",
+  inclusive: false,
+  excludes: "insertion modification deletion",
+  addAttributes() {
+    return {
+      id: { default: null, validate: "number" }, // note: validate is supported in prosemirror but not in tiptap
+    };
+  },
+  extendMarkSchema(extension) {
+    if (extension.name !== "deletion") {
+      return {};
+    }
+    return {
+      blocknoteIgnore: true,
+      inclusive: false,
+
+      // attrs: {
+      //   id: { validate: "number" },
+      // },
+      toDOM(mark, inline) {
+        return [
+          "del",
+          {
+            "data-id": String(mark.attrs["id"]),
+            "data-inline": String(inline),
+            ...(!inline && { style: "display: contents" }), // changed to "contents" to make this work for table rows
+          },
+          0,
+        ];
+      },
+      parseDOM: [
+        {
+          tag: "del",
+          getAttrs(node) {
+            if (!node.dataset["id"]) {
+              return false;
+            }
+            return {
+              id: parseInt(node.dataset["id"], 10),
+            };
+          },
+        },
+      ],
+    } satisfies MarkSpec;
+  },
+});
+
+export const SuggestionModificationMark = Mark.create({
+  name: "modification",
+  inclusive: false,
+  excludes: "deletion insertion",
+  addAttributes() {
+    // note: validate is supported in prosemirror but not in tiptap
+    return {
+      id: { default: null, validate: "number" },
+      type: { validate: "string" },
+      attrName: { default: null, validate: "string|null" },
+      previousValue: { default: null },
+      newValue: { default: null },
+    };
+  },
+  extendMarkSchema(extension) {
+    if (extension.name !== "modification") {
+      return {};
+    }
+    return {
+      blocknoteIgnore: true,
+      inclusive: false,
+      // attrs: {
+      //   id: { validate: "number" },
+      //   type: { validate: "string" },
+      //   attrName: { default: null, validate: "string|null" },
+      //   previousValue: { default: null },
+      //   newValue: { default: null },
+      // },
+      toDOM(mark, inline) {
+        return [
+          inline ? "span" : "div",
+          {
+            "data-type": "modification",
+            "data-id": String(mark.attrs["id"]),
+            "data-mod-type": mark.attrs["type"] as string,
+            "data-mod-prev-val": JSON.stringify(mark.attrs["previousValue"]),
+            // TODO: Try to serialize marks with toJSON?
+            "data-mod-new-val": JSON.stringify(mark.attrs["newValue"]),
+          },
+          0,
+        ];
+      },
+      parseDOM: [
+        {
+          tag: "span[data-type='modification']",
+          getAttrs(node) {
+            if (!node.dataset["id"]) {
+              return false;
+            }
+            return {
+              id: parseInt(node.dataset["id"], 10),
+              type: node.dataset["modType"],
+              previousValue: node.dataset["modPrevVal"],
+              newValue: node.dataset["modNewVal"],
+            };
+          },
+        },
+        {
+          tag: "div[data-type='modification']",
+          getAttrs(node) {
+            if (!node.dataset["id"]) {
+              return false;
+            }
+            return {
+              id: parseInt(node.dataset["id"], 10),
+              type: node.dataset["modType"],
+              previousValue: node.dataset["modPrevVal"],
+            };
+          },
+        },
+      ],
+    } satisfies MarkSpec;
+  },
+});