refactor: remove initializeESMDependencies kludge

Author: nperez0111

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

@@ -28,7 +28,6 @@ import {
 // 4. The HTML is wrapped in a single `div` element.
 
 // Needs to be sync because it's used in drag handler event (SideMenuPlugin)
-// Ideally, call `await initializeESMDependencies()` before calling this function
 export const createExternalHTMLExporter = <
   BSchema extends BlockSchema,
   I extends InlineContentSchema,

packages/core/src/api/exporters/markdown/markdownExporter.ts

@@ -1,38 +1,30 @@
 import { Schema } from "prosemirror-model";
+import rehypeParse from "rehype-parse";
+import rehypeRemark from "rehype-remark";
+import remarkGfm from "remark-gfm";
+import remarkStringify from "remark-stringify";
+import { unified } from "unified";
+
 import { PartialBlock } from "../../../blocks/defaultBlocks.js";
 import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor.js";
 import {
   BlockSchema,
   InlineContentSchema,
   StyleSchema,
 } from "../../../schema/index.js";
-import {
-  esmDependencies,
-  initializeESMDependencies,
-} from "../../../util/esmDependencies.js";
 import { createExternalHTMLExporter } from "../html/externalHTMLExporter.js";
 import { removeUnderlines } from "./removeUnderlinesRehypePlugin.js";
 import { addSpacesToCheckboxes } from "./util/addSpacesToCheckboxesRehypePlugin.js";
 
 // Needs to be sync because it's used in drag handler event (SideMenuPlugin)
-// Ideally, call `await initializeESMDependencies()` before calling this function
 export function cleanHTMLToMarkdown(cleanHTMLString: string) {
-  const deps = esmDependencies;
-
-  if (!deps) {
-    throw new Error(
-      "cleanHTMLToMarkdown requires ESM dependencies to be initialized",
-    );
-  }
-
-  const markdownString = deps.unified
-    .unified()
-    .use(deps.rehypeParse.default, { fragment: true })
+  const markdownString = unified()
+    .use(rehypeParse, { fragment: true })
     .use(removeUnderlines)
     .use(addSpacesToCheckboxes)
-    .use(deps.rehypeRemark.default)
-    .use(deps.remarkGfm.default)
-    .use(deps.remarkStringify.default, {
+    .use(rehypeRemark)
+    .use(remarkGfm)
+    .use(remarkStringify, {
       handlers: { text: (node) => node.value },
     })
     .processSync(cleanHTMLString);
@@ -50,7 +42,6 @@ export async function blocksToMarkdown<
   editor: BlockNoteEditor<BSchema, I, S>,
   options: { document?: Document },
 ): Promise<string> {
-  await initializeESMDependencies();
   const exporter = createExternalHTMLExporter(schema, editor);
   const externalHTML = exporter.exportBlocks(blocks, options);
 

packages/core/src/api/exporters/markdown/util/addSpacesToCheckboxesRehypePlugin.ts

@@ -1,20 +1,12 @@
 import { Element as HASTElement, Parent as HASTParent } from "hast";
-import { esmDependencies } from "../../../../util/esmDependencies.js";
+import { fromDom } from "hast-util-from-dom";
 
 /**
  * Rehype plugin which adds a space after each checkbox input element. This is
  * because remark doesn't add any spaces between the checkbox input and the text
  * itself, but these are needed for correct Markdown syntax.
  */
 export function addSpacesToCheckboxes() {
-  const deps = esmDependencies;
-
-  if (!deps) {
-    throw new Error(
-      "addSpacesToCheckboxes requires ESM dependencies to be initialized",
-    );
-  }
-
   const helper = (tree: HASTParent) => {
     if (tree.children && "length" in tree.children && tree.children.length) {
       for (let i = tree.children.length - 1; i >= 0; i--) {
@@ -37,9 +29,7 @@ export function addSpacesToCheckboxes() {
           nextChild.children.splice(
             0,
             0,
-            deps.hastUtilFromDom.fromDom(
-              document.createTextNode(" "),
-            ) as HASTElement,
+            fromDom(document.createTextNode(" ")) as HASTElement,
           );
         } else {
           helper(child as HASTParent);

packages/core/src/api/parsers/html/parseHTML.ts

@@ -8,11 +8,11 @@ import {
 import { Block } from "../../../blocks/defaultBlocks.js";
 import { nodeToBlock } from "../../nodeConversions/nodeToBlock.js";
 import { nestedListsToBlockNoteStructure } from "./util/nestedLists.js";
-export async function HTMLToBlocks<
+export function HTMLToBlocks<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema,
->(html: string, pmSchema: Schema): Promise<Block<BSchema, I, S>[]> {
+>(html: string, pmSchema: Schema): Block<BSchema, I, S>[] {
   const htmlNode = nestedListsToBlockNoteStructure(html);
   const parser = DOMParser.fromSchema(pmSchema);
 

packages/core/src/api/parsers/html/util/nestedLists.test.ts

@@ -1,17 +1,17 @@
 import { describe, expect, it } from "vitest";
-import { initializeESMDependencies } from "../../../../util/esmDependencies.js";
 import { nestedListsToBlockNoteStructure } from "./nestedLists.js";
+import { unified } from "unified";
+import rehypeParse from "rehype-parse";
+import rehypeFormat from "rehype-format";
+import rehypeStringify from "rehype-stringify";
 
 async function testHTML(html: string) {
-  const deps = await initializeESMDependencies();
-
   const htmlNode = nestedListsToBlockNoteStructure(html);
 
-  const pretty = await deps.unified
-    .unified()
-    .use(deps.rehypeParse.default, { fragment: true })
-    .use(deps.rehypeFormat.default)
-    .use(deps.rehypeStringify.default)
+  const pretty = await unified()
+    .use(rehypeParse, { fragment: true })
+    .use(rehypeFormat)
+    .use(rehypeStringify)
     .process(htmlNode.innerHTML);
 
   expect(pretty.value).toMatchSnapshot();

packages/core/src/api/parsers/markdown/parseMarkdown.ts

@@ -1,12 +1,18 @@
 import { Schema } from "prosemirror-model";
+import remarkGfm from "remark-gfm";
+import remarkParse from "remark-parse";
+import remarkRehype, {
+  defaultHandlers as remarkRehypeDefaultHandlers,
+} from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+import { unified } from "unified";
 
 import { Block } from "../../../blocks/defaultBlocks.js";
 import {
   BlockSchema,
   InlineContentSchema,
   StyleSchema,
 } from "../../../schema/index.js";
-import { initializeESMDependencies } from "../../../util/esmDependencies.js";
 import { HTMLToBlocks } from "../html/parseHTML.js";
 
 // modified version of https://github.com/syntax-tree/mdast-util-to-hast/blob/main/lib/handlers/code.js
@@ -49,19 +55,16 @@ function code(state: any, node: any) {
 }
 
 export async function markdownToHTML(markdown: string): Promise<string> {
-  const deps = await initializeESMDependencies();
-
-  const htmlString = deps.unified
-    .unified()
-    .use(deps.remarkParse.default)
-    .use(deps.remarkGfm.default)
-    .use(deps.remarkRehype.default, {
+  const htmlString = unified()
+    .use(remarkParse)
+    .use(remarkGfm)
+    .use(remarkRehype, {
       handlers: {
-        ...(deps.remarkRehype.defaultHandlers as any),
+        ...(remarkRehypeDefaultHandlers as any),
         code,
       },
     })
-    .use(deps.rehypeStringify.default)
+    .use(rehypeStringify)
     .processSync(markdown);
 
   return htmlString.value as string;

packages/core/src/editor/BlockNoteEditor.ts

@@ -1574,9 +1574,9 @@ export class BlockNoteEditor<
    * @param blocks An array of blocks that should be serialized into HTML.
    * @returns The blocks, serialized as an HTML string.
    */
-  public async blocksToHTMLLossy(
+  public blocksToHTMLLossy(
     blocks: PartialBlock<BSchema, ISchema, SSchema>[] = this.document,
-  ): Promise<string> {
+  ): string {
     const exporter = createExternalHTMLExporter(this.pmSchema, this);
     return exporter.exportBlocks(blocks, {});
   }
@@ -1590,9 +1590,9 @@ export class BlockNoteEditor<
    * @param blocks An array of blocks that should be serialized into HTML.
    * @returns The blocks, serialized as an HTML string.
    */
-  public async blocksToFullHTML(
+  public blocksToFullHTML(
     blocks: PartialBlock<BSchema, ISchema, SSchema>[],
-  ): Promise<string> {
+  ): string {
     const exporter = createInternalHTMLSerializer(this.pmSchema, this);
     return exporter.serializeBlocks(blocks, {});
   }
@@ -1603,9 +1603,9 @@ export class BlockNoteEditor<
    * @param html The HTML string to parse blocks from.
    * @returns The blocks parsed from the HTML string.
    */
-  public async tryParseHTMLToBlocks(
+  public tryParseHTMLToBlocks(
     html: string,
-  ): Promise<Block<BSchema, ISchema, SSchema>[]> {
+  ): Block<BSchema, ISchema, SSchema>[] {
     return HTMLToBlocks(html, this.pmSchema);
   }
 

packages/core/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -17,7 +17,6 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "../../schema/index.js";
-import { initializeESMDependencies } from "../../util/esmDependencies.js";
 import { getDraggableBlockFromElement } from "../getDraggableBlockFromElement.js";
 import { dragStart, unsetDragImage } from "./dragging.js";
 
@@ -171,7 +170,6 @@ export class SideMenuView<
       this.onDragEnd as EventListener,
       true,
     );
-    initializeESMDependencies();
 
     // Shows or updates menu position whenever the cursor moves, if the menu isn't frozen.
     this.pmView.root.addEventListener(

packages/core/src/index.ts

@@ -56,7 +56,6 @@ export * from "./i18n/dictionary.js";
 export * from "./schema/index.js";
 export * from "./util/browser.js";
 export * from "./util/combineByGroup.js";
-export * from "./util/esmDependencies.js";
 export * from "./util/string.js";
 export * from "./util/table.js";
 export * from "./util/typescript.js";