Changed formatting toolbar props to use BlockNoteEditor

Author: matthewlipski

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 params.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,6 +23,11 @@ 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 { getBlockInfoFromPos } from "./extensions/Blocks/helpers/getBlockInfoFromPos";
 import {
@@ -60,6 +65,10 @@ export class BlockNoteEditor {
     return this._tiptapEditor.view.dom as HTMLDivElement;
   }
 
+  public focus() {
+    this._tiptapEditor.view.focus();
+  }
+
   constructor(options: Partial<BlockNoteEditorOptions> = {}) {
     const blockNoteExtensions = getBlockNoteExtensions({
       editor: this,
@@ -299,6 +308,135 @@ export class BlockNoteEditor {
     replaceBlocks(blocksToRemove, blocksToInsert, this._tiptapEditor);
   }
 
+  public getActiveStyles() {
+    const styles: Styles = {};
+    const marks = this._tiptapEditor.state.selection.$to.marks();
+    console.log(marks);
+
+    const toggleStyles = new Set<ToggledStyle>([
+      "bold",
+      "italic",
+      "underline",
+      "strike",
+    ]);
+    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;
+  }
+
+  public addStyles(styles: Styles) {
+    const toggleStyles = new Set<ToggledStyle>([
+      "bold",
+      "italic",
+      "underline",
+      "strike",
+    ]);
+    const colorStyles = new Set<ColorStyle>(["textColor", "backgroundColor"]);
+
+    this._tiptapEditor.view.focus();
+
+    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 });
+      }
+    }
+  }
+
+  public removeStyles(styles: Styles) {
+    this._tiptapEditor.view.focus();
+
+    for (const style of Object.keys(styles)) {
+      this._tiptapEditor.commands.unsetMark(style);
+    }
+  }
+
+  public toggleStyles(styles: Styles) {
+    const toggleStyles = new Set<ToggledStyle>([
+      "bold",
+      "italic",
+      "underline",
+      "strike",
+    ]);
+    const colorStyles = new Set<ColorStyle>(["textColor", "backgroundColor"]);
+
+    this._tiptapEditor.view.focus();
+
+    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 });
+      }
+    }
+  }
+
+  public getActiveLink() {
+    const url = this._tiptapEditor.getAttributes("link").href;
+    // TODO: Does this make sense? Shouldn't it get the actual link text?
+    const text = this._tiptapEditor.state.doc.textBetween(
+      this._tiptapEditor.state.selection.from,
+      this._tiptapEditor.state.selection.to
+    );
+
+    return { text: text, url: url };
+  }
+
+  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)
+    );
+  }
+
+  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;
+  }
+
+  public nestBlock() {
+    this._tiptapEditor.commands.sinkListItem("blockContainer");
+  }
+
+  public canUnnestBlock() {
+    const { depth } = getBlockInfoFromPos(
+      this._tiptapEditor.state.doc,
+      this._tiptapEditor.state.selection.from
+    )!;
+
+    return depth > 2;
+  }
+
+  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/api/nodeConversions/nodeConversions.ts

@@ -6,26 +6,26 @@ 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",
 ]);
-const colorStyles = new Set<ColorStyles>(["textColor", "backgroundColor"]);
+const colorStyles = new Set<ColorStyle>(["textColor", "backgroundColor"]);
 
 /**
  * Convert a StyledText inline element to a
@@ -35,9 +35,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 }));
     }
   }
@@ -167,10 +167,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

@@ -7,11 +7,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/FormattingToolbar/FormattingToolbarFactoryTypes.ts

@@ -1,43 +1,12 @@
 import { EditorElement, ElementFactory } from "../../shared/EditorElement";
-import { Block, PartialBlock } from "../Blocks/api/blockTypes";
+import { BlockNoteEditor } from "../../BlockNoteEditor";
 
 export type FormattingToolbarStaticParams = {
-  toggleBold: () => void;
-  toggleItalic: () => void;
-  toggleUnderline: () => void;
-  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: (updatedBlock: PartialBlock) => void;
+  editor: BlockNoteEditor;
 };
 
 export type FormattingToolbarDynamicParams = {
-  boldIsActive: boolean;
-  italicIsActive: boolean;
-  underlineIsActive: boolean;
-  strikeIsActive: boolean;
-  hyperlinkIsActive: boolean;
-  activeHyperlinkUrl: string;
-  activeHyperlinkText: string;
-
-  textColor: string;
-  backgroundColor: string;
-  textAlignment: "left" | "center" | "right" | "justify";
-
-  canIncreaseBlockIndent: boolean;
-  canDecreaseBlockIndent: boolean;
-
-  block: Block;
-
+  editor: BlockNoteEditor;
   referenceRect: DOMRect;
 };