@blocknote/core 0.30.0 → 0.31.0

package/src/api/nodeConversions/nodeToBlock.ts

@@ -1,5 +1,5 @@
-import { Mark, Node, Schema } from "@tiptap/pm/model";
-
+import { Mark, Node, Schema, Slice } from "@tiptap/pm/model";
+import type { Block } from "../../blocks/defaultBlocks.js";
 import UniqueID from "../../extensions/UniqueID/UniqueID.js";
 import type {
   BlockSchema,
@@ -13,24 +13,25 @@ import type {
   TableCell,
   TableContent,
 } from "../../schema/index.js";
-import { getBlockInfoWithManualOffset } from "../getBlockInfoFromPos.js";
-
-import type { Block } from "../../blocks/defaultBlocks.js";
 import {
   isLinkInlineContent,
   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";
+import { getBlockInfoWithManualOffset } from "../getBlockInfoFromPos.js";
+import {
+  getBlockCache,
+  getBlockSchema,
+  getInlineContentSchema,
+  getStyleSchema,
+} from "../pmUtil.js";
 
 /**
  * Converts an internal (prosemirror) table node contentto a BlockNote Tablecontent
  */
 export function contentNodeToTableContent<
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(contentNode: Node, inlineContentSchema: I, styleSchema: S) {
   const ret: TableContent<I, S> = {
     type: "tableContent",
@@ -70,34 +71,37 @@ export function contentNodeToTableContent<
       // Convert cell content to inline content and merge adjacent styled text nodes
       const content = cellNode.content.content
         .map((child) =>
-          contentNodeToInlineContent(child, inlineContentSchema, styleSchema)
+          contentNodeToInlineContent(child, inlineContentSchema, styleSchema),
         )
         // The reason that we merge this content is that we allow table cells to contain multiple tableParagraph nodes
         // So that we can leverage prosemirror-tables native merging
         // If the schema only allowed a single tableParagraph node, then the merging would not work and cause prosemirror to fit the content into a new cell
-        .reduce((acc, contentPartial) => {
-          if (!acc.length) {
-            return contentPartial;
-          }
+        .reduce(
+          (acc, contentPartial) => {
+            if (!acc.length) {
+              return contentPartial;
+            }
 
-          const last = acc[acc.length - 1];
-          const first = contentPartial[0];
+            const last = acc[acc.length - 1];
+            const first = contentPartial[0];
 
-          // Only merge if the last and first content are both styled text nodes and have the same styles
-          if (
-            first &&
-            isStyledTextInlineContent(last) &&
-            isStyledTextInlineContent(first) &&
-            JSON.stringify(last.styles) === JSON.stringify(first.styles)
-          ) {
-            // Join them together if they have the same styles
-            last.text += "\n" + first.text;
-            acc.push(...contentPartial.slice(1));
+            // Only merge if the last and first content are both styled text nodes and have the same styles
+            if (
+              first &&
+              isStyledTextInlineContent(last) &&
+              isStyledTextInlineContent(first) &&
+              JSON.stringify(last.styles) === JSON.stringify(first.styles)
+            ) {
+              // Join them together if they have the same styles
+              last.text += "\n" + first.text;
+              acc.push(...contentPartial.slice(1));
+              return acc;
+            }
+            acc.push(...contentPartial);
             return acc;
-          }
-          acc.push(...contentPartial);
-          return acc;
-        }, [] as InlineContent<I, S>[]);
+          },
+          [] as InlineContent<I, S>[],
+        );
 
       return {
         type: "tableCell",
@@ -135,7 +139,7 @@ export function contentNodeToTableContent<
  */
 export function contentNodeToInlineContent<
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(contentNode: Node, inlineContentSchema: I, styleSchema: S) {
   const content: InlineContent<any, S>[] = [];
   let currentContent: InlineContent<any, S> | undefined = undefined;
@@ -182,7 +186,7 @@ export function contentNodeToInlineContent<
       }
 
       content.push(
-        nodeToCustomInlineContent(node, inlineContentSchema, styleSchema)
+        nodeToCustomInlineContent(node, inlineContentSchema, styleSchema),
       );
 
       return;
@@ -259,7 +263,8 @@ export function contentNodeToInlineContent<
             // Styles are the same.
             if (
               JSON.stringify(
-                currentContent.content[currentContent.content.length - 1].styles
+                currentContent.content[currentContent.content.length - 1]
+                  .styles,
               ) === JSON.stringify(styles)
             ) {
               currentContent.content[currentContent.content.length - 1].text +=
@@ -336,7 +341,7 @@ export function contentNodeToInlineContent<
 
 export function nodeToCustomInlineContent<
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(node: Node, inlineContentSchema: I, styleSchema: S): InlineContent<I, S> {
   if (node.type.name === "text" || node.type.name === "link") {
     throw new Error("unexpected");
@@ -363,7 +368,7 @@ export function nodeToCustomInlineContent<
     content = contentNodeToInlineContent(
       node,
       inlineContentSchema,
-      styleSchema
+      styleSchema,
     ) as any; // TODO: is this safe? could we have Links here that are undesired?
   } else {
     content = undefined;
@@ -385,14 +390,14 @@ export function nodeToCustomInlineContent<
 export function nodeToBlock<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
   node: Node,
   schema: Schema,
   blockSchema: BSchema = getBlockSchema(schema) as BSchema,
   inlineContentSchema: I = getInlineContentSchema(schema) as I,
   styleSchema: S = getStyleSchema(schema) as S,
-  blockCache = getBlockCache(schema)
+  blockCache = getBlockCache(schema),
 ): Block<BSchema, I, S> {
   if (!node.type.isInGroup("bnBlock")) {
     throw Error("Node should be a bnBlock, but is instead: " + node.type.name);
@@ -445,8 +450,8 @@ export function nodeToBlock<
         blockSchema,
         inlineContentSchema,
         styleSchema,
-        blockCache
-      )
+        blockCache,
+      ),
     );
   });
 
@@ -459,7 +464,7 @@ export function nodeToBlock<
     content = contentNodeToInlineContent(
       blockInfo.blockContent.node,
       inlineContentSchema,
-      styleSchema
+      styleSchema,
     );
   } else if (blockConfig.content === "table") {
     if (!blockInfo.isBlockContainer) {
@@ -468,7 +473,7 @@ export function nodeToBlock<
     content = contentNodeToTableContent(
       blockInfo.blockContent.node,
       inlineContentSchema,
-      styleSchema
+      styleSchema,
     );
   } else if (blockConfig.content === "none") {
     content = undefined;
@@ -488,3 +493,197 @@ export function nodeToBlock<
 
   return block;
 }
+
+/**
+ * Convert a Prosemirror document to a BlockNote document (array of blocks)
+ */
+export function docToBlocks<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema,
+>(
+  doc: Node,
+  schema: Schema,
+  blockSchema: BSchema = getBlockSchema(schema) as BSchema,
+  inlineContentSchema: I = getInlineContentSchema(schema) as I,
+  styleSchema: S = getStyleSchema(schema) as S,
+  blockCache = getBlockCache(schema),
+) {
+  const blocks: Block<BSchema, I, S>[] = [];
+  doc.firstChild!.descendants((node) => {
+    blocks.push(
+      nodeToBlock(
+        node,
+        schema,
+        blockSchema,
+        inlineContentSchema,
+        styleSchema,
+        blockCache,
+      ),
+    );
+    return false;
+  });
+  return blocks;
+}
+
+/**
+ *
+ * Parse a Prosemirror Slice into a BlockNote selection. The prosemirror schema looks like this:
+ *
+ * <blockGroup>
+ *   <blockContainer> (main content of block)
+ *       <p, heading, etc.>
+ *   <blockGroup> (only if blocks has children)
+ *     <blockContainer> (child block)
+ *       <p, heading, etc.>
+ *     </blockContainer>
+ *    <blockContainer> (child block 2)
+ *       <p, heading, etc.>
+ *     </blockContainer>
+ *   </blockContainer>
+ *  </blockGroup>
+ * </blockGroup>
+ *
+ */
+export function prosemirrorSliceToSlicedBlocks<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema,
+>(
+  slice: Slice,
+  schema: Schema,
+  blockSchema: BSchema = getBlockSchema(schema) as BSchema,
+  inlineContentSchema: I = getInlineContentSchema(schema) as I,
+  styleSchema: S = getStyleSchema(schema) as S,
+  blockCache: WeakMap<Node, Block<BSchema, I, S>> = getBlockCache(schema),
+): {
+  /**
+   * The blocks that are included in the selection.
+   */
+  blocks: Block<BSchema, I, S>[];
+  /**
+   * If a block was "cut" at the start of the selection, this will be the id of the block that was cut.
+   */
+  blockCutAtStart: string | undefined;
+  /**
+   * If a block was "cut" at the end of the selection, this will be the id of the block that was cut.
+   */
+  blockCutAtEnd: string | undefined;
+} {
+  // console.log(JSON.stringify(slice.toJSON()));
+  function processNode(
+    node: Node,
+    openStart: number,
+    openEnd: number,
+  ): {
+    blocks: Block<BSchema, I, S>[];
+    blockCutAtStart: string | undefined;
+    blockCutAtEnd: string | undefined;
+  } {
+    if (node.type.name !== "blockGroup") {
+      throw new Error("unexpected");
+    }
+    const blocks: Block<BSchema, I, S>[] = [];
+    let blockCutAtStart: string | undefined;
+    let blockCutAtEnd: string | undefined;
+
+    node.forEach((blockContainer, _offset, index) => {
+      if (blockContainer.type.name !== "blockContainer") {
+        throw new Error("unexpected");
+      }
+      if (blockContainer.childCount === 0) {
+        return;
+      }
+      if (blockContainer.childCount === 0 || blockContainer.childCount > 2) {
+        throw new Error(
+          "unexpected, blockContainer.childCount: " + blockContainer.childCount,
+        );
+      }
+
+      const isFirstBlock = index === 0;
+      const isLastBlock = index === node.childCount - 1;
+
+      if (blockContainer.firstChild!.type.name === "blockGroup") {
+        // this is the parent where a selection starts within one of its children,
+        // e.g.:
+        // A
+        // ├── B
+        // selection starts within B, then this blockContainer is A, but we don't care about A
+        // so let's descend into B and continue processing
+        if (!isFirstBlock) {
+          throw new Error("unexpected");
+        }
+        const ret = processNode(
+          blockContainer.firstChild!,
+          Math.max(0, openStart - 1),
+          isLastBlock ? Math.max(0, openEnd - 1) : 0,
+        );
+        blockCutAtStart = ret.blockCutAtStart;
+        if (isLastBlock) {
+          blockCutAtEnd = ret.blockCutAtEnd;
+        }
+        blocks.push(...ret.blocks);
+        return;
+      }
+
+      const block = nodeToBlock(
+        blockContainer,
+        schema,
+        blockSchema,
+        inlineContentSchema,
+        styleSchema,
+        blockCache,
+      );
+      const childGroup =
+        blockContainer.childCount > 1 ? blockContainer.child(1) : undefined;
+
+      let childBlocks: Block<BSchema, I, S>[] = [];
+      if (childGroup) {
+        const ret = processNode(
+          childGroup,
+          0, // TODO: can this be anything other than 0?
+          isLastBlock ? Math.max(0, openEnd - 1) : 0,
+        );
+        childBlocks = ret.blocks;
+        if (isLastBlock) {
+          blockCutAtEnd = ret.blockCutAtEnd;
+        }
+      }
+
+      if (isLastBlock && !childGroup && openEnd > 1) {
+        blockCutAtEnd = block.id;
+      }
+
+      if (isFirstBlock && openStart > 1) {
+        blockCutAtStart = block.id;
+      }
+
+      blocks.push({
+        ...(block as any),
+        children: childBlocks,
+      });
+    });
+
+    return { blocks, blockCutAtStart, blockCutAtEnd };
+  }
+
+  if (slice.content.childCount === 0) {
+    return {
+      blocks: [],
+      blockCutAtStart: undefined,
+      blockCutAtEnd: undefined,
+    };
+  }
+
+  if (slice.content.childCount !== 1) {
+    throw new Error(
+      "slice must be a single block, did you forget includeParents=true?",
+    );
+  }
+
+  return processNode(
+    slice.content.firstChild!,
+    Math.max(slice.openStart - 1, 0),
+    Math.max(slice.openEnd - 1, 0),
+  );
+}

package/src/api/nodeUtil.test.ts

@@ -27,7 +27,7 @@ describe("Test getBlocksChangedByTransaction", () => {
     });
 
     await expect(blocksChanged).toMatchFileSnapshot(
-      "__snapshots__/blocks-inserted.json"
+      "__snapshots__/blocks-inserted.json",
     );
   });
 
@@ -41,14 +41,14 @@ describe("Test getBlocksChangedByTransaction", () => {
           },
         ],
         "paragraph-0",
-        "after"
+        "after",
       );
 
       return getBlocksChangedByTransaction(tr);
     });
 
     await expect(blocksChanged).toMatchFileSnapshot(
-      "__snapshots__/blocks-inserted-nested.json"
+      "__snapshots__/blocks-inserted-nested.json",
     );
   });
 
@@ -59,7 +59,7 @@ describe("Test getBlocksChangedByTransaction", () => {
     });
 
     await expect(blocksChanged).toMatchFileSnapshot(
-      "__snapshots__/blocks-deleted.json"
+      "__snapshots__/blocks-deleted.json",
     );
   });
 
@@ -70,7 +70,7 @@ describe("Test getBlocksChangedByTransaction", () => {
     });
 
     await expect(blocksChanged).toMatchFileSnapshot(
-      "__snapshots__/blocks-deleted-nested-deep.json"
+      "__snapshots__/blocks-deleted-nested-deep.json",
     );
   });
 
@@ -81,7 +81,7 @@ describe("Test getBlocksChangedByTransaction", () => {
     });
 
     await expect(blocksChanged).toMatchFileSnapshot(
-      "__snapshots__/blocks-deleted-nested.json"
+      "__snapshots__/blocks-deleted-nested.json",
     );
   });
 
@@ -97,7 +97,7 @@ describe("Test getBlocksChangedByTransaction", () => {
     });
 
     await expect(blocksChanged).toMatchFileSnapshot(
-      "__snapshots__/blocks-updated.json"
+      "__snapshots__/blocks-updated.json",
     );
   });
 
@@ -113,7 +113,7 @@ describe("Test getBlocksChangedByTransaction", () => {
     });
 
     await expect(blocksChanged).toMatchFileSnapshot(
-      "__snapshots__/blocks-updated-nested.json"
+      "__snapshots__/blocks-updated-nested.json",
     );
   });
 
@@ -127,7 +127,7 @@ describe("Test getBlocksChangedByTransaction", () => {
     });
 
     await expect(blocksChanged).toMatchFileSnapshot(
-      "__snapshots__/blocks-updated-nested-deep.json"
+      "__snapshots__/blocks-updated-nested-deep.json",
     );
   });
 
@@ -146,7 +146,7 @@ describe("Test getBlocksChangedByTransaction", () => {
     });
 
     await expect(blocksChanged).toMatchFileSnapshot(
-      "__snapshots__/blocks-updated-nested-multiple.json"
+      "__snapshots__/blocks-updated-nested-multiple.json",
     );
   });
 
@@ -167,7 +167,7 @@ describe("Test getBlocksChangedByTransaction", () => {
     });
 
     await expect(blocksChanged).toMatchFileSnapshot(
-      "__snapshots__/blocks-updated-single.json"
+      "__snapshots__/blocks-updated-single.json",
     );
   });
 
@@ -188,7 +188,7 @@ describe("Test getBlocksChangedByTransaction", () => {
     });
 
     await expect(blocksChanged).toMatchFileSnapshot(
-      "__snapshots__/blocks-updated-multiple.json"
+      "__snapshots__/blocks-updated-multiple.json",
     );
   });
 
@@ -197,19 +197,19 @@ describe("Test getBlocksChangedByTransaction", () => {
       editor.insertBlocks(
         [{ type: "paragraph", content: "ABC" }],
         "paragraph-0",
-        "after"
+        "after",
       );
       editor.insertBlocks(
         [{ type: "paragraph", content: "DEF" }],
         "paragraph-1",
-        "after"
+        "after",
       );
 
       return getBlocksChangedByTransaction(tr);
     });
 
     await expect(blocksChanged).toMatchFileSnapshot(
-      "__snapshots__/blocks-updated-multiple-insert.json"
+      "__snapshots__/blocks-updated-multiple-insert.json",
     );
   });
 
@@ -222,7 +222,7 @@ describe("Test getBlocksChangedByTransaction", () => {
     });
 
     await expect(blocksChanged).toMatchFileSnapshot(
-      "__snapshots__/blocks-updated-content-inserted.json"
+      "__snapshots__/blocks-updated-content-inserted.json",
     );
   });
 });

package/src/api/nodeUtil.ts

@@ -22,7 +22,7 @@ import { getPmSchema } from "./pmUtil.js";
  */
 export function getNodeById(
   id: string,
-  doc: Node
+  doc: Node,
 ): { node: Node; posBeforeNode: number } | undefined {
   let targetNode: Node | undefined = undefined;
   let posBeforeNode: number | undefined = undefined;
@@ -98,7 +98,7 @@ export type BlockChangeSource =
 export type BlocksChanged<
   BSchema extends BlockSchema = DefaultBlockSchema,
   ISchema extends InlineContentSchema = DefaultInlineContentSchema,
-  SSchema extends StyleSchema = DefaultStyleSchema
+  SSchema extends StyleSchema = DefaultStyleSchema,
 > = Array<
   {
     /**
@@ -134,10 +134,10 @@ export type BlocksChanged<
 function areBlocksDifferentExcludingChildren<
   BSchema extends BlockSchema,
   ISchema extends InlineContentSchema,
-  SSchema extends StyleSchema
+  SSchema extends StyleSchema,
 >(
   block1: Block<BSchema, ISchema, SSchema>,
-  block2: Block<BSchema, ISchema, SSchema>
+  block2: Block<BSchema, ISchema, SSchema>,
 ): boolean {
   // TODO use an actual diff algorithm
   // Compare all properties except children
@@ -158,10 +158,10 @@ function areBlocksDifferentExcludingChildren<
 export function getBlocksChangedByTransaction<
   BSchema extends BlockSchema = DefaultBlockSchema,
   ISchema extends InlineContentSchema = DefaultInlineContentSchema,
-  SSchema extends StyleSchema = DefaultStyleSchema
+  SSchema extends StyleSchema = DefaultStyleSchema,
 >(
   transaction: Transaction,
-  appendedTransactions: Transaction[] = []
+  appendedTransactions: Transaction[] = [],
 ): BlocksChanged<BSchema, ISchema, SSchema> {
   let source: BlockChangeSource = { type: "local" };
 
@@ -198,7 +198,7 @@ export function getBlocksChangedByTransaction<
       return findChildrenInRange(
         combinedTransaction.before,
         range.oldRange,
-        isNodeBlock
+        isNodeBlock,
       );
     })
     .map(({ node }) => nodeToBlock(node, pmSchema));
@@ -208,7 +208,7 @@ export function getBlocksChangedByTransaction<
       return findChildrenInRange(
         combinedTransaction.doc,
         range.newRange,
-        isNodeBlock
+        isNodeBlock,
       );
     })
     .map(({ node }) => nodeToBlock(node, pmSchema));
@@ -216,12 +216,12 @@ export function getBlocksChangedByTransaction<
   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> = [];

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

@@ -11,7 +11,7 @@ import { nestedListsToBlockNoteStructure } from "./util/nestedLists.js";
 export async function HTMLToBlocks<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(html: string, pmSchema: Schema): Promise<Block<BSchema, I, S>[]> {
   const htmlNode = nestedListsToBlockNoteStructure(html);
   const parser = DOMParser.fromSchema(pmSchema);

package/src/api/parsers/html/util/nestedLists.ts

@@ -33,7 +33,7 @@ function liftNestedListsToParent(element: HTMLElement) {
     const index = getChildIndex(list);
     const parentListItem = list.parentElement!;
     const siblingsAfter = Array.from(parentListItem.childNodes).slice(
-      index + 1
+      index + 1,
     );
     list.remove();
     siblingsAfter.forEach((sibling) => {
@@ -110,7 +110,7 @@ function detachedDoc() {
 }
 
 export function nestedListsToBlockNoteStructure(
-  elementOrHTML: HTMLElement | string
+  elementOrHTML: HTMLElement | string,
 ) {
   if (typeof elementOrHTML === "string") {
     const element = detachedDoc().createElement("div");

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

@@ -70,7 +70,7 @@ export async function markdownToHTML(markdown: string): Promise<string> {
 export async function markdownToBlocks<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(markdown: string, pmSchema: Schema): Promise<Block<BSchema, I, S>[]> {
   const htmlString = await markdownToHTML(markdown);
 

package/src/api/pmUtil.ts

@@ -1,12 +1,12 @@
 import type { Node, Schema } from "prosemirror-model";
-import type { Transaction } from "prosemirror-state";
+import { Transform } from "prosemirror-transform";
 import type { BlockNoteEditor } from "../editor/BlockNoteEditor.js";
+import { BlockNoteSchema } from "../editor/BlockNoteSchema.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) {
+export function getPmSchema(trOrNode: Transform | Node) {
   if ("doc" in trOrNode) {
     return trOrNode.doc.type.schema;
   }
@@ -16,7 +16,7 @@ export function getPmSchema(trOrNode: Transaction | Node) {
 function getBlockNoteEditor<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(schema: Schema): BlockNoteEditor<BSchema, I, S> {
   return schema.cached.blockNoteEditor as BlockNoteEditor<BSchema, I, S>;
 }
@@ -24,7 +24,7 @@ function getBlockNoteEditor<
 export function getBlockNoteSchema<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(schema: Schema): BlockNoteSchema<BSchema, I, S> {
   return getBlockNoteEditor(schema).schema as unknown as BlockNoteSchema<
     BSchema,
@@ -34,13 +34,13 @@ export function getBlockNoteSchema<
 }
 
 export function getBlockSchema<BSchema extends BlockSchema>(
-  schema: Schema
+  schema: Schema,
 ): BSchema {
   return getBlockNoteSchema(schema).blockSchema as BSchema;
 }
 
 export function getInlineContentSchema<I extends InlineContentSchema>(
-  schema: Schema
+  schema: Schema,
 ): I {
   return getBlockNoteSchema(schema).inlineContentSchema as I;
 }