rme 0.1.0 → 0.1.1

package/dist/index.d.ts

@@ -99,6 +99,7 @@ type CreateCodemirrorOptions = {
      */
     useProsemirrorHistoryKey?: boolean;
     codemirrorEditorViewConfig?: EditorViewConfig;
+    onValueChange?: (value: string) => void;
 };
 declare class MfCodemirrorView {
     private readonly view;
@@ -323,12 +324,14 @@ declare const ThemeProvider: React.FC<Props>;
 interface PreviewProps {
     doc: Node | string;
     delegateOptions?: EditorProps['delegateOptions'];
+    onError?: (e: Error) => void;
 }
 type HTMLAstNode = {
     attrs: Record<string, any>;
     name: string;
     type: string;
     children?: HTMLAstNode[];
+    content?: string;
 };
 declare const Preview: React.FC<PreviewProps>;
 

package/dist/index.mjs

@@ -4576,7 +4576,8 @@ var rule2 = (state) => {
             const newToken = new Token2("inline", "", 0);
             newToken.children = [...childs];
             newTokens.push(newToken);
-            childs.length = 0;
+            newToken.content = childs.map((child2) => child2.content).join("");
+            childs = [];
           }
           newTokens.push(child);
         } else {
@@ -4615,6 +4616,28 @@ function MarkdownItHtmlInline(md) {
 }
 var markdown_it_html_inline_default = MarkdownItHtmlInline;
 
+// src/editor/transform/markdown-it-mermaid.ts
+import Token3 from "markdown-it/lib/token.mjs";
+var rule3 = (state) => {
+  let edited = false;
+  const tokens = state.tokens;
+  const tokensLength = tokens.length;
+  for (let i = 0; i <= tokensLength - 1; i++) {
+    const curToken = tokens[i];
+    if (curToken.type === "fence" && curToken.info === "mermaid") {
+      const code = curToken.content;
+      const mermaidToken = new Token3("mermaid_node", "", 0);
+      mermaidToken.content = code;
+      tokens[i] = mermaidToken;
+    }
+  }
+  return edited;
+};
+function MarkdownItMermaid(md) {
+  md.core.ruler.push("markdown-it-mermaid", rule3);
+}
+var markdown_it_mermaid_default = MarkdownItMermaid;
+
 // src/editor/transform/parser.ts
 var UnknowMarkdownItTokenError = class extends Error {
   constructor(tokenType, supportedTokenTypes) {
@@ -4787,15 +4810,7 @@ function buildTokenHandlers(schema, parserRules) {
 var MarkdownParser = class {
   constructor(schema, parserRules) {
     this.schema = schema;
-    this.tokenizer = MarkdownIt("commonmark", { html: true }).disable([
-      "emphasis",
-      "autolink",
-      "backticks",
-      "entity",
-      "reference",
-      "image",
-      "link"
-    ]).enable(["table"]).use(markdown_it_html_inline_default).use(markdown_it_list_checkbox_default);
+    this.tokenizer = MarkdownIt("commonmark", { html: true }).disable(["emphasis", "autolink", "backticks", "entity", "reference", "image", "link"]).enable(["table"]).use(markdown_it_html_inline_default).use(markdown_it_list_checkbox_default).use(markdown_it_mermaid_default);
     this.tokenHandlers = buildTokenHandlers(schema, parserRules);
   }
   parse(text) {
@@ -6966,7 +6981,7 @@ var styledLightTheme = {
   blockquoteFontColor: "#57606a",
   tableTdBorderColor: "#d0d7de",
   tableTrBgColor: "#ffffff",
-  tableTrDeepBgColor: "#f6f8fa",
+  tableTrDeepBgColor: "#f6f6f6",
   tableTrBorderColor: "#d8dee4",
   tableSelectorBgColor: "#e5e5e5",
   tableSelectorBgHoverColor: "#c6c6c6",
@@ -6977,7 +6992,7 @@ var styledLightTheme = {
   tableSelectorCellBgColor: "#d7ecf9",
   tableSelectorCellBorderColor: "#1c7ed6",
   codeBgColor: "#afb8c133",
-  preBgColor: "#f6f8fa",
+  preBgColor: "#f6f6f6",
   // components
   contextMenuBgColor: "#f6f7f9",
   contextMenuBgColorHover: "#1552B3",
@@ -7730,6 +7745,21 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
     outline: none;
   }
 
+  .mermaid-node {
+    position: relative;
+    min-height: 40px;
+    transition: all 0.3s;
+
+    &:hover {
+      background-color: ${({ theme }) => theme.tipsBgColor};
+    }
+  }
+
+  .mermaid-src {
+    outline: none;
+  }
+
+
   & .ProseMirror-focused {
     outline: none;
   }
@@ -7740,12 +7770,18 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
 
   .html-node-label {
     position: absolute;
-    right: 0;
+    top: 6px;
+    right: 6px;
+    padding: 4px 8px;
     opacity: 0;
     transition: all 0.3s;
     font-size: small;
     cursor: pointer;
     color: ${(props) => props.theme.labelFontColor};
+
+    &:hover {
+      background-color: ${(props) => props.theme.hoverColor};
+    }
   }
 
   .node-enter {
@@ -7755,7 +7791,6 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
 
     & .html-node-label {
       opacity: 1;
-      background-color: ${({ theme }) => theme.tipsBgColor};
     }
   }
 
@@ -9582,7 +9617,9 @@ import { EditorView as CodeMirrorEditorView, keymap } from "@codemirror/view";
 import { assertGet, isPromise, replaceNodeAtPosition } from "@remirror/core";
 import { exitCode as exitCode2 } from "@remirror/pm/commands";
 import { Selection, TextSelection as TextSelection3 } from "@remirror/pm/state";
-import { ensureSyntaxTree } from "@codemirror/language";
+import {
+  ensureSyntaxTree
+} from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
 import { nanoid as nanoid3 } from "nanoid";
 
@@ -9738,6 +9775,7 @@ var MfCodemirrorView = class {
         change.text ? this.schema.text(change.text) : []
       );
       this.view.dispatch(transaction);
+      this.options?.onValueChange?.(tr.state.doc.toString());
     }
   }
   asProseMirrorSelection(doc) {
@@ -16345,7 +16383,6 @@ var HtmlNodeView = class {
     this._htmlSrcElt.classList.add("html-src", "node-hide");
     this.languageConf = new Compartment2();
     this.dom.appendChild(this._htmlSrcElt);
-    this.dom.addEventListener("click", () => this.ensureFocus());
     label.addEventListener("click", () => this.ensureFocus());
     this.dom.addEventListener("mouseenter", this.handleMouseEnter);
     this.dom.addEventListener("mouseleave", this.handleMouseLeave);
@@ -16498,7 +16535,7 @@ function arrowHandler(dir) {
     const side = dir === "left" || dir === "up" ? -1 : 1;
     const $head = tr.selection.$head;
     const nextPos = Selection2.near(tr.doc.resolve(side > 0 ? $head.after() : $head.before()), side);
-    if (nextPos.$head && (nextPos.$head.parent.type.name === "codeMirror" || nextPos.$head.parent.type.name === "html_block")) {
+    if (nextPos.$head && (nextPos.$head.parent.type.name === "codeMirror" || nextPos.$head.parent.type.name === "html_block" || nextPos.$head.parent.type.name === "mermaid_node")) {
       dispatch?.(tr.setSelection(nextPos));
       return true;
     }
@@ -17717,7 +17754,7 @@ function createDecorationSet(props) {
 
 // src/editor/extensions/Clipboard/clipboard-extension.ts
 import { PlainExtension as PlainExtension7 } from "@remirror/core";
-import { DOMSerializer, DOMParser as DOMParser2 } from "@remirror/pm/model";
+import { DOMParser as DOMParser2 } from "@remirror/pm/model";
 function isPureText(content) {
   if (!content) return false;
   if (Array.isArray(content)) {
@@ -17759,10 +17796,11 @@ var ClipboardExtension = class extends PlainExtension7 {
           if (html2.length === 0 && text.length === 0) return false;
           const domParser = DOMParser2.fromSchema(schema);
           let dom;
-          if (html2.length === 0) {
+          if (text) {
             const slice2 = parser4?.(text);
             if (!slice2 || typeof slice2 === "string") return false;
-            dom = DOMSerializer.fromSchema(schema).serializeFragment(slice2.content);
+            view.dispatch(view.state.tr.replaceSelectionWith(slice2, true));
+            return true;
           } else {
             const template = document.createElement("template");
             template.innerHTML = html2;
@@ -18206,6 +18244,258 @@ HtmlInlineNodeExtension = __decorateClass([
   })
 ], HtmlInlineNodeExtension);
 
+// src/editor/extensions/Mermaid/mermaid-extension.ts
+import { NodeExtension as NodeExtension6, isElementDomNode as isElementDomNode4, nodeInputRule as nodeInputRule6 } from "@remirror/core";
+
+// src/editor/extensions/Mermaid/mermaid-view.ts
+import { Compartment as Compartment3 } from "@codemirror/state";
+import mermaid from "mermaid";
+
+// src/editor/utils/eventbus.ts
+import EventBus from "js-event-bus";
+var eventBus = new EventBus();
+
+// src/editor/extensions/Mermaid/mermaid-view.ts
+var renderCount = { count: 0 };
+var MermaidNodeView = class {
+  constructor(node, view, getPos) {
+    this._htmlSrcElt = null;
+    this.destroying = false;
+    this.renderViewId = null;
+    this.ignoreMutation = () => true;
+    this.handleMouseEnter = () => {
+      this.dom.classList.add("node-enter");
+    };
+    this.handleMouseLeave = () => {
+      this.dom.classList.remove("node-enter");
+    };
+    // == Rendering ===================================== //
+    this.changeTheme = () => {
+      console.log("change theme");
+      this.renderHtml();
+    };
+    this._node = node;
+    this._outerView = view;
+    this._getPos = getPos;
+    this.schema = node.type.schema;
+    this.dom = document.createElement("div");
+    this.dom.classList.add("mermaid-node");
+    this._htmlRenderElt = document.createElement("p");
+    this._htmlRenderElt.textContent = "";
+    this._htmlRenderElt.classList.add("html-node-render");
+    const label = document.createElement("span");
+    label.innerHTML = `<i class="ri-expand-left-right-line"></i> mermaid`;
+    label.classList.add("html-node-label");
+    this.dom.appendChild(label);
+    this.dom.appendChild(this._htmlRenderElt);
+    this._htmlSrcElt = document.createElement("span");
+    this._htmlSrcElt.classList.add("mermaid-src", "node-hide");
+    this.languageConf = new Compartment3();
+    this.dom.appendChild(this._htmlSrcElt);
+    label.addEventListener("click", () => this.ensureFocus());
+    label.addEventListener("click", () => this.ensureFocus());
+    this.dom.addEventListener("mouseenter", this.handleMouseEnter);
+    this.dom.addEventListener("mouseleave", this.handleMouseLeave);
+    this.renderHtml();
+    eventBus.on("change-theme", this.changeTheme);
+  }
+  ensureFocus() {
+    if (this._outerView.hasFocus()) {
+      if (this._innerView) {
+        this._innerView.focus();
+      } else {
+        this.openEditor();
+      }
+    }
+  }
+  update(node) {
+    this._node = node;
+    return !!this.mfCodemirrorView?.update(node);
+  }
+  // == Events ===================================== //
+  selectNode() {
+    if (!this.mfCodemirrorView?.updating) {
+      this.openEditor();
+    }
+  }
+  deselectNode() {
+    if (this.mfCodemirrorView?.updating) {
+      this.closeEditor();
+    }
+  }
+  stopEvent() {
+    return true;
+  }
+  renderHtml() {
+    console.log("render", this._node);
+    if (!this._htmlRenderElt) {
+      return;
+    }
+    const content = this.mfCodemirrorView?.content || this._node.textContent;
+    try {
+      this._htmlRenderElt.innerHTML = "";
+      this._htmlRenderElt.classList.remove("node-hide");
+      this._htmlRenderElt.classList.add("node-show");
+      renderCount.count++;
+      const id2 = `mermaid-${renderCount.count}`;
+      mermaid.render(id2, content).then(({ svg, bindFunctions }) => {
+        if (!this._htmlRenderElt) {
+          return;
+        }
+        this._htmlRenderElt.innerHTML = svg;
+        bindFunctions?.(this._htmlRenderElt);
+      }).catch((err) => {
+        document.getElementById("d" + id2)?.remove();
+        console.error("\u6E32\u67D3\u5931\u8D25:", id2, err);
+      });
+    } catch (err) {
+    }
+  }
+  // == Inner Editor ================================== /
+  setSelection(anchor, head) {
+    if (!this._innerView) {
+      this.openEditor();
+      this.mfCodemirrorView.setSelection(anchor, head);
+    } else {
+      this.mfCodemirrorView?.setSelection(anchor, head);
+    }
+  }
+  openEditor() {
+    if (this._innerView) {
+      throw Error("inner view should not exist!");
+    }
+    this.mfCodemirrorView = new MfCodemirrorView({
+      view: this._outerView,
+      node: this._node,
+      getPos: this._getPos,
+      languageName: "mermaid",
+      extensions: [minimalSetup],
+      options: {
+        useProsemirrorHistoryKey: true,
+        codemirrorEditorViewConfig: {
+          parent: this._htmlSrcElt
+        }
+      }
+    });
+    this._htmlSrcElt.classList.remove("node-hide");
+    this._innerView = this.mfCodemirrorView.cm;
+    this._htmlRenderElt?.classList.add("node-hide");
+    const prevCursorPos = this._node.textContent.length || 0;
+    this.setSelection(prevCursorPos, prevCursorPos);
+    this._innerView.focus();
+    this._innerView.contentDOM.addEventListener("blur", () => {
+      if (this.destroying) return;
+      this.closeEditor(true);
+    });
+    this.mfCodemirrorView.forwardSelection();
+  }
+  destroy() {
+    this.destroying = true;
+    this.closeEditor(false);
+    if (this._htmlRenderElt) {
+      this._htmlRenderElt.remove();
+      delete this._htmlRenderElt;
+    }
+    if (this._htmlSrcElt) {
+      this._htmlSrcElt.remove();
+      this._htmlSrcElt = null;
+    }
+    this.dom.removeEventListener("mouseenter", this.handleMouseEnter);
+    this.dom.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.dom.remove();
+    eventBus.detach("change-theme", this.changeTheme);
+  }
+  closeEditor(render = true) {
+    if (this._innerView) {
+      this._innerView.destroy();
+      this._innerView = void 0;
+    }
+    if (this.mfCodemirrorView) {
+      this.mfCodemirrorView.destroy();
+      this.mfCodemirrorView = void 0;
+    }
+    if (render) {
+      this.renderHtml();
+    }
+  }
+};
+
+// src/editor/extensions/Mermaid/mermaid-extension.ts
+import { TextSelection as TextSelection6 } from "@remirror/pm/state";
+var MermaidBlockExtension = class extends NodeExtension6 {
+  get name() {
+    return "mermaid_node";
+  }
+  createNodeSpec(extra, override) {
+    return {
+      group: "block",
+      content: "text*",
+      defining: true,
+      ...override,
+      code: true,
+      marks: "",
+      attrs: {
+        ...extra.defaults()
+      },
+      parseDOM: [
+        {
+          tag: "pre",
+          getAttrs: (node) => isElementDomNode4(node) ? extra.parse(node) : false
+        },
+        ...override.parseDOM ?? []
+      ],
+      toDOM() {
+        return ["pre", { "data-type": "mermaid" }, 0];
+      },
+      isolating: true
+    };
+  }
+  createNodeViews() {
+    return (node, view, getPos) => {
+      return new MermaidNodeView(node, view, getPos);
+    };
+  }
+  createInputRules() {
+    const rules = [
+      nodeInputRule6({
+        regexp: /^```mermaid$/,
+        type: this.type,
+        beforeDispatch: ({ tr, start, match }) => {
+          const $pos = tr.doc.resolve(start);
+          tr.setSelection(TextSelection6.near($pos));
+        }
+      })
+    ];
+    return rules;
+  }
+  createKeymap() {
+    return {
+      ArrowLeft: arrowHandler("left"),
+      ArrowRight: arrowHandler("right"),
+      ArrowUp: arrowHandler("up"),
+      ArrowDown: arrowHandler("down")
+    };
+  }
+  fromMarkdown() {
+    return [
+      {
+        type: 2 /* block */,
+        token: "mermaid_node",
+        node: this.name,
+        hasOpenClose: false
+      }
+    ];
+  }
+  toMarkdown({ state, node }) {
+    state.write("```mermaid\n");
+    state.text(node.textContent, false);
+    state.text("\n");
+    state.write("```");
+    state.closeBlock(node);
+    state.ensureNewLine();
+  }
+};
+
 // src/editor/extensions/index.ts
 function extensions({ handleViewImgSrcUrl }) {
   return [
@@ -18253,7 +18543,8 @@ function extensions({ handleViewImgSrcUrl }) {
     new DropCursorExtension({}),
     new SlashMenuExtension(),
     new LineInlineMarkExtension(),
-    new LineInlineDecorationExtension()
+    new LineInlineDecorationExtension(),
+    new MermaidBlockExtension({})
   ];
 }
 var extensions_default = extensions;
@@ -19242,15 +19533,15 @@ import {
   command as command4,
   extension as extension9,
   findParentNodeOfType as findParentNodeOfType5,
-  isElementDomNode as isElementDomNode4,
+  isElementDomNode as isElementDomNode5,
   isEqual,
   isTextSelection as isTextSelection3,
   keyBinding as keyBinding2,
-  NodeExtension as NodeExtension6,
-  nodeInputRule as nodeInputRule6,
+  NodeExtension as NodeExtension7,
+  nodeInputRule as nodeInputRule7,
   setBlockType as setBlockType2
 } from "@remirror/core";
-import { TextSelection as TextSelection6 } from "@remirror/pm/state";
+import { TextSelection as TextSelection7 } from "@remirror/pm/state";
 
 // src/editor/extensions/CodeMirror/codemirror-node-view.ts
 var CodeMirror6NodeView = class {
@@ -19308,7 +19599,7 @@ var CodeMirror6NodeView = class {
 // src/editor/extensions/CodeMirror/codemirror-extension.ts
 import { languages as languages3 } from "@codemirror/language-data";
 var fakeIndentedLanguage = "indent-code";
-var LineCodeMirrorExtension = class extends NodeExtension6 {
+var LineCodeMirrorExtension = class extends NodeExtension7 {
   get name() {
     return "codeMirror";
   }
@@ -19328,7 +19619,7 @@ var LineCodeMirrorExtension = class extends NodeExtension6 {
       parseDOM: [
         {
           tag: "pre",
-          getAttrs: (node) => isElementDomNode4(node) ? extra.parse(node) : false
+          getAttrs: (node) => isElementDomNode5(node) ? extra.parse(node) : false
         },
         ...override.parseDOM ?? []
       ],
@@ -19367,18 +19658,18 @@ var LineCodeMirrorExtension = class extends NodeExtension6 {
    * when typing triple back tick followed by a space.
    */
   createInputRules() {
-    const regexp = /^```(\S+) $/;
+    const regexp = /^```(?!mermaid)(\S*) $/;
     const getAttributes = (match) => {
       const language = match[1] ?? "";
       return { language };
     };
     return [
-      nodeInputRule6({
+      nodeInputRule7({
         regexp,
         type: this.type,
         beforeDispatch: ({ tr, start }) => {
           const $pos = tr.doc.resolve(start);
-          tr.setSelection(TextSelection6.near($pos));
+          tr.setSelection(TextSelection7.near($pos));
         },
         getAttributes
       })
@@ -19407,7 +19698,7 @@ var LineCodeMirrorExtension = class extends NodeExtension6 {
     const pos = tr.selection.$from.before();
     const end = pos + nodeSize2 + 1;
     tr.replaceWith(pos, end, this.type.create({ language }));
-    tr.setSelection(TextSelection6.near(tr.doc.resolve(pos + 1)));
+    tr.setSelection(TextSelection7.near(tr.doc.resolve(pos + 1)));
     if (dispatch) {
       dispatch(tr);
     }
@@ -19626,7 +19917,7 @@ import { useHelpers, useKeymap, useRemirrorContext as useRemirrorContext4, useCo
 
 // src/editor/components/ThemeProvider.tsx
 import { ThemeProvider as ScThemeProvider } from "styled-components";
-import { useEffect as useEffect7 } from "react";
+import { memo as memo8, useEffect as useEffect7 } from "react";
 
 // src/editor/i18n/index.ts
 import i18next from "i18next";
@@ -19669,8 +19960,9 @@ function changeLng(lng) {
 }
 
 // src/editor/components/ThemeProvider.tsx
+import mermaid2 from "mermaid";
 import { jsx as jsx20 } from "react/jsx-runtime";
-var ThemeProvider = ({ theme, i18n, children }) => {
+var ThemeProvider = memo8(({ theme, i18n, children }) => {
   const mode = theme?.mode || "light";
   const defaultThemeToken = mode === "dark" ? darkTheme.styledConstants : lightTheme.styledConstants;
   const themeToken = theme?.token ? { ...defaultThemeToken, ...theme.token } : defaultThemeToken;
@@ -19686,16 +19978,95 @@ var ThemeProvider = ({ theme, i18n, children }) => {
   useEffect7(() => {
     const codemirrorTheme = theme?.codemirrorTheme || mode === "dark" ? darkTheme.codemirrorTheme : lightTheme.codemirrorTheme;
     changeTheme(codemirrorTheme);
+    mermaid2.initialize({
+      theme: mode === "dark" ? "dark" : "default"
+    });
+    eventBus.emit("change-theme");
   }, [mode, theme?.codemirrorTheme, changeTheme]);
   return /* @__PURE__ */ jsx20(ScThemeProvider, { theme: themeToken, children });
-};
+});
 
 // src/editor/components/Preview/preview.tsx
-import { prosemirrorNodeToHtml as prosemirrorNodeToHtml2 } from "remirror";
-import HTML3 from "html-parse-stringify";
 import { useEffect as useEffect8, useState as useState9 } from "react";
-import { nanoid as nanoid4 } from "nanoid";
 import { Icon } from "zens";
+
+// src/editor/utils/prosemirrorNodeToHtml.ts
+import HTML3 from "html-parse-stringify";
+import { prosemirrorNodeToHtml as prosemirrorNodeToHtml2 } from "remirror";
+import { nanoid as nanoid4 } from "nanoid";
+import mermaid3 from "mermaid";
+var handlerByAdditions = {
+  img: [
+    {
+      checker: (node, delegateOptions) => {
+        return node.name === "img" && node.attrs?.src && delegateOptions?.handleViewImgSrcUrl;
+      },
+      handler: async (node, delegateOptions) => {
+        node.attrs.src = await delegateOptions?.handleViewImgSrcUrl?.(node.attrs.src);
+        node.attrs.key = nanoid4();
+      }
+    }
+  ],
+  pre: [
+    {
+      checker: (node) => {
+        return node.attrs["data-type"] === "mermaid";
+      },
+      handler: async (node, delegateOptions) => {
+        let textContent = node.children?.[0]?.content || "";
+        const dom = document.createElement("div");
+        dom.innerHTML = textContent;
+        textContent = dom.textContent || "";
+        const res = await mermaid3.render(
+          `mermaid_${previewMermaidRenderCount.count++}`,
+          textContent
+        );
+        const svgAst = HTML3.parse(res.svg);
+        node.name = "div";
+        node.attrs = {
+          key: nanoid4()
+        };
+        node.children = svgAst;
+      }
+    }
+  ]
+};
+var previewMermaidRenderCount = { count: 0 };
+var rmeProsemirrorNodeToHtml = async (doc, delegateOptions) => {
+  const html2 = prosemirrorNodeToHtml2(doc);
+  const fullAst = HTML3.parse(html2);
+  const imageLoadTasks = [];
+  const handleHtmlText = (ast) => {
+    const handleNode = (node) => {
+      if (!node) {
+        return;
+      }
+      const handlerByAddition = handlerByAdditions[node.name];
+      if (handlerByAddition) {
+        for (const handler of handlerByAddition) {
+          if (handler.checker(node, delegateOptions)) {
+            imageLoadTasks.push(handler.handler(node, delegateOptions));
+          }
+        }
+      }
+      if (node.children) {
+        handleHtmlText(node.children);
+      }
+    };
+    for (let i = 0; i < ast.length; i++) {
+      handleNode(ast[i]);
+    }
+  };
+  handleHtmlText(fullAst);
+  try {
+    await Promise.all(imageLoadTasks);
+    return HTML3.stringify(fullAst);
+  } catch (error) {
+    return html2;
+  }
+};
+
+// src/editor/components/Preview/preview.tsx
 import { jsx as jsx21 } from "react/jsx-runtime";
 var Preview = (props) => {
   const { doc, delegateOptions } = props;
@@ -19704,38 +20075,14 @@ var Preview = (props) => {
   if (typeof targetDoc === "string") {
     targetDoc = createWysiwygDelegate(delegateOptions).stringToDoc(targetDoc);
   }
-  const html2 = prosemirrorNodeToHtml2(targetDoc);
   useEffect8(() => {
-    const fullAst = HTML3.parse(html2);
-    const imageLoadTasks = [];
-    const handleHtmlText = async (ast) => {
-      const handleNode = (node) => {
-        if (!node) {
-          return;
-        }
-        if (node.name === "img" && node.attrs?.src && delegateOptions?.handleViewImgSrcUrl) {
-          imageLoadTasks.push(
-            (async () => {
-              node.attrs.src = await delegateOptions?.handleViewImgSrcUrl?.(node.attrs.src);
-              node.attrs.key = nanoid4();
-            })()
-          );
-        }
-        if (node.children) {
-          handleHtmlText(node.children);
-        }
-      };
-      for (let i = 0; i < ast.length; i++) {
-        handleNode(ast[i]);
-      }
-    };
-    handleHtmlText(fullAst);
-    Promise.all(imageLoadTasks).then((res) => {
-      setProcessedHtml(HTML3.stringify(fullAst));
-    }).catch(() => {
+    rmeProsemirrorNodeToHtml(targetDoc, delegateOptions).then((html2) => {
       setProcessedHtml(html2);
+    }).catch((e) => {
+      props.onError?.(e);
+      console.error(e);
     });
-  }, [html2]);
+  }, [props.onError]);
   if (!processedHtml) {
     return /* @__PURE__ */ jsx21(
       "div",