@blocknote/core 0.5.1 → 0.6.2

package/package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/TypeCellOS/BlockNote",
   "private": false,
   "license": "MPL-2.0",
-  "version": "0.5.1",
+  "version": "0.6.2",
   "files": [
     "dist",
     "types",
@@ -109,5 +109,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "babb5daf39a4cfa7dff192098b7a7a35b022623f"
+  "gitHead": "51407afbd8f4976d6ff986b9edb5e242786c1c58"
 }

package/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,
@@ -35,7 +41,8 @@ export type BlockNoteEditorOptions = {
   enableBlockNoteExtensions: boolean;
   disableHistoryExtension: boolean;
   /**
-   * Factories used to create a custom UI for BlockNote
+   * UI element factories for creating a custom UI, including custom positioning
+   * & rendering.
    */
   uiFactories: UiFactories;
   /**
@@ -69,14 +76,26 @@ export type BlockNoteEditorOptions = {
    * A callback function that runs whenever the text cursor position changes.
    */
   onTextCursorPositionChange: (editor: BlockNoteEditor) => void;
+  /**
+   * Locks the editor from being editable by the user if set to `false`.
+   */
+  editable: boolean;
+  /**
+   * The content that should be in the editor when it's created, represented as an array of partial block objects.
+   */
   initialContent: PartialBlock[];
-
   /**
    * Use default BlockNote font and reset the styles of <p> <li> <h1> elements etc., that are used in BlockNote.
    *
    * @default true
    */
   defaultStyles: boolean;
+  /**
+   * Whether to use the light or dark theme.
+   *
+   * @default "light"
+   */
+  theme: "light" | "dark";
 
   // tiptap options, undocumented
   _tiptapOptions: any;
@@ -96,6 +115,10 @@ export class BlockNoteEditor {
     return this._tiptapEditor.view.dom as HTMLDivElement;
   }
 
+  public focus() {
+    this._tiptapEditor.view.focus();
+  }
+
   constructor(options: Partial<BlockNoteEditorOptions> = {}) {
     // apply defaults
     options = {
@@ -134,12 +157,14 @@ export class BlockNoteEditor {
       onSelectionUpdate: () => {
         options.onTextCursorPositionChange?.(this);
       },
+      editable: options.editable === undefined ? true : options.editable,
       extensions:
         options.enableBlockNoteExtensions === false
           ? options._tiptapOptions?.extensions
           : [...(options._tiptapOptions?.extensions || []), ...extensions],
       editorProps: {
         attributes: {
+          "data-theme": options.theme || "light",
           ...(options.editorDOMAttributes || {}),
           class: [
             styles.bnEditor,
@@ -222,7 +247,7 @@ export class BlockNoteEditor {
 
     function traverseBlockArray(blockArray: Block[]): boolean {
       for (const block of blockArray) {
-        if (callback(block) === false) {
+        if (!callback(block)) {
           return false;
         }
 
@@ -230,7 +255,7 @@ export class BlockNoteEditor {
           ? block.children.slice().reverse()
           : block.children;
 
-        if (traverseBlockArray(children) === false) {
+        if (!traverseBlockArray(children)) {
           return false;
         }
       }
@@ -312,6 +337,60 @@ 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.
+   */
+  public get isEditable(): boolean {
+    return this._tiptapEditor.isEditable;
+  }
+
+  /**
+   * Makes the editor editable or locks it, depending on the argument passed.
+   * @param editable True to make the editor editable, or false to lock it.
+   */
+  public set isEditable(editable: boolean) {
+    this._tiptapEditor.setEditable(editable);
+  }
+
   /**
    * Inserts new blocks into the editor. If a block's `id` is undefined, BlockNote generates one automatically. Throws an
    * error if the reference block could not be found.
@@ -361,6 +440,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.

package/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,
       })
     );

package/src/api/blockManipulation/__snapshots__/blockManipulation.test.ts.snap

@@ -13,7 +13,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
             "type": "text",
           },
         ],
-        "id": 2,
+        "id": "2",
         "props": {
           "backgroundColor": "default",
           "level": "1",
@@ -30,7 +30,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
         "type": "text",
       },
     ],
-    "id": 1,
+    "id": "1",
     "props": {
       "backgroundColor": "default",
       "level": "1",
@@ -50,7 +50,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
             "type": "text",
           },
         ],
-        "id": 4,
+        "id": "4",
         "props": {
           "backgroundColor": "default",
           "level": "2",
@@ -67,7 +67,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
         "type": "text",
       },
     ],
-    "id": 3,
+    "id": "3",
     "props": {
       "backgroundColor": "default",
       "level": "2",
@@ -79,7 +79,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
   {
     "children": [],
     "content": [],
-    "id": 0,
+    "id": "0",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -103,7 +103,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
             "type": "text",
           },
         ],
-        "id": 2,
+        "id": "2",
         "props": {
           "backgroundColor": "default",
           "level": "1",
@@ -120,7 +120,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
         "type": "text",
       },
     ],
-    "id": 1,
+    "id": "1",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -139,7 +139,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
             "type": "text",
           },
         ],
-        "id": 4,
+        "id": "4",
         "props": {
           "backgroundColor": "default",
           "level": "2",
@@ -156,7 +156,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
         "type": "text",
       },
     ],
-    "id": 3,
+    "id": "3",
     "props": {
       "backgroundColor": "default",
       "level": "2",
@@ -168,7 +168,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
   {
     "children": [],
     "content": [],
-    "id": 0,
+    "id": "0",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -190,7 +190,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
         "type": "text",
       },
     ],
-    "id": 1,
+    "id": "1",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -201,7 +201,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
   {
     "children": [],
     "content": [],
-    "id": 0,
+    "id": "0",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -223,7 +223,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block
         "type": "text",
       },
     ],
-    "id": 1,
+    "id": "1",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -234,7 +234,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block
   {
     "children": [],
     "content": [],
-    "id": 0,
+    "id": "0",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -258,7 +258,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block
             "type": "text",
           },
         ],
-        "id": 2,
+        "id": "2",
         "props": {
           "backgroundColor": "default",
           "textAlignment": "left",
@@ -283,7 +283,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block
         "type": "text",
       },
     ],
-    "id": 1,
+    "id": "1",
     "props": {
       "backgroundColor": "default",
       "level": "3",
@@ -295,7 +295,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block
   {
     "children": [],
     "content": [],
-    "id": 0,
+    "id": "0",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -311,7 +311,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block
   {
     "children": [],
     "content": [],
-    "id": 0,
+    "id": "0",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -327,7 +327,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
   {
     "children": [],
     "content": [],
-    "id": 0,
+    "id": "0",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -346,7 +346,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
             "type": "text",
           },
         ],
-        "id": 2,
+        "id": "2",
         "props": {
           "backgroundColor": "default",
           "level": "1",
@@ -363,7 +363,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
         "type": "text",
       },
     ],
-    "id": 1,
+    "id": "1",
     "props": {
       "backgroundColor": "default",
       "level": "1",
@@ -383,7 +383,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
             "type": "text",
           },
         ],
-        "id": 4,
+        "id": "4",
         "props": {
           "backgroundColor": "default",
           "level": "2",
@@ -400,7 +400,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
         "type": "text",
       },
     ],
-    "id": 3,
+    "id": "3",
     "props": {
       "backgroundColor": "default",
       "level": "2",
@@ -412,7 +412,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
   {
     "children": [],
     "content": [],
-    "id": 5,
+    "id": "5",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -436,7 +436,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
             "type": "text",
           },
         ],
-        "id": 2,
+        "id": "2",
         "props": {
           "backgroundColor": "default",
           "level": "1",
@@ -453,7 +453,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
         "type": "text",
       },
     ],
-    "id": 1,
+    "id": "1",
     "props": {
       "backgroundColor": "default",
       "level": "1",
@@ -473,7 +473,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
             "type": "text",
           },
         ],
-        "id": 4,
+        "id": "4",
         "props": {
           "backgroundColor": "default",
           "level": "2",
@@ -490,7 +490,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
         "type": "text",
       },
     ],
-    "id": 3,
+    "id": "3",
     "props": {
       "backgroundColor": "default",
       "level": "2",
@@ -502,7 +502,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
   {
     "children": [],
     "content": [],
-    "id": 0,
+    "id": "0",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -528,7 +528,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
                 "type": "text",
               },
             ],
-            "id": 2,
+            "id": "2",
             "props": {
               "backgroundColor": "default",
               "level": "1",
@@ -545,7 +545,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
             "type": "text",
           },
         ],
-        "id": 1,
+        "id": "1",
         "props": {
           "backgroundColor": "default",
           "level": "1",
@@ -565,7 +565,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
                 "type": "text",
               },
             ],
-            "id": 4,
+            "id": "4",
             "props": {
               "backgroundColor": "default",
               "level": "2",
@@ -582,7 +582,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
             "type": "text",
           },
         ],
-        "id": 3,
+        "id": "3",
         "props": {
           "backgroundColor": "default",
           "level": "2",
@@ -593,7 +593,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
       },
     ],
     "content": [],
-    "id": 0,
+    "id": "0",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -604,7 +604,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
   {
     "children": [],
     "content": [],
-    "id": 5,
+    "id": "5",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",