@blocknote/core 0.15.11 → 0.17.0

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 }
-  ) => string;
-}
 
 // Needs to be sync because it's used in drag handler event (SideMenuPlugin)
 // Ideally, call `await initializeESMDependencies()` before calling this function
@@ -54,69 +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);
 
-  const serializer = DOMSerializer.fromSchema(schema) as DOMSerializer & {
-    serializeNodeInner: (
-      node: Node,
-      options: { document?: Document }
-    ) => HTMLElement;
-    exportProseMirrorFragment: (
-      fragment: Fragment,
-      options: { document?: Document }
-    ) => 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) => {
-    const externalHTML = deps.unified
-      .unified()
-      .use(deps.rehypeParse.default, { fragment: true })
-      .use(simplifyBlocks, {
-        orderedListItemBlockTypes: new Set<string>(["numberedListItem"]),
-        unorderedListItemBlockTypes: new Set<string>([
-          "bulletListItem",
-          "checkListItem",
-        ]),
-      })
-      .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,19 +1,23 @@
-import { TextSelection } from "prosemirror-state";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
 
-import { addIdsToBlocks, partialBlocksToBlocksForTesting } from "../../..";
-import { PartialBlock } from "../../../blocks/defaultBlocks";
-import { BlockSchema } from "../../../schema/blocks/types";
-import { InlineContentSchema } from "../../../schema/inlineContent/types";
-import { StyleSchema } from "../../../schema/styles/types";
-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,
@@ -26,6 +30,7 @@ async function convertToHTMLAndCompareSnapshots<
   snapshotName: string
 ) {
   addIdsToBlocks(blocks);
+
   const serializer = createInternalHTMLSerializer(editor.pmSchema, editor);
   const internalHTML = serializer.serializeBlocks(blocks, {});
   const internalHTMLSnapshotPath =
@@ -106,145 +111,3 @@ describe("Test HTML conversion", () => {
     });
   }
 });
-
-// Fragments created from ProseMirror selections don't always conform to the
-// schema. This is because ProseMirror preserves the full ancestry of selected
-// nodes, but not the siblings of ancestor nodes. These tests are to verify that
-// Fragments like this are exported to HTML properly, as they can't be created
-// from Block objects like all the other test cases (Block object conversions
-// always conform to the schema).
-describe("Test ProseMirror fragment edge case conversion", () => {
-  let editor: BlockNoteEditor;
-  const div = document.createElement("div");
-  beforeEach(() => {
-    editor = BlockNoteEditor.create();
-    editor.mount(div);
-  });
-
-  afterEach(() => {
-    editor.mount(undefined);
-    editor._tiptapEditor.destroy();
-    editor = undefined as any;
-
-    delete (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS;
-  });
-
-  // When the selection starts in a nested block, the Fragment from it omits the
-  // `blockContent` node of the parent `blockContainer` if it's not also
-  // included in the selection. In the schema, `blockContainer` nodes should
-  // contain a single `blockContent` node, so this edge case needs to be tested.
-  describe("No block content", () => {
-    const blocks: PartialBlock[] = [
-      {
-        type: "paragraph",
-        content: "Paragraph 1",
-        children: [
-          {
-            type: "paragraph",
-            content: "Nested Paragraph 1",
-          },
-          {
-            type: "paragraph",
-            content: "Nested Paragraph 2",
-          },
-          {
-            type: "paragraph",
-            content: "Nested Paragraph 3",
-          },
-        ],
-      },
-      {
-        type: "paragraph",
-        content: "Paragraph 2",
-        children: [
-          {
-            type: "paragraph",
-            content: "Nested Paragraph 1",
-          },
-          {
-            type: "paragraph",
-            content: "Nested Paragraph 2",
-          },
-          {
-            type: "paragraph",
-            content: "Nested Paragraph 3",
-          },
-        ],
-      },
-    ];
-
-    beforeEach(() => {
-      editor.replaceBlocks(editor.document, blocks);
-    });
-
-    it("Selection within a block's children", async () => {
-      // Selection starts and ends within the first block's children.
-      editor.dispatch(
-        editor._tiptapEditor.state.tr.setSelection(
-          TextSelection.create(editor._tiptapEditor.state.doc, 18, 80)
-        )
-      );
-
-      const copiedFragment =
-        editor._tiptapEditor.state.selection.content().content;
-
-      await initializeESMDependencies();
-      const exporter = createExternalHTMLExporter(editor.pmSchema, editor);
-      const externalHTML = exporter.exportProseMirrorFragment(
-        copiedFragment,
-        {}
-      );
-      expect(externalHTML).toMatchFileSnapshot(
-        "./__snapshots_fragment_edge_cases__/" +
-          "selectionWithinBlockChildren.html"
-      );
-    });
-
-    it("Selection leaves a block's children", async () => {
-      // Selection starts and ends within the first block's children and ends
-      // outside, at a shallower nesting level in the second block.
-      editor.dispatch(
-        editor._tiptapEditor.state.tr.setSelection(
-          TextSelection.create(editor._tiptapEditor.state.doc, 18, 97)
-        )
-      );
-
-      const copiedFragment =
-        editor._tiptapEditor.state.selection.content().content;
-
-      await initializeESMDependencies();
-      const exporter = createExternalHTMLExporter(editor.pmSchema, editor);
-      const externalHTML = exporter.exportProseMirrorFragment(
-        copiedFragment,
-        {}
-      );
-      expect(externalHTML).toMatchFileSnapshot(
-        "./__snapshots_fragment_edge_cases__/" +
-          "selectionLeavesBlockChildren.html"
-      );
-    });
-
-    it("Selection spans multiple blocks' children", async () => {
-      // Selection starts and ends within the first block's children and ends
-      // within the second block's children.
-      editor.dispatch(
-        editor._tiptapEditor.state.tr.setSelection(
-          TextSelection.create(editor._tiptapEditor.state.doc, 18, 163)
-        )
-      );
-
-      const copiedFragment =
-        editor._tiptapEditor.state.selection.content().content;
-      await initializeESMDependencies();
-      const exporter = createExternalHTMLExporter(editor.pmSchema, editor);
-      const externalHTML = exporter.exportProseMirrorFragment(
-        copiedFragment,
-        {}
-      );
-      expect(externalHTML).toMatchFileSnapshot(
-        "./__snapshots_fragment_edge_cases__/" +
-          "selectionSpansBlocksChildren.html"
-      );
-    });
-  });
-});

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

@@ -1,13 +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`.
@@ -17,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,
@@ -47,45 +23,21 @@ export const createInternalHTMLSerializer = <
 >(
   schema: Schema,
   editor: BlockNoteEditor<BSchema, I, S>
-): InternalHTMLSerializer<BSchema, I, S> => {
-  const serializer = DOMSerializer.fromSchema(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;
 };