@blocknote/core 0.15.11 → 0.17.0

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

@@ -0,0 +1,263 @@
+import { DOMSerializer, Fragment } from "prosemirror-model";
+
+import { PartialBlock } from "../../../../blocks/defaultBlocks.js";
+import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../../../schema/index.js";
+import { UnreachableCaseError } from "../../../../util/typescript.js";
+import {
+  inlineContentToNodes,
+  tableContentToNodes,
+} from "../../../nodeConversions/blockToNode.js";
+
+function addAttributesAndRemoveClasses(element: HTMLElement) {
+  // Removes all BlockNote specific class names.
+  const className =
+    [...element.classList].filter(
+      (className) => !className.startsWith("bn-")
+    ) || [];
+
+  if (className.length > 0) {
+    element.className = className.join(" ");
+  } else {
+    element.removeAttribute("class");
+  }
+}
+
+export function serializeInlineContentExternalHTML<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<any, I, S>,
+  blockContent: PartialBlock<BSchema, I, S>["content"],
+  serializer: DOMSerializer,
+  options?: { document?: Document }
+) {
+  let nodes: any;
+
+  // TODO: reuse function from nodeconversions?
+  if (!blockContent) {
+    throw new Error("blockContent is required");
+  } else if (typeof blockContent === "string") {
+    nodes = inlineContentToNodes(
+      [blockContent],
+      editor.pmSchema,
+      editor.schema.styleSchema
+    );
+  } else if (Array.isArray(blockContent)) {
+    nodes = inlineContentToNodes(
+      blockContent,
+      editor.pmSchema,
+      editor.schema.styleSchema
+    );
+  } else if (blockContent.type === "tableContent") {
+    nodes = tableContentToNodes(
+      blockContent,
+      editor.pmSchema,
+      editor.schema.styleSchema
+    );
+  } else {
+    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);
+
+  if (dom.nodeType === 1 /* Node.ELEMENT_NODE */) {
+    addAttributesAndRemoveClasses(dom as HTMLElement);
+  }
+
+  return dom;
+}
+
+/**
+ * TODO: there's still quite some logic that handles getting and filtering properties,
+ * we should make sure the `toExternalHTML` methods of default blocks actually handle this,
+ * instead of the serializer.
+ */
+function serializeBlock<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  fragment: DocumentFragment,
+  editor: BlockNoteEditor<BSchema, I, S>,
+  block: PartialBlock<BSchema, I, S>,
+  serializer: DOMSerializer,
+  orderedListItemBlockTypes: Set<string>,
+  unorderedListItemBlockTypes: Set<string>,
+  options?: { document?: Document }
+) {
+  const doc = 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
+    )) {
+      (props as any)[name] = spec.default;
+    }
+  }
+
+  const bc = BC_NODE.spec?.toDOM?.(
+    BC_NODE.create({
+      id: block.id,
+      ...props,
+    })
+  ) as {
+    dom: HTMLElement;
+    contentDOM?: HTMLElement;
+  };
+
+  // the container node is just used as a workaround to get some block-level attributes.
+  // we should change toExternalHTML so that this is not necessary
+  const attrs = [...bc.dom.attributes];
+
+  const ret = editor.blockImplementations[
+    block.type as any
+  ].implementation.toExternalHTML({ ...block, props } as any, editor as any);
+
+  const elementFragment = doc.createDocumentFragment();
+  if (ret.dom.classList.contains("bn-block-content")) {
+    const blockContentDataAttributes = [...attrs, ...ret.dom.attributes].filter(
+      (attr) =>
+        attr.name.startsWith("data") &&
+        attr.name !== "data-content-type" &&
+        attr.name !== "data-file-block" &&
+        attr.name !== "data-node-view-wrapper" &&
+        attr.name !== "data-node-type" &&
+        attr.name !== "data-id" &&
+        attr.name !== "data-index" &&
+        attr.name !== "data-editable"
+    );
+
+    // ret.dom = ret.dom.firstChild! as any;
+    for (const attr of blockContentDataAttributes) {
+      (ret.dom.firstChild! as HTMLElement).setAttribute(attr.name, attr.value);
+    }
+
+    addAttributesAndRemoveClasses(ret.dom.firstChild! as HTMLElement);
+    elementFragment.append(...ret.dom.childNodes);
+  } else {
+    elementFragment.append(ret.dom);
+  }
+
+  if (ret.contentDOM && block.content) {
+    const ic = serializeInlineContentExternalHTML(
+      editor,
+      block.content as any, // TODO
+      serializer,
+      options
+    );
+
+    ret.contentDOM.appendChild(ic);
+  }
+
+  let listType = undefined;
+  if (orderedListItemBlockTypes.has(block.type!)) {
+    listType = "OL";
+  } else if (unorderedListItemBlockTypes.has(block.type!)) {
+    listType = "UL";
+  }
+
+  if (listType) {
+    if (fragment.lastChild?.nodeName !== listType) {
+      const list = doc.createElement(listType);
+      fragment.append(list);
+    }
+    const li = doc.createElement("li");
+    li.append(elementFragment);
+    fragment.lastChild!.appendChild(li);
+  } else {
+    fragment.append(elementFragment);
+  }
+
+  if (block.children && block.children.length > 0) {
+    const childFragment = doc.createDocumentFragment();
+    serializeBlocksToFragment(
+      childFragment,
+      editor,
+      block.children,
+      serializer,
+      orderedListItemBlockTypes,
+      unorderedListItemBlockTypes,
+      options
+    );
+    if (
+      fragment.lastChild?.nodeName === "UL" ||
+      fragment.lastChild?.nodeName === "OL"
+    ) {
+      // add nested lists to the last list item
+      while (
+        childFragment.firstChild?.nodeName === "UL" ||
+        childFragment.firstChild?.nodeName === "OL"
+      ) {
+        fragment.lastChild!.lastChild!.appendChild(childFragment.firstChild!);
+      }
+    }
+
+    fragment.append(childFragment);
+  }
+}
+
+const serializeBlocksToFragment = <
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  fragment: DocumentFragment,
+  editor: BlockNoteEditor<BSchema, I, S>,
+  blocks: PartialBlock<BSchema, I, S>[],
+  serializer: DOMSerializer,
+  orderedListItemBlockTypes: Set<string>,
+  unorderedListItemBlockTypes: Set<string>,
+  options?: { document?: Document }
+) => {
+  for (const block of blocks) {
+    serializeBlock(
+      fragment,
+      editor,
+      block,
+      serializer,
+      orderedListItemBlockTypes,
+      unorderedListItemBlockTypes,
+      options
+    );
+  }
+};
+
+export const serializeBlocksExternalHTML = <
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<BSchema, I, S>,
+  blocks: PartialBlock<BSchema, I, S>[],
+  serializer: DOMSerializer,
+  orderedListItemBlockTypes: Set<string>,
+  unorderedListItemBlockTypes: Set<string>,
+  options?: { document?: Document }
+) => {
+  const doc = options?.document ?? document;
+  const fragment = doc.createDocumentFragment();
+
+  serializeBlocksToFragment(
+    fragment,
+    editor,
+    blocks,
+    serializer,
+    orderedListItemBlockTypes,
+    unorderedListItemBlockTypes,
+    options
+  );
+  return fragment;
+};

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

@@ -0,0 +1,158 @@
+import { DOMSerializer, Fragment } from "prosemirror-model";
+
+import { PartialBlock } from "../../../../blocks/defaultBlocks.js";
+import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../../../schema/index.js";
+import { UnreachableCaseError } from "../../../../util/typescript.js";
+import {
+  inlineContentToNodes,
+  tableContentToNodes,
+} from "../../../nodeConversions/blockToNode.js";
+
+export function serializeInlineContentInternalHTML<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<any, I, S>,
+  blockContent: PartialBlock<BSchema, I, S>["content"],
+  serializer: DOMSerializer,
+  _toExternalHTML: boolean, // TODO, externalHTML for IC
+  options?: { document?: Document }
+) {
+  let nodes: any;
+
+  // TODO: reuse function from nodeconversions?
+  if (!blockContent) {
+    throw new Error("blockContent is required");
+  } else if (typeof blockContent === "string") {
+    nodes = inlineContentToNodes(
+      [blockContent],
+      editor.pmSchema,
+      editor.schema.styleSchema
+    );
+  } else if (Array.isArray(blockContent)) {
+    nodes = inlineContentToNodes(
+      blockContent,
+      editor.pmSchema,
+      editor.schema.styleSchema
+    );
+  } else if (blockContent.type === "tableContent") {
+    nodes = tableContentToNodes(
+      blockContent,
+      editor.pmSchema,
+      editor.schema.styleSchema
+    );
+  } else {
+    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);
+
+  return dom;
+}
+
+function serializeBlock<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<BSchema, I, S>,
+  block: PartialBlock<BSchema, I, S>,
+  serializer: DOMSerializer,
+  toExternalHTML: boolean,
+  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
+    )) {
+      (props as any)[name] = spec.default;
+    }
+  }
+
+  const bc = BC_NODE.spec?.toDOM?.(
+    BC_NODE.create({
+      id: block.id,
+      ...props,
+    })
+  ) as {
+    dom: HTMLElement;
+    contentDOM?: HTMLElement;
+  };
+
+  const impl = editor.blockImplementations[block.type as any].implementation;
+  const ret = toExternalHTML
+    ? impl.toExternalHTML({ ...block, props } as any, editor as any)
+    : impl.toInternalHTML({ ...block, props } as any, editor as any);
+
+  if (ret.contentDOM && block.content) {
+    const ic = serializeInlineContentInternalHTML(
+      editor,
+      block.content as any, // TODO
+      serializer,
+      toExternalHTML,
+      options
+    );
+    ret.contentDOM.appendChild(ic);
+  }
+
+  bc.contentDOM?.appendChild(ret.dom);
+
+  if (block.children && block.children.length > 0) {
+    bc.contentDOM?.appendChild(
+      serializeBlocksInternalHTML(
+        editor,
+        block.children,
+        serializer,
+        toExternalHTML,
+        options
+      )
+    );
+  }
+  return bc.dom;
+}
+
+export const serializeBlocksInternalHTML = <
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<BSchema, I, S>,
+  blocks: PartialBlock<BSchema, I, S>[],
+  serializer: DOMSerializer,
+  toExternalHTML: boolean,
+  options?: { document?: Document }
+) => {
+  const BG_NODE = editor.pmSchema.nodes["blockGroup"];
+
+  const bg = BG_NODE.spec!.toDOM!(BG_NODE.create({})) as {
+    dom: HTMLElement;
+    contentDOM?: HTMLElement;
+  };
+
+  for (const block of blocks) {
+    const blockDOM = serializeBlock(
+      editor,
+      block,
+      serializer,
+      toExternalHTML,
+      options
+    );
+    bg.contentDOM!.appendChild(blockDOM);
+  }
+
+  return bg.dom;
+};

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

@@ -1,16 +1,16 @@
 import fs from "node:fs";
 import path from "node:path";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import { PartialBlock } from "../../../blocks/defaultBlocks";
-import { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
-import { BlockSchema } from "../../../schema/blocks/types";
-import { InlineContentSchema } from "../../../schema/inlineContent/types";
-import { StyleSchema } from "../../../schema/styles/types";
-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 { partialBlocksToBlocksForTesting } from "../../testUtil/partialBlockTestUtil";
+import { PartialBlock } from "../../../blocks/defaultBlocks.js";
+import { BlockNoteEditor } from "../../../editor/BlockNoteEditor.js";
+import { BlockSchema } from "../../../schema/blocks/types.js";
+import { InlineContentSchema } from "../../../schema/inlineContent/types.js";
+import { StyleSchema } from "../../../schema/styles/types.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 { partialBlocksToBlocksForTesting } from "../../testUtil/partialBlockTestUtil.js";
 
 async function convertToMarkdownAndCompareSnapshots<
   B extends BlockSchema,

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

@@ -1,14 +1,18 @@
 import { Schema } from "prosemirror-model";
-import { PartialBlock } from "../../../blocks/defaultBlocks";
-import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
-import { BlockSchema, InlineContentSchema, StyleSchema } from "../../../schema";
+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";
-import { createExternalHTMLExporter } from "../html/externalHTMLExporter";
-import { removeUnderlines } from "./removeUnderlinesRehypePlugin";
-import { addSpacesToCheckboxes } from "./util/addSpacesToCheckboxesRehypePlugin";
+} 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

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";
+import { esmDependencies } from "../../../../util/esmDependencies.js";
 
 /**
  * Rehype plugin which adds a space after each checkbox input element. This is
@@ -11,7 +11,7 @@ export function addSpacesToCheckboxes() {
 
   if (!deps) {
     throw new Error(
-      "simplifyBlocks requires ESM dependencies to be initialized"
+      "addSpacesToCheckboxes requires ESM dependencies to be initialized"
     );
   }