@aeriz/wysiwyg 1.0.1 → 1.0.3

package/dist/aeriz-wysiwyg.esm.js

@@ -882,27 +882,80 @@ function pxFromCss(css) {
   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) {
@@ -1630,9 +1683,9 @@ const LANG_BY_ID = (() => {
   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);
 }
@@ -1646,14 +1699,14 @@ function tokenize(code, lang) {
     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;
     }
@@ -1673,7 +1726,7 @@ function tokenize(code, lang) {
         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;
     }
@@ -1681,7 +1734,7 @@ function tokenize(code, lang) {
     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;
       }
@@ -1692,22 +1745,22 @@ function tokenize(code, lang) {
       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;
@@ -1721,14 +1774,14 @@ function highlightHtml(code) {
     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);
@@ -1736,7 +1789,7 @@ function highlightHtml(code) {
       i = end + 1;
       continue;
     }
-    out += escapeHtml$1(code[i] ?? "");
+    out += escapeHtml$2(code[i] ?? "");
     i++;
   }
   return out;
@@ -1746,27 +1799,27 @@ function highlightHtmlTag(tag) {
   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;
@@ -1780,20 +1833,20 @@ function highlightCss(code) {
     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;
     }
@@ -1805,7 +1858,7 @@ function highlightCss(code) {
         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;
     }
@@ -1814,17 +1867,17 @@ function highlightCss(code) {
       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;
@@ -1832,12 +1885,12 @@ function highlightCss(code) {
     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;
@@ -1848,22 +1901,22 @@ function highlightMarkdown(code) {
 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>');
@@ -1873,7 +1926,7 @@ function highlightMdInline(s) {
   );
   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) {
@@ -2144,31 +2197,42 @@ function openFontFamilyDropdown(anchor, onPick, currentId) {
   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) {
@@ -2499,6 +2563,24 @@ const INHERITED_PROPERTIES = /* @__PURE__ */ new Set([
   "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;
@@ -2655,8 +2737,8 @@ function createBaselineProbe(iframeDoc, iframeWin, mountTarget) {
   };
   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 = "";
@@ -2665,6 +2747,8 @@ function computeMinimalInline(el, parent, baselineTagName, getBaseline, win) {
     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 {
@@ -2674,6 +2758,56 @@ function computeMinimalInline(el, parent, baselineTagName, getBaseline, win) {
   }
   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(
@@ -2697,6 +2831,10 @@ function applyComputedStylesParallel(orig, copy, origParent, getBaseline, win) {
     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);
@@ -2729,9 +2867,9 @@ function markdownToHtml(md) {
         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;
     }
@@ -2865,42 +3003,115 @@ function joinSoftBreaks(lines) {
   }
   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",
@@ -3144,12 +3355,9 @@ const YOUTUBE = {
     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");
@@ -3237,18 +3445,6 @@ const LINK_CARD = {
   },
   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: "파일",
@@ -3287,12 +3483,12 @@ const FILE = {
     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);
@@ -3307,7 +3503,7 @@ const FILE = {
     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);
@@ -3315,25 +3511,6 @@ const FILE = {
   },
   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",
@@ -3368,7 +3545,11 @@ const UNKNOWN = {
   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 = [
@@ -3398,7 +3579,6 @@ function classifyBlockElement(el) {
   }
   return { type: UNKNOWN, match: { kind: "unknown", attrs: {} } };
 }
-const BLOCK_ID_ATTR = "data-block-id";
 class BlockIdRegistry {
   constructor() {
     __publicField(this, "counter", 0);
@@ -3455,6 +3635,7 @@ function assignMissingIds(root, ids) {
   }
 }
 function normalizeContent(root) {
+  restoreAlignFromClasses(root);
   for (const node of Array.from(root.childNodes)) {
     if (node.nodeType !== Node.TEXT_NODE) continue;
     const text = node.textContent ?? "";
@@ -3529,13 +3710,25 @@ function getBlockLabel(match) {
   }
 }
 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);
 }
@@ -3543,6 +3736,7 @@ function renderBlock(snapshot) {
   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;
   }
@@ -3550,7 +3744,7 @@ function renderBlock(snapshot) {
 }
 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));
   }
 }
@@ -3859,12 +4053,83 @@ function applyBlockInlineStyles(root, theme = {}) {
 function mergeInlineStyle(el, portable) {
   const existing = (el.getAttribute("style") ?? "").trim();
   if (!existing) {
-    el.setAttribute("style", portable);
+    const trimmed = portable.replace(/;\s*$/, "").trim();
+    if (trimmed) el.setAttribute("style", trimmed);
     return;
   }
-  const p = portable.replace(/;\s*$/, "");
-  const u = existing.replace(/;\s*$/, "");
-  el.setAttribute("style", `${p};${u}`);
+  const userDecls = parseStyleDeclarations(existing);
+  const userProps = new Set(userDecls.map((d) => d.prop));
+  const portableDecls = parseStyleDeclarations(portable).filter(
+    (d) => !userProps.has(d.prop)
+  );
+  const merged = [...portableDecls, ...userDecls].map((d) => `${d.prop}:${d.value}`).join(";");
+  if (merged) el.setAttribute("style", merged);
+  else el.removeAttribute("style");
+}
+function parseStyleDeclarations(s) {
+  const out = [];
+  for (const part of s.split(";")) {
+    const trimmed = part.trim();
+    if (!trimmed) continue;
+    const idx = trimmed.indexOf(":");
+    if (idx <= 0) continue;
+    const prop = trimmed.slice(0, idx).trim().toLowerCase();
+    const value = trimmed.slice(idx + 1).trim();
+    if (!prop || !value) continue;
+    out.push({ prop, value });
+  }
+  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]"))) {
@@ -3960,6 +4225,7 @@ const BLOCK_TOGGLE_MAP = {
   codeBlock: "codeBlock"
 };
 const DRAG_MIME = "application/x-aeriz-block";
+const MIN_BLOCK_WIDTH = 80;
 class AerizEditor {
   constructor(options) {
     __publicField(this, "root");
@@ -4118,20 +4384,37 @@ class AerizEditor {
     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. 직렬화 검증/디버그 용도. */
@@ -4795,15 +5078,20 @@ class AerizEditor {
    * 이미지 / 유튜브 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);
@@ -4815,6 +5103,15 @@ class AerizEditor {
     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;
@@ -5310,7 +5607,7 @@ class AerizEditor {
   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`;
@@ -5731,7 +6028,7 @@ function queryCommandStateSafe(command) {
     return false;
   }
 }
-const BLOCK_LEVEL_TAGS = /* @__PURE__ */ new Set([
+const BLOCK_LEVEL_TAGS$1 = /* @__PURE__ */ new Set([
   "P",
   "DIV",
   "SECTION",
@@ -5764,7 +6061,7 @@ const BLOCK_LEVEL_TAGS = /* @__PURE__ */ new Set([
   "ADDRESS"
 ]);
 function isBlockLevelTag(tagName) {
-  return BLOCK_LEVEL_TAGS.has(tagName.toUpperCase());
+  return BLOCK_LEVEL_TAGS$1.has(tagName.toUpperCase());
 }
 class AerizViewer {
   constructor(options) {
@@ -5772,10 +6069,17 @@ class AerizViewer {
     __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) {
@@ -5814,16 +6118,25 @@ class AerizViewer {
     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) {
@@ -5838,11 +6151,721 @@ class AerizViewer {
     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, "\\$&");
+}
 if (typeof globalThis.AerizWysiwyg === "object") {
   globalThis.AerizEditor = globalThis.AerizWysiwyg.AerizEditor;
   globalThis.AerizViewer = globalThis.AerizWysiwyg.AerizViewer;
 }
 export {
+  ALIGN_CLASS_BY_VALUE,
   ALL_INLINE_MARKS,
   AerizEditor,
   AerizViewer,
@@ -5851,9 +6874,16 @@ export {
   BLOCK_TYPE_BY_KIND,
   BlockIdRegistry,
   DEFAULT_TOOLBAR,
+  SNAPSHOT_VERSION,
+  applyBlockClassNames,
   applyBlockInlineStyles,
   assignMissingIds,
+  blocksToMarkdown,
+  blocksToPlainText,
   classifyBlockElement,
+  decodeEntities,
+  escapeAttr,
+  escapeHtml,
   extractInlineContent,
   fillInlineContent,
   findBlockFrom,
@@ -5861,11 +6891,22 @@ export {
   isElementBlank,
   listBlocks,
   normalizeContent,
+  parseHtmlFragment,
   placeCaretAtStart,
   readBlockStyleTheme,
   renderBlock,
+  renderBlockToHTML,
   renderBlocks,
+  renderBlocksToHTML,
+  restoreAlignFromClasses,
   serializeBlock,
   serializeBlocks,
-  stripEditorOnlyAttrs
+  serializeNodes,
+  snapshotVersionOf,
+  stripEditorOnlyAttrs,
+  stripEditorOnlyNodes,
+  textOf,
+  textWithBlockBreaks,
+  upgradeSnapshot,
+  upgradeSnapshots
 };