@blocknote/core 0.30.1 → 0.31.0

package/src/extensions/ShowSelection/ShowSelectionPlugin.ts

@@ -1,6 +1,7 @@
 import { Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
 import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 
 const PLUGIN_KEY = new PluginKey(`blocknote-show-selection`);
 
@@ -9,29 +10,31 @@ const PLUGIN_KEY = new PluginKey(`blocknote-show-selection`);
  * This can be used to highlight the current selection in the UI even when the
  * text editor is not focused.
  */
-export class ShowSelectionPlugin {
-  public readonly plugin: Plugin;
+export class ShowSelectionPlugin extends BlockNoteExtension {
   private enabled = false;
 
   public constructor(private readonly editor: BlockNoteEditor<any, any, any>) {
-    this.plugin = new Plugin({
-      key: PLUGIN_KEY,
-      props: {
-        decorations: (state) => {
-          const { doc, selection } = state;
-
-          if (!this.enabled) {
-            return DecorationSet.empty;
-          }
-
-          const dec = Decoration.inline(selection.from, selection.to, {
-            "data-show-selection": "true",
-          });
-
-          return DecorationSet.create(doc, [dec]);
+    super();
+    this.addProsemirrorPlugin(
+      new Plugin({
+        key: PLUGIN_KEY,
+        props: {
+          decorations: (state) => {
+            const { doc, selection } = state;
+
+            if (!this.enabled) {
+              return DecorationSet.empty;
+            }
+
+            const dec = Decoration.inline(selection.from, selection.to, {
+              "data-show-selection": "true",
+            });
+
+            return DecorationSet.create(doc, [dec]);
+          },
         },
-      },
-    });
+      }),
+    );
   }
 
   public setEnabled(enabled: boolean) {

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -3,20 +3,20 @@ import {
   EditorState,
   Plugin,
   PluginKey,
-  TextSelection,
   PluginView,
+  TextSelection,
 } from "@tiptap/pm/state";
 import { EditorView } from "@tiptap/pm/view";
 
 import { Block } from "../../blocks/defaultBlocks.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 { initializeESMDependencies } from "../../util/esmDependencies.js";
 import { getDraggableBlockFromElement } from "../getDraggableBlockFromElement.js";
 import { dragStart, unsetDragImage } from "./dragging.js";
@@ -608,29 +608,30 @@ export class SideMenuProsemirrorPlugin<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema,
-> extends EventEmitter<any> {
+> extends BlockNoteExtension {
   public view: SideMenuView<BSchema, I, S> | undefined;
-  public readonly plugin: Plugin;
 
   constructor(
     private readonly editor: BlockNoteEditor<BSchema, I, S>,
     sideMenuDetection: "viewport" | "editor",
   ) {
     super();
-    this.plugin = new Plugin({
-      key: sideMenuPluginKey,
-      view: (editorView) => {
-        this.view = new SideMenuView(
-          editor,
-          sideMenuDetection,
-          editorView,
-          (state) => {
-            this.emit("update", state);
-          },
-        );
-        return this.view;
-      },
-    });
+    this.addProsemirrorPlugin(
+      new Plugin({
+        key: sideMenuPluginKey,
+        view: (editorView) => {
+          this.view = new SideMenuView(
+            editor,
+            sideMenuDetection,
+            editorView,
+            (state) => {
+              this.emit("update", state);
+            },
+          );
+          return this.view;
+        },
+      }),
+    );
   }
 
   public onUpdate(callback: (state: SideMenuState<BSchema, I, S>) => void) {

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,190 @@ export class SuggestionMenuProseMirrorPlugin<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema,
-> extends EventEmitter<any> {
+> extends BlockNoteExtension {
   private view: SuggestionMenuView<BSchema, I, S> | undefined;
-  public readonly plugin: Plugin;
-
   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;
+            }
+            return false;
+          },
+
+          // Setup decorator on the currently active suggestion.
+          decorations(state) {
+            const suggestionPluginState: SuggestionPluginState = (
+              this as Plugin
+            ).getState(state);
+
+            if (suggestionPluginState === undefined) {
+              return null;
             }
-          }
-          // 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,
-              },
-            ),
-          ]);
+
+            // 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,
           }),
         );