modern-text 0.2.30 → 0.2.32

package/dist/index.mjs

@@ -1,4 +1,5 @@
-import { BoundingBox, Path2D, Vector2, Matrix3, parseSvg, parseSvgToDom } from 'modern-path2d';
+import { BoundingBox, Path2D, Vector2, Matrix3, parseSvg, parseSvgToDom, getPathsBoundingBox } from 'modern-path2d';
+export * from 'modern-path2d';
 import { fonts, Woff, Ttf } from 'modern-font';
 export * from 'modern-font';
 
@@ -75,10 +76,58 @@ function drawPath(options) {
   ctx.restore();
 }
 
-var __defProp$4 = Object.defineProperty;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$4 = (obj, key, value) => {
-  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
+function fillBackground(ctx, text) {
+  const { computedStyle: style, paragraphs } = text;
+  function fillBackground2(color, x, y, width, height) {
+    ctx.fillStyle = color;
+    ctx.fillRect(x, y, width, height);
+  }
+  if (style?.backgroundColor) {
+    fillBackground2(style.backgroundColor, 0, 0, ctx.canvas.width, ctx.canvas.height);
+  }
+  paragraphs.forEach((paragraph) => {
+    if (paragraph.style?.backgroundColor) {
+      fillBackground2(paragraph.computedStyle.backgroundColor, ...paragraph.boundingBox.toArray());
+    }
+    paragraph.fragments.forEach((fragment) => {
+      if (fragment.style?.backgroundColor) {
+        fillBackground2(fragment.computedStyle.backgroundColor, ...fragment.boundingBox.toArray());
+      }
+    });
+  });
+}
+
+function setupView(ctx, pixelRatio, boundingBox) {
+  const { left, top, width, height } = boundingBox;
+  const view = ctx.canvas;
+  view.dataset.viewbox = String(`${left} ${top} ${width} ${height}`);
+  view.dataset.pixelRatio = String(pixelRatio);
+  view.width = Math.max(1, Math.ceil(width * pixelRatio));
+  view.height = Math.max(1, Math.ceil(height * pixelRatio));
+  view.style.marginTop = `${top}px`;
+  view.style.marginLeft = `${left}px`;
+  view.style.width = `${width}px`;
+  view.style.height = `${height}px`;
+  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+  ctx.scale(pixelRatio, pixelRatio);
+  ctx.translate(-left, -top);
+}
+
+function uploadColors(ctx, text) {
+  const { paragraphs, computedStyle: style, renderBoundingBox } = text;
+  uploadColor(style, renderBoundingBox, ctx);
+  paragraphs.forEach((paragraph) => {
+    uploadColor(paragraph.computedStyle, paragraph.boundingBox, ctx);
+    paragraph.fragments.forEach((fragment) => {
+      uploadColor(fragment.computedStyle, fragment.boundingBox, ctx);
+    });
+  });
+}
+
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => {
+  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 const set1 = /* @__PURE__ */ new Set(["\xA9", "\xAE", "\xF7"]);
@@ -113,21 +162,21 @@ class Character {
     this.index = index;
     this.parent = parent;
     // measure dom
-    __publicField$4(this, "boundingBox", new BoundingBox());
-    __publicField$4(this, "textWidth", 0);
-    __publicField$4(this, "textHeight", 0);
+    __publicField$3(this, "boundingBox", new BoundingBox());
+    __publicField$3(this, "textWidth", 0);
+    __publicField$3(this, "textHeight", 0);
     // font glyph
-    __publicField$4(this, "glyphHeight", 0);
-    __publicField$4(this, "glyphWidth", 0);
-    __publicField$4(this, "underlinePosition", 0);
-    __publicField$4(this, "underlineThickness", 0);
-    __publicField$4(this, "yStrikeoutPosition", 0);
-    __publicField$4(this, "yStrikeoutSize", 0);
-    __publicField$4(this, "baseline", 0);
-    __publicField$4(this, "centerDiviation", 0);
-    __publicField$4(this, "path", new Path2D());
-    __publicField$4(this, "glyphBox", new BoundingBox());
-    __publicField$4(this, "center", new Vector2());
+    __publicField$3(this, "glyphHeight", 0);
+    __publicField$3(this, "glyphWidth", 0);
+    __publicField$3(this, "underlinePosition", 0);
+    __publicField$3(this, "underlineThickness", 0);
+    __publicField$3(this, "yStrikeoutPosition", 0);
+    __publicField$3(this, "yStrikeoutSize", 0);
+    __publicField$3(this, "baseline", 0);
+    __publicField$3(this, "centerDiviation", 0);
+    __publicField$3(this, "path", new Path2D());
+    __publicField$3(this, "glyphBox", new BoundingBox());
+    __publicField$3(this, "center", new Vector2());
   }
   get computedStyle() {
     return this.parent.computedStyle;
@@ -319,10 +368,6 @@ class Character {
     } else {
       min ?? (min = Vector2.MAX);
       max ?? (max = Vector2.MIN);
-      min.x = Math.min(min.x, this.boundingBox.left);
-      min.y = Math.min(min.y, this.boundingBox.top);
-      max.x = Math.max(max.x, this.boundingBox.right);
-      max.y = Math.max(max.y, this.boundingBox.bottom);
       return { min, max };
     }
   }
@@ -341,6 +386,9 @@ class Character {
   }
 }
 
+function isNone(val) {
+  return !val || val === "none";
+}
 function filterEmpty(val) {
   if (!val)
     return val;
@@ -353,10 +401,10 @@ function filterEmpty(val) {
   return res;
 }
 
-var __defProp$3 = Object.defineProperty;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$3 = (obj, key, value) => {
-  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => {
+  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class Fragment {
@@ -364,8 +412,7 @@ class Fragment {
     this.content = content;
     this.style = style;
     this.parent = parent;
-    __publicField$3(this, "boundingBox", new BoundingBox());
-    __publicField$3(this, "highlight");
+    __publicField$2(this, "boundingBox", new BoundingBox());
     this.updateComputedStyle().initCharacters();
   }
   get computedContent() {
@@ -390,18 +437,18 @@ class Fragment {
   }
 }
 
-var __defProp$2 = Object.defineProperty;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$2 = (obj, key, value) => {
-  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => {
+  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class Paragraph {
   constructor(style, parentStyle) {
     this.style = style;
     this.parentStyle = parentStyle;
-    __publicField$2(this, "boundingBox", new BoundingBox());
-    __publicField$2(this, "fragments", []);
+    __publicField$1(this, "boundingBox", new BoundingBox());
+    __publicField$1(this, "fragments", []);
     this.updateComputedStyle();
   }
   updateComputedStyle() {
@@ -418,231 +465,10 @@ class Paragraph {
   }
 }
 
-class Feature {
+class Measurer {
   constructor(_text) {
     this._text = _text;
   }
-}
-
-class Deformer extends Feature {
-  deform() {
-    this._text.deformation?.();
-  }
-}
-
-const tempM1 = new Matrix3();
-const tempM2 = new Matrix3();
-const tempV1 = new Vector2();
-class Effector extends Feature {
-  getTransform2D(style) {
-    const { fontSize, renderBoundingBox } = this._text;
-    const offsetX = (style.offsetX ?? 0) * fontSize;
-    const offsetY = (style.offsetY ?? 0) * fontSize;
-    const PI_2 = Math.PI * 2;
-    const skewX = (style.skewX ?? 0) / 360 * PI_2;
-    const skewY = (style.skewY ?? 0) / 360 * PI_2;
-    const { left, top, width, height } = renderBoundingBox;
-    const centerX = left + width / 2;
-    const centerY = top + height / 2;
-    tempM1.identity();
-    tempM2.makeTranslation(offsetX, offsetY);
-    tempM1.multiply(tempM2);
-    tempM2.makeTranslation(centerX, centerY);
-    tempM1.multiply(tempM2);
-    tempM2.set(1, Math.tan(skewX), 0, Math.tan(skewY), 1, 0, 0, 0, 1);
-    tempM1.multiply(tempM2);
-    tempM2.makeTranslation(-centerX, -centerY);
-    tempM1.multiply(tempM2);
-    return tempM1.clone();
-  }
-  getBoundingBox() {
-    const { characters, effects, fontSize } = this._text;
-    const boxes = [];
-    characters.forEach((character) => {
-      effects?.forEach((style) => {
-        const aabb = character.glyphBox.clone();
-        const m = this.getTransform2D(style);
-        tempV1.set(aabb.left, aabb.top);
-        tempV1.applyMatrix3(m);
-        aabb.left = tempV1.x;
-        aabb.top = tempV1.y;
-        tempV1.set(aabb.right, aabb.bottom);
-        tempV1.applyMatrix3(m);
-        aabb.width = tempV1.x - aabb.left;
-        aabb.height = tempV1.y - aabb.top;
-        const shadowOffsetX = (style.shadowOffsetX ?? 0) * fontSize;
-        const shadowOffsetY = (style.shadowOffsetY ?? 0) * fontSize;
-        const textStrokeWidth = Math.max(0.1, style.textStrokeWidth ?? 0) * fontSize;
-        aabb.left += shadowOffsetX - textStrokeWidth;
-        aabb.top += shadowOffsetY - textStrokeWidth;
-        aabb.width += textStrokeWidth * 2;
-        aabb.height += textStrokeWidth * 2;
-        boxes.push(aabb);
-      });
-    });
-    return BoundingBox.from(...boxes);
-  }
-  draw(options) {
-    const { ctx } = options;
-    const { effects, characters, renderBoundingBox } = this._text;
-    if (effects) {
-      effects.forEach((style) => {
-        uploadColor(style, renderBoundingBox, ctx);
-        ctx.save();
-        const [a, c, e, b, d, f] = this.getTransform2D(style).transpose().elements;
-        ctx.transform(a, b, c, d, e, f);
-        characters.forEach((character) => {
-          character.drawTo(ctx, style);
-        });
-        ctx.restore();
-      });
-    }
-    return this;
-  }
-}
-
-var __defProp$1 = Object.defineProperty;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$1 = (obj, key, value) => {
-  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-const defaultHighlightRefer = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI3MiIgdmlld0JveD0iMCAwIDcyIDcyIiBmaWxsPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMyLjQwMjkgMjhIMzUuMTU5NFYzMy4xNzcxQzM1Ljk4MjEgMzIuMzExNSAzNi45NzEgMzEuODczNyAzOC4wOTQ4IDMxLjg3MzdDMzkuNjY3NiAzMS44NzM3IDQwLjkxNjYgMzIuNDI5NSA0MS44MzkgMzMuNTQzN0w0MS44NDAzIDMzLjU0NTNDNDIuNjcxNyAzNC41NzA1IDQzLjA5MTUgMzUuODU1OSA0My4wOTE1IDM3LjM4NzdDNDMuMDkxNSAzOC45NzYxIDQyLjY3MjkgNDAuMzAyOCA0MS44MTgzIDQxLjMzMDRMNDEuODE3MSA0MS4zMzE4QzQwLjg3MzEgNDIuNDQ2MSAzOS41ODMyIDQzIDM3Ljk3MjEgNDNDMzYuNzQ3NyA0MyAzNS43NDg4IDQyLjY1OTkgMzQuOTk1OCA0MS45NjkzVjQyLjcyNDdIMzIuNDAyOVYyOFpNMzcuNTQyOCAzNC4wOTI0QzM2Ljg1NDkgMzQuMDkyNCAzNi4zMDE0IDM0LjM1NjEgMzUuODQ4NyAzNC45MDA0TDM1Ljg0NTIgMzQuOTA0NkMzNS4zMzU4IDM1LjQ4NTMgMzUuMDc3NiAzNi4yOTc2IDM1LjA3NzYgMzcuMzQ4NFYzNy41MDU3QzM1LjA3NzYgMzguNDY0IDM1LjI3NzIgMzkuMjQ0MyAzNS42OTQzIDM5LjgyNzlDMzYuMTQ0MSA0MC40NTg3IDM2Ljc3MjYgNDAuNzgxMyAzNy42MjQ1IDQwLjc4MTNDMzguNTg3NCA0MC43ODEzIDM5LjI3MDcgNDAuNDUyNyAzOS43MTUyIDM5LjgxMjdDNDAuMDcyOCAzOS4yNjg0IDQwLjI3MzcgMzguNDY3MyA0MC4yNzM3IDM3LjM4NzdDNDAuMjczNyAzNi4zMTA1IDQwLjA1MzMgMzUuNTMxMyAzOS42NzgzIDM1LjAwNzdDMzkuMjM3MSAzNC40MDcxIDM4LjUzNDIgMzQuMDkyNCAzNy41NDI4IDM0LjA5MjRaIiBmaWxsPSIjMjIyNTI5Ii8+PHBhdGggZD0iTTQ5Ljg2MTQgMzEuODczN0M0OC4xNTM1IDMxLjg3MzcgNDYuODAxNiAzMi40MjM5IDQ1LjgzNDggMzMuNTM5MkM0NC45MzcgMzQuNTQ3MiA0NC40OTY2IDM1Ljg1NiA0NC40OTY2IDM3LjQyN0M0NC40OTY2IDM5LjAzNjggNDQuOTM2NyA0MC4zNjU5IDQ1Ljg1NTkgNDEuMzk0M0M0Ni44MDMxIDQyLjQ3MDYgNDguMTM0OCA0MyA0OS44MjA1IDQzQzUxLjIyNiA0MyA1Mi4zODI2IDQyLjY1NjMgNTMuMjQ3OSA0MS45Njk3QzU0LjEzNTkgNDEuMjYxNCA1NC43MDYxIDQwLjE4ODcgNTQuOTU3MyAzOC43NzkxTDU1IDM4LjUzOTdINTIuMjQ4NEw1Mi4yMjU5IDM4LjcyMDFDNTIuMTM3OSAzOS40MjUxIDUxLjg5MjUgMzkuOTI3OCA1MS41MTA5IDQwLjI1NThDNTEuMTI5NSA0MC41ODM1IDUwLjU4MzEgNDAuNzYxNiA0OS44NDA5IDQwLjc2MTZDNDkuMDAwMSA0MC43NjE2IDQ4LjM5NDkgNDAuNDcxNSA0Ny45OTA3IDM5LjkyMzdMNDcuOTg3NCAzOS45MTk0QzQ3LjUzNTYgMzkuMzQwMSA0Ny4zMTQ0IDM4LjUwNjIgNDcuMzE0NCAzNy40MDc0QzQ3LjMxNDQgMzYuMzMyMiA0Ny41NTQ0IDM1LjUxNzcgNDguMDA1OCAzNC45NTY4TDQ4LjAwNzggMzQuOTU0M0M0OC40NTM3IDM0LjM4MjUgNDkuMDYxOCAzNC4xMTIxIDQ5Ljg2MTQgMzQuMTEyMUM1MC41MjMgMzQuMTEyMSA1MS4wNDUxIDM0LjI2MTUgNTEuNDI3MiAzNC41NDA3QzUxLjc4ODQgMzQuODE5NCA1Mi4wNTMgMzUuMjQ0NyA1Mi4xODgxIDM1Ljg1NzFMNTIuMjIzOSAzNi4wMTk0SDU0Ljk1NDhMNTQuOTE3IDM1Ljc4MzVDNTQuNzA2MyAzNC40NjYgNTQuMTUzNiAzMy40NzAxIDUzLjI2MzQgMzIuODAxOUw1My4yNjAyIDMyLjc5OTVDNTIuMzk1MSAzMi4xNzU1IDUxLjI2MjEgMzEuODczNyA0OS44NjE0IDMxLjg3MzdaIiBmaWxsPSIjMjIyNTI5Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNS43NTYxIDI4LjI3NTNIMjIuNzQ0TDE3IDQyLjcyNDdIMjAuMDE0MUwyMS4zNDI5IDM5LjIwNDlIMjcuMTU3MkwyOC40ODYgNDIuNzI0N0gzMS41MDAxTDI1Ljc1NjEgMjguMjc1M1pNMjIuMjEyNSAzNi45MDc2TDI0LjI1OTYgMzEuNDUzOUwyNi4yODg1IDM2LjkwNzZIMjIuMjEyNVoiIGZpbGw9IiMyMjI1MjkiLz48L3N2Zz4=";
-const _Highlighter = class _Highlighter extends Feature {
-  constructor() {
-    super(...arguments);
-    __publicField$1(this, "paths", []);
-  }
-  static get refer() {
-    return this._refer;
-  }
-  static set refer(refer) {
-    this._refer = refer;
-    this.parsedRefer = parseSvg(refer);
-  }
-  getReferBoundingBox() {
-    const max = Vector2.MIN;
-    const min = Vector2.MAX;
-    _Highlighter.parsedRefer.forEach((path) => {
-      path.getMinMax(min, max);
-    });
-    return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
-  }
-  getBoundingBox() {
-    if (!this.paths.length) {
-      return void 0;
-    }
-    const min = Vector2.MAX;
-    const max = Vector2.MIN;
-    this.paths.forEach((v) => v.path.getMinMax(min, max));
-    return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
-  }
-  highlight(perChar = false) {
-    const { characters } = this._text;
-    let group;
-    const groups = [];
-    let prevHighlight;
-    characters.forEach((character) => {
-      const highlight = character.parent.highlight;
-      if (highlight?.url) {
-        if (!perChar && prevHighlight?.url === highlight.url && prevHighlight?.strokeWidth === highlight.strokeWidth && prevHighlight?.repeatXByFontsize === highlight.repeatXByFontsize && prevHighlight?.overflowXHidden === highlight.overflowXHidden && group.length && group[0].boundingBox.top === character.boundingBox.top && group[0].fontSize === character.fontSize) {
-          group.push(character);
-        } else {
-          group = [];
-          group.push(character);
-          groups.push(group);
-        }
-      }
-      prevHighlight = highlight;
-    });
-    this.paths = groups.filter((characters2) => characters2.length).map((characters2) => {
-      return {
-        highlight: characters2[0].parent.highlight,
-        box: BoundingBox.from(...characters2.map((c) => c.glyphBox)),
-        baseline: Math.max(...characters2.map((c) => c.baseline)),
-        fontSize: characters2[0].fontSize
-      };
-    }).map((group2) => this._parseGroup(group2)).flat();
-  }
-  _parseSvg(url) {
-    const svg = parseSvgToDom(url);
-    const paths = parseSvg(svg);
-    const min = Vector2.MAX;
-    const max = Vector2.MIN;
-    paths.forEach((path) => path.getMinMax(min, max));
-    return {
-      paths,
-      box: new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y)
-    };
-  }
-  _parseGroup(group) {
-    const { highlight, box: groupBox, fontSize } = group;
-    const {
-      strokeWidth = 1,
-      repeatXByFontsize = 0,
-      overflowXHidden = Boolean(repeatXByFontsize)
-    } = highlight;
-    const { box, paths } = this._parseSvg(highlight.url);
-    const result = [];
-    const referBoundingBox = this.getReferBoundingBox();
-    const scale = {
-      x: repeatXByFontsize ? fontSize * repeatXByFontsize * (box.width / referBoundingBox.width) / box.width : groupBox.width * (box.width / referBoundingBox.width) / box.width,
-      y: groupBox.height * (box.height / referBoundingBox.height) / box.height
-    };
-    const styleScale = fontSize / box.width * 2;
-    const unitWidth = box.width * scale.x;
-    const total = Math.ceil(groupBox.width / unitWidth);
-    const offset = {
-      x: (box.left - referBoundingBox.left) * scale.x,
-      y: (box.top - referBoundingBox.top) * scale.y
-    };
-    const transform = new Matrix3().translate(-box.left, -box.top).scale(scale.x, scale.y).translate(groupBox.left, groupBox.top).translate(offset.x, offset.y);
-    for (let i = 0; i < total; i++) {
-      const _transform = transform.clone().translate(i * unitWidth, 0);
-      paths.forEach((original) => {
-        const path = original.clone().matrix(_transform);
-        if (path.style.strokeWidth) {
-          path.style.strokeWidth *= styleScale * strokeWidth;
-        }
-        if (path.style.strokeMiterlimit) {
-          path.style.strokeMiterlimit *= styleScale;
-        }
-        if (path.style.strokeDashoffset) {
-          path.style.strokeDashoffset *= styleScale;
-        }
-        if (path.style.strokeDasharray) {
-          path.style.strokeDasharray = path.style.strokeDasharray.map((v) => v * styleScale);
-        }
-        result.push({
-          clipRect: overflowXHidden ? new BoundingBox(
-            groupBox.left + offset.x * 2,
-            groupBox.top - groupBox.height,
-            groupBox.width - offset.x * 2,
-            groupBox.height * 3
-          ) : void 0,
-          path
-        });
-      });
-    }
-    return result;
-  }
-  draw({ ctx }) {
-    this.paths.forEach((v) => {
-      drawPath({
-        ctx,
-        path: v.path,
-        clipRect: v.clipRect,
-        fontSize: this._text.computedStyle.fontSize
-      });
-    });
-    return this;
-  }
-};
-__publicField$1(_Highlighter, "_refer", defaultHighlightRefer);
-__publicField$1(_Highlighter, "parsedRefer", parseSvg(_Highlighter._refer));
-let Highlighter = _Highlighter;
-
-class Measurer extends Feature {
   _styleToDomStyle(style) {
     const _style = { ...style };
     for (const key in style) {
@@ -686,7 +512,7 @@ class Measurer extends Feature {
     });
     const ul = document.createElement("ul");
     Object.assign(ul.style, {
-      listStyle: "none",
+      listStyleType: "inherit",
       padding: "0",
       margin: "0"
     });
@@ -851,7 +677,10 @@ class Measurer extends Feature {
   }
 }
 
-class Parser extends Feature {
+class Parser {
+  constructor(_text) {
+    this._text = _text;
+  }
   parse() {
     let { content, computedStyle: style } = this._text;
     const paragraphs = [];
@@ -872,10 +701,9 @@ class Parser extends Feature {
             if (typeof f === "string") {
               paragraph.addFragment(f);
             } else {
-              const { content: content2, highlight, ...fStyle } = f;
+              const { content: content2, ...fStyle } = f;
               if (content2 !== void 0) {
-                const fragment = paragraph.addFragment(content2, fStyle);
-                fragment.highlight = highlight;
+                paragraph.addFragment(content2, fStyle);
               }
             }
           });
@@ -884,19 +712,17 @@ class Parser extends Feature {
           const { fragments, ...pStyle } = p;
           const paragraph = new Paragraph(pStyle, style);
           fragments.forEach((f) => {
-            const { content: content2, highlight, ...fStyle } = f;
+            const { content: content2, ...fStyle } = f;
             if (content2 !== void 0) {
-              const fragment = paragraph.addFragment(content2, fStyle);
-              fragment.highlight = highlight;
+              paragraph.addFragment(content2, fStyle);
             }
           });
           paragraphs.push(paragraph);
         } else if ("content" in p) {
-          const { content: pData, highlight, ...pStyle } = p;
+          const { content: pData, ...pStyle } = p;
           if (pData !== void 0) {
             const paragraph = new Paragraph(pStyle, style);
-            const fragment = paragraph.addFragment(pData);
-            fragment.highlight = highlight;
+            paragraph.addFragment(pData);
             paragraphs.push(paragraph);
           }
         }
@@ -906,71 +732,274 @@ class Parser extends Feature {
   }
 }
 
-class Reflector extends Feature {
-  // TODO
+function definePlugin(options) {
+  return options;
 }
 
-class Renderer2D extends Feature {
-  setupView(options) {
-    const { ctx, pixelRatio } = options;
-    const { renderBoundingBox } = this._text;
-    const { left, top, width, height } = renderBoundingBox;
-    const view = ctx.canvas;
-    view.dataset.viewbox = String(`${left} ${top} ${width} ${height}`);
-    view.dataset.pixelRatio = String(pixelRatio);
-    view.width = Math.max(1, Math.ceil(width * pixelRatio));
-    view.height = Math.max(1, Math.ceil(height * pixelRatio));
-    view.style.marginTop = `${top}px`;
-    view.style.marginLeft = `${left}px`;
-    view.style.width = `${width}px`;
-    view.style.height = `${height}px`;
-    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-    ctx.scale(pixelRatio, pixelRatio);
-    ctx.translate(-left, -top);
-    return this;
-  }
-  uploadColors(options) {
-    const { ctx } = options;
-    const { paragraphs, computedStyle: style, renderBoundingBox } = this._text;
-    uploadColor(style, renderBoundingBox, ctx);
-    paragraphs.forEach((paragraph) => {
-      uploadColor(paragraph.computedStyle, paragraph.boundingBox, ctx);
-      paragraph.fragments.forEach((fragment) => {
-        uploadColor(fragment.computedStyle, fragment.boundingBox, ctx);
+const tempV1 = new Vector2();
+const tempM1 = new Matrix3();
+const tempM2 = new Matrix3();
+function effect() {
+  return definePlugin({
+    name: "effect",
+    getBoundingBox: (text) => {
+      const { characters, fontSize, effects } = text;
+      const boxes = [];
+      characters.forEach((character) => {
+        effects?.forEach((style) => {
+          const aabb = character.glyphBox.clone();
+          const m = getTransform2D(text, style);
+          tempV1.set(aabb.left, aabb.top);
+          tempV1.applyMatrix3(m);
+          aabb.left = tempV1.x;
+          aabb.top = tempV1.y;
+          tempV1.set(aabb.right, aabb.bottom);
+          tempV1.applyMatrix3(m);
+          aabb.width = tempV1.x - aabb.left;
+          aabb.height = tempV1.y - aabb.top;
+          const shadowOffsetX = (style.shadowOffsetX ?? 0) * fontSize;
+          const shadowOffsetY = (style.shadowOffsetY ?? 0) * fontSize;
+          const textStrokeWidth = Math.max(0.1, style.textStrokeWidth ?? 0) * fontSize;
+          aabb.left += shadowOffsetX - textStrokeWidth;
+          aabb.top += shadowOffsetY - textStrokeWidth;
+          aabb.width += textStrokeWidth * 2;
+          aabb.height += textStrokeWidth * 2;
+          boxes.push(aabb);
+        });
       });
-    });
-    return this;
+      return boxes.length ? BoundingBox.from(...boxes) : void 0;
+    },
+    render: (ctx, text) => {
+      const { characters, renderBoundingBox, effects } = text;
+      if (effects) {
+        effects.forEach((style) => {
+          uploadColor(style, renderBoundingBox, ctx);
+          ctx.save();
+          const [a, c, e, b, d, f] = getTransform2D(text, style).transpose().elements;
+          ctx.transform(a, b, c, d, e, f);
+          characters.forEach((character) => {
+            character.drawTo(ctx, style);
+          });
+          ctx.restore();
+        });
+      } else {
+        characters.forEach((character) => {
+          character.drawTo(ctx);
+        });
+      }
+    }
+  });
+}
+function getTransform2D(text, style) {
+  const { fontSize, renderBoundingBox } = text;
+  const offsetX = (style.offsetX ?? 0) * fontSize;
+  const offsetY = (style.offsetY ?? 0) * fontSize;
+  const PI_2 = Math.PI * 2;
+  const skewX = (style.skewX ?? 0) / 360 * PI_2;
+  const skewY = (style.skewY ?? 0) / 360 * PI_2;
+  const { left, top, width, height } = renderBoundingBox;
+  const centerX = left + width / 2;
+  const centerY = top + height / 2;
+  tempM1.identity();
+  tempM2.makeTranslation(offsetX, offsetY);
+  tempM1.multiply(tempM2);
+  tempM2.makeTranslation(centerX, centerY);
+  tempM1.multiply(tempM2);
+  tempM2.set(1, Math.tan(skewX), 0, Math.tan(skewY), 1, 0, 0, 0, 1);
+  tempM1.multiply(tempM2);
+  tempM2.makeTranslation(-centerX, -centerY);
+  tempM1.multiply(tempM2);
+  return tempM1.clone();
+}
+
+const defaultOptions = {
+  referImage: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI3MiIgdmlld0JveD0iMCAwIDcyIDcyIiBmaWxsPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMyLjQwMjkgMjhIMzUuMTU5NFYzMy4xNzcxQzM1Ljk4MjEgMzIuMzExNSAzNi45NzEgMzEuODczNyAzOC4wOTQ4IDMxLjg3MzdDMzkuNjY3NiAzMS44NzM3IDQwLjkxNjYgMzIuNDI5NSA0MS44MzkgMzMuNTQzN0w0MS44NDAzIDMzLjU0NTNDNDIuNjcxNyAzNC41NzA1IDQzLjA5MTUgMzUuODU1OSA0My4wOTE1IDM3LjM4NzdDNDMuMDkxNSAzOC45NzYxIDQyLjY3MjkgNDAuMzAyOCA0MS44MTgzIDQxLjMzMDRMNDEuODE3MSA0MS4zMzE4QzQwLjg3MzEgNDIuNDQ2MSAzOS41ODMyIDQzIDM3Ljk3MjEgNDNDMzYuNzQ3NyA0MyAzNS43NDg4IDQyLjY1OTkgMzQuOTk1OCA0MS45NjkzVjQyLjcyNDdIMzIuNDAyOVYyOFpNMzcuNTQyOCAzNC4wOTI0QzM2Ljg1NDkgMzQuMDkyNCAzNi4zMDE0IDM0LjM1NjEgMzUuODQ4NyAzNC45MDA0TDM1Ljg0NTIgMzQuOTA0NkMzNS4zMzU4IDM1LjQ4NTMgMzUuMDc3NiAzNi4yOTc2IDM1LjA3NzYgMzcuMzQ4NFYzNy41MDU3QzM1LjA3NzYgMzguNDY0IDM1LjI3NzIgMzkuMjQ0MyAzNS42OTQzIDM5LjgyNzlDMzYuMTQ0MSA0MC40NTg3IDM2Ljc3MjYgNDAuNzgxMyAzNy42MjQ1IDQwLjc4MTNDMzguNTg3NCA0MC43ODEzIDM5LjI3MDcgNDAuNDUyNyAzOS43MTUyIDM5LjgxMjdDNDAuMDcyOCAzOS4yNjg0IDQwLjI3MzcgMzguNDY3MyA0MC4yNzM3IDM3LjM4NzdDNDAuMjczNyAzNi4zMTA1IDQwLjA1MzMgMzUuNTMxMyAzOS42NzgzIDM1LjAwNzdDMzkuMjM3MSAzNC40MDcxIDM4LjUzNDIgMzQuMDkyNCAzNy41NDI4IDM0LjA5MjRaIiBmaWxsPSIjMjIyNTI5Ii8+PHBhdGggZD0iTTQ5Ljg2MTQgMzEuODczN0M0OC4xNTM1IDMxLjg3MzcgNDYuODAxNiAzMi40MjM5IDQ1LjgzNDggMzMuNTM5MkM0NC45MzcgMzQuNTQ3MiA0NC40OTY2IDM1Ljg1NiA0NC40OTY2IDM3LjQyN0M0NC40OTY2IDM5LjAzNjggNDQuOTM2NyA0MC4zNjU5IDQ1Ljg1NTkgNDEuMzk0M0M0Ni44MDMxIDQyLjQ3MDYgNDguMTM0OCA0MyA0OS44MjA1IDQzQzUxLjIyNiA0MyA1Mi4zODI2IDQyLjY1NjMgNTMuMjQ3OSA0MS45Njk3QzU0LjEzNTkgNDEuMjYxNCA1NC43MDYxIDQwLjE4ODcgNTQuOTU3MyAzOC43NzkxTDU1IDM4LjUzOTdINTIuMjQ4NEw1Mi4yMjU5IDM4LjcyMDFDNTIuMTM3OSAzOS40MjUxIDUxLjg5MjUgMzkuOTI3OCA1MS41MTA5IDQwLjI1NThDNTEuMTI5NSA0MC41ODM1IDUwLjU4MzEgNDAuNzYxNiA0OS44NDA5IDQwLjc2MTZDNDkuMDAwMSA0MC43NjE2IDQ4LjM5NDkgNDAuNDcxNSA0Ny45OTA3IDM5LjkyMzdMNDcuOTg3NCAzOS45MTk0QzQ3LjUzNTYgMzkuMzQwMSA0Ny4zMTQ0IDM4LjUwNjIgNDcuMzE0NCAzNy40MDc0QzQ3LjMxNDQgMzYuMzMyMiA0Ny41NTQ0IDM1LjUxNzcgNDguMDA1OCAzNC45NTY4TDQ4LjAwNzggMzQuOTU0M0M0OC40NTM3IDM0LjM4MjUgNDkuMDYxOCAzNC4xMTIxIDQ5Ljg2MTQgMzQuMTEyMUM1MC41MjMgMzQuMTEyMSA1MS4wNDUxIDM0LjI2MTUgNTEuNDI3MiAzNC41NDA3QzUxLjc4ODQgMzQuODE5NCA1Mi4wNTMgMzUuMjQ0NyA1Mi4xODgxIDM1Ljg1NzFMNTIuMjIzOSAzNi4wMTk0SDU0Ljk1NDhMNTQuOTE3IDM1Ljc4MzVDNTQuNzA2MyAzNC40NjYgNTQuMTUzNiAzMy40NzAxIDUzLjI2MzQgMzIuODAxOUw1My4yNjAyIDMyLjc5OTVDNTIuMzk1MSAzMi4xNzU1IDUxLjI2MjEgMzEuODczNyA0OS44NjE0IDMxLjg3MzdaIiBmaWxsPSIjMjIyNTI5Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNS43NTYxIDI4LjI3NTNIMjIuNzQ0TDE3IDQyLjcyNDdIMjAuMDE0MUwyMS4zNDI5IDM5LjIwNDlIMjcuMTU3MkwyOC40ODYgNDIuNzI0N0gzMS41MDAxTDI1Ljc1NjEgMjguMjc1M1pNMjIuMjEyNSAzNi45MDc2TDI0LjI1OTYgMzEuNDUzOUwyNi4yODg1IDM2LjkwNzZIMjIuMjEyNVoiIGZpbGw9IiMyMjI1MjkiLz48L3N2Zz4="
+};
+function parseCharsPerRepeat(size, fontSize, total) {
+  if (size === "cover") {
+    return 0;
+  } else if (typeof size === "string") {
+    if (size.endsWith("%")) {
+      const rate = Number(size.substring(0, size.length - 1)) / 100;
+      return Math.ceil(rate * total / fontSize);
+    } else if (size.endsWith("rem")) {
+      return Number(size.substring(0, size.length - 3));
+    } else {
+      return Math.ceil(Number(size) / fontSize);
+    }
+  } else {
+    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));
+      return value * fontSize / total;
+    } else {
+      return Number(strokeWidth) / total;
+    }
+  } else {
+    return strokeWidth / total;
   }
-  fillBackground(options) {
-    const { ctx } = options;
-    const { computedStyle: style, paragraphs } = this._text;
-    function fillBackground(color, x, y, width, height) {
-      ctx.fillStyle = color;
-      ctx.fillRect(x, y, width, height);
+}
+function highlight(options = {}) {
+  const config = { ...defaultOptions, ...options };
+  const referPaths = parseSvg(config.referImage);
+  const paths = [];
+  const clipRects = [];
+  return definePlugin({
+    name: "highlight",
+    paths,
+    update: (text) => {
+      paths.length = 0;
+      const { characters } = text;
+      let group;
+      const groups = [];
+      let prevStyle;
+      characters.forEach((character) => {
+        const style = character.computedStyle;
+        if (!isNone(style.highlightImage)) {
+          if (style.highlightSize !== "1rem" && prevStyle?.highlightImage === style.highlightImage && prevStyle?.highlightSize === style.highlightSize && prevStyle?.highlightStrokeWidth === style.highlightStrokeWidth && prevStyle?.highlightOverflow === style.highlightOverflow && group.length && group[0].boundingBox.top === character.boundingBox.top && group[0].fontSize === character.fontSize) {
+            group.push(character);
+          } else {
+            group = [];
+            group.push(character);
+            groups.push(group);
+          }
+        }
+        prevStyle = style;
+      });
+      groups.filter((characters2) => characters2.length).map((characters2) => {
+        return {
+          style: characters2[0].computedStyle,
+          box: BoundingBox.from(...characters2.map((c) => c.glyphBox))
+        };
+      }).forEach((group2) => {
+        const { style, box: groupBox } = group2;
+        const { fontSize } = style;
+        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 svg = parseSvgToDom(style.highlightImage);
+        const svgPaths = parseSvg(svg);
+        const box = getPathsBoundingBox(svgPaths);
+        const referBoundingBox = getPathsBoundingBox(referPaths);
+        const scale = {
+          x: charsPerRepeat ? fontSize * charsPerRepeat * (box.width / referBoundingBox.width) / box.width : groupBox.width * (box.width / referBoundingBox.width) / box.width,
+          y: groupBox.height * (box.height / referBoundingBox.height) / box.height
+        };
+        const styleScale = fontSize / box.width * 2;
+        const unitWidth = box.width * scale.x;
+        const total = Math.ceil(groupBox.width / unitWidth);
+        const offset = {
+          x: (box.left - referBoundingBox.left) * scale.x,
+          y: (box.top - referBoundingBox.top) * scale.y
+        };
+        const transform = new Matrix3().translate(-box.left, -box.top).scale(scale.x, scale.y).translate(groupBox.left, groupBox.top).translate(offset.x, offset.y);
+        for (let i = 0; i < total; i++) {
+          const _transform = transform.clone().translate(i * unitWidth, 0);
+          svgPaths.forEach((original) => {
+            const path = original.clone().matrix(_transform);
+            if (path.style.strokeWidth) {
+              path.style.strokeWidth *= styleScale * strokeWidthScale;
+            }
+            if (path.style.strokeMiterlimit) {
+              path.style.strokeMiterlimit *= styleScale;
+            }
+            if (path.style.strokeDashoffset) {
+              path.style.strokeDashoffset *= styleScale;
+            }
+            if (path.style.strokeDasharray) {
+              path.style.strokeDasharray = path.style.strokeDasharray.map((v) => v * styleScale);
+            }
+            paths.push(path);
+            clipRects[paths.length - 1] = highlightOverflow === "hidden" ? new BoundingBox(
+              groupBox.left,
+              groupBox.top - groupBox.height,
+              groupBox.width,
+              groupBox.height * 3
+            ) : void 0;
+          });
+        }
+      });
+    },
+    renderOrder: -1,
+    render: (ctx, text) => {
+      paths.forEach((path, index) => {
+        drawPath({
+          ctx,
+          path,
+          clipRect: clipRects[index],
+          fontSize: text.computedStyle.fontSize
+        });
+      });
     }
-    if (style?.backgroundColor) {
-      fillBackground(style.backgroundColor, 0, 0, ctx.canvas.width, ctx.canvas.height);
+  });
+}
+
+function parseScale(size, fontSize, total) {
+  if (size === "cover") {
+    return 1;
+  } else if (typeof size === "string") {
+    if (size.endsWith("%")) {
+      return Number(size.substring(0, size.length - 1)) / 100;
+    } else if (size.endsWith("rem")) {
+      const value = Number(size.substring(0, size.length - 3));
+      return value * fontSize / total;
+    } else {
+      return Number(size) / total;
     }
-    paragraphs.forEach((paragraph) => {
-      if (paragraph.style?.backgroundColor) {
-        fillBackground(paragraph.computedStyle.backgroundColor, ...paragraph.boundingBox.toArray());
+  } else {
+    return size / total;
+  }
+}
+function listStyle() {
+  const paths = [];
+  return definePlugin({
+    name: "listStyle",
+    paths,
+    update: (text) => {
+      paths.length = 0;
+      const { paragraphs, computedStyle: style, fontSize } = text;
+      let listStyleSize = style.listStyleSize;
+      let image;
+      if (!isNone(style.listStyleImage)) {
+        image = style.listStyleImage;
+      } else if (!isNone(style.listStyleType)) {
+        const r = fontSize * 0.38 / 2;
+        listStyleSize = listStyleSize === "cover" ? r * 2 : listStyleSize;
+        switch (style.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}" />
+</svg>`;
+            break;
+        }
       }
-      paragraph.fragments.forEach((fragment) => {
-        if (fragment.style?.backgroundColor) {
-          fillBackground(fragment.computedStyle.backgroundColor, ...fragment.boundingBox.toArray());
+      if (!image) {
+        return;
+      }
+      const paddingLeft = fontSize * 0.45;
+      const imagePaths = parseSvg(image);
+      const imageBox = getPathsBoundingBox(imagePaths);
+      paragraphs.forEach((paragraph) => {
+        const box = paragraph.fragments[0]?.characters[0]?.getGlyphBoundingBox();
+        if (box) {
+          const scale = parseScale(listStyleSize, style.fontSize, box.height);
+          const reScale = box.height / imageBox.height * scale;
+          const m = new Matrix3();
+          m.translate(-imageBox.left - imageBox.width, -imageBox.top);
+          m.scale(reScale, reScale);
+          m.translate(0, box.height / 2 - imageBox.height * reScale / 2);
+          m.translate(box.left - paddingLeft, box.top);
+          paths.push(...imagePaths.map((p) => p.clone().matrix(m)));
         }
       });
-    });
-    return this;
-  }
-  draw(options) {
-    const { ctx } = options;
-    const { characters } = this._text;
-    characters.forEach((character) => {
-      character.drawTo(ctx);
-    });
-    return this;
-  }
+    }
+  });
 }
 
 var __defProp = Object.defineProperty;
@@ -980,35 +1009,50 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 const defaultTextStyles = {
-  color: "#000",
-  backgroundColor: "rgba(0, 0, 0, 0)",
+  writingMode: "horizontal-tb",
+  verticalAlign: "baseline",
+  lineHeight: 1,
+  letterSpacing: 0,
+  // font
   fontSize: 14,
   fontWeight: "normal",
   fontFamily: "_fallback",
   fontStyle: "normal",
   fontKerning: "normal",
+  // text
   textWrap: "wrap",
   textAlign: "start",
-  verticalAlign: "baseline",
   textTransform: "none",
+  textOrientation: "mixed",
+  // color
+  color: "#000",
+  backgroundColor: "rgba(0, 0, 0, 0)",
+  // text
   textDecoration: "none",
+  // textStroke
   textStrokeWidth: 0,
   textStrokeColor: "#000",
-  lineHeight: 1,
-  letterSpacing: 0,
+  // shadow
   shadowColor: "rgba(0, 0, 0, 0)",
   shadowOffsetX: 0,
   shadowOffsetY: 0,
   shadowBlur: 0,
-  writingMode: "horizontal-tb",
-  textOrientation: "mixed"
+  // listStyle
+  listStyleType: "none",
+  listStyleImage: "none",
+  listStyleSize: "cover",
+  listStylePosition: "outside",
+  // highlight
+  highlightImage: "none",
+  highlightSize: "cover",
+  highlightStrokeWidth: "100%",
+  highlightOverflow: "none"
 };
 class Text {
   constructor(options = {}) {
     __publicField(this, "content");
     __publicField(this, "style");
     __publicField(this, "effects");
-    __publicField(this, "deformation");
     __publicField(this, "measureDom");
     __publicField(this, "needsUpdate", true);
     __publicField(this, "computedStyle", { ...defaultTextStyles });
@@ -1017,16 +1061,13 @@ class Text {
     __publicField(this, "renderBoundingBox", new BoundingBox());
     __publicField(this, "parser", new Parser(this));
     __publicField(this, "measurer", new Measurer(this));
-    __publicField(this, "deformer", new Deformer(this));
-    __publicField(this, "effector", new Effector(this));
-    __publicField(this, "highlighter", new Highlighter(this));
-    __publicField(this, "renderer2D", new Renderer2D(this));
-    const { content = "", style = {}, effects, deformation, measureDom } = options;
+    __publicField(this, "plugins", /* @__PURE__ */ new Map());
+    const { content = "", style = {}, measureDom, effects } = options;
     this.content = content;
     this.style = style;
-    this.effects = effects;
-    this.deformation = deformation;
     this.measureDom = measureDom;
+    this.effects = effects;
+    this.use(effect()).use(highlight(options.highlight)).use(listStyle());
   }
   get fontSize() {
     return this.computedStyle.fontSize;
@@ -1034,6 +1075,10 @@ class Text {
   get characters() {
     return this.paragraphs.flatMap((p) => p.fragments.flatMap((f) => f.characters));
   }
+  use(plugin) {
+    this.plugins.set(plugin.name, plugin);
+    return this;
+  }
   measure(dom = this.measureDom) {
     this.computedStyle = { ...defaultTextStyles, ...this.style };
     const old = this.paragraphs;
@@ -1052,15 +1097,23 @@ class Text {
     this.boundingBox = boundingBox;
     const characters = this.characters;
     characters.forEach((c) => c.update());
-    if (this.deformation) {
-      this.deformer.deform();
-    } else {
-      this.highlighter.highlight();
-    }
+    const plugins = [...this.plugins.values()];
+    plugins.sort((a, b) => (a.updateOrder ?? 0) - (b.updateOrder ?? 0)).forEach((plugin) => {
+      plugin.update?.(this);
+    });
     const min = Vector2.MAX;
     const max = Vector2.MIN;
     characters.forEach((c) => c.getGlyphMinMax(min, max));
     this.renderBoundingBox = new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
+    this.renderBoundingBox = BoundingBox.from(
+      this.renderBoundingBox,
+      ...plugins.map((plugin) => {
+        if (plugin.getBoundingBox) {
+          return plugin.getBoundingBox(this);
+        }
+        return getPathsBoundingBox(plugin.paths ?? []);
+      }).filter(Boolean)
+    );
     return this;
   }
   render(options) {
@@ -1072,28 +1125,24 @@ class Text {
     if (this.needsUpdate) {
       this.update();
     }
-    if (this.effects?.length) {
-      this.renderBoundingBox = BoundingBox.from(...[
-        this.renderBoundingBox,
-        this.effector.getBoundingBox(),
-        this.highlighter.getBoundingBox()
-      ].filter(Boolean));
-    } else {
-      this.renderBoundingBox = BoundingBox.from(...[
-        this.renderBoundingBox,
-        this.highlighter.getBoundingBox()
-      ].filter(Boolean));
-    }
-    this.renderer2D.setupView({ pixelRatio, ctx });
-    this.renderer2D.uploadColors({ ctx });
-    this.highlighter.draw({ ctx });
-    if (this.effects?.length) {
-      this.effector.draw({ ctx });
-    } else {
-      this.renderer2D.draw({ ctx });
-    }
+    setupView(ctx, pixelRatio, this.renderBoundingBox);
+    uploadColors(ctx, this);
+    const plugins = [...this.plugins.values()];
+    plugins.sort((a, b) => (a.renderOrder ?? 0) - (b.renderOrder ?? 0)).forEach((plugin) => {
+      if (plugin.render) {
+        plugin.render?.(ctx, this);
+      } else if (plugin.paths) {
+        plugin.paths.forEach((path) => {
+          drawPath({
+            ctx,
+            path,
+            fontSize: this.computedStyle.fontSize
+          });
+        });
+      }
+    });
     return this;
   }
 }
 
-export { Character, Deformer, Effector, Fragment, Highlighter, Measurer, Paragraph, Parser, Reflector, Renderer2D, Text, defaultHighlightRefer, defaultTextStyles, drawPath, filterEmpty, parseColor, uploadColor };
+export { Character, Fragment, Measurer, Paragraph, Parser, Text, defaultTextStyles, definePlugin, drawPath, effect, fillBackground, filterEmpty, getTransform2D, highlight, isNone, listStyle, parseColor, setupView, uploadColor, uploadColors };