@blocknote/core 0.8.1 → 0.8.3

package/src/extensions/{DraggableBlocks/DraggableBlocksPlugin.ts → SideMenu/SideMenuPlugin.ts}

@@ -1,27 +1,27 @@
-import { Editor } from "@tiptap/core";
+import { PluginView } from "@tiptap/pm/state";
 import { Node } from "prosemirror-model";
 import { NodeSelection, Plugin, PluginKey, Selection } from "prosemirror-state";
 import * as pv from "prosemirror-view";
 import { EditorView } from "prosemirror-view";
+import { BlockNoteEditor } from "../../BlockNoteEditor";
 import styles from "../../editor.module.css";
+import { BaseUiElementState } from "../../shared/BaseUiElementTypes";
+import { EventEmitter } from "../../shared/EventEmitter";
+import { Block, BlockSchema } from "../Blocks/api/blockTypes";
 import { getBlockInfoFromPos } from "../Blocks/helpers/getBlockInfoFromPos";
-import { SlashMenuPluginKey } from "../SlashMenu/SlashMenuExtension";
-import {
-  BlockSideMenu,
-  BlockSideMenuDynamicParams,
-  BlockSideMenuFactory,
-  BlockSideMenuStaticParams,
-} from "./BlockSideMenuFactoryTypes";
-import { DraggableBlocksOptions } from "./DraggableBlocksExtension";
+import { slashMenuPluginKey } from "../SlashMenu/SlashMenuPlugin";
 import { MultipleNodeSelection } from "./MultipleNodeSelection";
-import { BlockNoteEditor } from "../../BlockNoteEditor";
-import { BlockSchema } from "../Blocks/api/blockTypes";
 
 const serializeForClipboard = (pv as any).__serializeForClipboard;
 // code based on https://github.com/ueberdosis/tiptap/issues/323#issuecomment-506637799
 
 let dragImageElement: Element | undefined;
 
+export type SideMenuState<BSchema extends BlockSchema> = BaseUiElementState & {
+  // The block that the side menu is attached to.
+  block: Block<BSchema>;
+};
+
 function getDraggableBlockFromCoords(
   coords: { left: number; top: number },
   view: EditorView
@@ -176,7 +176,10 @@ function unsetDragImage() {
   }
 }
 
-function dragStart(e: DragEvent, view: EditorView) {
+function dragStart(
+  e: { dataTransfer: DataTransfer | null; clientY: number },
+  view: EditorView
+) {
   if (!e.dataTransfer) {
     return;
   }
@@ -224,50 +227,37 @@ function dragStart(e: DragEvent, view: EditorView) {
   }
 }
 
-export type BlockMenuViewProps<BSchema extends BlockSchema> = {
-  tiptapEditor: Editor;
-  editor: BlockNoteEditor<BSchema>;
-  blockMenuFactory: BlockSideMenuFactory<BSchema>;
-  horizontalPosAnchoredAtRoot: boolean;
-};
-
-export class BlockMenuView<BSchema extends BlockSchema> {
-  editor: BlockNoteEditor<BSchema>;
-  private ttEditor: Editor;
+export class SideMenuView<BSchema extends BlockSchema> implements PluginView {
+  private sideMenuState?: SideMenuState<BSchema>;
 
   // 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
-  horizontalPosAnchoredAtRoot: boolean;
+  // TODO: Is there any case where we want this to be false?
+  private horizontalPosAnchoredAtRoot: boolean;
+  private horizontalPosAnchor: number;
 
-  horizontalPosAnchor: number;
+  private hoveredBlock: HTMLElement | undefined;
 
-  blockMenu: BlockSideMenu<BSchema>;
+  // Used to check if currently dragged content comes from this editor instance.
+  public isDragging = false;
 
-  hoveredBlock: HTMLElement | undefined;
+  public menuFrozen = false;
 
-  // Used to check if currently dragged content comes from this editor instance.
-  isDragging = false;
-  menuOpen = false;
-  menuFrozen = false;
-
-  constructor({
-    tiptapEditor,
-    editor,
-    blockMenuFactory,
-    horizontalPosAnchoredAtRoot,
-  }: BlockMenuViewProps<BSchema>) {
-    this.editor = editor;
-    this.ttEditor = tiptapEditor;
-    this.horizontalPosAnchoredAtRoot = horizontalPosAnchoredAtRoot;
+  constructor(
+    private readonly editor: BlockNoteEditor<BSchema>,
+    private readonly pmView: EditorView,
+    private readonly updateSideMenu: (
+      sideMenuState: SideMenuState<BSchema>
+    ) => void
+  ) {
+    this.horizontalPosAnchoredAtRoot = true;
     this.horizontalPosAnchor = (
-      this.ttEditor.view.dom.firstChild! as HTMLElement
+      this.pmView.dom.firstChild! as HTMLElement
     ).getBoundingClientRect().x;
 
-    this.blockMenu = blockMenuFactory(this.getStaticParams());
-
     document.body.addEventListener("drop", this.onDrop, true);
     document.body.addEventListener("dragover", this.onDragOver);
-    this.ttEditor.view.dom.addEventListener("dragstart", this.onDragStart);
+    this.pmView.dom.addEventListener("dragstart", this.onDragStart);
 
     // Shows or updates menu position whenever the cursor moves, if the menu isn't frozen.
     document.body.addEventListener("mousemove", this.onMouseMove, true);
@@ -275,9 +265,7 @@ export class BlockMenuView<BSchema extends BlockSchema> {
     // Makes menu scroll with the page.
     document.addEventListener("scroll", this.onScroll);
 
-    // Hides and unfreezes the menu whenever the user selects the editor with the mouse or presses a key.
-    // TODO: Better integration with suggestions menu and only editor scope?
-    document.body.addEventListener("mousedown", this.onMouseDown, true);
+    // Hides and unfreezes the menu whenever the user presses a key.
     document.body.addEventListener("keydown", this.onKeyDown, true);
   }
 
@@ -294,10 +282,13 @@ export class BlockMenuView<BSchema extends BlockSchema> {
    * when dragging / dropping to the side of the editor
    */
   onDrop = (event: DragEvent) => {
+    this.editor._tiptapEditor.commands.blur();
+
     if ((event as any).synthetic || !this.isDragging) {
       return;
     }
-    let pos = this.ttEditor.view.posAtCoords({
+
+    let pos = this.pmView.posAtCoords({
       left: event.clientX,
       top: event.clientY,
     });
@@ -307,7 +298,7 @@ export class BlockMenuView<BSchema extends BlockSchema> {
     if (!pos || pos.inside === -1) {
       const evt = new Event("drop", event) as any;
       const editorBoundingBox = (
-        this.ttEditor.view.dom.firstChild! as HTMLElement
+        this.pmView.dom.firstChild! as HTMLElement
       ).getBoundingClientRect();
       evt.clientX = editorBoundingBox.left + editorBoundingBox.width / 2;
       evt.clientY = event.clientY;
@@ -315,7 +306,7 @@ export class BlockMenuView<BSchema extends BlockSchema> {
       evt.preventDefault = () => event.preventDefault();
       evt.synthetic = true; // prevent recursion
       // console.log("dispatch fake drop");
-      this.ttEditor.view.dom.dispatchEvent(evt);
+      this.pmView.dom.dispatchEvent(evt);
     }
   };
 
@@ -328,7 +319,7 @@ export class BlockMenuView<BSchema extends BlockSchema> {
     if ((event as any).synthetic || !this.isDragging) {
       return;
     }
-    let pos = this.ttEditor.view.posAtCoords({
+    let pos = this.pmView.posAtCoords({
       left: event.clientX,
       top: event.clientY,
     });
@@ -336,7 +327,7 @@ export class BlockMenuView<BSchema extends BlockSchema> {
     if (!pos || pos.inside === -1) {
       const evt = new Event("dragover", event) as any;
       const editorBoundingBox = (
-        this.ttEditor.view.dom.firstChild! as HTMLElement
+        this.pmView.dom.firstChild! as HTMLElement
       ).getBoundingClientRect();
       evt.clientX = editorBoundingBox.left + editorBoundingBox.width / 2;
       evt.clientY = event.clientY;
@@ -344,29 +335,15 @@ export class BlockMenuView<BSchema extends BlockSchema> {
       evt.preventDefault = () => event.preventDefault();
       evt.synthetic = true; // prevent recursion
       // console.log("dispatch fake dragover");
-      this.ttEditor.view.dom.dispatchEvent(evt);
+      this.pmView.dom.dispatchEvent(evt);
     }
   };
 
   onKeyDown = (_event: KeyboardEvent) => {
-    if (this.menuOpen) {
-      this.menuOpen = false;
-      this.blockMenu.hide();
+    if (this.sideMenuState?.show) {
+      this.sideMenuState.show = false;
+      this.updateSideMenu(this.sideMenuState);
     }
-
-    this.menuFrozen = false;
-  };
-
-  onMouseDown = (event: MouseEvent) => {
-    if (this.blockMenu.element?.contains(event.target as HTMLElement)) {
-      return;
-    }
-
-    if (this.menuOpen) {
-      this.menuOpen = false;
-      this.blockMenu.hide();
-    }
-
     this.menuFrozen = false;
   };
 
@@ -380,18 +357,19 @@ export class BlockMenuView<BSchema extends BlockSchema> {
     // blockGroup that wraps all blocks in the editor) for more accurate side
     // menu placement.
     const editorBoundingBox = (
-      this.ttEditor.view.dom.firstChild! as HTMLElement
+      this.pmView.dom.firstChild! as HTMLElement
     ).getBoundingClientRect();
     // We want the full area of the editor to check if the cursor is hovering
     // above it though.
-    const editorOuterBoundingBox =
-      this.ttEditor.view.dom.getBoundingClientRect();
+    const editorOuterBoundingBox = this.pmView.dom.getBoundingClientRect();
     const cursorWithinEditor =
       event.clientX >= editorOuterBoundingBox.left &&
       event.clientX <= editorOuterBoundingBox.right &&
       event.clientY >= editorOuterBoundingBox.top &&
       event.clientY <= editorOuterBoundingBox.bottom;
 
+    const editorWrapper = this.pmView.dom.parentElement!;
+
     // Doesn't update if the mouse hovers an element that's over the editor but
     // isn't a part of it or the side menu.
     if (
@@ -401,15 +379,14 @@ export class BlockMenuView<BSchema extends BlockSchema> {
       event &&
       event.target &&
       // Element is outside the editor
-      this.ttEditor.view.dom !== event.target &&
-      !this.ttEditor.view.dom.contains(event.target as HTMLElement) &&
-      // Element is outside the side menu
-      this.blockMenu.element !== event.target &&
-      !this.blockMenu.element?.contains(event.target as HTMLElement)
+      !(
+        editorWrapper === event.target ||
+        editorWrapper.contains(event.target as HTMLElement)
+      )
     ) {
-      if (this.menuOpen) {
-        this.menuOpen = false;
-        this.blockMenu.hide();
+      if (this.sideMenuState?.show) {
+        this.sideMenuState.show = false;
+        this.updateSideMenu(this.sideMenuState);
       }
 
       return;
@@ -422,13 +399,13 @@ export class BlockMenuView<BSchema extends BlockSchema> {
       left: editorBoundingBox.left + editorBoundingBox.width / 2, // take middle of editor
       top: event.clientY,
     };
-    const block = getDraggableBlockFromCoords(coords, this.ttEditor.view);
+    const block = getDraggableBlockFromCoords(coords, this.pmView);
 
     // Closes the menu if the mouse cursor is beyond the editor vertically.
     if (!block || !this.editor.isEditable) {
-      if (this.menuOpen) {
-        this.menuOpen = false;
-        this.blockMenu.hide();
+      if (this.sideMenuState?.show) {
+        this.sideMenuState.show = false;
+        this.updateSideMenu(this.sideMenuState);
       }
 
       return;
@@ -436,7 +413,7 @@ export class BlockMenuView<BSchema extends BlockSchema> {
 
     // Doesn't update if the menu is already open and the mouse cursor is still hovering the same block.
     if (
-      this.menuOpen &&
+      this.sideMenuState?.show &&
       this.hoveredBlock?.hasAttribute("data-id") &&
       this.hoveredBlock?.getAttribute("data-id") === block.id
     ) {
@@ -454,52 +431,69 @@ export class BlockMenuView<BSchema extends BlockSchema> {
 
     // Shows or updates elements.
     if (this.editor.isEditable) {
-      if (!this.menuOpen) {
-        this.menuOpen = true;
-        this.blockMenu.render(this.getDynamicParams(), true);
-      } else {
-        this.blockMenu.render(this.getDynamicParams(), false);
-      }
+      const blockContentBoundingBox = blockContent.getBoundingClientRect();
+
+      this.sideMenuState = {
+        show: true,
+        referencePos: new DOMRect(
+          this.horizontalPosAnchoredAtRoot
+            ? this.horizontalPosAnchor
+            : blockContentBoundingBox.x,
+          blockContentBoundingBox.y,
+          blockContentBoundingBox.width,
+          blockContentBoundingBox.height
+        ),
+        block: this.editor.getBlock(
+          this.hoveredBlock!.getAttribute("data-id")!
+        )!,
+      };
+
+      this.updateSideMenu(this.sideMenuState);
     }
   };
 
   onScroll = () => {
-    // Editor itself may have padding or other styling which affects size/position, so we get the boundingRect of
-    // the first child (i.e. the blockGroup that wraps all blocks in the editor) for a more accurate bounding box.
-    const editorBoundingBox = (
-      this.ttEditor.view.dom.firstChild! as HTMLElement
-    ).getBoundingClientRect();
+    if (this.sideMenuState?.show) {
+      const blockContent = this.hoveredBlock!.firstChild as HTMLElement;
+      const blockContentBoundingBox = blockContent.getBoundingClientRect();
 
-    this.horizontalPosAnchor = editorBoundingBox.x;
-
-    if (this.menuOpen) {
-      this.blockMenu.render(this.getDynamicParams(), false);
+      this.sideMenuState.referencePos = new DOMRect(
+        this.horizontalPosAnchoredAtRoot
+          ? this.horizontalPosAnchor
+          : blockContentBoundingBox.x,
+        blockContentBoundingBox.y,
+        blockContentBoundingBox.width,
+        blockContentBoundingBox.height
+      );
+      this.updateSideMenu(this.sideMenuState);
     }
   };
 
   destroy() {
-    if (this.menuOpen) {
-      this.menuOpen = false;
-      this.blockMenu.hide();
+    if (this.sideMenuState?.show) {
+      this.sideMenuState.show = false;
+      this.updateSideMenu(this.sideMenuState);
     }
     document.body.removeEventListener("mousemove", this.onMouseMove);
     document.body.removeEventListener("dragover", this.onDragOver);
-    this.ttEditor.view.dom.removeEventListener("dragstart", this.onDragStart);
-    document.body.removeEventListener("drop", this.onDrop);
-    document.body.removeEventListener("mousedown", this.onMouseDown);
+    this.pmView.dom.removeEventListener("dragstart", this.onDragStart);
+    document.body.removeEventListener("drop", this.onDrop, true);
     document.removeEventListener("scroll", this.onScroll);
-    document.body.removeEventListener("keydown", this.onKeyDown);
+    document.body.removeEventListener("keydown", this.onKeyDown, true);
   }
 
   addBlock() {
-    this.menuOpen = false;
+    if (this.sideMenuState?.show) {
+      this.sideMenuState.show = false;
+      this.updateSideMenu(this.sideMenuState);
+    }
+
     this.menuFrozen = true;
-    this.blockMenu.hide();
 
     const blockContent = this.hoveredBlock!.firstChild! as HTMLElement;
     const blockContentBoundingBox = blockContent.getBoundingClientRect();
 
-    const pos = this.ttEditor.view.posAtCoords({
+    const pos = this.pmView.posAtCoords({
       left: blockContentBoundingBox.left + blockContentBoundingBox.width / 2,
       top: blockContentBoundingBox.top + blockContentBoundingBox.height / 2,
     });
@@ -507,7 +501,10 @@ export class BlockMenuView<BSchema extends BlockSchema> {
       return;
     }
 
-    const blockInfo = getBlockInfoFromPos(this.ttEditor.state.doc, pos.pos);
+    const blockInfo = getBlockInfoFromPos(
+      this.editor._tiptapEditor.state.doc,
+      pos.pos
+    );
     if (blockInfo === undefined) {
       return;
     }
@@ -519,75 +516,88 @@ export class BlockMenuView<BSchema extends BlockSchema> {
       const newBlockInsertionPos = endPos + 1;
       const newBlockContentPos = newBlockInsertionPos + 2;
 
-      this.ttEditor
+      this.editor._tiptapEditor
         .chain()
         .BNCreateBlock(newBlockInsertionPos)
         .BNUpdateBlock(newBlockContentPos, { type: "paragraph", props: {} })
         .setTextSelection(newBlockContentPos)
         .run();
     } else {
-      this.ttEditor.commands.setTextSelection(endPos);
+      this.editor._tiptapEditor.commands.setTextSelection(endPos);
     }
 
     // Focuses and activates the suggestion menu.
-    this.ttEditor.view.focus();
-    this.ttEditor.view.dispatch(
-      this.ttEditor.view.state.tr.scrollIntoView().setMeta(SlashMenuPluginKey, {
+    this.pmView.focus();
+    this.pmView.dispatch(
+      this.pmView.state.tr.scrollIntoView().setMeta(slashMenuPluginKey, {
         // TODO import suggestion plugin key
         activate: true,
         type: "drag",
       })
     );
   }
+}
 
-  getStaticParams(): BlockSideMenuStaticParams<BSchema> {
-    return {
-      editor: this.editor,
-      addBlock: () => this.addBlock(),
-      blockDragStart: (event: DragEvent) => {
-        // Sets isDragging when dragging blocks.
-        this.isDragging = true;
-        dragStart(event, this.ttEditor.view);
+export const sideMenuPluginKey = new PluginKey("SideMenuPlugin");
+
+export class SideMenuProsemirrorPlugin<
+  BSchema extends BlockSchema
+> extends EventEmitter<any> {
+  private sideMenuView: SideMenuView<BSchema> | undefined;
+  public readonly plugin: Plugin;
+
+  constructor(private readonly editor: BlockNoteEditor<BSchema>) {
+    super();
+    this.plugin = new Plugin({
+      key: sideMenuPluginKey,
+      view: (editorView) => {
+        this.sideMenuView = new SideMenuView(
+          editor,
+          editorView,
+          (sideMenuState) => {
+            this.emit("update", sideMenuState);
+          }
+        );
+        return this.sideMenuView;
       },
-      blockDragEnd: () => unsetDragImage(),
-      freezeMenu: () => {
-        this.menuFrozen = true;
-      },
-      unfreezeMenu: () => {
-        this.menuFrozen = false;
-      },
-    };
+    });
   }
 
-  getDynamicParams(): BlockSideMenuDynamicParams<BSchema> {
-    const blockContent = this.hoveredBlock!.firstChild! as HTMLElement;
-    const blockContentBoundingBox = blockContent.getBoundingClientRect();
-
-    return {
-      block: this.editor.getBlock(this.hoveredBlock!.getAttribute("data-id")!)!,
-      referenceRect: new DOMRect(
-        this.horizontalPosAnchoredAtRoot
-          ? this.horizontalPosAnchor
-          : blockContentBoundingBox.x,
-        blockContentBoundingBox.y,
-        blockContentBoundingBox.width,
-        blockContentBoundingBox.height
-      ),
-    };
+  public onUpdate(callback: (state: SideMenuState<BSchema>) => void) {
+    return this.on("update", callback);
   }
-}
 
-export const createDraggableBlocksPlugin = <BSchema extends BlockSchema>(
-  options: DraggableBlocksOptions<BSchema>
-) => {
-  return new Plugin({
-    key: new PluginKey("DraggableBlocksPlugin"),
-    view: () =>
-      new BlockMenuView({
-        tiptapEditor: options.tiptapEditor,
-        editor: options.editor,
-        blockMenuFactory: options.blockSideMenuFactory,
-        horizontalPosAnchoredAtRoot: true,
-      }),
-  });
-};
+  /**
+   * 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();
+
+  /**
+   * Handles drag & drop events for blocks.
+   */
+  blockDragStart = (event: {
+    dataTransfer: DataTransfer | null;
+    clientY: number;
+  }) => {
+    this.sideMenuView!.isDragging = true;
+    dragStart(event, this.editor.prosemirrorView);
+  };
+
+  /**
+   * Handles drag & drop events for blocks.
+   */
+  blockDragEnd = () => unsetDragImage();
+  /**
+   * Freezes 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.
+   */
+  freezeMenu = () => (this.sideMenuView!.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);
+}

package/src/extensions/SlashMenu/BaseSlashMenuItem.ts

@@ -1,34 +1,11 @@
 import { SuggestionItem } from "../../shared/plugins/suggestion/SuggestionItem";
 import { BlockNoteEditor } from "../../BlockNoteEditor";
 import { BlockSchema } from "../Blocks/api/blockTypes";
+import { DefaultBlockSchema } from "../Blocks/api/defaultBlocks";
 
-/**
- * A class that defines a slash command (/<command>).
- *
- * (Not to be confused with ProseMirror commands nor TipTap commands.)
- */
-export class BaseSlashMenuItem<
-  BSchema extends BlockSchema
-> extends SuggestionItem {
-  /**
-   * Constructs a new slash-command.
-   *
-   * @param name The name of the command
-   * @param execute The callback for creating a new node
-   * @param aliases Aliases for this command
-   */
-  constructor(
-    public readonly name: string,
-    public readonly execute: (editor: BlockNoteEditor<BSchema>) => void,
-    public readonly aliases: string[] = []
-  ) {
-    super(name, (query: string): boolean => {
-      return (
-        this.name.toLowerCase().startsWith(query.toLowerCase()) ||
-        this.aliases.filter((alias) =>
-          alias.toLowerCase().startsWith(query.toLowerCase())
-        ).length !== 0
-      );
-    });
-  }
-}
+export type BaseSlashMenuItem<
+  BSchema extends BlockSchema = DefaultBlockSchema
+> = SuggestionItem & {
+  execute: (editor: BlockNoteEditor<BSchema>) => void;
+  aliases?: string[];
+};

package/src/extensions/SlashMenu/SlashMenuPlugin.ts

@@ -0,0 +1,51 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+
+import { BlockNoteEditor } from "../../BlockNoteEditor";
+import { EventEmitter } from "../../shared/EventEmitter";
+import {
+  SuggestionsMenuState,
+  setupSuggestionsMenu,
+} from "../../shared/plugins/suggestion/SuggestionPlugin";
+import { BlockSchema } from "../Blocks/api/blockTypes";
+import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
+
+export const slashMenuPluginKey = new PluginKey("SlashMenuPlugin");
+
+export class SlashMenuProsemirrorPlugin<
+  BSchema extends BlockSchema,
+  SlashMenuItem extends BaseSlashMenuItem<BSchema>
+> extends EventEmitter<any> {
+  public readonly plugin: Plugin;
+  public readonly itemCallback: (item: SlashMenuItem) => void;
+
+  constructor(editor: BlockNoteEditor<BSchema>, items: SlashMenuItem[]) {
+    super();
+    const suggestions = setupSuggestionsMenu<SlashMenuItem, BSchema>(
+      editor,
+      (state) => {
+        this.emit("update", state);
+      },
+      slashMenuPluginKey,
+      "/",
+      (query) =>
+        items.filter(
+          ({ name, aliases }: SlashMenuItem) =>
+            name.toLowerCase().startsWith(query.toLowerCase()) ||
+            (aliases &&
+              aliases.filter((alias) =>
+                alias.toLowerCase().startsWith(query.toLowerCase())
+              ).length !== 0)
+        ),
+      ({ item, editor }) => item.execute(editor)
+    );
+
+    this.plugin = suggestions.plugin;
+    this.itemCallback = suggestions.itemCallback;
+  }
+
+  public onUpdate(
+    callback: (state: SuggestionsMenuState<SlashMenuItem>) => void
+  ) {
+    return this.on("update", callback);
+  }
+}