@blocknote/core 0.16.0 → 0.17.1

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

@@ -1,10 +1,14 @@
 import { Extension } from "@tiptap/core";
 import { Plugin } from "prosemirror-state";
 
-import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
-import { BlockSchema, InlineContentSchema, StyleSchema } from "../../../schema";
-import { handleFileInsertion } from "./handleFileInsertion";
-import { acceptedMIMETypes } from "./acceptedMIMETypes";
+import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor.js";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../../schema/index.js";
+import { acceptedMIMETypes } from "./acceptedMIMETypes.js";
+import { handleFileInsertion } from "./handleFileInsertion.js";
 
 export const createDropFileExtension = <
   BSchema extends BlockSchema,

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

@@ -1,13 +1,16 @@
+import { PartialBlock } from "../../../blocks/defaultBlocks.js";
 import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
-import { PartialBlock } from "../../../blocks/defaultBlocks";
 import {
   BlockSchema,
   FileBlockConfig,
   InlineContentSchema,
   StyleSchema,
-} from "../../../schema";
-import { getBlockInfoFromPos } from "../../getBlockInfoFromPos";
-import { acceptedMIMETypes } from "./acceptedMIMETypes";
+} from "../../../schema/index.js";
+import {
+  getBlockInfo,
+  getNearestBlockContainerPos,
+} from "../../getBlockInfoFromPos.js";
+import { acceptedMIMETypes } from "./acceptedMIMETypes.js";
 
 function checkFileExtensionsMatch(
   fileExtension1: string,
@@ -132,14 +135,16 @@ export async function handleFileInsertion<
           return;
         }
 
-        const blockInfo = getBlockInfoFromPos(
+        const posInfo = getNearestBlockContainerPos(
           editor._tiptapEditor.state.doc,
           pos.pos
         );
 
+        const blockInfo = getBlockInfo(posInfo);
+
         insertedBlockId = editor.insertBlocks(
           [fileBlock],
-          blockInfo.id,
+          blockInfo.blockContainer.node.attrs.id,
           "after"
         )[0].id;
       } else {

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

@@ -2,10 +2,14 @@ import { Extension } from "@tiptap/core";
 import { Plugin } from "prosemirror-state";
 
 import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
-import { BlockSchema, InlineContentSchema, StyleSchema } from "../../../schema";
-import { nestedListsToBlockNoteStructure } from "../../parsers/html/util/nestedLists";
-import { acceptedMIMETypes } from "./acceptedMIMETypes";
-import { handleFileInsertion } from "./handleFileInsertion";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../../schema/index.js";
+import { nestedListsToBlockNoteStructure } from "../../parsers/html/util/nestedLists.js";
+import { acceptedMIMETypes } from "./acceptedMIMETypes.js";
+import { handleFileInsertion } from "./handleFileInsertion.js";
 
 export const createPasteFromClipboardExtension = <
   BSchema extends BlockSchema,

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

@@ -1,57 +1,40 @@
 import { Extension } from "@tiptap/core";
-import { Node } from "prosemirror-model";
+import { Fragment, Node } from "prosemirror-model";
 import { NodeSelection, Plugin } from "prosemirror-state";
 import { CellSelection } from "prosemirror-tables";
 import * as pmView from "prosemirror-view";
 
 import { EditorView } from "prosemirror-view";
-import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
-import { BlockSchema, InlineContentSchema, StyleSchema } from "../../../schema";
-import { initializeESMDependencies } from "../../../util/esmDependencies";
-import { createExternalHTMLExporter } from "../../exporters/html/externalHTMLExporter";
-import { cleanHTMLToMarkdown } from "../../exporters/markdown/markdownExporter";
-
-export async function selectedFragmentToHTML<
+import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor.js";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../../schema/index.js";
+import { createExternalHTMLExporter } from "../../exporters/html/externalHTMLExporter.js";
+import { cleanHTMLToMarkdown } from "../../exporters/markdown/markdownExporter.js";
+import { fragmentToBlocks } from "../../nodeConversions/fragmentToBlocks.js";
+import {
+  contentNodeToInlineContent,
+  contentNodeToTableContent,
+} from "../../nodeConversions/nodeToBlock.js";
+
+function fragmentToExternalHTML<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
 >(
-  view: EditorView,
+  view: pmView.EditorView,
+  selectedFragment: Fragment,
   editor: BlockNoteEditor<BSchema, I, S>
-): Promise<{
-  clipboardHTML: string;
-  externalHTML: string;
-  markdown: string;
-}> {
-  // Checks if a `blockContent` node is being copied and expands
-  // the selection to the parent `blockContainer` node. This is
-  // for the use-case in which only a block without content is
-  // selected, e.g. an image block.
-  if (
-    "node" in view.state.selection &&
-    (view.state.selection.node as Node).type.spec.group === "blockContent"
-  ) {
-    editor.dispatch(
-      editor._tiptapEditor.state.tr.setSelection(
-        new NodeSelection(view.state.doc.resolve(view.state.selection.from - 1))
-      )
-    );
-  }
-
-  // Uses default ProseMirror clipboard serialization.
-  const clipboardHTML: string = (pmView as any).__serializeForClipboard(
-    view,
-    view.state.selection.content()
-  ).dom.innerHTML;
-
-  let selectedFragment = view.state.selection.content().content;
-
-  // Checks whether block ancestry should be included when creating external
-  // HTML. If the selection is within a block content node, the block ancestry
-  // is excluded as we only care about the inline content.
+) {
   let isWithinBlockContent = false;
   const isWithinTable = view.state.selection instanceof CellSelection;
+
   if (!isWithinTable) {
+    // Checks whether block ancestry should be included when creating external
+    // HTML. If the selection is within a block content node, the block ancestry
+    // is excluded as we only care about the inline content.
     const fragmentWithoutParents = view.state.doc.slice(
       view.state.selection.from,
       view.state.selection.to,
@@ -75,14 +58,84 @@ export async function selectedFragmentToHTML<
     }
   }
 
-  await initializeESMDependencies();
+  let externalHTML: string;
+
   const externalHTMLExporter = createExternalHTMLExporter(
     view.state.schema,
     editor
   );
-  const externalHTML = externalHTMLExporter.exportProseMirrorFragment(
+
+  if (isWithinTable) {
+    if (selectedFragment.firstChild?.type.name === "table") {
+      // contentNodeToTableContent expects the fragment of the content of a table, not the table node itself
+      // but cellselection.content() returns the table node itself if all cells and columns are selected
+      selectedFragment = selectedFragment.firstChild.content;
+    }
+
+    // first convert selection to blocknote-style table content, and then
+    // pass this to the exporter
+    const ic = contentNodeToTableContent(
+      selectedFragment as any,
+      editor.schema.inlineContentSchema,
+      editor.schema.styleSchema
+    );
+
+    externalHTML = externalHTMLExporter.exportInlineContent(ic as any, {});
+  } else if (isWithinBlockContent) {
+    // first convert selection to blocknote-style inline content, and then
+    // pass this to the exporter
+    const ic = contentNodeToInlineContent(
+      selectedFragment as any,
+      editor.schema.inlineContentSchema,
+      editor.schema.styleSchema
+    );
+    externalHTML = externalHTMLExporter.exportInlineContent(ic, {});
+  } else {
+    const blocks = fragmentToBlocks(selectedFragment, editor.schema);
+    externalHTML = externalHTMLExporter.exportBlocks(blocks, {});
+  }
+  return externalHTML;
+}
+
+export function selectedFragmentToHTML<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  view: EditorView,
+  editor: BlockNoteEditor<BSchema, I, S>
+): {
+  clipboardHTML: string;
+  externalHTML: string;
+  markdown: string;
+} {
+  // Checks if a `blockContent` node is being copied and expands
+  // the selection to the parent `blockContainer` node. This is
+  // for the use-case in which only a block without content is
+  // selected, e.g. an image block.
+  if (
+    "node" in view.state.selection &&
+    (view.state.selection.node as Node).type.spec.group === "blockContent"
+  ) {
+    editor.dispatch(
+      editor._tiptapEditor.state.tr.setSelection(
+        new NodeSelection(view.state.doc.resolve(view.state.selection.from - 1))
+      )
+    );
+  }
+
+  // Uses default ProseMirror clipboard serialization.
+  const clipboardHTML: string = (pmView as any).__serializeForClipboard(
+    view,
+    view.state.selection.content()
+  ).dom.innerHTML;
+
+  const selectedFragment = view.state.selection.content().content;
+
+  const externalHTML = fragmentToExternalHTML<BSchema, I, S>(
+    view,
     selectedFragment,
-    { simplifyBlocks: !isWithinBlockContent && !isWithinTable }
+    editor
   );
 
   const markdown = cleanHTMLToMarkdown(externalHTML);
@@ -103,16 +156,16 @@ const copyToClipboard = <
   event.preventDefault();
   event.clipboardData!.clearData();
 
-  (async () => {
-    const { clipboardHTML, externalHTML, markdown } =
-      await selectedFragmentToHTML(view, editor);
+  const { clipboardHTML, externalHTML, markdown } = selectedFragmentToHTML(
+    view,
+    editor
+  );
 
-    // TODO: Writing to other MIME types not working in Safari for
-    //  some reason.
-    event.clipboardData!.setData("blocknote/html", clipboardHTML);
-    event.clipboardData!.setData("text/html", externalHTML);
-    event.clipboardData!.setData("text/plain", markdown);
-  })();
+  // TODO: Writing to other MIME types not working in Safari for
+  //  some reason.
+  event.clipboardData!.setData("blocknote/html", clipboardHTML);
+  event.clipboardData!.setData("text/html", externalHTML);
+  event.clipboardData!.setData("text/plain", markdown);
 };
 
 export const createCopyToClipboardExtension = <
@@ -170,16 +223,15 @@ export const createCopyToClipboardExtension = <
                 event.preventDefault();
                 event.dataTransfer!.clearData();
 
-                (async () => {
-                  const { clipboardHTML, externalHTML, markdown } =
-                    await selectedFragmentToHTML(view, editor);
+                const { clipboardHTML, externalHTML, markdown } =
+                  selectedFragmentToHTML(view, editor);
+
+                // TODO: Writing to other MIME types not working in Safari for
+                //  some reason.
+                event.dataTransfer!.setData("blocknote/html", clipboardHTML);
+                event.dataTransfer!.setData("text/html", externalHTML);
+                event.dataTransfer!.setData("text/plain", markdown);
 
-                  // TODO: Writing to other MIME types not working in Safari for
-                  //  some reason.
-                  event.dataTransfer!.setData("blocknote/html", clipboardHTML);
-                  event.dataTransfer!.setData("text/html", externalHTML);
-                  event.dataTransfer!.setData("text/plain", markdown);
-                })();
                 // Prevent default PM handler to be called
                 return true;
               },

package/src/api/exporters/html/__snapshots__/complex/misc/external.html

@@ -1 +1 @@
-<h2 data-text-color="yellow" data-background-color="blue" data-text-alignment="right" data-level="2"><strong><u>Heading </u></strong><em><s>2</s></em></h2><p data-background-color="red">Paragraph</p><ul><li><p class="bn-inline-content"></p></li></ul>
+<h2 data-text-color="yellow" data-background-color="blue" data-text-alignment="right" data-level="2"><strong><u>Heading </u></strong><em><s>2</s></em></h2><p data-background-color="red">Paragraph</p><ul><li><p></p></li></ul>

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

@@ -1 +1 @@
-<ul><li><p class="bn-inline-content">Bullet List Item 1</p></li><li><p class="bn-inline-content">Bullet List Item 2</p></li></ul><ol><li><p class="bn-inline-content">Numbered List Item 1</p></li><li><p class="bn-inline-content">Numbered List Item 2</p></li></ol><ul><li><input type="checkbox"><p class="bn-inline-content">Check List Item 1</p></li><li><input type="checkbox" checked><p class="bn-inline-content">Check List Item 2</p></li></ul>
+<ul><li><p>Bullet List Item 1</p></li><li><p>Bullet List Item 2</p></li></ul><ol><li><p>Numbered List Item 1</p></li><li><p>Numbered List Item 2</p></li></ol><ul><li><input type="checkbox"><p class="bn-inline-content">Check List Item 1</p></li><li><input type="checkbox" checked="" data-checked="true"><p class="bn-inline-content">Check List Item 2</p></li></ul>

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

@@ -1 +1 @@
-<ul><li><p class="bn-inline-content">Bullet List Item 1</p></li><li><p class="bn-inline-content">Bullet List Item 2</p><ol><li><p class="bn-inline-content">Numbered List Item 1</p></li><li><p class="bn-inline-content">Numbered List Item 2</p><ul><li><input type="checkbox"><p class="bn-inline-content">Check List Item 1</p></li><li><input type="checkbox" checked><p class="bn-inline-content">Check List Item 2</p></li></ul></li></ol></li></ul>
+<ul><li><p>Bullet List Item 1</p></li><li><p>Bullet List Item 2</p><ol><li><p>Numbered List Item 1</p></li><li><p>Numbered List Item 2</p><ul><li><input type="checkbox"><p class="bn-inline-content">Check List Item 1</p></li><li><input type="checkbox" checked="" data-checked="true"><p class="bn-inline-content">Check List Item 2</p></li></ul></li></ol></li></ul>

package/src/api/exporters/html/externalHTMLExporter.ts

@@ -1,15 +1,17 @@
-import { DOMSerializer, Fragment, Node, Schema } from "prosemirror-model";
+import { DOMSerializer, Schema } from "prosemirror-model";
 
-import { PartialBlock } from "../../../blocks/defaultBlocks";
-import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
-import { BlockSchema, InlineContentSchema, StyleSchema } from "../../../schema";
-import { esmDependencies } from "../../../util/esmDependencies";
-import { blockToNode } from "../../nodeConversions/nodeConversions";
+import { PartialBlock } from "../../../blocks/defaultBlocks.js";
+import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor.js";
 import {
-  serializeNodeInner,
-  serializeProseMirrorFragment,
-} from "./util/sharedHTMLConversion";
-import { simplifyBlocks } from "./util/simplifyBlocksRehypePlugin";
+  BlockSchema,
+  InlineContent,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../../schema/index.js";
+import {
+  serializeBlocksExternalHTML,
+  serializeInlineContentExternalHTML,
+} from "./util/serializeBlocksExternalHTML.js";
 
 // Used to export BlockNote blocks and ProseMirror nodes to HTML for use outside
 // the editor. Blocks are exported using the `toExternalHTML` method in their
@@ -24,26 +26,6 @@ import { simplifyBlocks } from "./util/simplifyBlocksRehypePlugin";
 // 3. While nesting for list items is preserved, other types of blocks nested
 // inside a list are un-nested and a new list is created after them.
 // 4. The HTML is wrapped in a single `div` element.
-//
-// The serializer has 2 main methods:
-// `exportBlocks`: Exports an array of blocks to HTML.
-// `exportFragment`: Exports a ProseMirror fragment to HTML. This is mostly
-// useful if you want to export a selection which may not start/end at the
-// start/end of a block.
-export interface ExternalHTMLExporter<
-  BSchema extends BlockSchema,
-  I extends InlineContentSchema,
-  S extends StyleSchema
-> {
-  exportBlocks: (
-    blocks: PartialBlock<BSchema, I, S>[],
-    options: { document?: Document }
-  ) => string;
-  exportProseMirrorFragment: (
-    fragment: Fragment,
-    options: { document?: Document; simplifyBlocks?: boolean }
-  ) => string;
-}
 
 // Needs to be sync because it's used in drag handler event (SideMenuPlugin)
 // Ideally, call `await initializeESMDependencies()` before calling this function
@@ -54,76 +36,42 @@ export const createExternalHTMLExporter = <
 >(
   schema: Schema,
   editor: BlockNoteEditor<BSchema, I, S>
-): ExternalHTMLExporter<BSchema, I, S> => {
-  const deps = esmDependencies;
-
-  if (!deps) {
-    throw new Error(
-      "External HTML exporter requires ESM dependencies to be initialized"
-    );
-  }
+) => {
+  const serializer = DOMSerializer.fromSchema(schema);
 
-  // TODO: maybe cache this serializer (default prosemirror serializer is cached)?
-  const serializer = new DOMSerializer(
-    DOMSerializer.nodesFromSchema(schema),
-    DOMSerializer.marksFromSchema(schema)
-  ) as DOMSerializer & {
-    serializeNodeInner: (
-      node: Node,
-      options: { document?: Document }
-    ) => HTMLElement;
-    exportProseMirrorFragment: (
-      fragment: Fragment,
-      options: { document?: Document; simplifyBlocks?: boolean }
-    ) => string;
+  return {
     exportBlocks: (
       blocks: PartialBlock<BSchema, I, S>[],
       options: { document?: Document }
-    ) => string;
-  };
-
-  serializer.serializeNodeInner = (
-    node: Node,
-    options: { document?: Document }
-  ) => serializeNodeInner(node, options, serializer, editor, true);
-
-  // Like the `internalHTMLSerializer`, also uses `serializeProseMirrorFragment`
-  // but additionally runs it through the `simplifyBlocks` rehype plugin to
-  // convert the internal HTML to external.
-  serializer.exportProseMirrorFragment = (fragment, options) => {
-    let externalHTML: any = deps.unified
-      .unified()
-      .use(deps.rehypeParse.default, { fragment: true });
-    if (options.simplifyBlocks !== false) {
-      externalHTML = externalHTML.use(simplifyBlocks, {
-        orderedListItemBlockTypes: new Set<string>(["numberedListItem"]),
-        unorderedListItemBlockTypes: new Set<string>([
-          "bulletListItem",
-          "checkListItem",
-        ]),
-      });
-    }
-    externalHTML = externalHTML
-      .use(deps.rehypeStringify.default)
-      .processSync(serializeProseMirrorFragment(fragment, serializer, options));
+    ) => {
+      const html = serializeBlocksExternalHTML(
+        editor,
+        blocks,
+        serializer,
+        new Set<string>(["numberedListItem"]),
+        new Set<string>(["bulletListItem", "checkListItem"]),
+        options
+      );
+      const div = document.createElement("div");
+      div.append(html);
+      return div.innerHTML;
+    },
 
-    return externalHTML.value as string;
-  };
+    exportInlineContent: (
+      inlineContent: InlineContent<I, S>[],
+      options: { document?: Document }
+    ) => {
+      const domFragment = serializeInlineContentExternalHTML(
+        editor,
+        inlineContent as any,
+        serializer,
+        options
+      );
 
-  serializer.exportBlocks = (
-    blocks: PartialBlock<BSchema, I, S>[],
-    options
-  ) => {
-    const nodes = blocks.map((block) =>
-      blockToNode(block, schema, editor.schema.styleSchema)
-    );
-    const blockGroup = schema.nodes["blockGroup"].create(null, nodes);
+      const parent = document.createElement("div");
+      parent.append(domFragment.cloneNode(true));
 
-    return serializer.exportProseMirrorFragment(
-      Fragment.from(blockGroup),
-      options
-    );
+      return parent.innerHTML;
+    },
   };
-
-  return serializer;
 };

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

@@ -1,18 +1,23 @@
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 
-import { addIdsToBlocks, partialBlocksToBlocksForTesting } from "../../..";
-import { PartialBlock } from "../../../blocks/defaultBlocks";
-import { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
-import { BlockSchema } from "../../../schema";
-import { InlineContentSchema } from "../../../schema";
-import { StyleSchema } from "../../../schema";
-import { initializeESMDependencies } from "../../../util/esmDependencies";
-import { customBlocksTestCases } from "../../testUtil/cases/customBlocks";
-import { customInlineContentTestCases } from "../../testUtil/cases/customInlineContent";
-import { customStylesTestCases } from "../../testUtil/cases/customStyles";
-import { defaultSchemaTestCases } from "../../testUtil/cases/defaultSchema";
-import { createExternalHTMLExporter } from "./externalHTMLExporter";
-import { createInternalHTMLSerializer } from "./internalHTMLSerializer";
+import { PartialBlock } from "../../../blocks/defaultBlocks.js";
+import { BlockNoteEditor } from "../../../editor/BlockNoteEditor.js";
+import {
+  addIdsToBlocks,
+  partialBlocksToBlocksForTesting,
+} from "../../../index.js";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../../schema/index.js";
+import { initializeESMDependencies } from "../../../util/esmDependencies.js";
+import { customBlocksTestCases } from "../../testUtil/cases/customBlocks.js";
+import { customInlineContentTestCases } from "../../testUtil/cases/customInlineContent.js";
+import { customStylesTestCases } from "../../testUtil/cases/customStyles.js";
+import { defaultSchemaTestCases } from "../../testUtil/cases/defaultSchema.js";
+import { createExternalHTMLExporter } from "./externalHTMLExporter.js";
+import { createInternalHTMLSerializer } from "./internalHTMLSerializer.js";
 
 async function convertToHTMLAndCompareSnapshots<
   B extends BlockSchema,
@@ -25,6 +30,7 @@ async function convertToHTMLAndCompareSnapshots<
   snapshotName: string
 ) {
   addIdsToBlocks(blocks);
+
   const serializer = createInternalHTMLSerializer(editor.pmSchema, editor);
   const internalHTML = serializer.serializeBlocks(blocks, {});
   const internalHTMLSnapshotPath =

package/src/api/exporters/html/internalHTMLSerializer.ts

@@ -1,12 +1,12 @@
-import { DOMSerializer, Fragment, Node, Schema } from "prosemirror-model";
-import { PartialBlock } from "../../../blocks/defaultBlocks";
-import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
-import { BlockSchema, InlineContentSchema, StyleSchema } from "../../../schema";
-import { blockToNode } from "../../nodeConversions/nodeConversions";
+import { DOMSerializer, Schema } from "prosemirror-model";
+import { PartialBlock } from "../../../blocks/defaultBlocks.js";
+import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor.js";
 import {
-  serializeNodeInner,
-  serializeProseMirrorFragment,
-} from "./util/sharedHTMLConversion";
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../../schema/index.js";
+import { serializeBlocksInternalHTML } from "./util/serializeBlocksInternalHTML.js";
 // Used to serialize BlockNote blocks and ProseMirror nodes to HTML without
 // losing data. Blocks are exported using the `toInternalHTML` method in their
 // `blockSpec`.
@@ -16,29 +16,6 @@ import {
 // editor, including the `blockGroup` and `blockContainer` wrappers. This also
 // means that it can be converted back to the original blocks without any data
 // loss.
-//
-// The serializer has 2 main methods:
-// `serializeFragment`: Serializes a ProseMirror fragment to HTML. This is
-// mostly useful if you want to serialize a selection which may not start/end at
-// the start/end of a block.
-// `serializeBlocks`: Serializes an array of blocks to HTML.
-export interface InternalHTMLSerializer<
-  BSchema extends BlockSchema,
-  I extends InlineContentSchema,
-  S extends StyleSchema
-> {
-  // TODO: Ideally we would expand the BlockNote API to support partial
-  //  selections so we don't need this.
-  serializeProseMirrorFragment: (
-    fragment: Fragment,
-    options: { document?: Document }
-  ) => string;
-  serializeBlocks: (
-    blocks: PartialBlock<BSchema, I, S>[],
-    options: { document?: Document }
-  ) => string;
-}
-
 export const createInternalHTMLSerializer = <
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
@@ -46,49 +23,21 @@ export const createInternalHTMLSerializer = <
 >(
   schema: Schema,
   editor: BlockNoteEditor<BSchema, I, S>
-): InternalHTMLSerializer<BSchema, I, S> => {
-  // TODO: maybe cache this serializer (default prosemirror serializer is cached)?
-  const serializer = new DOMSerializer(
-    DOMSerializer.nodesFromSchema(schema),
-    DOMSerializer.marksFromSchema(schema)
-  ) as DOMSerializer & {
-    serializeNodeInner: (
-      node: Node,
-      options: { document?: Document }
-    ) => HTMLElement;
+) => {
+  const serializer = DOMSerializer.fromSchema(schema);
+
+  return {
     serializeBlocks: (
       blocks: PartialBlock<BSchema, I, S>[],
       options: { document?: Document }
-    ) => string;
-    serializeProseMirrorFragment: (
-      fragment: Fragment,
-      options?: { document?: Document | undefined } | undefined,
-      target?: HTMLElement | DocumentFragment | undefined
-    ) => string;
+    ) => {
+      return serializeBlocksInternalHTML(
+        editor,
+        blocks,
+        serializer,
+        false,
+        options
+      ).outerHTML;
+    },
   };
-
-  serializer.serializeNodeInner = (
-    node: Node,
-    options: { document?: Document }
-  ) => serializeNodeInner(node, options, serializer, editor, false);
-
-  serializer.serializeProseMirrorFragment = (fragment: Fragment, options) =>
-    serializeProseMirrorFragment(fragment, serializer, options);
-
-  serializer.serializeBlocks = (
-    blocks: PartialBlock<BSchema, I, S>[],
-    options
-  ) => {
-    const nodes = blocks.map((block) =>
-      blockToNode(block, schema, editor.schema.styleSchema)
-    );
-    const blockGroup = schema.nodes["blockGroup"].create(null, nodes);
-
-    return serializer.serializeProseMirrorFragment(
-      Fragment.from(blockGroup),
-      options
-    );
-  };
-
-  return serializer;
 };