@ones-editor/editor 0.0.9-beta.7 → 0.0.9-beta.8

package/dist/index.js

@@ -2126,8 +2126,8 @@ div.editor-root:not(.readonly) div.editor-content div[data-type=editor-container
 div.editor-root div.editor-content div[data-type=editor-container] div[data-type=editor-block] div[data-type=block-content] > span.math-box .mathjax-tex-text.mathjax-error {
   color: var(--color-0);
 }
-div.editor-root div.editor-content div[data-type=editor-container] div[data-type=editor-block] div[data-type=block-content] img.mathjax {
-  max-width: 100%;
+div.editor-root div.editor-content div[data-type=editor-container] .embed-block.selected[data-embed-type=math] > div[data-type=block-content].mathjax-overflow::before {
+  width: var(--mathjax-width, "100%");
 }
 div.editor-root div.editor-content div[data-type=editor-container] .embed-block[data-embed-type=math] > div[data-type=block-content] {
   align-items: center;
@@ -44165,6 +44165,8 @@ var __publicField = (obj, key, value) => {
   }
   const logger$1x = getLogger("mathjax-converter");
   const MATHJAX_SCRIPT_ID = "MathJax-script";
+  const MATHJAX_BUFFER = 30;
+  const REDUCED_UNIT = 8;
   async function initMathjax(editor) {
     var _a;
     if (!window.MathJax) {
@@ -44216,6 +44218,23 @@ var __publicField = (obj, key, value) => {
       lockers.release(lockId);
     }
   }
+  function analyzeMathjaxSvgWidth(svg) {
+    const dom = new DOMParser().parseFromString(svg, "image/svg+xml");
+    const expect = {
+      width: 0,
+      height: 0
+    };
+    if (dom && dom.firstChild) {
+      const svgElement = dom.firstChild;
+      const height = svgElement.getAttribute("height");
+      const width = svgElement.style.minWidth;
+      if (height) {
+        expect.width = parseInt(width, 10) * REDUCED_UNIT + MATHJAX_BUFFER;
+        expect.height = parseInt(height, 10) * REDUCED_UNIT;
+      }
+    }
+    return expect;
+  }
   async function mathjax2DataUrl(editor, tex) {
     const svg = await mathjax2Svg(editor, tex);
     if (!svg)
@@ -44230,6 +44249,17 @@ var __publicField = (obj, key, value) => {
     const path = await editor.doc.uploadResource(file2);
     return path.resourceId;
   }
+  async function convertAndUploadMathjaxForEmbed(editor, tex) {
+    const svg = await mathjax2Svg(editor, tex);
+    const perfectState = analyzeMathjaxSvgWidth(svg);
+    const data = svg;
+    const file2 = new File([data], "math.svg");
+    const path = await editor.doc.uploadResource(file2);
+    return {
+      resourceId: path.resourceId,
+      ...perfectState
+    };
+  }
   const logger$1w = getLogger("edit-mathjax");
   class MathjaxEditor {
     constructor() {
@@ -44262,15 +44292,17 @@ var __publicField = (obj, key, value) => {
         (_a = this.onChange) == null ? void 0 : _a.call(this, text2, false);
       }, 300));
     }
-    editMathjax(elem, tex, onChange) {
+    editMathjax(elem, tex, onChange, options) {
       if (!this.editMathjaxPopup) {
-        this.editMathjaxPopup = new Popup(this.createPopupContent(tex));
+        this.editMathjaxPopup = new Popup(this.createPopupContent(tex), {
+          id: "mathjax-popover"
+        });
       } else {
         const textarea2 = this.getTextarea();
         textarea2.value = tex;
       }
       this.tex = tex;
-      this.editMathjaxPopup.manualShow(elem, { theme: "light" });
+      this.editMathjaxPopup.manualShow(elem, { theme: "light", placement: options == null ? void 0 : options.placement });
       this.editMathjaxPopup.removeAllListeners("close");
       this.editMathjaxPopup.addListener("close", this.handleClose);
       this.onChange = onChange;
@@ -44311,9 +44343,9 @@ var __publicField = (obj, key, value) => {
       (_b = this.editMathjaxPopup) == null ? void 0 : _b.removeAllListeners();
     }
   }
-  function editMathjax(editor, elem, tex, onChange) {
+  function editMathjax(editor, elem, tex, onChange, options) {
     const mathjaxEditor = editor.addCustom("mathjax-editor", () => new MathjaxEditor());
-    mathjaxEditor.editMathjax(elem, tex.trim(), onChange);
+    mathjaxEditor.editMathjax(elem, tex.trim(), onChange, options);
   }
   function createEmptyMathjaxBox() {
     const id = genId();
@@ -44526,25 +44558,45 @@ var __publicField = (obj, key, value) => {
     const data = editor.getBlockData(block);
     const embedData = data.embedData;
     editMathjax(editor, elem, embedData.mathjaxText, async (tex) => {
-      const src = await convertAndUploadMathjax(editor, tex);
+      const { resourceId: src, width, height } = await convertAndUploadMathjaxForEmbed(editor, tex);
       const newData = {
         mathjaxText: tex,
-        src
+        src,
+        width,
+        height
       };
       editor.updateEmbedData(block, newData);
+    }, {
+      placement: "bottom"
     });
   }
   function createEmbedContent$9(editor, content, block) {
     const mathData = block.embedData;
+    const { src, width } = mathData;
     const state = editor.addCustom(`mathjax-block-${block.id}`, () => new MathjaxStateData());
     editor.domEvents.addEventListener(content, "click", handleClickContent);
     if (!mathData.mathjaxText.trim()) {
       createElement("span", ["mathjax-tex-text"], content, i18n$1.t("mathjax.emptyText"));
       return;
     }
-    if (mathData.src || state.dataUrl) {
+    if (src || state.dataUrl) {
       const img = createElement("img", ["mathjax"], content);
-      img.src = editor.doc.buildResourceUrl(mathData.src || state.dataUrl);
+      img.src = editor.doc.buildResourceUrl(src || state.dataUrl);
+      if (width) {
+        img.style.minWidth = `${width}px`;
+        setTimeout(() => {
+          const contentWidth = content.getBoundingClientRect().width;
+          if (width > contentWidth) {
+            addClass(content, "mathjax-overflow");
+            content.style.overflow = "auto";
+            content.style.setProperty("--mathjax-width", `${width}px`);
+          } else {
+            removeClass(content, "mathjax-overflow");
+            content.removeAttribute("data-mathjax-width");
+            content.style.removeProperty("--mathjax-width");
+          }
+        });
+      }
       return;
     }
     if (state.error)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ones-editor/editor",
-  "version": "0.0.9-beta.7",
+  "version": "0.0.9-beta.8",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",