@blocknote/core 0.27.2 → 0.29.0

package/src/api/nodeConversions/fragmentToBlocks.ts

@@ -1,11 +1,11 @@
 import { Fragment } from "@tiptap/pm/model";
-import { BlockNoteSchema } from "../../editor/BlockNoteSchema.js";
 import {
   BlockNoDefaults,
   BlockSchema,
   InlineContentSchema,
   StyleSchema,
 } from "../../schema/index.js";
+import { getPmSchema } from "../pmUtil.js";
 import { nodeToBlock } from "./nodeToBlock.js";
 
 /**
@@ -15,11 +15,12 @@ export function fragmentToBlocks<
   B extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
->(fragment: Fragment, schema: BlockNoteSchema<B, I, S>) {
+>(fragment: Fragment) {
   // first convert selection to blocknote-style blocks, and then
   // pass these to the exporter
   const blocks: BlockNoDefaults<B, I, S>[] = [];
   fragment.descendants((node) => {
+    const pmSchema = getPmSchema(node);
     if (node.type.name === "blockContainer") {
       if (node.firstChild?.type.name === "blockGroup") {
         // selection started within a block group
@@ -48,27 +49,13 @@ export function fragmentToBlocks<
     if (node.type.name === "columnList" && node.childCount === 1) {
       // column lists with a single column should be flattened (not the entire column list has been selected)
       node.firstChild?.forEach((child) => {
-        blocks.push(
-          nodeToBlock(
-            child,
-            schema.blockSchema,
-            schema.inlineContentSchema,
-            schema.styleSchema
-          )
-        );
+        blocks.push(nodeToBlock(child, pmSchema));
       });
       return false;
     }
 
     if (node.type.isInGroup("bnBlock")) {
-      blocks.push(
-        nodeToBlock(
-          node,
-          schema.blockSchema,
-          schema.inlineContentSchema,
-          schema.styleSchema
-        )
-      );
+      blocks.push(nodeToBlock(node, pmSchema));
       // don't descend into children, as they're already included in the block returned by nodeToBlock
       return false;
     }

package/src/api/nodeConversions/nodeToBlock.ts

@@ -1,4 +1,4 @@
-import { Mark, Node } from "@tiptap/pm/model";
+import { Mark, Node, Schema } from "@tiptap/pm/model";
 
 import UniqueID from "../../extensions/UniqueID/UniqueID.js";
 import type {
@@ -21,6 +21,9 @@ import {
   isStyledTextInlineContent,
 } from "../../schema/inlineContent/types.js";
 import { UnreachableCaseError } from "../../util/typescript.js";
+import { getBlockCache, getStyleSchema } from "../pmUtil.js";
+import { getInlineContentSchema } from "../pmUtil.js";
+import { getBlockSchema } from "../pmUtil.js";
 
 /**
  * Converts an internal (prosemirror) table node contentto a BlockNote Tablecontent
@@ -385,15 +388,14 @@ export function nodeToBlock<
   S extends StyleSchema
 >(
   node: Node,
-  blockSchema: BSchema,
-  inlineContentSchema: I,
-  styleSchema: S,
-  blockCache?: WeakMap<Node, Block<BSchema, I, S>>
+  schema: Schema,
+  blockSchema: BSchema = getBlockSchema(schema) as BSchema,
+  inlineContentSchema: I = getInlineContentSchema(schema) as I,
+  styleSchema: S = getStyleSchema(schema) as S,
+  blockCache = getBlockCache(schema)
 ): Block<BSchema, I, S> {
   if (!node.type.isInGroup("bnBlock")) {
-    throw Error(
-      "Node must be in bnBlock group, but is of type" + node.type.name
-    );
+    throw Error("Node should be a bnBlock, but is instead: " + node.type.name);
   }
 
   const cachedBlock = blockCache?.get(node);
@@ -439,6 +441,7 @@ export function nodeToBlock<
     children.push(
       nodeToBlock(
         child,
+        schema,
         blockSchema,
         inlineContentSchema,
         styleSchema,

package/src/api/nodeUtil.test.ts

@@ -0,0 +1,228 @@
+import { describe, expect, it, beforeEach } from "vitest";
+
+import { setupTestEnv } from "./blockManipulation/setupTestEnv.js";
+import { getBlocksChangedByTransaction } from "./nodeUtil.js";
+import { BlockNoteEditor } from "../editor/BlockNoteEditor.js";
+
+const getEditor = setupTestEnv();
+
+describe("Test getBlocksChangedByTransaction", () => {
+  let editor: BlockNoteEditor;
+
+  beforeEach(() => {
+    editor = getEditor();
+  });
+
+  it("should return the correct blocks changed by a transaction", () => {
+    const blocksChanged = editor.transact((tr) => {
+      return getBlocksChangedByTransaction(tr);
+    });
+    expect(blocksChanged).toEqual([]);
+  });
+
+  it("should return blocks inserted by a transaction", async () => {
+    const blocksChanged = editor.transact((tr) => {
+      editor.insertBlocks([{ type: "paragraph" }], "paragraph-0", "after");
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-inserted.json"
+    );
+  });
+
+  it("should return nested blocks inserted by a transaction", async () => {
+    const blocksChanged = editor.transact((tr) => {
+      editor.insertBlocks(
+        [
+          {
+            type: "paragraph",
+            children: [{ type: "paragraph", content: "Nested" }],
+          },
+        ],
+        "paragraph-0",
+        "after"
+      );
+
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-inserted-nested.json"
+    );
+  });
+
+  it("should return blocks deleted by a transaction", async () => {
+    const blocksChanged = editor.transact((tr) => {
+      editor.removeBlocks(["paragraph-0"]);
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-deleted.json"
+    );
+  });
+
+  it("should return deeply nested blocks deleted by a transaction", async () => {
+    const blocksChanged = editor.transact((tr) => {
+      editor.removeBlocks(["double-nested-paragraph-0"]);
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-deleted-nested-deep.json"
+    );
+  });
+
+  it("should return nested blocks deleted by a transaction", async () => {
+    const blocksChanged = editor.transact((tr) => {
+      editor.removeBlocks(["nested-paragraph-0"]);
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-deleted-nested.json"
+    );
+  });
+
+  it("should return blocks updated by a transaction", async () => {
+    const blocksChanged = editor.transact((tr) => {
+      editor.updateBlock("paragraph-0", {
+        props: {
+          backgroundColor: "red",
+        },
+      });
+
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-updated.json"
+    );
+  });
+
+  it("should return nested blocks updated by a transaction", async () => {
+    const blocksChanged = editor.transact((tr) => {
+      editor.updateBlock("nested-paragraph-0", {
+        props: {
+          backgroundColor: "red",
+        },
+      });
+
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-updated-nested.json"
+    );
+  });
+
+  it("should return deeply nested blocks updated by a transaction", async () => {
+    const blocksChanged = editor.transact((tr) => {
+      editor.updateBlock("double-nested-paragraph-0", {
+        content: "Example Text",
+      });
+
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-updated-nested-deep.json"
+    );
+  });
+
+  it("should return multiple nested blocks updated by a transaction", async () => {
+    const blocksChanged = editor.transact((tr) => {
+      editor.updateBlock("nested-paragraph-0", {
+        props: {
+          backgroundColor: "red",
+        },
+      });
+      editor.updateBlock("double-nested-paragraph-0", {
+        content: "Example Text",
+      });
+
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-updated-nested-multiple.json"
+    );
+  });
+
+  it("should only return a single block, if multiple updates change a single block in a transaction", async () => {
+    const blocksChanged = editor.transact((tr) => {
+      editor.updateBlock("paragraph-0", {
+        props: {
+          backgroundColor: "red",
+        },
+      });
+      editor.updateBlock("paragraph-0", {
+        props: {
+          backgroundColor: "blue",
+        },
+      });
+
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-updated-single.json"
+    );
+  });
+
+  it("should return multiple blocks, if multiple updates change multiple blocks in a transaction", async () => {
+    const blocksChanged = editor.transact((tr) => {
+      editor.updateBlock("paragraph-0", {
+        props: {
+          backgroundColor: "red",
+        },
+      });
+      editor.updateBlock("paragraph-1", {
+        props: {
+          backgroundColor: "blue",
+        },
+      });
+
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-updated-multiple.json"
+    );
+  });
+
+  it("should return multiple blocks, if multiple inserts add new blocks in a transaction", async () => {
+    const blocksChanged = editor.transact((tr) => {
+      editor.insertBlocks(
+        [{ type: "paragraph", content: "ABC" }],
+        "paragraph-0",
+        "after"
+      );
+      editor.insertBlocks(
+        [{ type: "paragraph", content: "DEF" }],
+        "paragraph-1",
+        "after"
+      );
+
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-updated-multiple-insert.json"
+    );
+  });
+
+  it("should return blocks which have had content inserted into them", async () => {
+    const blocksChanged = editor.transact((tr) => {
+      editor.setTextCursorPosition("paragraph-2", "start");
+      editor.insertInlineContent("Hello");
+
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-updated-content-inserted.json"
+    );
+  });
+});

package/src/api/nodeUtil.ts

@@ -1,4 +1,21 @@
-import { Node } from "prosemirror-model";
+import {
+  combineTransactionSteps,
+  findChildrenInRange,
+  getChangedRanges,
+} from "@tiptap/core";
+import type { Node } from "prosemirror-model";
+import type { Transaction } from "prosemirror-state";
+import {
+  Block,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+} from "../blocks/defaultBlocks.js";
+import type { BlockSchema } from "../schema/index.js";
+import type { InlineContentSchema } from "../schema/inlineContent/types.js";
+import type { StyleSchema } from "../schema/styles/types.js";
+import { nodeToBlock } from "./nodeConversions/nodeToBlock.js";
+import { getPmSchema } from "./pmUtil.js";
 
 /**
  * Get a TipTap node by id
@@ -17,7 +34,7 @@ export function getNodeById(
     }
 
     // Keeps traversing nodes if block with target ID has not been found.
-    if (!node.type.isInGroup("bnBlock") || node.attrs.id !== id) {
+    if (!isNodeBlock(node) || node.attrs.id !== id) {
       return true;
     }
 
@@ -36,3 +53,219 @@ export function getNodeById(
     posBeforeNode: posBeforeNode,
   };
 }
+
+export function isNodeBlock(node: Node): boolean {
+  return node.type.isInGroup("bnBlock");
+}
+
+/**
+ * This attributes the changes to a specific source.
+ */
+export type BlockChangeSource =
+  | {
+      /**
+       * When an event is triggered by the local user, the source is "local".
+       * This is the default source.
+       */
+      type: "local";
+    }
+  | {
+      /**
+       * When an event is triggered by a paste operation, the source is "paste".
+       */
+      type: "paste";
+    }
+  | {
+      /**
+       * When an event is triggered by a drop operation, the source is "drop".
+       */
+      type: "drop";
+    }
+  | {
+      /**
+       * When an event is triggered by an undo or redo operation, the source is "undo" or "redo".
+       * @note Y.js undo/redo are not differentiated.
+       */
+      type: "undo" | "redo" | "undo-redo";
+    }
+  | {
+      /**
+       * When an event is triggered by a remote user, the source is "remote".
+       */
+      type: "yjs-remote";
+    };
+
+export type BlocksChanged<
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  ISchema extends InlineContentSchema = DefaultInlineContentSchema,
+  SSchema extends StyleSchema = DefaultStyleSchema
+> = Array<
+  {
+    /**
+     * The affected block.
+     */
+    block: Block<BSchema, ISchema, SSchema>;
+    /**
+     * The source of the change.
+     */
+    source: BlockChangeSource;
+  } & (
+    | {
+        type: "insert" | "delete";
+        /**
+         * Insert and delete changes don't have a previous block.
+         */
+        prevBlock: undefined;
+      }
+    | {
+        type: "update";
+        /**
+         * The block before the update.
+         */
+        prevBlock: Block<BSchema, ISchema, SSchema>;
+      }
+  )
+>;
+
+/**
+ * Compares two blocks, ignoring their children.
+ * Returns true if the blocks are different (excluding children).
+ */
+function areBlocksDifferentExcludingChildren<
+  BSchema extends BlockSchema,
+  ISchema extends InlineContentSchema,
+  SSchema extends StyleSchema
+>(
+  block1: Block<BSchema, ISchema, SSchema>,
+  block2: Block<BSchema, ISchema, SSchema>
+): boolean {
+  // TODO use an actual diff algorithm
+  // Compare all properties except children
+  return (
+    block1.id !== block2.id ||
+    block1.type !== block2.type ||
+    JSON.stringify(block1.props) !== JSON.stringify(block2.props) ||
+    JSON.stringify(block1.content) !== JSON.stringify(block2.content)
+  );
+}
+
+/**
+ * Get the blocks that were changed by a transaction.
+ * @param transaction The transaction to get the changes from.
+ * @param editor The editor to get the changes from.
+ * @returns The blocks that were changed by the transaction.
+ */
+export function getBlocksChangedByTransaction<
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  ISchema extends InlineContentSchema = DefaultInlineContentSchema,
+  SSchema extends StyleSchema = DefaultStyleSchema
+>(
+  transaction: Transaction,
+  appendedTransactions: Transaction[] = []
+): BlocksChanged<BSchema, ISchema, SSchema> {
+  let source: BlockChangeSource = { type: "local" };
+
+  if (transaction.getMeta("paste")) {
+    source = { type: "paste" };
+  } else if (transaction.getMeta("uiEvent") === "drop") {
+    source = { type: "drop" };
+  } else if (transaction.getMeta("history$")) {
+    source = {
+      type: transaction.getMeta("history$").redo ? "redo" : "undo",
+    };
+  } else if (transaction.getMeta("y-sync$")) {
+    if (transaction.getMeta("y-sync$").isUndoRedoOperation) {
+      source = {
+        type: "undo-redo",
+      };
+    } else {
+      source = {
+        type: "yjs-remote",
+      };
+    }
+  }
+
+  // Get affected blocks before and after the change
+  const pmSchema = getPmSchema(transaction);
+  const combinedTransaction = combineTransactionSteps(transaction.before, [
+    transaction,
+    ...appendedTransactions,
+  ]);
+
+  const changedRanges = getChangedRanges(combinedTransaction);
+  const prevAffectedBlocks = changedRanges
+    .flatMap((range) => {
+      return findChildrenInRange(
+        combinedTransaction.before,
+        range.oldRange,
+        isNodeBlock
+      );
+    })
+    .map(({ node }) => nodeToBlock(node, pmSchema));
+
+  const nextAffectedBlocks = changedRanges
+    .flatMap((range) => {
+      return findChildrenInRange(
+        combinedTransaction.doc,
+        range.newRange,
+        isNodeBlock
+      );
+    })
+    .map(({ node }) => nodeToBlock(node, pmSchema));
+
+  const nextBlocks = new Map(
+    nextAffectedBlocks.map((block) => {
+      return [block.id, block];
+    })
+  );
+  const prevBlocks = new Map(
+    prevAffectedBlocks.map((block) => {
+      return [block.id, block];
+    })
+  );
+
+  const changes: BlocksChanged<BSchema, ISchema, SSchema> = [];
+
+  // Inserted blocks are blocks that were not in the previous state and are in the next state
+  for (const [id, block] of nextBlocks) {
+    if (!prevBlocks.has(id)) {
+      changes.push({
+        type: "insert",
+        block,
+        source,
+        prevBlock: undefined,
+      });
+    }
+  }
+
+  // Deleted blocks are blocks that were in the previous state but not in the next state
+  for (const [id, block] of prevBlocks) {
+    if (!nextBlocks.has(id)) {
+      changes.push({
+        type: "delete",
+        block,
+        source,
+        prevBlock: undefined,
+      });
+    }
+  }
+
+  // Updated blocks are blocks that were in the previous state and are in the next state
+  for (const [id, block] of nextBlocks) {
+    if (prevBlocks.has(id)) {
+      const prevBlock = prevBlocks.get(id)!;
+
+      // Only include the update if the block itself changed (excluding children)
+      if (areBlocksDifferentExcludingChildren(prevBlock, block)) {
+        changes.push({
+          type: "update",
+          block,
+          prevBlock,
+          source,
+        });
+      }
+    }
+  }
+
+  return changes;
+}

package/src/api/parsers/html/parseHTML.ts

@@ -12,13 +12,7 @@ export async function HTMLToBlocks<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
->(
-  html: string,
-  blockSchema: BSchema,
-  icSchema: I,
-  styleSchema: S,
-  pmSchema: Schema
-): Promise<Block<BSchema, I, S>[]> {
+>(html: string, pmSchema: Schema): Promise<Block<BSchema, I, S>[]> {
   const htmlNode = nestedListsToBlockNoteStructure(html);
   const parser = DOMParser.fromSchema(pmSchema);
 
@@ -33,9 +27,7 @@ export async function HTMLToBlocks<
   const blocks: Block<BSchema, I, S>[] = [];
 
   for (let i = 0; i < parentNode.childCount; i++) {
-    blocks.push(
-      nodeToBlock(parentNode.child(i), blockSchema, icSchema, styleSchema)
-    );
+    blocks.push(nodeToBlock(parentNode.child(i), pmSchema));
   }
 
   return blocks;

package/src/api/parsers/markdown/parseMarkdown.ts

@@ -71,14 +71,8 @@ export async function markdownToBlocks<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
->(
-  markdown: string,
-  blockSchema: BSchema,
-  icSchema: I,
-  styleSchema: S,
-  pmSchema: Schema
-): Promise<Block<BSchema, I, S>[]> {
+>(markdown: string, pmSchema: Schema): Promise<Block<BSchema, I, S>[]> {
   const htmlString = await markdownToHTML(markdown);
 
-  return HTMLToBlocks(htmlString, blockSchema, icSchema, styleSchema, pmSchema);
+  return HTMLToBlocks(htmlString, pmSchema);
 }

package/src/api/pmUtil.ts

@@ -0,0 +1,54 @@
+import type { Node, Schema } from "prosemirror-model";
+import type { Transaction } from "prosemirror-state";
+import type { BlockNoteEditor } from "../editor/BlockNoteEditor.js";
+import type { BlockSchema } from "../schema/blocks/types.js";
+import type { InlineContentSchema } from "../schema/inlineContent/types.js";
+import type { StyleSchema } from "../schema/styles/types.js";
+import { BlockNoteSchema } from "../editor/BlockNoteSchema.js";
+
+export function getPmSchema(trOrNode: Transaction | Node) {
+  if ("doc" in trOrNode) {
+    return trOrNode.doc.type.schema;
+  }
+  return trOrNode.type.schema;
+}
+
+function getBlockNoteEditor<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(schema: Schema): BlockNoteEditor<BSchema, I, S> {
+  return schema.cached.blockNoteEditor as BlockNoteEditor<BSchema, I, S>;
+}
+
+export function getBlockNoteSchema<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(schema: Schema): BlockNoteSchema<BSchema, I, S> {
+  return getBlockNoteEditor(schema).schema as unknown as BlockNoteSchema<
+    BSchema,
+    I,
+    S
+  >;
+}
+
+export function getBlockSchema<BSchema extends BlockSchema>(
+  schema: Schema
+): BSchema {
+  return getBlockNoteSchema(schema).blockSchema as BSchema;
+}
+
+export function getInlineContentSchema<I extends InlineContentSchema>(
+  schema: Schema
+): I {
+  return getBlockNoteSchema(schema).inlineContentSchema as I;
+}
+
+export function getStyleSchema<S extends StyleSchema>(schema: Schema): S {
+  return getBlockNoteSchema(schema).styleSchema as S;
+}
+
+export function getBlockCache(schema: Schema) {
+  return getBlockNoteEditor(schema).blockCache;
+}