@blocknote/core 0.4.0 → 0.4.3

package/src/extensions/Blocks/nodes/BlockContainer.ts

@@ -1,7 +1,10 @@
 import { mergeAttributes, Node } from "@tiptap/core";
 import { Fragment, Node as PMNode, Slice } from "prosemirror-model";
 import { TextSelection } from "prosemirror-state";
-import { blockToNode } from "../../../api/nodeConversions/nodeConversions";
+import {
+  blockToNode,
+  inlineContentToNodes,
+} from "../../../api/nodeConversions/nodeConversions";
 import { PartialBlock } from "../api/blockTypes";
 import { getBlockInfoFromPos } from "../helpers/getBlockInfoFromPos";
 import { PreviousBlockTypePlugin } from "../PreviousBlockTypePlugin";
@@ -329,15 +332,7 @@ export const BlockContainer = Node.create<IBlock>({
               } else {
                 // Adds a text node with the provided styles converted into marks to the content, for each InlineContent
                 // object.
-                for (const styledText of block.content) {
-                  const marks = [];
-
-                  for (const style of styledText.styles) {
-                    marks.push(state.schema.mark(style.type, style.props));
-                  }
-
-                  content.push(state.schema.text(styledText.text, marks));
-                }
+                content = inlineContentToNodes(block.content, state.schema);
               }
 
               // Replaces the contents of the blockContent node with the previously created text node(s).
@@ -350,10 +345,16 @@ export const BlockContainer = Node.create<IBlock>({
 
             // Changes the block type and adds the provided props as node attributes. Also preserves all existing node
             // attributes that are compatible with the new type.
-            state.tr.setNodeMarkup(startPos, state.schema.nodes[block.type], {
-              ...contentNode.attrs,
-              ...block.props,
-            });
+            state.tr.setNodeMarkup(
+              startPos,
+              block.type === undefined
+                ? undefined
+                : state.schema.nodes[block.type],
+              {
+                ...contentNode.attrs,
+                ...block.props,
+              }
+            );
           }
 
           return true;

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/SlashMenu/BaseSlashMenuItem.ts

@@ -0,0 +1,31 @@
+import { SuggestionItem } from "../../shared/plugins/suggestion/SuggestionItem";
+import { BlockNoteEditor } from "../../BlockNoteEditor";
+
+/**
+ * A class that defines a slash command (/<command>).
+ *
+ * (Not to be confused with ProseMirror commands nor TipTap commands.)
+ */
+export class BaseSlashMenuItem 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) => 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
+      );
+    });
+  }
+}

package/src/extensions/SlashMenu/SlashMenuExtension.ts

@@ -2,10 +2,12 @@ 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 { SlashMenuItem } from "./SlashMenuItem";
+import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
+import { BlockNoteEditor } from "../../BlockNoteEditor";
 
 export type SlashMenuOptions = {
-  commands: SlashMenuItem[] | undefined;
+  editor: BlockNoteEditor | undefined;
+  commands: BaseSlashMenuItem[] | undefined;
   slashMenuFactory: SuggestionsMenuFactory<any> | undefined;
 };
 
@@ -16,6 +18,7 @@ export const SlashMenuExtension = Extension.create<SlashMenuOptions>({
 
   addOptions() {
     return {
+      editor: undefined,
       commands: undefined,
       slashMenuFactory: undefined,
     };
@@ -29,16 +32,16 @@ export const SlashMenuExtension = Extension.create<SlashMenuOptions>({
     const commands = this.options.commands;
 
     return [
-      createSuggestionPlugin<SlashMenuItem>({
+      createSuggestionPlugin<BaseSlashMenuItem>({
         pluginKey: SlashMenuPluginKey,
-        editor: this.editor,
+        editor: this.options.editor!,
         defaultTriggerCharacter: "/",
         suggestionsMenuFactory: this.options.slashMenuFactory!,
         items: (query) => {
-          return commands.filter((cmd: SlashMenuItem) => cmd.match(query));
+          return commands.filter((cmd: BaseSlashMenuItem) => cmd.match(query));
         },
-        onSelectItem: ({ item, editor, range }) => {
-          item.execute(editor, range);
+        onSelectItem: ({ item, editor }) => {
+          item.execute(editor);
         },
       }),
     ];

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

@@ -1,135 +1,88 @@
-import { Editor, Range } from "@tiptap/core";
-import { formatKeyboardShortcut } from "../../shared/utils";
-import { SlashMenuItem } from "./SlashMenuItem";
+import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
+import { PartialBlock } from "../Blocks/api/blockTypes";
+import { BlockNoteEditor } from "../../BlockNoteEditor";
+
+function insertOrUpdateBlock(editor: BlockNoteEditor, block: PartialBlock) {
+  const currentBlock = editor.getTextCursorPosition().block;
+
+  if (
+    (currentBlock.content.length === 1 &&
+      currentBlock.content[0].type === "text" &&
+      currentBlock.content[0].text === "/") ||
+    currentBlock.content.length === 0
+  ) {
+    editor.updateBlock(currentBlock, block);
+  } else {
+    editor.insertBlocks([block], currentBlock, "after");
+    editor.setTextCursorPosition(editor.getTextCursorPosition().nextBlock!);
+  }
+}
 
 /**
  * An array containing commands for creating all default blocks.
  */
-export const defaultSlashCommands: SlashMenuItem[] = [
+export const defaultSlashMenuItems: BaseSlashMenuItem[] = [
   // Command for creating a level 1 heading
-  new SlashMenuItem(
+  new BaseSlashMenuItem(
     "Heading",
-    (editor: Editor, range: Range) => {
-      return editor
-        .chain()
-        .focus()
-        .deleteRange(range)
-        .BNCreateOrUpdateBlock(range.from, {
-          type: "heading",
-          props: {
-            level: "1",
-          },
-        })
-        .run();
-    },
-    ["h", "heading1", "h1"],
-    "Headings",
-    "Used for a top-level heading",
-    formatKeyboardShortcut("Mod-Alt-1")
+    (editor) =>
+      insertOrUpdateBlock(editor, {
+        type: "heading",
+        props: { level: "1" },
+      }),
+    ["h", "heading1", "h1"]
   ),
 
   // Command for creating a level 2 heading
-  new SlashMenuItem(
+  new BaseSlashMenuItem(
     "Heading 2",
-    (editor: Editor, range: Range) => {
-      return editor
-        .chain()
-        .focus()
-        .deleteRange(range)
-        .BNCreateOrUpdateBlock(range.from, {
-          type: "heading",
-          props: {
-            level: "2",
-          },
-        })
-        .run();
-    },
-    ["h2", "heading2", "subheading"],
-    "Headings",
-    "Used for key sections",
-    formatKeyboardShortcut("Mod-Alt-2")
+    (editor) =>
+      insertOrUpdateBlock(editor, {
+        type: "heading",
+        props: { level: "2" },
+      }),
+    ["h2", "heading2", "subheading"]
   ),
 
   // Command for creating a level 3 heading
-  new SlashMenuItem(
+  new BaseSlashMenuItem(
     "Heading 3",
-    (editor: Editor, range: Range) => {
-      return editor
-        .chain()
-        .focus()
-        .deleteRange(range)
-        .BNCreateOrUpdateBlock(range.from, {
-          type: "heading",
-          props: {
-            level: "3",
-          },
-        })
-        .run();
-    },
-    ["h3", "heading3", "subheading"],
-    "Headings",
-    "Used for subsections and group headings",
-    formatKeyboardShortcut("Mod-Alt-3")
+    (editor) =>
+      insertOrUpdateBlock(editor, {
+        type: "heading",
+        props: { level: "3" },
+      }),
+    ["h3", "heading3", "subheading"]
   ),
 
   // Command for creating an ordered list
-  new SlashMenuItem(
+  new BaseSlashMenuItem(
     "Numbered List",
-    (editor: Editor, range: Range) => {
-      return editor
-        .chain()
-        .focus()
-        .deleteRange(range)
-        .BNCreateOrUpdateBlock(range.from, {
-          type: "numberedListItem",
-          props: {},
-        })
-        .run();
-    },
-    ["li", "list", "numberedlist", "numbered list"],
-    "Basic blocks",
-    "Used to display a numbered list",
-    "Mod-Alt-7"
+    (editor) =>
+      insertOrUpdateBlock(editor, {
+        type: "numberedListItem",
+      }),
+    ["li", "list", "numberedlist", "numbered list"]
   ),
 
   // Command for creating a bullet list
-  new SlashMenuItem(
+  new BaseSlashMenuItem(
     "Bullet List",
-    (editor: Editor, range: Range) => {
-      return editor
-        .chain()
-        .focus()
-        .deleteRange(range)
-        .BNCreateOrUpdateBlock(range.from, {
-          type: "bulletListItem",
-          props: {},
-        })
-        .run();
-    },
-    ["ul", "list", "bulletlist", "bullet list"],
-    "Basic blocks",
-    "Used to display an unordered list",
-    "Mod-Alt-9"
+    (editor) =>
+      insertOrUpdateBlock(editor, {
+        type: "bulletListItem",
+      }),
+    ["ul", "list", "bulletlist", "bullet list"]
   ),
 
   // Command for creating a paragraph (pretty useless)
-  new SlashMenuItem(
+  new BaseSlashMenuItem(
     "Paragraph",
-    (editor: Editor, range: Range) => {
-      return editor
-        .chain()
-        .focus()
-        .deleteRange(range)
-        .BNCreateOrUpdateBlock(range.from, {
-          type: "paragraph",
-          props: {},
-        })
-        .run();
-    },
-    ["p"],
-    "Basic blocks",
-    "Used for the body of your document",
-    "Mod-Alt-0"
+    (editor) =>
+      insertOrUpdateBlock(editor, {
+        type: "paragraph",
+      }),
+    ["p"]
   ),
 
   //     replaceRangeWithNode(editor, range, node);

package/src/extensions/SlashMenu/index.ts

@@ -1,9 +1,5 @@
-import { defaultSlashCommands } from "./defaultSlashCommands";
+import { defaultSlashMenuItems } from "./defaultSlashMenuItems";
 import { SlashMenuExtension } from "./SlashMenuExtension";
-import { SlashMenuItem } from "./SlashMenuItem";
+import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
 
-export {
-  defaultSlashCommands,
-  SlashMenuItem as SlashCommand,
-  SlashMenuExtension,
-};
+export { defaultSlashMenuItems, BaseSlashMenuItem, SlashMenuExtension };

package/src/index.ts

@@ -4,9 +4,8 @@ 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 { defaultSlashMenuItems } from "./extensions/SlashMenu/defaultSlashMenuItems";
+export * from "./extensions/SlashMenu/BaseSlashMenuItem";
 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/plugins/suggestion/SuggestionItem.ts

@@ -1,17 +1,6 @@
 /**
  * A generic interface used in all suggestion menus (slash menu, mentions, etc)
  */
-export interface SuggestionItem {
-  /**
-   * The name of the item
-   */
-  name: string;
-
-  /**
-   * This function matches this item against a query string, the function should return **true** if the item
-   * matches the query or **false** otherwise.
-   *
-   * @param query the query string
-   */
-  match(query: string): boolean;
+export class SuggestionItem {
+  constructor(public name: string, public match: (query: string) => boolean) {}
 }