@blocknote/core 0.30.0 → 0.31.0

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");
 
@@ -22,7 +22,7 @@ export type SuggestionMenuState = UiElementPosition & {
 class SuggestionMenuView<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 > {
   public state?: SuggestionMenuState;
   public emitUpdate: (triggerCharacter: string) => void;
@@ -31,7 +31,7 @@ class SuggestionMenuView<
 
   constructor(
     private readonly editor: BlockNoteEditor<BSchema, I, S>,
-    emitUpdate: (menuName: string, state: SuggestionMenuState) => void
+    emitUpdate: (menuName: string, state: SuggestionMenuState) => void,
   ) {
     this.pluginState = undefined;
 
@@ -57,7 +57,7 @@ class SuggestionMenuView<
   handleScroll = () => {
     if (this.state?.show) {
       const decorationNode = this.rootEl?.querySelector(
-        `[data-decoration-id="${this.pluginState!.decorationId}"]`
+        `[data-decoration-id="${this.pluginState!.decorationId}"]`,
       );
       if (!decorationNode) {
         return;
@@ -71,7 +71,7 @@ class SuggestionMenuView<
     const prev: SuggestionPluginState =
       suggestionMenuPluginKey.getState(prevState);
     const next: SuggestionPluginState = suggestionMenuPluginKey.getState(
-      view.state
+      view.state,
     );
 
     // See how the state changed
@@ -96,7 +96,7 @@ class SuggestionMenuView<
     }
 
     const decorationNode = this.rootEl?.querySelector(
-      `[data-decoration-id="${this.pluginState!.decorationId}"]`
+      `[data-decoration-id="${this.pluginState!.decorationId}"]`,
     );
 
     if (this.editor.isEditable && decorationNode) {
@@ -165,196 +165,196 @@ const suggestionMenuPluginKey = new PluginKey("SuggestionMenuPlugin");
 export class SuggestionMenuProseMirrorPlugin<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
-> extends EventEmitter<any> {
+  S extends StyleSchema,
+> 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;
-          }
+          },
+
+          // 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;
+            }
 
-          const next = { ...prev };
+            // Ignore transactions in code blocks.
+            if (transaction.selection.$from.parent.type.spec.code) {
+              return prev;
+            }
 
-          // Updates the current query.
-          next.query = newState.doc.textBetween(
-            prev.queryStartPos(),
-            newState.selection.from
-          );
+            // 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,
+              };
+            }
 
-          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()
+            // 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(
     triggerCharacter: string,
-    callback: (state: SuggestionMenuState) => void
+    callback: (state: SuggestionMenuState) => void,
   ) {
     if (!this.triggerCharacters.includes(triggerCharacter)) {
       this.addTriggerCharacter(triggerCharacter);
@@ -370,7 +370,7 @@ export class SuggestionMenuProseMirrorPlugin<
   // TODO: Should this be called automatically when listeners are removed?
   removeTriggerCharacter = (triggerCharacter: string) => {
     this.triggerCharacters = this.triggerCharacters.filter(
-      (c) => c !== triggerCharacter
+      (c) => c !== triggerCharacter,
     );
   };
 
@@ -386,7 +386,7 @@ export class SuggestionMenuProseMirrorPlugin<
 export function createSuggestionMenu<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(editor: BlockNoteEditor<BSchema, I, S>, triggerCharacter: string) {
   editor.suggestionMenus.addTriggerCharacter(triggerCharacter);
 }

package/src/extensions/SuggestionMenu/getDefaultEmojiPickerItems.ts

@@ -49,10 +49,10 @@ async function loadEmojiMart() {
 export async function getDefaultEmojiPickerItems<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
   editor: BlockNoteEditor<BSchema, I, S>,
-  query: string
+  query: string,
 ): Promise<DefaultGridSuggestionItem[]> {
   if (!checkDefaultInlineContentTypeInSchema("text", editor)) {
     return [];

package/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -18,7 +18,7 @@ import { DefaultSuggestionItem } from "./DefaultSuggestionItem.js";
 function setSelectionToNextContentEditableBlock<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(editor: BlockNoteEditor<BSchema, I, S>) {
   let block: Block<BSchema, I, S> | undefined =
     editor.getTextCursorPosition().block;
@@ -44,10 +44,10 @@ function setSelectionToNextContentEditableBlock<
 export function insertOrUpdateBlock<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
   editor: BlockNoteEditor<BSchema, I, S>,
-  block: PartialBlock<BSchema, I, S>
+  block: PartialBlock<BSchema, I, S>,
 ): Block<BSchema, I, S> {
   const currentBlock = editor.getTextCursorPosition().block;
 
@@ -83,7 +83,7 @@ export function insertOrUpdateBlock<
 export function getDefaultSlashMenuItems<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(editor: BlockNoteEditor<BSchema, I, S>) {
   const items: DefaultSuggestionItem[] = [];
 
@@ -121,7 +121,7 @@ export function getDefaultSlashMenuItems<
         badge: formatKeyboardShortcut("Mod-Alt-3"),
         key: "heading_3",
         ...editor.dictionary.slash_menu.heading_3,
-      }
+      },
     );
   }
 
@@ -235,9 +235,9 @@ export function getDefaultSlashMenuItems<
 
         // Immediately open the file toolbar
         editor.transact((tr) =>
-          tr.setMeta(editor.filePanel!.plugin, {
+          tr.setMeta(editor.filePanel!.plugins[0], {
             block: insertedBlock,
-          })
+          }),
         );
       },
       key: "image",
@@ -254,9 +254,9 @@ export function getDefaultSlashMenuItems<
 
         // Immediately open the file toolbar
         editor.transact((tr) =>
-          tr.setMeta(editor.filePanel!.plugin, {
+          tr.setMeta(editor.filePanel!.plugins[0], {
             block: insertedBlock,
-          })
+          }),
         );
       },
       key: "video",
@@ -273,9 +273,9 @@ export function getDefaultSlashMenuItems<
 
         // Immediately open the file toolbar
         editor.transact((tr) =>
-          tr.setMeta(editor.filePanel!.plugin, {
+          tr.setMeta(editor.filePanel!.plugins[0], {
             block: insertedBlock,
-          })
+          }),
         );
       },
       key: "audio",
@@ -292,9 +292,9 @@ export function getDefaultSlashMenuItems<
 
         // Immediately open the file toolbar
         editor.transact((tr) =>
-          tr.setMeta(editor.filePanel!.plugin, {
+          tr.setMeta(editor.filePanel!.plugins[0], {
             block: insertedBlock,
-          })
+          }),
         );
       },
       key: "file",
@@ -317,14 +317,14 @@ export function getDefaultSlashMenuItems<
 }
 
 export function filterSuggestionItems<
-  T extends { title: string; aliases?: readonly string[] }
+  T extends { title: string; aliases?: readonly string[] },
 >(items: T[], query: string) {
   return items.filter(
     ({ title, aliases }) =>
       title.toLowerCase().includes(query.toLowerCase()) ||
       (aliases &&
         aliases.filter((alias) =>
-          alias.toLowerCase().includes(query.toLowerCase())
-        ).length !== 0)
+          alias.toLowerCase().includes(query.toLowerCase()),
+        ).length !== 0),
   );
 }