@blocknote/core 0.20.0 → 0.22.0

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

@@ -1,16 +1,9 @@
-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;
+import { EditorView } from "prosemirror-view";
+
+export async function handleVSCodePaste(
+  event: ClipboardEvent,
+  view: EditorView
+) {
   const { schema } = view.state;
 
   if (!event.clipboardData) {
@@ -38,7 +31,7 @@ export async function handleVSCodePaste<
 
   // strip carriage return chars from text pasted as code
   // see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd
-  editor._tiptapEditor.view.pasteHTML(
+  view.pasteHTML(
     `<pre><code class="language-${language}">${text.replace(
       /\r\n?/g,
       "\n"

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

@@ -19,14 +19,14 @@ export const createPasteFromClipboardExtension = <
 >(
   editor: BlockNoteEditor<BSchema, I, S>
 ) =>
-  Extension.create<{ editor: BlockNoteEditor<BSchema, I, S> }, undefined>({
+  Extension.create({
     name: "pasteFromClipboard",
     addProseMirrorPlugins() {
       return [
         new Plugin({
           props: {
             handleDOMEvents: {
-              paste(_view, event) {
+              paste(view, event) {
                 event.preventDefault();
 
                 if (!editor.isEditable) {
@@ -45,7 +45,7 @@ export const createPasteFromClipboardExtension = <
                 }
 
                 if (format === "vscode-editor-data") {
-                  handleVSCodePaste(event, editor);
+                  handleVSCodePaste(event, view);
                   return true;
                 }
 
@@ -57,18 +57,18 @@ export const createPasteFromClipboardExtension = <
                 let data = event.clipboardData!.getData(format);
 
                 if (format === "blocknote/html") {
-                  editor._tiptapEditor.view.pasteHTML(data);
+                  view.pasteHTML(data);
                   return true;
                 }
 
                 if (format === "text/html") {
                   const htmlNode = nestedListsToBlockNoteStructure(data.trim());
                   data = htmlNode.innerHTML;
-                  editor._tiptapEditor.view.pasteHTML(data);
+                  view.pasteHTML(data);
                   return true;
                 }
 
-                editor._tiptapEditor.view.pasteText(data);
+                view.pasteText(data);
 
                 return true;
               },

package/src/api/clipboard/testUtil.ts

@@ -0,0 +1,27 @@
+import { createBlockSpec } from "../../schema/index.js";
+import { BlockNoteSchema } from "../../editor/BlockNoteSchema.js";
+import { defaultBlockSpecs } from "../../blocks/defaultBlocks.js";
+
+const CustomParagraph = createBlockSpec(
+  {
+    type: "customParagraph",
+    content: "inline",
+    propSchema: {},
+  },
+  {
+    render: () => {
+      const customParagraph = document.createElement("p");
+
+      return {
+        dom: customParagraph,
+        contentDOM: customParagraph,
+      };
+    },
+  }
+);
+export const schema = BlockNoteSchema.create({
+  blockSpecs: {
+    ...defaultBlockSpecs,
+    customParagraph: CustomParagraph as any,
+  },
+});

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

@@ -80,7 +80,11 @@ function fragmentToExternalHTML<
       editor.schema.styleSchema
     );
 
-    externalHTML = externalHTMLExporter.exportInlineContent(ic as any, {});
+    // Wrap in table to ensure correct parsing by spreadsheet applications
+    externalHTML = `<table>${externalHTMLExporter.exportInlineContent(
+      ic as any,
+      {}
+    )}</table>`;
   } else if (isWithinBlockContent) {
     // first convert selection to blocknote-style inline content, and then
     // pass this to the exporter
@@ -189,7 +193,9 @@ export const createCopyToClipboardExtension = <
               },
               cut(view, event) {
                 copyToClipboard(editor, view, event);
-                view.dispatch(view.state.tr.deleteSelection());
+                if (view.editable) {
+                  view.dispatch(view.state.tr.deleteSelection());
+                }
                 // Prevent default PM handler to be called
                 return true;
               },

package/src/api/exporters/html/__snapshots__/file/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="file" data-name="example" data-url="exampleURL" data-caption="Caption" data-file-block=""><div class="bn-file-block-content-wrapper"><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>
+<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="file" data-name="example" data-url="exampleURL" data-caption="Caption" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-name-with-icon"><div class="bn-file-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-name">example</p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>

package/src/api/exporters/html/__snapshots__/file/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="file" data-name="example" data-url="exampleURL" data-caption="Caption" data-file-block=""><div class="bn-file-block-content-wrapper"><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 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="file" data-name="example" data-url="exampleURL" data-caption="Caption" data-file-block=""><div class="bn-file-block-content-wrapper"><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></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="file" data-name="example" data-url="exampleURL" data-caption="Caption" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-name-with-icon"><div class="bn-file-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-name">example</p></div><p class="bn-file-caption">Caption</p></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="file" data-name="example" data-url="exampleURL" data-caption="Caption" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-name-with-icon"><div class="bn-file-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-name">example</p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div></div></div>

package/src/api/exporters/html/__snapshots__/file/noCaption/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="file" data-name="example" data-url="exampleURL" data-file-block=""><div class="bn-file-block-content-wrapper"><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"></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="file" data-name="example" data-url="exampleURL" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-name-with-icon"><div class="bn-file-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-name">example</p></div></div></div></div></div></div>

package/src/api/exporters/html/__snapshots__/file/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="file" data-url="exampleURL" data-caption="Caption" data-file-block=""><div class="bn-file-block-content-wrapper"><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"></p></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="file" data-url="exampleURL" data-caption="Caption" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-name-with-icon"><div class="bn-file-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-name"></p></div><p class="bn-file-caption">Caption</p></div></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" style="width: 256px;">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-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></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" 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>
+<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-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="Caption" draggable="false"></div><p class="bn-file-caption">Caption</p></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-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="Caption" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div></div></div>

package/src/api/exporters/html/__snapshots__/image/noCaption/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-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"></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-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="example" draggable="false"></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" style="width: 256px;">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-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="Caption" draggable="false"></div><p class="bn-file-caption">Caption</p></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" style="width: 256px;">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-block-content-wrapper"><div class="bn-file-name-with-icon"><div class="bn-file-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-name">example</p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>

package/src/api/exporters/html/__snapshots__/simpleImage/basic/external.html

@@ -1 +1 @@
-<div data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><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 style="width: 256px;" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div>

package/src/api/exporters/html/__snapshots__/simpleImage/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="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><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>
+<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="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>

package/src/api/exporters/html/__snapshots__/simpleImage/nested/external.html

@@ -1 +1 @@
-<div data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><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 data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><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 style="width: 256px;" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div><div style="width: 256px;" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div>

package/src/api/exporters/html/__snapshots__/simpleImage/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="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><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 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="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><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></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="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></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="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div></div></div>

package/src/api/exporters/html/__snapshots__/simpleImage/noCaption/external.html

@@ -1 +1 @@
-<div data-name="example" data-url="exampleURL" data-preview-width="256"><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;"></p></div></div>
+<div style="width: 256px;" data-name="example" data-url="exampleURL" data-preview-width="256"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="example" draggable="false"></div></div>

package/src/api/exporters/html/__snapshots__/simpleImage/noCaption/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="simpleImage" data-name="example" data-url="exampleURL" data-preview-width="256"><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"></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="simpleImage" data-name="example" data-url="exampleURL" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="example" draggable="false"></div></div></div></div></div></div>

package/src/api/exporters/html/__snapshots__/simpleImage/noName/external.html

@@ -1 +1 @@
-<div data-url="exampleURL" data-caption="Caption" data-preview-width="256"><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 style="width: 256px;" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="Caption" draggable="false"></div><p class="bn-file-caption">Caption</p></div>

package/src/api/exporters/html/__snapshots__/simpleImage/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="simpleImage" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><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 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="simpleImage" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="Caption" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>

package/src/api/exporters/html/__snapshots__/simpleImage/noPreview/external.html

@@ -1 +1 @@
-<div data-name="example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256"><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 data-name="example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256"><div class="bn-file-name-with-icon"><div class="bn-file-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-name">example</p></div><p class="bn-file-caption">Caption</p></div>

package/src/api/exporters/html/__snapshots__/simpleImage/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="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256"><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>
+<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="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-file-name-with-icon"><div class="bn-file-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-name">example</p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>

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

@@ -104,7 +104,9 @@ function serializeBlock<
     for (const [name, spec] of Object.entries(
       editor.schema.blockSchema[block.type as any].propSchema
     )) {
-      (props as any)[name] = spec.default;
+      if (spec.default !== undefined) {
+        (props as any)[name] = spec.default;
+      }
     }
   }
 
@@ -172,6 +174,10 @@ function serializeBlock<
   if (listType) {
     if (fragment.lastChild?.nodeName !== listType) {
       const list = doc.createElement(listType);
+
+      if (listType === "OL" && props?.start && props?.start !== 1) {
+        list.setAttribute("start", props.start + "");
+      }
       fragment.append(list);
     }
     const li = doc.createElement("li");

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

@@ -78,7 +78,9 @@ function serializeBlock<
     for (const [name, spec] of Object.entries(
       editor.schema.blockSchema[block.type as any].propSchema
     )) {
-      (props as any)[name] = spec.default;
+      if (spec.default !== undefined) {
+        (props as any)[name] = spec.default;
+      }
     }
   }
 

package/src/api/exporters/markdown/__snapshots__/simpleImage/basic/markdown.md

@@ -1,3 +1,3 @@
-![example]()
+![example](exampleURL)
 
 Caption

package/src/api/exporters/markdown/__snapshots__/simpleImage/nested/markdown.md

@@ -1,7 +1,7 @@
-![example]()
+![example](exampleURL)
 
 Caption
 
-![example]()
+![example](exampleURL)
 
 Caption

package/src/api/exporters/markdown/__snapshots__/simpleImage/noCaption/markdown.md

@@ -1 +1 @@
-![example]()
+![example](exampleURL)

package/src/api/exporters/markdown/__snapshots__/simpleImage/noName/markdown.md

@@ -1,3 +1,3 @@
-![Caption]()
+![Caption](exampleURL)
 
 Caption

package/src/api/nodeConversions/nodeToBlock.ts

@@ -355,7 +355,10 @@ export function nodeToBlock<
   })) {
     const propSchema = blockSpec.propSchema;
 
-    if (attr in propSchema) {
+    if (
+      attr in propSchema &&
+      !(propSchema[attr].default === undefined && value === undefined)
+    ) {
       props[attr] = value;
     }
   }

package/src/api/parsers/markdown/__snapshots__/pasted/styled.json

@@ -1,6 +1,6 @@
 [
   {
-    "id": "2",
+    "id": "0",
     "type": "paragraph",
     "props": {
       "textColor": "default",
@@ -48,7 +48,7 @@
     "children": []
   },
   {
-    "id": "3",
+    "id": "2",
     "type": "paragraph",
     "props": {
       "textColor": "default",

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

@@ -16,13 +16,11 @@ async function parseMarkdownAndCompareSnapshots(
     snapshotPath
   );
 
-  doPaste(
-    editor._tiptapEditor.view,
-    md,
-    null,
-    true,
-    new ClipboardEvent("paste")
-  );
+  if (!editor.prosemirrorView) {
+    throw new Error("Editor view not initialized.");
+  }
+
+  doPaste(editor.prosemirrorView, md, null, true, new ClipboardEvent("paste"));
 
   const pastedSnapshotPath = "./__snapshots__/pasted/" + snapshotName + ".json";
   expect(JSON.stringify(editor.document, undefined, 2)).toMatchFileSnapshot(

package/src/api/testUtil/partialBlockTestUtil.ts

@@ -111,7 +111,10 @@ export function partialBlockToBlockForTesting<
 
   Object.entries(schema[partialBlock.type!].propSchema).forEach(
     ([propKey, propValue]) => {
-      if (withDefaults.props[propKey] === undefined) {
+      if (
+        withDefaults.props[propKey] === undefined &&
+        propValue.default !== undefined
+      ) {
         (withDefaults.props as any)[propKey] = propValue.default;
       }
     }

package/src/blocks/AudioBlockContent/AudioBlockContent.ts

@@ -8,14 +8,11 @@ import {
 } from "../../schema/index.js";
 import { defaultProps } from "../defaultProps.js";
 
-import {
-  createFigureWithCaption,
-  createFileAndCaptionWrapper,
-  createFileBlockWrapper,
-  createLinkWithCaption,
-  parseFigureElement,
-} from "../FileBlockContent/fileBlockHelpers.js";
-import { parseAudioElement } from "./audioBlockHelpers.js";
+import { parseFigureElement } from "../FileBlockContent/helpers/parse/parseFigureElement.js";
+import { createFileBlockWrapper } from "../FileBlockContent/helpers/render/createFileBlockWrapper.js";
+import { createFigureWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.js";
+import { createLinkWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.js";
+import { parseAudioElement } from "./parseAudioElement.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>';
@@ -57,19 +54,21 @@ export const audioRender = (
 
   const audio = document.createElement("audio");
   audio.className = "bn-audio";
-  editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
-    audio.src = downloadUrl;
-  });
+  if (editor.resolveFileUrl) {
+    editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
+      audio.src = downloadUrl;
+    });
+  } else {
+    audio.src = block.props.url;
+  }
   audio.controls = true;
   audio.contentEditable = "false";
   audio.draggable = false;
 
-  const element = createFileAndCaptionWrapper(block, audio);
-
   return createFileBlockWrapper(
     block,
     editor,
-    element,
+    { dom: audio },
     editor.dictionary.file_blocks.audio.add_button_text,
     icon.firstElementChild as HTMLElement
   );

package/src/blocks/FileBlockContent/FileBlockContent.ts

@@ -6,14 +6,10 @@ import {
   createBlockSpec,
 } from "../../schema/index.js";
 import { defaultProps } from "../defaultProps.js";
-import {
-  createDefaultFilePreview,
-  createFileAndCaptionWrapper,
-  createFileBlockWrapper,
-  createLinkWithCaption,
-  parseEmbedElement,
-  parseFigureElement,
-} from "./fileBlockHelpers.js";
+import { parseEmbedElement } from "./helpers/parse/parseEmbedElement.js";
+import { parseFigureElement } from "./helpers/parse/parseFigureElement.js";
+import { createFileBlockWrapper } from "./helpers/render/createFileBlockWrapper.js";
+import { createLinkWithCaption } from "./helpers/toExternalHTML/createLinkWithCaption.js";
 
 export const filePropSchema = {
   backgroundColor: defaultProps.backgroundColor,
@@ -42,10 +38,7 @@ export const fileRender = (
   block: BlockFromConfig<typeof fileBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>
 ) => {
-  const file = createDefaultFilePreview(block).dom;
-  const element = createFileAndCaptionWrapper(block, file);
-
-  return createFileBlockWrapper(block, editor, element);
+  return createFileBlockWrapper(block, editor);
 };
 
 export const fileParse = (element: HTMLElement) => {

package/src/blocks/FileBlockContent/helpers/parse/parseEmbedElement.ts

@@ -0,0 +1,5 @@
+export const parseEmbedElement = (embedElement: HTMLEmbedElement) => {
+  const url = embedElement.src || undefined;
+
+  return { url };
+};

package/src/blocks/FileBlockContent/helpers/parse/parseFigureElement.ts

@@ -0,0 +1,16 @@
+export const parseFigureElement = (
+  figureElement: HTMLElement,
+  targetTag: string
+) => {
+  const targetElement = figureElement.querySelector(
+    targetTag
+  ) as HTMLElement | null;
+  if (!targetElement) {
+    return undefined;
+  }
+
+  const captionElement = figureElement.querySelector("figcaption");
+  const caption = captionElement?.textContent ?? undefined;
+
+  return { targetElement, caption };
+};

package/src/blocks/FileBlockContent/helpers/render/createAddFileButton.ts

@@ -0,0 +1,63 @@
+import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
+import { BlockFromConfig, FileBlockConfig } from "../../../../schema/index.js";
+
+export const createAddFileButton = (
+  block: BlockFromConfig<FileBlockConfig, any, any>,
+  editor: BlockNoteEditor<any, any, any>,
+  buttonText?: string,
+  buttonIcon?: HTMLElement
+) => {
+  const addFileButton = document.createElement("div");
+  addFileButton.className = "bn-add-file-button";
+
+  const addFileButtonIcon = document.createElement("div");
+  addFileButtonIcon.className = "bn-add-file-button-icon";
+  if (buttonIcon) {
+    addFileButtonIcon.appendChild(buttonIcon);
+  } else {
+    addFileButtonIcon.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>';
+  }
+  addFileButton.appendChild(addFileButtonIcon);
+
+  const addFileButtonText = document.createElement("p");
+  addFileButtonText.className = "bn-add-file-button-text";
+  addFileButtonText.innerHTML =
+    buttonText || editor.dictionary.file_blocks.file.add_button_text;
+  addFileButton.appendChild(addFileButtonText);
+
+  // Prevents focus from moving to the button.
+  const addFileButtonMouseDownHandler = (event: MouseEvent) => {
+    event.preventDefault();
+  };
+  // Opens the file toolbar.
+  const addFileButtonClickHandler = () => {
+    editor.dispatch(
+      editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
+        block: block,
+      })
+    );
+  };
+  addFileButton.addEventListener(
+    "mousedown",
+    addFileButtonMouseDownHandler,
+    true
+  );
+  addFileButton.addEventListener("click", addFileButtonClickHandler, true);
+
+  return {
+    dom: addFileButton,
+    destroy: () => {
+      addFileButton.removeEventListener(
+        "mousedown",
+        addFileButtonMouseDownHandler,
+        true
+      );
+      addFileButton.removeEventListener(
+        "click",
+        addFileButtonClickHandler,
+        true
+      );
+    },
+  };
+};