@blocknote/core 0.18.0 → 0.19.0

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

@@ -1,6 +1,7 @@
-import { Fragment, Node as PMNode, Slice } from "prosemirror-model";
+import { Fragment, NodeType, Node as PMNode, Slice } from "prosemirror-model";
 import { EditorState } from "prosemirror-state";
 
+import { ReplaceStep } from "prosemirror-transform";
 import { Block, PartialBlock } from "../../../../blocks/defaultBlocks.js";
 import { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
 import {
@@ -10,7 +11,10 @@ import {
 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 {
+  BlockInfo,
+  getBlockInfoFromResolvedPos,
+} from "../../../getBlockInfoFromPos.js";
 import {
   blockToNode,
   inlineContentToNodes,
@@ -36,128 +40,74 @@ export const updateBlockCommand =
     state: EditorState;
     dispatch: ((args?: any) => any) | undefined;
   }) => {
-    const { blockContainer, blockContent, blockGroup } =
-      getBlockInfoFromResolvedPos(state.doc.resolve(posBeforeBlock));
+    const blockInfo = 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";
+      const oldNodeType = state.schema.nodes[blockInfo.blockNoteType];
+      const newNodeType =
+        state.schema.nodes[block.type || blockInfo.blockNoteType];
+      const newBnBlockNodeType = newNodeType.isInGroup("bnBlock")
+        ? newNodeType
+        : state.schema.nodes["blockContainer"];
 
-      // 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);
-        }
+      if (blockInfo.isBlockContainer && newNodeType.isInGroup("blockContent")) {
+        updateChildren(block, state, editor, blockInfo);
+        // The code below determines the new content of the block.
+        // or "keep" to keep as-is
+        updateBlockContentNode(
+          block,
+          state,
+          editor,
+          oldNodeType,
+          newNodeType,
+          blockInfo
+        );
+      } else if (
+        !blockInfo.isBlockContainer &&
+        newNodeType.isInGroup("bnBlock")
+      ) {
+        updateChildren(block, state, editor, blockInfo);
+        // old node was a bnBlock type (like column or columnList) and new block as well
+        // No op, we just update the bnBlock below (at end of function) and have already updated the children
       } 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
-        }
-      }
+        // switching from blockContainer to non-blockContainer or v.v.
+        // currently breaking for column slash menu items converting empty block
+        // to column.
 
-      // 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,
-          }
+        // currently, we calculate the new node and replace the entire node with the desired new node.
+        // for this, we do a nodeToBlock on the existing block to get the children.
+        // it would be cleaner to use a ReplaceAroundStep, but this is a bit simpler and it's quite an edge case
+        const existingBlock = nodeToBlock(
+          blockInfo.bnBlock.node,
+          editor.schema.blockSchema,
+          editor.schema.inlineContentSchema,
+          editor.schema.styleSchema,
+          editor.blockCache
         );
-      } 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(
+          blockInfo.bnBlock.beforePos,
+          blockInfo.bnBlock.afterPos,
+          blockToNode(
             {
-              ...blockContent.node.attrs,
-              ...block.props,
+              children: existingBlock.children, // if no children are passed in, use existing children
+              ...block,
             },
-            content
+            state.schema,
+            editor.schema.styleSchema
           )
         );
+
+        return true;
       }
 
       // 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,
+      state.tr.setNodeMarkup(blockInfo.bnBlock.beforePos, newBnBlockNodeType, {
+        ...blockInfo.bnBlock.node.attrs,
         ...block.props,
       });
     }
@@ -165,6 +115,141 @@ export const updateBlockCommand =
     return true;
   };
 
+function updateBlockContentNode<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  block: PartialBlock<BSchema, I, S>,
+  state: EditorState,
+  editor: BlockNoteEditor<BSchema, I, S>,
+  oldNodeType: NodeType,
+  newNodeType: NodeType,
+  blockInfo: {
+    childContainer?:
+      | { node: PMNode; beforePos: number; afterPos: number }
+      | undefined;
+    blockContent: { node: PMNode; beforePos: number; afterPos: number };
+  }
+) {
+  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.
+    if (oldNodeType.spec.content === "") {
+      // keep old content, because it's empty anyway and should be compatible with
+      // any newContentType
+    } else if (newNodeType.spec.content !== oldNodeType.spec.content) {
+      // 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(
+      blockInfo.blockContent.beforePos,
+      block.type === undefined ? undefined : state.schema.nodes[block.type],
+      {
+        ...blockInfo.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(
+      blockInfo.blockContent.beforePos,
+      blockInfo.blockContent.afterPos,
+      newNodeType.createChecked(
+        {
+          ...blockInfo.blockContent.node.attrs,
+          ...block.props,
+        },
+        content
+      )
+    );
+  }
+}
+
+function updateChildren<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  block: PartialBlock<BSchema, I, S>,
+  state: EditorState,
+  editor: BlockNoteEditor<BSchema, I, S>,
+  blockInfo: BlockInfo
+) {
+  if (block.children !== undefined) {
+    const childNodes = block.children.map((child) => {
+      return blockToNode(child, state.schema, editor.schema.styleSchema);
+    });
+
+    // Checks if a blockGroup node already exists.
+    if (blockInfo.childContainer) {
+      // Replaces all child nodes in the existing blockGroup with the ones created earlier.
+
+      // use a replacestep to avoid the fitting algorithm
+      state.tr.step(
+        new ReplaceStep(
+          blockInfo.childContainer.beforePos + 1,
+          blockInfo.childContainer.afterPos - 1,
+          new Slice(Fragment.from(childNodes), 0, 0)
+        )
+      );
+    } else {
+      if (!blockInfo.isBlockContainer) {
+        throw new Error("impossible");
+      }
+      // Inserts a new blockGroup containing the child nodes created earlier.
+      state.tr.insert(
+        blockInfo.blockContent.afterPos,
+        state.schema.nodes["blockGroup"].createChecked({}, childNodes)
+      );
+    }
+  }
+}
+
 export function updateBlock<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,

package/src/api/blockManipulation/selections/textCursorPosition/textCursorPosition.ts

@@ -21,30 +21,31 @@ export function getTextCursorPosition<
   I extends InlineContentSchema,
   S extends StyleSchema
 >(editor: BlockNoteEditor<BSchema, I, S>): TextCursorPosition<BSchema, I, S> {
-  const { blockContainer } = getBlockInfoFromSelection(
-    editor._tiptapEditor.state
-  );
+  const { bnBlock } = getBlockInfoFromSelection(editor._tiptapEditor.state);
 
-  const resolvedPos = editor._tiptapEditor.state.doc.resolve(
-    blockContainer.beforePos
-  );
+  const resolvedPos = editor._tiptapEditor.state.doc.resolve(bnBlock.beforePos);
   // Gets previous blockContainer node at the same nesting level, if the current node isn't the first child.
   const prevNode = resolvedPos.nodeBefore;
 
   // Gets next blockContainer node at the same nesting level, if the current node isn't the last child.
   const nextNode = editor._tiptapEditor.state.doc.resolve(
-    blockContainer.afterPos
+    bnBlock.afterPos
   ).nodeAfter;
 
   // Gets parent blockContainer node, if the current node is nested.
   let parentNode: Node | undefined = undefined;
   if (resolvedPos.depth > 1) {
-    parentNode = resolvedPos.node(resolvedPos.depth - 1);
+    // for nodes nested in bnBlocks
+    parentNode = resolvedPos.node();
+    if (!parentNode.type.isInGroup("bnBlock")) {
+      // for blockGroups, we need to go one level up
+      parentNode = resolvedPos.node(resolvedPos.depth - 1);
+    }
   }
 
   return {
     block: nodeToBlock(
-      blockContainer.node,
+      bnBlock.node,
       editor.schema.blockSchema,
       editor.schema.inlineContentSchema,
       editor.schema.styleSchema,
@@ -95,36 +96,50 @@ export function setTextCursorPosition<
   const id = typeof targetBlock === "string" ? targetBlock : targetBlock.id;
 
   const posInfo = getNodeById(id, editor._tiptapEditor.state.doc);
-  const { blockContent } = getBlockInfo(posInfo);
+  const info = getBlockInfo(posInfo);
 
   const contentType: "none" | "inline" | "table" =
-    editor.schema.blockSchema[blockContent.node.type.name]!.content;
-
-  if (contentType === "none") {
-    editor._tiptapEditor.commands.setNodeSelection(blockContent.beforePos);
-    return;
-  }
+    editor.schema.blockSchema[info.blockNoteType]!.content;
 
-  if (contentType === "inline") {
-    if (placement === "start") {
-      editor._tiptapEditor.commands.setTextSelection(
-        blockContent.beforePos + 1
-      );
-    } else {
-      editor._tiptapEditor.commands.setTextSelection(blockContent.afterPos - 1);
+  if (info.isBlockContainer) {
+    const blockContent = info.blockContent;
+    if (contentType === "none") {
+      editor._tiptapEditor.commands.setNodeSelection(blockContent.beforePos);
+      return;
     }
-  } else if (contentType === "table") {
-    if (placement === "start") {
-      // Need to offset the position as we have to get through the `tableRow`
-      // and `tableCell` nodes to get to the `tableParagraph` node we want to
-      // set the selection in.
-      editor._tiptapEditor.commands.setTextSelection(
-        blockContent.beforePos + 4
-      );
+
+    if (contentType === "inline") {
+      if (placement === "start") {
+        editor._tiptapEditor.commands.setTextSelection(
+          blockContent.beforePos + 1
+        );
+      } else {
+        editor._tiptapEditor.commands.setTextSelection(
+          blockContent.afterPos - 1
+        );
+      }
+    } else if (contentType === "table") {
+      if (placement === "start") {
+        // Need to offset the position as we have to get through the `tableRow`
+        // and `tableCell` nodes to get to the `tableParagraph` node we want to
+        // set the selection in.
+        editor._tiptapEditor.commands.setTextSelection(
+          blockContent.beforePos + 4
+        );
+      } else {
+        editor._tiptapEditor.commands.setTextSelection(
+          blockContent.afterPos - 4
+        );
+      }
     } else {
-      editor._tiptapEditor.commands.setTextSelection(blockContent.afterPos - 4);
+      throw new UnreachableCaseError(contentType);
     }
   } else {
-    throw new UnreachableCaseError(contentType);
+    const child =
+      placement === "start"
+        ? info.childContainer.node.firstChild!
+        : info.childContainer.node.lastChild!;
+
+    setTextCursorPosition(editor, child.attrs.id, placement);
   }
 }

package/src/api/clipboard/fromClipboard/handleFileInsertion.ts

@@ -144,7 +144,7 @@ export async function handleFileInsertion<
 
         insertedBlockId = editor.insertBlocks(
           [fileBlock],
-          blockInfo.blockContainer.node.attrs.id,
+          blockInfo.bnBlock.node.attrs.id,
           "after"
         )[0].id;
       } else {

package/src/api/clipboard/toClipboard/copyExtension.ts

@@ -49,7 +49,7 @@ function fragmentToExternalHTML<
     isWithinBlockContent =
       children.find(
         (child) =>
-          child.type.name === "blockContainer" ||
+          child.type.isInGroup("bnBlock") ||
           child.type.name === "blockGroup" ||
           child.type.spec.group === "blockContent"
       ) === undefined;

package/src/api/exporters/html/htmlConversion.test.ts

@@ -42,10 +42,7 @@ async function convertToHTMLAndCompareSnapshots<
   expect(internalHTML).toMatchFileSnapshot(internalHTMLSnapshotPath);
 
   // turn the internalHTML back into blocks, and make sure no data was lost
-  const fullBlocks = partialBlocksToBlocksForTesting(
-    editor.schema.blockSchema,
-    blocks
-  );
+  const fullBlocks = partialBlocksToBlocksForTesting(editor.schema, blocks);
   const parsed = await editor.tryParseHTMLToBlocks(internalHTML);
 
   expect(parsed).toStrictEqual(fullBlocks);

package/src/api/exporters/html/util/serializeBlocksExternalHTML.ts

@@ -205,7 +205,13 @@ function serializeBlock<
       }
     }
 
-    fragment.append(childFragment);
+    if (editor.pmSchema.nodes[block.type as any].isInGroup("blockContent")) {
+      // default "blockContainer" style blocks are flattened (no "nested block" support) for externalHTML, so append the child fragment to the outer fragment
+      fragment.append(childFragment);
+    } else {
+      // for columns / column lists, do use nesting
+      ret.contentDOM?.append(childFragment);
+    }
   }
 }
 

package/src/api/exporters/html/util/serializeBlocksInternalHTML.ts

@@ -82,16 +82,6 @@ function serializeBlock<
     }
   }
 
-  const bc = BC_NODE.spec?.toDOM?.(
-    BC_NODE.create({
-      id: block.id,
-      ...props,
-    })
-  ) as {
-    dom: HTMLElement;
-    contentDOM?: HTMLElement;
-  };
-
   const impl = editor.blockImplementations[block.type as any].implementation;
   const ret = impl.toInternalHTML({ ...block, props } as any, editor as any);
 
@@ -115,6 +105,33 @@ function serializeBlock<
     ret.contentDOM.appendChild(ic);
   }
 
+  const pmType = editor.pmSchema.nodes[block.type as any];
+
+  if (pmType.isInGroup("bnBlock")) {
+    if (block.children && block.children.length > 0) {
+      const fragment = serializeBlocks(
+        editor,
+        block.children,
+        serializer,
+        options
+      );
+
+      ret.contentDOM?.append(fragment);
+    }
+    return ret.dom;
+  }
+
+  // wrap the block in a blockContainer
+  const bc = BC_NODE.spec?.toDOM?.(
+    BC_NODE.create({
+      id: block.id,
+      ...props,
+    })
+  ) as {
+    dom: HTMLElement;
+    contentDOM?: HTMLElement;
+  };
+
   bc.contentDOM?.appendChild(ret.dom);
 
   if (block.children && block.children.length > 0) {
@@ -125,7 +142,7 @@ function serializeBlock<
   return bc.dom;
 }
 
-export const serializeBlocksInternalHTML = <
+function serializeBlocks<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
@@ -134,13 +151,9 @@ export const serializeBlocksInternalHTML = <
   blocks: PartialBlock<BSchema, I, S>[],
   serializer: DOMSerializer,
   options?: { document?: Document }
-) => {
-  const BG_NODE = editor.pmSchema.nodes["blockGroup"];
-
-  const bg = BG_NODE.spec!.toDOM!(BG_NODE.create({})) as {
-    dom: HTMLElement;
-    contentDOM?: HTMLElement;
-  };
+) {
+  const doc = options?.document ?? document;
+  const fragment = doc.createDocumentFragment();
 
   let listIndex = 0;
   for (const block of blocks) {
@@ -156,8 +169,32 @@ export const serializeBlocksInternalHTML = <
       listIndex,
       options
     );
-    bg.contentDOM!.appendChild(blockDOM);
+    fragment.appendChild(blockDOM);
   }
 
+  return fragment;
+}
+
+export const serializeBlocksInternalHTML = <
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<BSchema, I, S>,
+  blocks: PartialBlock<BSchema, I, S>[],
+  serializer: DOMSerializer,
+  options?: { document?: Document }
+) => {
+  const BG_NODE = editor.pmSchema.nodes["blockGroup"];
+
+  const bg = BG_NODE.spec!.toDOM!(BG_NODE.create({})) as {
+    dom: HTMLElement;
+    contentDOM?: HTMLElement;
+  };
+
+  const fragment = serializeBlocks(editor, blocks, serializer, options);
+
+  bg.contentDOM?.appendChild(fragment);
+
   return bg.dom;
 };

package/src/api/exporters/markdown/markdownExporter.test.ts

@@ -22,10 +22,7 @@ async function convertToMarkdownAndCompareSnapshots<
   snapshotDirectory: string,
   snapshotName: string
 ) {
-  const fullBlocks = partialBlocksToBlocksForTesting(
-    editor.schema.blockSchema,
-    blocks
-  );
+  const fullBlocks = partialBlocksToBlocksForTesting(editor.schema, blocks);
   const md = await editor.blocksToMarkdownLossy(fullBlocks);
   const snapshotPath =
     "./__snapshots__/" +