@blocknote/core 0.42.3 → 0.44.0

package/src/extensions/SuggestionMenu/{SuggestionPlugin.ts → SuggestionMenu.ts}

@@ -3,14 +3,12 @@ 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";
+  createExtension,
+  createStore,
+} from "../../editor/BlockNoteExtension.js";
+import { UiElementPosition } from "../../extensions-shared/UiElementPosition.js";
+import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 
 const findBlock = findParentNode((node) => node.type.name === "blockContainer");
 
@@ -19,18 +17,14 @@ export type SuggestionMenuState = UiElementPosition & {
   ignoreQueryLength?: boolean;
 };
 
-class SuggestionMenuView<
-  BSchema extends BlockSchema,
-  I extends InlineContentSchema,
-  S extends StyleSchema,
-> {
+class SuggestionMenuView {
   public state?: SuggestionMenuState;
   public emitUpdate: (triggerCharacter: string) => void;
   private rootEl?: Document | ShadowRoot;
   pluginState: SuggestionPluginState;
 
   constructor(
-    private readonly editor: BlockNoteEditor<BSchema, I, S>,
+    private readonly editor: BlockNoteEditor<any, any, any>,
     emitUpdate: (menuName: string, state: SuggestionMenuState) => void,
     view: EditorView,
   ) {
@@ -63,7 +57,9 @@ class SuggestionMenuView<
       if (!decorationNode) {
         return;
       }
-      this.state.referencePos = decorationNode.getBoundingClientRect();
+      this.state.referencePos = decorationNode
+        .getBoundingClientRect()
+        .toJSON() as DOMRect;
       this.emitUpdate(this.pluginState!.triggerCharacter!);
     }
   };
@@ -103,7 +99,9 @@ class SuggestionMenuView<
     if (this.editor.isEditable && decorationNode) {
       this.state = {
         show: true,
-        referencePos: decorationNode.getBoundingClientRect(),
+        referencePos: decorationNode
+          .getBoundingClientRect()
+          .toJSON() as DOMRect,
         query: this.pluginState!.query,
       };
 
@@ -163,34 +161,68 @@ const suggestionMenuPluginKey = new PluginKey("SuggestionMenuPlugin");
  * - This version hides some unnecessary complexity from the user of the plugin.
  * - This version handles key events differently
  */
-export class SuggestionMenuProseMirrorPlugin<
-  BSchema extends BlockSchema,
-  I extends InlineContentSchema,
-  S extends StyleSchema,
-> extends BlockNoteExtension {
-  public static key() {
-    return "suggestionMenu";
-  }
-
-  private view: SuggestionMenuView<BSchema, I, S> | undefined;
-  private triggerCharacters: string[] = [];
+export const SuggestionMenu = createExtension(({ editor }) => {
+  const triggerCharacters: string[] = [];
+  let view: SuggestionMenuView | undefined = undefined;
+  const store = createStore<
+    (SuggestionMenuState & { triggerCharacter: string }) | undefined
+  >(undefined);
+  return {
+    key: "suggestionMenu",
+    store,
+    addTriggerCharacter: (triggerCharacter: string) => {
+      triggerCharacters.push(triggerCharacter);
+    },
+    removeTriggerCharacter: (triggerCharacter: string) => {
+      triggerCharacters.splice(triggerCharacters.indexOf(triggerCharacter), 1);
+    },
+    closeMenu: () => {
+      view?.closeMenu();
+    },
+    clearQuery: () => {
+      view?.clearQuery();
+    },
+    shown: () => {
+      return view?.state?.show || false;
+    },
+    openSuggestionMenu: (
+      triggerCharacter: string,
+      pluginState?: {
+        deleteTriggerCharacter?: boolean;
+        ignoreQueryLength?: boolean;
+      },
+    ) => {
+      if (editor.headless) {
+        return;
+      }
 
-  constructor(editor: BlockNoteEditor<BSchema, I, S>) {
-    super();
-    const triggerCharacters = this.triggerCharacters;
-    this.addProsemirrorPlugin(
+      editor.focus();
+
+      editor.transact((tr) => {
+        if (pluginState?.deleteTriggerCharacter) {
+          tr.insertText(triggerCharacter);
+        }
+        tr.scrollIntoView().setMeta(suggestionMenuPluginKey, {
+          triggerCharacter: triggerCharacter,
+          deleteTriggerCharacter: pluginState?.deleteTriggerCharacter || false,
+          ignoreQueryLength: pluginState?.ignoreQueryLength || false,
+        });
+      });
+    },
+    // TODO this whole plugin needs to be refactored (but I've done the minimal)
+    prosemirrorPlugins: [
       new Plugin({
         key: suggestionMenuPluginKey,
 
-        view: (view) => {
-          this.view = new SuggestionMenuView<BSchema, I, S>(
+        view: (v) => {
+          view = new SuggestionMenuView(
             editor,
             (triggerCharacter, state) => {
-              this.emit(`update ${triggerCharacter}`, state);
+              store.setState({ ...state, triggerCharacter });
             },
-            view,
+            v,
           );
-          return this.view;
+          return view;
         },
 
         state: {
@@ -225,7 +257,7 @@ export class SuggestionMenuProseMirrorPlugin<
             ) {
               if (prev) {
                 // Close the previous menu if it exists
-                this.closeMenu();
+                view?.closeMenu();
               }
               const trackedPosition = trackPosition(
                 editor,
@@ -360,44 +392,6 @@ export class SuggestionMenuProseMirrorPlugin<
           },
         },
       }),
-    );
-  }
-
-  public onUpdate(
-    triggerCharacter: string,
-    callback: (state: SuggestionMenuState) => void,
-  ) {
-    if (!this.triggerCharacters.includes(triggerCharacter)) {
-      this.addTriggerCharacter(triggerCharacter);
-    }
-    // TODO: be able to remove the triggerCharacter
-    return this.on(`update ${triggerCharacter}`, callback);
-  }
-
-  addTriggerCharacter = (triggerCharacter: string) => {
-    this.triggerCharacters.push(triggerCharacter);
-  };
-
-  // TODO: Should this be called automatically when listeners are removed?
-  removeTriggerCharacter = (triggerCharacter: string) => {
-    this.triggerCharacters = this.triggerCharacters.filter(
-      (c) => c !== triggerCharacter,
-    );
-  };
-
-  closeMenu = () => this.view!.closeMenu();
-
-  clearQuery = () => this.view!.clearQuery();
-
-  public get shown() {
-    return this.view?.state?.show || false;
-  }
-}
-
-export function createSuggestionMenu<
-  BSchema extends BlockSchema,
-  I extends InlineContentSchema,
-  S extends StyleSchema,
->(editor: BlockNoteEditor<BSchema, I, S>, triggerCharacter: string) {
-  editor.suggestionMenus.addTriggerCharacter(triggerCharacter);
-}
+    ],
+  } as const;
+});

package/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -1,7 +1,6 @@
 import { Block, PartialBlock } from "../../blocks/defaultBlocks.js";
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
-
 import { editorHasBlockWithType } from "../../blocks/defaultBlockTypeGuards.js";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 import {
   BlockSchema,
   InlineContentSchema,
@@ -9,7 +8,9 @@ import {
   isStyledTextInlineContent,
 } from "../../schema/index.js";
 import { formatKeyboardShortcut } from "../../util/browser.js";
+import { FilePanelExtension } from "../FilePanel/FilePanel.js";
 import { DefaultSuggestionItem } from "./DefaultSuggestionItem.js";
+import { SuggestionMenu } from "./SuggestionMenu.js";
 
 // Sets the editor's text cursor position to the next content editable block,
 // so either a block with inline content or a table. The last block is always a
@@ -41,7 +42,7 @@ function setSelectionToNextContentEditableBlock<
 // updates the current block instead of inserting a new one below. If the new
 // block doesn't contain editable content, the cursor is moved to the next block
 // that does.
-export function insertOrUpdateBlock<
+export function insertOrUpdateBlockForSlashMenu<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema,
@@ -91,7 +92,7 @@ export function getDefaultSlashMenuItems<
     items.push(
       {
         onItemClick: () => {
-          insertOrUpdateBlock(editor, {
+          insertOrUpdateBlockForSlashMenu(editor, {
             type: "heading",
             props: { level: 1 },
           });
@@ -102,7 +103,7 @@ export function getDefaultSlashMenuItems<
       },
       {
         onItemClick: () => {
-          insertOrUpdateBlock(editor, {
+          insertOrUpdateBlockForSlashMenu(editor, {
             type: "heading",
             props: { level: 2 },
           });
@@ -113,7 +114,7 @@ export function getDefaultSlashMenuItems<
       },
       {
         onItemClick: () => {
-          insertOrUpdateBlock(editor, {
+          insertOrUpdateBlockForSlashMenu(editor, {
             type: "heading",
             props: { level: 3 },
           });
@@ -128,7 +129,7 @@ export function getDefaultSlashMenuItems<
   if (editorHasBlockWithType(editor, "quote")) {
     items.push({
       onItemClick: () => {
-        insertOrUpdateBlock(editor, {
+        insertOrUpdateBlockForSlashMenu(editor, {
           type: "quote",
         });
       },
@@ -140,7 +141,7 @@ export function getDefaultSlashMenuItems<
   if (editorHasBlockWithType(editor, "toggleListItem")) {
     items.push({
       onItemClick: () => {
-        insertOrUpdateBlock(editor, {
+        insertOrUpdateBlockForSlashMenu(editor, {
           type: "toggleListItem",
         });
       },
@@ -153,7 +154,7 @@ export function getDefaultSlashMenuItems<
   if (editorHasBlockWithType(editor, "numberedListItem")) {
     items.push({
       onItemClick: () => {
-        insertOrUpdateBlock(editor, {
+        insertOrUpdateBlockForSlashMenu(editor, {
           type: "numberedListItem",
         });
       },
@@ -166,7 +167,7 @@ export function getDefaultSlashMenuItems<
   if (editorHasBlockWithType(editor, "bulletListItem")) {
     items.push({
       onItemClick: () => {
-        insertOrUpdateBlock(editor, {
+        insertOrUpdateBlockForSlashMenu(editor, {
           type: "bulletListItem",
         });
       },
@@ -179,7 +180,7 @@ export function getDefaultSlashMenuItems<
   if (editorHasBlockWithType(editor, "checkListItem")) {
     items.push({
       onItemClick: () => {
-        insertOrUpdateBlock(editor, {
+        insertOrUpdateBlockForSlashMenu(editor, {
           type: "checkListItem",
         });
       },
@@ -192,7 +193,7 @@ export function getDefaultSlashMenuItems<
   if (editorHasBlockWithType(editor, "paragraph")) {
     items.push({
       onItemClick: () => {
-        insertOrUpdateBlock(editor, {
+        insertOrUpdateBlockForSlashMenu(editor, {
           type: "paragraph",
         });
       },
@@ -205,7 +206,7 @@ export function getDefaultSlashMenuItems<
   if (editorHasBlockWithType(editor, "codeBlock")) {
     items.push({
       onItemClick: () => {
-        insertOrUpdateBlock(editor, {
+        insertOrUpdateBlockForSlashMenu(editor, {
           type: "codeBlock",
         });
       },
@@ -218,7 +219,7 @@ export function getDefaultSlashMenuItems<
   if (editorHasBlockWithType(editor, "divider")) {
     items.push({
       onItemClick: () => {
-        insertOrUpdateBlock(editor, { type: "divider" });
+        insertOrUpdateBlockForSlashMenu(editor, { type: "divider" });
       },
       key: "divider",
       ...editor.dictionary.slash_menu.divider,
@@ -228,7 +229,7 @@ export function getDefaultSlashMenuItems<
   if (editorHasBlockWithType(editor, "table")) {
     items.push({
       onItemClick: () => {
-        insertOrUpdateBlock(editor, {
+        insertOrUpdateBlockForSlashMenu(editor, {
           type: "table",
           content: {
             type: "tableContent",
@@ -252,16 +253,12 @@ export function getDefaultSlashMenuItems<
   if (editorHasBlockWithType(editor, "image", { url: "string" })) {
     items.push({
       onItemClick: () => {
-        const insertedBlock = insertOrUpdateBlock(editor, {
+        const insertedBlock = insertOrUpdateBlockForSlashMenu(editor, {
           type: "image",
         });
 
         // Immediately open the file toolbar
-        editor.transact((tr) =>
-          tr.setMeta(editor.filePanel!.plugins[0], {
-            block: insertedBlock,
-          }),
-        );
+        editor.getExtension(FilePanelExtension)?.showMenu(insertedBlock.id);
       },
       key: "image",
       ...editor.dictionary.slash_menu.image,
@@ -271,16 +268,12 @@ export function getDefaultSlashMenuItems<
   if (editorHasBlockWithType(editor, "video", { url: "string" })) {
     items.push({
       onItemClick: () => {
-        const insertedBlock = insertOrUpdateBlock(editor, {
+        const insertedBlock = insertOrUpdateBlockForSlashMenu(editor, {
           type: "video",
         });
 
         // Immediately open the file toolbar
-        editor.transact((tr) =>
-          tr.setMeta(editor.filePanel!.plugins[0], {
-            block: insertedBlock,
-          }),
-        );
+        editor.getExtension(FilePanelExtension)?.showMenu(insertedBlock.id);
       },
       key: "video",
       ...editor.dictionary.slash_menu.video,
@@ -290,16 +283,12 @@ export function getDefaultSlashMenuItems<
   if (editorHasBlockWithType(editor, "audio", { url: "string" })) {
     items.push({
       onItemClick: () => {
-        const insertedBlock = insertOrUpdateBlock(editor, {
+        const insertedBlock = insertOrUpdateBlockForSlashMenu(editor, {
           type: "audio",
         });
 
         // Immediately open the file toolbar
-        editor.transact((tr) =>
-          tr.setMeta(editor.filePanel!.plugins[0], {
-            block: insertedBlock,
-          }),
-        );
+        editor.getExtension(FilePanelExtension)?.showMenu(insertedBlock.id);
       },
       key: "audio",
       ...editor.dictionary.slash_menu.audio,
@@ -309,16 +298,12 @@ export function getDefaultSlashMenuItems<
   if (editorHasBlockWithType(editor, "file", { url: "string" })) {
     items.push({
       onItemClick: () => {
-        const insertedBlock = insertOrUpdateBlock(editor, {
+        const insertedBlock = insertOrUpdateBlockForSlashMenu(editor, {
           type: "file",
         });
 
         // Immediately open the file toolbar
-        editor.transact((tr) =>
-          tr.setMeta(editor.filePanel!.plugins[0], {
-            block: insertedBlock,
-          }),
-        );
+        editor.getExtension(FilePanelExtension)?.showMenu(insertedBlock.id);
       },
       key: "file",
       ...editor.dictionary.slash_menu.file,
@@ -334,7 +319,7 @@ export function getDefaultSlashMenuItems<
     items.push(
       {
         onItemClick: () => {
-          insertOrUpdateBlock(editor, {
+          insertOrUpdateBlockForSlashMenu(editor, {
             type: "heading",
             props: { level: 1, isToggleable: true },
           });
@@ -344,7 +329,7 @@ export function getDefaultSlashMenuItems<
       },
       {
         onItemClick: () => {
-          insertOrUpdateBlock(editor, {
+          insertOrUpdateBlockForSlashMenu(editor, {
             type: "heading",
             props: { level: 2, isToggleable: true },
           });
@@ -355,7 +340,7 @@ export function getDefaultSlashMenuItems<
       },
       {
         onItemClick: () => {
-          insertOrUpdateBlock(editor, {
+          insertOrUpdateBlockForSlashMenu(editor, {
             type: "heading",
             props: { level: 3, isToggleable: true },
           });
@@ -372,7 +357,7 @@ export function getDefaultSlashMenuItems<
       .forEach((level) => {
         items.push({
           onItemClick: () => {
-            insertOrUpdateBlock(editor, {
+            insertOrUpdateBlockForSlashMenu(editor, {
               type: "heading",
               props: { level: level },
             });
@@ -385,7 +370,7 @@ export function getDefaultSlashMenuItems<
 
   items.push({
     onItemClick: () => {
-      editor.openSuggestionMenu(":", {
+      editor.getExtension(SuggestionMenu)?.openSuggestionMenu(":", {
         deleteTriggerCharacter: true,
         ignoreQueryLength: true,
       });