fix: btoa utf8 encode

Author: WindRunnerMax

.stylelintrc.js

@@ -1,26 +1,26 @@
 module.exports = {
-  extends:[
-    "stylelint-config-standard",
-  ],
+  extends: ["stylelint-config-standard"],
   ignoreFiles: [
-    "**/node_modules/**/*.*", 
-    "**/dist/**/*.*", 
-    "**/build/**/*.*", 
-    "**/coverage/**/*.*", 
-    "**/public/**/*.*"
+    "**/node_modules/**/*.*",
+    "**/dist/**/*.*",
+    "**/build/**/*.*",
+    "**/coverage/**/*.*",
+    "**/public/**/*.*",
   ],
-  rules:{
+  rules: {
     "no-descending-specificity": null,
     "color-function-notation": null,
     "alpha-value-notation": null,
     "no-empty-source": null,
     "max-nesting-depth": 6,
     "selector-max-compound-selectors": 6,
     "selector-class-pattern": null,
-    "selector-pseudo-class-no-unknown": [true, {
-        "ignorePseudoClasses": ["global"]
-      }
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["global"],
+      },
     ],
-    "selector-no-qualifying-type": null
-  }
-}
+    "selector-no-qualifying-type": null,
+  },
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "embed-drawio",
-  "version": "0.1.5",
+  "version": "0.1.10",
   "files": [
     "dist",
     "pnpm-lock.yaml"
@@ -25,6 +25,7 @@
     "lint:circular": "madge --extensions js,jsx --circular ./dist"
   },
   "dependencies": {
+    "js-base64": "3.7.7",
     "laser-utils": "0.0.5-alpha.10",
     "mxgraph": "4.2.2",
     "pako": "1.0.6",

pnpm-lock.yaml

@@ -1,3 +1,3 @@
-npm version patch --no-git-tag-version
+# npm version patch --no-git-tag-version
 npm run build:dist
 npm publish --registry=https://registry.npmjs.org/ 

publish.sh

@@ -1,6 +1,7 @@
 import { mxImage } from "../../core/mxgraph";
 import { refreshTarget } from "../images/base64";
 import { GRAPH } from "./constant";
+import { Base64 } from "js-base64";
 
 export const createSvgImage = (
   w: number,
@@ -18,7 +19,7 @@ export const createSvgImage = (
       }${w}px" height="${h}px" ${viewBox} version="1.1">${data}</svg>`
     )
   );
-  return new mxImage(`data:image/svg+xml;base64,${btoa(tmp)}`, w, h);
+  return new mxImage(`data:image/svg+xml;base64,${Base64.encode(tmp)}`, w, h);
 };
 
 export const TRIANGLE_UP_IMAGE = createSvgImage(

src/editor/utils/graph.ts

@@ -29,7 +29,7 @@ export const convertXMLToSVG = (
     svg.setAttribute("xmlns", XMLNS);
     svg.setAttribute("width", bounds.width.toString());
     svg.setAttribute("height", bounds.height.toString());
-    svg.setAttribute("viewBox", "0 0 " + bounds.width + " " + bounds.height);
+    svg.setAttribute("viewBox", `0 0 ${bounds.width} ${bounds.height}`);
     svg.setAttribute("version", "1.1");
     const canvas = new mxSvgCanvas2D(svg);
     canvas.translate(-bounds.x, -bounds.y);

src/utils/convert.ts

@@ -1,5 +1,6 @@
 import { isString } from "laser-utils/dist/es/is";
 import type { Func } from "laser-utils/dist/es/types";
+import { Base64 } from "js-base64";
 
 export const svgToString = (svg: Node | null): string | null => {
   if (!svg) return null;
@@ -24,7 +25,7 @@ export const stringToSvg = (str: string): SVGElement | null => {
 
 export const base64ToSvgString = (base64: string): string | null => {
   try {
-    const svg = atob(base64.replace("data:image/svg+xml;base64,", ""));
+    const svg = Base64.decode(base64.replace("data:image/svg+xml;base64,", ""));
     return svg;
   } catch (error) {
     console.log("base64ToSvgString Error: ", error);
@@ -35,7 +36,7 @@ export const base64ToSvgString = (base64: string): string | null => {
 export const svgToBase64 = (svg: string | SVGElement): string | null => {
   const svgString = isString(svg) ? svg : svgToString(svg);
   if (svgString) {
-    return `data:image/svg+xml;base64,${btoa(svgString)}`;
+    return `data:image/svg+xml;base64,${Base64.encode(svgString)}`;
   }
   return null;
 };