@aeriz/wysiwyg 1.0.2 → 1.0.3

package/dist/aeriz-wysiwyg.js

@@ -884,27 +884,80 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     return null;
   }
   let loaded = false;
+  const unavailable = /* @__PURE__ */ new Set();
+  const listeners = /* @__PURE__ */ new Set();
+  const SAMPLE_TEXT = "가A";
+  function getAvailableFontFamilies() {
+    if (unavailable.size === 0) return FONT_FAMILIES;
+    return FONT_FAMILIES.filter((f) => !unavailable.has(f.id));
+  }
+  function subscribeFontAvailability(listener) {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  }
+  function isInstalledLocally(stack) {
+    const family = firstFamilyToken(stack);
+    if (!family) return false;
+    const ctx = document.createElement("canvas").getContext("2d");
+    if (!ctx) return false;
+    const widthOf = (spec) => {
+      ctx.font = `16px ${spec}`;
+      return ctx.measureText("가나다ABCwi").width;
+    };
+    return ["monospace", "serif"].some(
+      (fallback) => widthOf(`"${family}", ${fallback}`) !== widthOf(fallback)
+    );
+  }
+  function markUnavailable(fonts) {
+    let changed = false;
+    for (const font of fonts) {
+      if (unavailable.has(font.id)) continue;
+      if (isInstalledLocally(font.stack)) continue;
+      unavailable.add(font.id);
+      changed = true;
+    }
+    if (!changed) return;
+    for (const listener of listeners) listener();
+  }
+  function verifyLoaded(fonts) {
+    const set = document.fonts;
+    if (!set || typeof set.load !== "function") return;
+    for (const font of fonts) {
+      const family = firstFamilyToken(font.stack);
+      if (!family) continue;
+      set.load(`16px "${family}"`, SAMPLE_TEXT).then((faces) => {
+        if (faces.length === 0) markUnavailable([font]);
+      }).catch(() => markUnavailable([font]));
+    }
+  }
   function ensureFontFamiliesLoaded() {
     if (loaded) return;
     loaded = true;
     if (typeof document === "undefined") return;
-    const googleParams = FONT_FAMILIES.map((f) => f.googleFonts).filter((p) => typeof p === "string" && p.length > 0);
-    if (googleParams.length > 0) {
-      const url = "https://fonts.googleapis.com/css2?" + googleParams.map((p) => `family=${p}`).join("&") + "&display=swap";
-      appendStylesheet(url);
+    const googleFonts = FONT_FAMILIES.filter((f) => f.googleFonts);
+    if (googleFonts.length > 0) {
+      const url = "https://fonts.googleapis.com/css2?" + googleFonts.map((f) => `family=${f.googleFonts}`).join("&") + "&display=swap";
+      appendStylesheet(url, googleFonts);
     }
-    for (const f of FONT_FAMILIES) {
-      if (f.cssUrl) appendStylesheet(f.cssUrl);
+    for (const font of FONT_FAMILIES) {
+      if (font.cssUrl) appendStylesheet(font.cssUrl, [font]);
     }
   }
-  function appendStylesheet(href) {
+  function appendStylesheet(href, provides) {
     const existing = document.querySelector(
       `link[rel="stylesheet"][href="${href}"]`
     );
-    if (existing) return;
+    if (existing) {
+      verifyLoaded(provides);
+      return;
+    }
     const link = document.createElement("link");
     link.rel = "stylesheet";
     link.href = href;
+    link.addEventListener("error", () => markUnavailable(provides));
+    link.addEventListener("load", () => verifyLoaded(provides));
     document.head.appendChild(link);
   }
   function findFontIdFromCss(css) {
@@ -1632,9 +1685,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     return m;
   })();
   function highlightCode(code, langId) {
-    if (!langId) return escapeHtml$1(code);
+    if (!langId) return escapeHtml$2(code);
     const lang = LANG_BY_ID.get(langId);
-    if (!lang) return escapeHtml$1(code);
+    if (!lang) return escapeHtml$2(code);
     if (lang.custom) return lang.custom(code);
     return tokenize(code, lang);
   }
@@ -1648,14 +1701,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if (lang.lineComment && code.startsWith(lang.lineComment, i)) {
         const nl = code.indexOf("\n", i);
         const stop = nl === -1 ? n : nl;
-        out += `<span class="hl-comment">${escapeHtml$1(code.slice(i, stop))}</span>`;
+        out += `<span class="hl-comment">${escapeHtml$2(code.slice(i, stop))}</span>`;
         i = stop;
         continue;
       }
       if (lang.blockComment && code.startsWith(lang.blockComment.start, i)) {
         const closeAt = code.indexOf(lang.blockComment.end, i + lang.blockComment.start.length);
         const stop = closeAt === -1 ? n : closeAt + lang.blockComment.end.length;
-        out += `<span class="hl-comment">${escapeHtml$1(code.slice(i, stop))}</span>`;
+        out += `<span class="hl-comment">${escapeHtml$2(code.slice(i, stop))}</span>`;
         i = stop;
         continue;
       }
@@ -1675,7 +1728,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           if (c === "\n" && sd !== "`") break;
           j++;
         }
-        out += `<span class="hl-string">${escapeHtml$1(code.slice(i, j))}</span>`;
+        out += `<span class="hl-string">${escapeHtml$2(code.slice(i, j))}</span>`;
         i = j;
         continue;
       }
@@ -1683,7 +1736,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if (/[0-9]/.test(ch)) {
         const m = NUMBER_RE.exec(code.slice(i));
         if (m) {
-          out += `<span class="hl-number">${escapeHtml$1(m[0])}</span>`;
+          out += `<span class="hl-number">${escapeHtml$2(m[0])}</span>`;
           i += m[0].length;
           continue;
         }
@@ -1694,22 +1747,22 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         const word = code.slice(i, j);
         const lookup = ci ? word.toLowerCase() : word;
         if (lang.keywords.has(lookup)) {
-          out += `<span class="hl-keyword">${escapeHtml$1(word)}</span>`;
+          out += `<span class="hl-keyword">${escapeHtml$2(word)}</span>`;
         } else if ((_b = lang.builtins) == null ? void 0 : _b.has(lookup)) {
-          out += `<span class="hl-builtin">${escapeHtml$1(word)}</span>`;
+          out += `<span class="hl-builtin">${escapeHtml$2(word)}</span>`;
         } else {
           let k = j;
           while (k < n && (code[k] === " " || code[k] === "	")) k++;
           if (code[k] === "(") {
-            out += `<span class="hl-fn">${escapeHtml$1(word)}</span>`;
+            out += `<span class="hl-fn">${escapeHtml$2(word)}</span>`;
           } else {
-            out += escapeHtml$1(word);
+            out += escapeHtml$2(word);
           }
         }
         i = j;
         continue;
       }
-      out += escapeHtml$1(ch);
+      out += escapeHtml$2(ch);
       i++;
     }
     return out;
@@ -1723,14 +1776,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if (code.startsWith("<!--", i)) {
         const end = code.indexOf("-->", i + 4);
         const stop = end === -1 ? n : end + 3;
-        out += `<span class="hl-comment">${escapeHtml$1(code.slice(i, stop))}</span>`;
+        out += `<span class="hl-comment">${escapeHtml$2(code.slice(i, stop))}</span>`;
         i = stop;
         continue;
       }
       if (code[i] === "<") {
         const end = code.indexOf(">", i);
         if (end === -1) {
-          out += escapeHtml$1(code.slice(i));
+          out += escapeHtml$2(code.slice(i));
           break;
         }
         const tag = code.slice(i, end + 1);
@@ -1738,7 +1791,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         i = end + 1;
         continue;
       }
-      out += escapeHtml$1(code[i] ?? "");
+      out += escapeHtml$2(code[i] ?? "");
       i++;
     }
     return out;
@@ -1748,27 +1801,27 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     let result = '<span class="hl-punct">&lt;</span>';
     const nameMatch = /^\/?[a-zA-Z][a-zA-Z0-9-]*/.exec(inner);
     if (nameMatch) {
-      result += `<span class="hl-tag">${escapeHtml$1(nameMatch[0])}</span>`;
+      result += `<span class="hl-tag">${escapeHtml$2(nameMatch[0])}</span>`;
       let rest = inner.slice(nameMatch[0].length);
       const ATTR_RE = /\s+([a-zA-Z_:][a-zA-Z0-9_:.-]*)(\s*=\s*("([^"]*)"|'([^']*)'|([^\s>]+)))?/g;
       let last = 0;
       let m;
       while (m = ATTR_RE.exec(rest)) {
-        result += escapeHtml$1(rest.slice(last, m.index));
-        result += escapeHtml$1(rest.slice(m.index, m.index + m[0].indexOf(m[1] ?? "")));
-        result += `<span class="hl-attr">${escapeHtml$1(m[1] ?? "")}</span>`;
+        result += escapeHtml$2(rest.slice(last, m.index));
+        result += escapeHtml$2(rest.slice(m.index, m.index + m[0].indexOf(m[1] ?? "")));
+        result += `<span class="hl-attr">${escapeHtml$2(m[1] ?? "")}</span>`;
         const valuePart = rest.slice(m.index + (m[0].indexOf(m[1] ?? "") + (m[1] ?? "").length), m.index + m[0].length);
         if (valuePart.includes("=")) {
           const eqIdx = valuePart.indexOf("=");
-          result += escapeHtml$1(valuePart.slice(0, eqIdx + 1));
+          result += escapeHtml$2(valuePart.slice(0, eqIdx + 1));
           const valueStr = valuePart.slice(eqIdx + 1);
-          result += `<span class="hl-string">${escapeHtml$1(valueStr)}</span>`;
+          result += `<span class="hl-string">${escapeHtml$2(valueStr)}</span>`;
         }
         last = m.index + m[0].length;
       }
-      result += escapeHtml$1(rest.slice(last));
+      result += escapeHtml$2(rest.slice(last));
     } else {
-      result += escapeHtml$1(inner);
+      result += escapeHtml$2(inner);
     }
     result += '<span class="hl-punct">&gt;</span>';
     return result;
@@ -1782,20 +1835,20 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if (code.startsWith("/*", i)) {
         const end = code.indexOf("*/", i + 2);
         const stop = end === -1 ? n : end + 2;
-        out += `<span class="hl-comment">${escapeHtml$1(code.slice(i, stop))}</span>`;
+        out += `<span class="hl-comment">${escapeHtml$2(code.slice(i, stop))}</span>`;
         i = stop;
         continue;
       }
       const ch = code[i] ?? "";
       if (ch === "{") {
         inBlock = true;
-        out += escapeHtml$1(ch);
+        out += escapeHtml$2(ch);
         i++;
         continue;
       }
       if (ch === "}") {
         inBlock = false;
-        out += escapeHtml$1(ch);
+        out += escapeHtml$2(ch);
         i++;
         continue;
       }
@@ -1807,7 +1860,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           else j++;
         }
         j = Math.min(j + 1, n);
-        out += `<span class="hl-string">${escapeHtml$1(code.slice(i, j))}</span>`;
+        out += `<span class="hl-string">${escapeHtml$2(code.slice(i, j))}</span>`;
         i = j;
         continue;
       }
@@ -1816,17 +1869,17 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         while (j < n && /[a-zA-Z0-9_-]/.test(code[j] ?? "")) j++;
         const word = code.slice(i, j);
         if (ch === "@") {
-          out += `<span class="hl-keyword">${escapeHtml$1(word)}</span>`;
+          out += `<span class="hl-keyword">${escapeHtml$2(word)}</span>`;
         } else if (inBlock && /^[a-zA-Z-]+$/.test(word)) {
           let k = j;
           while (k < n && (code[k] === " " || code[k] === "	")) k++;
           if (code[k] === ":") {
-            out += `<span class="hl-prop">${escapeHtml$1(word)}</span>`;
+            out += `<span class="hl-prop">${escapeHtml$2(word)}</span>`;
           } else {
-            out += escapeHtml$1(word);
+            out += escapeHtml$2(word);
           }
         } else {
-          out += `<span class="hl-tag">${escapeHtml$1(word)}</span>`;
+          out += `<span class="hl-tag">${escapeHtml$2(word)}</span>`;
         }
         i = j;
         continue;
@@ -1834,12 +1887,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if (/[0-9]/.test(ch)) {
         const m = /^[0-9.]+(px|em|rem|%|vh|vw|s|ms|deg|fr)?/.exec(code.slice(i));
         if (m) {
-          out += `<span class="hl-number">${escapeHtml$1(m[0])}</span>`;
+          out += `<span class="hl-number">${escapeHtml$2(m[0])}</span>`;
           i += m[0].length;
           continue;
         }
       }
-      out += escapeHtml$1(ch);
+      out += escapeHtml$2(ch);
       i++;
     }
     return out;
@@ -1850,22 +1903,22 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   function highlightMdLine(line) {
     const h = /^(#{1,6})\s+(.*)$/.exec(line);
     if (h) {
-      return `<span class="hl-keyword">${escapeHtml$1(h[1] ?? "")}</span> <span class="hl-tag">${highlightMdInline(h[2] ?? "")}</span>`;
+      return `<span class="hl-keyword">${escapeHtml$2(h[1] ?? "")}</span> <span class="hl-tag">${highlightMdInline(h[2] ?? "")}</span>`;
     }
     if (line.startsWith(">")) {
-      return `<span class="hl-comment">${escapeHtml$1(line)}</span>`;
+      return `<span class="hl-comment">${escapeHtml$2(line)}</span>`;
     }
     if (line.startsWith("```")) {
-      return `<span class="hl-keyword">${escapeHtml$1(line)}</span>`;
+      return `<span class="hl-keyword">${escapeHtml$2(line)}</span>`;
     }
     const li = /^(\s*)([-*+]|\d+\.)\s+(.*)$/.exec(line);
     if (li) {
-      return `${li[1] ?? ""}<span class="hl-keyword">${escapeHtml$1(li[2] ?? "")}</span> ${highlightMdInline(li[3] ?? "")}`;
+      return `${li[1] ?? ""}<span class="hl-keyword">${escapeHtml$2(li[2] ?? "")}</span> ${highlightMdInline(li[3] ?? "")}`;
     }
     return highlightMdInline(line);
   }
   function highlightMdInline(s) {
-    let out = escapeHtml$1(s);
+    let out = escapeHtml$2(s);
     out = out.replace(/\*\*([^*]+)\*\*/g, '<span class="hl-keyword">**$1**</span>');
     out = out.replace(new RegExp("(?<!\\*)\\*([^*]+)\\*(?!\\*)", "g"), '<span class="hl-string">*$1*</span>');
     out = out.replace(/`([^`]+)`/g, '<span class="hl-builtin">`$1`</span>');
@@ -1875,7 +1928,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     );
     return out;
   }
-  function escapeHtml$1(s) {
+  function escapeHtml$2(s) {
     return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
   }
   function preserveSelection(el) {
@@ -2146,31 +2199,42 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     popover.className = "aw-popover aw-font-family-popover";
     popover.dataset.popover = "true";
     preserveSelection(popover);
-    for (const font of FONT_FAMILIES) {
-      const btn = document.createElement("button");
-      btn.type = "button";
-      btn.className = "aw-popover-item aw-font-family-item";
-      if (currentId && currentId === font.id) {
-        btn.classList.add("aw-popover-item-active");
+    const render = () => {
+      popover.replaceChildren();
+      for (const font of getAvailableFontFamilies()) {
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "aw-popover-item aw-font-family-item";
+        if (currentId && currentId === font.id) {
+          btn.classList.add("aw-popover-item-active");
+        }
+        btn.title = font.label;
+        const name = document.createElement("span");
+        name.className = "aw-font-family-name";
+        name.textContent = font.label;
+        const preview = document.createElement("span");
+        preview.className = "aw-font-family-preview";
+        preview.textContent = "가A";
+        preview.style.fontFamily = font.stack;
+        btn.appendChild(name);
+        btn.appendChild(preview);
+        preserveSelection(btn);
+        btn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          popover.remove();
+          onPick({ id: font.id, label: font.label, stack: font.stack });
+        });
+        popover.appendChild(btn);
       }
-      btn.title = font.label;
-      const name = document.createElement("span");
-      name.className = "aw-font-family-name";
-      name.textContent = font.label;
-      const preview = document.createElement("span");
-      preview.className = "aw-font-family-preview";
-      preview.textContent = "가A";
-      preview.style.fontFamily = font.stack;
-      btn.appendChild(name);
-      btn.appendChild(preview);
-      preserveSelection(btn);
-      btn.addEventListener("click", (e) => {
-        e.stopPropagation();
-        popover.remove();
-        onPick({ id: font.id, label: font.label, stack: font.stack });
-      });
-      popover.appendChild(btn);
-    }
+    };
+    render();
+    const unsubscribe = subscribeFontAvailability(() => {
+      if (!popover.isConnected) {
+        unsubscribe();
+        return;
+      }
+      render();
+    });
     anchorPopover(popover, anchor);
   }
   function openCodeLanguageDropdown(anchor, onPick, currentId) {
@@ -2501,6 +2565,24 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     "stroke-width",
     "text-anchor"
   ]);
+  const CURRENT_COLOR_DEFAULTED = /* @__PURE__ */ new Set([
+    "border-block-end-color",
+    "border-block-start-color",
+    "border-bottom-color",
+    "border-inline-end-color",
+    "border-inline-start-color",
+    "border-left-color",
+    "border-right-color",
+    "border-top-color",
+    "caret-color",
+    "column-rule-color",
+    "row-rule-color",
+    "outline-color",
+    "text-decoration-color",
+    "text-emphasis-color",
+    "-webkit-text-fill-color",
+    "-webkit-text-stroke-color"
+  ]);
   async function importHtmlWithComputedStyles(html, options = {}) {
     const settleMs = options.settleMs ?? 1e3;
     const timeoutMs = options.timeoutMs ?? 3e4;
@@ -2657,8 +2739,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     };
     return { get, cleanup };
   }
-  function computeMinimalInline(el, parent, baselineTagName, getBaseline, win) {
-    const cs = win.getComputedStyle(el);
+  function computeMinimalInline(el, parent, baselineTagName, getBaseline, win, pseudo) {
+    const cs = win.getComputedStyle(el, pseudo ?? null);
     const parentCs = parent ? win.getComputedStyle(parent) : null;
     const baseline = getBaseline(baselineTagName);
     let cssText = "";
@@ -2667,6 +2749,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if (!prop) continue;
       const val = cs.getPropertyValue(prop);
       if (!val) continue;
+      if (pseudo && prop === "content") continue;
+      if (CURRENT_COLOR_DEFAULTED.has(prop) && val === cs.getPropertyValue("color")) continue;
       if (INHERITED_PROPERTIES.has(prop)) {
         if (parentCs && parentCs.getPropertyValue(prop) === val) continue;
       } else {
@@ -2676,6 +2760,56 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     return cssText;
   }
+  function textFromCssContent(value) {
+    let text = "";
+    const segments = /"((?:[^"\\]|\\.)*)"|'((?:[^'\\]|\\.)*)'/g;
+    let match;
+    while ((match = segments.exec(value)) !== null) {
+      const raw = match[1] ?? match[2] ?? "";
+      text += raw.replace(
+        /\\(?:([0-9a-fA-F]{1,6})\s?|(.))/g,
+        (_all, hex, ch) => hex ? String.fromCodePoint(parseInt(hex, 16)) : ch ?? ""
+      );
+    }
+    return text;
+  }
+  const NO_PHRASING_CHILDREN = /* @__PURE__ */ new Set([
+    "TABLE",
+    "THEAD",
+    "TBODY",
+    "TFOOT",
+    "TR",
+    "UL",
+    "OL",
+    "DL",
+    "SELECT",
+    "OPTGROUP"
+  ]);
+  function materializePseudo(orig, copy, which, getBaseline, win) {
+    if (NO_PHRASING_CHILDREN.has(copy.tagName)) return;
+    const selector = which === "before" ? "::before" : "::after";
+    const cs = win.getComputedStyle(orig, selector);
+    const content = cs.getPropertyValue("content");
+    if (!content || content === "none" || content === "normal") return;
+    if (cs.getPropertyValue("display") === "none") return;
+    const text = textFromCssContent(content);
+    const url = /url\((["']?)([^"')]+)\1\)/.exec(content);
+    const cssText = computeMinimalInline(orig, orig, "span", getBaseline, win, selector);
+    if (!text && !url && !cssText) return;
+    const doc = copy.ownerDocument;
+    const span = doc.createElement("span");
+    span.setAttribute("data-imported-pseudo", which);
+    if (cssText) span.setAttribute("style", cssText);
+    if (url == null ? void 0 : url[2]) {
+      const img = doc.createElement("img");
+      img.setAttribute("src", url[2]);
+      img.setAttribute("alt", "");
+      span.appendChild(img);
+    }
+    if (text) span.appendChild(doc.createTextNode(text));
+    if (which === "before") copy.insertBefore(span, copy.firstChild);
+    else copy.appendChild(span);
+  }
   function applyComputedStylesParallel(orig, copy, origParent, getBaseline, win) {
     if (orig.nodeType === 1 && copy.nodeType === 1) {
       const cssText = computeMinimalInline(
@@ -2699,6 +2833,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const cc = copyChildren[i];
       if (oc && cc) applyComputedStylesParallel(oc, cc, orig, getBaseline, win);
     }
+    if (orig.nodeType === 1 && copy.nodeType === 1) {
+      materializePseudo(orig, copy, "before", getBaseline, win);
+      materializePseudo(orig, copy, "after", getBaseline, win);
+    }
   }
   function markdownToBlocks(md) {
     const html = markdownToHtml(md);
@@ -2731,9 +2869,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           i++;
         }
         if (i < lines.length) i++;
-        const langAttr = lang ? ` data-language="${escapeAttr(lang)}"` : "";
+        const langAttr = lang ? ` data-language="${escapeAttr$1(lang)}"` : "";
         blocks.push(
-          `<pre><code${langAttr}>${escapeHtml(codeLines.join("\n"))}</code></pre>`
+          `<pre><code${langAttr}>${escapeHtml$1(codeLines.join("\n"))}</code></pre>`
         );
         continue;
       }
@@ -2867,42 +3005,115 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     return parts.join("");
   }
+  const CODE_SLOT = String.fromCharCode(57600);
+  const CODE_SLOT_RE = new RegExp(CODE_SLOT + "([0-9]+)" + CODE_SLOT, "g");
   function parseInline(src) {
     const codes = [];
     let working = src.replace(/(`+)([\s\S]+?)\1/g, (_m, _b, code) => {
-      const idx = codes.push(`<code>${escapeHtml(code)}</code>`) - 1;
-      return `\0CODE${idx}\0`;
+      const idx = codes.push(`<code>${escapeHtml$1(code)}</code>`) - 1;
+      return `${CODE_SLOT}${idx}${CODE_SLOT}`;
     });
-    working = escapeHtml(working);
+    working = escapeHtml$1(working);
     working = working.replace(
       /&lt;(https?:\/\/[^\s&]+)&gt;/g,
-      (_m, url) => `<a href="${escapeAttr(url)}" target="_blank" rel="noopener">${escapeHtml(url)}</a>`
+      (_m, url) => `<a href="${escapeAttr$1(url)}" target="_blank" rel="noopener">${escapeHtml$1(url)}</a>`
     );
     working = working.replace(
       /!\[([^\]]*)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/g,
-      (_m, alt, url) => `<img src="${escapeAttr(url)}" alt="${escapeAttr(alt)}">`
+      (_m, alt, url) => `<img src="${escapeAttr$1(url)}" alt="${escapeAttr$1(alt)}">`
     );
     working = working.replace(
       /\[([^\]]+)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/g,
-      (_m, text, url) => `<a href="${escapeAttr(url)}" target="_blank" rel="noopener">${text}</a>`
+      (_m, text, url) => `<a href="${escapeAttr$1(url)}" target="_blank" rel="noopener">${text}</a>`
     );
     working = working.replace(/\*\*([^*\n]+?)\*\*/g, "<strong>$1</strong>");
     working = working.replace(/__([^_\n]+?)__/g, "<strong>$1</strong>");
     working = working.replace(/(^|[^*])\*([^*\n]+?)\*(?!\*)/g, "$1<em>$2</em>");
     working = working.replace(/(^|[^_])_([^_\n]+?)_(?!_)/g, "$1<em>$2</em>");
     working = working.replace(/~~([^~\n]+?)~~/g, "<s>$1</s>");
-    working = working.replace(/CODE(\d+)/g, (_m, n) => {
+    working = working.replace(CODE_SLOT_RE, (_m, n) => {
       const idx = Number(n);
       return codes[idx] ?? "";
     });
     return working;
   }
-  function escapeHtml(s) {
+  function escapeHtml$1(s) {
     return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
   }
-  function escapeAttr(s) {
+  function escapeAttr$1(s) {
     return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
   }
+  function formatBytes(bytes) {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+    return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GB`;
+  }
+  function fileExtensionLabel(name, mime) {
+    if (name) {
+      const idx = name.lastIndexOf(".");
+      if (idx > 0 && idx < name.length - 1) {
+        return name.slice(idx + 1).toUpperCase();
+      }
+    }
+    if (mime) {
+      const sub = mime.split("/").pop() ?? "";
+      return sub.toUpperCase();
+    }
+    return "";
+  }
+  function hostnameFromUrl(url) {
+    try {
+      return new URL(url).hostname;
+    } catch {
+      return "";
+    }
+  }
+  function defaultFaviconUrl(url) {
+    const host = hostnameFromUrl(url);
+    if (!host) return "";
+    return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(host)}&sz=64`;
+  }
+  const FILE_ICON_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg>';
+  const FILE_ACTION_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>';
+  const YOUTUBE_IFRAME_ALLOW = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
+  const YOUTUBE_EMBED_BASE = "https://www.youtube-nocookie.com/embed/";
+  const FILE_FALLBACK_NAME = "파일";
+  const BLOCK_ID_ATTR = "data-block-id";
+  const SNAPSHOT_VERSION = 1;
+  function snapshotVersionOf(snapshot) {
+    const raw = snapshot.version;
+    return typeof raw === "number" && Number.isFinite(raw) && raw > 0 ? raw : 1;
+  }
+  const KNOWN_KINDS = /* @__PURE__ */ new Set([
+    "paragraph",
+    "heading",
+    "bulletList",
+    "orderedList",
+    "blockquote",
+    "codeBlock",
+    "image",
+    "table",
+    "hr",
+    "linkCard",
+    "youtube",
+    "file",
+    "importedHtml",
+    "unknown"
+  ]);
+  function upgradeSnapshots(input) {
+    return input.map((snap) => upgradeSnapshot(snap));
+  }
+  function upgradeSnapshot(snapshot) {
+    const kind = KNOWN_KINDS.has(snapshot.kind) ? snapshot.kind : "unknown";
+    const version = Math.max(snapshotVersionOf(snapshot), 1);
+    return {
+      ...snapshot,
+      kind,
+      version,
+      html: typeof snapshot.html === "string" ? snapshot.html : ""
+    };
+  }
   const ALL_INLINE_MARKS = [
     "bold",
     "italic",
@@ -3146,12 +3357,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if (attrs == null ? void 0 : attrs.wrapperStyle) wrap.setAttribute("style", attrs.wrapperStyle);
       const iframe = document.createElement("iframe");
       if (videoId) {
-        iframe.src = `https://www.youtube-nocookie.com/embed/${videoId}`;
+        iframe.src = `${YOUTUBE_EMBED_BASE}${videoId}`;
       }
-      iframe.setAttribute(
-        "allow",
-        "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-      );
+      iframe.setAttribute("allow", YOUTUBE_IFRAME_ALLOW);
       iframe.setAttribute("allowfullscreen", "");
       iframe.setAttribute("frameborder", "0");
       iframe.setAttribute("referrerpolicy", "strict-origin-when-cross-origin");
@@ -3239,18 +3447,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     },
     isEmpty: (el) => !el.getAttribute("href")
   };
-  function hostnameFromUrl(url) {
-    try {
-      return new URL(url).hostname;
-    } catch {
-      return "";
-    }
-  }
-  function defaultFaviconUrl(url) {
-    const host = hostnameFromUrl(url);
-    if (!host) return "";
-    return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(host)}&sz=64`;
-  }
   const FILE = {
     kind: "file",
     label: "파일",
@@ -3289,12 +3485,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const iconSpan = document.createElement("span");
       iconSpan.className = "aw-file-icon";
       iconSpan.setAttribute("aria-hidden", "true");
-      iconSpan.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg>';
+      iconSpan.innerHTML = FILE_ICON_SVG;
       const meta = document.createElement("span");
       meta.className = "aw-file-meta";
       const nameSpan = document.createElement("span");
       nameSpan.className = "aw-file-name";
-      nameSpan.textContent = (attrs == null ? void 0 : attrs.fileName) ?? "파일";
+      nameSpan.textContent = (attrs == null ? void 0 : attrs.fileName) ?? FILE_FALLBACK_NAME;
       meta.appendChild(nameSpan);
       const infoParts = [];
       const ext = fileExtensionLabel(attrs == null ? void 0 : attrs.fileName, attrs == null ? void 0 : attrs.fileType);
@@ -3309,7 +3505,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const action = document.createElement("span");
       action.className = "aw-file-action";
       action.setAttribute("aria-hidden", "true");
-      action.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>';
+      action.innerHTML = FILE_ACTION_SVG;
       a.appendChild(iconSpan);
       a.appendChild(meta);
       a.appendChild(action);
@@ -3317,25 +3513,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     },
     isEmpty: (el) => !el.getAttribute("href")
   };
-  function formatBytes(bytes) {
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
-    return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GB`;
-  }
-  function fileExtensionLabel(name, mime) {
-    if (name) {
-      const idx = name.lastIndexOf(".");
-      if (idx > 0 && idx < name.length - 1) {
-        return name.slice(idx + 1).toUpperCase();
-      }
-    }
-    if (mime) {
-      const sub = mime.split("/").pop() ?? "";
-      return sub.toUpperCase();
-    }
-    return "";
-  }
   const IMPORTED_HTML = {
     kind: "importedHtml",
     label: "HTML",
@@ -3370,7 +3547,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     allowsColor: false,
     allowsFontSize: false,
     matches: () => null,
-    create: () => fillEmpty(document.createElement("p")),
+    // `<div>` 로 만든다. unknown 은 미래 버전의 블록이 강등되어 오는 자리이고,
+    // 그 html 에 블록 레벨 요소가 들어 있을 수 있다. `<p>` 로 감싸면 브라우저가
+    // 단락을 조기에 닫아 내용이 래퍼 밖으로 튀어나간다 (문자열 렌더러
+    // render-string.ts 도 같은 이유로 div 를 쓴다 — 두 경로가 일치해야 한다).
+    create: () => fillEmpty(document.createElement("div")),
     isEmpty: (el) => isElementBlank(el)
   };
   const BLOCK_TYPES = [
@@ -3400,7 +3581,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     return { type: UNKNOWN, match: { kind: "unknown", attrs: {} } };
   }
-  const BLOCK_ID_ATTR = "data-block-id";
   class BlockIdRegistry {
     constructor() {
       __publicField(this, "counter", 0);
@@ -3457,6 +3637,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   }
   function normalizeContent(root) {
+    restoreAlignFromClasses(root);
     for (const node of Array.from(root.childNodes)) {
       if (node.nodeType !== Node.TEXT_NODE) continue;
       const text = node.textContent ?? "";
@@ -3531,13 +3712,25 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   }
   function serializeBlock(block) {
+    const style = block.element.getAttribute("style");
     return {
+      version: SNAPSHOT_VERSION,
       id: block.id,
       kind: block.kind,
       attrs: { ...block.attrs },
-      html: block.element.innerHTML
+      html: innerHtmlWithoutChrome(block.element),
+      // 빈 문자열은 굳이 싣지 않는다 — 스냅샷이 커지기만 한다.
+      ...style ? { style } : {}
     };
   }
+  function innerHtmlWithoutChrome(element) {
+    if (!element.querySelector(".aw-block-align-controls, .aw-resize-handle")) {
+      return element.innerHTML;
+    }
+    const clone = element.cloneNode(true);
+    stripEditorOnlyNodes(clone);
+    return clone.innerHTML;
+  }
   function serializeBlocks(blocks) {
     return blocks.map(serializeBlock);
   }
@@ -3545,6 +3738,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const type = BLOCK_TYPE_BY_KIND[snapshot.kind] ?? BLOCK_TYPE_BY_KIND.unknown;
     const el = type.create(snapshot.attrs);
     el.setAttribute(BLOCK_ID_ATTR, snapshot.id);
+    if (snapshot.style) el.setAttribute("style", snapshot.style);
     if (snapshot.html.length > 0) {
       el.innerHTML = snapshot.html;
     }
@@ -3552,7 +3746,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }
   function renderBlocks(root, snapshots) {
     while (root.firstChild) root.removeChild(root.firstChild);
-    for (const snap of snapshots) {
+    for (const snap of upgradeSnapshots(snapshots)) {
       root.appendChild(renderBlock(snap));
     }
   }
@@ -3888,6 +4082,57 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     return out;
   }
+  const ALIGN_CLASS_BY_VALUE = {
+    left: "aw-align-left",
+    center: "aw-align-center",
+    right: "aw-align-right",
+    justify: "aw-align-justify"
+  };
+  function applyBlockClassNames(root) {
+    for (const child of Array.from(root.children)) {
+      if (!(child instanceof HTMLElement)) continue;
+      const { match } = classifyBlockElement(child);
+      child.classList.add("aw-block", `aw-block-${match.kind}`);
+    }
+    for (const el of Array.from(root.querySelectorAll("[style]"))) {
+      if (el.closest("[data-imported-html]")) continue;
+      hoistTextAlignToClass(el);
+    }
+  }
+  function hoistTextAlignToClass(el) {
+    var _a;
+    const value = el.style.textAlign.trim().toLowerCase();
+    const className = ALIGN_CLASS_BY_VALUE[value];
+    const stale = Object.values(ALIGN_CLASS_BY_VALUE).filter(
+      (name) => name !== className && el.classList.contains(name)
+    );
+    for (const name of stale) el.classList.remove(name);
+    if (!className) return;
+    el.classList.add(className);
+    el.style.removeProperty("text-align");
+    if (((_a = el.getAttribute("style")) == null ? void 0 : _a.trim()) === "") el.removeAttribute("style");
+  }
+  function restoreAlignFromClasses(root) {
+    var _a;
+    for (const [value, className] of Object.entries(ALIGN_CLASS_BY_VALUE)) {
+      for (const el of Array.from(
+        root.querySelectorAll(`.${className}`)
+      )) {
+        if (!el.style.textAlign) el.style.textAlign = value;
+        el.classList.remove(className);
+        if (((_a = el.getAttribute("class")) == null ? void 0 : _a.trim()) === "") el.removeAttribute("class");
+      }
+    }
+  }
+  function stripEditorOnlyNodes(root) {
+    const chrome = root.querySelectorAll(
+      ".aw-block-align-controls, .aw-resize-handle"
+    );
+    for (const el of Array.from(chrome)) el.remove();
+    for (const el of Array.from(root.querySelectorAll("[contenteditable]"))) {
+      el.removeAttribute("contenteditable");
+    }
+  }
   function stripEditorOnlyAttrs(root) {
     for (const el of Array.from(root.querySelectorAll("[data-block-kind]"))) {
       el.removeAttribute("data-block-kind");
@@ -3982,6 +4227,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     codeBlock: "codeBlock"
   };
   const DRAG_MIME = "application/x-aeriz-block";
+  const MIN_BLOCK_WIDTH = 80;
   class AerizEditor {
     constructor(options) {
       __publicField(this, "root");
@@ -4140,20 +4386,37 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.sync();
     }
     /**
-     * 본문 HTML 을 반환한다. 외부 컨텍스트에서도 에디터에서 보이는 그대로
-     * 동일한 시각으로 렌더되도록, 호출 시점의 테마 변수(--aw-primary 등) 를
-     * 읽어 블록 단위 인라인 스타일에 베이크한다. 에디터 내부 DOM 자체는
-     * 변형되지 않으며(clone 트리에 적용), data-block-kind / data-block-label /
-     * data-block-focused 같은 에디터 전용 속성은 출력에서 제거된다.
+     * 본문 HTML 을 반환한다.
+     *
+     * 두 가지 스타일 전략을 지원한다 (`options.styles`, 기본값은 생성 시
+     * `EditorOptions.htmlStyles`, 그것도 없으면 `'inline'`).
+     *
+     * - `'inline'` — 호출 시점의 테마 변수(--aw-primary 등) 를 읽어 블록 단위
+     *   인라인 스타일에 베이크한다. 스타일시트 없이 어디에 붙여도(이메일 본문,
+     *   다른 페이지) 에디터에서 보이는 그대로 렌더된다.
+     * - `'class'` — 테마 스타일을 베이크하지 않고 `aw-block-*` / `aw-align-*`
+     *   클래스만 남긴다. `style` 속성을 지우는 서버 sanitizer 아래에서 서식을
+     *   보존해야 할 때 쓴다. 출력은 `aeriz-wysiwyg.min.css` 를 로드한 페이지의
+     *   `.aeriz-wysiwyg > .aw-content` 안에 넣는 것을 전제로 한다.
+     *
+     * 어느 쪽이든 에디터 내부 DOM 은 변형되지 않으며(clone 트리에 적용),
+     * data-block-kind / data-block-focused 같은 에디터 전용 속성과 리사이즈
+     * 핸들 · 정렬 컨트롤 같은 편집 보조 마크업은 출력에서 제거된다.
      * data-block-id 는 보존.
      */
-    getHTML() {
+    getHTML(options = {}) {
       const clone = this.content.cloneNode(true);
-      const theme = readBlockStyleTheme(this.root);
-      const mode = this.currentTheme();
-      if (mode) theme.mode = mode;
-      applyBlockInlineStyles(clone, theme);
+      const styles = options.styles ?? this.options.htmlStyles ?? "inline";
+      if (styles === "class") {
+        applyBlockClassNames(clone);
+      } else {
+        const theme = readBlockStyleTheme(this.root);
+        const mode = this.currentTheme();
+        if (mode) theme.mode = mode;
+        applyBlockInlineStyles(clone, theme);
+      }
       stripEditorOnlyAttrs(clone);
+      stripEditorOnlyNodes(clone);
       return clone.innerHTML;
     }
     /** 가공 없는 원본 innerHTML. 직렬화 검증/디버그 용도. */
@@ -4817,15 +5080,20 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
      * 이미지 / 유튜브 wrapper 의 너비를 드래그로 조정. 높이는 자동 (이미지는
      * 종횡비 유지, 유튜브는 CSS aspect-ratio 16/9). mouseup 에서 cursor 복귀
      * + flush.
+     *
+     * 너비는 본문 안쪽 폭을 상한으로 한다. 상한이 없으면 오른쪽으로 계속 끌 때
+     * wrapper 가 본문보다 넓어지고, 그만큼 에디터 전체가 가로로 늘어난다
+     * (드래그를 멈춰도 늘어난 상태가 남는다).
      */
     startBlockResize(block, startX) {
       const initialWidth = block.getBoundingClientRect().width;
+      const maxWidth = this.contentInnerWidth();
       document.body.style.cursor = "nwse-resize";
       block.classList.add("aw-resizing");
       const onMove = (ev) => {
         const delta = ev.clientX - startX;
-        const newWidth = Math.max(80, initialWidth + delta);
-        block.style.width = `${Math.round(newWidth)}px`;
+        const wanted = Math.max(MIN_BLOCK_WIDTH, initialWidth + delta);
+        block.style.width = `${Math.round(Math.min(wanted, maxWidth))}px`;
       };
       const onUp = () => {
         document.removeEventListener("mousemove", onMove);
@@ -4837,6 +5105,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       document.addEventListener("mousemove", onMove);
       document.addEventListener("mouseup", onUp);
     }
+    /**
+     * 본문의 padding 을 제외한 실제 컨텐츠 폭. 블록 리사이즈의 상한이다.
+     * 에디터가 아주 좁을 때도 최소 폭은 확보되도록 하한을 둔다.
+     */
+    contentInnerWidth() {
+      const cs = getComputedStyle(this.content);
+      const inner = this.content.clientWidth - (Number.parseFloat(cs.paddingLeft) || 0) - (Number.parseFloat(cs.paddingRight) || 0);
+      return Math.max(MIN_BLOCK_WIDTH, inner);
+    }
     currentTheme() {
       const t = this.root.dataset.theme;
       return t === "dark" || t === "light" ? t : void 0;
@@ -5332,7 +5609,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     positionHandle(handle, blockEl) {
       const blockRect = blockEl.getBoundingClientRect();
       const wrapRect = this.contentWrap.getBoundingClientRect();
-      const HANDLE_HEIGHT = 22;
+      const HANDLE_HEIGHT = 18;
       const verticalShift = blockRect.height < HANDLE_HEIGHT ? (blockRect.height - HANDLE_HEIGHT) / 2 : 0;
       const top = blockRect.top - wrapRect.top + this.contentWrap.scrollTop + verticalShift;
       handle.style.top = `${top}px`;
@@ -5753,7 +6030,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return false;
     }
   }
-  const BLOCK_LEVEL_TAGS = /* @__PURE__ */ new Set([
+  const BLOCK_LEVEL_TAGS$1 = /* @__PURE__ */ new Set([
     "P",
     "DIV",
     "SECTION",
@@ -5786,7 +6063,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     "ADDRESS"
   ]);
   function isBlockLevelTag(tagName) {
-    return BLOCK_LEVEL_TAGS.has(tagName.toUpperCase());
+    return BLOCK_LEVEL_TAGS$1.has(tagName.toUpperCase());
   }
   class AerizViewer {
     constructor(options) {
@@ -5794,10 +6071,17 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       __publicField(this, "content");
       __publicField(this, "blockIds", new BlockIdRegistry());
       __publicField(this, "idFor", (el) => this.blockIds.ensure(el));
+      /**
+       * 생성 시 받은 options 객체를 그대로 들고 있는다. `htmlStyles` 를 여기서
+       * 매번 다시 읽으므로, 호출자가 이 객체를 갱신하면 재생성 없이 출력 전략이
+       * 바뀐다 (AerizEditor 와 같은 규약).
+       */
+      __publicField(this, "options");
       __publicField(this, "destroyed", false);
       if (!(options.element instanceof HTMLElement)) {
         throw new TypeError("AerizViewer: options.element must be an HTMLElement");
       }
+      this.options = options;
       this.root = document.createElement("div");
       this.root.className = "aeriz-wysiwyg aeriz-wysiwyg-viewer";
       if (options.theme) {
@@ -5836,16 +6120,25 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return findBlockFrom(node, this.content, this.idFor);
     }
     /**
-     * 외부 컨텍스트(이메일, 다른 페이지의 HTML 영역 등) 에서도 동일한 시각으로
-     * 보이도록 portable 인라인 스타일을 입힌 자급자족적 HTML 을 반환한다.
+     * 본문 HTML 을 반환한다. 전략은 `AerizEditor.getHTML()` 과 동일하다.
+     *
+     * - `'inline'` (기본) — 외부 컨텍스트(이메일, 다른 페이지의 HTML 영역 등)
+     *   에서도 동일한 시각으로 보이도록 portable 인라인 스타일을 베이크한다.
+     * - `'class'` — 클래스만 남긴다. `style` 속성을 지우는 sanitizer 대응.
      */
-    getHTML() {
+    getHTML(options = {}) {
       const clone = this.content.cloneNode(true);
-      const theme = readBlockStyleTheme(this.root);
-      const mode = this.root.dataset.theme;
-      if (mode === "light" || mode === "dark") theme.mode = mode;
-      applyBlockInlineStyles(clone, theme);
+      const styles = options.styles ?? this.options.htmlStyles ?? "inline";
+      if (styles === "class") {
+        applyBlockClassNames(clone);
+      } else {
+        const theme = readBlockStyleTheme(this.root);
+        const mode = this.root.dataset.theme;
+        if (mode === "light" || mode === "dark") theme.mode = mode;
+        applyBlockInlineStyles(clone, theme);
+      }
       stripEditorOnlyAttrs(clone);
+      stripEditorOnlyNodes(clone);
       return clone.innerHTML;
     }
     setTheme(theme) {
@@ -5860,6 +6153,716 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return listBlocks(this.content, this.idFor);
     }
   }
+  const VOID_TAGS = /* @__PURE__ */ new Set([
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+  ]);
+  const DROPPED_RAW_TAGS = /* @__PURE__ */ new Set(["script", "style"]);
+  const IMPLIED_END = /* @__PURE__ */ new Map([
+    ["li", /* @__PURE__ */ new Set(["li"])],
+    ["p", /* @__PURE__ */ new Set(["p", "div", "ul", "ol", "blockquote", "pre", "table", "h1", "h2", "h3", "h4", "h5", "h6"])],
+    ["td", /* @__PURE__ */ new Set(["td", "th", "tr"])],
+    ["th", /* @__PURE__ */ new Set(["td", "th", "tr"])],
+    ["tr", /* @__PURE__ */ new Set(["tr"])],
+    ["option", /* @__PURE__ */ new Set(["option"])]
+  ]);
+  const NAMED_ENTITIES = {
+    amp: "&",
+    lt: "<",
+    gt: ">",
+    quot: '"',
+    apos: "'",
+    nbsp: " ",
+    ensp: " ",
+    emsp: " ",
+    thinsp: " ",
+    zwnj: "‌",
+    zwj: "‍",
+    hellip: "…",
+    mdash: "—",
+    ndash: "–",
+    lsquo: "‘",
+    rsquo: "’",
+    ldquo: "“",
+    rdquo: "”",
+    middot: "·",
+    bull: "•",
+    copy: "©",
+    reg: "®",
+    trade: "™",
+    deg: "°",
+    plusmn: "±",
+    times: "×",
+    divide: "÷",
+    laquo: "«",
+    raquo: "»"
+  };
+  function decodeEntities(input) {
+    if (!input.includes("&")) return input;
+    return input.replace(
+      /&(#[Xx][0-9A-Fa-f]+|#\d+|[A-Za-z][A-Za-z0-9]{1,31});/g,
+      (whole, body) => {
+        if (body.charCodeAt(0) === 35) {
+          const isHex = body[1] === "x" || body[1] === "X";
+          const digits = isHex ? body.slice(2) : body.slice(1);
+          const code = Number.parseInt(digits, isHex ? 16 : 10);
+          if (!Number.isFinite(code) || code < 0 || code > 1114111) return whole;
+          if (code >= 55296 && code <= 57343) return whole;
+          try {
+            return String.fromCodePoint(code);
+          } catch {
+            return whole;
+          }
+        }
+        const named = NAMED_ENTITIES[body.toLowerCase()];
+        return named ?? whole;
+      }
+    );
+  }
+  function escapeHtml(input) {
+    return input.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
+  function escapeAttr(input) {
+    return escapeHtml(input).replace(/"/g, "&quot;");
+  }
+  function parseAttrs(source) {
+    const attrs = {};
+    const re = /([^\s/=>"']+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'>]+)))?/g;
+    let m;
+    while ((m = re.exec(source)) !== null) {
+      const name = m[1];
+      if (!name) continue;
+      const raw = m[2] ?? m[3] ?? m[4] ?? "";
+      attrs[name.toLowerCase()] = decodeEntities(raw);
+    }
+    return attrs;
+  }
+  function parseHtmlFragment(html) {
+    const root = [];
+    const stack = [];
+    const childrenOfTop = () => {
+      const top = stack[stack.length - 1];
+      return top ? top.children : root;
+    };
+    const pushText = (value) => {
+      if (value.length === 0) return;
+      const target = childrenOfTop();
+      const last = target[target.length - 1];
+      if (last && last.type === "text") last.value += value;
+      else target.push({ type: "text", value });
+    };
+    const closeTag = (tag) => {
+      var _a;
+      for (let i = stack.length - 1; i >= 0; i--) {
+        if (((_a = stack[i]) == null ? void 0 : _a.tag) === tag) {
+          stack.length = i;
+          return;
+        }
+      }
+    };
+    let cursor = 0;
+    while (cursor < html.length) {
+      const lt = html.indexOf("<", cursor);
+      if (lt < 0) {
+        pushText(decodeEntities(html.slice(cursor)));
+        break;
+      }
+      if (lt > cursor) pushText(decodeEntities(html.slice(cursor, lt)));
+      if (html.startsWith("<!--", lt)) {
+        const end = html.indexOf("-->", lt + 4);
+        cursor = end < 0 ? html.length : end + 3;
+        continue;
+      }
+      if (html.startsWith("<!", lt) || html.startsWith("<?", lt)) {
+        const end = html.indexOf(">", lt + 2);
+        cursor = end < 0 ? html.length : end + 1;
+        continue;
+      }
+      const gt = html.indexOf(">", lt + 1);
+      if (gt < 0) {
+        pushText(decodeEntities(html.slice(lt)));
+        break;
+      }
+      const inner = html.slice(lt + 1, gt);
+      cursor = gt + 1;
+      if (inner.startsWith("/")) {
+        const tag2 = inner.slice(1).trim().toLowerCase();
+        if (tag2) closeTag(tag2);
+        continue;
+      }
+      const nameMatch = /^([A-Za-z][^\s/>]*)/.exec(inner);
+      if (!nameMatch || !nameMatch[1]) {
+        pushText(decodeEntities(html.slice(lt, cursor)));
+        continue;
+      }
+      const tag = nameMatch[1].toLowerCase();
+      const rest = inner.slice(nameMatch[1].length);
+      const selfClosing = /\/\s*$/.test(rest);
+      const attrs = parseAttrs(selfClosing ? rest.replace(/\/\s*$/, "") : rest);
+      if (DROPPED_RAW_TAGS.has(tag)) {
+        const closeRe = new RegExp(`</${tag}\\s*>`, "i");
+        const remainder = html.slice(cursor);
+        const found = closeRe.exec(remainder);
+        cursor = found ? cursor + found.index + found[0].length : html.length;
+        continue;
+      }
+      const top = stack[stack.length - 1];
+      if (top) {
+        const closers = IMPLIED_END.get(top.tag);
+        if (closers == null ? void 0 : closers.has(tag)) stack.pop();
+      }
+      const node = { type: "element", tag, attrs, children: [] };
+      childrenOfTop().push(node);
+      if (!selfClosing && !VOID_TAGS.has(tag)) stack.push(node);
+    }
+    return root;
+  }
+  function serializeNodes(nodes) {
+    let out = "";
+    for (const node of nodes) {
+      if (node.type === "text") {
+        out += escapeHtml(node.value);
+        continue;
+      }
+      const attrs = Object.entries(node.attrs).map(([k, v]) => v === "" ? ` ${k}` : ` ${k}="${escapeAttr(v)}"`).join("");
+      if (VOID_TAGS.has(node.tag)) {
+        out += `<${node.tag}${attrs}>`;
+        continue;
+      }
+      out += `<${node.tag}${attrs}>${serializeNodes(node.children)}</${node.tag}>`;
+    }
+    return out;
+  }
+  function textOf(nodes) {
+    let out = "";
+    for (const node of nodes) {
+      if (node.type === "text") {
+        out += node.value;
+        continue;
+      }
+      if (node.tag === "br") {
+        out += "\n";
+        continue;
+      }
+      out += textOf(node.children);
+    }
+    return out;
+  }
+  const BLOCK_LEVEL_TAGS = /* @__PURE__ */ new Set([
+    "address",
+    "article",
+    "aside",
+    "blockquote",
+    "div",
+    "dd",
+    "dl",
+    "dt",
+    "fieldset",
+    "figcaption",
+    "figure",
+    "footer",
+    "form",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "header",
+    "hr",
+    "li",
+    "main",
+    "nav",
+    "ol",
+    "p",
+    "pre",
+    "section",
+    "table",
+    "tbody",
+    "td",
+    "tfoot",
+    "th",
+    "thead",
+    "tr",
+    "ul"
+  ]);
+  function textWithBlockBreaks(nodes) {
+    let out = "";
+    for (const node of nodes) {
+      if (node.type === "text") {
+        out += node.value;
+        continue;
+      }
+      if (node.tag === "br") {
+        out += "\n";
+        continue;
+      }
+      const isBlock = BLOCK_LEVEL_TAGS.has(node.tag);
+      if (isBlock && out !== "" && !out.endsWith("\n")) out += "\n";
+      out += textWithBlockBreaks(node.children);
+      if (isBlock && !out.endsWith("\n")) out += "\n";
+    }
+    return out;
+  }
+  function childElements(nodes, tag) {
+    return nodes.filter(
+      (n) => n.type === "element" && n.tag === tag
+    );
+  }
+  function renderBlocksToHTML(snapshots, options = {}) {
+    const withIds = options.blockIds !== false;
+    const body = upgradeSnapshots(snapshots).map((snap) => renderNormalizedBlock(snap, { blockIds: withIds })).join("");
+    if (options.wrapper !== "content") return body;
+    const themeAttr = options.theme ? ` data-theme="${options.theme}"` : "";
+    return `<div class="aeriz-wysiwyg aeriz-wysiwyg-viewer"${themeAttr}><div class="aw-content-wrap"><div class="aw-content">${body}</div></div></div>`;
+  }
+  function renderBlockToHTML(snapshot, options = {}) {
+    return renderNormalizedBlock(upgradeSnapshot(snapshot), options);
+  }
+  function renderNormalizedBlock(snapshot, options = {}) {
+    const idAttr = options.blockIds === false ? "" : ` ${BLOCK_ID_ATTR}="${escapeAttr(snapshot.id)}"`;
+    const inner = snapshot.html;
+    const styleAttr = snapshot.style ? ` style="${escapeAttr(snapshot.style)}"` : "";
+    switch (snapshot.kind) {
+      case "paragraph":
+        return `<p${idAttr}${styleAttr}>${inner || "<br>"}</p>`;
+      case "unknown":
+        return `<div${idAttr}${styleAttr}>${inner || "<br>"}</div>`;
+      case "heading": {
+        const level = clampHeadingLevel(snapshot.attrs.level);
+        return `<h${level}${idAttr}${styleAttr}>${inner || "<br>"}</h${level}>`;
+      }
+      case "bulletList":
+        return `<ul${idAttr}${styleAttr}>${inner || "<li><br></li>"}</ul>`;
+      case "orderedList":
+        return `<ol${idAttr}${styleAttr}>${inner || "<li><br></li>"}</ol>`;
+      case "blockquote":
+        return `<blockquote${idAttr}${styleAttr}>${inner || "<p><br></p>"}</blockquote>`;
+      case "codeBlock": {
+        if (inner) return `<pre${idAttr}${styleAttr}>${inner}</pre>`;
+        const lang = snapshot.attrs.language;
+        const langAttr = lang ? ` data-language="${escapeAttr(lang)}"` : "";
+        return `<pre${idAttr}${styleAttr}><code${langAttr}></code></pre>`;
+      }
+      case "table":
+        return `<table${idAttr}${styleAttr}>${inner || emptyTableBody(snapshot.attrs.rows, snapshot.attrs.cols)}</table>`;
+      case "hr":
+        return `<hr${idAttr}${styleAttr}>`;
+      case "image":
+        return inner ? `<figure${idAttr}${styleAttr}>${stripChrome(inner)}</figure>` : renderImage(snapshot.attrs, idAttr, styleAttr);
+      case "youtube": {
+        if (!inner) return renderYoutube(snapshot.attrs, idAttr, styleAttr);
+        const videoId = snapshot.attrs.videoId;
+        const idDataAttr = videoId ? ` data-youtube-id="${escapeAttr(videoId)}"` : "";
+        return `<div class="aw-youtube-embed"${idDataAttr}${idAttr}${styleAttr}>${stripChrome(inner)}</div>`;
+      }
+      case "linkCard":
+        return renderLinkCard(snapshot.attrs, idAttr, styleAttr, inner);
+      case "file":
+        return renderFile(snapshot.attrs, idAttr, styleAttr, inner);
+      case "importedHtml": {
+        const style = snapshot.attrs.importedStyle;
+        const cls = snapshot.attrs.importedClass;
+        const importedStyle = snapshot.style ? styleAttr : style ? ` style="${escapeAttr(style)}"` : "";
+        const classAttr = cls ? ` class="${escapeAttr(cls)}"` : "";
+        return `<div data-imported-html="true"${classAttr}${importedStyle}${idAttr}>${inner}</div>`;
+      }
+      default: {
+        return "";
+      }
+    }
+  }
+  const CHROME_CLASS = /aw-block-align-controls|aw-resize-handle/;
+  function stripChrome(html) {
+    if (!CHROME_CLASS.test(html)) return html;
+    const kept = parseHtmlFragment(html).filter(
+      (node) => !(node.type === "element" && CHROME_CLASS.test(node.attrs["class"] ?? ""))
+    );
+    return serializeNodes(kept);
+  }
+  function clampHeadingLevel(level) {
+    if (level === void 0) return 1;
+    if (level < 1) return 1;
+    if (level > 6) return 6;
+    return level;
+  }
+  function emptyTableBody(rows, cols) {
+    const r = Math.max(1, Number.isFinite(rows) ? rows : 1);
+    const c = Math.max(1, Number.isFinite(cols) ? cols : 1);
+    const cells = "<td><br></td>".repeat(c);
+    return `<tbody>${`<tr>${cells}</tr>`.repeat(r)}</tbody>`;
+  }
+  function renderImage(attrs, idAttr, blockStyleAttr) {
+    const styleAttr = blockStyleAttr || (attrs.wrapperStyle ? ` style="${escapeAttr(attrs.wrapperStyle)}"` : "");
+    const srcAttr = attrs.src ? ` src="${escapeAttr(attrs.src)}"` : "";
+    const altAttr = ` alt="${escapeAttr(attrs.alt ?? "")}"`;
+    return `<figure${idAttr}${styleAttr}><img${srcAttr}${altAttr}></figure>`;
+  }
+  function renderYoutube(attrs, idAttr, blockStyleAttr) {
+    const videoId = attrs.videoId ?? "";
+    const styleAttr = blockStyleAttr || (attrs.wrapperStyle ? ` style="${escapeAttr(attrs.wrapperStyle)}"` : "");
+    const idDataAttr = videoId ? ` data-youtube-id="${escapeAttr(videoId)}"` : "";
+    const srcAttr = videoId ? ` src="${escapeAttr(`${YOUTUBE_EMBED_BASE}${videoId}`)}"` : "";
+    return `<div class="aw-youtube-embed"${idDataAttr}${idAttr}${styleAttr}><iframe${srcAttr} allow="${escapeAttr(YOUTUBE_IFRAME_ALLOW)}" allowfullscreen frameborder="0" referrerpolicy="strict-origin-when-cross-origin"></iframe></div>`;
+  }
+  function renderLinkCard(attrs, idAttr, styleAttr, inner) {
+    const href = attrs.href ?? "#";
+    const title = attrs.text && attrs.text.length > 0 ? attrs.text : hostnameFromUrl(href) || href;
+    const description = attrs.description ?? "";
+    const image = attrs.image ?? "";
+    const favicon = attrs.favicon ?? defaultFaviconUrl(href);
+    const classes = image ? "aw-link-card aw-link-card-with-image" : "aw-link-card";
+    const open = `<a class="${classes}" href="${escapeAttr(href)}" target="_blank" rel="noopener"${idAttr}${styleAttr}>`;
+    if (inner) return `${open}${stripChrome(inner)}</a>`;
+    let out = open;
+    if (image) {
+      out += `<img class="aw-link-card-image" src="${escapeAttr(image)}" alt="" loading="lazy">`;
+    }
+    out += '<span class="aw-link-card-body">';
+    out += `<span class="aw-link-card-title">${escapeHtml(title)}</span>`;
+    if (description) {
+      out += `<span class="aw-link-card-desc">${escapeHtml(description)}</span>`;
+    }
+    out += '<span class="aw-link-card-url">';
+    if (favicon) {
+      out += `<img class="aw-link-card-favicon" src="${escapeAttr(favicon)}" alt="" loading="lazy">`;
+    }
+    out += `<span class="aw-link-card-url-text">${escapeHtml(href)}</span>`;
+    out += "</span></span></a>";
+    return out;
+  }
+  function renderFile(attrs, idAttr, styleAttr, inner) {
+    const hrefAttr = attrs.fileSrc ? ` href="${escapeAttr(attrs.fileSrc)}"` : "";
+    const nameAttr = attrs.fileName ? ` data-file-name="${escapeAttr(attrs.fileName)}"` : "";
+    const sizeAttr = attrs.fileSize !== void 0 ? ` data-file-size="${escapeAttr(String(attrs.fileSize))}"` : "";
+    const typeAttr = attrs.fileType ? ` data-file-type="${escapeAttr(attrs.fileType)}"` : "";
+    const downloadAttr = ` download="${escapeAttr(attrs.fileName ?? "")}"`;
+    const infoParts = [];
+    const ext = fileExtensionLabel(attrs.fileName, attrs.fileType);
+    if (ext) infoParts.push(ext);
+    if (attrs.fileSize !== void 0) infoParts.push(formatBytes(attrs.fileSize));
+    const open = `<a class="aw-file-attachment" target="_blank" rel="noopener"${hrefAttr}${downloadAttr}${nameAttr}${sizeAttr}${typeAttr}${idAttr}${styleAttr}>`;
+    if (inner) return `${open}${stripChrome(inner)}</a>`;
+    let out = open;
+    out += `<span class="aw-file-icon" aria-hidden="true">${FILE_ICON_SVG}</span>`;
+    out += '<span class="aw-file-meta">';
+    out += `<span class="aw-file-name">${escapeHtml(attrs.fileName ?? FILE_FALLBACK_NAME)}</span>`;
+    if (infoParts.length > 0) {
+      out += `<span class="aw-file-info">${escapeHtml(infoParts.join(" · "))}</span>`;
+    }
+    out += "</span>";
+    out += `<span class="aw-file-action" aria-hidden="true">${FILE_ACTION_SVG}</span>`;
+    out += "</a>";
+    return out;
+  }
+  const INLINE_ESCAPE = /([\\`*_[\]<])/g;
+  const LINE_START_ESCAPE = /^([#>|+-]|\d+\.)/;
+  function blocksToMarkdown(snapshots, options = {}) {
+    const bullet = options.bullet ?? "-";
+    const gfmTables = options.gfmTables !== false;
+    const chunks = [];
+    for (const snap of upgradeSnapshots(snapshots)) {
+      const chunk = blockToMarkdown(snap, bullet, gfmTables);
+      if (chunk !== "") chunks.push(chunk);
+    }
+    return chunks.length > 0 ? `${chunks.join("\n\n")}
+` : "";
+  }
+  function blockToMarkdown(snapshot, bullet, gfmTables) {
+    var _a, _b, _c;
+    const nodes = parseHtmlFragment(snapshot.html);
+    switch (snapshot.kind) {
+      case "paragraph":
+      case "unknown": {
+        const text = inlineToMarkdown(nodes).trim();
+        return text === "" ? "" : escapeLineStart(text);
+      }
+      case "heading": {
+        const level = Math.min(6, Math.max(1, snapshot.attrs.level ?? 1));
+        const text = inlineToMarkdown(nodes).trim();
+        return text === "" ? "" : `${"#".repeat(level)} ${text}`;
+      }
+      case "bulletList":
+        return listToMarkdown(nodes, { ordered: false, bullet, depth: 0 });
+      case "orderedList":
+        return listToMarkdown(nodes, { ordered: true, bullet, depth: 0 });
+      case "blockquote": {
+        const paragraphs = childElements(nodes, "p");
+        const source = paragraphs.length > 0 ? paragraphs.map((p) => inlineToMarkdown(p.children).trim()) : [inlineToMarkdown(nodes).trim()];
+        const lines = source.filter((line) => line !== "").join("\n\n").split("\n").map((line) => line === "" ? ">" : `> ${line}`);
+        return lines.length > 0 && lines[0] !== void 0 ? lines.join("\n") : "";
+      }
+      case "codeBlock": {
+        const code = childElements(nodes, "code")[0];
+        const body = textOf(code ? code.children : nodes).replace(/\n$/, "");
+        const lang = snapshot.attrs.language ?? (code == null ? void 0 : code.attrs["data-language"]) ?? "";
+        const fence = "`".repeat(Math.max(3, longestBacktickRun(body) + 1));
+        return `${fence}${lang}
+${body}
+${fence}`;
+      }
+      case "image": {
+        const src = snapshot.attrs.src ?? "";
+        if (src === "") return "";
+        return `![${escapeInline(snapshot.attrs.alt ?? "")}](${encodeUrl(src)})`;
+      }
+      case "table":
+        return gfmTables ? tableToMarkdown(nodes) : `<table>${snapshot.html}</table>`;
+      case "hr":
+        return "---";
+      case "linkCard": {
+        const href = snapshot.attrs.href ?? "";
+        if (href === "") return "";
+        const label = ((_a = snapshot.attrs.text) == null ? void 0 : _a.trim()) || href;
+        const line = `[${escapeInline(label)}](${encodeUrl(href)})`;
+        const desc = (_b = snapshot.attrs.description) == null ? void 0 : _b.trim();
+        return desc ? `${line}
+
+${escapeLineStart(escapeInline(desc))}` : line;
+      }
+      case "youtube": {
+        const videoId = snapshot.attrs.videoId;
+        if (!videoId) return "";
+        return `[YouTube](${YOUTUBE_EMBED_BASE}${encodeURIComponent(videoId)})`;
+      }
+      case "file": {
+        const src = snapshot.attrs.fileSrc ?? "";
+        if (src === "") return "";
+        const name = ((_c = snapshot.attrs.fileName) == null ? void 0 : _c.trim()) || src;
+        return `[${escapeInline(name)}](${encodeUrl(src)})`;
+      }
+      case "importedHtml":
+        return snapshot.html.trim();
+      default: {
+        return "";
+      }
+    }
+  }
+  function listToMarkdown(nodes, ctx) {
+    const items = childElements(nodes, "li");
+    if (items.length === 0) return "";
+    const indent = "  ".repeat(ctx.depth);
+    const lines = [];
+    items.forEach((li, index) => {
+      const inline = [];
+      const nested = [];
+      for (const child of li.children) {
+        if (child.type === "element" && (child.tag === "ul" || child.tag === "ol")) {
+          nested.push(child);
+        } else {
+          inline.push(child);
+        }
+      }
+      const marker = ctx.ordered ? `${index + 1}.` : ctx.bullet;
+      const text = inlineToMarkdown(inline).trim();
+      const continuation = `${indent}${" ".repeat(marker.length + 1)}`;
+      const body = text.split("\n").join(`
+${continuation}`);
+      lines.push(`${indent}${marker} ${body}`);
+      for (const sub of nested) {
+        const subMd = listToMarkdown(sub.children, {
+          ordered: sub.tag === "ol",
+          bullet: ctx.bullet,
+          depth: ctx.depth + 1
+        });
+        if (subMd !== "") lines.push(subMd);
+      }
+    });
+    return lines.join("\n");
+  }
+  function tableToMarkdown(nodes) {
+    const rows = [];
+    const collectRows = (list) => {
+      for (const node of list) {
+        if (node.type !== "element") continue;
+        if (node.tag === "tr") {
+          rows.push(node);
+          continue;
+        }
+        if (node.tag === "tbody" || node.tag === "thead" || node.tag === "tfoot") {
+          collectRows(node.children);
+        }
+      }
+    };
+    collectRows(nodes);
+    if (rows.length === 0) return "";
+    const grid = rows.map(
+      (tr) => tr.children.filter(
+        (c) => c.type === "element" && (c.tag === "td" || c.tag === "th")
+      ).map((cell) => cellToMarkdown(cell.children))
+    );
+    const width = grid.reduce((max, row) => Math.max(max, row.length), 0);
+    if (width === 0) return "";
+    const pad = (row) => row.length === width ? row : [...row, ...Array(width - row.length).fill("")];
+    const [head, ...body] = grid.map(pad);
+    const headRow = head ?? Array(width).fill("");
+    const lines = [
+      `| ${headRow.join(" | ")} |`,
+      `| ${Array(width).fill("---").join(" | ")} |`,
+      ...body.map((row) => `| ${row.join(" | ")} |`)
+    ];
+    return lines.join("\n");
+  }
+  function cellToMarkdown(nodes) {
+    return inlineToMarkdown(nodes, { inTableCell: true }).replace(/\n+/g, "<br>").replace(/\|/g, "\\|").trim();
+  }
+  function inlineToMarkdown(nodes, ctx = {}) {
+    let out = "";
+    for (const node of nodes) {
+      if (node.type === "text") {
+        out += escapeInline(node.value);
+        continue;
+      }
+      const children = () => inlineToMarkdown(node.children, ctx);
+      switch (node.tag) {
+        case "br":
+          out += ctx.inTableCell ? "\n" : "  \n";
+          break;
+        case "b":
+        case "strong": {
+          const inner = children();
+          out += inner.trim() === "" ? inner : `**${inner}**`;
+          break;
+        }
+        case "i":
+        case "em": {
+          const inner = children();
+          out += inner.trim() === "" ? inner : `*${inner}*`;
+          break;
+        }
+        case "s":
+        case "del":
+        case "strike": {
+          const inner = children();
+          out += inner.trim() === "" ? inner : `~~${inner}~~`;
+          break;
+        }
+        case "code": {
+          const raw = textOf(node.children);
+          const fence = "`".repeat(longestBacktickRun(raw) + 1);
+          const padding = raw.startsWith("`") || raw.endsWith("`") ? " " : "";
+          out += `${fence}${padding}${raw}${padding}${fence}`;
+          break;
+        }
+        case "a": {
+          const href = node.attrs["href"];
+          const inner = children();
+          out += href ? `[${inner}](${encodeUrl(href)})` : inner;
+          break;
+        }
+        case "img": {
+          const src = node.attrs["src"];
+          if (src) out += `![${escapeInline(node.attrs["alt"] ?? "")}](${encodeUrl(src)})`;
+          break;
+        }
+        case "u":
+        case "sub":
+        case "sup":
+        case "mark":
+          out += `<${node.tag}>${children()}</${node.tag}>`;
+          break;
+        default:
+          out += children();
+          break;
+      }
+    }
+    return out;
+  }
+  function escapeInline(text) {
+    return text.replace(INLINE_ESCAPE, "\\$1");
+  }
+  function escapeLineStart(text) {
+    return text.replace(LINE_START_ESCAPE, "\\$1");
+  }
+  function longestBacktickRun(text) {
+    let longest = 0;
+    let current = 0;
+    for (const ch of text) {
+      if (ch === "`") {
+        current += 1;
+        if (current > longest) longest = current;
+      } else {
+        current = 0;
+      }
+    }
+    return longest;
+  }
+  function encodeUrl(url) {
+    const trimmed = url.trim();
+    if (/[\s()]/.test(trimmed)) {
+      return `<${trimmed.replace(/[<>]/g, "")}>`;
+    }
+    return trimmed;
+  }
+  function blocksToPlainText(snapshots, options = {}) {
+    const blockSeparator = options.blockSeparator ?? "\n\n";
+    const cellSeparator = options.cellSeparator ?? "	";
+    const chunks = [];
+    for (const snap of upgradeSnapshots(snapshots)) {
+      const text = blockToPlainText(snap, cellSeparator);
+      if (text !== "") chunks.push(text);
+    }
+    return chunks.join(blockSeparator);
+  }
+  function blockToPlainText(snapshot, cellSeparator) {
+    switch (snapshot.kind) {
+      case "hr":
+      case "youtube":
+        return "";
+      case "image":
+        return normalize(snapshot.attrs.alt ?? "");
+      case "linkCard":
+        return normalize(snapshot.attrs.text ?? snapshot.attrs.href ?? "");
+      case "file":
+        return normalize(snapshot.attrs.fileName ?? "");
+      case "bulletList":
+      case "orderedList": {
+        const items = childElements(parseHtmlFragment(snapshot.html), "li");
+        return items.map((li) => normalize(textWithBlockBreaks(li.children))).filter((line) => line !== "").join("\n");
+      }
+      case "table":
+        return tableToPlainText(parseHtmlFragment(snapshot.html), cellSeparator);
+      default:
+        return normalize(textWithBlockBreaks(parseHtmlFragment(snapshot.html)));
+    }
+  }
+  function tableToPlainText(nodes, cellSeparator) {
+    const rows = [];
+    const collect = (list) => {
+      for (const node of list) {
+        if (node.type !== "element") continue;
+        if (node.tag === "tr") rows.push(node);
+        else if (["tbody", "thead", "tfoot"].includes(node.tag)) {
+          collect(node.children);
+        }
+      }
+    };
+    collect(nodes);
+    return rows.map(
+      (tr) => tr.children.filter(
+        (c) => c.type === "element" && (c.tag === "td" || c.tag === "th")
+      ).map((cell) => normalize(textWithBlockBreaks(cell.children)).replace(/\n+/g, " ")).join(cellSeparator)
+    ).filter((line) => line.replace(new RegExp(escapeRegExp(cellSeparator), "g"), "").trim() !== "").join("\n");
+  }
+  function normalize(text) {
+    return text.replace(/[​-‍]/g, "").split("\n").map((line) => line.replace(/[^\S\n]+/g, " ").trim()).join("\n").replace(/\n{3,}/g, "\n\n").trim();
+  }
+  function escapeRegExp(input) {
+    return input.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  }
+  exports.ALIGN_CLASS_BY_VALUE = ALIGN_CLASS_BY_VALUE;
   exports.ALL_INLINE_MARKS = ALL_INLINE_MARKS;
   exports.AerizEditor = AerizEditor;
   exports.AerizViewer = AerizViewer;
@@ -5868,9 +6871,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   exports.BLOCK_TYPE_BY_KIND = BLOCK_TYPE_BY_KIND;
   exports.BlockIdRegistry = BlockIdRegistry;
   exports.DEFAULT_TOOLBAR = DEFAULT_TOOLBAR;
+  exports.SNAPSHOT_VERSION = SNAPSHOT_VERSION;
+  exports.applyBlockClassNames = applyBlockClassNames;
   exports.applyBlockInlineStyles = applyBlockInlineStyles;
   exports.assignMissingIds = assignMissingIds;
+  exports.blocksToMarkdown = blocksToMarkdown;
+  exports.blocksToPlainText = blocksToPlainText;
   exports.classifyBlockElement = classifyBlockElement;
+  exports.decodeEntities = decodeEntities;
+  exports.escapeAttr = escapeAttr;
+  exports.escapeHtml = escapeHtml;
   exports.extractInlineContent = extractInlineContent;
   exports.fillInlineContent = fillInlineContent;
   exports.findBlockFrom = findBlockFrom;
@@ -5878,13 +6888,24 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   exports.isElementBlank = isElementBlank;
   exports.listBlocks = listBlocks;
   exports.normalizeContent = normalizeContent;
+  exports.parseHtmlFragment = parseHtmlFragment;
   exports.placeCaretAtStart = placeCaretAtStart;
   exports.readBlockStyleTheme = readBlockStyleTheme;
   exports.renderBlock = renderBlock;
+  exports.renderBlockToHTML = renderBlockToHTML;
   exports.renderBlocks = renderBlocks;
+  exports.renderBlocksToHTML = renderBlocksToHTML;
+  exports.restoreAlignFromClasses = restoreAlignFromClasses;
   exports.serializeBlock = serializeBlock;
   exports.serializeBlocks = serializeBlocks;
+  exports.serializeNodes = serializeNodes;
+  exports.snapshotVersionOf = snapshotVersionOf;
   exports.stripEditorOnlyAttrs = stripEditorOnlyAttrs;
+  exports.stripEditorOnlyNodes = stripEditorOnlyNodes;
+  exports.textOf = textOf;
+  exports.textWithBlockBreaks = textWithBlockBreaks;
+  exports.upgradeSnapshot = upgradeSnapshot;
+  exports.upgradeSnapshots = upgradeSnapshots;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
   return exports;
 }({});