@blocknote/core 0.37.0 → 0.39.0

package/src/api/exporters/html/util/serializeBlocksInternalHTML.ts

@@ -1,4 +1,4 @@
-import { DOMSerializer, Fragment } from "prosemirror-model";
+import { DOMSerializer, Fragment, Node } from "prosemirror-model";
 
 import { PartialBlock } from "../../../../blocks/defaultBlocks.js";
 import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
@@ -13,6 +13,7 @@ import {
   tableContentToNodes,
 } from "../../../nodeConversions/blockToNode.js";
 
+import { nodeToCustomInlineContent } from "../../../nodeConversions/nodeToBlock.js";
 export function serializeInlineContentInternalHTML<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
@@ -24,7 +25,7 @@ export function serializeInlineContentInternalHTML<
   blockType?: string,
   options?: { document?: Document },
 ) {
-  let nodes: any;
+  let nodes: Node[];
 
   // TODO: reuse function from nodeconversions?
   if (!blockContent) {
@@ -39,12 +40,90 @@ export function serializeInlineContentInternalHTML<
     throw new UnreachableCaseError(blockContent.type);
   }
 
-  // We call the prosemirror serializer here because it handles Marks and Inline Content nodes nicely.
-  // If we'd want to support custom serialization or externalHTML for Inline Content, we'd have to implement
-  // a custom serializer here.
-  const dom = serializer.serializeFragment(Fragment.from(nodes), options);
+  // Check if any of the nodes are custom inline content with toExternalHTML
+  const doc = options?.document ?? document;
+  const fragment = doc.createDocumentFragment();
+
+  for (const node of nodes) {
+    // Check if this is a custom inline content node with toExternalHTML
+    if (
+      node.type.name !== "text" &&
+      editor.schema.inlineContentSchema[node.type.name]
+    ) {
+      const inlineContentImplementation =
+        editor.schema.inlineContentSpecs[node.type.name].implementation;
+
+      if (inlineContentImplementation) {
+        // Convert the node to inline content format
+        const inlineContent = nodeToCustomInlineContent(
+          node,
+          editor.schema.inlineContentSchema,
+          editor.schema.styleSchema,
+        );
+
+        // Use the custom toExternalHTML method
+        const output = inlineContentImplementation.render.call(
+          {
+            renderType: "dom",
+            props: undefined,
+          },
+          inlineContent as any,
+          () => {
+            // No-op
+          },
+          editor as any,
+        );
+
+        if (output) {
+          fragment.appendChild(output.dom);
+
+          // If contentDOM exists, render the inline content into it
+          if (output.contentDOM) {
+            const contentFragment = serializer.serializeFragment(
+              node.content,
+              options,
+            );
+            output.contentDOM.dataset.editable = "";
+            output.contentDOM.appendChild(contentFragment);
+          }
+          continue;
+        }
+      }
+    } else if (node.type.name === "text") {
+      // We serialize text nodes manually as we need to serialize the styles/
+      // marks using `styleSpec.implementation.render`. When left up to
+      // ProseMirror, it'll use `toDOM` which is incorrect.
+      let dom: globalThis.Node | Text = document.createTextNode(
+        node.textContent,
+      );
+      // Reverse the order of marks to maintain the correct priority.
+      for (const mark of node.marks.toReversed()) {
+        if (mark.type.name in editor.schema.styleSpecs) {
+          const newDom = editor.schema.styleSpecs[
+            mark.type.name
+          ].implementation.render(mark.attrs["stringValue"], editor);
+          newDom.contentDOM!.appendChild(dom);
+          dom = newDom.dom;
+        } else {
+          const domOutputSpec = mark.type.spec.toDOM!(mark, true);
+          const newDom = DOMSerializer.renderSpec(document, domOutputSpec);
+          newDom.contentDOM!.appendChild(dom);
+          dom = newDom.dom;
+        }
+      }
 
-  return dom;
+      fragment.appendChild(dom);
+    } else {
+      // Fall back to default serialization for this node
+      const nodeFragment = serializer.serializeFragment(
+        Fragment.from([node]),
+        options,
+      );
+      fragment.appendChild(nodeFragment);
+    }
+  }
+
+  return fragment;
 }
 
 function serializeBlock<
@@ -55,36 +134,29 @@ function serializeBlock<
   editor: BlockNoteEditor<BSchema, I, S>,
   block: PartialBlock<BSchema, I, S>,
   serializer: DOMSerializer,
-  listIndex: number,
   options?: { document?: Document },
 ) {
   const BC_NODE = editor.pmSchema.nodes["blockContainer"];
 
-  let props = block.props;
   // set default props in case we were passed a partial block
-  if (!block.props) {
-    props = {};
-    for (const [name, spec] of Object.entries(
-      editor.schema.blockSchema[block.type as any].propSchema,
-    )) {
-      if (spec.default !== undefined) {
-        (props as any)[name] = spec.default;
-      }
+  const props = block.props || {};
+  for (const [name, spec] of Object.entries(
+    editor.schema.blockSchema[block.type as any].propSchema,
+  )) {
+    if (!(name in props) && spec.default !== undefined) {
+      (props as any)[name] = spec.default;
     }
   }
 
   const impl = editor.blockImplementations[block.type as any].implementation;
-  const ret = impl.toInternalHTML({ ...block, props } as any, editor as any);
-
-  if (block.type === "numberedListItem") {
-    // This is a workaround to make sure there's a list index set.
-    // Normally, this is set on the internal prosemirror nodes by the NumberedListIndexingPlugin,
-    // but:
-    // - (a) this information is not available on the Blocks passed to the serializer. (we only have access to BlockNote Blocks)
-    // - (b) the NumberedListIndexingPlugin might not even have run, because we can manually call blocksToFullHTML
-    //       with blocks that are not part of the active document
-    ret.dom.setAttribute("data-index", listIndex.toString());
-  }
+  const ret = impl.render.call(
+    {
+      renderType: "dom",
+      props: undefined,
+    },
+    { ...block, props } as any,
+    editor as any,
+  );
 
   if (ret.contentDOM && block.content) {
     const ic = serializeInlineContentInternalHTML(
@@ -147,20 +219,8 @@ function serializeBlocks<
   const doc = options?.document ?? document;
   const fragment = doc.createDocumentFragment();
 
-  let listIndex = 0;
   for (const block of blocks) {
-    if (block.type === "numberedListItem") {
-      listIndex++;
-    } else {
-      listIndex = 0;
-    }
-    const blockDOM = serializeBlock(
-      editor,
-      block,
-      serializer,
-      listIndex,
-      options,
-    );
+    const blockDOM = serializeBlock(editor, block, serializer, options);
     fragment.appendChild(blockDOM);
   }
 

package/src/api/exporters/markdown/markdownExporter.ts

@@ -1,4 +1,10 @@
 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 {
@@ -6,33 +12,19 @@ import {
   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);
@@ -40,7 +32,7 @@ export function cleanHTMLToMarkdown(cleanHTMLString: string) {
   return markdownString.value as string;
 }
 
-export async function blocksToMarkdown<
+export function blocksToMarkdown<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema,
@@ -49,8 +41,7 @@ export async function blocksToMarkdown<
   schema: Schema,
   editor: BlockNoteEditor<BSchema, I, S>,
   options: { document?: Document },
-): Promise<string> {
-  await initializeESMDependencies();
+): string {
   const exporter = createExternalHTMLExporter(schema, editor);
   const externalHTML = exporter.exportBlocks(blocks, options);
 

package/src/api/exporters/markdown/util/addSpacesToCheckboxesRehypePlugin.ts

@@ -1,5 +1,5 @@
 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
@@ -7,14 +7,6 @@ import { esmDependencies } from "../../../../util/esmDependencies.js";
  * 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);

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

@@ -8,11 +8,12 @@ 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);
 

package/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();

package/src/api/parsers/markdown/parseMarkdown.ts

@@ -1,4 +1,11 @@
 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 {
@@ -6,7 +13,6 @@ import {
   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
@@ -48,31 +54,28 @@ function code(state: any, node: any) {
   return result;
 }
 
-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, {
+export function markdownToHTML(markdown: string): string {
+  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;
 }
 
-export async function markdownToBlocks<
+export function markdownToBlocks<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema,
->(markdown: string, pmSchema: Schema): Promise<Block<BSchema, I, S>[]> {
-  const htmlString = await markdownToHTML(markdown);
+>(markdown: string, pmSchema: Schema): Block<BSchema, I, S>[] {
+  const htmlString = markdownToHTML(markdown);
 
   return HTMLToBlocks(htmlString, pmSchema);
 }

package/src/api/pmUtil.ts

@@ -1,7 +1,7 @@
 import type { Node, Schema } from "prosemirror-model";
 import { Transform } from "prosemirror-transform";
 import type { BlockNoteEditor } from "../editor/BlockNoteEditor.js";
-import { BlockNoteSchema } from "../editor/BlockNoteSchema.js";
+import { BlockNoteSchema } from "../blocks/BlockNoteSchema.js";
 import type { BlockSchema } from "../schema/blocks/types.js";
 import type { InlineContentSchema } from "../schema/inlineContent/types.js";
 import type { StyleSchema } from "../schema/styles/types.js";