@blocknote/core 0.17.1 → 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/clipboard.test.ts

@@ -173,7 +173,7 @@ describe("Test ProseMirror selection clipboard HTML", () => {
       )
     );
 
-    const { clipboardHTML, externalHTML } = await selectedFragmentToHTML(
+    const { clipboardHTML, externalHTML } = selectedFragmentToHTML(
       editor._tiptapEditor.view,
       editor
     );

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

@@ -1,4 +1,5 @@
 export const acceptedMIMETypes = [
+  "vscode-editor-data",
   "blocknote/html",
   "Files",
   "text/html",

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/fromClipboard/handleVSCodePaste.ts

@@ -0,0 +1,49 @@
+import { BlockNoteEditor } from "../../../editor/BlockNoteEditor.js";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../../schema/index.js";
+
+export async function handleVSCodePaste<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(event: ClipboardEvent, editor: BlockNoteEditor<BSchema, I, S>) {
+  const view = editor.prosemirrorView;
+  const { schema } = view.state;
+
+  if (!event.clipboardData) {
+    return false;
+  }
+
+  const text = event.clipboardData!.getData("text/plain");
+  const vscode = event.clipboardData!.getData("vscode-editor-data");
+  const vscodeData = vscode ? JSON.parse(vscode) : undefined;
+  const language = vscodeData?.mode;
+
+  if (!text) {
+    return false;
+  }
+
+  if (!schema.nodes.codeBlock) {
+    view.pasteText(text);
+
+    return true;
+  }
+
+  if (!language) {
+    return false;
+  }
+
+  // strip carriage return chars from text pasted as code
+  // see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd
+  editor._tiptapEditor.view.pasteHTML(
+    `<pre><code class="language-${language}">${text.replace(
+      /\r\n?/g,
+      "\n"
+    )}</code></pre>`
+  );
+
+  return true;
+}

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

@@ -10,6 +10,7 @@ import {
 import { nestedListsToBlockNoteStructure } from "../../parsers/html/util/nestedLists.js";
 import { acceptedMIMETypes } from "./acceptedMIMETypes.js";
 import { handleFileInsertion } from "./handleFileInsertion.js";
+import { handleVSCodePaste } from "./handleVSCodePaste.js";
 
 export const createPasteFromClipboardExtension = <
   BSchema extends BlockSchema,
@@ -43,6 +44,11 @@ export const createPasteFromClipboardExtension = <
                   return true;
                 }
 
+                if (format === "vscode-editor-data") {
+                  handleVSCodePaste(event, editor);
+                  return true;
+                }
+
                 if (format === "Files") {
                   handleFileInsertion(event, editor);
                   return true;

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/__snapshots__/codeBlock/defaultLanguage/external.html

@@ -0,0 +1 @@
+<pre><code class="bn-inline-content language-javascript">console.log('Hello, world!');</code></pre>

package/src/api/exporters/html/__snapshots__/codeBlock/defaultLanguage/internal.html

@@ -0,0 +1 @@
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="codeBlock"><pre><code class="bn-inline-content language-javascript">console.log('Hello, world!');</code></pre></div></div></div></div>

package/src/api/exporters/html/__snapshots__/codeBlock/empty/external.html

@@ -0,0 +1 @@
+<pre><code class="bn-inline-content language-javascript"></code></pre>

package/src/api/exporters/html/__snapshots__/codeBlock/empty/internal.html

@@ -0,0 +1 @@
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="codeBlock"><pre><code class="bn-inline-content language-javascript"></code></pre></div></div></div></div>

package/src/api/exporters/html/__snapshots__/codeBlock/python/external.html

@@ -0,0 +1 @@
+<pre><code class="bn-inline-content language-python">print('Hello, world!')</code></pre>

package/src/api/exporters/html/__snapshots__/codeBlock/python/internal.html

@@ -0,0 +1 @@
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="codeBlock"><pre><code class="bn-inline-content language-python">print('Hello, world!')</code></pre></div></div></div></div>

package/src/api/exporters/html/__snapshots__/image/basic/internal.html

@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false" width="0"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div>
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false" width="0"></div><p class="bn-file-caption" style="width: 256px;">Caption</p></div></div></div></div></div></div>

package/src/api/exporters/html/__snapshots__/image/nested/internal.html

@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false" width="0"></div><p class="bn-file-caption">Caption</p></div></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false" width="0"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div></div></div></div>
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false" width="0"></div><p class="bn-file-caption" style="width: 256px;">Caption</p></div></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false" width="0"></div><p class="bn-file-caption" style="width: 256px;">Caption</p></div></div></div></div></div></div></div></div></div>

package/src/api/exporters/html/__snapshots__/image/noName/internal.html

@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false" width="0"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div>
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false" width="0"></div><p class="bn-file-caption" style="width: 256px;">Caption</p></div></div></div></div></div></div>

package/src/api/exporters/html/__snapshots__/image/noPreview/internal.html

@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256" data-file-block=""><div class="bn-file-and-caption-wrapper"><div class="bn-file-default-preview"><div class="bn-file-default-preview-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 8L9.00319 2H19.9978C20.5513 2 21 2.45531 21 2.9918V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5501 3 20.9932V8ZM10 4V9H5V20H19V4H10Z"></path></svg></div><p class="bn-file-default-preview-name">example</p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256" data-file-block=""><div class="bn-file-and-caption-wrapper"><div class="bn-file-default-preview"><div class="bn-file-default-preview-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 8L9.00319 2H19.9978C20.5513 2 21 2.45531 21 2.9918V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5501 3 20.9932V8ZM10 4V9H5V20H19V4H10Z"></path></svg></div><p class="bn-file-default-preview-name">example</p></div><p class="bn-file-caption" style="width: 256px;">Caption</p></div></div></div></div></div>

package/src/api/exporters/html/__snapshots__/lists/basic/internal.html

@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="bulletListItem"><p class="bn-inline-content">Bullet List Item 1</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="bulletListItem"><p class="bn-inline-content">Bullet List Item 2</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="3"><div class="bn-block" data-node-type="blockContainer" data-id="3"><div class="bn-block-content" data-content-type="numberedListItem" data-index="null"><p class="bn-inline-content">Numbered List Item 1</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="4"><div class="bn-block" data-node-type="blockContainer" data-id="4"><div class="bn-block-content" data-content-type="numberedListItem" data-index="null"><p class="bn-inline-content">Numbered List Item 2</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="5"><div class="bn-block" data-node-type="blockContainer" data-id="5"><div class="bn-block-content" data-content-type="checkListItem"><input type="checkbox"><p class="bn-inline-content">Check List Item 1</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="6"><div class="bn-block" data-node-type="blockContainer" data-id="6"><div class="bn-block-content" data-content-type="checkListItem" data-checked="true"><input type="checkbox" checked=""><p class="bn-inline-content">Check List Item 2</p></div></div></div></div>
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="bulletListItem"><p class="bn-inline-content">Bullet List Item 1</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="bulletListItem"><p class="bn-inline-content">Bullet List Item 2</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="3"><div class="bn-block" data-node-type="blockContainer" data-id="3"><div class="bn-block-content" data-content-type="numberedListItem" data-index="1"><p class="bn-inline-content">Numbered List Item 1</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="4"><div class="bn-block" data-node-type="blockContainer" data-id="4"><div class="bn-block-content" data-content-type="numberedListItem" data-index="2"><p class="bn-inline-content">Numbered List Item 2</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="5"><div class="bn-block" data-node-type="blockContainer" data-id="5"><div class="bn-block-content" data-content-type="checkListItem"><input type="checkbox"><p class="bn-inline-content">Check List Item 1</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="6"><div class="bn-block" data-node-type="blockContainer" data-id="6"><div class="bn-block-content" data-content-type="checkListItem" data-checked="true"><input type="checkbox" checked=""><p class="bn-inline-content">Check List Item 2</p></div></div></div></div>