modern-text 0.4.5 → 0.5.1

package/dist/index.cjs

@@ -152,6 +152,8 @@ class Character {
     __publicField$3(this, "lineBox", new modernPath2d.BoundingBox());
     __publicField$3(this, "inlineBox", new modernPath2d.BoundingBox());
     __publicField$3(this, "glyphBox");
+    __publicField$3(this, "advanceWidth", 0);
+    __publicField$3(this, "advanceHeight", 0);
     __publicField$3(this, "underlinePosition", 0);
     __publicField$3(this, "underlineThickness", 0);
     __publicField$3(this, "strikeoutPosition", 0);
@@ -198,14 +200,16 @@ class Character {
     const unitsPerEm = head.unitsPerEm;
     const ascender = hhea.ascent;
     const descender = hhea.descent;
-    const { content, computedStyle } = this;
+    const { content, computedStyle, isVertical } = this;
     const { fontSize } = computedStyle;
     const rate = unitsPerEm / fontSize;
     const advanceWidth = sfnt.getAdvanceWidth(content, fontSize);
     const advanceHeight = (ascender + Math.abs(descender)) / rate;
     const baseline = ascender / rate;
-    this.inlineBox.width = advanceWidth;
-    this.inlineBox.height = advanceHeight;
+    this.advanceWidth = advanceWidth;
+    this.advanceHeight = advanceHeight;
+    this.inlineBox.width = isVertical ? advanceHeight : advanceWidth;
+    this.inlineBox.height = isVertical ? advanceWidth : advanceHeight;
     this.underlinePosition = (ascender - post.underlinePosition) / rate;
     this.underlineThickness = post.underlineThickness / rate;
     this.strikeoutPosition = (ascender - os2.yStrikeoutPosition) / rate;
@@ -239,7 +243,9 @@ class Character {
       ascender,
       descender,
       typoAscender,
-      fontStyle
+      fontStyle,
+      advanceWidth,
+      advanceHeight
     } = this;
     const { left, top } = inlineBox;
     const needsItalic = style.fontStyle === "italic" && fontStyle !== "italic";
@@ -248,26 +254,31 @@ class Character {
     let glyphIndex;
     const path = new modernPath2d.Path2D();
     if (isVertical) {
-      x += (inlineBox.height - inlineBox.width) / 2;
-      if (Math.abs(inlineBox.width - inlineBox.height) > 0.1) {
-        y -= (ascender - typoAscender) / (ascender + Math.abs(descender)) * inlineBox.height;
+      x += (advanceHeight - advanceWidth) / 2;
+      if (Math.abs(advanceWidth - advanceHeight) > 0.1) {
+        y -= (ascender - typoAscender) / (ascender + Math.abs(descender)) * advanceHeight;
       }
       glyphIndex = void 0;
     }
     if (isVertical && !set1.has(content) && (content.codePointAt(0) <= 256 || set2.has(content))) {
       path.addCommands(
-        sfnt.getPathCommands(content, x, top + baseline - (inlineBox.height - inlineBox.width) / 2, style.fontSize) ?? []
+        sfnt.getPathCommands(
+          content,
+          x,
+          top + baseline - (advanceHeight - advanceWidth) / 2,
+          style.fontSize
+        )
       );
       const point = {
-        y: top - (inlineBox.height - inlineBox.width) / 2 + inlineBox.height / 2,
-        x: x + inlineBox.width / 2
+        y: top - (advanceHeight - advanceWidth) / 2 + advanceHeight / 2,
+        x: x + advanceWidth / 2
       };
       if (needsItalic) {
         this._italic(
           path,
           isVertical ? {
             x: point.x,
-            y: top - (inlineBox.height - inlineBox.width) / 2 + baseline
+            y: top - (advanceHeight - advanceWidth) / 2 + baseline
           } : void 0
         );
       }
@@ -281,19 +292,17 @@ class Character {
           this._italic(
             path,
             isVertical ? {
-              x: x + inlineBox.width / 2,
-              y: top + typoAscender / (ascender + Math.abs(descender)) * inlineBox.height
+              x: x + advanceWidth / 2,
+              y: top + typoAscender / (ascender + Math.abs(descender)) * advanceHeight
             } : void 0
           );
         }
       } else {
-        path.addCommands(
-          sfnt.getPathCommands(content, x, y, style.fontSize) ?? []
-        );
+        path.addCommands(sfnt.getPathCommands(content, x, y, style.fontSize));
         if (needsItalic) {
           this._italic(
             path,
-            isVertical ? { x: x + inlineBox.height / 2, y } : void 0
+            isVertical ? { x: x + advanceHeight / 2, y } : void 0
           );
         }
       }
@@ -347,6 +356,23 @@ class Character {
 function isNone(val) {
   return !val || val === "none";
 }
+function isEqualObject(obj1, obj2) {
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+  const keys = Array.from(/* @__PURE__ */ new Set([...keys1, ...keys2]));
+  return keys.every((key) => obj1[key] === obj2[key]);
+}
+function hexToRgb(hex) {
+  const cleanHex = hex.startsWith("#") ? hex.slice(1) : hex;
+  const isValidHex = /^(?:[0-9A-F]{3}|[0-9A-F]{6})$/i.test(cleanHex);
+  if (!isValidHex)
+    return null;
+  const fullHex = cleanHex.length === 3 ? cleanHex.split("").map((char) => char + char).join("") : cleanHex;
+  const r = Number.parseInt(fullHex.slice(0, 2), 16);
+  const g = Number.parseInt(fullHex.slice(2, 4), 16);
+  const b = Number.parseInt(fullHex.slice(4, 6), 16);
+  return `rgb(${r}, ${g}, ${b})`;
+}
 function filterEmpty(val) {
   if (!val)
     return val;
@@ -594,16 +620,23 @@ class Measurer {
         top: character.top - rect.top
       });
       const item = paragraphs[paragraphIndex].fragments[fragmentIndex].characters[characterIndex];
+      const { fontHeight, isVertical } = item;
       const result = results[i];
       item.inlineBox.left = result.left;
       item.inlineBox.top = result.top;
       item.inlineBox.width = result.width;
       item.inlineBox.height = result.height;
-      const fontHeight = item.fontHeight;
-      item.lineBox.left = result.left;
-      item.lineBox.top = result.top + (result.height - fontHeight) / 2;
-      item.lineBox.height = fontHeight;
-      item.lineBox.width = result.width;
+      if (isVertical) {
+        item.lineBox.left = result.left + (result.width - fontHeight) / 2;
+        item.lineBox.top = result.top;
+        item.lineBox.width = fontHeight;
+        item.lineBox.height = result.height;
+      } else {
+        item.lineBox.left = result.left;
+        item.lineBox.top = result.top + (result.height - fontHeight) / 2;
+        item.lineBox.width = result.width;
+        item.lineBox.height = fontHeight;
+      }
       i++;
     });
     return {
@@ -622,7 +655,6 @@ class Measurer {
   }
 }
 
-const defaultReferImage = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI3MiIgdmlld0JveD0iMCAwIDcyIDcyIiBmaWxsPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMyLjQwMjkgMjhIMzUuMTU5NFYzMy4xNzcxQzM1Ljk4MjEgMzIuMzExNSAzNi45NzEgMzEuODczNyAzOC4wOTQ4IDMxLjg3MzdDMzkuNjY3NiAzMS44NzM3IDQwLjkxNjYgMzIuNDI5NSA0MS44MzkgMzMuNTQzN0w0MS44NDAzIDMzLjU0NTNDNDIuNjcxNyAzNC41NzA1IDQzLjA5MTUgMzUuODU1OSA0My4wOTE1IDM3LjM4NzdDNDMuMDkxNSAzOC45NzYxIDQyLjY3MjkgNDAuMzAyOCA0MS44MTgzIDQxLjMzMDRMNDEuODE3MSA0MS4zMzE4QzQwLjg3MzEgNDIuNDQ2MSAzOS41ODMyIDQzIDM3Ljk3MjEgNDNDMzYuNzQ3NyA0MyAzNS43NDg4IDQyLjY1OTkgMzQuOTk1OCA0MS45NjkzVjQyLjcyNDdIMzIuNDAyOVYyOFpNMzcuNTQyOCAzNC4wOTI0QzM2Ljg1NDkgMzQuMDkyNCAzNi4zMDE0IDM0LjM1NjEgMzUuODQ4NyAzNC45MDA0TDM1Ljg0NTIgMzQuOTA0NkMzNS4zMzU4IDM1LjQ4NTMgMzUuMDc3NiAzNi4yOTc2IDM1LjA3NzYgMzcuMzQ4NFYzNy41MDU3QzM1LjA3NzYgMzguNDY0IDM1LjI3NzIgMzkuMjQ0MyAzNS42OTQzIDM5LjgyNzlDMzYuMTQ0MSA0MC40NTg3IDM2Ljc3MjYgNDAuNzgxMyAzNy42MjQ1IDQwLjc4MTNDMzguNTg3NCA0MC43ODEzIDM5LjI3MDcgNDAuNDUyNyAzOS43MTUyIDM5LjgxMjdDNDAuMDcyOCAzOS4yNjg0IDQwLjI3MzcgMzguNDY3MyA0MC4yNzM3IDM3LjM4NzdDNDAuMjczNyAzNi4zMTA1IDQwLjA1MzMgMzUuNTMxMyAzOS42NzgzIDM1LjAwNzdDMzkuMjM3MSAzNC40MDcxIDM4LjUzNDIgMzQuMDkyNCAzNy41NDI4IDM0LjA5MjRaIiBmaWxsPSIjMjIyNTI5Ii8+PHBhdGggZD0iTTQ5Ljg2MTQgMzEuODczN0M0OC4xNTM1IDMxLjg3MzcgNDYuODAxNiAzMi40MjM5IDQ1LjgzNDggMzMuNTM5MkM0NC45MzcgMzQuNTQ3MiA0NC40OTY2IDM1Ljg1NiA0NC40OTY2IDM3LjQyN0M0NC40OTY2IDM5LjAzNjggNDQuOTM2NyA0MC4zNjU5IDQ1Ljg1NTkgNDEuMzk0M0M0Ni44MDMxIDQyLjQ3MDYgNDguMTM0OCA0MyA0OS44MjA1IDQzQzUxLjIyNiA0MyA1Mi4zODI2IDQyLjY1NjMgNTMuMjQ3OSA0MS45Njk3QzU0LjEzNTkgNDEuMjYxNCA1NC43MDYxIDQwLjE4ODcgNTQuOTU3MyAzOC43NzkxTDU1IDM4LjUzOTdINTIuMjQ4NEw1Mi4yMjU5IDM4LjcyMDFDNTIuMTM3OSAzOS40MjUxIDUxLjg5MjUgMzkuOTI3OCA1MS41MTA5IDQwLjI1NThDNTEuMTI5NSA0MC41ODM1IDUwLjU4MzEgNDAuNzYxNiA0OS44NDA5IDQwLjc2MTZDNDkuMDAwMSA0MC43NjE2IDQ4LjM5NDkgNDAuNDcxNSA0Ny45OTA3IDM5LjkyMzdMNDcuOTg3NCAzOS45MTk0QzQ3LjUzNTYgMzkuMzQwMSA0Ny4zMTQ0IDM4LjUwNjIgNDcuMzE0NCAzNy40MDc0QzQ3LjMxNDQgMzYuMzMyMiA0Ny41NTQ0IDM1LjUxNzcgNDguMDA1OCAzNC45NTY4TDQ4LjAwNzggMzQuOTU0M0M0OC40NTM3IDM0LjM4MjUgNDkuMDYxOCAzNC4xMTIxIDQ5Ljg2MTQgMzQuMTEyMUM1MC41MjMgMzQuMTEyMSA1MS4wNDUxIDM0LjI2MTUgNTEuNDI3MiAzNC41NDA3QzUxLjc4ODQgMzQuODE5NCA1Mi4wNTMgMzUuMjQ0NyA1Mi4xODgxIDM1Ljg1NzFMNTIuMjIzOSAzNi4wMTk0SDU0Ljk1NDhMNTQuOTE3IDM1Ljc4MzVDNTQuNzA2MyAzNC40NjYgNTQuMTUzNiAzMy40NzAxIDUzLjI2MzQgMzIuODAxOUw1My4yNjAyIDMyLjc5OTVDNTIuMzk1MSAzMi4xNzU1IDUxLjI2MjEgMzEuODczNyA0OS44NjE0IDMxLjg3MzdaIiBmaWxsPSIjMjIyNTI5Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNS43NTYxIDI4LjI3NTNIMjIuNzQ0TDE3IDQyLjcyNDdIMjAuMDE0MUwyMS4zNDI5IDM5LjIwNDlIMjcuMTU3MkwyOC40ODYgNDIuNzI0N0gzMS41MDAxTDI1Ljc1NjEgMjguMjc1M1pNMjIuMjEyNSAzNi45MDc2TDI0LjI1OTYgMzEuNDUzOUwyNi4yODg1IDM2LjkwNzZIMjIuMjEyNVoiIGZpbGw9IiMyMjI1MjkiLz48L3N2Zz4=";
 function parseCharsPerRepeat(size, fontSize, total) {
   if (size === "cover") {
     return 0;
@@ -639,69 +671,33 @@ function parseCharsPerRepeat(size, fontSize, total) {
     return Math.ceil(size / fontSize);
   }
 }
-function parseStrokeWidthScale(strokeWidth, fontSize, total) {
-  if (typeof strokeWidth === "string") {
-    if (strokeWidth.endsWith("%")) {
-      return Number(strokeWidth.substring(0, strokeWidth.length - 1)) / 100;
-    } else if (strokeWidth.endsWith("rem")) {
-      const value = Number(strokeWidth.substring(0, strokeWidth.length - 3));
+function parseThickness(thickness, fontSize, total) {
+  if (typeof thickness === "string") {
+    if (thickness.endsWith("%")) {
+      return Number(thickness.substring(0, thickness.length - 1)) / 100;
+    } else if (thickness.endsWith("rem")) {
+      const value = Number(thickness.substring(0, thickness.length - 3));
       return value * fontSize / total;
     } else {
-      return Number(strokeWidth) / total;
+      return Number(thickness) / total;
     }
   } else {
-    return strokeWidth / total;
-  }
-}
-function getTransformMatrix(a, b, c, isVertical, type) {
-  let scale;
-  if (!isVertical) {
-    scale = {
-      x: c.width / b.width,
-      y: c.height / b.height
-    };
-  } else {
-    scale = {
-      x: c.width / b.height,
-      y: c.height / b.width
-    };
-  }
-  const offset = c.center.add(
-    a.center.sub(b.center).scale(scale.x, scale.y)
-  );
-  if (type === "line") {
-    offset.sub({
-      x: a.width / 2 * scale.x,
-      y: a.height * scale.y
-    });
-  } else {
-    offset.sub({
-      x: a.width / 2 * scale.x,
-      y: a.height / 2 * scale.y
-    });
+    return thickness / total;
   }
-  const m = new modernPath2d.Matrix3();
-  m.translate(-a.left, -a.top);
-  if (isVertical) {
-    m.translate(-a.width / 2, -a.height / 2);
-    m.rotate(Math.PI / 2);
-    m.translate(a.width / 2, a.height / 2);
-  }
-  m.scale(scale.x, scale.y);
-  m.translate(offset.x, offset.y);
-  return m;
 }
 function highlight() {
   const paths = [];
   const clipRects = [];
   const svgStringToSvgPaths = /* @__PURE__ */ new Map();
   function getPaths(svg) {
-    let paths2 = svgStringToSvgPaths.get(svg);
-    if (!paths2) {
-      paths2 = modernPath2d.parseSvg(svg);
-      svgStringToSvgPaths.set(svg, paths2);
+    let result = svgStringToSvgPaths.get(svg);
+    if (!result) {
+      const dom = modernPath2d.parseSvgToDom(svg);
+      const paths2 = modernPath2d.parseSvg(dom);
+      result = { dom, paths: paths2 };
+      svgStringToSvgPaths.set(svg, result);
     }
-    return paths2;
+    return result;
   }
   return definePlugin({
     name: "highlight",
@@ -714,7 +710,7 @@ function highlight() {
       text.forEachCharacter((character) => {
         const { isVertical, computedStyle: style, inlineBox, fontSize } = character;
         if (!isNone(style.highlightImage) && character.glyphBox) {
-          if (style.highlightSize !== "1rem" && prevStyle?.highlightImage === style.highlightImage && prevStyle?.highlightSize === style.highlightSize && prevStyle?.highlightStrokeWidth === style.highlightStrokeWidth && prevStyle?.highlightOverflow === style.highlightOverflow && group?.length && (isVertical ? group[0].inlineBox.left === inlineBox.left : group[0].inlineBox.top === inlineBox.top) && group[0].fontSize === fontSize) {
+          if (style.highlightSize !== "1rem" && (!prevStyle || prevStyle.highlightImage === style.highlightImage && isEqualObject(prevStyle.highlightImageColors, style.highlightImageColors) && prevStyle.highlightLine === style.highlightLine && prevStyle.highlightSize === style.highlightSize && prevStyle.highlightThickness === style.highlightThickness && prevStyle.highlightOverflow === style.highlightOverflow) && group?.length && (isVertical ? group[0].inlineBox.left === inlineBox.left : group[0].inlineBox.top === inlineBox.top) && group[0].fontSize === fontSize) {
             group.push(character);
           } else {
             group = [];
@@ -732,41 +728,117 @@ function highlight() {
         };
       }).forEach((group2) => {
         const { char, groupBox } = group2;
-        const style = char.computedStyle;
-        const { fontSize, writingMode } = style;
+        const { computedStyle: style } = char;
+        const {
+          fontSize,
+          writingMode,
+          highlightThickness,
+          highlightSize,
+          highlightLine,
+          highlightOverflow,
+          highlightImage,
+          highlightImageColors
+        } = style;
         const isVertical = writingMode.includes("vertical");
-        const strokeWidthScale = parseStrokeWidthScale(style.highlightStrokeWidth, fontSize, groupBox.width);
-        const charsPerRepeat = parseCharsPerRepeat(style.highlightSize, fontSize, groupBox.width);
-        const highlightOverflow = isNone(style.highlightOverflow) ? charsPerRepeat ? "hidden" : "visible" : style.highlightOverflow;
-        const refPaths = getPaths(isNone(style.highlightReferImage) ? defaultReferImage : style.highlightReferImage);
-        const svgPaths = getPaths(style.highlightImage);
-        const box = modernPath2d.getPathsBoundingBox(svgPaths, true);
-        const refBox = modernPath2d.getPathsBoundingBox(refPaths, false);
-        const unitWidth = charsPerRepeat ? fontSize * charsPerRepeat : isVertical ? groupBox.height : groupBox.width;
-        let unitHeight;
-        let type;
-        if (box.height / refBox.height > 0.8) {
-          type = "block";
-          unitHeight = groupBox.height;
+        const thickness = parseThickness(highlightThickness, fontSize, groupBox.width);
+        const charsPerRepeat = parseCharsPerRepeat(highlightSize, fontSize, groupBox.width);
+        const overflow = isNone(highlightOverflow) ? charsPerRepeat ? "hidden" : "visible" : highlightOverflow;
+        const colors = Object.keys(highlightImageColors).reduce((obj, key) => {
+          let value = highlightImageColors[key];
+          const keyRgb = hexToRgb(key);
+          const valueRgb = hexToRgb(value);
+          if (keyRgb) {
+            key = keyRgb;
+          }
+          if (valueRgb) {
+            value = valueRgb;
+          }
+          obj[key] = value;
+          return obj;
+        }, {});
+        const { paths: svgPaths, dom: svgDom } = getPaths(highlightImage);
+        const aBox = modernPath2d.getPathsBoundingBox(svgPaths, true);
+        const cBox = new modernPath2d.BoundingBox().copy(groupBox);
+        cBox.width = charsPerRepeat ? fontSize * charsPerRepeat : isVertical ? groupBox.height : groupBox.width;
+        cBox.height = isVertical ? groupBox.width : groupBox.height;
+        const width = isVertical ? cBox.height : cBox.width;
+        let line;
+        if (isNone(highlightLine)) {
+          if (aBox.width / aBox.height > 4) {
+            line = "underline";
+            const viewBox = svgDom.getAttribute("viewBox");
+            if (viewBox) {
+              const aCenter = aBox.y + aBox.height / 2;
+              const [_x, y, _w, h] = viewBox.split(" ").map((v) => Number(v));
+              const vCenter = y + h / 2;
+              const diff = vCenter - aCenter;
+              if (Math.abs(diff) < aBox.height * 2) {
+                line = "line-through";
+              } else if (diff > 0) {
+                line = "overline";
+              } else {
+                line = "underline";
+              }
+            }
+          } else {
+            line = "outline";
+          }
         } else {
-          type = "line";
-          unitHeight = char.inlineBox.top - groupBox.top + char.underlinePosition;
+          line = highlightLine;
         }
-        const transform = getTransformMatrix(
-          box,
-          refBox,
-          new modernPath2d.BoundingBox(groupBox.left, groupBox.top, isVertical ? unitHeight : unitWidth, isVertical ? unitWidth : unitHeight),
-          isVertical,
-          type
-        );
-        const styleScale = fontSize / box.width * 2;
-        const total = Math.ceil(groupBox.width / unitWidth);
-        for (let i = 0; i < total; i++) {
-          const _transform = transform.clone().translate(i * unitWidth, 0);
-          svgPaths.forEach((original) => {
-            const path = original.clone().matrix(_transform);
+        switch (line) {
+          case "outline": {
+            const paddingX = cBox.width * 0.2;
+            const paddingY = cBox.height * 0.2;
+            cBox.width += paddingX;
+            cBox.height += paddingY;
+            if (isVertical) {
+              cBox.x -= paddingY / 2;
+              cBox.y -= paddingX / 2;
+              cBox.x += cBox.height;
+            } else {
+              cBox.x -= paddingX / 2;
+              cBox.y -= paddingY / 2;
+            }
+            break;
+          }
+          case "overline":
+            cBox.height = char.underlineThickness * 2;
+            if (isVertical) {
+              cBox.x = char.inlineBox.left + char.inlineBox.width - cBox.height;
+            } else {
+              cBox.y = char.inlineBox.top;
+            }
+            break;
+          case "line-through":
+            cBox.height = char.strikeoutSize * 2;
+            if (isVertical) {
+              cBox.x = char.inlineBox.left + char.inlineBox.width - char.strikeoutPosition - cBox.height;
+            } else {
+              cBox.y = char.inlineBox.top + char.strikeoutPosition;
+            }
+            break;
+          case "underline":
+            cBox.height = char.underlineThickness * 2;
+            if (isVertical) {
+              cBox.x = char.inlineBox.left + char.inlineBox.width - char.underlinePosition - cBox.height;
+            } else {
+              cBox.y = char.inlineBox.top + char.underlinePosition;
+            }
+            break;
+        }
+        const transform = new modernPath2d.Matrix3().translate(-aBox.x, -aBox.y).scale(cBox.width / aBox.width, cBox.height / aBox.height);
+        if (isVertical) {
+          transform.rotate(-Math.PI / 2);
+        }
+        transform.translate(cBox.x, cBox.y);
+        const styleScale = fontSize / aBox.width;
+        for (let i = 0, len = Math.ceil(groupBox.width / width); i < len; i++) {
+          const _transform = transform.clone().translate(i * width, 0);
+          svgPaths.forEach((originalPath) => {
+            const path = originalPath.clone().matrix(_transform);
             if (path.style.strokeWidth) {
-              path.style.strokeWidth *= styleScale * strokeWidthScale;
+              path.style.strokeWidth *= styleScale * thickness;
             }
             if (path.style.strokeMiterlimit) {
               path.style.strokeMiterlimit *= styleScale;
@@ -777,8 +849,14 @@ function highlight() {
             if (path.style.strokeDasharray) {
               path.style.strokeDasharray = path.style.strokeDasharray.map((v) => v * styleScale);
             }
+            if (path.style.fill && path.style.fill in colors) {
+              path.style.fill = colors[path.style.fill];
+            }
+            if (path.style.stroke && path.style.stroke in colors) {
+              path.style.stroke = colors[path.style.stroke];
+            }
             paths.push(path);
-            clipRects[paths.length - 1] = highlightOverflow === "hidden" ? new modernPath2d.BoundingBox(
+            clipRects[paths.length - 1] = overflow === "hidden" ? new modernPath2d.BoundingBox(
               groupBox.left,
               groupBox.top - groupBox.height,
               groupBox.width,
@@ -797,6 +875,12 @@ function highlight() {
           clipRect: clipRects[index],
           fontSize: text.computedStyle.fontSize
         });
+        if (text.debug) {
+          const box = modernPath2d.getPathsBoundingBox([path]);
+          if (box) {
+            ctx.strokeRect(box.x, box.y, box.width, box.height);
+          }
+        }
       });
     }
   });
@@ -829,17 +913,31 @@ function listStyle() {
       const padding = fontSize * 0.45;
       paragraphs.forEach((paragraph) => {
         const { computedStyle: style } = paragraph;
-        let listStyleSize = style.listStyleSize;
+        const { listStyleImage, listStyleImageColors, listStyleSize, listStyleType, color } = style;
+        const colors = Object.keys(listStyleImageColors).reduce((obj, key) => {
+          let value = listStyleImageColors[key];
+          const keyRgb = hexToRgb(key);
+          const valueRgb = hexToRgb(value);
+          if (keyRgb) {
+            key = keyRgb;
+          }
+          if (valueRgb) {
+            value = valueRgb;
+          }
+          obj[key] = value;
+          return obj;
+        }, {});
+        let size = listStyleSize;
         let image;
-        if (!isNone(style.listStyleImage)) {
-          image = style.listStyleImage;
-        } else if (!isNone(style.listStyleType)) {
+        if (!isNone(listStyleImage)) {
+          image = listStyleImage;
+        } else if (!isNone(listStyleType)) {
           const r = fontSize * 0.38 / 2;
-          listStyleSize = listStyleSize === "cover" ? r * 2 : listStyleSize;
-          switch (style.listStyleType) {
+          size = size === "cover" ? r * 2 : size;
+          switch (listStyleType) {
             case "disc":
               image = `<svg width="${r * 2}" height="${r * 2}" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="${r}" cy="${r}" r="${r}" fill="${style.color}" />
+  <circle cx="${r}" cy="${r}" r="${r}" fill="${color}" />
 </svg>`;
               break;
           }
@@ -854,7 +952,7 @@ function listStyle() {
         if (fBox) {
           const m = new modernPath2d.Matrix3();
           if (isVertical) {
-            const scale = parseScale(listStyleSize, fontSize, fontSize);
+            const scale = parseScale(size, fontSize, fontSize);
             const reScale = fontSize / imageBox.height * scale;
             m.translate(-imageBox.left, -imageBox.top);
             m.rotate(Math.PI / 2);
@@ -862,7 +960,7 @@ function listStyle() {
             m.translate(fontSize / 2 - imageBox.height * reScale / 2, 0);
             m.translate(box.left + (box.width - fontSize) / 2, fBox.top - padding);
           } else {
-            const scale = parseScale(listStyleSize, fontSize, fontSize);
+            const scale = parseScale(size, fontSize, fontSize);
             const reScale = fontSize / imageBox.height * scale;
             m.translate(-imageBox.left, -imageBox.top);
             m.translate(-imageBox.width, 0);
@@ -870,7 +968,17 @@ function listStyle() {
             m.translate(0, fontSize / 2 - imageBox.height * reScale / 2);
             m.translate(fBox.left - padding, box.top + (box.height - fontSize) / 2);
           }
-          paths.push(...imagePaths.map((p) => p.clone().matrix(m)));
+          paths.push(...imagePaths.map((p) => {
+            const path = p.clone();
+            path.matrix(m);
+            if (path.style.fill && path.style.fill in colors) {
+              path.style.fill = colors[path.style.fill];
+            }
+            if (path.style.stroke && path.style.stroke in colors) {
+              path.style.stroke = colors[path.style.stroke];
+            }
+            return path;
+          }));
         }
       });
     }
@@ -953,6 +1061,11 @@ function render() {
           });
         });
       }
+      if (text.debug) {
+        paragraphs.forEach((paragraph) => {
+          ctx.strokeRect(paragraph.lineBox.x, paragraph.lineBox.y, paragraph.lineBox.width, paragraph.lineBox.height);
+        });
+      }
     }
   });
 }
@@ -992,7 +1105,7 @@ function textDecoration() {
         const { computedStyle: style, isVertical, inlineBox, underlinePosition, underlineThickness, strikeoutPosition, strikeoutSize } = character;
         if (!isNone(style.textDecoration)) {
           let flag = false;
-          if (prevStyle?.textDecoration === style.textDecoration && prevStyle?.writingMode === style.writingMode && (isVertical ? group[0].inlineBox.left === inlineBox.left : group[0].inlineBox.top === inlineBox.top)) {
+          if (prevStyle?.textDecoration === style.textDecoration && prevStyle?.writingMode === style.writingMode && prevStyle?.color === style.color && (isVertical ? group[0].inlineBox.left === inlineBox.left : group[0].inlineBox.top === inlineBox.top)) {
             switch (style.textDecoration) {
               case "underline":
                 if (group[0].underlinePosition === underlinePosition && group[0].underlineThickness === underlineThickness) {
@@ -1020,38 +1133,48 @@ function textDecoration() {
       });
       groups.forEach((group2) => {
         const { computedStyle: style, isVertical, underlinePosition, underlineThickness, strikeoutPosition, strikeoutSize } = group2[0];
-        const { textDecoration: textDecoration2 } = style;
+        const { textDecoration: textDecoration2, color } = style;
         const { left, top, width, height } = modernPath2d.BoundingBox.from(...group2.map((c) => c.inlineBox));
-        let strokePosition = isVertical ? left : top;
-        let strokeWidth = 0;
+        let position = isVertical ? left + width : top;
+        const direction = isVertical ? -1 : 1;
+        let thickness = 0;
         switch (textDecoration2) {
+          case "overline":
+            thickness = underlineThickness * 2;
+            break;
           case "underline":
-            strokePosition += underlinePosition;
-            strokeWidth = underlineThickness * 2;
+            position += direction * underlinePosition;
+            thickness = underlineThickness * 2;
             break;
           case "line-through":
-            strokePosition += strikeoutPosition;
-            strokeWidth = strikeoutSize * 2;
+            position += direction * strikeoutPosition;
+            thickness = strikeoutSize * 2;
             break;
         }
-        strokePosition -= strokeWidth;
+        position -= thickness;
+        let path;
         if (isVertical) {
-          paths.push(new modernPath2d.Path2D([
-            { type: "M", x: strokePosition, y: top },
-            { type: "L", x: strokePosition, y: top + height },
-            { type: "L", x: strokePosition + strokeWidth, y: top + height },
-            { type: "L", x: strokePosition + strokeWidth, y: top },
+          path = new modernPath2d.Path2D([
+            { type: "M", x: position, y: top },
+            { type: "L", x: position, y: top + height },
+            { type: "L", x: position + thickness, y: top + height },
+            { type: "L", x: position + thickness, y: top },
             { type: "Z" }
-          ]));
+          ], {
+            fill: color
+          });
         } else {
-          paths.push(new modernPath2d.Path2D([
-            { type: "M", x: left, y: strokePosition },
-            { type: "L", x: left + width, y: strokePosition },
-            { type: "L", x: left + width, y: strokePosition + strokeWidth },
-            { type: "L", x: left, y: strokePosition + strokeWidth },
+          path = new modernPath2d.Path2D([
+            { type: "M", x: left, y: position },
+            { type: "L", x: left + width, y: position },
+            { type: "L", x: left + width, y: position + thickness },
+            { type: "L", x: left, y: position + thickness },
             { type: "Z" }
-          ]));
+          ], {
+            fill: color
+          });
         }
+        paths.push(path);
       });
     },
     render: (ctx, text) => {
@@ -1066,7 +1189,6 @@ function textDecoration() {
               ctx,
               path,
               fontSize: style.fontSize,
-              color: style.color,
               ...effectStyle
             });
           });
@@ -1077,8 +1199,7 @@ function textDecoration() {
           drawPath({
             ctx,
             path,
-            fontSize: style.fontSize,
-            color: style.color
+            fontSize: style.fontSize
           });
         });
       }
@@ -1119,13 +1240,15 @@ const defaultTextStyles = {
   // listStyle
   listStyleType: "none",
   listStyleImage: "none",
+  listStyleImageColors: {},
   listStyleSize: "cover",
   listStylePosition: "outside",
   // highlight
-  highlightReferImage: "none",
   highlightImage: "none",
+  highlightImageColors: {},
+  highlightLine: "none",
   highlightSize: "cover",
-  highlightStrokeWidth: "100%",
+  highlightThickness: "100%",
   highlightOverflow: "none",
   // shadow
   shadowColor: "rgba(0, 0, 0, 0)",
@@ -1139,6 +1262,7 @@ const defaultTextStyles = {
 };
 class Text {
   constructor(options = {}) {
+    __publicField(this, "debug");
     __publicField(this, "content");
     __publicField(this, "style");
     __publicField(this, "effects");
@@ -1154,12 +1278,12 @@ class Text {
     __publicField(this, "measurer", new Measurer(this));
     __publicField(this, "plugins", /* @__PURE__ */ new Map());
     __publicField(this, "fonts");
-    const { content = "", style = {}, measureDom, effects, fonts } = options;
-    this.content = content;
-    this.style = style;
-    this.measureDom = measureDom;
-    this.effects = effects;
-    this.fonts = fonts;
+    this.debug = options.debug ?? false;
+    this.content = options.content ?? "";
+    this.style = options.style ?? {};
+    this.measureDom = options.measureDom;
+    this.effects = options.effects;
+    this.fonts = options.fonts;
     this.use(listStyle()).use(textDecoration()).use(highlight()).use(render());
   }
   get fontSize() {
@@ -1367,7 +1491,9 @@ exports.definePlugin = definePlugin;
 exports.drawPath = drawPath;
 exports.filterEmpty = filterEmpty;
 exports.getTransform2D = getTransform2D;
+exports.hexToRgb = hexToRgb;
 exports.highlight = highlight;
+exports.isEqualObject = isEqualObject;
 exports.isNone = isNone;
 exports.listStyle = listStyle;
 exports.measureText = measureText;