modern-text 1.6.1 → 1.6.3

package/dist/index.cjs

@@ -1,1766 +1,12 @@
 'use strict';
 
-const modernPath2d = require('modern-path2d');
-const modernIdoc = require('modern-idoc');
-const modernFont = require('modern-font');
-const diff = require('diff');
-
-function parseColor(ctx, source, box) {
-  if (typeof source === "string" && source.startsWith("linear-gradient")) {
-    const { x0, y0, x1, y1, stops } = parseCssLinearGradient(source, box.left, box.top, box.width, box.height);
-    const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
-    stops.forEach((stop) => gradient.addColorStop(stop.offset, stop.color));
-    return gradient;
-  }
-  return source;
-}
-function uploadColor(style, box, ctx) {
-  if (style?.color) {
-    style.color = parseColor(ctx, style.color, box);
-  }
-  if (style?.backgroundColor) {
-    style.backgroundColor = parseColor(ctx, style.backgroundColor, box);
-  }
-  if (style?.textStrokeColor) {
-    style.textStrokeColor = parseColor(ctx, style.textStrokeColor, box);
-  }
-}
-function parseCssLinearGradient(css, x, y, width, height) {
-  const str = css.match(/linear-gradient\((.+)\)$/)?.[1] ?? "";
-  const first = str.split(",")[0];
-  const cssDeg = first.includes("deg") ? first : "0deg";
-  const matched = str.replace(cssDeg, "").matchAll(/(#|rgba|rgb)(.+?) ([\d.]+%)/gi);
-  const deg = Number(cssDeg.replace("deg", "")) || 0;
-  const rad = deg * Math.PI / 180;
-  const offsetX = width * Math.sin(rad);
-  const offsetY = height * Math.cos(rad);
-  return {
-    x0: x + width / 2 - offsetX,
-    y0: y + height / 2 + offsetY,
-    x1: x + width / 2 + offsetX,
-    y1: y + height / 2 - offsetY,
-    stops: Array.from(matched).map((res) => {
-      let color = res[2];
-      if (color.startsWith("(")) {
-        color = color.split(",").length > 3 ? `rgba${color}` : `rgb${color}`;
-      } else {
-        color = `#${color}`;
-      }
-      return {
-        offset: Number(res[3].replace("%", "")) / 100,
-        color
-      };
-    })
-  };
-}
-
-function drawPath(options) {
-  const { ctx, path, fontSize, clipRect } = options;
-  ctx.save();
-  ctx.beginPath();
-  const pathStyle = path.style;
-  const style = {
-    ...pathStyle,
-    fill: options.color ?? pathStyle.fill,
-    stroke: options.textStrokeColor ?? pathStyle.stroke,
-    strokeWidth: options.textStrokeWidth ? options.textStrokeWidth * fontSize : pathStyle.strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    shadowOffsetX: (options.shadowOffsetX ?? 0) * fontSize,
-    shadowOffsetY: (options.shadowOffsetY ?? 0) * fontSize,
-    shadowBlur: (options.shadowBlur ?? 0) * fontSize,
-    shadowColor: options.shadowColor
-  };
-  if (clipRect) {
-    ctx.rect(clipRect.left, clipRect.top, clipRect.width, clipRect.height);
-    ctx.clip();
-    ctx.beginPath();
-  }
-  path.drawTo(ctx, style);
-  ctx.restore();
-}
-
-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);
-  const canvasWidth = width;
-  const canvasHeight = height;
-  view.width = Math.max(1, Math.ceil(canvasWidth * pixelRatio));
-  view.height = Math.max(1, Math.ceil(canvasHeight * pixelRatio));
-  view.style.width = `${canvasWidth}px`;
-  view.style.height = `${canvasHeight}px`;
-  ctx.clearRect(0, 0, view.width, view.height);
-  ctx.scale(pixelRatio, pixelRatio);
-  ctx.translate(-left, -top);
-}
-
-function uploadColors(ctx, text) {
-  const { paragraphs, computedStyle: style, glyphBox } = text;
-  uploadColor(style, glyphBox, ctx);
-  paragraphs.forEach((paragraph) => {
-    uploadColor(paragraph.computedStyle, paragraph.lineBox, ctx);
-    paragraph.fragments.forEach((fragment) => {
-      uploadColor(fragment.computedStyle, fragment.inlineBox, ctx);
-    });
-  });
-}
-
-const set1 = /* @__PURE__ */ new Set(["\xA9", "\xAE", "\xF7"]);
-const set2 = /* @__PURE__ */ new Set([
-  "\u2014",
-  "\u2026",
-  "\u201C",
-  "\u201D",
-  "\uFE4F",
-  "\uFE4B",
-  "\uFE4C",
-  "\u2018",
-  "\u2019",
-  "\u02DC"
-]);
-const fsSelectionMap = {
-  1: "italic",
-  32: "bold"
-};
-const macStyleMap = {
-  1: "italic",
-  2: "bold"
-};
-const fontWeightMap = {
-  100: -0.2,
-  200: -0.1,
-  300: 0,
-  400: 0,
-  normal: 0,
-  500: 0.1,
-  600: 0.2,
-  700: 0.3,
-  bold: 0.3,
-  800: 0.4,
-  900: 0.5
-};
-class Character {
-  constructor(content, index, parent) {
-    this.content = content;
-    this.index = index;
-    this.parent = parent;
-  }
-  path = new modernPath2d.Path2D();
-  lineBox = new modernPath2d.BoundingBox();
-  inlineBox = new modernPath2d.BoundingBox();
-  glyphBox;
-  advanceWidth = 0;
-  advanceHeight = 0;
-  underlinePosition = 0;
-  underlineThickness = 0;
-  strikeoutPosition = 0;
-  strikeoutSize = 0;
-  ascender = 0;
-  descender = 0;
-  typoAscender = 0;
-  typoDescender = 0;
-  typoLineGap = 0;
-  winAscent = 0;
-  winDescent = 0;
-  xHeight = 0;
-  capHeight = 0;
-  baseline = 0;
-  centerDiviation = 0;
-  fontStyle;
-  get compatibleGlyphBox() {
-    const size = this.computedStyle.fontSize * 0.8;
-    return this.glyphBox ?? (this.isVertical ? new modernPath2d.BoundingBox(
-      this.lineBox.left + this.lineBox.width / 2 - size / 2,
-      this.lineBox.top,
-      size,
-      this.lineBox.height
-    ) : new modernPath2d.BoundingBox(
-      this.lineBox.left,
-      this.lineBox.top + this.lineBox.height / 2 - size / 2,
-      this.lineBox.width,
-      size
-    ));
-  }
-  get center() {
-    return this.compatibleGlyphBox.center;
-  }
-  get computedStyle() {
-    return this.parent.computedStyle;
-  }
-  get isVertical() {
-    return this.computedStyle.writingMode.includes("vertical");
-  }
-  get fontSize() {
-    return this.computedStyle.fontSize;
-  }
-  get fontHeight() {
-    return this.fontSize * this.computedStyle.lineHeight;
-  }
-  _getFontSFNT(fonts) {
-    const fontFamily = this.computedStyle.fontFamily;
-    const _fonts = fonts ?? modernFont.fonts;
-    const font = fontFamily ? _fonts.get(fontFamily) : _fonts.fallbackFont;
-    return font?.getSFNT();
-  }
-  updateGlyph(sfnt = this._getFontSFNT()) {
-    if (!sfnt) {
-      return this;
-    }
-    const { hhea, os2, post, head } = sfnt;
-    const unitsPerEm = head.unitsPerEm;
-    const ascender = hhea.ascent;
-    const descender = hhea.descent;
-    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.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;
-    this.strikeoutSize = os2.yStrikeoutSize / rate;
-    this.ascender = ascender / rate;
-    this.descender = descender / rate;
-    this.typoAscender = os2.sTypoAscender / rate;
-    this.typoDescender = os2.sTypoDescender / rate;
-    this.typoLineGap = os2.sTypoLineGap / rate;
-    this.winAscent = os2.usWinAscent / rate;
-    this.winDescent = os2.usWinDescent / rate;
-    this.xHeight = os2.sxHeight / rate;
-    this.capHeight = os2.sCapHeight / rate;
-    this.baseline = baseline;
-    this.centerDiviation = advanceHeight / 2 - baseline;
-    this.fontStyle = fsSelectionMap[os2.fsSelection] ?? macStyleMap[head.macStyle];
-    return this;
-  }
-  update(fonts) {
-    const sfnt = this._getFontSFNT(fonts);
-    if (!sfnt) {
-      return this;
-    }
-    this.updateGlyph(sfnt);
-    const {
-      isVertical,
-      content,
-      computedStyle: style,
-      baseline,
-      inlineBox,
-      ascender,
-      descender,
-      typoAscender,
-      fontStyle,
-      advanceWidth,
-      advanceHeight
-    } = this;
-    const { left, top } = inlineBox;
-    const needsItalic = style.fontStyle === "italic" && fontStyle !== "italic";
-    let x = left;
-    let y = top + baseline;
-    let glyphIndex;
-    const path = new modernPath2d.Path2D();
-    if (isVertical) {
-      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 - (advanceHeight - advanceWidth) / 2,
-          style.fontSize
-        )
-      );
-      const point = {
-        y: top - (advanceHeight - advanceWidth) / 2 + advanceHeight / 2,
-        x: x + advanceWidth / 2
-      };
-      if (needsItalic) {
-        this._italic(
-          path,
-          isVertical ? {
-            x: point.x,
-            y: top - (advanceHeight - advanceWidth) / 2 + baseline
-          } : void 0
-        );
-      }
-      path.rotate(90, point);
-    } else {
-      if (glyphIndex !== void 0) {
-        path.addCommands(
-          sfnt.glyphs.get(glyphIndex).getPathCommands(x, y, style.fontSize)
-        );
-        if (needsItalic) {
-          this._italic(
-            path,
-            isVertical ? {
-              x: x + advanceWidth / 2,
-              y: top + typoAscender / (ascender + Math.abs(descender)) * advanceHeight
-            } : void 0
-          );
-        }
-      } else {
-        path.addCommands(sfnt.getPathCommands(content, x, y, style.fontSize));
-        if (needsItalic) {
-          this._italic(
-            path,
-            isVertical ? { x: x + advanceHeight / 2, y } : void 0
-          );
-        }
-      }
-    }
-    const fontWeight = style.fontWeight ?? 400;
-    if (fontWeight in fontWeightMap && ((fontWeight === 700 || fontWeight === "bold") && fontStyle !== "bold")) {
-      path.bold(fontWeightMap[fontWeight] * style.fontSize * 0.05);
-    }
-    path.style = {
-      fill: style.color,
-      stroke: style.textStrokeWidth ? style.textStrokeColor : "none",
-      strokeWidth: style.textStrokeWidth ? style.textStrokeWidth * style.fontSize * 0.03 : 0
-    };
-    this.path = path;
-    this.glyphBox = this.getGlyphBoundingBox();
-    return this;
-  }
-  _italic(path, startPoint) {
-    path.skew(-0.24, 0, startPoint || {
-      y: this.inlineBox.top + this.baseline,
-      x: this.inlineBox.left + this.inlineBox.width / 2
-    });
-  }
-  getGlyphMinMax(min, max, withStyle) {
-    if (this.path.curves[0]?.curves.length) {
-      return this.path.getMinMax(min, max, withStyle);
-    } else {
-      return void 0;
-    }
-  }
-  getGlyphBoundingBox(withStyle) {
-    const minMax = this.getGlyphMinMax(void 0, void 0, withStyle);
-    if (!minMax) {
-      return void 0;
-    }
-    const { min, max } = minMax;
-    return new modernPath2d.BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
-  }
-  drawTo(ctx, config = {}) {
-    const style = this.computedStyle;
-    const options = {
-      ctx,
-      path: this.path,
-      fontSize: style.fontSize,
-      color: style.color,
-      ...config
-    };
-    if (this.glyphBox) {
-      drawPath(options);
-    } else {
-      ctx.save();
-      ctx.beginPath();
-      const pathStyle = this.path.style;
-      const _style = {
-        ...pathStyle,
-        fill: options.color ?? pathStyle.fill,
-        stroke: options.textStrokeColor ?? pathStyle.stroke,
-        strokeWidth: options.textStrokeWidth ? options.textStrokeWidth * options.fontSize : pathStyle.strokeWidth,
-        shadowOffsetX: (options.shadowOffsetX ?? 0) * options.fontSize,
-        shadowOffsetY: (options.shadowOffsetY ?? 0) * options.fontSize,
-        shadowBlur: (options.shadowBlur ?? 0) * options.fontSize,
-        shadowColor: options.shadowColor
-      };
-      modernPath2d.setCanvasContext(ctx, _style);
-      ctx.font = `${options.fontSize}px ${options.fontFamily}`;
-      if (this.isVertical) {
-        ctx.textBaseline = "middle";
-        ctx.fillText(this.content, this.inlineBox.left, this.inlineBox.top + this.inlineBox.height / 2);
-      } else {
-        ctx.textBaseline = "alphabetic";
-        ctx.fillText(this.content, this.inlineBox.left, this.inlineBox.top + this.baseline);
-      }
-      ctx.restore();
-    }
-  }
-}
-
-function createSVGLoader() {
-  const loaded = /* @__PURE__ */ new Map();
-  async function load(svg) {
-    if (!loaded.has(svg)) {
-      loaded.set(svg, svg);
-      try {
-        loaded.set(svg, await fetch(svg).then((rep) => rep.text()));
-      } catch (err) {
-        console.warn(err);
-        loaded.delete(svg);
-      }
-    }
-  }
-  function needsLoad(source) {
-    return source.startsWith("http://") || source.startsWith("https://") || source.startsWith("blob://");
-  }
-  return {
-    loaded,
-    needsLoad,
-    load
-  };
-}
-
-function createSVGParser(loader) {
-  const parsed = /* @__PURE__ */ new Map();
-  function parse(svg) {
-    let result = parsed.get(svg);
-    if (!result) {
-      const dom = modernPath2d.svgToDom(
-        loader.needsLoad(svg) ? loader.loaded.get(svg) ?? svg : svg
-      );
-      const pathSet = modernPath2d.svgToPath2DSet(dom);
-      result = { dom, pathSet };
-      parsed.set(svg, result);
-    }
-    return result;
-  }
-  return {
-    parsed,
-    parse
-  };
-}
-
-function parseValueNumber(value, ctx) {
-  if (typeof value === "number") {
-    return value;
-  } else {
-    if (value.endsWith("%")) {
-      value = value.substring(0, value.length - 1);
-      return Math.ceil(Number(value) / 100 * ctx.total);
-    } else if (value.endsWith("rem")) {
-      value = value.substring(0, value.length - 3);
-      return Number(value) * ctx.fontSize;
-    } else if (value.endsWith("em")) {
-      value = value.substring(0, value.length - 2);
-      return Number(value) * ctx.fontSize;
-    } else {
-      return Number(value);
-    }
-  }
-}
-function parseColormap(colormap) {
-  return modernIdoc.isNone(colormap) ? {} : colormap;
-}
-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) => isEqualValue(obj1[key], obj2[key]));
-}
-function isEqualValue(val1, val2) {
-  const typeof1 = typeof val1;
-  const typeof2 = typeof val2;
-  if (typeof1 === typeof2) {
-    if (typeof1 === "object") {
-      return isEqualObject(val1, val2);
-    }
-    return val1 === val2;
-  }
-  return false;
-}
-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;
-  const res = {};
-  for (const key in val) {
-    if (val[key] !== "" && val[key] !== void 0) {
-      res[key] = val[key];
-    }
-  }
-  return res;
-}
-
-class Fragment {
-  constructor(content, style = {}, parent) {
-    this.content = content;
-    this.style = style;
-    this.parent = parent;
-    this.updateComputedStyle().initCharacters();
-  }
-  inlineBox = new modernPath2d.BoundingBox();
-  get computedContent() {
-    const style = this.computedStyle;
-    return style.textTransform === "uppercase" ? this.content.toUpperCase() : style.textTransform === "lowercase" ? this.content.toLowerCase() : this.content;
-  }
-  updateComputedStyle() {
-    this.computedStyle = {
-      ...this.parent.computedStyle,
-      ...filterEmpty(this.style)
-    };
-    return this;
-  }
-  initCharacters() {
-    const characters = [];
-    let index = 0;
-    for (const c of this.computedContent) {
-      characters.push(new Character(c, index++, this));
-    }
-    this.characters = characters;
-    return this;
-  }
-}
-
-class Paragraph {
-  constructor(style, parentStyle) {
-    this.style = style;
-    this.parentStyle = parentStyle;
-    this.updateComputedStyle();
-  }
-  lineBox = new modernPath2d.BoundingBox();
-  fragments = [];
-  updateComputedStyle() {
-    this.computedStyle = {
-      ...filterEmpty(this.parentStyle),
-      ...filterEmpty(this.style)
-    };
-    return this;
-  }
-  addFragment(content, style) {
-    const fragment = new Fragment(content, style, this);
-    this.fragments.push(fragment);
-    return fragment;
-  }
-}
-
-function definePlugin(options) {
-  return options;
-}
-
-class Measurer {
-  static notZeroStyles = /* @__PURE__ */ new Set([
-    "width",
-    "height"
-  ]);
-  static pxStyles = /* @__PURE__ */ new Set([
-    "width",
-    "height",
-    "fontSize",
-    "letterSpacing",
-    "textStrokeWidth",
-    "textIndent",
-    "shadowOffsetX",
-    "shadowOffsetY",
-    "shadowBlur",
-    "margin",
-    "marginLeft",
-    "marginTop",
-    "marginRight",
-    "marginBottom",
-    "padding",
-    "paddingLeft",
-    "paddingTop",
-    "paddingRight",
-    "paddingBottom"
-  ]);
-  _toDOMStyle(style) {
-    const _style = {};
-    for (const key in style) {
-      const value = style[key];
-      if (Measurer.notZeroStyles.has(key) && value === 0) ; else if (typeof value === "number" && Measurer.pxStyles.has(key)) {
-        _style[key] = `${value}px`;
-      } else {
-        _style[key] = value;
-      }
-    }
-    return _style;
-  }
-  /**
-   * <section style="...">
-   *   <ul>
-   *     <li style="...">
-   *       <span style="...">...</span>
-   *       <span>...</span>
-   *     </li>
-   *   </ul>
-   * </section>
-   */
-  createDOM(paragraphs, rootStyle) {
-    const dom = document.createElement("section");
-    const style = { ...rootStyle };
-    const isHorizontal = rootStyle.writingMode.includes("horizontal");
-    switch (rootStyle.textAlign) {
-      case "start":
-      case "left":
-        style.justifyContent = "flex-start";
-        break;
-      case "center":
-        style.justifyContent = "center";
-        break;
-      case "end":
-      case "right":
-        style.justifyContent = "flex-end";
-        break;
-    }
-    switch (rootStyle.verticalAlign) {
-      case "top":
-        style.alignItems = "flex-start";
-        break;
-      case "middle":
-        style.alignItems = "center";
-        break;
-      case "bottom":
-        style.alignItems = "flex-end";
-        break;
-    }
-    const isFlex = Boolean(style.justifyContent || style.alignItems);
-    Object.assign(dom.style, {
-      ...this._toDOMStyle({
-        ...style,
-        boxSizing: style.boxSizing ?? "border-box",
-        display: style.display ?? (isFlex ? "inline-flex" : void 0),
-        width: style.width ?? "max-content",
-        height: style.height ?? "max-content"
-      }),
-      whiteSpace: "pre-wrap",
-      wordBreak: "break-all"
-    });
-    const ul = document.createElement("ul");
-    Object.assign(ul.style, {
-      verticalAlign: "inherit",
-      listStyleType: "inherit",
-      padding: "0",
-      margin: "0",
-      width: isFlex && isHorizontal ? "100%" : void 0,
-      height: isFlex && !isHorizontal ? "100%" : void 0
-    });
-    paragraphs.forEach((paragraph) => {
-      const li = document.createElement("li");
-      Object.assign(li.style, {
-        verticalAlign: "inherit",
-        ...this._toDOMStyle(paragraph.style)
-      });
-      paragraph.fragments.forEach((fragment) => {
-        const span = document.createElement("span");
-        Object.assign(span.style, {
-          verticalAlign: "inherit",
-          ...this._toDOMStyle(fragment.style)
-        });
-        span.appendChild(document.createTextNode(fragment.content));
-        li.appendChild(span);
-      });
-      ul.appendChild(li);
-    });
-    dom.appendChild(ul);
-    return dom;
-  }
-  measureDOMText(text) {
-    const range = document.createRange();
-    range.selectNodeContents(text);
-    const data = text.data ?? "";
-    let offset = 0;
-    return Array.from(data).map((char) => {
-      const start = offset += data.substring(offset).indexOf(char);
-      const end = start + char.length;
-      offset += char.length;
-      range.setStart(text, Math.max(start, 0));
-      range.setEnd(text, end);
-      const rects = range.getClientRects?.() ?? [range.getBoundingClientRect()];
-      let rect = rects[rects.length - 1];
-      if (rects.length > 1 && rect.width < 2) {
-        rect = rects[rects.length - 2];
-      }
-      const content = range.toString();
-      if (content !== "" && rect && rect.width + rect.height !== 0) {
-        return {
-          content,
-          top: rect.top,
-          left: rect.left,
-          height: rect.height,
-          width: rect.width
-        };
-      }
-      return void 0;
-    }).filter(Boolean);
-  }
-  measureDOM(dom) {
-    const paragraphs = [];
-    const fragments = [];
-    const characters = [];
-    dom.querySelectorAll("li").forEach((pDOM, paragraphIndex) => {
-      const pBox = pDOM.getBoundingClientRect();
-      paragraphs.push({
-        paragraphIndex,
-        left: pBox.left,
-        top: pBox.top,
-        width: pBox.width,
-        height: pBox.height
-      });
-      pDOM.querySelectorAll(":scope > *").forEach((fDOM, fragmentIndex) => {
-        const fBox = fDOM.getBoundingClientRect();
-        fragments.push({
-          paragraphIndex,
-          fragmentIndex,
-          left: fBox.left,
-          top: fBox.top,
-          width: fBox.width,
-          height: fBox.height
-        });
-        let characterIndex = 0;
-        if (!fDOM.children.length && fDOM.firstChild instanceof window.Text) {
-          this.measureDOMText(fDOM.firstChild).forEach((char) => {
-            characters.push({
-              ...char,
-              newParagraphIndex: -1,
-              paragraphIndex,
-              fragmentIndex,
-              characterIndex: characterIndex++,
-              textWidth: -1,
-              textHeight: -1
-            });
-          });
-        } else {
-          fDOM.querySelectorAll(":scope > *").forEach((cDOM) => {
-            if (cDOM.firstChild instanceof window.Text) {
-              this.measureDOMText(cDOM.firstChild).forEach((char) => {
-                characters.push({
-                  ...char,
-                  newParagraphIndex: -1,
-                  paragraphIndex,
-                  fragmentIndex,
-                  characterIndex: characterIndex++,
-                  textWidth: -1,
-                  textHeight: -1
-                });
-              });
-            }
-          });
-        }
-      });
-    });
-    return {
-      paragraphs,
-      fragments,
-      characters
-    };
-  }
-  measureParagraphDOM(paragraphs, dom) {
-    const rect = dom.getBoundingClientRect();
-    const measured = this.measureDOM(dom);
-    measured.paragraphs.forEach((p) => {
-      const _p = paragraphs[p.paragraphIndex];
-      _p.lineBox.left = p.left - rect.left;
-      _p.lineBox.top = p.top - rect.top;
-      _p.lineBox.width = p.width;
-      _p.lineBox.height = p.height;
-    });
-    measured.fragments.forEach((f) => {
-      const _f = paragraphs[f.paragraphIndex].fragments[f.fragmentIndex];
-      _f.inlineBox.left = f.left - rect.left;
-      _f.inlineBox.top = f.top - rect.top;
-      _f.inlineBox.width = f.width;
-      _f.inlineBox.height = f.height;
-    });
-    const results = [];
-    let i = 0;
-    measured.characters.forEach((character) => {
-      const { paragraphIndex, fragmentIndex, characterIndex } = character;
-      results.push({
-        ...character,
-        newParagraphIndex: paragraphIndex,
-        left: character.left - rect.left,
-        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;
-      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 {
-      paragraphs,
-      boundingBox: new modernPath2d.BoundingBox(0, 0, rect.width, rect.height)
-    };
-  }
-  measure(paragraphs, rootStyle, dom) {
-    let destory;
-    if (!dom) {
-      dom = this.createDOM(paragraphs, rootStyle);
-      Object.assign(dom.style, {
-        position: "fixed",
-        visibility: "hidden"
-      });
-      document.body.appendChild(dom);
-      destory = () => dom?.parentNode?.removeChild(dom);
-    }
-    const result = this.measureParagraphDOM(paragraphs, dom);
-    destory?.();
-    return result;
-  }
-}
-
-function background() {
-  const pathSet = new modernPath2d.Path2DSet();
-  const loader = createSVGLoader();
-  const parser = createSVGParser(loader);
-  return {
-    name: "background",
-    pathSet,
-    load: async (text) => {
-      const { backgroundImage } = text.style;
-      if (backgroundImage && loader.needsLoad(backgroundImage)) {
-        await loader.load(backgroundImage);
-      }
-    },
-    update: (text) => {
-      pathSet.paths.length = 0;
-      const { style, lineBox, isVertical } = text;
-      const {
-        backgroundImage,
-        backgroundSize,
-        backgroundColormap
-      } = style;
-      if (modernIdoc.isNone(backgroundImage))
-        return;
-      const { pathSet: imagePathSet } = parser.parse(backgroundImage);
-      const imageBox = imagePathSet.getBoundingBox(true);
-      let x, y, width, height;
-      if (isVertical) {
-        ({ x: y, y: x, width: height, height: width } = lineBox);
-      } else {
-        ({ x, y, width, height } = lineBox);
-      }
-      const colormap = parseColormap(backgroundColormap ?? "none");
-      const paths = imagePathSet.paths.map((p) => {
-        const cloned = p.clone();
-        if (cloned.style.fill && cloned.style.fill in colormap) {
-          cloned.style.fill = colormap[cloned.style.fill];
-        }
-        if (cloned.style.stroke && cloned.style.stroke in colormap) {
-          cloned.style.stroke = colormap[cloned.style.stroke];
-        }
-        return cloned;
-      });
-      let scaleX;
-      let scaleY;
-      if (backgroundSize === "rigid") {
-        scaleX = Math.max(text.fontSize * 5 / imageBox.width);
-        scaleY = scaleX;
-        const dist = new modernPath2d.Vector2();
-        dist.x = imageBox.width - width / scaleX;
-        dist.y = imageBox.height - height / scaleY;
-        paths.forEach((path) => {
-          path.applyTransform((p) => {
-            const hasX = p.x > imageBox.left + imageBox.width / 2;
-            const hasY = p.y > imageBox.top + imageBox.height / 2;
-            if (hasX) {
-              p.x -= dist.x;
-            }
-            if (hasY) {
-              p.y -= dist.y;
-            }
-          });
-        });
-      } else {
-        scaleX = width / imageBox.width;
-        scaleY = height / imageBox.height;
-      }
-      const transform = new modernPath2d.Matrix3();
-      transform.translate(-imageBox.x, -imageBox.y);
-      transform.scale(scaleX, scaleY);
-      if (isVertical) {
-        transform.translate(-width / 2, -height / 2);
-        transform.rotate(-Math.PI / 2);
-        transform.translate(height / 2, width / 2);
-      }
-      transform.translate(x, y);
-      paths.forEach((path) => {
-        path.applyTransform((p) => {
-          p.applyMatrix3(transform);
-        });
-      });
-      pathSet.paths.push(...paths);
-    },
-    renderOrder: -2,
-    render: (ctx, text) => {
-      const { boundingBox, computedStyle: style } = text;
-      if (!modernIdoc.isNone(style.backgroundColor)) {
-        ctx.fillStyle = style.backgroundColor;
-        ctx.fillRect(...boundingBox.array);
-      }
-      pathSet.paths.forEach((path) => {
-        drawPath({ ctx, path, fontSize: style.fontSize });
-        if (text.debug) {
-          const box = new modernPath2d.Path2DSet([path]).getBoundingBox();
-          if (box) {
-            ctx.strokeRect(box.x, box.y, box.width, box.height);
-          }
-        }
-      });
-      text.paragraphs.forEach((p) => {
-        const { lineBox, style: style2 } = p;
-        if (!modernIdoc.isNone(style2.backgroundColor)) {
-          ctx.fillStyle = style2.backgroundColor;
-          ctx.fillRect(...lineBox.array);
-        }
-        p.fragments.forEach((f) => {
-          const { inlineBox, style: style3 } = f;
-          if (!modernIdoc.isNone(style3.backgroundColor)) {
-            ctx.fillStyle = style3.backgroundColor;
-            ctx.fillRect(...inlineBox.array);
-          }
-        });
-      });
-    }
-  };
-}
-
-function getHighlightStyle(style) {
-  const {
-    highlight: highlight2,
-    highlightImage,
-    highlightReferImage,
-    highlightColormap,
-    highlightLine,
-    highlightSize,
-    highlightThickness
-  } = style;
-  return {
-    image: highlight2?.image ?? highlightImage ?? "none",
-    referImage: highlight2?.referImage ?? highlightReferImage ?? "none",
-    colormap: highlight2?.colormap ?? highlightColormap ?? "none",
-    line: highlight2?.line ?? highlightLine ?? "none",
-    size: highlight2?.size ?? highlightSize ?? "cover",
-    thickness: highlight2?.thickness ?? highlightThickness ?? "100%"
-  };
-}
-function highlight() {
-  const pathSet = new modernPath2d.Path2DSet();
-  const clipRects = [];
-  const loader = createSVGLoader();
-  const parser = createSVGParser(loader);
-  return definePlugin({
-    name: "highlight",
-    pathSet,
-    load: async (text) => {
-      const set = /* @__PURE__ */ new Set();
-      text.forEachCharacter((character) => {
-        const { computedStyle: style } = character;
-        const { image, referImage } = getHighlightStyle(style);
-        if (image && loader.needsLoad(image)) {
-          set.add(image);
-        }
-        if (referImage && loader.needsLoad(referImage)) {
-          set.add(referImage);
-        }
-      });
-      await Promise.all(Array.from(set).map((src) => loader.load(src)));
-    },
-    update: (text) => {
-      clipRects.length = 0;
-      pathSet.paths.length = 0;
-      let groups = [];
-      let group;
-      let prevHighlight;
-      text.forEachCharacter((character) => {
-        const {
-          computedStyle: style
-        } = character;
-        const highlight2 = getHighlightStyle(style);
-        const {
-          image,
-          colormap,
-          line,
-          size,
-          thickness
-        } = highlight2;
-        if (!modernIdoc.isNone(image)) {
-          const { inlineBox, isVertical } = character;
-          const { fontSize } = style;
-          if ((!prevHighlight || isEqualValue(prevHighlight.image, image) && isEqualValue(prevHighlight.colormap, colormap) && isEqualValue(prevHighlight.line, line) && isEqualValue(prevHighlight.size, size) && isEqualValue(prevHighlight.thickness, thickness)) && group?.length && (isVertical ? group[0].inlineBox.left === inlineBox.left : group[0].inlineBox.top === inlineBox.top) && group[0].fontSize === fontSize) {
-            group.push(character);
-          } else {
-            group = [];
-            group.push(character);
-            groups.push(group);
-          }
-        } else {
-          if (group?.length) {
-            group = [];
-            groups.push(group);
-          }
-        }
-        prevHighlight = highlight2;
-      });
-      groups = groups.filter((characters) => characters.length);
-      for (let i = 0; i < groups.length; i++) {
-        const characters = groups[i];
-        const char = characters[0];
-        const groupBox = modernPath2d.BoundingBox.from(...characters.map((c) => c.compatibleGlyphBox));
-        if (!groupBox.height || !groupBox.width) {
-          continue;
-        }
-        const {
-          computedStyle: style,
-          isVertical,
-          inlineBox,
-          compatibleGlyphBox: glyphBox,
-          strikeoutPosition,
-          underlinePosition
-        } = char;
-        const { fontSize } = style;
-        const {
-          image,
-          referImage,
-          colormap,
-          line,
-          size,
-          thickness
-        } = getHighlightStyle(style);
-        const _thickness = parseValueNumber(thickness, { fontSize, total: groupBox.width }) / groupBox.width;
-        const _colormap = parseColormap(colormap);
-        const { pathSet: imagePathSet, dom: imageDom } = parser.parse(image);
-        const imageBox = imagePathSet.getBoundingBox(true);
-        const styleScale = fontSize / imageBox.width * 2;
-        const targetBox = new modernPath2d.BoundingBox().copy(groupBox);
-        if (isVertical) {
-          targetBox.width = groupBox.height;
-          targetBox.height = groupBox.width;
-          targetBox.left = groupBox.left + groupBox.width;
-        }
-        const rawWidth = Math.floor(targetBox.width);
-        let userWidth = rawWidth;
-        if (size !== "cover") {
-          userWidth = parseValueNumber(size, { fontSize, total: groupBox.width }) || rawWidth;
-          targetBox.width = userWidth;
-        }
-        const hasReferImage = !modernIdoc.isNone(referImage) && modernIdoc.isNone(line);
-        if (hasReferImage) {
-          imageBox.copy(
-            parser.parse(referImage).pathSet.getBoundingBox(true)
-          );
-        } else {
-          let _line;
-          if (modernIdoc.isNone(line)) {
-            if (imageBox.width / imageBox.height > 4) {
-              _line = "underline";
-              const viewBox = imageDom.getAttribute("viewBox");
-              if (viewBox) {
-                const [_x, y, _w, h] = viewBox.split(" ").map((v) => Number(v));
-                const viewCenter = y + h / 2;
-                if (imageBox.y < viewCenter && imageBox.y + imageBox.height > viewCenter) {
-                  _line = "line-through";
-                } else if (imageBox.y + imageBox.height < viewCenter) {
-                  _line = "overline";
-                } else {
-                  _line = "underline";
-                }
-              }
-            } else {
-              _line = "outline";
-            }
-          } else {
-            _line = line;
-          }
-          switch (_line) {
-            case "outline": {
-              const paddingX = targetBox.width * 0.2;
-              const paddingY = targetBox.height * 0.2;
-              if (isVertical) {
-                targetBox.x -= paddingY / 2;
-                targetBox.y -= paddingX / 2;
-                targetBox.x -= targetBox.height;
-              } else {
-                targetBox.x -= paddingX / 2;
-                targetBox.y -= paddingY / 2;
-              }
-              targetBox.width += paddingX;
-              targetBox.height += paddingY;
-              break;
-            }
-            case "overline":
-              targetBox.height = imageBox.height * styleScale;
-              if (isVertical) {
-                targetBox.x = inlineBox.left + inlineBox.width;
-              } else {
-                targetBox.y = inlineBox.top;
-              }
-              break;
-            case "line-through":
-              targetBox.height = imageBox.height * styleScale;
-              if (isVertical) {
-                targetBox.x = inlineBox.left + inlineBox.width - strikeoutPosition + targetBox.height / 2;
-              } else {
-                targetBox.y = inlineBox.top + strikeoutPosition - targetBox.height / 2;
-              }
-              break;
-            case "underline":
-              targetBox.height = imageBox.height * styleScale;
-              if (isVertical) {
-                targetBox.x = glyphBox.left + glyphBox.width - underlinePosition;
-              } else {
-                targetBox.y = inlineBox.top + underlinePosition;
-              }
-              break;
-          }
-        }
-        const transform = new modernPath2d.Matrix3();
-        transform.translate(-imageBox.x, -imageBox.y);
-        transform.scale(targetBox.width / imageBox.width, targetBox.height / imageBox.height);
-        if (isVertical) {
-          const tx = targetBox.width / 2;
-          const ty = targetBox.height / 2;
-          if (!hasReferImage) {
-            transform.translate(-tx, -ty);
-          }
-          transform.rotate(-Math.PI / 2);
-          if (!hasReferImage) {
-            transform.translate(ty, tx);
-          }
-        }
-        transform.translate(targetBox.x, targetBox.y);
-        for (let i2 = 0; i2 < Math.ceil(rawWidth / userWidth); i2++) {
-          const _transform = transform.clone();
-          if (isVertical) {
-            _transform.translate(0, i2 * targetBox.width);
-          } else {
-            _transform.translate(i2 * targetBox.width, 0);
-          }
-          imagePathSet.paths.forEach((originalPath) => {
-            const path = originalPath.clone().applyTransform(_transform);
-            if (path.style.strokeWidth)
-              path.style.strokeWidth *= styleScale * _thickness;
-            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);
-            if (path.style.fill && path.style.fill in _colormap) {
-              path.style.fill = _colormap[path.style.fill];
-            }
-            if (path.style.stroke && path.style.stroke in _colormap) {
-              path.style.stroke = _colormap[path.style.stroke];
-            }
-            pathSet.paths.push(path);
-            if (rawWidth !== userWidth) {
-              if (isVertical) {
-                clipRects[pathSet.paths.length - 1] = new modernPath2d.BoundingBox(
-                  groupBox.left - groupBox.width * 2,
-                  groupBox.top,
-                  groupBox.width * 4,
-                  groupBox.height
-                );
-              } else {
-                clipRects[pathSet.paths.length - 1] = new modernPath2d.BoundingBox(
-                  groupBox.left,
-                  groupBox.top - groupBox.height * 2,
-                  groupBox.width,
-                  groupBox.height * 4
-                );
-              }
-            }
-          });
-        }
-      }
-    },
-    renderOrder: -1,
-    getBoundingBox: () => {
-      const boundingBoxs = [];
-      pathSet.paths.forEach((path, index) => {
-        const clipRect = clipRects[index];
-        let box = path.getBoundingBox();
-        if (clipRect) {
-          const x = Math.max(box.x, clipRect.x);
-          const y = Math.max(box.y, clipRect.y);
-          const right = Math.min(box.right, clipRect.right);
-          const bottom = Math.min(box.bottom, clipRect.bottom);
-          box = new modernPath2d.BoundingBox(x, y, right - x, bottom - y);
-        }
-        boundingBoxs.push(box);
-      });
-      return modernPath2d.BoundingBox.from(...boundingBoxs);
-    },
-    render: (ctx, text) => {
-      pathSet.paths.forEach((path, index) => {
-        drawPath({
-          ctx,
-          path,
-          fontSize: text.computedStyle.fontSize,
-          clipRect: clipRects[index]
-        });
-        if (text.debug) {
-          const box = new modernPath2d.Path2DSet([path]).getBoundingBox();
-          if (box) {
-            ctx.strokeRect(box.x, box.y, box.width, box.height);
-          }
-        }
-      });
-    }
-  });
-}
-
-function genDisc(r, color) {
-  return `<svg width="${r * 2}" height="${r * 2}" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="${r}" cy="${r}" r="${r}" fill="${color}" />
-</svg>`;
-}
-function listStyle() {
-  const pathSet = new modernPath2d.Path2DSet();
-  return definePlugin({
-    name: "listStyle",
-    pathSet,
-    update: (text) => {
-      pathSet.paths.length = 0;
-      const { paragraphs, isVertical, fontSize } = text;
-      const padding = fontSize * 0.45;
-      paragraphs.forEach((paragraph) => {
-        const {
-          computedStyle: style
-        } = paragraph;
-        const {
-          color,
-          listStyleImage,
-          listStyleColormap,
-          listStyleSize,
-          listStyleType
-        } = style;
-        const colormap = parseColormap(listStyleColormap);
-        let size = listStyleSize;
-        let image;
-        if (!modernIdoc.isNone(listStyleImage)) {
-          image = listStyleImage;
-        } else if (!modernIdoc.isNone(listStyleType)) {
-          const r = fontSize * 0.38 / 2;
-          size = size === "cover" ? r * 2 : size;
-          switch (listStyleType) {
-            case "disc":
-              image = genDisc(r, String(color));
-              break;
-          }
-        }
-        if (!image) {
-          return;
-        }
-        const imagePathSet = modernPath2d.svgToPath2DSet(image);
-        const imageBox = imagePathSet.getBoundingBox();
-        const char = paragraph.fragments[0]?.characters[0];
-        if (!char) {
-          return;
-        }
-        const { inlineBox } = char;
-        const scale = size === "cover" ? 1 : parseValueNumber(size, { total: fontSize, fontSize }) / fontSize;
-        const m = new modernPath2d.Matrix3();
-        if (isVertical) {
-          const _scale = fontSize / imageBox.height * scale;
-          m.translate(-imageBox.left, -imageBox.top).rotate(Math.PI / 2).scale(_scale, _scale).translate(
-            inlineBox.left + (inlineBox.width - imageBox.height * _scale) / 2,
-            inlineBox.top - padding
-          );
-        } else {
-          const _scale = fontSize / imageBox.height * scale;
-          m.translate(-imageBox.left, -imageBox.top).scale(_scale, _scale).translate(
-            inlineBox.left - imageBox.width * _scale - padding,
-            inlineBox.top + (inlineBox.height - imageBox.height * _scale) / 2
-          );
-        }
-        pathSet.paths.push(...imagePathSet.paths.map((p) => {
-          const path = p.clone();
-          path.applyTransform(m);
-          if (path.style.fill && path.style.fill in colormap) {
-            path.style.fill = colormap[path.style.fill];
-          }
-          if (path.style.stroke && path.style.stroke in colormap) {
-            path.style.stroke = colormap[path.style.stroke];
-          }
-          return path;
-        }));
-      });
-    }
-  });
-}
-
-function outline() {
-  return {
-    name: "outline"
-    // TODO
-  };
-}
-
-const tempV1 = new modernPath2d.Vector2();
-const tempM1 = new modernPath2d.Matrix3();
-const tempM2 = new modernPath2d.Matrix3();
-function render() {
-  return definePlugin({
-    name: "render",
-    getBoundingBox: (text) => {
-      const { characters, fontSize, effects } = text;
-      const boxes = [];
-      characters.forEach((character) => {
-        effects?.forEach((style) => {
-          if (!character.glyphBox) {
-            return;
-          }
-          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 boxes.length ? modernPath2d.BoundingBox.from(...boxes) : void 0;
-    },
-    render: (ctx, text) => {
-      const { paragraphs, glyphBox, effects } = text;
-      if (effects) {
-        effects.forEach((style) => {
-          uploadColor(style, glyphBox, ctx);
-          ctx.save();
-          const [a, c, e, b, d, f] = getTransform2D(text, style).transpose().elements;
-          ctx.transform(a, b, c, d, e, f);
-          text.forEachCharacter((character) => {
-            character.drawTo(ctx, style);
-          });
-          ctx.restore();
-        });
-      } else {
-        paragraphs.forEach((paragraph) => {
-          paragraph.fragments.forEach((fragment) => {
-            fragment.characters.forEach((character) => {
-              character.drawTo(ctx);
-            });
-          });
-        });
-      }
-      if (text.debug) {
-        paragraphs.forEach((paragraph) => {
-          ctx.strokeRect(paragraph.lineBox.x, paragraph.lineBox.y, paragraph.lineBox.width, paragraph.lineBox.height);
-        });
-      }
-    }
-  });
-}
-function getTransform2D(text, style) {
-  const { fontSize, glyphBox } = text;
-  const translateX = (style.translateX ?? 0) * fontSize;
-  const translateY = (style.translateY ?? 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 } = glyphBox;
-  const centerX = left + width / 2;
-  const centerY = top + height / 2;
-  tempM1.identity();
-  tempM2.makeTranslation(translateX, translateY);
-  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();
-}
-
-function textDecoration() {
-  const pathSet = new modernPath2d.Path2DSet();
-  return definePlugin({
-    name: "textDecoration",
-    pathSet,
-    update: (text) => {
-      pathSet.paths.length = 0;
-      const groups = [];
-      let group;
-      let prevStyle;
-      text.forEachCharacter((character) => {
-        const {
-          computedStyle: style,
-          isVertical,
-          inlineBox,
-          underlinePosition,
-          underlineThickness,
-          strikeoutPosition,
-          strikeoutSize
-        } = character;
-        const { color, textDecoration: textDecoration2, writingMode } = style;
-        if (!modernIdoc.isNone(textDecoration2)) {
-          let flag = false;
-          if (prevStyle?.textDecoration === textDecoration2 && prevStyle?.writingMode === writingMode && prevStyle?.color === color && (isVertical ? group[0].inlineBox.left === inlineBox.left : group[0].inlineBox.top === inlineBox.top)) {
-            switch (textDecoration2) {
-              case "underline":
-                if (group[0].underlinePosition === underlinePosition && group[0].underlineThickness === underlineThickness) {
-                  flag = true;
-                }
-                break;
-              case "line-through":
-                if (group[0].strikeoutPosition === strikeoutPosition && group[0].strikeoutSize === strikeoutSize) {
-                  flag = true;
-                }
-                break;
-            }
-          }
-          if (flag) {
-            group.push(character);
-          } else {
-            group = [];
-            group.push(character);
-            groups.push(group);
-          }
-          prevStyle = style;
-        } else {
-          prevStyle = void 0;
-        }
-      });
-      groups.forEach((group2) => {
-        const {
-          computedStyle: style,
-          isVertical,
-          underlinePosition,
-          underlineThickness,
-          strikeoutPosition,
-          strikeoutSize
-        } = group2[0];
-        const {
-          color,
-          textDecoration: textDecoration2
-        } = style;
-        const inlineBox = modernPath2d.BoundingBox.from(...group2.map((c) => c.inlineBox));
-        const { left, top, width, height } = inlineBox;
-        let position = isVertical ? left + width : top;
-        const direction = isVertical ? -1 : 1;
-        let thickness = 0;
-        switch (textDecoration2) {
-          case "overline":
-            thickness = underlineThickness * 2;
-            break;
-          case "underline":
-            position += direction * underlinePosition;
-            thickness = underlineThickness * 2;
-            break;
-          case "line-through":
-            position += direction * strikeoutPosition;
-            thickness = strikeoutSize * 2;
-            break;
-        }
-        position -= thickness;
-        let path;
-        if (isVertical) {
-          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 {
-          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
-          });
-        }
-        pathSet.paths.push(path);
-      });
-    },
-    render: (ctx, text) => {
-      const { effects, computedStyle: style } = text;
-      if (effects) {
-        effects.forEach((effectStyle) => {
-          ctx.save();
-          const [a, c, e, b, d, f] = getTransform2D(text, effectStyle).transpose().elements;
-          ctx.transform(a, b, c, d, e, f);
-          pathSet.paths.forEach((path) => {
-            drawPath({
-              ctx,
-              path,
-              fontSize: style.fontSize,
-              ...effectStyle
-            });
-          });
-          ctx.restore();
-        });
-      } else {
-        pathSet.paths.forEach((path) => {
-          drawPath({
-            ctx,
-            path,
-            fontSize: style.fontSize
-          });
-        });
-      }
-    }
-  });
-}
-
-var __defProp$1 = Object.defineProperty;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$1(target, key, result);
-  return result;
-};
-const textDefaultStyle = modernIdoc.getDefaultStyle();
-class Text extends modernIdoc.EventEmitter {
-  needsUpdate = true;
-  computedStyle = { ...textDefaultStyle };
-  paragraphs = [];
-  lineBox = new modernPath2d.BoundingBox();
-  rawGlyphBox = new modernPath2d.BoundingBox();
-  glyphBox = new modernPath2d.BoundingBox();
-  pathBox = new modernPath2d.BoundingBox();
-  boundingBox = new modernPath2d.BoundingBox();
-  measurer = new Measurer();
-  plugins = /* @__PURE__ */ new Map();
-  get fontSize() {
-    return this.computedStyle.fontSize;
-  }
-  get isVertical() {
-    return this.computedStyle.writingMode.includes("vertical");
-  }
-  get characters() {
-    return this.paragraphs.flatMap((p) => p.fragments.flatMap((f) => f.characters));
-  }
-  constructor(options = {}) {
-    super();
-    this.set(options);
-  }
-  set(options = {}) {
-    this.debug = options.debug ?? false;
-    this.content = modernIdoc.normalizeTextContent(options.content ?? "");
-    this.effects = options.effects;
-    this.style = options.style ?? {};
-    this.measureDOM = options.measureDOM;
-    this.fonts = options.fonts;
-    this.use(background()).use(outline()).use(listStyle()).use(textDecoration()).use(highlight()).use(render());
-    (options.plugins ?? []).forEach((plugin) => {
-      this.use(plugin);
-    });
-    this.updateParagraphs();
-  }
-  onUpdateProperty(key, newValue, oldValue, declaration) {
-    this.emit("updateProperty", key, newValue, oldValue, declaration);
-  }
-  use(plugin) {
-    this.plugins.set(plugin.name, plugin);
-    return this;
-  }
-  forEachCharacter(handle) {
-    this.paragraphs.forEach((p, paragraphIndex) => {
-      p.fragments.forEach((f, fragmentIndex) => {
-        f.characters.forEach((c, characterIndex) => {
-          handle(c, { paragraphIndex, fragmentIndex, characterIndex });
-        });
-      });
-    });
-    return this;
-  }
-  async load() {
-    await Promise.all(Array.from(this.plugins.values()).map((p) => p.load?.(this)));
-  }
-  updateParagraphs() {
-    this.computedStyle = { ...textDefaultStyle, ...this.style };
-    const { content, computedStyle: style } = this;
-    const paragraphs = [];
-    content.forEach((p) => {
-      const { fragments, ...pStyle } = p;
-      const paragraph = new Paragraph(pStyle, style);
-      fragments.forEach((f) => {
-        const { content: content2, ...fStyle } = f;
-        if (content2 !== void 0) {
-          paragraph.addFragment(content2, fStyle);
-        }
-      });
-      paragraphs.push(paragraph);
-    });
-    this.paragraphs = paragraphs;
-    return this;
-  }
-  createDOM() {
-    this.updateParagraphs();
-    return this.measurer.createDOM(this.paragraphs, this.computedStyle);
-  }
-  measure(dom = this.measureDOM) {
-    const old = {
-      paragraphs: this.paragraphs,
-      lineBox: this.lineBox,
-      rawGlyphBox: this.rawGlyphBox,
-      glyphBox: this.glyphBox,
-      pathBox: this.pathBox,
-      boundingBox: this.boundingBox
-    };
-    this.updateParagraphs();
-    const result = this.measurer.measure(this.paragraphs, this.computedStyle, dom);
-    this.paragraphs = result.paragraphs;
-    this.lineBox = result.boundingBox;
-    this.characters.forEach((c) => {
-      c.update(this.fonts);
-    });
-    this.rawGlyphBox = this.getGlyphBox();
-    Array.from(this.plugins.values()).sort((a, b) => (a.updateOrder ?? 0) - (b.updateOrder ?? 0)).forEach((plugin) => {
-      plugin.update?.(this);
-    });
-    this.glyphBox = this.getGlyphBox();
-    this.updatePathBox().updateBoundingBox();
-    for (const key in old) {
-      result[key] = this[key];
-      this[key] = old[key];
-    }
-    this.emit("measure", { text: this, result });
-    return result;
-  }
-  getGlyphBox() {
-    const min = modernPath2d.Vector2.MAX;
-    const max = modernPath2d.Vector2.MIN;
-    this.characters.forEach((c) => {
-      if (!c.getGlyphMinMax(min, max)) {
-        const { inlineBox: glyphBox } = c;
-        const { left, top, width, height } = glyphBox;
-        const a = new modernPath2d.Vector2(left, top);
-        const b = new modernPath2d.Vector2(left + width, top + height);
-        min.min(a, b);
-        max.max(a, b);
-      }
-    });
-    return new modernPath2d.BoundingBox(
-      min.x,
-      min.y,
-      max.x - min.x,
-      max.y - min.y
-    );
-  }
-  updatePathBox() {
-    this.pathBox = modernPath2d.BoundingBox.from(
-      this.glyphBox,
-      ...Array.from(this.plugins.values()).map((plugin) => {
-        return plugin.getBoundingBox ? plugin.getBoundingBox(this) : plugin.pathSet?.getBoundingBox();
-      }).filter(Boolean)
-    );
-    return this;
-  }
-  updateBoundingBox() {
-    this.boundingBox = modernPath2d.BoundingBox.from(
-      this.rawGlyphBox,
-      this.lineBox,
-      this.pathBox
-    );
-    return this;
-  }
-  requestUpdate() {
-    this.needsUpdate = true;
-    return this;
-  }
-  update(dom = this.measureDOM) {
-    const result = this.measure(dom);
-    for (const key in result) {
-      this[key] = result[key];
-    }
-    this.emit("update", { text: this });
-    this.needsUpdate = false;
-    return this;
-  }
-  render(options) {
-    const { view, pixelRatio = 2 } = options;
-    const ctx = view.getContext("2d");
-    if (!ctx) {
-      return;
-    }
-    if (this.needsUpdate) {
-      this.update();
-    }
-    setupView(ctx, pixelRatio, this.boundingBox);
-    uploadColors(ctx, this);
-    Array.from(this.plugins.values()).sort((a, b) => (a.renderOrder ?? 0) - (b.renderOrder ?? 0)).forEach((plugin) => {
-      if (plugin.render) {
-        plugin.render?.(ctx, this);
-      } else if (plugin.pathSet) {
-        const style = this.computedStyle;
-        plugin.pathSet.paths.forEach((path) => {
-          drawPath({
-            ctx,
-            path,
-            fontSize: style.fontSize
-          });
-        });
-      }
-    });
-    this.emit("render", { text: this, view, pixelRatio });
-    options.onContext?.(ctx);
-  }
-  toString() {
-    return this.content.flatMap((p) => p.fragments.map((f) => f.content)).join("");
-  }
-}
-__decorateClass$1([
-  modernIdoc.property()
-], Text.prototype, "debug");
-__decorateClass$1([
-  modernIdoc.property()
-], Text.prototype, "content");
-__decorateClass$1([
-  modernIdoc.property()
-], Text.prototype, "effects");
-__decorateClass$1([
-  modernIdoc.property()
-], Text.prototype, "style");
-__decorateClass$1([
-  modernIdoc.property()
-], Text.prototype, "measureDOM");
-__decorateClass$1([
-  modernIdoc.property()
-], Text.prototype, "fonts");
+const Text = require('./shared/modern-text.Dr7A9mkS.cjs');
+require('modern-idoc');
+require('modern-path2d');
+require('modern-font');
 
 function measureText(options, load) {
-  const text = new Text(options);
+  const text = new Text.Text(options);
   if (load) {
     return text.load().then(() => {
       return text.measure();
@@ -1770,7 +16,7 @@ function measureText(options, load) {
 }
 
 function renderText(options, load) {
-  const text = new Text(options);
+  const text = new Text.Text(options);
   if (load) {
     return text.load().then(() => {
       return text.render(options);
@@ -1779,551 +25,33 @@ function renderText(options, load) {
   return text.render(options);
 }
 
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-function normalizeStyle(style) {
-  const newStyle = {};
-  for (const key in style) {
-    if (key !== "id" && style[key] !== void 0 && style[key] !== "") {
-      newStyle[key] = style[key];
-    }
-  }
-  return newStyle;
-}
-function textContentToCharStyles(textContent) {
-  return textContent.flatMap((p) => {
-    const { fragments } = p;
-    const res = fragments.flatMap((f) => {
-      const { content, ...fStyle } = f;
-      return Array.from(modernIdoc.normalizeCRLF(content)).map(() => ({ ...fStyle }));
-    });
-    if (modernIdoc.isCRLF(modernIdoc.normalizeCRLF(fragments[fragments.length - 1]?.content ?? ""))) {
-      return res;
-    }
-    return [...res, {}];
-  });
-}
-function isEqualStyle(style1, style2) {
-  const keys1 = Object.keys(style1);
-  const keys2 = Object.keys(style2);
-  const keys = Array.from(/* @__PURE__ */ new Set([...keys1, ...keys2]));
-  return !keys.length || keys.every((key) => style1[key] === style2[key]);
-}
-const emojiRE = /[#*0-9]\uFE0F?\u20E3|[\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u23CF\u23ED-\u23EF\u23F1\u23F2\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB\u25FC\u25FE\u2600-\u2604\u260E\u2611\u2614\u2615\u2618\u2620\u2622\u2623\u2626\u262A\u262E\u262F\u2638-\u263A\u2640\u2642\u2648-\u2653\u265F\u2660\u2663\u2665\u2666\u2668\u267B\u267E\u267F\u2692\u2694-\u2697\u2699\u269B\u269C\u26A0\u26A7\u26AA\u26B0\u26B1\u26BD\u26BE\u26C4\u26C8\u26CF\u26D1\u26E9\u26F0-\u26F5\u26F7\u26F8\u26FA\u2702\u2708\u2709\u270F\u2712\u2714\u2716\u271D\u2721\u2733\u2734\u2744\u2747\u2757\u2763\u27A1\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B55\u3030\u303D\u3297\u3299]\uFE0F?|[\u261D\u270C\u270D](?:\uD83C[\uDFFB-\uDFFF]|\uFE0F)?|[\u270A\u270B](?:\uD83C[\uDFFB-\uDFFF])?|[\u23E9-\u23EC\u23F0\u23F3\u25FD\u2693\u26A1\u26AB\u26C5\u26CE\u26D4\u26EA\u26FD\u2705\u2728\u274C\u274E\u2753-\u2755\u2795-\u2797\u27B0\u27BF\u2B50]|\u26D3\uFE0F?(?:\u200D\uD83D\uDCA5)?|\u26F9(?:\uD83C[\uDFFB-\uDFFF]|\uFE0F)?(?:\u200D[\u2640\u2642]\uFE0F?)?|\u2764\uFE0F?(?:\u200D(?:\uD83D\uDD25|\uD83E\uDE79))?|\uD83C(?:[\uDC04\uDD70\uDD71\uDD7E\uDD7F\uDE02\uDE37\uDF21\uDF24-\uDF2C\uDF36\uDF7D\uDF96\uDF97\uDF99-\uDF9B\uDF9E\uDF9F\uDFCD\uDFCE\uDFD4-\uDFDF\uDFF5\uDFF7]\uFE0F?|[\uDF85\uDFC2\uDFC7](?:\uD83C[\uDFFB-\uDFFF])?|[\uDFC4\uDFCA](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDFCB\uDFCC](?:\uD83C[\uDFFB-\uDFFF]|\uFE0F)?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDCCF\uDD8E\uDD91-\uDD9A\uDE01\uDE1A\uDE2F\uDE32-\uDE36\uDE38-\uDE3A\uDE50\uDE51\uDF00-\uDF20\uDF2D-\uDF35\uDF37-\uDF43\uDF45-\uDF4A\uDF4C-\uDF7C\uDF7E-\uDF84\uDF86-\uDF93\uDFA0-\uDFC1\uDFC5\uDFC6\uDFC8\uDFC9\uDFCF-\uDFD3\uDFE0-\uDFF0\uDFF8-\uDFFF]|\uDDE6\uD83C[\uDDE8-\uDDEC\uDDEE\uDDF1\uDDF2\uDDF4\uDDF6-\uDDFA\uDDFC\uDDFD\uDDFF]|\uDDE7\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEF\uDDF1-\uDDF4\uDDF6-\uDDF9\uDDFB\uDDFC\uDDFE\uDDFF]|\uDDE8\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDEE\uDDF0-\uDDF7\uDDFA-\uDDFF]|\uDDE9\uD83C[\uDDEA\uDDEC\uDDEF\uDDF0\uDDF2\uDDF4\uDDFF]|\uDDEA\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDED\uDDF7-\uDDFA]|\uDDEB\uD83C[\uDDEE-\uDDF0\uDDF2\uDDF4\uDDF7]|\uDDEC\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEE\uDDF1-\uDDF3\uDDF5-\uDDFA\uDDFC\uDDFE]|\uDDED\uD83C[\uDDF0\uDDF2\uDDF3\uDDF7\uDDF9\uDDFA]|\uDDEE\uD83C[\uDDE8-\uDDEA\uDDF1-\uDDF4\uDDF6-\uDDF9]|\uDDEF\uD83C[\uDDEA\uDDF2\uDDF4\uDDF5]|\uDDF0\uD83C[\uDDEA\uDDEC-\uDDEE\uDDF2\uDDF3\uDDF5\uDDF7\uDDFC\uDDFE\uDDFF]|\uDDF1\uD83C[\uDDE6-\uDDE8\uDDEE\uDDF0\uDDF7-\uDDFB\uDDFE]|\uDDF2\uD83C[\uDDE6\uDDE8-\uDDED\uDDF0-\uDDFF]|\uDDF3\uD83C[\uDDE6\uDDE8\uDDEA-\uDDEC\uDDEE\uDDF1\uDDF4\uDDF5\uDDF7\uDDFA\uDDFF]|\uDDF4\uD83C\uDDF2|\uDDF5\uD83C[\uDDE6\uDDEA-\uDDED\uDDF0-\uDDF3\uDDF7-\uDDF9\uDDFC\uDDFE]|\uDDF6\uD83C\uDDE6|\uDDF7\uD83C[\uDDEA\uDDF4\uDDF8\uDDFA\uDDFC]|\uDDF8\uD83C[\uDDE6-\uDDEA\uDDEC-\uDDF4\uDDF7-\uDDF9\uDDFB\uDDFD-\uDDFF]|\uDDF9\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDED\uDDEF-\uDDF4\uDDF7\uDDF9\uDDFB\uDDFC\uDDFF]|\uDDFA\uD83C[\uDDE6\uDDEC\uDDF2\uDDF3\uDDF8\uDDFE\uDDFF]|\uDDFB\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDEE\uDDF3\uDDFA]|\uDDFC\uD83C[\uDDEB\uDDF8]|\uDDFD\uD83C\uDDF0|\uDDFE\uD83C[\uDDEA\uDDF9]|\uDDFF\uD83C[\uDDE6\uDDF2\uDDFC]|\uDF44(?:\u200D\uD83D\uDFEB)?|\uDF4B(?:\u200D\uD83D\uDFE9)?|\uDFC3(?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D(?:[\u2640\u2642]\uFE0F?(?:\u200D\u27A1\uFE0F?)?|\u27A1\uFE0F?))?|\uDFF3\uFE0F?(?:\u200D(?:\u26A7\uFE0F?|\uD83C\uDF08))?|\uDFF4(?:\u200D\u2620\uFE0F?|\uDB40\uDC67\uDB40\uDC62\uDB40(?:\uDC65\uDB40\uDC6E\uDB40\uDC67|\uDC73\uDB40\uDC63\uDB40\uDC74|\uDC77\uDB40\uDC6C\uDB40\uDC73)\uDB40\uDC7F)?)|\uD83D(?:[\uDC3F\uDCFD\uDD49\uDD4A\uDD6F\uDD70\uDD73\uDD76-\uDD79\uDD87\uDD8A-\uDD8D\uDDA5\uDDA8\uDDB1\uDDB2\uDDBC\uDDC2-\uDDC4\uDDD1-\uDDD3\uDDDC-\uDDDE\uDDE1\uDDE3\uDDE8\uDDEF\uDDF3\uDDFA\uDECB\uDECD-\uDECF\uDEE0-\uDEE5\uDEE9\uDEF0\uDEF3]\uFE0F?|[\uDC42\uDC43\uDC46-\uDC50\uDC66\uDC67\uDC6B-\uDC6D\uDC72\uDC74-\uDC76\uDC78\uDC7C\uDC83\uDC85\uDC8F\uDC91\uDCAA\uDD7A\uDD95\uDD96\uDE4C\uDE4F\uDEC0\uDECC](?:\uD83C[\uDFFB-\uDFFF])?|[\uDC6E\uDC70\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4\uDEB5](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDD74\uDD90](?:\uD83C[\uDFFB-\uDFFF]|\uFE0F)?|[\uDC00-\uDC07\uDC09-\uDC14\uDC16-\uDC25\uDC27-\uDC3A\uDC3C-\uDC3E\uDC40\uDC44\uDC45\uDC51-\uDC65\uDC6A\uDC79-\uDC7B\uDC7D-\uDC80\uDC84\uDC88-\uDC8E\uDC90\uDC92-\uDCA9\uDCAB-\uDCFC\uDCFF-\uDD3D\uDD4B-\uDD4E\uDD50-\uDD67\uDDA4\uDDFB-\uDE2D\uDE2F-\uDE34\uDE37-\uDE41\uDE43\uDE44\uDE48-\uDE4A\uDE80-\uDEA2\uDEA4-\uDEB3\uDEB7-\uDEBF\uDEC1-\uDEC5\uDED0-\uDED2\uDED5-\uDED7\uDEDC-\uDEDF\uDEEB\uDEEC\uDEF4-\uDEFC\uDFE0-\uDFEB\uDFF0]|\uDC08(?:\u200D\u2B1B)?|\uDC15(?:\u200D\uD83E\uDDBA)?|\uDC26(?:\u200D(?:\u2B1B|\uD83D\uDD25))?|\uDC3B(?:\u200D\u2744\uFE0F?)?|\uDC41\uFE0F?(?:\u200D\uD83D\uDDE8\uFE0F?)?|\uDC68(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D(?:[\uDC68\uDC69]\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFC-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB\uDFFD-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB-\uDFFD\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB-\uDFFE])))?))?|\uDC69(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?[\uDC68\uDC69]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D(?:[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?|\uDC69\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?))|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFC-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB\uDFFD-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB-\uDFFD\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB-\uDFFE])))?))?|\uDC6F(?:\u200D[\u2640\u2642]\uFE0F?)?|\uDD75(?:\uD83C[\uDFFB-\uDFFF]|\uFE0F)?(?:\u200D[\u2640\u2642]\uFE0F?)?|\uDE2E(?:\u200D\uD83D\uDCA8)?|\uDE35(?:\u200D\uD83D\uDCAB)?|\uDE36(?:\u200D\uD83C\uDF2B\uFE0F?)?|\uDE42(?:\u200D[\u2194\u2195]\uFE0F?)?|\uDEB6(?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D(?:[\u2640\u2642]\uFE0F?(?:\u200D\u27A1\uFE0F?)?|\u27A1\uFE0F?))?)|\uD83E(?:[\uDD0C\uDD0F\uDD18-\uDD1F\uDD30-\uDD34\uDD36\uDD77\uDDB5\uDDB6\uDDBB\uDDD2\uDDD3\uDDD5\uDEC3-\uDEC5\uDEF0\uDEF2-\uDEF8](?:\uD83C[\uDFFB-\uDFFF])?|[\uDD26\uDD35\uDD37-\uDD39\uDD3D\uDD3E\uDDB8\uDDB9\uDDCD\uDDCF\uDDD4\uDDD6-\uDDDD](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDDDE\uDDDF](?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDD0D\uDD0E\uDD10-\uDD17\uDD20-\uDD25\uDD27-\uDD2F\uDD3A\uDD3F-\uDD45\uDD47-\uDD76\uDD78-\uDDB4\uDDB7\uDDBA\uDDBC-\uDDCC\uDDD0\uDDE0-\uDDFF\uDE70-\uDE7C\uDE80-\uDE89\uDE8F-\uDEC2\uDEC6\uDECE-\uDEDC\uDEDF-\uDEE9]|\uDD3C(?:\u200D[\u2640\u2642]\uFE0F?|\uD83C[\uDFFB-\uDFFF])?|\uDDCE(?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D(?:[\u2640\u2642]\uFE0F?(?:\u200D\u27A1\uFE0F?)?|\u27A1\uFE0F?))?|\uDDD1(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1|\uDDD1\u200D\uD83E\uDDD2(?:\u200D\uD83E\uDDD2)?|\uDDD2(?:\u200D\uD83E\uDDD2)?))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFC-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB\uDFFD-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB-\uDFFD\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB-\uDFFE]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?))?|\uDEF1(?:\uD83C(?:\uDFFB(?:\u200D\uD83E\uDEF2\uD83C[\uDFFC-\uDFFF])?|\uDFFC(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB\uDFFD-\uDFFF])?|\uDFFD(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])?|\uDFFE(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB-\uDFFD\uDFFF])?|\uDFFF(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB-\uDFFE])?))?)/g;
-function parseHTML(html) {
-  const template = document.createElement("template");
-  template.innerHTML = html;
-  return template.content.cloneNode(true);
-}
-class TextEditor extends HTMLElement {
-  static observedAttributes = [
-    "width",
-    "height"
-  ];
-  static register() {
-    customElements.define("text-editor", this);
-  }
-  _text = new Text();
-  get text() {
-    return this._text;
-  }
-  set text(value) {
-    if (value instanceof Text) {
-      this._text = value;
-    } else {
-      this._text.set(value);
-    }
-    this.setTextInput(this.getTextValue());
-    this.render();
-  }
-  pixelRatio = 2;
-  composition = false;
-  selection = [0, 0];
-  prevSelection = [0, 0];
-  _oldText = "";
-  $preview;
-  $textInput;
-  $cursor;
-  get selectionMinMax() {
-    return {
-      min: Math.min(...this.selection),
-      max: Math.max(...this.selection)
-    };
-  }
-  get selectedCharacters() {
-    const { min, max } = this.selectionMinMax;
-    return this.selectableCharacters.filter((_char, index) => {
-      return index >= min && index < max;
-    });
-  }
-  get selectableCharacters() {
-    const paragraphs = [];
-    this.text?.paragraphs.forEach((p, paragraphIndex) => {
-      p.fragments.forEach((f, fragmentIndex) => {
-        f.characters.forEach((c) => {
-          if (!paragraphs[paragraphIndex])
-            paragraphs[paragraphIndex] = [];
-          if (!paragraphs[paragraphIndex][fragmentIndex])
-            paragraphs[paragraphIndex][fragmentIndex] = [];
-          paragraphs[paragraphIndex][fragmentIndex].push(c);
-        });
-      });
-    });
-    const toSelectableCharacter = (c) => {
-      return {
-        color: c.computedStyle.color,
-        left: c.lineBox.left - this.text.boundingBox.left,
-        top: c.lineBox.top - this.text.boundingBox.top,
-        width: c.lineBox.width,
-        height: c.lineBox.height,
-        content: c.content
-      };
-    };
-    const map = [];
-    let pos = 0;
-    paragraphs.forEach((p) => {
-      if (p.length === 1 && p[0].length === 1 && modernIdoc.isCRLF(p[0][0].content)) {
-        const c = p[0][0];
-        map[pos] = {
-          ...toSelectableCharacter(c),
-          isCrlf: true
-        };
-      } else {
-        p.forEach((f) => {
-          f.forEach((c) => {
-            map[pos] = {
-              ...toSelectableCharacter(c)
-            };
-            pos++;
-            if (!modernIdoc.isCRLF(c.content)) {
-              map[pos] = {
-                ...toSelectableCharacter(c),
-                content: " ",
-                isLastSelected: true
-              };
-            }
-          });
-        });
-      }
-      pos++;
-    });
-    if (map[0]) {
-      map[0].isFirst = true;
-    }
-    if (map[map.length - 1]) {
-      map[map.length - 1].isLast = true;
-    }
-    return map;
-  }
-  get cursorPosition() {
-    let left = 0;
-    let top = 0;
-    const char = this.selectableCharacters[this.selectionMinMax.min];
-    if (char?.isLastSelected) {
-      if (this.text.isVertical) {
-        top += char?.height ?? 0;
-      } else {
-        left += char?.width ?? 0;
-      }
-    }
-    left += char?.left ?? 0;
-    top += char?.top ?? 0;
-    return {
-      color: char?.color,
-      left,
-      top,
-      height: char?.height ?? 0,
-      width: char?.width ?? 0
-    };
-  }
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow({ mode: "open" });
-    shadowRoot.appendChild(
-      parseHTML(`
-  <style>
-  :host {
-    position: absolute;
-    width: 0;
-    height: 0;
-  }
-
-  .preview {
-    position: absolute;
-    left: 0;
-    top: 0;
-    --selection-color: rgba(var(--color, 0, 0, 0), 0.4);
-  }
-
-  .text-input {
-    position: absolute;
-    opacity: 0;
-    caret-color: transparent;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    border: 0;
-  }
-
-  .cursor {
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
-
-  .cursor.blink {
-    animation: cursor-blink 1s steps(2, start) infinite;
-  }
-
-  @keyframes cursor-blink {
-    100% {
-      display: none;
-    }
-  }
-  </style>
-
-  <canvas class="preview"></canvas>
-
-  <textarea class="text-input" autofocus></textarea>
-
-  <div class="cursor blink"></div>
-`)
-    );
-    this.$preview = shadowRoot.querySelector(".preview");
-    this.$textInput = shadowRoot.querySelector(".text-input");
-    this.$cursor = shadowRoot.querySelector(".cursor");
-    this.$textInput.addEventListener("compositionstart", () => this.composition = true);
-    this.$textInput.addEventListener("compositionend", () => this.composition = false);
-    this.$textInput.addEventListener("keydown", this.onKeydown.bind(this));
-    this.$textInput.addEventListener("input", this.onInput.bind(this));
-    this.$textInput.addEventListener("blur", this.onBlur.bind(this));
-    this.$textInput.addEventListener("mousedown", this.onMousedown.bind(this));
-  }
-  getTextValue() {
-    return modernIdoc.textContentToString(
-      this.getContentValue(
-        this.text.content
-      )
-    );
-  }
-  getContentValue(content, newString = modernIdoc.textContentToString(content), oldString = newString) {
-    newString = modernIdoc.normalizeCRLF(newString);
-    newString = newString.replace(emojiRE, (emoji) => {
-      if (Array.from(emoji).length > 1) {
-        return "?";
-      }
-      return emoji;
-    });
-    oldString = modernIdoc.normalizeCRLF(oldString);
-    const oldStyles = textContentToCharStyles(content);
-    const styles = [];
-    let styleIndex = 0;
-    let oldStyleIndex = 0;
-    let prevOldStyle = {};
-    const changes = diff.diffChars(oldString, newString);
-    changes.forEach((change) => {
-      const chars = Array.from(change.value);
-      if (change.removed) {
-        oldStyleIndex += chars.length;
-      } else {
-        chars.forEach(() => {
-          if (change.added) {
-            styles[styleIndex] = { ...prevOldStyle };
-          } else {
-            prevOldStyle = normalizeStyle(oldStyles[oldStyleIndex]);
-            styles[styleIndex] = { ...prevOldStyle };
-            oldStyleIndex++;
-          }
-          styleIndex++;
-        });
-      }
-    });
-    let charIndex = 0;
-    const newContents = [];
-    modernIdoc.normalizeTextContent(newString).forEach((p, pI) => {
-      const { fragments: _, ...pStyle } = content[pI] ?? {};
-      let newParagraph = { ...pStyle, fragments: [] };
-      let newFragment;
-      p.fragments.forEach((f) => {
-        Array.from(f.content).forEach((char) => {
-          const style = styles[charIndex] ?? {};
-          if (newFragment) {
-            const { content: _2, ..._style } = newFragment;
-            if (isEqualStyle(style, _style)) {
-              newFragment.content += char;
-            } else {
-              newParagraph.fragments.push(newFragment);
-              newFragment = { ...style, content: char };
-            }
-          } else {
-            newFragment = { ...style, content: char };
-          }
-          charIndex++;
-        });
-      });
-      if (!modernIdoc.isCRLF(p.fragments[p.fragments.length - 1]?.content ?? "")) {
-        charIndex++;
-      }
-      if (newFragment) {
-        newParagraph.fragments.push(newFragment);
-      }
-      if (newParagraph.fragments.length) {
-        newContents.push(newParagraph);
-        newParagraph = { ...pStyle, fragments: [] };
-      }
-    });
-    return newContents;
-  }
-  setTextInput(newText) {
-    this.$textInput.value = newText;
-    this._oldText = newText;
-  }
-  onInput() {
-    const newText = this.$textInput.value;
-    this.text.content = this.getContentValue(
-      this.text.content,
-      newText,
-      this._oldText
-    );
-    this._oldText = newText;
-    this.updateSelection();
-    this.render();
-  }
-  _timer;
-  onKeydown(e) {
-    e.stopPropagation();
-    switch (e.key) {
-      case "Escape":
-        return this.$textInput.blur();
-    }
-    this.updateSelection();
-    this.render();
-    setTimeout(() => {
-      this.updateSelection();
-      this.render();
-    }, 0);
-    setTimeout(() => {
-      this.updateSelection();
-      this.render();
-    }, 100);
-  }
-  onBlur() {
-    this.emit("done", this.text);
-  }
-  findNearest(options) {
-    const { x, y, xWeight = 1, yWeight = 1 } = options;
-    const char = this.selectableCharacters.reduce(
-      (prev, current, index) => {
-        const diff = Math.abs(current.left + current.width / 2 - x) * xWeight + Math.abs(current.top + current.height / 2 - y) * yWeight;
-        if (diff < prev.diff) {
-          return {
-            diff,
-            index,
-            value: current
-          };
-        }
-        return prev;
-      },
-      {
-        diff: Number.MAX_SAFE_INTEGER,
-        index: -1,
-        value: void 0
-      }
-    );
-    if (char?.value) {
-      const middleX = char.value.left + char.value.width / 2;
-      if (x > middleX && !char.value.isCrlf && !char.value.isLastSelected) {
-        return char.index + 1;
-      }
-      return char.index;
-    }
-    return -1;
-  }
-  updateSelection() {
-    if (this.composition) {
-      this.selection = this.prevSelection;
-    } else {
-      let count = 0;
-      const _selection = [];
-      this.selectableCharacters.forEach((char, index) => {
-        if (count <= this.$textInput.selectionStart) {
-          _selection[0] = index;
-        } else if (count <= this.$textInput.selectionEnd) {
-          _selection[1] = index;
-        }
-        count += char.content.length;
-      });
-      this.selection = _selection;
-      this.prevSelection = this.selection;
-    }
-  }
-  updateDOMSelection() {
-    let start = 0;
-    let end = 0;
-    this.selectableCharacters.forEach((char, index) => {
-      if (index < this.selectionMinMax.min) {
-        start += char.content.length;
-        end = start;
-      } else if (index < this.selectionMinMax.max) {
-        end += char.content.length;
-      }
-    });
-    this.$textInput.selectionStart = start;
-    this.$textInput.selectionEnd = end;
-  }
-  onMousedown(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    this.$textInput.focus();
-    const index = this.findNearest({ x: e.offsetX, y: e.offsetY });
-    this.selection = [index, index];
-    this.updateDOMSelection();
-    this.render();
-    const onMousemove = (e2) => {
-      this.selection[1] = this.findNearest({ x: e2.offsetX, y: e2.offsetY });
-      this.updateDOMSelection();
-      this.render();
-    };
-    const onMouseup = () => {
-      document.removeEventListener("mousemove", onMousemove);
-      document.removeEventListener("mouseup", onMouseup);
-    };
-    document.addEventListener("mousemove", onMousemove);
-    document.addEventListener("mouseup", onMouseup);
-  }
-  render() {
-    const isVertical = this.text.isVertical;
-    this.text.style = {
-      justifyContent: "center",
-      alignItems: "center",
-      textAlign: "center",
-      color: "#FFFFFFFF",
-      ...this.text.style
-    };
-    this.text.style.width = this.width;
-    this.text.style.height = this.height;
-    this.text.requestUpdate();
-    let ctx;
-    this.text.render({
-      pixelRatio: this.pixelRatio,
-      view: this.$preview,
-      onContext: (_ctx) => ctx = _ctx
-    });
-    const selectedCharacters = this.selectedCharacters;
-    if (ctx) {
-      const boxesGroups = {};
-      selectedCharacters.forEach((char) => {
-        if (char.isLastSelected) {
-          return;
-        }
-        const key = isVertical ? char.left : char.top;
-        if (!boxesGroups[key]) {
-          boxesGroups[key] = [];
-        }
-        boxesGroups[key].push({
-          x: char.left,
-          y: char.top,
-          w: char.width,
-          h: char.height
-        });
-      });
-      ctx.fillStyle = getComputedStyle(this.$preview).getPropertyValue("--selection-color");
-      Object.values(boxesGroups).forEach((boxes) => {
-        const min = {
-          x: Math.min(...boxes.map((v) => v.x)),
-          y: Math.min(...boxes.map((v) => v.y))
-        };
-        const max = {
-          x: Math.max(...boxes.map((v) => v.x + v.w)),
-          y: Math.max(...boxes.map((v) => v.y + v.h))
-        };
-        ctx.fillRect(
-          min.x + this.text.boundingBox.left,
-          min.y + this.text.boundingBox.top,
-          max.x - min.x,
-          max.y - min.y
-        );
-      });
-    }
-    if (selectedCharacters.length === 0) {
-      this.$cursor.style.visibility = "visible";
-      const cursorPosition = this.cursorPosition;
-      this.$cursor.style.backgroundColor = cursorPosition.color ?? "rgba(var(--color)";
-      this.$cursor.style.left = `${cursorPosition.left}px`;
-      this.$cursor.style.top = `${cursorPosition.top}px`;
-      this.$cursor.style.height = isVertical ? "1px" : `${cursorPosition.height}px`;
-      this.$cursor.style.width = isVertical ? `${cursorPosition.width}px` : "1px";
-    } else {
-      this.$cursor.style.visibility = "hidden";
-    }
-    this.$cursor.classList.remove("blink");
-    if (this._timer) {
-      clearTimeout(this._timer);
-    }
-    this._timer = setTimeout(() => this.$cursor.classList.add("blink"), 500);
-    this.emit("rendered", this.text);
-  }
-  requestUpdate() {
-    this.render();
-  }
-  attributeChangedCallback(name, _oldValue, newValue) {
-    this[name] = newValue;
-  }
-  emit(type, detail) {
-    return this.dispatchEvent(
-      new CustomEvent(type, {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-        detail
-      })
-    );
-  }
-}
-__decorateClass([
-  modernIdoc.property()
-], TextEditor.prototype, "width");
-__decorateClass([
-  modernIdoc.property()
-], TextEditor.prototype, "height");
-
-exports.Character = Character;
-exports.Fragment = Fragment;
-exports.Measurer = Measurer;
-exports.Paragraph = Paragraph;
-exports.Text = Text;
-exports.TextEditor = TextEditor;
-exports.background = background;
-exports.createSVGLoader = createSVGLoader;
-exports.createSVGParser = createSVGParser;
-exports.definePlugin = definePlugin;
-exports.drawPath = drawPath;
-exports.filterEmpty = filterEmpty;
-exports.getHighlightStyle = getHighlightStyle;
-exports.getTransform2D = getTransform2D;
-exports.hexToRgb = hexToRgb;
-exports.highlight = highlight;
-exports.isEqualObject = isEqualObject;
-exports.isEqualValue = isEqualValue;
-exports.listStyle = listStyle;
+exports.Character = Text.Character;
+exports.Fragment = Text.Fragment;
+exports.Measurer = Text.Measurer;
+exports.Paragraph = Text.Paragraph;
+exports.Text = Text.Text;
+exports.background = Text.background;
+exports.createSVGLoader = Text.createSVGLoader;
+exports.createSVGParser = Text.createSVGParser;
+exports.definePlugin = Text.definePlugin;
+exports.drawPath = Text.drawPath;
+exports.filterEmpty = Text.filterEmpty;
+exports.getHighlightStyle = Text.getHighlightStyle;
+exports.getTransform2D = Text.getTransform2D;
+exports.hexToRgb = Text.hexToRgb;
+exports.highlight = Text.highlight;
+exports.isEqualObject = Text.isEqualObject;
+exports.isEqualValue = Text.isEqualValue;
+exports.listStyle = Text.listStyle;
+exports.outline = Text.outline;
+exports.parseColor = Text.parseColor;
+exports.parseColormap = Text.parseColormap;
+exports.parseValueNumber = Text.parseValueNumber;
+exports.render = Text.render;
+exports.setupView = Text.setupView;
+exports.textDecoration = Text.textDecoration;
+exports.textDefaultStyle = Text.textDefaultStyle;
+exports.uploadColor = Text.uploadColor;
+exports.uploadColors = Text.uploadColors;
 exports.measureText = measureText;
-exports.outline = outline;
-exports.parseColor = parseColor;
-exports.parseColormap = parseColormap;
-exports.parseValueNumber = parseValueNumber;
-exports.render = render;
 exports.renderText = renderText;
-exports.setupView = setupView;
-exports.textDecoration = textDecoration;
-exports.textDefaultStyle = textDefaultStyle;
-exports.uploadColor = uploadColor;
-exports.uploadColors = uploadColors;