@blocknote/core 0.19.1 → 0.20.0

package/src/editor/BlockNoteEditor.ts

@@ -9,11 +9,17 @@ import {
 import { Node, Schema } from "prosemirror-model";
 // import "./blocknote.css";
 import * as Y from "yjs";
+import {
+  getBlock,
+  getNextBlock,
+  getParentBlock,
+  getPrevBlock,
+} from "../api/blockManipulation/getBlock/getBlock.js";
 import { insertBlocks } from "../api/blockManipulation/commands/insertBlocks/insertBlocks.js";
 import {
-  moveBlockDown,
-  moveBlockUp,
-} from "../api/blockManipulation/commands/moveBlock/moveBlock.js";
+  moveBlocksDown,
+  moveBlocksUp,
+} from "../api/blockManipulation/commands/moveBlocks/moveBlocks.js";
 import {
   canNestBlock,
   canUnnestBlock,
@@ -28,6 +34,10 @@ import {
   getTextCursorPosition,
   setTextCursorPosition,
 } from "../api/blockManipulation/selections/textCursorPosition/textCursorPosition.js";
+import {
+  getSelection,
+  setSelection,
+} from "../api/blockManipulation/selections/selection.js";
 import { createExternalHTMLExporter } from "../api/exporters/html/externalHTMLExporter.js";
 import { blocksToMarkdown } from "../api/exporters/markdown/markdownExporter.js";
 import { HTMLToBlocks } from "../api/parsers/html/parseHTML.js";
@@ -219,6 +229,21 @@ export type BlockNoteEditorOptions<
   setIdAttribute?: boolean;
 
   dropCursor?: (opts: any) => Plugin;
+
+  /**
+   Select desired behavior when pressing `Tab` (or `Shift-Tab`). Specifically,
+   what should happen when a user has selected multiple blocks while a toolbar
+   is open:
+   - `"prefer-navigate-ui"`: Change focus to the toolbar. The user needs to
+   first press `Escape` to close the toolbar, and can then indent multiple
+   blocks. Better for keyboard accessibility.
+   - `"prefer-indent"`: Regardless of whether toolbars are open, indent the
+   selection of blocks. In this case, it's not possible to navigate toolbars
+   with the keyboard.
+
+   @default "prefer-navigate-ui"
+   */
+  tabBehavior: "prefer-navigate-ui" | "prefer-indent";
 };
 
 const blockNoteTipTapOptions = {
@@ -395,6 +420,7 @@ export class BlockNoteEditor<
       tableHandles: checkDefaultBlockTypeInSchema("table", this),
       dropCursor: this.options.dropCursor ?? dropCursor,
       placeholders: newOptions.placeholders,
+      tabBehavior: newOptions.tabBehavior,
     });
 
     // add extensions from _tiptapOptions
@@ -474,6 +500,12 @@ export class BlockNoteEditor<
           return ext;
         }
 
+        if (!ext.plugin) {
+          throw new Error(
+            "Extension should either be a TipTap extension or a ProseMirror plugin in a plugin property"
+          );
+        }
+
         // "blocknote" extensions (prosemirror plugins)
         return Extension.create({
           name: key,
@@ -604,39 +636,57 @@ export class BlockNoteEditor<
 
   /**
    * Gets a snapshot of an existing block from the editor.
-   * @param blockIdentifier The identifier of an existing block that should be retrieved.
-   * @returns The block that matches the identifier, or `undefined` if no matching block was found.
+   * @param blockIdentifier The identifier of an existing block that should be
+   * retrieved.
+   * @returns The block that matches the identifier, or `undefined` if no
+   * matching block was found.
    */
   public getBlock(
     blockIdentifier: BlockIdentifier
   ): Block<BSchema, ISchema, SSchema> | undefined {
-    const id =
-      typeof blockIdentifier === "string"
-        ? blockIdentifier
-        : blockIdentifier.id;
-    let newBlock: Block<BSchema, ISchema, SSchema> | undefined = undefined;
-
-    this._tiptapEditor.state.doc.firstChild!.descendants((node) => {
-      if (typeof newBlock !== "undefined") {
-        return false;
-      }
-
-      if (node.type.name !== "blockContainer" || node.attrs.id !== id) {
-        return true;
-      }
+    return getBlock(this, blockIdentifier);
+  }
 
-      newBlock = nodeToBlock(
-        node,
-        this.schema.blockSchema,
-        this.schema.inlineContentSchema,
-        this.schema.styleSchema,
-        this.blockCache
-      );
+  /**
+   * Gets a snapshot of the previous sibling of an existing block from the
+   * editor.
+   * @param blockIdentifier The identifier of an existing block for which the
+   * previous sibling should be retrieved.
+   * @returns The previous sibling of the block that matches the identifier.
+   * `undefined` if no matching block was found, or it's the first child/block
+   * in the document.
+   */
+  public getPrevBlock(
+    blockIdentifier: BlockIdentifier
+  ): Block<BSchema, ISchema, SSchema> | undefined {
+    return getPrevBlock(this, blockIdentifier);
+  }
 
-      return false;
-    });
+  /**
+   * Gets a snapshot of the next sibling of an existing block from the editor.
+   * @param blockIdentifier The identifier of an existing block for which the
+   * next sibling should be retrieved.
+   * @returns The next sibling of the block that matches the identifier.
+   * `undefined` if no matching block was found, or it's the last child/block in
+   * the document.
+   */
+  public getNextBlock(
+    blockIdentifier: BlockIdentifier
+  ): Block<BSchema, ISchema, SSchema> | undefined {
+    return getNextBlock(this, blockIdentifier);
+  }
 
-    return newBlock;
+  /**
+   * Gets a snapshot of the parent of an existing block from the editor.
+   * @param blockIdentifier The identifier of an existing block for which the
+   * parent should be retrieved.
+   * @returns The parent of the block that matches the identifier. `undefined`
+   * if no matching block was found, or the block isn't nested.
+   */
+  public getParentBlock(
+    blockIdentifier: BlockIdentifier
+  ): Block<BSchema, ISchema, SSchema> | undefined {
+    return getParentBlock(this, blockIdentifier);
   }
 
   /**
@@ -722,53 +772,11 @@ export class BlockNoteEditor<
    * Gets a snapshot of the current selection.
    */
   public getSelection(): Selection<BSchema, ISchema, SSchema> | undefined {
-    // Either the TipTap selection is empty, or it's a node selection. In either
-    // case, it only spans one block, so we return undefined.
-    if (
-      this._tiptapEditor.state.selection.from ===
-        this._tiptapEditor.state.selection.to ||
-      "node" in this._tiptapEditor.state.selection
-    ) {
-      return undefined;
-    }
-
-    const blocks: Block<BSchema, ISchema, SSchema>[] = [];
-
-    // TODO: This adds all child blocks to the same array. Needs to find min
-    //  depth and only add blocks at that depth.
-    this._tiptapEditor.state.doc.descendants((node, pos) => {
-      if (node.type.spec.group !== "blockContent") {
-        return true;
-      }
-
-      // Fixed the block pos and size
-      // all block is wrapped with a blockContent wrapper
-      // and blockContent wrapper pos = inner block pos - 1
-      // blockContent wrapper end = inner block pos + nodeSize + 1
-      // need to add 1 to start and -1 to end
-      const end = pos + node.nodeSize - 1;
-      const start = pos + 1;
-      if (
-        end <= this._tiptapEditor.state.selection.from ||
-        start >= this._tiptapEditor.state.selection.to
-      ) {
-        return true;
-      }
-
-      blocks.push(
-        nodeToBlock(
-          this._tiptapEditor.state.doc.resolve(pos).node(),
-          this.schema.blockSchema,
-          this.schema.inlineContentSchema,
-          this.schema.styleSchema,
-          this.blockCache
-        )
-      );
-
-      return false;
-    });
+    return getSelection(this);
+  }
 
-    return { blocks: blocks };
+  public setSelection(startBlock: BlockIdentifier, endBlock: BlockIdentifier) {
+    setSelection(this, startBlock, endBlock);
   }
 
   /**
@@ -1026,21 +1034,21 @@ export class BlockNoteEditor<
   }
 
   /**
-   * Moves the block containing the text cursor up. If the previous block has
-   * children, moves it to the end of its children. If there is no previous
-   * block, but the current block is nested, moves it out of & before its parent.
+   * Moves the selected blocks up. If the previous block has children, moves
+   * them to the end of its children. If there is no previous block, but the
+   * current blocks share a common parent, moves them out of & before it.
    */
-  public moveBlockUp() {
-    moveBlockUp(this);
+  public moveBlocksUp() {
+    moveBlocksUp(this);
   }
 
   /**
-   * Moves the block containing the text cursor down. If the next block has
-   * children, moves it to the start of its children. If there is no next block,
-   * but the current block is nested, moves it out of & after its parent.
+   * Moves the selected blocks down. If the next block has children, moves
+   * them to the start of its children. If there is no next block, but the
+   * current blocks share a common parent, moves them out of & after it.
    */
-  public moveBlockDown() {
-    moveBlockDown(this);
+  public moveBlocksDown() {
+    moveBlocksDown(this);
   }
 
   /**

package/src/editor/BlockNoteExtensions.ts

@@ -67,6 +67,7 @@ type ExtensionOptions<
   tableHandles: boolean;
   dropCursor: (opts: any) => Plugin;
   placeholders: Record<string | "default", string>;
+  tabBehavior?: "prefer-navigate-ui" | "prefer-indent";
 };
 
 /**
@@ -116,7 +117,7 @@ export const getBlockNoteExtensions = <
   ret["nodeSelectionKeyboard"] = new NodeSelectionKeyboardPlugin();
 
   const disableExtensions: string[] = opts.disableExtensions || [];
-  for (const ext of Object.keys(disableExtensions)) {
+  for (const ext of disableExtensions) {
     delete ret[ext];
   }
 
@@ -200,6 +201,7 @@ const getTipTapExtensions = <
     }),
     KeyboardShortcutsExtension.configure({
       editor: opts.editor,
+      tabBehavior: opts.tabBehavior,
     }),
     BlockGroup.configure({
       domAttributes: opts.domAttributes,

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -139,9 +139,11 @@ export class FormattingToolbarView implements PluginView {
     // Wrapping in a setTimeout gives enough time to wait for the blur event to
     // occur before updating the toolbar.
     const { state, composing } = view;
-    const { doc, selection } = state;
+    const { selection } = state;
     const isSame =
-      oldState && oldState.doc.eq(doc) && oldState.selection.eq(selection);
+      oldState &&
+      oldState.selection.from === state.selection.from &&
+      oldState.selection.to === state.selection.to;
 
     if (composing || isSame) {
       return;

package/src/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts

@@ -16,6 +16,7 @@ import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 
 export const KeyboardShortcutsExtension = Extension.create<{
   editor: BlockNoteEditor<any, any, any>;
+  tabBehavior: "prefer-navigate-ui" | "prefer-indent";
 }>({
   priority: 50,
 
@@ -479,9 +480,10 @@ export const KeyboardShortcutsExtension = Extension.create<{
       // editor since the browser will try to use tab for keyboard navigation.
       Tab: () => {
         if (
-          this.options.editor.formattingToolbar?.shown ||
-          this.options.editor.linkToolbar?.shown ||
-          this.options.editor.filePanel?.shown
+          this.options.tabBehavior !== "prefer-indent" &&
+          (this.options.editor.formattingToolbar?.shown ||
+            this.options.editor.linkToolbar?.shown ||
+            this.options.editor.filePanel?.shown)
         ) {
           // don't handle tabs if a toolbar is shown, so we can tab into / out of it
           return false;
@@ -491,9 +493,10 @@ export const KeyboardShortcutsExtension = Extension.create<{
       },
       "Shift-Tab": () => {
         if (
-          this.options.editor.formattingToolbar?.shown ||
-          this.options.editor.linkToolbar?.shown ||
-          this.options.editor.filePanel?.shown
+          this.options.tabBehavior !== "prefer-indent" &&
+          (this.options.editor.formattingToolbar?.shown ||
+            this.options.editor.linkToolbar?.shown ||
+            this.options.editor.filePanel?.shown)
         ) {
           // don't handle tabs if a toolbar is shown, so we can tab into / out of it
           return false;
@@ -502,11 +505,11 @@ export const KeyboardShortcutsExtension = Extension.create<{
         return true;
       },
       "Shift-Mod-ArrowUp": () => {
-        this.options.editor.moveBlockUp();
+        this.options.editor.moveBlocksUp();
         return true;
       },
       "Shift-Mod-ArrowDown": () => {
-        this.options.editor.moveBlockDown();
+        this.options.editor.moveBlocksDown();
         return true;
       },
     };

package/src/extensions/LinkToolbar/LinkToolbarPlugin.ts

@@ -2,7 +2,7 @@ import { getMarkRange, posToDOMRect, Range } from "@tiptap/core";
 
 import { EditorView } from "@tiptap/pm/view";
 import { Mark } from "prosemirror-model";
-import { Plugin, PluginKey, PluginView } from "prosemirror-state";
+import { EditorState, Plugin, PluginKey, PluginView } from "prosemirror-state";
 
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition.js";
@@ -52,7 +52,7 @@ class LinkToolbarView implements PluginView {
 
     this.startMenuUpdateTimer = () => {
       this.menuUpdateTimer = setTimeout(() => {
-        this.update();
+        this.update(this.pmView);
       }, 250);
     };
 
@@ -190,8 +190,15 @@ class LinkToolbarView implements PluginView {
     }
   }
 
-  update() {
-    if (!this.pmView.hasFocus()) {
+  update(view: EditorView, oldState?: EditorState) {
+    const { state } = view;
+
+    const isSame =
+      oldState &&
+      oldState.selection.from === state.selection.from &&
+      oldState.selection.to === state.selection.to;
+
+    if (isSame || !this.pmView.hasFocus()) {
       return;
     }
 

package/src/extensions/Placeholder/PlaceholderPlugin.ts

@@ -48,22 +48,30 @@ export class PlaceholderPlugin {
         for (const [blockType, placeholder] of Object.entries(placeholders)) {
           const mustBeFocused = blockType === "default";
 
-          styleSheet.insertRule(
-            `${getSelector(
-              blockType,
-              mustBeFocused
-            )}{ content: ${JSON.stringify(placeholder)}; }`
-          );
-
-          // For some reason, the placeholders which show when the block is focused
-          // take priority over ones which show depending on block type, so we need
-          // to make sure the block specific ones are also used when the block is
-          // focused.
-          if (!mustBeFocused) {
+          try {
             styleSheet.insertRule(
-              `${getSelector(blockType, true)}{ content: ${JSON.stringify(
-                placeholder
-              )}; }`
+              `${getSelector(
+                blockType,
+                mustBeFocused
+              )} { content: ${JSON.stringify(placeholder)}; }`
+            );
+
+            // For some reason, the placeholders which show when the block is focused
+            // take priority over ones which show depending on block type, so we need
+            // to make sure the block specific ones are also used when the block is
+            // focused.
+            if (!mustBeFocused) {
+              styleSheet.insertRule(
+                `${getSelector(blockType, true)} { content: ${JSON.stringify(
+                  placeholder
+                )}; }`
+              );
+            }
+          } catch (e) {
+            // eslint-disable-next-line no-console
+            console.warn(
+              `Failed to insert placeholder CSS rule - this is likely due to the browser not supporting certain CSS pseudo-element selectors (:has, :only-child:, or :before)`,
+              e
             );
           }
         }

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -491,7 +491,11 @@ export class SideMenuProsemirrorPlugin<
    * attached to the same block regardless of which block is hovered by the
    * mouse cursor.
    */
-  freezeMenu = () => (this.view!.menuFrozen = true);
+  freezeMenu = () => {
+    this.view!.menuFrozen = true;
+    this.view!.state!.show = true;
+    this.view!.emitUpdate(this.view!.state!);
+  };
   /**
    * Unfreezes the side menu. When frozen, the side menu will stay
    * attached to the same block regardless of which block is hovered by the

package/src/extensions/SideMenu/dragging.ts

@@ -149,7 +149,11 @@ export function dragStart<
 
   const view = editor.prosemirrorView;
 
-  const pos = getNodeById(block.id, view.state.doc).posBeforeNode;
+  const posInfo = getNodeById(block.id, view.state.doc);
+  if (!posInfo) {
+    throw new Error(`Block with ID ${block.id} not found`);
+  }
+  const pos = posInfo.posBeforeNode;
 
   if (pos != null) {
     const selection = view.state.selection;

package/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -176,14 +176,9 @@ export function getDefaultSlashMenuItems<
   if (checkDefaultBlockTypeInSchema("codeBlock", editor)) {
     items.push({
       onItemClick: () => {
-        const pos = editor._tiptapEditor.state.selection.from;
-
         insertOrUpdateBlock(editor, {
           type: "codeBlock",
         });
-
-        // Move the cursor inside the code block
-        editor._tiptapEditor.commands.setTextSelection(pos);
       },
       badge: formatKeyboardShortcut("Mod-Alt-c"),
       key: "code_block",

package/src/extensions/TableHandles/TableHandlesPlugin.ts

@@ -236,6 +236,9 @@ export class TableHandlesView<
       blockEl.id,
       this.editor._tiptapEditor.state.doc
     );
+    if (!pmNodeInfo) {
+      throw new Error(`Block with ID ${blockEl.id} not found`);
+    }
 
     const block = nodeToBlock(
       pmNodeInfo.node,
@@ -468,17 +471,26 @@ export class TableHandlesView<
     // the existing selection out of the block.
     this.editor.setTextCursorPosition(this.state.block.id);
   };
-  // Updates drag handle positions on table content updates.
+  // Updates drag handles when the table is modified or removed.
   update() {
     if (!this.state || !this.state.show) {
       return;
     }
 
-    const tableBody = this.tableElement!.querySelector("tbody");
-    if (!tableBody) {
+    // Hide handles if the table block has been removed.
+    this.state.block = this.editor.getBlock(this.state.block.id)!;
+    if (!this.state.block) {
+      this.state.show = false;
+      this.state.showAddOrRemoveRowsButton = false;
+      this.state.showAddOrRemoveColumnsButton = false;
+      this.emitUpdate();
+
       return;
     }
 
+    const rowCount = this.state.block.content.rows.length;
+    const colCount = this.state.block.content.rows[0].cells.length;
+
     if (
       this.state.rowIndex !== undefined &&
       this.state.colIndex !== undefined
@@ -486,20 +498,33 @@ export class TableHandlesView<
       // If rows or columns are deleted in the update, the hovered indices for
       // those may now be out of bounds. If this is the case, they are moved to
       // the new last row or column.
-      if (this.state.rowIndex >= tableBody.children.length) {
-        this.state.rowIndex = tableBody.children.length - 1;
+      if (this.state.rowIndex >= rowCount) {
+        this.state.rowIndex = rowCount - 1;
       }
-      if (this.state.colIndex >= tableBody.children[0].children.length) {
-        this.state.colIndex = tableBody.children[0].children.length - 1;
+      if (this.state.colIndex >= colCount) {
+        this.state.colIndex = colCount - 1;
       }
+    }
+
+    // Update bounding boxes.
+    const tableBody = this.tableElement!.querySelector("tbody");
+    if (!tableBody) {
+      throw new Error(
+        "Table block does not contain a 'tbody' HTML element. This should never happen."
+      );
+    }
 
+    if (
+      this.state.rowIndex !== undefined &&
+      this.state.colIndex !== undefined
+    ) {
       const row = tableBody.children[this.state.rowIndex];
       const cell = row.children[this.state.colIndex];
+
       this.state.referencePosCell = cell.getBoundingClientRect();
     }
-
-    this.state.block = this.editor.getBlock(this.state.block.id)!;
     this.state.referencePosTable = tableBody.getBoundingClientRect();
+
     this.emitUpdate();
   }
 

package/src/i18n/locales/ru.ts

@@ -271,7 +271,7 @@ export const ru: Dictionary = {
         image: "Удалить картинку",
         video: "Удалить видео",
         audio: "Удалить аудио",
-        file: "Скачать файл",
+        file: "Удалить файл",
       },
     },
     file_preview_toggle: {

package/src/index.ts

@@ -46,6 +46,7 @@ export * from "./util/string.js";
 export * from "./util/typescript.js";
 export { UnreachableCaseError, assertEmpty } from "./util/typescript.js";
 export { locales };
+export * from "./api/blockManipulation/commands/updateBlock/updateBlock.js";
 
 // for testing from react (TODO: move):
 export * from "./api/nodeConversions/blockToNode.js";

package/types/src/api/blockManipulation/commands/moveBlocks/moveBlocks.d.ts

@@ -0,0 +1,15 @@
+import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor";
+import { BlockIdentifier } from "../../../../schema/index.js";
+/**
+ * Removes the selected blocks from the editor, then inserts them before/after a
+ * reference block. Also updates the selection to match the original selection
+ * using `getBlockSelectionData` and `updateBlockSelectionFromData`.
+ * @param editor The BlockNote editor instance to move the blocks in.
+ * @param referenceBlock The reference block to insert the selected blocks
+ * before/after.
+ * @param placement Whether to insert the selected blocks before or after the
+ * reference block.
+ */
+export declare function moveSelectedBlocksAndSelection(editor: BlockNoteEditor<any, any, any>, referenceBlock: BlockIdentifier, placement: "before" | "after"): void;
+export declare function moveBlocksUp(editor: BlockNoteEditor<any, any, any>): void;
+export declare function moveBlocksDown(editor: BlockNoteEditor<any, any, any>): void;

package/types/src/api/blockManipulation/getBlock/getBlock.d.ts

@@ -0,0 +1,7 @@
+import { Block } from "../../../blocks/defaultBlocks.js";
+import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor.js";
+import { BlockIdentifier, BlockSchema, InlineContentSchema, StyleSchema } from "../../../schema/index.js";
+export declare function getBlock<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<BSchema, I, S>, blockIdentifier: BlockIdentifier): Block<BSchema, I, S> | undefined;
+export declare function getPrevBlock<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<BSchema, I, S>, blockIdentifier: BlockIdentifier): Block<BSchema, I, S> | undefined;
+export declare function getNextBlock<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<BSchema, I, S>, blockIdentifier: BlockIdentifier): Block<BSchema, I, S> | undefined;
+export declare function getParentBlock<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<BSchema, I, S>, blockIdentifier: BlockIdentifier): Block<BSchema, I, S> | undefined;

package/types/src/api/blockManipulation/selections/selection.d.ts

@@ -0,0 +1,5 @@
+import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { Selection } from "../../../editor/selectionTypes.js";
+import { BlockIdentifier, BlockSchema, InlineContentSchema, StyleSchema } from "../../../schema/index.js";
+export declare function getSelection<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<BSchema, I, S>): Selection<BSchema, I, S> | undefined;
+export declare function setSelection<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<BSchema, I, S>, startBlock: BlockIdentifier, endBlock: BlockIdentifier): void;

package/types/src/api/blockManipulation/selections/selection.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/api/nodeUtil.d.ts

@@ -5,4 +5,4 @@ import { Node } from "prosemirror-model";
 export declare function getNodeById(id: string, doc: Node): {
     node: Node;
     posBeforeNode: number;
-};
+} | undefined;