feat: customizable formatting toolbar (#142)

* simplify formattingtoolbar

* Fixed React component types and added customizable formatting toolbar factory

* Finished formatting toolbar customization with old props

* Changed formatting toolbar props to use BlockNoteEditor

* Fixed text alignment with basic selection object

* Fixed block nesting tests

* Removed multiple block shorthand for updateBlock

* Added comments

* Removed redundant useCallback hooks

* Split `getActiveLink` to get text & url separately

* Removed unnecessary functions and `useCallback` hooks

* removed unnecessary `focus` calls

* Small fix

* Inline code style fix

* Added docs

* Small update

* Made selection undefined if nothing is selected

* Added selection docs

* Added styling docs

* Added nesting & un-nesting docs

* Small fix

* Added selection demo

* Minor fixes

* fix: hyperlink creation menu losing focus on click (#168)

* Doc changes & cleanup

* feat: customizable sidemenu (#143)

* simplify colorpicker

* Added basic mouse cursor position

* Added drag handle menu customization API

* Copied changes from PR and minor improvements

* Small changes

* Added `DragHandleMenuItem` component

* Fixed side menu unnecessary updates

* Removed unnecessary state

* Cleaned up code

* Changed how the side menu gets the hovered block

* Added side menu image

* Added docs

* Fixed comments in demo

* Made all menus/toolbars scroll with page

* Revert "Made all menus/toolbars scroll with page"

This reverts commit ee61bd0.

* Removed `editor` from dynamic props

* Documentation changes

* Small cleanup

* Vanilla example fix

---------

Co-authored-by: Matthew Lipski <[email protected]>
Co-authored-by: Matthew Lipski <[email protected]>

---------

Co-authored-by: Matthew Lipski <[email protected]>
Co-authored-by: Matthew Lipski <[email protected]>

Author: YousefED

examples/vanilla/src/ui/formattingToolbarFactory.ts

@@ -14,12 +14,12 @@ export const formattingToolbarFactory: FormattingToolbarFactory = (
   container.style.padding = "10px";
   container.style.opacity = "0.8";
   const boldBtn = createButton("set bold", () => {
-    staticParams.toggleBold();
+    staticParams.editor.toggleStyles({ bold: true });
   });
   container.appendChild(boldBtn);
 
   const linkBtn = createButton("set link", () => {
-    staticParams.setHyperlink("https://www.google.com");
+    staticParams.editor.createLink("https://www.google.com");
   });
 
   container.appendChild(boldBtn);
@@ -34,7 +34,8 @@ export const formattingToolbarFactory: FormattingToolbarFactory = (
         container.style.display = "block";
       }
 
-      boldBtn.text = params.boldIsActive ? "unset bold" : "set bold";
+      boldBtn.text =
+        "bold" in staticParams.editor.getActiveStyles() ? "unset bold" : "set bold";
       container.style.top = params.referenceRect.y + "px";
       container.style.left = params.referenceRect.x + "px";
     },

packages/core/src/BlockNoteEditor.ts

@@ -23,7 +23,13 @@ import {
   BlockIdentifier,
   PartialBlock,
 } from "./extensions/Blocks/api/blockTypes";
+import {
+  ColorStyle,
+  Styles,
+  ToggledStyle,
+} from "./extensions/Blocks/api/inlineContentTypes";
 import { TextCursorPosition } from "./extensions/Blocks/api/cursorPositionTypes";
+import { Selection } from "./extensions/Blocks/api/selectionTypes";
 import { getBlockInfoFromPos } from "./extensions/Blocks/helpers/getBlockInfoFromPos";
 import {
   BaseSlashMenuItem,
@@ -102,6 +108,10 @@ export class BlockNoteEditor {
     return this._tiptapEditor.view.dom as HTMLDivElement;
   }
 
+  public focus() {
+    this._tiptapEditor.view.focus();
+  }
+
   constructor(options: Partial<BlockNoteEditorOptions> = {}) {
     // apply defaults
     options = {
@@ -229,15 +239,15 @@ export class BlockNoteEditor {
 
     function traverseBlockArray(blockArray: Block[]): boolean {
       for (const block of blockArray) {
-        if (callback(block) === false) {
+        if (!callback(block)) {
           return false;
         }
 
         const children = reverse
           ? block.children.slice().reverse()
           : block.children;
 
-        if (traverseBlockArray(children) === false) {
+        if (!traverseBlockArray(children)) {
           return false;
         }
       }
@@ -319,6 +329,44 @@ export class BlockNoteEditor {
     }
   }
 
+  /**
+   * Gets a snapshot of the current selection.
+   */
+  public getSelection(): Selection | undefined {
+    if (
+      this._tiptapEditor.state.selection.from ===
+      this._tiptapEditor.state.selection.to
+    ) {
+      return undefined;
+    }
+
+    const blocks: Block[] = [];
+
+    this._tiptapEditor.state.doc.descendants((node, pos) => {
+      if (node.type.spec.group !== "blockContent") {
+        return true;
+      }
+
+      if (
+        pos + node.nodeSize < this._tiptapEditor.state.selection.from ||
+        pos > this._tiptapEditor.state.selection.to
+      ) {
+        return true;
+      }
+
+      blocks.push(
+        nodeToBlock(
+          this._tiptapEditor.state.doc.resolve(pos).node(),
+          this.blockCache
+        )
+      );
+
+      return false;
+    });
+
+    return { blocks: blocks };
+  }
+
   /**
    * Checks if the editor is currently editable, or if it's locked.
    * @returns True if the editor is editable, false otherwise.
@@ -384,6 +432,169 @@ export class BlockNoteEditor {
     replaceBlocks(blocksToRemove, blocksToInsert, this._tiptapEditor);
   }
 
+  /**
+   * Gets the active text styles at the text cursor position or at the end of the current selection if it's active.
+   */
+  public getActiveStyles() {
+    const styles: Styles = {};
+    const marks = this._tiptapEditor.state.selection.$to.marks();
+
+    const toggleStyles = new Set<ToggledStyle>([
+      "bold",
+      "italic",
+      "underline",
+      "strike",
+      "code",
+    ]);
+    const colorStyles = new Set<ColorStyle>(["textColor", "backgroundColor"]);
+
+    for (const mark of marks) {
+      if (toggleStyles.has(mark.type.name as ToggledStyle)) {
+        styles[mark.type.name as ToggledStyle] = true;
+      } else if (colorStyles.has(mark.type.name as ColorStyle)) {
+        styles[mark.type.name as ColorStyle] = mark.attrs.color;
+      }
+    }
+
+    return styles;
+  }
+
+  /**
+   * Adds styles to the currently selected content.
+   * @param styles The styles to add.
+   */
+  public addStyles(styles: Styles) {
+    const toggleStyles = new Set<ToggledStyle>([
+      "bold",
+      "italic",
+      "underline",
+      "strike",
+      "code",
+    ]);
+    const colorStyles = new Set<ColorStyle>(["textColor", "backgroundColor"]);
+
+    for (const [style, value] of Object.entries(styles)) {
+      if (toggleStyles.has(style as ToggledStyle)) {
+        this._tiptapEditor.commands.setMark(style);
+      } else if (colorStyles.has(style as ColorStyle)) {
+        this._tiptapEditor.commands.setMark(style, { color: value });
+      }
+    }
+  }
+
+  /**
+   * Removes styles from the currently selected content.
+   * @param styles The styles to remove.
+   */
+  public removeStyles(styles: Styles) {
+    for (const style of Object.keys(styles)) {
+      this._tiptapEditor.commands.unsetMark(style);
+    }
+  }
+
+  /**
+   * Toggles styles on the currently selected content.
+   * @param styles The styles to toggle.
+   */
+  public toggleStyles(styles: Styles) {
+    const toggleStyles = new Set<ToggledStyle>([
+      "bold",
+      "italic",
+      "underline",
+      "strike",
+      "code",
+    ]);
+    const colorStyles = new Set<ColorStyle>(["textColor", "backgroundColor"]);
+
+    for (const [style, value] of Object.entries(styles)) {
+      if (toggleStyles.has(style as ToggledStyle)) {
+        this._tiptapEditor.commands.toggleMark(style);
+      } else if (colorStyles.has(style as ColorStyle)) {
+        this._tiptapEditor.commands.toggleMark(style, { color: value });
+      }
+    }
+  }
+
+  /**
+   * Gets the currently selected text.
+   */
+  public getSelectedText() {
+    return this._tiptapEditor.state.doc.textBetween(
+      this._tiptapEditor.state.selection.from,
+      this._tiptapEditor.state.selection.to
+    );
+  }
+
+  /**
+   * Gets the URL of the last link in the current selection, or `undefined` if there are no links in the selection.
+   */
+  public getSelectedLinkUrl() {
+    return this._tiptapEditor.getAttributes("link").href as string | undefined;
+  }
+
+  /**
+   * Creates a new link to replace the selected content.
+   * @param url The link URL.
+   * @param text The text to display the link with.
+   */
+  public createLink(url: string, text?: string) {
+    if (url === "") {
+      return;
+    }
+
+    let { from, to } = this._tiptapEditor.state.selection;
+
+    if (!text) {
+      text = this._tiptapEditor.state.doc.textBetween(from, to);
+    }
+
+    const mark = this._tiptapEditor.schema.mark("link", { href: url });
+
+    this._tiptapEditor.view.dispatch(
+      this._tiptapEditor.view.state.tr
+        .insertText(text, from, to)
+        .addMark(from, from + text.length, mark)
+    );
+  }
+
+  /**
+   * Checks if the block containing the text cursor can be nested.
+   */
+  public canNestBlock() {
+    const { startPos, depth } = getBlockInfoFromPos(
+      this._tiptapEditor.state.doc,
+      this._tiptapEditor.state.selection.from
+    )!;
+
+    return this._tiptapEditor.state.doc.resolve(startPos).index(depth - 1) > 0;
+  }
+
+  /**
+   * Nests the block containing the text cursor into the block above it.
+   */
+  public nestBlock() {
+    this._tiptapEditor.commands.sinkListItem("blockContainer");
+  }
+
+  /**
+   * Checks if the block containing the text cursor is nested.
+   */
+  public canUnnestBlock() {
+    const { depth } = getBlockInfoFromPos(
+      this._tiptapEditor.state.doc,
+      this._tiptapEditor.state.selection.from
+    )!;
+
+    return depth > 2;
+  }
+
+  /**
+   * Lifts the block containing the text cursor out of its parent.
+   */
+  public unnestBlock() {
+    this._tiptapEditor.commands.liftListItem("blockContainer");
+  }
+
   /**
    * Serializes blocks into an HTML string. To better conform to HTML standards, children of blocks which aren't list
    * items are un-nested in the output HTML.

packages/core/src/BlockNoteExtensions.ts

@@ -24,8 +24,7 @@ import { FormattingToolbarFactory } from "./extensions/FormattingToolbar/Formatt
 import HyperlinkMark from "./extensions/HyperlinkToolbar/HyperlinkMark";
 import { HyperlinkToolbarFactory } from "./extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes";
 import { Placeholder } from "./extensions/Placeholder/PlaceholderExtension";
-import { SlashMenuExtension } from "./extensions/SlashMenu";
-import { BaseSlashMenuItem } from "./extensions/SlashMenu";
+import { BaseSlashMenuItem, SlashMenuExtension } from "./extensions/SlashMenu";
 import { TextAlignmentExtension } from "./extensions/TextAlignment/TextAlignmentExtension";
 import { TextColorExtension } from "./extensions/TextColor/TextColorExtension";
 import { TextColorMark } from "./extensions/TextColor/TextColorMark";
@@ -100,6 +99,7 @@ export const getBlockNoteExtensions = (opts: {
   if (opts.uiFactories.blockSideMenuFactory) {
     ret.push(
       DraggableBlocksExtension.configure({
+        editor: opts.editor,
         blockSideMenuFactory: opts.uiFactories.blockSideMenuFactory,
       })
     );
@@ -108,6 +108,7 @@ export const getBlockNoteExtensions = (opts: {
   if (opts.uiFactories.formattingToolbarFactory) {
     ret.push(
       FormattingToolbarExtension.configure({
+        editor: opts.editor,
         formattingToolbarFactory: opts.uiFactories.formattingToolbarFactory,
       })
     );

packages/core/src/api/nodeConversions/nodeConversions.ts

@@ -6,27 +6,27 @@ import {
   PartialBlock,
 } from "../../extensions/Blocks/api/blockTypes";
 import {
-  ColorStyles,
+  ColorStyle,
   InlineContent,
   Link,
   PartialInlineContent,
   PartialLink,
   StyledText,
   Styles,
-  ToggledStyles,
+  ToggledStyle,
 } from "../../extensions/Blocks/api/inlineContentTypes";
 import { getBlockInfoFromPos } from "../../extensions/Blocks/helpers/getBlockInfoFromPos";
 import UniqueID from "../../extensions/UniqueID/UniqueID";
 import { UnreachableCaseError } from "../../shared/utils";
 
-const toggleStyles = new Set<ToggledStyles>([
+const toggleStyles = new Set<ToggledStyle>([
   "bold",
   "italic",
   "underline",
   "strike",
   "code",
 ]);
-const colorStyles = new Set<ColorStyles>(["textColor", "backgroundColor"]);
+const colorStyles = new Set<ColorStyle>(["textColor", "backgroundColor"]);
 
 /**
  * Convert a StyledText inline element to a
@@ -36,9 +36,9 @@ function styledTextToNode(styledText: StyledText, schema: Schema): Node {
   const marks: Mark[] = [];
 
   for (const [style, value] of Object.entries(styledText.styles)) {
-    if (toggleStyles.has(style as ToggledStyles)) {
+    if (toggleStyles.has(style as ToggledStyle)) {
       marks.push(schema.mark(style));
-    } else if (colorStyles.has(style as ColorStyles)) {
+    } else if (colorStyles.has(style as ColorStyle)) {
       marks.push(schema.mark(style, { color: value }));
     }
   }
@@ -168,10 +168,10 @@ function contentNodeToInlineContent(contentNode: Node) {
     for (const mark of node.marks) {
       if (mark.type.name === "link") {
         linkMark = mark;
-      } else if (toggleStyles.has(mark.type.name as ToggledStyles)) {
-        styles[mark.type.name as ToggledStyles] = true;
-      } else if (colorStyles.has(mark.type.name as ColorStyles)) {
-        styles[mark.type.name as ColorStyles] = mark.attrs.color;
+      } else if (toggleStyles.has(mark.type.name as ToggledStyle)) {
+        styles[mark.type.name as ToggledStyle] = true;
+      } else if (colorStyles.has(mark.type.name as ColorStyle)) {
+        styles[mark.type.name as ColorStyle] = mark.attrs.color;
       } else {
         throw Error("Mark is of an unrecognized type: " + mark.type.name);
       }

packages/core/src/extensions/Blocks/api/inlineContentTypes.ts

@@ -8,11 +8,11 @@ export type Styles = {
   backgroundColor?: string;
 };
 
-export type ToggledStyles = {
+export type ToggledStyle = {
   [K in keyof Styles]-?: Required<Styles>[K] extends true ? K : never;
 }[keyof Styles];
 
-export type ColorStyles = {
+export type ColorStyle = {
   [K in keyof Styles]-?: Required<Styles>[K] extends string ? K : never;
 }[keyof Styles];
 

packages/core/src/extensions/Blocks/api/selectionTypes.ts

@@ -0,0 +1,5 @@
+import { Block } from "./blockTypes";
+
+export type Selection = {
+  blocks: Block[];
+};