refactor: remove simplifyblocks and make copy sync (#1160)

* extract updateBlockCommand

* Extracted remaining commands

* extract keyboard shortcuts

* move directory

* remove createblockcommand

* Added merge/split tests

* Updated snapshots

* Added update block tests and unified test setup

* Added test cases for reverting props

* Added additional test cases for changing content type

* remove "nested" insert option

* Split remaining commands & cleaned up

* Added `getNearestBlockContainerPos`

* Refactored `getBlockInfoFromPos`

* Rewrote `splitBlockCommand`

* Added text cursor position tests

* Fixed lint issue

* fix lint

* Fixed `splitBlock` selection

* Small fix

* Added unit tests to check selection setting

* simplify splitblocks

* Fixed selection in `splitBlock` tests

* wip: deprecate getBlockInfoFromPos

* finish cleanup

* Fixed `mergeBlocks` edge cases

* fix build

* clean nodeconversions

* Implemented PR feedback

* Finished review and remaining changes

* Fixed bug in `insertOrUpdateBlock`

* Removed log

* Tiny changes

* remove simplifyblocks, make copy sync

* fix bug

* fix all tests

* Fixed merge/delete behaviour on Backspace

---------

Co-authored-by: matthewlipski <matthewlipski@gmail.com>
Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com>

Author: YousefED

packages/core/src/api/clipboard/toClipboard/copyExtension.ts

@@ -11,7 +11,6 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "../../../schema/index.js";
-import { initializeESMDependencies } from "../../../util/esmDependencies.js";
 import { createExternalHTMLExporter } from "../../exporters/html/externalHTMLExporter.js";
 import { cleanHTMLToMarkdown } from "../../exporters/markdown/markdownExporter.js";
 import { fragmentToBlocks } from "../../nodeConversions/fragmentToBlocks.js";
@@ -20,7 +19,7 @@ import {
   contentNodeToTableContent,
 } from "../../nodeConversions/nodeToBlock.js";
 
-async function fragmentToExternalHTML<
+function fragmentToExternalHTML<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
@@ -61,7 +60,6 @@ async function fragmentToExternalHTML<
 
   let externalHTML: string;
 
-  await initializeESMDependencies();
   const externalHTMLExporter = createExternalHTMLExporter(
     view.state.schema,
     editor
@@ -82,9 +80,7 @@ async function fragmentToExternalHTML<
       editor.schema.styleSchema
     );
 
-    externalHTML = externalHTMLExporter.exportInlineContent(ic as any, {
-      simplifyBlocks: false,
-    });
+    externalHTML = externalHTMLExporter.exportInlineContent(ic as any, {});
   } else if (isWithinBlockContent) {
     // first convert selection to blocknote-style inline content, and then
     // pass this to the exporter
@@ -93,28 +89,26 @@ async function fragmentToExternalHTML<
       editor.schema.inlineContentSchema,
       editor.schema.styleSchema
     );
-    externalHTML = externalHTMLExporter.exportInlineContent(ic, {
-      simplifyBlocks: false,
-    });
+    externalHTML = externalHTMLExporter.exportInlineContent(ic, {});
   } else {
     const blocks = fragmentToBlocks(selectedFragment, editor.schema);
     externalHTML = externalHTMLExporter.exportBlocks(blocks, {});
   }
   return externalHTML;
 }
 
-export async function selectedFragmentToHTML<
+export function selectedFragmentToHTML<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
 >(
   view: EditorView,
   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
@@ -138,7 +132,7 @@ export async function selectedFragmentToHTML<
 
   const selectedFragment = view.state.selection.content().content;
 
-  const externalHTML = await fragmentToExternalHTML<BSchema, I, S>(
+  const externalHTML = fragmentToExternalHTML<BSchema, I, S>(
     view,
     selectedFragment,
     editor
@@ -162,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 = <
@@ -229,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;
               },

packages/core/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>

packages/core/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>

packages/core/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>

packages/core/src/api/exporters/html/externalHTMLExporter.ts

@@ -8,12 +8,10 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "../../../schema/index.js";
-import { esmDependencies } from "../../../util/esmDependencies.js";
 import {
-  serializeBlocks,
-  serializeInlineContent,
-} from "./util/sharedHTMLConversion.js";
-import { simplifyBlocks } from "./util/simplifyBlocksRehypePlugin.js";
+  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
@@ -39,64 +37,34 @@ export const createExternalHTMLExporter = <
   schema: Schema,
   editor: BlockNoteEditor<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);
 
   return {
     exportBlocks: (
       blocks: PartialBlock<BSchema, I, S>[],
       options: { document?: Document }
     ) => {
-      const html = serializeBlocks(
+      const html = serializeBlocksExternalHTML(
         editor,
         blocks,
         serializer,
-        true,
+        new Set<string>(["numberedListItem"]),
+        new Set<string>(["bulletListItem", "checkListItem"]),
         options
-      ).outerHTML;
-
-      // Possible improvement: now, we first use the serializeBlocks function
-      // which adds blockcontainer and blockgroup wrappers. We then pass the
-      // result to simplifyBlocks, which then cleans the wrappers.
-      //
-      // It might be easier if we create a version of serializeBlocks that
-      // doesn't add the wrappers in the first place, then we can get rid of
-      // the more complex simplifyBlocks plugin.
-      let externalHTML: any = deps.unified
-        .unified()
-        .use(deps.rehypeParse.default, { fragment: true });
-      if ((options as any).simplifyBlocks !== false) {
-        externalHTML = externalHTML.use(simplifyBlocks, {
-          orderedListItemBlockTypes: new Set<string>(["numberedListItem"]),
-          unorderedListItemBlockTypes: new Set<string>([
-            "bulletListItem",
-            "checkListItem",
-          ]),
-        });
-      }
-      externalHTML = externalHTML
-        .use(deps.rehypeStringify.default)
-        .processSync(html);
-
-      return externalHTML.value as string;
+      );
+      const div = document.createElement("div");
+      div.append(html);
+      return div.innerHTML;
     },
 
     exportInlineContent: (
       inlineContent: InlineContent<I, S>[],
-      options: { simplifyBlocks: boolean; document?: Document }
+      options: { document?: Document }
     ) => {
-      const domFragment = serializeInlineContent(
+      const domFragment = serializeInlineContentExternalHTML(
         editor,
         inlineContent as any,
         serializer,
-        true,
         options
       );
 

packages/core/src/api/exporters/html/internalHTMLSerializer.ts

@@ -6,7 +6,7 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "../../../schema/index.js";
-import { serializeBlocks } from "./util/sharedHTMLConversion.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`.
@@ -31,8 +31,13 @@ export const createInternalHTMLSerializer = <
       blocks: PartialBlock<BSchema, I, S>[],
       options: { document?: Document }
     ) => {
-      return serializeBlocks(editor, blocks, serializer, false, options)
-        .outerHTML;
+      return serializeBlocksInternalHTML(
+        editor,
+        blocks,
+        serializer,
+        false,
+        options
+      ).outerHTML;
     },
   };
 };