@blocknote/core 0.2.2 → 0.2.4-alpha.7

package/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts

@@ -3,36 +3,23 @@ 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 { MultipleNodeSelection } from "../Blocks/MultipleNodeSelection";
-import { DraggableBlocksOptions } from "./DraggableBlocksExtension";
+import styles from "../../editor.module.css";
+import { getBlockInfoFromPos } from "../Blocks/helpers/getBlockInfoFromPos";
+import { SlashMenuPluginKey } from "../SlashMenu/SlashMenuExtension";
 import {
   BlockSideMenu,
   BlockSideMenuDynamicParams,
   BlockSideMenuFactory,
   BlockSideMenuStaticParams,
 } from "./BlockSideMenuFactoryTypes";
-import { getBlockInfoFromPos } from "../Blocks/helpers/getBlockInfoFromPos";
-import { SlashMenuPluginKey } from "../SlashMenu/SlashMenuExtension";
-import styles from "../../editor.module.css";
+import { DraggableBlocksOptions } from "./DraggableBlocksExtension";
+import { MultipleNodeSelection } from "./MultipleNodeSelection";
 
 const serializeForClipboard = (pv as any).__serializeForClipboard;
 // code based on https://github.com/ueberdosis/tiptap/issues/323#issuecomment-506637799
 
-let horizontalAnchor: number;
 let dragImageElement: Element | undefined;
 
-function getHorizontalAnchor() {
-  if (!horizontalAnchor) {
-    const firstBlockGroup = document.querySelector(
-      ".ProseMirror > [class*='blockGroup']"
-    ) as HTMLElement | undefined; // first block group node
-    if (firstBlockGroup) {
-      horizontalAnchor = absoluteRect(firstBlockGroup).left;
-    } // Anchor to the left of the first block group
-  }
-  return horizontalAnchor;
-}
-
 export function createRect(rect: DOMRect) {
   let newRect = {
     left: rect.left + document.body.scrollLeft,
@@ -47,10 +34,6 @@ export function createRect(rect: DOMRect) {
   return newRect;
 }
 
-export function absoluteRect(element: HTMLElement) {
-  return createRect(element.getBoundingClientRect());
-}
-
 function getDraggableBlockFromCoords(
   coords: { left: number; top: number },
   view: EditorView
@@ -184,8 +167,10 @@ function dragStart(e: DragEvent, view: EditorView) {
     return;
   }
 
+  const editorBoundingBox = view.dom.getBoundingClientRect();
+
   let coords = {
-    left: view.dom.clientWidth / 2, // take middle of editor
+    left: editorBoundingBox.left + editorBoundingBox.width / 2, // take middle of editor
     top: e.clientY,
   };
 
@@ -238,9 +223,11 @@ export class BlockMenuView {
   // When false, the drag handle with be just to the left of the element
   horizontalPosAnchoredAtRoot: boolean;
 
+  horizontalPosAnchor: number;
+
   blockMenu: BlockSideMenu;
 
-  hoveredBlock: HTMLElement | undefined;
+  hoveredBlockContent: HTMLElement | undefined;
 
   menuOpen = false;
   menuFrozen = false;
@@ -252,6 +239,9 @@ export class BlockMenuView {
   }: BlockMenuViewProps) {
     this.editor = editor;
     this.horizontalPosAnchoredAtRoot = horizontalPosAnchoredAtRoot;
+    this.horizontalPosAnchor = (
+      editor.view.dom.firstChild! as HTMLElement
+    ).getBoundingClientRect().x;
 
     this.blockMenu = blockMenuFactory(this.getStaticParams());
 
@@ -263,9 +253,17 @@ export class BlockMenuView {
           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: this.editor.view.dom.clientWidth / 2, // take middle of editor
+          left: editorBoundingBox.left + editorBoundingBox.width / 2, // take middle of editor
           top: event.clientY,
         };
         const block = getDraggableBlockFromCoords(coords, this.editor.view);
@@ -283,15 +281,15 @@ export class BlockMenuView {
         // Doesn't update if the menu is already open and the mouse cursor is still hovering the same block.
         if (
           this.menuOpen &&
-          this.hoveredBlock?.hasAttribute("data-id") &&
-          this.hoveredBlock?.getAttribute("data-id") === block.id
+          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.hoveredBlock = blockContent;
+        this.hoveredBlockContent = blockContent;
 
         if (!blockContent) {
           return;
@@ -352,11 +350,12 @@ export class BlockMenuView {
     this.menuFrozen = true;
     this.blockMenu.hide();
 
-    const blockBoundingBox = this.hoveredBlock!.getBoundingClientRect();
+    const blockContentBoundingBox =
+      this.hoveredBlockContent!.getBoundingClientRect();
 
     const pos = this.editor.view.posAtCoords({
-      left: blockBoundingBox.left,
-      top: blockBoundingBox.top,
+      left: blockContentBoundingBox.left + blockContentBoundingBox.width / 2,
+      top: blockContentBoundingBox.top + blockContentBoundingBox.height / 2,
     });
     if (!pos) {
       return;
@@ -377,9 +376,11 @@ export class BlockMenuView {
       this.editor
         .chain()
         .BNCreateBlock(newBlockInsertionPos)
-        .BNSetContentType(newBlockContentPos, { name: "textContent" })
+        .BNUpdateBlock(newBlockContentPos, { type: "paragraph", props: {} })
         .setTextSelection(newBlockContentPos)
         .run();
+    } else {
+      this.editor.commands.setTextSelection(endPos);
     }
 
     // Focuses and activates the suggestion menu.
@@ -397,11 +398,12 @@ export class BlockMenuView {
     this.menuOpen = false;
     this.blockMenu.hide();
 
-    const blockBoundingBox = this.hoveredBlock!.getBoundingClientRect();
+    const blockContentBoundingBox =
+      this.hoveredBlockContent!.getBoundingClientRect();
 
     const pos = this.editor.view.posAtCoords({
-      left: blockBoundingBox.left,
-      top: blockBoundingBox.top,
+      left: blockContentBoundingBox.left + blockContentBoundingBox.width / 2,
+      top: blockContentBoundingBox.top + blockContentBoundingBox.height / 2,
     });
     if (!pos) {
       return;
@@ -410,6 +412,42 @@ export class BlockMenuView {
     this.editor.commands.BNDeleteBlock(pos.pos);
   }
 
+  setBlockBackgroundColor(color: string) {
+    this.menuOpen = false;
+    this.blockMenu.hide();
+
+    const blockContentBoundingBox =
+      this.hoveredBlockContent!.getBoundingClientRect();
+
+    const pos = this.editor.view.posAtCoords({
+      left: blockContentBoundingBox.left + blockContentBoundingBox.width / 2,
+      top: blockContentBoundingBox.top + blockContentBoundingBox.height / 2,
+    });
+    if (!pos) {
+      return;
+    }
+
+    this.editor.commands.setBlockBackgroundColor(pos.pos, color);
+  }
+
+  setBlockTextColor(color: string) {
+    this.menuOpen = false;
+    this.blockMenu.hide();
+
+    const blockContentBoundingBox =
+      this.hoveredBlockContent!.getBoundingClientRect();
+
+    const pos = this.editor.view.posAtCoords({
+      left: blockContentBoundingBox.left + blockContentBoundingBox.width / 2,
+      top: blockContentBoundingBox.top + blockContentBoundingBox.height / 2,
+    });
+    if (!pos) {
+      return;
+    }
+
+    this.editor.commands.setBlockTextColor(pos.pos, color);
+  }
+
   getStaticParams(): BlockSideMenuStaticParams {
     return {
       addBlock: () => this.addBlock(),
@@ -422,20 +460,27 @@ export class BlockMenuView {
       unfreezeMenu: () => {
         this.menuFrozen = false;
       },
+      setBlockBackgroundColor: (color: string) =>
+        this.setBlockBackgroundColor(color),
+      setBlockTextColor: (color: string) => this.setBlockTextColor(color),
     };
   }
 
   getDynamicParams(): BlockSideMenuDynamicParams {
-    const blockBoundingBox = this.hoveredBlock!.getBoundingClientRect();
+    const blockContentBoundingBox =
+      this.hoveredBlockContent!.getBoundingClientRect();
 
     return {
-      blockBoundingBox: new DOMRect(
+      blockBackgroundColor:
+        this.editor.getAttributes("blockContainer").backgroundColor,
+      blockTextColor: this.editor.getAttributes("blockContainer").textColor,
+      referenceRect: new DOMRect(
         this.horizontalPosAnchoredAtRoot
-          ? getHorizontalAnchor()
-          : blockBoundingBox.x,
-        blockBoundingBox.y,
-        blockBoundingBox.width,
-        blockBoundingBox.height
+          ? this.horizontalPosAnchor
+          : blockContentBoundingBox.x,
+        blockContentBoundingBox.y,
+        blockContentBoundingBox.width,
+        blockContentBoundingBox.height
       ),
     };
   }

package/src/extensions/FormattingToolbar/FormattingToolbarFactoryTypes.ts

@@ -1,5 +1,5 @@
 import { EditorElement, ElementFactory } from "../../shared/EditorElement";
-import { BlockContentType } from "../Blocks/nodes/Block";
+import { Block, BlockUpdate } from "../Blocks/apiTypes";
 
 export type FormattingToolbarStaticParams = {
   toggleBold: () => void;
@@ -8,7 +8,16 @@ export type FormattingToolbarStaticParams = {
   toggleStrike: () => void;
   setHyperlink: (url: string, text?: string) => void;
 
-  setBlockType: (type: BlockContentType) => void;
+  setTextColor: (color: string) => void;
+  setBackgroundColor: (color: string) => void;
+  setTextAlignment: (
+    textAlignment: "left" | "center" | "right" | "justify"
+  ) => void;
+
+  increaseBlockIndent: () => void;
+  decreaseBlockIndent: () => void;
+
+  updateBlock: (blockUpdate: BlockUpdate) => void;
 };
 
 export type FormattingToolbarDynamicParams = {
@@ -20,12 +29,16 @@ export type FormattingToolbarDynamicParams = {
   activeHyperlinkUrl: string;
   activeHyperlinkText: string;
 
-  // BlockContentType is mostly used to set a block's type, so the attr field is optional as block content types have
-  // default values for attributes. However, it means that a block type's attributes field will never be undefined due to
-  // these default values, which the Required type enforces.
-  activeBlockType: Required<BlockContentType>;
+  textColor: string;
+  backgroundColor: string;
+  textAlignment: "left" | "center" | "right" | "justify";
+
+  canIncreaseBlockIndent: boolean;
+  canDecreaseBlockIndent: boolean;
+
+  block: Block;
 
-  selectionBoundingBox: DOMRect;
+  referenceRect: DOMRect;
 };
 
 export type FormattingToolbar = EditorElement<FormattingToolbarDynamicParams>;

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -6,13 +6,14 @@ import {
 } from "@tiptap/core";
 import { EditorState, Plugin, PluginKey } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
+import { Block, BlockUpdate } from "../Blocks/apiTypes";
+import { getBlockInfoFromPos } from "../Blocks/helpers/getBlockInfoFromPos";
 import {
   FormattingToolbar,
   FormattingToolbarDynamicParams,
   FormattingToolbarFactory,
   FormattingToolbarStaticParams,
 } from "./FormattingToolbarFactoryTypes";
-import { BlockContentType } from "../Blocks/nodes/Block";
 
 // Same as TipTap bubblemenu plugin, but with these changes:
 // https://github.com/ueberdosis/tiptap/pull/2596/files
@@ -265,35 +266,73 @@ export class FormattingToolbarView {
         );
         this.editor.view.focus();
       },
-      setBlockType: (type: BlockContentType) => {
+      setTextColor: (color: string) => {
         this.editor.view.focus();
-        this.editor.commands.BNSetContentType(
+        this.editor.commands.setTextColor(color);
+      },
+      setBackgroundColor: (color: string) => {
+        this.editor.view.focus();
+        this.editor.commands.setBackgroundColor(color);
+      },
+      setTextAlignment: (
+        textAlignment: "left" | "center" | "right" | "justify"
+      ) => {
+        this.editor.view.focus();
+        this.editor.commands.setTextAlignment(textAlignment);
+      },
+      increaseBlockIndent: () => {
+        this.editor.view.focus();
+        this.editor.commands.sinkListItem("blockContainer");
+      },
+      decreaseBlockIndent: () => {
+        this.editor.view.focus();
+        this.editor.commands.liftListItem("blockContainer");
+      },
+      updateBlock: (blockUpdate: BlockUpdate) => {
+        this.editor.view.focus();
+        this.editor.commands.BNUpdateBlock(
           this.editor.state.selection.from,
-          type
+          blockUpdate
         );
       },
     };
   }
 
   getDynamicParams(): FormattingToolbarDynamicParams {
+    const blockInfo = getBlockInfoFromPos(
+      this.editor.state.doc,
+      this.editor.state.selection.from
+    )!;
+
     return {
       boldIsActive: this.editor.isActive("bold"),
       italicIsActive: this.editor.isActive("italic"),
       underlineIsActive: this.editor.isActive("underline"),
       strikeIsActive: this.editor.isActive("strike"),
       hyperlinkIsActive: this.editor.isActive("link"),
-      activeHyperlinkUrl: this.editor.getAttributes("link").href
-        ? this.editor.getAttributes("link").href
-        : "",
+      activeHyperlinkUrl: this.editor.getAttributes("link").href || "",
       activeHyperlinkText: this.editor.state.doc.textBetween(
         this.editor.state.selection.from,
         this.editor.state.selection.to
       ),
-      activeBlockType: {
-        name: this.editor.state.selection.$from.node().type.name,
-        attrs: this.editor.state.selection.$from.node().attrs,
-      } as Required<BlockContentType>,
-      selectionBoundingBox: this.getSelectionBoundingBox(),
+      textColor: this.editor.getAttributes("textColor").color || "default",
+      backgroundColor:
+        this.editor.getAttributes("backgroundColor").color || "default",
+      textAlignment:
+        this.editor.getAttributes(blockInfo.contentType).textAlignment ||
+        "left",
+      canIncreaseBlockIndent:
+        this.editor.state.doc
+          .resolve(blockInfo.startPos)
+          .index(blockInfo.depth - 1) > 0,
+      canDecreaseBlockIndent: blockInfo.depth > 2,
+      // Needs type cast as there is no way to create a type that dynamically updates based on which extensions are
+      // loaded by the editor.
+      block: {
+        type: blockInfo.contentType.name,
+        props: blockInfo.contentNode.attrs,
+      } as Block,
+      referenceRect: this.getSelectionBoundingBox(),
     };
   }
 }

package/src/extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes.ts

@@ -9,7 +9,7 @@ export type HyperlinkToolbarDynamicParams = {
   url: string;
   text: string;
 
-  boundingBox: DOMRect;
+  referenceRect: DOMRect;
 };
 
 export type HyperlinkToolbar = EditorElement<HyperlinkToolbarDynamicParams>;

package/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts

@@ -166,6 +166,8 @@ class HyperlinkToolbarView {
 
       // Updates menu.
       this.hyperlinkToolbar.render(this.getDynamicParams(), false);
+
+      return;
     }
 
     // Hides menu.
@@ -227,7 +229,7 @@ class HyperlinkToolbarView {
         this.hyperlinkMarkRange!.from,
         this.hyperlinkMarkRange!.to
       ),
-      boundingBox: posToDOMRect(
+      referenceRect: posToDOMRect(
         this.editor.view,
         this.hyperlinkMarkRange!.from,
         this.hyperlinkMarkRange!.to

package/src/extensions/Placeholder/PlaceholderExtension.ts

@@ -81,7 +81,7 @@ export const Placeholder = Extension.create<PlaceholderOptions>({
                 }
 
                 // If slash menu is of drag type and active, show the filter placeholder
-                if (menuState?.type === "drag" && menuState?.active) {
+                if (menuState?.triggerCharacter === "" && menuState?.active) {
                   classes.push(this.options.isFilterClass);
                 }
                 // using widget, didn't work (caret position bug)

package/src/extensions/SlashMenu/SlashMenuExtension.ts

@@ -31,7 +31,7 @@ export const SlashMenuExtension = Extension.create<SlashMenuOptions>({
       createSuggestionPlugin<SlashMenuItem>({
         pluginKey: SlashMenuPluginKey,
         editor: this.editor,
-        char: "/",
+        defaultTriggerCharacter: "/",
         suggestionsMenuFactory: this.options.slashMenuFactory!,
         items: (query) => {
           const commands = [];

package/src/extensions/SlashMenu/SlashMenuItem.ts

@@ -1,49 +1,24 @@
 import { Editor, Range } from "@tiptap/core";
 import { SuggestionItem } from "../../shared/plugins/suggestion/SuggestionItem";
 
-export type SlashMenuCallback = (editor: Editor, range: Range) => boolean;
-
-export enum SlashMenuGroups {
-  HEADINGS = "Headings",
-  BASIC_BLOCKS = "Basic Blocks",
-  CODE = "Code Blocks",
-
-  // Just some examples, that are not currently in use
-  INLINE = "Inline",
-  EMBED = "Embed",
-  PLUGIN = "Plugin",
-}
-
 /**
  * A class that defines a slash command (/<command>).
  *
  * Not to be confused with ProseMirror commands nor TipTap commands.
  */
 export class SlashMenuItem implements SuggestionItem {
-  groupName: string;
-  // other parameters initialized in the constructor
-
   /**
    * Constructs a new slash-command.
    *
    * @param name The name of the command
-   * @param group Used to organize the menu
    * @param execute The callback for creating a new node
    * @param aliases Aliases for this command
-   * @param icon To be shown next to the name in the menu
-   * @param hint Short description of command
-   * @param shortcut Info about keyboard shortcut that would activate this command
    */
   constructor(
     public readonly name: string,
-    public readonly group: SlashMenuGroups,
-    public readonly execute: SlashMenuCallback,
-    public readonly aliases: string[] = [],
-    public readonly hint?: string,
-    public readonly shortcut?: string
-  ) {
-    this.groupName = group;
-  }
+    public readonly execute: (editor: Editor, range: Range) => void,
+    public readonly aliases: string[] = []
+  ) {}
 
   match(query: string): boolean {
     return (

package/src/extensions/SlashMenu/defaultCommands.tsx

@@ -1,5 +1,5 @@
-import { formatKeyboardShortcut } from "../../shared/utils";
-import { SlashMenuGroups, SlashMenuItem } from "./SlashMenuItem";
+import { SlashMenuItem } from "./SlashMenuItem";
+import { Editor, Range } from "@tiptap/core";
 
 /**
  * An array containing commands for creating all default blocks.
@@ -8,128 +8,109 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
   // Command for creating a level 1 heading
   heading: new SlashMenuItem(
     "Heading",
-    SlashMenuGroups.HEADINGS,
-    (editor, range) => {
+    (editor: Editor, range: Range) => {
       return editor
         .chain()
         .focus()
         .deleteRange(range)
-        .BNCreateBlockOrSetContentType(range.from, {
-          name: "headingContent",
-          attrs: {
-            headingLevel: "1",
+        .BNCreateOrUpdateBlock(range.from, {
+          type: "heading",
+          props: {
+            level: "1",
           },
         })
         .run();
     },
-    ["h", "heading1", "h1"],
-    "Used for a top-level heading",
-    formatKeyboardShortcut("Mod-Alt-1")
+    ["h", "heading1", "h1"]
   ),
 
   // Command for creating a level 2 heading
   heading2: new SlashMenuItem(
     "Heading 2",
-    SlashMenuGroups.HEADINGS,
-    (editor, range) => {
+    (editor: Editor, range: Range) => {
       return editor
         .chain()
         .focus()
         .deleteRange(range)
-        .BNCreateBlockOrSetContentType(range.from, {
-          name: "headingContent",
-          attrs: {
-            headingLevel: "2",
+        .BNCreateOrUpdateBlock(range.from, {
+          type: "heading",
+          props: {
+            level: "2",
           },
         })
         .run();
     },
-    ["h2", "heading2", "subheading"],
-    "Used for key sections",
-    formatKeyboardShortcut("Mod-Alt-2")
+    ["h2", "heading2", "subheading"]
   ),
 
   // Command for creating a level 3 heading
   heading3: new SlashMenuItem(
     "Heading 3",
-    SlashMenuGroups.HEADINGS,
-    (editor, range) => {
+    (editor: Editor, range: Range) => {
       return editor
         .chain()
         .focus()
         .deleteRange(range)
-        .BNCreateBlockOrSetContentType(range.from, {
-          name: "headingContent",
-          attrs: {
-            headingLevel: "3",
+        .BNCreateOrUpdateBlock(range.from, {
+          type: "heading",
+          props: {
+            level: "3",
           },
         })
         .run();
     },
-    ["h3", "heading3", "subheading"],
-    "Used for subsections and group headings",
-    formatKeyboardShortcut("Mod-Alt-3")
+    ["h3", "heading3", "subheading"]
   ),
 
   // Command for creating an ordered list
   numberedList: new SlashMenuItem(
     "Numbered List",
-    SlashMenuGroups.BASIC_BLOCKS,
-    (editor, range) => {
+    (editor: Editor, range: Range) => {
       return editor
         .chain()
         .focus()
         .deleteRange(range)
-        .BNCreateBlockOrSetContentType(range.from, {
-          name: "listItemContent",
-          attrs: {
-            listItemType: "ordered",
-          },
+        .BNCreateOrUpdateBlock(range.from, {
+          type: "numberedListItem",
+          props: {},
         })
         .run();
     },
-    ["li", "list", "numberedlist", "numbered list"],
-    "Used to display a numbered list",
-    formatKeyboardShortcut("Mod-Shift-7")
+    ["li", "list", "numberedlist", "numbered list"]
   ),
 
   // Command for creating a bullet list
   bulletList: new SlashMenuItem(
     "Bullet List",
-    SlashMenuGroups.BASIC_BLOCKS,
-    (editor, range) => {
+    (editor: Editor, range: Range) => {
       return editor
         .chain()
         .focus()
         .deleteRange(range)
-        .BNCreateBlockOrSetContentType(range.from, {
-          name: "listItemContent",
-          attrs: {
-            listItemType: "unordered",
-          },
+        .BNCreateOrUpdateBlock(range.from, {
+          type: "bulletListItem",
+          props: {},
         })
         .run();
     },
-    ["ul", "list", "bulletlist", "bullet list"],
-    "Used to display an unordered list",
-    formatKeyboardShortcut("Mod-Shift-8")
+    ["ul", "list", "bulletlist", "bullet list"]
   ),
 
   // Command for creating a paragraph (pretty useless)
   paragraph: new SlashMenuItem(
     "Paragraph",
-    SlashMenuGroups.BASIC_BLOCKS,
-    (editor, range) => {
+    (editor: Editor, range: Range) => {
       return editor
         .chain()
         .focus()
         .deleteRange(range)
-        .BNCreateBlockOrSetContentType(range.from, { name: "textContent" })
+        .BNCreateOrUpdateBlock(range.from, {
+          type: "paragraph",
+          props: {},
+        })
         .run();
     },
-    ["p"],
-    "Used for the body of your document",
-    formatKeyboardShortcut("Mod-Alt-0")
+    ["p"]
   ),
 
   //     replaceRangeWithNode(editor, range, node);