@ones-editor/editor 0.0.9-beta.6 → 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;
@@ -21492,6 +21492,62 @@ var __publicField = (obj, key, value) => {
     }
     return markdown;
   }
+  function styleColorToColor$1(color) {
+    switch (color) {
+      case "style-color-0":
+        return "#e52727";
+      case "style-color-1":
+        return "#eb6414";
+      case "style-color-2":
+        return "#f0a100";
+      case "style-color-3":
+        return "#24b47e";
+      case "style-color-4":
+        return "#0064ff";
+      case "style-color-5":
+        return "#9678d3";
+      case "style-color-6":
+        return "#909090";
+      default:
+        return void 0;
+    }
+  }
+  function styleBackgroundColorToHighlight$1(color) {
+    switch (color) {
+      case "style-bg-color-0":
+        return "#fad4d4";
+      case "style-bg-color-1":
+        return "#fbe0d0";
+      case "style-bg-color-2":
+        return "#fceccc";
+      case "style-bg-color-3":
+        return "#d3f0e5";
+      case "style-bg-color-4":
+        return "#d6e9fa";
+      case "style-bg-color-5":
+        return "#eae4f6";
+      case "style-bg-color-6":
+        return "#dedede";
+      case "style-bg-color-7":
+        return "#e52727";
+      case "style-bg-color-8":
+        return "#eb6414";
+      case "style-bg-color-9":
+        return "#f0a100";
+      case "style-bg-color-10":
+        return "#24b47e";
+      case "style-bg-color-11":
+        return "#0064ff";
+      case "style-bg-color-12":
+        return "#9678d3";
+      case "style-bg-color-13":
+        return "#909090";
+      case "style-bg-color-14":
+        return "#e8e8e8";
+      default:
+        return void 0;
+    }
+  }
   const logger$3h = getLogger("block-to-text");
   function textBlockToHtml(editor, ops, doc2) {
     let html = "";
@@ -21513,27 +21569,48 @@ var __publicField = (obj, key, value) => {
       const attributes = op.attributes;
       if (attributes) {
         let string = op.insert;
-        if (attributes.link) {
-          string = `<a href="${attributes.link}">${string}</a>`;
-        }
         const tags = [];
-        if (attributes.bold) {
+        let styles = "";
+        if (attributes["style-bold"]) {
           tags.push("strong");
         }
-        if (attributes.italic) {
+        if (attributes["style-italic"]) {
           tags.push("em");
         }
-        if (attributes.underline) {
+        if (attributes["style-underline"]) {
           tags.push("u");
         }
-        if (attributes.strike) {
+        if (attributes["style-strikethrough"]) {
           tags.push("s");
         }
-        if (attributes.code) {
+        if (attributes["style-code"]) {
           tags.push("code");
         }
-        const prefix = tags.map((s) => `<${s}>`).join("");
-        const suffix = tags.reverse().map((s) => `</${s}>`).join("");
+        const fontBgColor = Object.keys(attributes).find((k) => k.startsWith("style-bg-color-"));
+        if (fontBgColor) {
+          styles += `background-color: ${styleBackgroundColorToHighlight$1(fontBgColor)};`;
+        }
+        const fontColor = Object.keys(attributes).find((k) => k.startsWith("style-color-"));
+        if (fontColor) {
+          styles += `color: ${styleColorToColor$1(fontColor)};`;
+        }
+        if (attributes.link) {
+          string = `<a href="${attributes.link}">${string}</a>`;
+        }
+        let prefix = tags.map((s) => `<${s}>`).join("");
+        let suffix = tags.reverse().map((s) => `</${s}>`).join("");
+        if (styles) {
+          if (attributes.link) {
+            string = `<a href="${attributes.link}" style="${styles}">${op.insert}</a>`;
+          } else {
+            if (prefix) {
+              prefix = prefix.replace(">", ` style="${styles}">`);
+            } else {
+              prefix = `<span style="${styles}">`;
+              suffix = "</span>";
+            }
+          }
+        }
         html += prefix + string + suffix;
         return;
       }
@@ -23352,6 +23429,9 @@ var __publicField = (obj, key, value) => {
             const currentBlock = editor.getBlockByIndex(containerId, blockIndex2);
             if (currentBlock && isTextKindBlock(editor, currentBlock) && isEmptyTextBlock(editor, currentBlock) && blocks[i].type === "text") {
               editor.insertTextToBlock(block, 0, (_a = blocks[i].text) != null ? _a : []);
+              if (Object.prototype.hasOwnProperty.call(blocks[i], "heading")) {
+                editor.updateBlockData(currentBlock, blocks[i]);
+              }
               continue;
             }
             if (isTitleBlock$2(currentBlock)) {
@@ -44085,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) {
@@ -44136,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)
@@ -44150,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() {
@@ -44182,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;
@@ -44231,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();
@@ -44446,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)
@@ -55617,8 +55749,9 @@ ${codeText}
         if (html.indexOf("<ones-editor-doc") > 0) {
           return false;
         }
+        const text2 = data.getData("text/plain");
         const images = getImages(files);
-        if (images.length > 0) {
+        if (images.length > 0 && !text2) {
           if (!docs["text/office-html"]) {
             await this.handleInsertImages(editor, images);
             return true;
@@ -59754,7 +59887,11 @@ ${codeText}
         }
         return this._commands;
       }
-      return this._commands.filter((command) => command.id !== "to-link" && command.id !== "to-card");
+      const ret = this._commands.filter((command) => command.id !== "to-link" && command.id !== "to-card");
+      if (ret[ret.length - 1].id === "sep") {
+        ret.pop();
+      }
+      return ret;
     }
     executeCommand(editor, block, box, item) {
       if (item.id === "to-card") {
@@ -62818,7 +62955,7 @@ ${codeText}
         return false;
       }
       const listBlockType = getListBlockType(block);
-      if (listBlockType === "ordered" || listBlockType === "unordered") {
+      if (listBlockType === "ordered" || listBlockType === "unordered" || listBlockType === "text-only") {
         return false;
       }
       return true;

package/package.json

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