@ones-editor/editor 2.1.7-beta.37 → 2.1.7-beta.38

package/dist/index.js

@@ -10414,9 +10414,9 @@ var __publicField = (obj, key, value) => {
     const fontStyle = style2.getPropertyValue("font-style");
     const fontVariant = style2.getPropertyValue("font-variant");
     const fontWeight = style2.getPropertyValue("font-weight");
-    const fontSize = style2.getPropertyValue("font-size");
+    const fontSize2 = style2.getPropertyValue("font-size");
     const fontFamily = style2.getPropertyValue("font-family");
-    elementFont = `${fontStyle} ${fontVariant} ${fontWeight} ${fontSize} ${fontFamily}`.replace(/ +/g, " ").trim();
+    elementFont = `${fontStyle} ${fontVariant} ${fontWeight} ${fontSize2} ${fontFamily}`.replace(/ +/g, " ").trim();
     return elementFont;
   }
   function getTextWidth(text2, font) {
@@ -10839,13 +10839,13 @@ var __publicField = (obj, key, value) => {
   function replaceAllCaseInsensitive(str, find, replace) {
     return str.replace(new RegExp(escapeRegExp(find), "gi"), replace);
   }
-  function overflowText(text2, fontSize, maxwidth) {
+  function overflowText(text2, fontSize2, maxwidth) {
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
     if (!ctx) {
       return null;
     }
-    ctx.font = String(fontSize);
+    ctx.font = String(fontSize2);
     const metrics = ctx.measureText(text2);
     if (metrics.width > maxwidth) {
       let i = 0;
@@ -14326,8 +14326,8 @@ var __publicField = (obj, key, value) => {
     } else if (lineHeightStyle.endsWith("pt")) {
       lineHeight = parseFloat(lineHeightStyle) * 4 / 3;
     } else if (lineHeightStyle === "em") {
-      const fontSize = parseFloat(style2.getPropertyValue("font-size"));
-      lineHeight = fontSize * parseFloat(lineHeightStyle);
+      const fontSize2 = parseFloat(style2.getPropertyValue("font-size"));
+      lineHeight = fontSize2 * parseFloat(lineHeightStyle);
     } else {
       lineHeight = parseFloat(style2.getPropertyValue("font-size")) * 1.2;
     }
@@ -25169,6 +25169,9 @@ var __publicField = (obj, key, value) => {
           if (key === "inline-style-background-color") {
             newStyles.backgroundColor = value;
           }
+          if (key === "inline-style-font-size") {
+            newStyles.fontSize = value;
+          }
         }
       });
       return { classes, attributes: newAttributes, styles: newStyles };
@@ -72297,6 +72300,104 @@ ${codeText}
       }
     }
   }
+  function getColorValue(html, tagPrefix) {
+    const colorIndex = html.indexOf(tagPrefix);
+    if (colorIndex < 0) {
+      return -1;
+    }
+    const endIndex = html.indexOf(">", colorIndex);
+    if (endIndex < 0) {
+      return -1;
+    }
+    const colorValue = html.substring(colorIndex + tagPrefix.length, endIndex);
+    return parseInt(colorValue, 10);
+  }
+  function getColorIndexFromHtml(html, tagPrefix) {
+    const startIndex = getColorValue(html, `<${tagPrefix}`);
+    if (startIndex !== -1) {
+      return {
+        start: true,
+        color: startIndex
+      };
+    }
+    const endIndex = getColorValue(html, `</${tagPrefix}`);
+    if (endIndex !== -1) {
+      return {
+        start: false,
+        color: endIndex
+      };
+    }
+    return {
+      start: false,
+      color: -1
+    };
+  }
+  function applyColorTagToText(htm, attributes) {
+    const html = htm.toLowerCase();
+    {
+      const { start, color } = getColorIndexFromHtml(html, "color-");
+      if (color !== -1) {
+        if (start) {
+          attributes[`style-color-${color}`] = true;
+        } else {
+          delete attributes[`style-color-${color}`];
+        }
+      }
+    }
+    {
+      const { start, color } = getColorIndexFromHtml(html, "background-color-");
+      if (color !== -1) {
+        if (start) {
+          attributes[`style-bg-color-${color}`] = true;
+        } else {
+          delete attributes[`style-bg-color-${color}`];
+        }
+      }
+    }
+  }
+  function getFontSizeValue(html, tagPrefix) {
+    const sizeIndex = html.indexOf(tagPrefix);
+    if (sizeIndex < 0) {
+      return -1;
+    }
+    const endIndex = html.indexOf(">", sizeIndex);
+    if (endIndex < 0) {
+      return -1;
+    }
+    const sizeValue = html.substring(sizeIndex + tagPrefix.length, endIndex);
+    return parseInt(sizeValue, 10);
+  }
+  function getFontSizeIndexFromHtml(html, tagPrefix) {
+    const startIndex = getFontSizeValue(html, `<${tagPrefix}`);
+    if (startIndex !== -1) {
+      return {
+        start: true,
+        size: startIndex
+      };
+    }
+    const endIndex = getFontSizeValue(html, `</${tagPrefix}`);
+    if (endIndex !== -1) {
+      return {
+        start: false,
+        size: endIndex
+      };
+    }
+    return {
+      start: false,
+      size: -1
+    };
+  }
+  function applyFontSizeTagToText(htm, attributes) {
+    const html = htm.toLowerCase();
+    const { start, size } = getFontSizeIndexFromHtml(html, "font-size-");
+    if (size !== -1) {
+      if (start) {
+        attributes["inline-style-font-size"] = `${size}px`;
+      } else {
+        delete attributes["inline-style-font-size"];
+      }
+    }
+  }
   const logger$M = getLogger("token-to-text");
   function tokensToText(tokens, attributes, options) {
     const ops = tokens.map((token) => {
@@ -72332,6 +72433,9 @@ ${codeText}
       if (token.type === "html") {
         const html = token.text;
         applyHtmlToText(html, attributes);
+        applyColorTagToText(html, attributes);
+        applyFontSizeTagToText(html, attributes);
+        return [];
       }
       if (token.type === "br") {
         return [{
@@ -74107,6 +74211,142 @@ ${docStr}
       }
     });
   }
+  const COLORS = [
+    "#e52727",
+    "#eb6414",
+    "#f0a100",
+    "#24b47e",
+    "#0064ff",
+    "#9678d3",
+    "#909090"
+  ];
+  const BACKGROUND_COLORS = [
+    "#fad4d4",
+    "#fbe0d0",
+    "#fceccc",
+    "#d3f0e5",
+    "#d6e9fa",
+    "#eae4f6",
+    "#EDEFF2",
+    "#FA9287",
+    "#FF9F6B",
+    "#FFBD59",
+    "#60D1A4",
+    "#7AAFFF",
+    "#BC9BFA",
+    "#BEBFC2",
+    "#DFE1E5"
+  ];
+  function toCssColor(color) {
+    if (color.startsWith("#")) {
+      return color;
+    }
+    if (color.startsWith("rgba")) {
+      const values = color.substring(5, color.length - 1).split(",");
+      if (values.length === 4) {
+        return `#${parseInt(values[0], 10).toString(16).padStart(2, "0")}${parseInt(values[1], 10).toString(16).padStart(2, "0")}${parseInt(values[2], 10).toString(16).padStart(2, "0")}`;
+      }
+    }
+    if (color.startsWith("rgb")) {
+      const values = color.substring(4, color.length - 1).split(",");
+      if (values.length === 3) {
+        return `#${parseInt(values[0], 10).toString(16).padStart(2, "0")}${parseInt(values[1], 10).toString(16).padStart(2, "0")}${parseInt(values[2], 10).toString(16).padStart(2, "0")}`;
+      }
+    }
+    return color;
+  }
+  function getDistance(color1, color2) {
+    const c1 = color1.substring(1);
+    const c2 = color2.substring(1);
+    const r1 = parseInt(c1.substring(0, 2), 16);
+    const g1 = parseInt(c1.substring(2, 4), 16);
+    const b1 = parseInt(c1.substring(4, 6), 16);
+    const r2 = parseInt(c2.substring(0, 2), 16);
+    const g2 = parseInt(c2.substring(2, 4), 16);
+    const b2 = parseInt(c2.substring(4, 6), 16);
+    return Math.sqrt((r1 - r2) ** 2 + (g1 - g2) ** 2 + (b1 - b2) ** 2);
+  }
+  function getColorIndex(colors, color) {
+    let minDistance = Number.MAX_SAFE_INTEGER;
+    let index2 = -1;
+    for (let i = 0; i < colors.length; i += 1) {
+      const distance = getDistance(colors[i], color);
+      if (distance < minDistance) {
+        minDistance = distance;
+        index2 = i;
+      }
+    }
+    return index2;
+  }
+  function textColor(ts) {
+    ts.addRule("figcaption", {
+      filter: (node) => {
+        if (node.nodeName !== "SPAN") {
+          return false;
+        }
+        const span = node;
+        const style2 = span.style;
+        if (!style2) {
+          return false;
+        }
+        if (style2.color || style2.backgroundColor) {
+          return true;
+        }
+        return false;
+      },
+      replacement: (content, node, options) => {
+        const span = node;
+        const style2 = span.style;
+        const color = toCssColor(style2.color);
+        const backgroundColor = toCssColor(style2.backgroundColor);
+        const prefixes = [];
+        const suffixes = [];
+        if (color) {
+          const colorIndex = getColorIndex(COLORS, color);
+          prefixes.push(`<color-${colorIndex}>`);
+          suffixes.push(`</color-${colorIndex}>`);
+        }
+        if (backgroundColor) {
+          const backgroundColorIndex = getColorIndex(BACKGROUND_COLORS, backgroundColor);
+          prefixes.push(`<background-color-${backgroundColorIndex}>`);
+          suffixes.push(`</background-color-${backgroundColorIndex}>`);
+        }
+        let ret = content;
+        prefixes.forEach((prefix, index2) => {
+          ret = `${prefix}${ret}${suffixes[index2]}`;
+        });
+        return ret;
+      }
+    });
+  }
+  function fontSize(ts) {
+    ts.addRule("figcaption", {
+      filter: (node) => {
+        if (node.nodeName !== "SPAN") {
+          return false;
+        }
+        const span = node;
+        const style2 = span.style;
+        if (!style2) {
+          return false;
+        }
+        if (style2.fontSize) {
+          return true;
+        }
+        return false;
+      },
+      replacement: (content, node, options) => {
+        const span = node;
+        const style2 = span.style;
+        const fontSize2 = style2.fontSize;
+        if (fontSize2) {
+          const fontSizeValue = fontSize2.replace("px", "");
+          return `<font-size-${fontSizeValue}>${content}</font-size-${fontSizeValue}>`;
+        }
+        return content;
+      }
+    });
+  }
   const logger$K = getLogger("html-to-doc");
   const turndownService = new TurndownService();
   turndownService.use(codeListToCode);
@@ -74120,6 +74360,8 @@ ${docStr}
   turndownService.use(turndownPluginGfm.gfm);
   turndownService.use(underline);
   turndownService.use(figcaptionToTextBlock);
+  turndownService.use(textColor);
+  turndownService.use(fontSize);
   function htmlToBlocks$1(html, options) {
     const subDoc = processedHtmlToDocByMarkdown(html, options);
     if (!subDoc) {
@@ -87650,12 +87892,12 @@ ${data2.flowchartText}
       return void 0;
     return fonts[0].trim();
   }
-  function textObjectToTextRun(obj, fontSize) {
+  function textObjectToTextRun(obj, fontSize2) {
     var _a;
     let style2;
     style2 = obj.inlineCode ? "InlineCode" : void 0;
     style2 = obj.link ? "Hyperlink" : style2;
-    const sizeOfFont = obj.size || fontSize;
+    const sizeOfFont = obj.size || fontSize2;
     const size = sizeOfFont != null ? Math.floor(sizeOfFont * 1.5 + 0.5) : void 0;
     obj.text = (_a = obj.text) == null ? void 0 : _a.replace(/\x00/g, " ");
     return new docx.TextRun({
@@ -87674,11 +87916,11 @@ ${data2.flowchartText}
       highlight: styleBackgroundColorToHighlight(obj.highlight)
     });
   }
-  function textObjectToHyperLink(obj, fontSize) {
+  function textObjectToHyperLink(obj, fontSize2) {
     if (obj.link) {
       obj.link = obj.link.replace(/\x00/g, " ");
       return new docx.ExternalHyperlink({
-        children: [textObjectToTextRun(obj, fontSize)],
+        children: [textObjectToTextRun(obj, fontSize2)],
         link: obj.link
       });
     }
@@ -88087,11 +88329,11 @@ ${data2.flowchartText}
     async paragraphsFromBlockTexts(obj) {
       if (obj.texts == null)
         return void 0;
-      const fontSize = getFontSizeByHeadingLevel(this.defaultFontSize, obj.heading);
+      const fontSize2 = getFontSizeByHeadingLevel(this.defaultFontSize, obj.heading);
       const ret = [];
       for (const text2 of obj.texts) {
         if (text2.link) {
-          const link2 = textObjectToHyperLink(text2, fontSize);
+          const link2 = textObjectToHyperLink(text2, fontSize2);
           if (link2) {
             ret.push(link2);
           }
@@ -88116,7 +88358,7 @@ ${data2.flowchartText}
             ret.push(ir);
           continue;
         }
-        ret.push(textObjectToTextRun(text2, fontSize));
+        ret.push(textObjectToTextRun(text2, fontSize2));
       }
       return ret;
     }
@@ -89410,7 +89652,7 @@ ${data2.flowchartText}
         }
       }
     });
-    editor.version = "2.1.7-beta.37";
+    editor.version = "2.1.7-beta.38";
     return editor;
   }
   function isDoc(doc2) {
@@ -89524,7 +89766,7 @@ ${data2.flowchartText}
       }
     }
     OnesEditorToolbar.register(editor);
-    editor.version = "2.1.7-beta.37";
+    editor.version = "2.1.7-beta.38";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {

package/package.json

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