@blocknote/core 0.3.0 → 0.4.2

package/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts

@@ -150,8 +150,10 @@ function setDragImage(view: EditorView, from: number, to = from) {
   }
 
   // dataTransfer.setDragImage(element) only works if element is attached to the DOM.
+  unsetDragImage();
   dragImageElement = parentClone;
-  dragImageElement.className = styles.dragPreview;
+  dragImageElement.className =
+    dragImageElement.className + " " + styles.dragPreview;
   document.body.appendChild(dragImageElement);
 }
 
@@ -245,104 +247,164 @@ export class BlockMenuView {
 
     this.blockMenu = blockMenuFactory(this.getStaticParams());
 
+    document.body.addEventListener("drop", this.onDrop, true);
+    document.body.addEventListener("dragover", this.onDragOver);
+
     // Shows or updates menu position whenever the cursor moves, if the menu isn't frozen.
-    document.body.addEventListener(
-      "mousemove",
-      (event) => {
-        if (this.menuFrozen) {
-          return;
-        }
-
-        // 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.editor.view.dom.firstChild! as HTMLElement
-        ).getBoundingClientRect();
-
-        this.horizontalPosAnchor = editorBoundingBox.x;
-
-        // Gets block at mouse cursor's vertical position.
-        const coords = {
-          left: editorBoundingBox.left + editorBoundingBox.width / 2, // take middle of editor
-          top: event.clientY,
-        };
-        const block = getDraggableBlockFromCoords(coords, this.editor.view);
-
-        // Closes the menu if the mouse cursor is beyond the editor vertically.
-        if (!block) {
-          if (this.menuOpen) {
-            this.menuOpen = false;
-            this.blockMenu.hide();
-          }
-
-          return;
-        }
-
-        // Doesn't update if the menu is already open and the mouse cursor is still hovering the same block.
-        if (
-          this.menuOpen &&
-          this.hoveredBlockContent?.hasAttribute("data-id") &&
-          this.hoveredBlockContent?.getAttribute("data-id") === block.id
-        ) {
-          return;
-        }
-
-        // Gets the block's content node, which lets to ignore child blocks when determining the block menu's position.
-        const blockContent = block.node.firstChild as HTMLElement;
-        this.hoveredBlockContent = blockContent;
-
-        if (!blockContent) {
-          return;
-        }
-
-        // Shows or updates elements.
-        if (!this.menuOpen) {
-          this.menuOpen = true;
-          this.blockMenu.render(this.getDynamicParams(), true);
-        } else {
-          this.blockMenu.render(this.getDynamicParams(), false);
-        }
-      },
-      true
-    );
+    document.body.addEventListener("mousemove", this.onMouseMove, true);
 
     // 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",
-      (event) => {
-        if (this.blockMenu.element?.contains(event.target as HTMLElement)) {
-          return;
-        }
-
-        if (this.menuOpen) {
-          this.menuOpen = false;
-          this.blockMenu.hide();
-        }
+    document.body.addEventListener("mousedown", this.onMouseDown, true);
+    document.body.addEventListener("keydown", this.onKeyDown, true);
+  }
 
-        this.menuFrozen = false;
-      },
-      true
-    );
-    document.body.addEventListener(
-      "keydown",
-      () => {
-        if (this.menuOpen) {
-          this.menuOpen = false;
-          this.blockMenu.hide();
-        }
+  /**
+   * If the event is outside of the editor contents,
+   * we dispatch a fake event, so that we can still drop the content
+   * when dragging / dropping to the side of the editor
+   */
+  onDrop = (event: DragEvent) => {
+    if ((event as any).synthetic) {
+      return;
+    }
+    let pos = this.editor.view.posAtCoords({
+      left: event.clientX,
+      top: event.clientY,
+    });
 
-        this.menuFrozen = false;
-      },
-      true
-    );
-  }
+    if (!pos || pos.inside === -1) {
+      const evt = new Event("drop", event) as any;
+      const editorBoundingBox = (
+        this.editor.view.dom.firstChild! as HTMLElement
+      ).getBoundingClientRect();
+      evt.clientX = editorBoundingBox.left + editorBoundingBox.width / 2;
+      evt.clientY = event.clientY;
+      evt.dataTransfer = event.dataTransfer;
+      evt.preventDefault = () => event.preventDefault();
+      evt.synthetic = true; // prevent recursion
+      // console.log("dispatch fake drop");
+      this.editor.view.dom.dispatchEvent(evt);
+    }
+  };
+
+  /**
+   * If the event is outside of the editor contents,
+   * we dispatch a fake event, so that we can still drop the content
+   * when dragging / dropping to the side of the editor
+   */
+  onDragOver = (event: DragEvent) => {
+    if ((event as any).synthetic) {
+      return;
+    }
+    let pos = this.editor.view.posAtCoords({
+      left: event.clientX,
+      top: event.clientY,
+    });
+
+    if (!pos || pos.inside === -1) {
+      const evt = new Event("dragover", event) as any;
+      const editorBoundingBox = (
+        this.editor.view.dom.firstChild! as HTMLElement
+      ).getBoundingClientRect();
+      evt.clientX = editorBoundingBox.left + editorBoundingBox.width / 2;
+      evt.clientY = event.clientY;
+      evt.dataTransfer = event.dataTransfer;
+      evt.preventDefault = () => event.preventDefault();
+      evt.synthetic = true; // prevent recursion
+      // console.log("dispatch fake dragover");
+      this.editor.view.dom.dispatchEvent(evt);
+    }
+  };
+
+  onKeyDown = (_event: KeyboardEvent) => {
+    if (this.menuOpen) {
+      this.menuOpen = false;
+      this.blockMenu.hide();
+    }
+
+    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;
+  };
+
+  onMouseMove = (event: MouseEvent) => {
+    if (this.menuFrozen) {
+      return;
+    }
+
+    // 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.editor.view.dom.firstChild! as HTMLElement
+    ).getBoundingClientRect();
+
+    this.horizontalPosAnchor = editorBoundingBox.x;
+
+    // Gets block at mouse cursor's vertical position.
+    const coords = {
+      left: editorBoundingBox.left + editorBoundingBox.width / 2, // take middle of editor
+      top: event.clientY,
+    };
+    const block = getDraggableBlockFromCoords(coords, this.editor.view);
+
+    // Closes the menu if the mouse cursor is beyond the editor vertically.
+    if (!block) {
+      if (this.menuOpen) {
+        this.menuOpen = false;
+        this.blockMenu.hide();
+      }
+
+      return;
+    }
+
+    // Doesn't update if the menu is already open and the mouse cursor is still hovering the same block.
+    if (
+      this.menuOpen &&
+      this.hoveredBlockContent?.hasAttribute("data-id") &&
+      this.hoveredBlockContent?.getAttribute("data-id") === block.id
+    ) {
+      return;
+    }
+
+    // Gets the block's content node, which lets to ignore child blocks when determining the block menu's position.
+    const blockContent = block.node.firstChild as HTMLElement;
+    this.hoveredBlockContent = blockContent;
+
+    if (!blockContent) {
+      return;
+    }
+
+    // Shows or updates elements.
+    if (!this.menuOpen) {
+      this.menuOpen = true;
+      this.blockMenu.render(this.getDynamicParams(), true);
+    } else {
+      this.blockMenu.render(this.getDynamicParams(), false);
+    }
+  };
 
   destroy() {
     if (this.menuOpen) {
       this.menuOpen = false;
       this.blockMenu.hide();
     }
+    document.body.removeEventListener("mousemove", this.onMouseMove);
+    document.body.removeEventListener("dragover", this.onDragOver);
+    document.body.removeEventListener("drop", this.onDrop);
+    document.body.removeEventListener("mousedown", this.onMouseDown);
+    document.body.removeEventListener("keydown", this.onKeyDown);
   }
 
   addBlock() {

package/src/extensions/FormattingToolbar/FormattingToolbarFactoryTypes.ts

@@ -1,5 +1,5 @@
 import { EditorElement, ElementFactory } from "../../shared/EditorElement";
-import { Block, BlockUpdate } from "../Blocks/apiTypes";
+import { Block, PartialBlock } from "../Blocks/api/blockTypes";
 
 export type FormattingToolbarStaticParams = {
   toggleBold: () => void;
@@ -17,7 +17,7 @@ export type FormattingToolbarStaticParams = {
   increaseBlockIndent: () => void;
   decreaseBlockIndent: () => void;
 
-  updateBlock: (blockUpdate: BlockUpdate) => void;
+  updateBlock: (updatedBlock: PartialBlock) => void;
 };
 
 export type FormattingToolbarDynamicParams = {

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -6,7 +6,7 @@ import {
 } from "@tiptap/core";
 import { EditorState, Plugin, PluginKey } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
-import { Block, BlockUpdate } from "../Blocks/apiTypes";
+import { Block, PartialBlock } from "../Blocks/api/blockTypes";
 import { getBlockInfoFromPos } from "../Blocks/helpers/getBlockInfoFromPos";
 import {
   FormattingToolbar,
@@ -288,11 +288,11 @@ export class FormattingToolbarView {
         this.editor.view.focus();
         this.editor.commands.liftListItem("blockContainer");
       },
-      updateBlock: (blockUpdate: BlockUpdate) => {
+      updateBlock: (updatedBlock: PartialBlock) => {
         this.editor.view.focus();
         this.editor.commands.BNUpdateBlock(
           this.editor.state.selection.from,
-          blockUpdate
+          updatedBlock
         );
       },
     };

package/src/extensions/SlashMenu/SlashMenuExtension.ts

@@ -2,11 +2,10 @@ import { Extension } from "@tiptap/core";
 import { PluginKey } from "prosemirror-state";
 import { createSuggestionPlugin } from "../../shared/plugins/suggestion/SuggestionPlugin";
 import { SuggestionsMenuFactory } from "../../shared/plugins/suggestion/SuggestionsMenuFactoryTypes";
-import defaultCommands from "./defaultCommands";
 import { SlashMenuItem } from "./SlashMenuItem";
 
 export type SlashMenuOptions = {
-  commands: { [key: string]: SlashMenuItem };
+  commands: SlashMenuItem[] | undefined;
   slashMenuFactory: SuggestionsMenuFactory<any> | undefined;
 };
 
@@ -17,16 +16,18 @@ export const SlashMenuExtension = Extension.create<SlashMenuOptions>({
 
   addOptions() {
     return {
-      commands: defaultCommands,
-      slashMenuFactory: undefined, // TODO: fix undefined
+      commands: undefined,
+      slashMenuFactory: undefined,
     };
   },
 
   addProseMirrorPlugins() {
-    if (!this.options.slashMenuFactory) {
-      throw new Error("UI Element factory not defined for SlashMenuExtension");
+    if (!this.options.slashMenuFactory || !this.options.commands) {
+      throw new Error("required args not defined for SlashMenuExtension");
     }
 
+    const commands = this.options.commands;
+
     return [
       createSuggestionPlugin<SlashMenuItem>({
         pluginKey: SlashMenuPluginKey,
@@ -34,12 +35,6 @@ export const SlashMenuExtension = Extension.create<SlashMenuOptions>({
         defaultTriggerCharacter: "/",
         suggestionsMenuFactory: this.options.slashMenuFactory!,
         items: (query) => {
-          const commands = [];
-
-          for (const key in this.options.commands) {
-            commands.push(this.options.commands[key]);
-          }
-
           return commands.filter((cmd: SlashMenuItem) => cmd.match(query));
         },
         onSelectItem: ({ item, editor, range }) => {

package/src/extensions/SlashMenu/SlashMenuItem.ts

@@ -17,7 +17,10 @@ export class SlashMenuItem implements SuggestionItem {
   constructor(
     public readonly name: string,
     public readonly execute: (editor: Editor, range: Range) => void,
-    public readonly aliases: string[] = []
+    public readonly aliases: string[] = [],
+    public readonly group: string,
+    public readonly hint?: string,
+    public readonly shortcut?: string
   ) {}
 
   match(query: string): boolean {

package/src/extensions/SlashMenu/{defaultCommands.tsx → defaultSlashCommands.tsx}

@@ -1,12 +1,13 @@
-import { SlashMenuItem } from "./SlashMenuItem";
 import { Editor, Range } from "@tiptap/core";
+import { formatKeyboardShortcut } from "../../shared/utils";
+import { SlashMenuItem } from "./SlashMenuItem";
 
 /**
  * An array containing commands for creating all default blocks.
  */
-const defaultCommands: { [key: string]: SlashMenuItem } = {
+export const defaultSlashCommands: SlashMenuItem[] = [
   // Command for creating a level 1 heading
-  heading: new SlashMenuItem(
+  new SlashMenuItem(
     "Heading",
     (editor: Editor, range: Range) => {
       return editor
@@ -21,11 +22,14 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         })
         .run();
     },
-    ["h", "heading1", "h1"]
+    ["h", "heading1", "h1"],
+    "Headings",
+    "Used for a top-level heading",
+    formatKeyboardShortcut("Mod-Alt-1")
   ),
 
   // Command for creating a level 2 heading
-  heading2: new SlashMenuItem(
+  new SlashMenuItem(
     "Heading 2",
     (editor: Editor, range: Range) => {
       return editor
@@ -40,11 +44,14 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         })
         .run();
     },
-    ["h2", "heading2", "subheading"]
+    ["h2", "heading2", "subheading"],
+    "Headings",
+    "Used for key sections",
+    formatKeyboardShortcut("Mod-Alt-2")
   ),
 
   // Command for creating a level 3 heading
-  heading3: new SlashMenuItem(
+  new SlashMenuItem(
     "Heading 3",
     (editor: Editor, range: Range) => {
       return editor
@@ -59,11 +66,14 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         })
         .run();
     },
-    ["h3", "heading3", "subheading"]
+    ["h3", "heading3", "subheading"],
+    "Headings",
+    "Used for subsections and group headings",
+    formatKeyboardShortcut("Mod-Alt-3")
   ),
 
   // Command for creating an ordered list
-  numberedList: new SlashMenuItem(
+  new SlashMenuItem(
     "Numbered List",
     (editor: Editor, range: Range) => {
       return editor
@@ -76,11 +86,14 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         })
         .run();
     },
-    ["li", "list", "numberedlist", "numbered list"]
+    ["li", "list", "numberedlist", "numbered list"],
+    "Basic blocks",
+    "Used to display a numbered list",
+    "Mod-Alt-7"
   ),
 
   // Command for creating a bullet list
-  bulletList: new SlashMenuItem(
+  new SlashMenuItem(
     "Bullet List",
     (editor: Editor, range: Range) => {
       return editor
@@ -93,11 +106,14 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         })
         .run();
     },
-    ["ul", "list", "bulletlist", "bullet list"]
+    ["ul", "list", "bulletlist", "bullet list"],
+    "Basic blocks",
+    "Used to display an unordered list",
+    "Mod-Alt-9"
   ),
 
   // Command for creating a paragraph (pretty useless)
-  paragraph: new SlashMenuItem(
+  new SlashMenuItem(
     "Paragraph",
     (editor: Editor, range: Range) => {
       return editor
@@ -110,7 +126,10 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         })
         .run();
     },
-    ["p"]
+    ["p"],
+    "Basic blocks",
+    "Used for the body of your document",
+    "Mod-Alt-0"
   ),
 
   //     replaceRangeWithNode(editor, range, node);
@@ -216,6 +235,4 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
   //   TableIcon,
   //   "Used to create a simple table"
   // ),
-};
-
-export default defaultCommands;
+];

package/src/extensions/SlashMenu/index.ts

@@ -1,6 +1,9 @@
+import { defaultSlashCommands } from "./defaultSlashCommands";
 import { SlashMenuExtension } from "./SlashMenuExtension";
-import defaultCommands from "./defaultCommands";
+import { SlashMenuItem } from "./SlashMenuItem";
 
-export { defaultCommands };
-
-export default SlashMenuExtension;
+export {
+  defaultSlashCommands,
+  SlashMenuItem as SlashCommand,
+  SlashMenuExtension,
+};

package/src/extensions/UniqueID/UniqueID.ts

@@ -123,7 +123,7 @@ const UniqueID = Extension.create({
       new Plugin({
         key: new PluginKey("uniqueID"),
         appendTransaction: (transactions, oldState, newState) => {
-          console.log("appendTransaction");
+          // console.log("appendTransaction");
           const docChanges =
             transactions.some((transaction) => transaction.docChanged) &&
             !oldState.doc.eq(newState.doc);

package/src/index.ts

@@ -1,10 +1,12 @@
 export * from "./BlockNoteEditor";
 export * from "./BlockNoteExtensions";
-export type { Block, BlockUpdate } from "./extensions/Blocks/apiTypes";
-export * from "./extensions/FormattingToolbar/FormattingToolbarFactoryTypes";
+export * from "./extensions/Blocks/api/blockTypes";
 export * from "./extensions/DraggableBlocks/BlockSideMenuFactoryTypes";
+export * from "./extensions/FormattingToolbar/FormattingToolbarFactoryTypes";
 export * from "./extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes";
+export { defaultSlashCommands } from "./extensions/SlashMenu/defaultSlashCommands";
 export * from "./extensions/SlashMenu/SlashMenuItem";
 export * from "./shared/EditorElement";
 export type { SuggestionItem } from "./shared/plugins/suggestion/SuggestionItem";
 export * from "./shared/plugins/suggestion/SuggestionsMenuFactoryTypes";
+export * from "../src/api/Editor";

package/src/shared/utils.ts

@@ -10,3 +10,9 @@ export function formatKeyboardShortcut(shortcut: string) {
     return shortcut.replace("Mod", "Ctrl");
   }
 }
+
+export class UnreachableCaseError extends Error {
+  constructor(val: never) {
+    super(`Unreachable case: ${val}`);
+  }
+}

package/types/src/BlockNoteEditor.d.ts

@@ -1,13 +1,22 @@
-import { Editor, EditorOptions } from "@tiptap/core";
+import { Editor } from "@tiptap/core";
+import { Editor as EditorAPI } from "./api/Editor";
 import { UiFactories } from "./BlockNoteExtensions";
-export type BlockNoteEditorOptions = EditorOptions & {
+import { SlashCommand } from "./extensions/SlashMenu";
+export type BlockNoteEditorOptions = {
     enableBlockNoteExtensions: boolean;
     disableHistoryExtension: boolean;
     uiFactories: UiFactories;
+    slashCommands: SlashCommand[];
+    parentElement: HTMLElement;
+    editorDOMAttributes: Record<string, string>;
+    onUpdate: (editor: BlockNoteEditor) => void;
+    onCreate: (editor: BlockNoteEditor) => void;
+    _tiptapOptions: any;
 };
-export declare class BlockNoteEditor {
-    readonly tiptapEditor: Editor & {
+export declare class BlockNoteEditor extends EditorAPI {
+    readonly _tiptapEditor: Editor & {
         contentComponent: any;
     };
+    get domElement(): HTMLDivElement;
     constructor(options?: Partial<BlockNoteEditorOptions>);
 }

package/types/src/BlockNoteEditor.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/BlockNoteExtensions.d.ts

@@ -1,9 +1,10 @@
 import { Extensions } from "@tiptap/core";
+import { BlockSideMenuFactory } from "./extensions/DraggableBlocks/BlockSideMenuFactoryTypes";
 import { FormattingToolbarFactory } from "./extensions/FormattingToolbar/FormattingToolbarFactoryTypes";
 import { HyperlinkToolbarFactory } from "./extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes";
-import { SuggestionsMenuFactory } from "./shared/plugins/suggestion/SuggestionsMenuFactoryTypes";
-import { BlockSideMenuFactory } from "./extensions/DraggableBlocks/BlockSideMenuFactoryTypes";
+import { SlashCommand } from "./extensions/SlashMenu";
 import { SlashMenuItem } from "./extensions/SlashMenu/SlashMenuItem";
+import { SuggestionsMenuFactory } from "./shared/plugins/suggestion/SuggestionsMenuFactoryTypes";
 export type UiFactories = Partial<{
     formattingToolbarFactory: FormattingToolbarFactory;
     hyperlinkToolbarFactory: HyperlinkToolbarFactory;
@@ -13,4 +14,7 @@ export type UiFactories = Partial<{
 /**
  * Get all the Tiptap extensions BlockNote is configured with by default
  */
-export declare const getBlockNoteExtensions: (uiFactories: UiFactories) => Extensions;
+export declare const getBlockNoteExtensions: (opts: {
+    uiFactories: UiFactories;
+    slashCommands: SlashCommand[];
+}) => Extensions;