@blocknote/core 0.16.0 → 0.17.0

package/src/api/blockManipulation/commands/updateBlock/updateBlock.test.ts

@@ -0,0 +1,300 @@
+import { describe, expect, it } from "vitest";
+
+import { setupTestEnv } from "../../setupTestEnv.js";
+import { updateBlock } from "./updateBlock.js";
+
+const getEditor = setupTestEnv();
+
+describe("Test updateBlock typing", () => {
+  it("Type is inferred correctly", () => {
+    try {
+      getEditor().updateBlock(
+        { id: "placeholder-id" },
+        {
+          // @ts-expect-error invalid type
+          type: "non-existing",
+        }
+      );
+    } catch (e) {
+      // ID doesn't exist, which is fine - this is a compile-time check
+    }
+  });
+
+  it("Props are inferred correctly", () => {
+    try {
+      getEditor().updateBlock(
+        { id: "placeholder-id" },
+        {
+          type: "paragraph",
+          props: {
+            // @ts-expect-error invalid type
+            level: 1,
+          },
+        }
+      );
+    } catch (e) {
+      // ID doesn't exist, which is fine - this is a compile-time check
+    }
+    try {
+      getEditor().updateBlock(
+        { id: "placeholder-id" },
+        {
+          type: "heading",
+          props: {
+            level: 1,
+          },
+        }
+      );
+    } catch (e) {
+      // ID doesn't exist, which is fine - this is a compile-time check
+    }
+  });
+});
+
+describe("Test updateBlock", () => {
+  it.skip("Update ID", () => {
+    updateBlock(getEditor(), "heading-with-everything", {
+      id: "new-id",
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update type", () => {
+    updateBlock(getEditor(), "heading-with-everything", {
+      type: "paragraph",
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update single prop", () => {
+    updateBlock(getEditor(), "heading-with-everything", {
+      props: {
+        level: 3,
+      },
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update all props", () => {
+    updateBlock(getEditor(), "heading-with-everything", {
+      props: {
+        backgroundColor: "blue",
+        level: 3,
+        textAlignment: "right",
+        textColor: "blue",
+      },
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Revert single prop", () => {
+    updateBlock(getEditor(), "heading-with-everything", {
+      props: {
+        level: undefined,
+      },
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Revert all props", () => {
+    updateBlock(getEditor(), "heading-with-everything", {
+      props: {
+        backgroundColor: undefined,
+        level: undefined,
+        textAlignment: undefined,
+        textColor: undefined,
+      },
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update with plain content", () => {
+    updateBlock(getEditor(), "heading-with-everything", {
+      content: "New content",
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update with styled content", () => {
+    updateBlock(getEditor(), "heading-with-everything", {
+      content: [
+        { type: "text", text: "New", styles: { backgroundColor: "blue" } },
+        { type: "text", text: " ", styles: {} },
+        { type: "text", text: "content", styles: { backgroundColor: "blue" } },
+      ],
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update children", () => {
+    updateBlock(getEditor(), "heading-with-everything", {
+      children: [
+        {
+          id: "new-nested-paragraph",
+          type: "paragraph",
+          content: "New nested Paragraph 2",
+          children: [
+            {
+              id: "new-double-nested-paragraph",
+              type: "paragraph",
+              content: "New double Nested Paragraph 2",
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it.skip("Update everything", () => {
+    updateBlock(getEditor(), "heading-with-everything", {
+      id: "new-id",
+      type: "paragraph",
+      props: {
+        backgroundColor: "blue",
+        textAlignment: "right",
+        textColor: "blue",
+      },
+      content: [
+        { type: "text", text: "New", styles: { backgroundColor: "blue" } },
+        { type: "text", text: " ", styles: {} },
+        { type: "text", text: "content", styles: { backgroundColor: "blue" } },
+      ],
+      children: [
+        {
+          id: "new-nested-paragraph",
+          type: "paragraph",
+          content: "New nested Paragraph 2",
+          children: [
+            {
+              id: "new-double-nested-paragraph",
+              type: "paragraph",
+              content: "New double Nested Paragraph 2",
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update inline content to empty table content", () => {
+    updateBlock(getEditor(), "paragraph-0", {
+      type: "table",
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update table content to empty inline content", () => {
+    updateBlock(getEditor(), "table-0", {
+      type: "paragraph",
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update inline content to table content", () => {
+    updateBlock(getEditor(), "paragraph-0", {
+      type: "table",
+      content: {
+        type: "tableContent",
+        rows: [
+          {
+            cells: ["Cell 1", "Cell 2", "Cell 3"],
+          },
+          {
+            cells: ["Cell 4", "Cell 5", "Cell 6"],
+          },
+          {
+            cells: ["Cell 7", "Cell 8", "Cell 9"],
+          },
+        ],
+      },
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update table content to inline content", () => {
+    updateBlock(getEditor(), "table-0", {
+      type: "paragraph",
+      content: "Paragraph",
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update inline content to no content", () => {
+    updateBlock(getEditor(), "paragraph-0", {
+      type: "image",
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update no content to empty inline content", () => {
+    updateBlock(getEditor(), "image-0", {
+      type: "paragraph",
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update no content to inline content", () => {
+    updateBlock(getEditor(), "image-0", {
+      type: "paragraph",
+      content: "Paragraph",
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update no content to empty table content", () => {
+    updateBlock(getEditor(), "image-0", {
+      type: "table",
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update no content to table content", () => {
+    updateBlock(getEditor(), "image-0", {
+      type: "table",
+      content: {
+        type: "tableContent",
+        rows: [
+          {
+            cells: ["Cell 1", "Cell 2", "Cell 3"],
+          },
+          {
+            cells: ["Cell 4", "Cell 5", "Cell 6"],
+          },
+          {
+            cells: ["Cell 7", "Cell 8", "Cell 9"],
+          },
+        ],
+      },
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update table content to no content", () => {
+    updateBlock(getEditor(), "table-0", {
+      type: "image",
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+});

package/src/api/blockManipulation/commands/updateBlock/updateBlock.ts

@@ -0,0 +1,199 @@
+import { Fragment, Node as PMNode, Slice } from "prosemirror-model";
+import { EditorState } from "prosemirror-state";
+
+import { Block, PartialBlock } from "../../../../blocks/defaultBlocks.js";
+import { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
+import {
+  BlockIdentifier,
+  BlockSchema,
+} from "../../../../schema/blocks/types.js";
+import { InlineContentSchema } from "../../../../schema/inlineContent/types.js";
+import { StyleSchema } from "../../../../schema/styles/types.js";
+import { UnreachableCaseError } from "../../../../util/typescript.js";
+import { getBlockInfoFromResolvedPos } from "../../../getBlockInfoFromPos.js";
+import {
+  blockToNode,
+  inlineContentToNodes,
+  tableContentToNodes,
+} from "../../../nodeConversions/blockToNode.js";
+import { nodeToBlock } from "../../../nodeConversions/nodeToBlock.js";
+import { getNodeById } from "../../../nodeUtil.js";
+
+export const updateBlockCommand =
+  <
+    BSchema extends BlockSchema,
+    I extends InlineContentSchema,
+    S extends StyleSchema
+  >(
+    editor: BlockNoteEditor<BSchema, I, S>,
+    posBeforeBlock: number,
+    block: PartialBlock<BSchema, I, S>
+  ) =>
+  ({
+    state,
+    dispatch,
+  }: {
+    state: EditorState;
+    dispatch: ((args?: any) => any) | undefined;
+  }) => {
+    const { blockContainer, blockContent, blockGroup } =
+      getBlockInfoFromResolvedPos(state.doc.resolve(posBeforeBlock));
+
+    if (dispatch) {
+      // Adds blockGroup node with child blocks if necessary.
+      if (block.children !== undefined) {
+        const childNodes = [];
+
+        // Creates ProseMirror nodes for each child block, including their descendants.
+        for (const child of block.children) {
+          childNodes.push(
+            blockToNode(child, state.schema, editor.schema.styleSchema)
+          );
+        }
+
+        // Checks if a blockGroup node already exists.
+        if (blockGroup) {
+          // Replaces all child nodes in the existing blockGroup with the ones created earlier.
+          state.tr.replace(
+            blockGroup.beforePos + 1,
+            blockGroup.afterPos - 1,
+            new Slice(Fragment.from(childNodes), 0, 0)
+          );
+        } else {
+          // Inserts a new blockGroup containing the child nodes created earlier.
+          state.tr.insert(
+            blockContent.afterPos,
+            state.schema.nodes["blockGroup"].create({}, childNodes)
+          );
+        }
+      }
+
+      const oldType = blockContent.node.type.name;
+      const newType = block.type || oldType;
+
+      // The code below determines the new content of the block.
+      // or "keep" to keep as-is
+      let content: PMNode[] | "keep" = "keep";
+
+      // Has there been any custom content provided?
+      if (block.content) {
+        if (typeof block.content === "string") {
+          // Adds a single text node with no marks to the content.
+          content = inlineContentToNodes(
+            [block.content],
+            state.schema,
+            editor.schema.styleSchema
+          );
+        } else if (Array.isArray(block.content)) {
+          // Adds a text node with the provided styles converted into marks to the content,
+          // for each InlineContent object.
+          content = inlineContentToNodes(
+            block.content,
+            state.schema,
+            editor.schema.styleSchema
+          );
+        } else if (block.content.type === "tableContent") {
+          content = tableContentToNodes(
+            block.content,
+            state.schema,
+            editor.schema.styleSchema
+          );
+        } else {
+          throw new UnreachableCaseError(block.content.type);
+        }
+      } else {
+        // no custom content has been provided, use existing content IF possible
+
+        // Since some block types contain inline content and others don't,
+        // we either need to call setNodeMarkup to just update type &
+        // attributes, or replaceWith to replace the whole blockContent.
+        const oldContentType = state.schema.nodes[oldType].spec.content;
+        const newContentType = state.schema.nodes[newType].spec.content;
+
+        if (oldContentType === "") {
+          // keep old content, because it's empty anyway and should be compatible with
+          // any newContentType
+        } else if (newContentType !== oldContentType) {
+          // the content type changed, replace the previous content
+          content = [];
+        } else {
+          // keep old content, because the content type is the same and should be compatible
+        }
+      }
+
+      // Now, changes the blockContent node type and adds the provided props
+      // as attributes. Also preserves all existing attributes that are
+      // compatible with the new type.
+      //
+      // Use either setNodeMarkup or replaceWith depending on whether the
+      // content is being replaced or not.
+      if (content === "keep") {
+        // use setNodeMarkup to only update the type and attributes
+        state.tr.setNodeMarkup(
+          blockContent.beforePos,
+          block.type === undefined ? undefined : state.schema.nodes[block.type],
+          {
+            ...blockContent.node.attrs,
+            ...block.props,
+          }
+        );
+      } else {
+        // use replaceWith to replace the content and the block itself
+        // also  reset the selection since replacing the block content
+        // sets it to the next block.
+        state.tr.replaceWith(
+          blockContent.beforePos,
+          blockContent.afterPos,
+          state.schema.nodes[newType].create(
+            {
+              ...blockContent.node.attrs,
+              ...block.props,
+            },
+            content
+          )
+        );
+      }
+
+      // Adds all provided props as attributes to the parent blockContainer node too, and also preserves existing
+      // attributes.
+      state.tr.setNodeMarkup(blockContainer.beforePos, undefined, {
+        ...blockContainer.node.attrs,
+        ...block.props,
+      });
+    }
+
+    return true;
+  };
+
+export function updateBlock<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<BSchema, I, S>,
+  blockToUpdate: BlockIdentifier,
+  update: PartialBlock<BSchema, I, S>
+): Block<BSchema, I, S> {
+  const ttEditor = editor._tiptapEditor;
+
+  const id =
+    typeof blockToUpdate === "string" ? blockToUpdate : blockToUpdate.id;
+  const { posBeforeNode } = getNodeById(id, ttEditor.state.doc);
+
+  ttEditor.commands.command(({ state, dispatch }) => {
+    updateBlockCommand(editor, posBeforeNode, update)({ state, dispatch });
+    return true;
+  });
+
+  const blockContainerNode = ttEditor.state.doc
+    .resolve(posBeforeNode + 1) // TODO: clean?
+    .node();
+
+  return nodeToBlock(
+    blockContainerNode,
+    editor.schema.blockSchema,
+    editor.schema.inlineContentSchema,
+    editor.schema.styleSchema,
+    editor.blockCache
+  );
+}

package/src/api/blockManipulation/insertContentAt.ts

@@ -0,0 +1,96 @@
+import { selectionToInsertionEnd } from "@tiptap/core";
+import { Node } from "prosemirror-model";
+
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../schema/index.js";
+
+// similar to tiptap insertContentAt
+export function insertContentAt<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  position: any,
+  nodes: Node[],
+  editor: BlockNoteEditor<BSchema, I, S>,
+  options: {
+    updateSelection: boolean;
+  } = { updateSelection: true }
+) {
+  const tr = editor._tiptapEditor.state.tr;
+
+  // don’t dispatch an empty fragment because this can lead to strange errors
+  // if (content.toString() === "<>") {
+  //   return true;
+  // }
+
+  let { from, to } =
+    typeof position === "number"
+      ? { from: position, to: position }
+      : { from: position.from, to: position.to };
+
+  let isOnlyTextContent = true;
+  let isOnlyBlockContent = true;
+  // const nodes = isFragment(content) ? content : [content];
+
+  let text = "";
+
+  nodes.forEach((node) => {
+    // check if added node is valid
+    node.check();
+
+    if (isOnlyTextContent && node.isText && node.marks.length === 0) {
+      text += node.text;
+    } else {
+      isOnlyTextContent = false;
+    }
+
+    isOnlyBlockContent = isOnlyBlockContent ? node.isBlock : false;
+  });
+
+  // check if we can replace the wrapping node by
+  // the newly inserted content
+  // example:
+  // replace an empty paragraph by an inserted image
+  // instead of inserting the image below the paragraph
+  if (from === to && isOnlyBlockContent) {
+    const { parent } = tr.doc.resolve(from);
+    const isEmptyTextBlock =
+      parent.isTextblock && !parent.type.spec.code && !parent.childCount;
+
+    if (isEmptyTextBlock) {
+      from -= 1;
+      to += 1;
+    }
+  }
+
+  // if there is only plain text we have to use `insertText`
+  // because this will keep the current marks
+  if (isOnlyTextContent) {
+    // if value is string, we can use it directly
+    // otherwise if it is an array, we have to join it
+    // if (Array.isArray(value)) {
+    //   tr.insertText(value.map((v) => v.text || "").join(""), from, to);
+    // } else if (typeof value === "object" && !!value && !!value.text) {
+    //   tr.insertText(value.text, from, to);
+    // } else {
+    //   tr.insertText(value as string, from, to);
+    // }
+    tr.insertText(text, from, to);
+  } else {
+    tr.replaceWith(from, to, nodes);
+  }
+
+  // set cursor at end of inserted content
+  if (options.updateSelection) {
+    selectionToInsertionEnd(tr, tr.steps.length - 1, -1);
+  }
+
+  editor.dispatch(tr);
+
+  return true;
+}