@blocknote/core 0.15.10 → 0.16.0

package/src/api/{exporters → clipboard/toClipboard}/copyExtension.ts

@@ -1,16 +1,17 @@
 import { Extension } from "@tiptap/core";
 import { 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 "./html/externalHTMLExporter";
-import { createInternalHTMLSerializer } from "./html/internalHTMLSerializer";
-import { cleanHTMLToMarkdown } from "./markdown/markdownExporter";
-
-async function selectedFragmentToHTML<
+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<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
@@ -18,20 +19,61 @@ async function selectedFragmentToHTML<
   view: EditorView,
   editor: BlockNoteEditor<BSchema, I, S>
 ): Promise<{
-  internalHTML: string;
+  clipboardHTML: string;
   externalHTML: string;
-  plainText: string;
+  markdown: string;
 }> {
-  const selectedFragment = view.state.selection.content().content;
+  // 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))
+      )
+    );
+  }
 
-  const internalHTMLSerializer = createInternalHTMLSerializer(
-    view.state.schema,
-    editor
-  );
-  const internalHTML = internalHTMLSerializer.serializeProseMirrorFragment(
-    selectedFragment,
-    {}
-  );
+  // 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) {
+    const fragmentWithoutParents = view.state.doc.slice(
+      view.state.selection.from,
+      view.state.selection.to,
+      false
+    ).content;
+
+    const children = [];
+    for (let i = 0; i < fragmentWithoutParents.childCount; i++) {
+      children.push(fragmentWithoutParents.child(i));
+    }
+
+    isWithinBlockContent =
+      children.find(
+        (child) =>
+          child.type.name === "blockContainer" ||
+          child.type.name === "blockGroup" ||
+          child.type.spec.group === "blockContent"
+      ) === undefined;
+    if (isWithinBlockContent) {
+      selectedFragment = fragmentWithoutParents;
+    }
+  }
 
   await initializeESMDependencies();
   const externalHTMLExporter = createExternalHTMLExporter(
@@ -40,12 +82,12 @@ async function selectedFragmentToHTML<
   );
   const externalHTML = externalHTMLExporter.exportProseMirrorFragment(
     selectedFragment,
-    {}
+    { simplifyBlocks: !isWithinBlockContent && !isWithinTable }
   );
 
-  const plainText = await cleanHTMLToMarkdown(externalHTML);
+  const markdown = cleanHTMLToMarkdown(externalHTML);
 
-  return { internalHTML, externalHTML, plainText };
+  return { clipboardHTML, externalHTML, markdown };
 }
 
 const copyToClipboard = <
@@ -61,30 +103,15 @@ const copyToClipboard = <
   event.preventDefault();
   event.clipboardData!.clearData();
 
-  // 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))
-      )
-    );
-  }
-
   (async () => {
-    const { internalHTML, externalHTML, plainText } =
+    const { clipboardHTML, externalHTML, markdown } =
       await selectedFragmentToHTML(view, editor);
 
     // TODO: Writing to other MIME types not working in Safari for
     //  some reason.
-    event.clipboardData!.setData("blocknote/html", internalHTML);
+    event.clipboardData!.setData("blocknote/html", clipboardHTML);
     event.clipboardData!.setData("text/html", externalHTML);
-    event.clipboardData!.setData("text/plain", plainText);
+    event.clipboardData!.setData("text/plain", markdown);
   })();
 };
 
@@ -144,14 +171,14 @@ export const createCopyToClipboardExtension = <
                 event.dataTransfer!.clearData();
 
                 (async () => {
-                  const { internalHTML, externalHTML, plainText } =
+                  const { clipboardHTML, externalHTML, markdown } =
                     await selectedFragmentToHTML(view, editor);
 
                   // TODO: Writing to other MIME types not working in Safari for
                   //  some reason.
-                  event.dataTransfer!.setData("blocknote/html", internalHTML);
+                  event.dataTransfer!.setData("blocknote/html", clipboardHTML);
                   event.dataTransfer!.setData("text/html", externalHTML);
-                  event.dataTransfer!.setData("text/plain", plainText);
+                  event.dataTransfer!.setData("text/plain", markdown);
                 })();
                 // Prevent default PM handler to be called
                 return true;

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

@@ -41,7 +41,7 @@ export interface ExternalHTMLExporter<
   ) => string;
   exportProseMirrorFragment: (
     fragment: Fragment,
-    options: { document?: Document }
+    options: { document?: Document; simplifyBlocks?: boolean }
   ) => string;
 }
 
@@ -63,14 +63,18 @@ export const createExternalHTMLExporter = <
     );
   }
 
-  const serializer = DOMSerializer.fromSchema(schema) as DOMSerializer & {
+  // 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 }
+      options: { document?: Document; simplifyBlocks?: boolean }
     ) => string;
     exportBlocks: (
       blocks: PartialBlock<BSchema, I, S>[],
@@ -87,16 +91,19 @@ export const createExternalHTMLExporter = <
   // but additionally runs it through the `simplifyBlocks` rehype plugin to
   // convert the internal HTML to external.
   serializer.exportProseMirrorFragment = (fragment, options) => {
-    const externalHTML = deps.unified
+    let externalHTML: any = deps.unified
       .unified()
-      .use(deps.rehypeParse.default, { fragment: true })
-      .use(simplifyBlocks, {
+      .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));
 

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

@@ -1,12 +1,11 @@
-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 { 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";
@@ -106,145 +105,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

@@ -7,7 +7,6 @@ import {
   serializeNodeInner,
   serializeProseMirrorFragment,
 } from "./util/sharedHTMLConversion";
-
 // Used to serialize BlockNote blocks and ProseMirror nodes to HTML without
 // losing data. Blocks are exported using the `toInternalHTML` method in their
 // `blockSpec`.
@@ -48,7 +47,11 @@ export const createInternalHTMLSerializer = <
   schema: Schema,
   editor: BlockNoteEditor<BSchema, I, S>
 ): InternalHTMLSerializer<BSchema, I, S> => {
-  const serializer = DOMSerializer.fromSchema(schema) as DOMSerializer & {
+  // 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 }

package/src/api/parsers/html/parseHTML.test.ts

@@ -1,3 +1,4 @@
+import * as pmView from "prosemirror-view";
 import { describe, expect, it } from "vitest";
 import { BlockNoteEditor } from "../../..";
 import { nestedListsToBlockNoteStructure } from "./util/nestedLists";
@@ -6,16 +7,12 @@ async function parseHTMLAndCompareSnapshots(
   html: string,
   snapshotName: string
 ) {
-  // use a dynamic import because we want to access
-  // __parseFromClipboard which is not exposed in types
-  const view: any = await import("prosemirror-view");
-
   const editor = BlockNoteEditor.create();
   const div = document.createElement("div");
   editor.mount(div);
   const blocks = await editor.tryParseHTMLToBlocks(html);
 
-  const snapshotPath = "./__snapshots__/paste/" + snapshotName + ".json";
+  const snapshotPath = "./__snapshots__/" + snapshotName + ".json";
   expect(JSON.stringify(blocks, undefined, 2)).toMatchFileSnapshot(
     snapshotPath
   );
@@ -34,7 +31,7 @@ async function parseHTMLAndCompareSnapshots(
   (window as any).__TEST_OPTIONS.mockID = 0; // reset id counter
   const htmlNode = nestedListsToBlockNoteStructure(html);
 
-  const slice = view.__parseFromClipboard(
+  const slice = (pmView as any).__parseFromClipboard(
     editor.prosemirrorView,
     "",
     htmlNode.innerHTML,