feat: update diagram viewer

package.json

@@ -28,7 +28,7 @@
     "eslint-plugin-prettier": "3.3.1",
     "eslint-plugin-react": "7.27.0",
     "eslint-plugin-react-hooks": "4.3.0",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-simple-import-sort": "10.0.0",
     "postcss": "8.3.3",
     "prettier": "2.4.1",
     "sass": "1.52.3",

packages/plugin/package.json

@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "react-live-runtime": "0.0.3",
-    "embed-drawio": "0.0.18",
+    "embed-drawio": "0.1.5",
     "lodash-es": "4.17.21",
     "prismjs": "1.29.0",
     "doc-editor-core": "workspace: *",

packages/plugin/src/flow-chart/components/viewer.tsx

@@ -9,7 +9,7 @@ import { useEffect, useRef, useState } from "react";
 
 import { SelectionWrapper } from "../../shared/modules/selection";
 import { FLOW_CHART_KEY } from "../types";
-import { diagramDownload, diagramEditor, diagramPreview, getSvg } from "../utils/diagram-loader";
+import { diagramDownload, diagramPreview, getSvg, makeEditor } from "../utils/loader";
 import { xmlToString } from "../utils/utils";
 import { PreviewWrapper } from "./preview";
 
@@ -26,35 +26,33 @@ export const DocFLowChart: React.FC<{
   useEffect(() => {
     if (props.config.content) {
       const content = props.config.content;
-      const render = () => {
-        getSvg(content).then(svg => {
-          const div = container.current;
-          if (div && svg) {
-            div.childNodes.forEach(node => div.removeChild(node));
-            div.appendChild(svg);
-            setLoading(false);
-          }
-        });
-      };
-      render();
+      (async () => {
+        const svg = await getSvg(content);
+        const div = container.current;
+        if (div && svg) {
+          div.childNodes.forEach(node => div.removeChild(node));
+          div.appendChild(svg);
+          setLoading(false);
+        }
+      })();
     } else {
       setLoading(false);
     }
   }, [props.config.content, props.readonly]);
 
   const startEdit = () => {
     setEditorLoading(true);
-    diagramEditor("zh", props.config.content, (xml: Node) => {
+    const onChange = (xml: Node) => {
       const str = xmlToString(xml);
-      if (str) {
-        const path = ReactEditor.findPath(props.editor.raw, props.element);
-        setBlockNode(
-          props.editor.raw,
-          { [FLOW_CHART_KEY]: { type: "xml", content: str } },
-          { at: path, key: FLOW_CHART_KEY }
-        );
-      }
-    }).then(r => {
+      if (!str) return void 0;
+      const path = ReactEditor.findPath(props.editor.raw, props.element);
+      setBlockNode(
+        props.editor.raw,
+        { [FLOW_CHART_KEY]: { type: "xml", content: str } },
+        { at: path, key: FLOW_CHART_KEY }
+      );
+    };
+    makeEditor("zh", props.config.content, onChange).then(r => {
       r.start();
       setEditorLoading(false);
     });

packages/plugin/src/flow-chart/utils/loader.tsx

@@ -0,0 +1,66 @@
+import { isString } from "doc-editor-utils";
+import type { DiagramEditor } from "embed-drawio/dist/es/core/editor";
+import type { DiagramViewer } from "embed-drawio/dist/es/core/viewer";
+import { makeSVGDownloader, svgToBase64 } from "embed-drawio/dist/es/utils/svg";
+import { stringToXml } from "embed-drawio/dist/es/utils/xml";
+
+let editor: typeof DiagramEditor | null = null;
+export const loadEditor = async (): Promise<typeof DiagramEditor> => {
+  if (editor) return Promise.resolve(editor);
+  const res = await Promise.all([
+    import(/* webpackChunkName: "embed-drawio-editor" */ "embed-drawio/dist/es/core/editor"),
+    // @ts-expect-error css declaration
+    import(/* webpackChunkName: "embed-drawio-css" */ "embed-drawio/dist/es/index.css"),
+  ]);
+  editor = res[0].DiagramEditor;
+  return editor;
+};
+
+let viewer: typeof DiagramViewer | null = null;
+export const loadViewer = async (): Promise<typeof DiagramViewer> => {
+  if (viewer) return Promise.resolve(viewer);
+  const res = await Promise.all([
+    import(/* webpackChunkName: "embed-drawio-viewer" */ "embed-drawio/dist/es/core/viewer"),
+  ]);
+  viewer = res[0].DiagramViewer;
+  return viewer;
+};
+
+export const getSvg = async (xml: XMLDocument | string): Promise<SVGElement | null> => {
+  const Viewer = await loadViewer();
+  const xmlDoc = isString(xml) ? stringToXml(xml) : xml;
+  const viewer = new Viewer(xmlDoc);
+  const svg = viewer.renderSVG(null, 1, 1);
+  viewer.destroy();
+  return svg;
+};
+
+export const makeEditor = async (
+  lang: "en" | "zh",
+  init: string | null,
+  onSave: (xml: Element) => void
+): Promise<{ start: () => void }> => {
+  const Editor = await loadEditor();
+  const onExit = () => editor.exit();
+  const editor = new Editor(document.body, onExit);
+  const intl = await Editor.getLang(lang);
+  return {
+    start: () => {
+      editor.start(intl, init ? stringToXml(init) : null, onSave);
+    },
+  };
+};
+
+export const diagramPreview = async (xml: string) => {
+  const Viewer = await loadViewer();
+  const svg = Viewer.xmlToSvg(stringToXml(xml), "#fff");
+  return svg && svgToBase64(svg);
+};
+
+export const diagramDownload = async (xml: string) => {
+  const Viewer = await loadViewer();
+  const svg = Viewer.xmlToSvg(stringToXml(xml), null);
+  if (!svg) return void 0;
+  const func = await makeSVGDownloader(svg);
+  func && func();
+};