@blocknote/core 0.18.0 → 0.19.1

package/src/api/getBlockInfoFromPos.ts

@@ -8,29 +8,59 @@ type SingleBlockInfo = {
 };
 
 export type BlockInfo = {
-  blockContainer: SingleBlockInfo;
-  blockContent: SingleBlockInfo;
-  blockGroup?: SingleBlockInfo;
-};
+  /**
+   * The outer node that represents a BlockNote block. This is the node that has the ID.
+   * Most of the time, this will be a blockContainer node, but it could also be a Column or ColumnList
+   */
+  bnBlock: SingleBlockInfo;
+  /**
+   * The type of BlockNote block that this node represents.
+   * When dealing with a blockContainer, this is retrieved from the blockContent node, otherwise it's retrieved from the bnBlock node.
+   */
+  blockNoteType: string;
+} & (
+  | {
+      // In case we're not dealing with a BlockContainer, we're dealing with a "wrapper node" (like a Column or ColumnList), so it will always have children
+
+      /**
+       * The Prosemirror node that holds block.children. For non-blockContainer, this node will be the same as bnBlock.
+       */
+      childContainer: SingleBlockInfo;
+      isBlockContainer: false;
+    }
+  | {
+      /**
+       * The Prosemirror node that holds block.children. For blockContainers, this is the blockGroup node, if it exists.
+       */
+      childContainer?: SingleBlockInfo;
+      /**
+       * The Prosemirror node that wraps block.content and has most of the props
+       */
+      blockContent: SingleBlockInfo;
+      /**
+       * Whether bnBlock is a blockContainer node
+       */
+      isBlockContainer: true;
+    }
+);
 
 /**
- * Retrieves the position just before the nearest blockContainer node in a
- * ProseMirror doc, relative to a position. If the position is within a
- * blockContainer node or its descendants, the position just before it is
- * returned. If the position is not within a blockContainer node or its
- * descendants, the position just before the next closest blockContainer node
- * is returned. If the position is beyond the last blockContainer, the position
- * just before the last blockContainer is returned.
+ * Retrieves the position just before the nearest block node in a ProseMirror
+ * doc, relative to a position. If the position is within a block node or its
+ * descendants, the position just before it is returned. If the position is not
+ * within a block node or its descendants, the position just before the next
+ * closest block node is returned. If the position is beyond the last block, the
+ * position just before the last block is returned.
  * @param doc The ProseMirror doc.
  * @param pos An integer position in the document.
  * @returns The position just before the nearest blockContainer node.
  */
-export function getNearestBlockContainerPos(doc: Node, pos: number) {
+export function getNearestBlockPos(doc: Node, pos: number) {
   const $pos = doc.resolve(pos);
 
-  // Checks if the position provided is already just before a blockContainer
-  // node, in which case we return the position.
-  if ($pos.nodeAfter && $pos.nodeAfter.type.name === "blockContainer") {
+  // Checks if the position provided is already just before a block node, in
+  // which case we return the position.
+  if ($pos.nodeAfter && $pos.nodeAfter.type.isInGroup("bnBlock")) {
     return {
       posBeforeNode: $pos.pos,
       node: $pos.nodeAfter,
@@ -38,11 +68,11 @@ export function getNearestBlockContainerPos(doc: Node, pos: number) {
   }
 
   // Checks the node containing the position and its ancestors until a
-  // blockContainer node is found and returned.
+  // block node is found and returned.
   let depth = $pos.depth;
   let node = $pos.node(depth);
   while (depth > 0) {
-    if (node.type.name === "blockContainer") {
+    if (node.type.isInGroup("bnBlock")) {
       return {
         posBeforeNode: $pos.before(depth),
         node: node,
@@ -53,16 +83,15 @@ export function getNearestBlockContainerPos(doc: Node, pos: number) {
     node = $pos.node(depth);
   }
 
-  // If the position doesn't lie within a blockContainer node, we instead find
-  // the position of the next closest one. If the position is beyond the last
-  // blockContainer, we return the position of the last blockContainer. While
-  // running `doc.descendants` is expensive, this case should be very rarely
-  // triggered. However, it's possible for the position to sometimes be beyond
-  // the last blockContainer node. This is a problem specifically when using the
-  // collaboration plugin.
+  // If the position doesn't lie within a block node, we instead find the
+  // position of the next closest one. If the position is beyond the last block,
+  // we return the position of the last block. While running `doc.descendants`
+  // is expensive, this case should be very rarely triggered. However, it's
+  // possible for the position to sometimes be beyond the last block node. This
+  // is a problem specifically when using the collaboration plugin.
   const allBlockContainerPositions: number[] = [];
   doc.descendants((node, pos) => {
-    if (node.type.name === "blockContainer") {
+    if (node.type.isInGroup("bnBlock")) {
       allBlockContainerPositions.push(pos);
     }
   });
@@ -88,62 +117,85 @@ export function getNearestBlockContainerPos(doc: Node, pos: number) {
  * the ProseMirror positions just before & after each node.
  * @param node The main `blockContainer` node that the block information should
  * be retrieved from,
- * @param blockContainerBeforePosOffset the position just before the
+ * @param bnBlockBeforePosOffset the position just before the
  * `blockContainer` node in the document.
  */
 export function getBlockInfoWithManualOffset(
   node: Node,
-  blockContainerBeforePosOffset: number
+  bnBlockBeforePosOffset: number
 ): BlockInfo {
-  const blockContainerNode = node;
-  const blockContainerBeforePos = blockContainerBeforePosOffset;
-  const blockContainerAfterPos =
-    blockContainerBeforePos + blockContainerNode.nodeSize;
-
-  const blockContainer: SingleBlockInfo = {
-    node: blockContainerNode,
-    beforePos: blockContainerBeforePos,
-    afterPos: blockContainerAfterPos,
-  };
-  let blockContent: SingleBlockInfo | undefined = undefined;
-  let blockGroup: SingleBlockInfo | undefined = undefined;
-
-  blockContainerNode.forEach((node, offset) => {
-    if (node.type.spec.group === "blockContent") {
-      // console.log(beforePos, offset);
-      const blockContentNode = node;
-      const blockContentBeforePos = blockContainerBeforePos + offset + 1;
-      const blockContentAfterPos = blockContentBeforePos + node.nodeSize;
-
-      blockContent = {
-        node: blockContentNode,
-        beforePos: blockContentBeforePos,
-        afterPos: blockContentAfterPos,
-      };
-    } else if (node.type.name === "blockGroup") {
-      const blockGroupNode = node;
-      const blockGroupBeforePos = blockContainerBeforePos + offset + 1;
-      const blockGroupAfterPos = blockGroupBeforePos + node.nodeSize;
-
-      blockGroup = {
-        node: blockGroupNode,
-        beforePos: blockGroupBeforePos,
-        afterPos: blockGroupAfterPos,
-      };
-    }
-  });
-
-  if (!blockContent) {
+  if (!node.type.isInGroup("bnBlock")) {
     throw new Error(
-      `blockContainer node does not contain a blockContent node in its children: ${blockContainerNode}`
+      `Attempted to get bnBlock node at position but found node of different type ${node.type}`
     );
   }
 
-  return {
-    blockContainer,
-    blockContent,
-    blockGroup,
+  const bnBlockNode = node;
+  const bnBlockBeforePos = bnBlockBeforePosOffset;
+  const bnBlockAfterPos = bnBlockBeforePos + bnBlockNode.nodeSize;
+
+  const bnBlock: SingleBlockInfo = {
+    node: bnBlockNode,
+    beforePos: bnBlockBeforePos,
+    afterPos: bnBlockAfterPos,
   };
+
+  if (bnBlockNode.type.name === "blockContainer") {
+    let blockContent: SingleBlockInfo | undefined;
+    let blockGroup: SingleBlockInfo | undefined;
+
+    bnBlockNode.forEach((node, offset) => {
+      if (node.type.spec.group === "blockContent") {
+        // console.log(beforePos, offset);
+        const blockContentNode = node;
+        const blockContentBeforePos = bnBlockBeforePos + offset + 1;
+        const blockContentAfterPos = blockContentBeforePos + node.nodeSize;
+
+        blockContent = {
+          node: blockContentNode,
+          beforePos: blockContentBeforePos,
+          afterPos: blockContentAfterPos,
+        };
+      } else if (node.type.name === "blockGroup") {
+        const blockGroupNode = node;
+        const blockGroupBeforePos = bnBlockBeforePos + offset + 1;
+        const blockGroupAfterPos = blockGroupBeforePos + node.nodeSize;
+
+        blockGroup = {
+          node: blockGroupNode,
+          beforePos: blockGroupBeforePos,
+          afterPos: blockGroupAfterPos,
+        };
+      }
+    });
+
+    if (!blockContent) {
+      throw new Error(
+        `blockContainer node does not contain a blockContent node in its children: ${bnBlockNode}`
+      );
+    }
+
+    return {
+      isBlockContainer: true,
+      bnBlock,
+      blockContent,
+      childContainer: blockGroup,
+      blockNoteType: blockContent.node.type.name,
+    };
+  } else {
+    if (!bnBlock.node.type.isInGroup("childContainer")) {
+      throw new Error(
+        `bnBlock node is not in the childContainer group: ${bnBlock.node}`
+      );
+    }
+
+    return {
+      isBlockContainer: false,
+      bnBlock: bnBlock,
+      childContainer: bnBlock,
+      blockNoteType: bnBlock.node.type.name,
+    };
+  }
 }
 
 /**
@@ -173,11 +225,6 @@ export function getBlockInfoFromResolvedPos(resolvedPos: ResolvedPos) {
       `Attempted to get blockContainer node at position ${resolvedPos.pos} but a node at this position does not exist`
     );
   }
-  if (resolvedPos.nodeAfter.type.name !== "blockContainer") {
-    throw new Error(
-      `Attempted to get blockContainer node at position ${resolvedPos.pos} but found node of different type ${resolvedPos.nodeAfter}`
-    );
-  }
   return getBlockInfoWithManualOffset(resolvedPos.nodeAfter, resolvedPos.pos);
 }
 
@@ -188,9 +235,7 @@ export function getBlockInfoFromResolvedPos(resolvedPos: ResolvedPos) {
  * @param state The ProseMirror editor state.
  */
 export function getBlockInfoFromSelection(state: EditorState) {
-  const posInfo = getNearestBlockContainerPos(
-    state.doc,
-    state.selection.anchor
-  );
+  const posInfo = getNearestBlockPos(state.doc, state.selection.anchor);
+
   return getBlockInfo(posInfo);
 }

package/src/api/nodeConversions/blockToNode.ts

@@ -54,7 +54,7 @@ function styledTextToNodes<T extends StyleSchema>(
       // Converts text & line breaks to nodes.
       .map((text) => {
         if (text === "\n") {
-          return schema.nodes["hardBreak"].create();
+          return schema.nodes["hardBreak"].createChecked();
         } else {
           return schema.text(text, marks);
         }
@@ -165,15 +165,18 @@ export function tableContentToNodes<
       const cell = row.cells[i];
       let pNode: Node;
       if (!cell) {
-        pNode = schema.nodes["tableParagraph"].create({});
+        pNode = schema.nodes["tableParagraph"].createChecked({});
       } else if (typeof cell === "string") {
-        pNode = schema.nodes["tableParagraph"].create({}, schema.text(cell));
+        pNode = schema.nodes["tableParagraph"].createChecked(
+          {},
+          schema.text(cell)
+        );
       } else {
         const textNodes = inlineContentToNodes(cell, schema, styleSchema);
-        pNode = schema.nodes["tableParagraph"].create({}, textNodes);
+        pNode = schema.nodes["tableParagraph"].createChecked({}, textNodes);
       }
 
-      const cellNode = schema.nodes["tableCell"].create(
+      const cellNode = schema.nodes["tableCell"].createChecked(
         {
           // The colwidth array should have multiple values when the colspan of
           // a cell is greater than 1. However, this is not yet implemented so
@@ -186,7 +189,7 @@ export function tableContentToNodes<
       );
       columnNodes.push(cellNode);
     }
-    const rowNode = schema.nodes["tableRow"].create({}, columnNodes);
+    const rowNode = schema.nodes["tableRow"].createChecked({}, columnNodes);
     rowNodes.push(rowNode);
   }
   return rowNodes;
@@ -212,16 +215,16 @@ function blockOrInlineContentToContentNode(
   }
 
   if (!block.content) {
-    contentNode = schema.nodes[type].create(block.props);
+    contentNode = schema.nodes[type].createChecked(block.props);
   } else if (typeof block.content === "string") {
     const nodes = inlineContentToNodes([block.content], schema, styleSchema);
-    contentNode = schema.nodes[type].create(block.props, nodes);
+    contentNode = schema.nodes[type].createChecked(block.props, nodes);
   } else if (Array.isArray(block.content)) {
     const nodes = inlineContentToNodes(block.content, schema, styleSchema);
-    contentNode = schema.nodes[type].create(block.props, nodes);
+    contentNode = schema.nodes[type].createChecked(block.props, nodes);
   } else if (block.content.type === "tableContent") {
     const nodes = tableContentToNodes(block.content, schema, styleSchema);
-    contentNode = schema.nodes[type].create(block.props, nodes);
+    contentNode = schema.nodes[type].createChecked(block.props, nodes);
   } else {
     throw new UnreachableCaseError(block.content.type);
   }
@@ -229,7 +232,7 @@ function blockOrInlineContentToContentNode(
 }
 
 /**
- * Converts a BlockNote block to a TipTap node.
+ * Converts a BlockNote block to a Prosemirror node.
  */
 export function blockToNode(
   block: PartialBlock<any, any, any>,
@@ -242,12 +245,6 @@ export function blockToNode(
     id = UniqueID.options.generateID();
   }
 
-  const contentNode = blockOrInlineContentToContentNode(
-    block,
-    schema,
-    styleSchema
-  );
-
   const children: Node[] = [];
 
   if (block.children) {
@@ -256,13 +253,41 @@ export function blockToNode(
     }
   }
 
-  const groupNode = schema.nodes["blockGroup"].create({}, children);
+  const nodeTypeCorrespondingToBlock = schema.nodes[block.type];
 
-  return schema.nodes["blockContainer"].create(
-    {
-      id: id,
-      ...block.props,
-    },
-    children.length > 0 ? [contentNode, groupNode] : contentNode
-  );
+  if (nodeTypeCorrespondingToBlock.isInGroup("blockContent")) {
+    // Blocks with a type that matches "blockContent" group always need to be wrapped in a blockContainer
+
+    const contentNode = blockOrInlineContentToContentNode(
+      block,
+      schema,
+      styleSchema
+    );
+
+    const groupNode =
+      children.length > 0
+        ? schema.nodes["blockGroup"].createChecked({}, children)
+        : undefined;
+
+    return schema.nodes["blockContainer"].createChecked(
+      {
+        id: id,
+        ...block.props,
+      },
+      groupNode ? [contentNode, groupNode] : contentNode
+    );
+  } else if (nodeTypeCorrespondingToBlock.isInGroup("bnBlock")) {
+    // this is a bnBlock node like Column or ColumnList that directly translates to a prosemirror node
+    return schema.nodes[block.type].createChecked(
+      {
+        id: id,
+        ...block.props,
+      },
+      children
+    );
+  } else {
+    throw new Error(
+      `block type ${block.type} doesn't match blockContent or bnBlock group`
+    );
+  }
 }

package/src/api/nodeConversions/fragmentToBlocks.ts

@@ -43,6 +43,24 @@ export function fragmentToBlocks<
         // so we don't need to serialize this block, just descend into the children of the blockGroup
         return true;
       }
+    }
+
+    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
+          )
+        );
+      });
+      return false;
+    }
+
+    if (node.type.isInGroup("bnBlock")) {
       blocks.push(
         nodeToBlock(
           node,

package/src/api/nodeConversions/nodeToBlock.ts

@@ -306,7 +306,9 @@ export function nodeToCustomInlineContent<
 }
 
 /**
- * Convert a TipTap node to a BlockNote block.
+ * Convert a Prosemirror node to a BlockNote block.
+ *
+ * TODO: test changes
  */
 export function nodeToBlock<
   BSchema extends BlockSchema,
@@ -319,11 +321,9 @@ export function nodeToBlock<
   styleSchema: S,
   blockCache?: WeakMap<Node, Block<BSchema, I, S>>
 ): Block<BSchema, I, S> {
-  if (node.type.name !== "blockContainer") {
+  if (!node.type.isInGroup("bnBlock")) {
     throw Error(
-      "Node must be of type blockContainer, but is of type" +
-        node.type.name +
-        "."
+      "Node must be in bnBlock group, but is of type" + node.type.name
     );
   }
 
@@ -333,29 +333,26 @@ export function nodeToBlock<
     return cachedBlock;
   }
 
-  const { blockContainer, blockContent, blockGroup } =
-    getBlockInfoWithManualOffset(node, 0);
+  const blockInfo = getBlockInfoWithManualOffset(node, 0);
 
-  let id = blockContainer.node.attrs.id;
+  let id = blockInfo.bnBlock.node.attrs.id;
 
   // Only used for blocks converted from other formats.
   if (id === null) {
     id = UniqueID.options.generateID();
   }
 
+  const blockSpec = blockSchema[blockInfo.blockNoteType];
+
+  if (!blockSpec) {
+    throw Error("Block is of an unrecognized type: " + blockInfo.blockNoteType);
+  }
+
   const props: any = {};
   for (const [attr, value] of Object.entries({
     ...node.attrs,
-    ...blockContent.node.attrs,
+    ...(blockInfo.isBlockContainer ? blockInfo.blockContent.node.attrs : {}),
   })) {
-    const blockSpec = blockSchema[blockContent.node.type.name];
-
-    if (!blockSpec) {
-      throw Error(
-        "Block is of an unrecognized type: " + blockContent.node.type.name
-      );
-    }
-
     const propSchema = blockSpec.propSchema;
 
     if (attr in propSchema) {
@@ -363,10 +360,10 @@ export function nodeToBlock<
     }
   }
 
-  const blockConfig = blockSchema[blockContent.node.type.name];
+  const blockConfig = blockSchema[blockInfo.blockNoteType];
 
   const children: Block<BSchema, I, S>[] = [];
-  blockGroup?.node.forEach((child) => {
+  blockInfo.childContainer?.node.forEach((child) => {
     children.push(
       nodeToBlock(
         child,
@@ -381,14 +378,20 @@ export function nodeToBlock<
   let content: Block<any, any, any>["content"];
 
   if (blockConfig.content === "inline") {
+    if (!blockInfo.isBlockContainer) {
+      throw new Error("impossible");
+    }
     content = contentNodeToInlineContent(
-      blockContent.node,
+      blockInfo.blockContent.node,
       inlineContentSchema,
       styleSchema
     );
   } else if (blockConfig.content === "table") {
+    if (!blockInfo.isBlockContainer) {
+      throw new Error("impossible");
+    }
     content = contentNodeToTableContent(
-      blockContent.node,
+      blockInfo.blockContent.node,
       inlineContentSchema,
       styleSchema
     );

package/src/api/nodeUtil.ts

@@ -17,7 +17,7 @@ export function getNodeById(
     }
 
     // Keeps traversing nodes if block with target ID has not been found.
-    if (node.type.name !== "blockContainer" || node.attrs.id !== id) {
+    if (!node.type.isInGroup("bnBlock") || node.attrs.id !== id) {
       return true;
     }
 

package/src/api/parsers/html/__snapshots__/parse-notion-html.json

@@ -365,8 +365,7 @@
     "id": "19",
     "type": "table",
     "props": {
-      "textColor": "default",
-      "backgroundColor": "default"
+      "textColor": "default"
     },
     "content": {
       "type": "tableContent",

package/src/api/testUtil/partialBlockTestUtil.ts

@@ -1,4 +1,5 @@
 import { Block, PartialBlock } from "../../blocks/defaultBlocks.js";
+import { BlockNoteSchema } from "../../editor/BlockNoteSchema.js";
 import UniqueID from "../../extensions/UniqueID/UniqueID.js";
 import { BlockSchema, TableContent } from "../../schema/blocks/types.js";
 import {
@@ -54,6 +55,17 @@ function partialContentToInlineContent(
         } as any;
       }
     });
+  } else if (content?.type === "tableContent") {
+    return {
+      type: "tableContent",
+      columnWidths: content.columnWidths,
+      rows: content.rows.map((row) => ({
+        ...row,
+        cells: row.cells.map(
+          (cell) => partialContentToInlineContent(cell) as any
+        ),
+      })),
+    };
   }
 
   return content;
@@ -64,11 +76,11 @@ export function partialBlocksToBlocksForTesting<
   I extends InlineContentSchema,
   S extends StyleSchema
 >(
-  schema: BSchema,
-  partialBlocks: Array<PartialBlock<BSchema, I, S>>
+  schema: BlockNoteSchema<BSchema, I, S>,
+  partialBlocks: Array<PartialBlock<NoInfer<BSchema>, NoInfer<I>, NoInfer<S>>>
 ): Array<Block<BSchema, I, S>> {
   return partialBlocks.map((partialBlock) =>
-    partialBlockToBlockForTesting(schema, partialBlock)
+    partialBlockToBlockForTesting(schema.blockSchema, partialBlock)
   );
 }
 

package/src/blocks/AudioBlockContent/AudioBlockContent.ts

@@ -17,6 +17,9 @@ import {
 } from "../FileBlockContent/fileBlockHelpers.js";
 import { parseAudioElement } from "./audioBlockHelpers.js";
 
+export const FILE_AUDIO_ICON_SVG =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 16.0001H5.88889L11.1834 20.3319C11.2727 20.405 11.3846 20.4449 11.5 20.4449C11.7761 20.4449 12 20.2211 12 19.9449V4.05519C12 3.93977 11.9601 3.8279 11.887 3.73857C11.7121 3.52485 11.3971 3.49335 11.1834 3.66821L5.88889 8.00007H2C1.44772 8.00007 1 8.44778 1 9.00007V15.0001C1 15.5524 1.44772 16.0001 2 16.0001ZM23 12C23 15.292 21.5539 18.2463 19.2622 20.2622L17.8445 18.8444C19.7758 17.1937 21 14.7398 21 12C21 9.26016 19.7758 6.80629 17.8445 5.15557L19.2622 3.73779C21.5539 5.75368 23 8.70795 23 12ZM18 12C18 10.0883 17.106 8.38548 15.7133 7.28673L14.2842 8.71584C15.3213 9.43855 16 10.64 16 12C16 13.36 15.3213 14.5614 14.2842 15.2841L15.7133 16.7132C17.106 15.6145 18 13.9116 18 12Z"></path></svg>';
+
 export const audioPropSchema = {
   backgroundColor: defaultProps.backgroundColor,
   // File name.
@@ -50,8 +53,7 @@ export const audioRender = (
   editor: BlockNoteEditor<any, any, any>
 ) => {
   const icon = document.createElement("div");
-  icon.innerHTML =
-    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 16.0001H5.88889L11.1834 20.3319C11.2727 20.405 11.3846 20.4449 11.5 20.4449C11.7761 20.4449 12 20.2211 12 19.9449V4.05519C12 3.93977 11.9601 3.8279 11.887 3.73857C11.7121 3.52485 11.3971 3.49335 11.1834 3.66821L5.88889 8.00007H2C1.44772 8.00007 1 8.44778 1 9.00007V15.0001C1 15.5524 1.44772 16.0001 2 16.0001ZM23 12C23 15.292 21.5539 18.2463 19.2622 20.2622L17.8445 18.8444C19.7758 17.1937 21 14.7398 21 12C21 9.26016 19.7758 6.80629 17.8445 5.15557L19.2622 3.73779C21.5539 5.75368 23 8.70795 23 12ZM18 12C18 10.0883 17.106 8.38548 15.7133 7.28673L14.2842 8.71584C15.3213 9.43855 16 10.64 16 12C16 13.36 15.3213 14.5614 14.2842 15.2841L15.7133 16.7132C17.106 15.6145 18 13.9116 18 12Z"></path></svg>';
+  icon.innerHTML = FILE_AUDIO_ICON_SVG;
 
   const audio = document.createElement("audio");
   audio.className = "bn-audio";

package/src/blocks/FileBlockContent/fileBlockHelpers.ts

@@ -5,6 +5,7 @@ import {
   FileBlockConfig,
 } from "../../schema/index.js";
 
+export const FILE_ICON_SVG = `<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>`;
 export const createFileBlockWrapper = (
   block: BlockFromConfig<FileBlockConfig, any, any>,
   editor: BlockNoteEditor<
@@ -81,8 +82,7 @@ export const createDefaultFilePreview = (
 
   const icon = document.createElement("div");
   icon.className = "bn-file-default-preview-icon";
-  icon.innerHTML =
-    '<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>';
+  icon.innerHTML = FILE_ICON_SVG;
 
   const fileName = document.createElement("p");
   fileName.className = "bn-file-default-preview-name";
@@ -108,11 +108,12 @@ export const createFileAndCaptionWrapper = (
   caption.className = "bn-file-caption";
   caption.textContent = block.props.caption;
 
-  if (typeof block.props.previewWidth === "number" &&
+  if (
+    typeof block.props.previewWidth === "number" &&
     block.props.previewWidth > 0 &&
     block.props.caption !== undefined
   ) {
-    caption.style.width = `${block.props.previewWidth}px`
+    caption.style.width = `${block.props.previewWidth}px`;
   }
 
   fileAndCaptionWrapper.appendChild(file);