@blocknote/core 0.2.3 → 0.3.0

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

@@ -1,5 +1,5 @@
 import { mergeAttributes, Node } from "@tiptap/core";
-import { Slice } from "prosemirror-model";
+import { Fragment, Slice } from "prosemirror-model";
 import { TextSelection } from "prosemirror-state";
 import { BlockUpdate } from "../apiTypes";
 import { getBlockInfoFromPos } from "../helpers/getBlockInfoFromPos";
@@ -49,17 +49,6 @@ export const BlockContainer = Node.create<IBlock>({
     };
   },
 
-  addAttributes() {
-    return {
-      blockColor: {
-        default: undefined,
-      },
-      blockStyle: {
-        default: undefined,
-      },
-    };
-  },
-
   parseHTML() {
     return [
       {
@@ -233,20 +222,36 @@ export const BlockContainer = Node.create<IBlock>({
           const { contentNode, contentType, startPos, endPos, depth } =
             blockInfo;
 
-          const newBlockInsertionPos = endPos + 1;
-
-          // Creates new block first, otherwise positions get changed due to the original block's content changing.
-          // Only text content is transferred to the new block.
-          const secondBlockContent = state.doc.textBetween(posInBlock, endPos);
+          const originalBlockContent = state.doc.cut(startPos + 1, posInBlock);
+          const newBlockContent = state.doc.cut(posInBlock, endPos - 1);
 
           const newBlock =
             state.schema.nodes["blockContainer"].createAndFill()!;
+
+          const newBlockInsertionPos = endPos + 1;
           const newBlockContentPos = newBlockInsertionPos + 2;
 
           if (dispatch) {
+            // Creates a new block. Since the schema requires it to have a content node, a paragraph node is created
+            // automatically, spanning newBlockContentPos to newBlockContentPos + 1.
             state.tr.insert(newBlockInsertionPos, newBlock);
-            state.tr.insertText(secondBlockContent, newBlockContentPos);
 
+            // Replaces the content of the newly created block's content node. Doesn't replace the whole content node so
+            // its type doesn't change.
+            state.tr.replace(
+              newBlockContentPos,
+              newBlockContentPos + 1,
+              newBlockContent.content.size > 0
+                ? new Slice(
+                    Fragment.from(newBlockContent),
+                    depth + 2,
+                    depth + 2
+                  )
+                : undefined
+            );
+
+            // Changes the type of the content node. The range doesn't matter as long as both from and to positions are
+            // within the content node.
             if (keepType) {
               state.tr.setBlockType(
                 newBlockContentPos,
@@ -255,22 +260,30 @@ export const BlockContainer = Node.create<IBlock>({
                 contentNode.attrs
               );
             }
-          }
 
-          // Updates content of original block.
-          const firstBlockContent = state.doc.content.cut(startPos, posInBlock);
+            // Sets the selection to the start of the new block's content node.
+            state.tr.setSelection(
+              new TextSelection(state.doc.resolve(newBlockContentPos))
+            );
 
-          if (dispatch) {
+            // Replaces the content of the original block's content node. Doesn't replace the whole content node so its
+            // type doesn't change.
             state.tr.replace(
-              startPos,
-              endPos,
-              new Slice(firstBlockContent, depth, depth)
+              startPos + 1,
+              endPos - 1,
+              originalBlockContent.content.size > 0
+                ? new Slice(
+                    Fragment.from(originalBlockContent),
+                    depth + 2,
+                    depth + 2
+                  )
+                : undefined
             );
           }
 
           return true;
         },
-      // Changes the content of a block at a given position to a given type.
+      // Updates the type and attributes of a block at a given position.
       BNUpdateBlock:
         (posInBlock, blockUpdate) =>
         ({ state, dispatch }) => {

package/src/extensions/Blocks/nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContent.ts

@@ -1,4 +1,4 @@
-import { Node } from "@tiptap/core";
+import { mergeAttributes, Node } from "@tiptap/core";
 import styles from "../../Block.module.css";
 
 export const ParagraphBlockContent = Node.create({
@@ -16,13 +16,13 @@ export const ParagraphBlockContent = Node.create({
     ];
   },
 
-  renderHTML() {
+  renderHTML({ HTMLAttributes }) {
     return [
       "div",
-      {
+      mergeAttributes(HTMLAttributes, {
         class: styles.blockContent,
         "data-content-type": this.name,
-      },
+      }),
       ["p", 0],
     ];
   },

package/src/extensions/DraggableBlocks/BlockSideMenuFactoryTypes.ts

@@ -3,13 +3,21 @@ import { EditorElement, ElementFactory } from "../../shared/EditorElement";
 export type BlockSideMenuStaticParams = {
   addBlock: () => void;
   deleteBlock: () => void;
+
   blockDragStart: (event: DragEvent) => void;
   blockDragEnd: () => void;
+
   freezeMenu: () => void;
   unfreezeMenu: () => void;
+
+  setBlockTextColor: (color: string) => void;
+  setBlockBackgroundColor: (color: string) => void;
 };
 
 export type BlockSideMenuDynamicParams = {
+  blockTextColor: string;
+  blockBackgroundColor: string;
+
   referenceRect: DOMRect;
 };
 

package/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts

@@ -18,21 +18,8 @@ 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;
@@ -380,6 +379,8 @@ export class BlockMenuView {
         .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 {
+      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

@@ -8,6 +8,15 @@ export type FormattingToolbarStaticParams = {
   toggleStrike: () => void;
   setHyperlink: (url: string, text?: string) => void;
 
+  setTextColor: (color: string) => void;
+  setBackgroundColor: (color: string) => void;
+  setTextAlignment: (
+    textAlignment: "left" | "center" | "right" | "justify"
+  ) => void;
+
+  increaseBlockIndent: () => void;
+  decreaseBlockIndent: () => void;
+
   updateBlock: (blockUpdate: BlockUpdate) => void;
 };
 
@@ -20,6 +29,13 @@ export type FormattingToolbarDynamicParams = {
   activeHyperlinkUrl: string;
   activeHyperlinkText: string;
 
+  textColor: string;
+  backgroundColor: string;
+  textAlignment: "left" | "center" | "right" | "justify";
+
+  canIncreaseBlockIndent: boolean;
+  canDecreaseBlockIndent: boolean;
+
   block: Block;
 
   referenceRect: DOMRect;

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -266,6 +266,28 @@ export class FormattingToolbarView {
         );
         this.editor.view.focus();
       },
+      setTextColor: (color: string) => {
+        this.editor.view.focus();
+        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(
@@ -288,13 +310,22 @@ export class FormattingToolbarView {
       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
       ),
+      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: {

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,8 +8,7 @@ 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()
@@ -22,16 +21,13 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         })
         .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()
@@ -44,16 +40,13 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         })
         .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()
@@ -66,16 +59,13 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         })
         .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()
@@ -86,16 +76,13 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         })
         .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()
@@ -106,16 +93,13 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         })
         .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()
@@ -126,9 +110,7 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         })
         .run();
     },
-    ["p"],
-    "Used for the body of your document",
-    formatKeyboardShortcut("Mod-Alt-0")
+    ["p"]
   ),
 
   //     replaceRangeWithNode(editor, range, node);

package/src/extensions/SlashMenu/index.ts

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