@blocknote/core 0.11.2 → 0.12.1

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -2,20 +2,17 @@ import { PluginView } from "@tiptap/pm/state";
 import { Node } from "prosemirror-model";
 import { NodeSelection, Plugin, PluginKey, Selection } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
+
 import { createExternalHTMLExporter } from "../../api/exporters/html/externalHTMLExporter";
 import { createInternalHTMLSerializer } from "../../api/exporters/html/internalHTMLSerializer";
 import { cleanHTMLToMarkdown } from "../../api/exporters/markdown/markdownExporter";
 import { getBlockInfoFromPos } from "../../api/getBlockInfoFromPos";
+import { Block } from "../../blocks/defaultBlocks";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { BaseUiElementState } from "../../extensions-shared/BaseUiElementTypes";
-import {
-  Block,
-  BlockSchema,
-  InlineContentSchema,
-  StyleSchema,
-} from "../../schema";
+import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
 import { EventEmitter } from "../../util/EventEmitter";
-import { slashMenuPluginKey } from "../SlashMenu/SlashMenuPlugin";
+import { suggestionMenuPluginKey } from "../SuggestionMenu/SuggestionPlugin";
 import { MultipleNodeSelection } from "./MultipleNodeSelection";
 
 let dragImageElement: Element | undefined;
@@ -24,7 +21,7 @@ export type SideMenuState<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
-> = BaseUiElementState & {
+> = UiElementPosition & {
   // The block that the side menu is attached to.
   block: Block<BSchema, I, S>;
 };
@@ -255,7 +252,8 @@ export class SideMenuView<
   S extends StyleSchema
 > implements PluginView
 {
-  private sideMenuState?: SideMenuState<BSchema, I, S>;
+  private state?: SideMenuState<BSchema, I, S>;
+  private readonly emitUpdate: (state: SideMenuState<BSchema, I, S>) => void;
 
   // When true, the drag handle with be anchored at the same level as root elements
   // When false, the drag handle with be just to the left of the element
@@ -273,10 +271,16 @@ export class SideMenuView<
   constructor(
     private readonly editor: BlockNoteEditor<BSchema, I, S>,
     private readonly pmView: EditorView,
-    private readonly updateSideMenu: (
-      sideMenuState: SideMenuState<BSchema, I, S>
-    ) => void
+    emitUpdate: (state: SideMenuState<BSchema, I, S>) => void
   ) {
+    this.emitUpdate = () => {
+      if (!this.state) {
+        throw new Error("Attempting to update uninitialized side menu");
+      }
+
+      emitUpdate(this.state);
+    };
+
     this.horizontalPosAnchoredAtRoot = true;
     this.horizontalPosAnchor = (
       this.pmView.dom.firstChild! as HTMLElement
@@ -369,17 +373,17 @@ export class SideMenuView<
   };
 
   onKeyDown = (_event: KeyboardEvent) => {
-    if (this.sideMenuState?.show) {
-      this.sideMenuState.show = false;
-      this.updateSideMenu(this.sideMenuState);
+    if (this.state?.show) {
+      this.state.show = false;
+      this.emitUpdate(this.state);
     }
     this.menuFrozen = false;
   };
 
   onMouseDown = (_event: MouseEvent) => {
-    if (this.sideMenuState && !this.sideMenuState.show) {
-      this.sideMenuState.show = true;
-      this.updateSideMenu(this.sideMenuState);
+    if (this.state && !this.state.show) {
+      this.state.show = true;
+      this.emitUpdate(this.state);
     }
     this.menuFrozen = false;
   };
@@ -421,9 +425,9 @@ export class SideMenuView<
         editorWrapper.contains(event.target as HTMLElement)
       )
     ) {
-      if (this.sideMenuState?.show) {
-        this.sideMenuState.show = false;
-        this.updateSideMenu(this.sideMenuState);
+      if (this.state?.show) {
+        this.state.show = false;
+        this.emitUpdate(this.state);
       }
 
       return;
@@ -440,9 +444,9 @@ export class SideMenuView<
 
     // Closes the menu if the mouse cursor is beyond the editor vertically.
     if (!block || !this.editor.isEditable) {
-      if (this.sideMenuState?.show) {
-        this.sideMenuState.show = false;
-        this.updateSideMenu(this.sideMenuState);
+      if (this.state?.show) {
+        this.state.show = false;
+        this.emitUpdate(this.state);
       }
 
       return;
@@ -450,7 +454,7 @@ export class SideMenuView<
 
     // Doesn't update if the menu is already open and the mouse cursor is still hovering the same block.
     if (
-      this.sideMenuState?.show &&
+      this.state?.show &&
       this.hoveredBlock?.hasAttribute("data-id") &&
       this.hoveredBlock?.getAttribute("data-id") === block.id
     ) {
@@ -470,7 +474,7 @@ export class SideMenuView<
     if (this.editor.isEditable) {
       const blockContentBoundingBox = blockContent.getBoundingClientRect();
 
-      this.sideMenuState = {
+      this.state = {
         show: true,
         referencePos: new DOMRect(
           this.horizontalPosAnchoredAtRoot
@@ -485,16 +489,16 @@ export class SideMenuView<
         )!,
       };
 
-      this.updateSideMenu(this.sideMenuState);
+      this.emitUpdate(this.state);
     }
   };
 
   onScroll = () => {
-    if (this.sideMenuState?.show) {
+    if (this.state?.show) {
       const blockContent = this.hoveredBlock!.firstChild as HTMLElement;
       const blockContentBoundingBox = blockContent.getBoundingClientRect();
 
-      this.sideMenuState.referencePos = new DOMRect(
+      this.state.referencePos = new DOMRect(
         this.horizontalPosAnchoredAtRoot
           ? this.horizontalPosAnchor
           : blockContentBoundingBox.x,
@@ -502,16 +506,16 @@ export class SideMenuView<
         blockContentBoundingBox.width,
         blockContentBoundingBox.height
       );
-      this.updateSideMenu(this.sideMenuState);
+      this.emitUpdate(this.state);
     }
   };
 
   destroy() {
-    if (this.sideMenuState?.show) {
-      this.sideMenuState.show = false;
-      this.updateSideMenu(this.sideMenuState);
+    if (this.state?.show) {
+      this.state.show = false;
+      this.emitUpdate(this.state);
     }
-    document.body.removeEventListener("mousemove", this.onMouseMove);
+    document.body.removeEventListener("mousemove", this.onMouseMove, true);
     document.body.removeEventListener("dragover", this.onDragOver);
     this.pmView.dom.removeEventListener("dragstart", this.onDragStart);
     document.body.removeEventListener("drop", this.onDrop, true);
@@ -521,9 +525,9 @@ export class SideMenuView<
   }
 
   addBlock() {
-    if (this.sideMenuState?.show) {
-      this.sideMenuState.show = false;
-      this.updateSideMenu(this.sideMenuState);
+    if (this.state?.show) {
+      this.state.show = false;
+      this.emitUpdate(this.state);
     }
 
     this.menuFrozen = true;
@@ -560,7 +564,7 @@ export class SideMenuView<
       this.editor._tiptapEditor
         .chain()
         .BNCreateBlock(newBlockInsertionPos)
-        .BNUpdateBlock(newBlockContentPos, { type: "paragraph", props: {} })
+        // .BNUpdateBlock(newBlockContentPos, { type: "paragraph", props: {} })
         .setTextSelection(newBlockContentPos)
         .run();
     } else {
@@ -570,10 +574,9 @@ export class SideMenuView<
     // Focuses and activates the suggestion menu.
     this.pmView.focus();
     this.pmView.dispatch(
-      this.pmView.state.tr.scrollIntoView().setMeta(slashMenuPluginKey, {
-        // TODO import suggestion plugin key
-        activate: true,
-        type: "drag",
+      this.pmView.state.tr.scrollIntoView().setMeta(suggestionMenuPluginKey, {
+        triggerCharacter: "/",
+        fromUserInput: false,
       })
     );
   }
@@ -586,7 +589,7 @@ export class SideMenuProsemirrorPlugin<
   I extends InlineContentSchema,
   S extends StyleSchema
 > extends EventEmitter<any> {
-  private sideMenuView: SideMenuView<BSchema, I, S> | undefined;
+  public view: SideMenuView<BSchema, I, S> | undefined;
   public readonly plugin: Plugin;
 
   constructor(private readonly editor: BlockNoteEditor<BSchema, I, S>) {
@@ -594,14 +597,10 @@ export class SideMenuProsemirrorPlugin<
     this.plugin = new Plugin({
       key: sideMenuPluginKey,
       view: (editorView) => {
-        this.sideMenuView = new SideMenuView(
-          editor,
-          editorView,
-          (sideMenuState) => {
-            this.emit("update", sideMenuState);
-          }
-        );
-        return this.sideMenuView;
+        this.view = new SideMenuView(editor, editorView, (state) => {
+          this.emit("update", state);
+        });
+        return this.view;
       },
     });
   }
@@ -614,7 +613,7 @@ export class SideMenuProsemirrorPlugin<
    * If the block is empty, opens the slash menu. If the block has content,
    * creates a new block below and opens the slash menu in it.
    */
-  addBlock = () => this.sideMenuView!.addBlock();
+  addBlock = () => this.view!.addBlock();
 
   /**
    * Handles drag & drop events for blocks.
@@ -623,7 +622,7 @@ export class SideMenuProsemirrorPlugin<
     dataTransfer: DataTransfer | null;
     clientY: number;
   }) => {
-    this.sideMenuView!.isDragging = true;
+    this.view!.isDragging = true;
     dragStart(event, this.editor);
   };
 
@@ -636,11 +635,11 @@ export class SideMenuProsemirrorPlugin<
    * attached to the same block regardless of which block is hovered by the
    * mouse cursor.
    */
-  freezeMenu = () => (this.sideMenuView!.menuFrozen = true);
+  freezeMenu = () => (this.view!.menuFrozen = true);
   /**
    * Unfreezes the side menu. When frozen, the side menu will stay
    * attached to the same block regardless of which block is hovered by the
    * mouse cursor.
    */
-  unfreezeMenu = () => (this.sideMenuView!.menuFrozen = false);
+  unfreezeMenu = () => (this.view!.menuFrozen = false);
 }

package/src/extensions/SuggestionMenu/DefaultSuggestionItem.ts

@@ -0,0 +1,8 @@
+export type DefaultSuggestionItem = {
+  title: string;
+  onItemClick: () => void;
+  subtext?: string;
+  badge?: string;
+  aliases?: string[];
+  group?: string;
+};

package/src/extensions/SuggestionMenu/SuggestionPlugin.ts

@@ -0,0 +1,353 @@
+import { findParentNode } from "@tiptap/core";
+import { EditorState, Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
+
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
+import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
+import { EventEmitter } from "../../util/EventEmitter";
+
+const findBlock = findParentNode((node) => node.type.name === "blockContainer");
+
+export type SuggestionMenuState = UiElementPosition & {
+  query: string;
+};
+
+class SuggestionMenuView<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+> {
+  private state?: SuggestionMenuState;
+  public emitUpdate: (triggerCharacter: string) => void;
+
+  pluginState: SuggestionPluginState;
+
+  constructor(
+    private readonly editor: BlockNoteEditor<BSchema, I, S>,
+    emitUpdate: (menuName: string, state: SuggestionMenuState) => void
+  ) {
+    this.pluginState = undefined;
+
+    this.emitUpdate = (menuName: string) => {
+      if (!this.state) {
+        throw new Error("Attempting to update uninitialized suggestions menu");
+      }
+
+      emitUpdate(menuName, this.state);
+    };
+
+    document.addEventListener("scroll", this.handleScroll);
+  }
+
+  handleScroll = () => {
+    if (this.state?.show) {
+      const decorationNode = document.querySelector(
+        `[data-decoration-id="${this.pluginState!.decorationId}"]`
+      );
+      this.state.referencePos = decorationNode!.getBoundingClientRect();
+      this.emitUpdate(this.pluginState!.triggerCharacter!);
+    }
+  };
+
+  update(view: EditorView, prevState: EditorState) {
+    const prev: SuggestionPluginState =
+      suggestionMenuPluginKey.getState(prevState);
+    const next: SuggestionPluginState = suggestionMenuPluginKey.getState(
+      view.state
+    );
+
+    // See how the state changed
+    const started = prev === undefined && next !== undefined;
+    const stopped = prev !== undefined && next === undefined;
+    const changed = prev !== undefined && next !== undefined;
+
+    // Cancel when suggestion isn't active
+    if (!started && !changed && !stopped) {
+      return;
+    }
+
+    this.pluginState = stopped ? prev : next;
+
+    if (stopped || !this.editor.isEditable) {
+      this.state!.show = false;
+      this.emitUpdate(this.pluginState!.triggerCharacter);
+
+      return;
+    }
+
+    const decorationNode = document.querySelector(
+      `[data-decoration-id="${this.pluginState!.decorationId}"]`
+    );
+
+    if (this.editor.isEditable) {
+      this.state = {
+        show: true,
+        referencePos: decorationNode!.getBoundingClientRect(),
+        query: this.pluginState!.query,
+      };
+
+      this.emitUpdate(this.pluginState!.triggerCharacter!);
+    }
+  }
+
+  destroy() {
+    document.removeEventListener("scroll", this.handleScroll);
+  }
+
+  closeMenu = () => {
+    this.editor._tiptapEditor.view.dispatch(
+      this.editor._tiptapEditor.view.state.tr.setMeta(
+        suggestionMenuPluginKey,
+        null
+      )
+    );
+  };
+
+  clearQuery = () => {
+    if (this.pluginState === undefined) {
+      return;
+    }
+
+    this.editor._tiptapEditor
+      .chain()
+      .focus()
+      .deleteRange({
+        from:
+          this.pluginState.queryStartPos! -
+          (this.pluginState.fromUserInput
+            ? this.pluginState.triggerCharacter!.length
+            : 0),
+        to: this.editor._tiptapEditor.state.selection.from,
+      })
+      .run();
+  };
+}
+
+type SuggestionPluginState =
+  | {
+      triggerCharacter: string;
+      fromUserInput: boolean;
+      queryStartPos: number;
+      query: string;
+      decorationId: string;
+    }
+  | undefined;
+
+export const suggestionMenuPluginKey = new PluginKey("SuggestionMenuPlugin");
+
+/**
+ * A ProseMirror plugin for suggestions, designed to make '/'-commands possible as well as mentions.
+ *
+ * This is basically a simplified version of TipTap's [Suggestions](https://github.com/ueberdosis/tiptap/tree/db92a9b313c5993b723c85cd30256f1d4a0b65e1/packages/suggestion) plugin.
+ *
+ * This version is adapted from the aforementioned version in the following ways:
+ * - This version supports generic items instead of only strings (to allow for more advanced filtering for example)
+ * - 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 EventEmitter<any> {
+  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;
+        },
+
+        // 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;
+          }
+
+          // Either contains the trigger character if the menu should be shown,
+          // or null if it should be hidden.
+          const suggestionPluginTransactionMeta: {
+            triggerCharacter: string;
+            fromUserInput?: boolean;
+          } | null = transaction.getMeta(suggestionMenuPluginKey);
+
+          // Only opens a menu of no menu is already open
+          if (
+            typeof suggestionPluginTransactionMeta === "object" &&
+            suggestionPluginTransactionMeta !== null &&
+            prev === undefined
+          ) {
+            return {
+              triggerCharacter:
+                suggestionPluginTransactionMeta.triggerCharacter,
+              fromUserInput:
+                suggestionPluginTransactionMeta.fromUserInput !== false,
+              queryStartPos: newState.selection.from,
+              query: "",
+              decorationId: `id_${Math.floor(Math.random() * 0xffffffff)}`,
+            };
+          }
+
+          // 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!)
+          ) {
+            return undefined;
+          }
+
+          const next = { ...prev };
+
+          // Updates the current query.
+          next.query = newState.doc.textBetween(
+            prev.queryStartPos!,
+            newState.selection.from
+          );
+
+          return next;
+        },
+      },
+
+      props: {
+        handleKeyDown(view, event) {
+          const suggestionPluginState: SuggestionPluginState = (
+            this as Plugin
+          ).getState(view.state);
+
+          if (
+            triggerCharacters.includes(event.key) &&
+            suggestionPluginState === undefined
+          ) {
+            event.preventDefault();
+
+            view.dispatch(
+              view.state.tr
+                .insertText(event.key)
+                .scrollIntoView()
+                .setMeta(suggestionMenuPluginKey, {
+                  triggerCharacter: event.key,
+                })
+            );
+
+            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;
+          }
+
+          // 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.fromUserInput) {
+            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
+  ) {
+    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();
+}
+
+export function createSuggestionMenu<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(editor: BlockNoteEditor<BSchema, I, S>, triggerCharacter: string) {
+  editor.suggestionMenus.addTriggerCharacter(triggerCharacter);
+}