fix: better markdown & html paste, make methods synchronous (#1957)

Co-authored-by: Nick the Sick <nick@blocknotejs.org>

Author: Hector-Zhuang

docs/content/docs/reference/editor/overview.mdx

@@ -106,7 +106,7 @@ editor.pasteText("Hello, world!");
 Paste Markdown content into the editor.
 
 ```ts
-await editor.pasteMarkdown("# Hello\n\nThis is **bold** text.");
+editor.pasteMarkdown("# Hello\n\nThis is **bold** text.");
 ```
 
 ## Options

packages/core/package.json

@@ -96,11 +96,11 @@
     "hast-util-from-dom": "^5.0.1",
     "prosemirror-dropcursor": "^1.8.2",
     "prosemirror-highlight": "^0.13.0",
-    "prosemirror-model": "^1.25.1",
+    "prosemirror-model": "^1.25.3",
     "prosemirror-state": "^1.4.3",
     "prosemirror-tables": "^1.6.4",
     "prosemirror-transform": "^1.10.4",
-    "prosemirror-view": "^1.38.1",
+    "prosemirror-view": "^1.40.1",
     "rehype-format": "^5.0.1",
     "rehype-parse": "^9.0.1",
     "rehype-remark": "^10.0.1",

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

@@ -32,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,
@@ -41,7 +41,7 @@ export async function blocksToMarkdown<
   schema: Schema,
   editor: BlockNoteEditor<BSchema, I, S>,
   options: { document?: Document },
-): Promise<string> {
+): string {
   const exporter = createExternalHTMLExporter(schema, editor);
   const externalHTML = exporter.exportBlocks(blocks, options);
 

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

@@ -8,6 +8,7 @@ import {
 import { Block } from "../../../blocks/defaultBlocks.js";
 import { nodeToBlock } from "../../nodeConversions/nodeToBlock.js";
 import { nestedListsToBlockNoteStructure } from "./util/nestedLists.js";
+
 export function HTMLToBlocks<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,

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

@@ -54,7 +54,7 @@ function code(state: any, node: any) {
   return result;
 }
 
-export async function markdownToHTML(markdown: string): Promise<string> {
+export function markdownToHTML(markdown: string): string {
   const htmlString = unified()
     .use(remarkParse)
     .use(remarkGfm)
@@ -70,12 +70,12 @@ export async function markdownToHTML(markdown: string): Promise<string> {
   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);
 }

packages/core/src/editor/BlockNoteEditor.ts

@@ -105,22 +105,21 @@ import { dropCursor } from "prosemirror-dropcursor";
 import { EditorView } from "prosemirror-view";
 import { redoCommand, undoCommand, ySyncPluginKey } from "y-prosemirror";
 import { createInternalHTMLSerializer } from "../api/exporters/html/internalHTMLSerializer.js";
-import { inlineContentToNodes } from "../api/nodeConversions/blockToNode.js";
-import { docToBlocks } from "../api/nodeConversions/nodeToBlock.js";
 import {
   BlocksChanged,
   getBlocksChangedByTransaction,
 } from "../api/getBlocksChangedByTransaction.js";
-import { nestedListsToBlockNoteStructure } from "../api/parsers/html/util/nestedLists.js";
+import { inlineContentToNodes } from "../api/nodeConversions/blockToNode.js";
+import { docToBlocks } from "../api/nodeConversions/nodeToBlock.js";
 import { CodeBlockOptions } from "../blocks/CodeBlockContent/CodeBlockContent.js";
 import type { ThreadStore, User } from "../comments/index.js";
+import { BlockChangePlugin } from "../extensions/BlockChange/BlockChangePlugin.js";
 import type { CursorPlugin } from "../extensions/Collaboration/CursorPlugin.js";
 import type { ForkYDocPlugin } from "../extensions/Collaboration/ForkYDocPlugin.js";
 import { EventEmitter } from "../util/EventEmitter.js";
 import { BlockNoteExtension } from "./BlockNoteExtension.js";
 
 import "../style.css";
-import { BlockChangePlugin } from "../extensions/BlockChange/BlockChangePlugin.js";
 
 /**
  * A factory function that returns a BlockNoteExtension
@@ -1616,9 +1615,9 @@ export class BlockNoteEditor<
    * @param blocks An array of blocks that should be serialized into Markdown.
    * @returns The blocks, serialized as a Markdown string.
    */
-  public async blocksToMarkdownLossy(
+  public blocksToMarkdownLossy(
     blocks: PartialBlock<BSchema, ISchema, SSchema>[] = this.document,
-  ): Promise<string> {
+  ): string {
     return blocksToMarkdown(blocks, this.pmSchema, this, {});
   }
 
@@ -1833,14 +1832,6 @@ export class BlockNoteEditor<
     this.showSelectionPlugin.setEnabled(forceSelectionVisible);
   }
 
-  /**
-   * This will convert HTML into a format that is compatible with BlockNote.
-   */
-  private convertHtmlToBlockNoteHtml(html: string) {
-    const htmlNode = nestedListsToBlockNoteStructure(html.trim());
-    return htmlNode.innerHTML;
-  }
-
   /**
    * Paste HTML into the editor. Defaults to converting HTML to BlockNote HTML.
    * @param html The HTML to paste.
@@ -1849,7 +1840,8 @@ export class BlockNoteEditor<
   public pasteHTML(html: string, raw = false) {
     let htmlToPaste = html;
     if (!raw) {
-      htmlToPaste = this.convertHtmlToBlockNoteHtml(html);
+      const blocks = this.tryParseHTMLToBlocks(html);
+      htmlToPaste = this.blocksToFullHTML(blocks);
     }
     if (!htmlToPaste) {
       return;
@@ -1869,7 +1861,8 @@ export class BlockNoteEditor<
    * Paste markdown into the editor.
    * @param markdown The markdown to paste.
    */
-  public async pasteMarkdown(markdown: string) {
-    return this.pasteHTML(await markdownToHTML(markdown));
+  public pasteMarkdown(markdown: string) {
+    const html = markdownToHTML(markdown);
+    return this.pasteHTML(html);
   }
 }

packages/xl-ai/package.json

@@ -73,11 +73,11 @@
     "ai": "^4.3.15",
     "lodash.isequal": "^4.5.0",
     "prosemirror-changeset": "^2.3.0",
-    "prosemirror-model": "^1.24.1",
+    "prosemirror-model": "^1.25.3",
     "prosemirror-state": "^1.4.3",
     "prosemirror-tables": "^1.6.4",
     "prosemirror-transform": "^1.10.4",
-    "prosemirror-view": "^1.33.7",
+    "prosemirror-view": "^1.40.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.2.1",

packages/xl-multi-column/package.json

@@ -54,11 +54,11 @@
     "@blocknote/core": "0.37.0",
     "@blocknote/react": "0.37.0",
     "@tiptap/core": "^2.26.1",
-    "prosemirror-model": "^1.25.1",
+    "prosemirror-model": "^1.25.3",
     "prosemirror-state": "^1.4.3",
     "prosemirror-tables": "^1.3.7",
     "prosemirror-transform": "^1.10.4",
-    "prosemirror-view": "^1.38.1",
+    "prosemirror-view": "^1.40.1",
     "react-icons": "^5.2.1"
   },
   "devDependencies": {