@aeriz/wysiwyg 1.0.0 → 1.0.2

package/dist/aeriz-wysiwyg.js

@@ -2388,10 +2388,124 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   function setLocale(locale) {
   }
   const STRIP_TAGS = ["script", "noscript", "meta", "link", "style", "base"];
+  const INHERITED_PROPERTIES = /* @__PURE__ */ new Set([
+    // CSS 2.1
+    "border-collapse",
+    "border-spacing",
+    "caption-side",
+    "color",
+    "cursor",
+    "direction",
+    "empty-cells",
+    "font-family",
+    "font-size",
+    "font-style",
+    "font-variant",
+    "font-weight",
+    "letter-spacing",
+    "line-height",
+    "list-style",
+    "list-style-image",
+    "list-style-position",
+    "list-style-type",
+    "orphans",
+    "quotes",
+    "text-align",
+    "text-indent",
+    "text-transform",
+    "visibility",
+    "white-space",
+    "widows",
+    "word-spacing",
+    // CSS 3+
+    "caret-color",
+    "font",
+    "font-feature-settings",
+    "font-kerning",
+    "font-language-override",
+    "font-optical-sizing",
+    "font-palette",
+    "font-size-adjust",
+    "font-stretch",
+    "font-synthesis",
+    "font-synthesis-weight",
+    "font-synthesis-style",
+    "font-synthesis-small-caps",
+    "font-variant-alternates",
+    "font-variant-caps",
+    "font-variant-east-asian",
+    "font-variant-emoji",
+    "font-variant-ligatures",
+    "font-variant-numeric",
+    "font-variant-position",
+    "font-variation-settings",
+    "hanging-punctuation",
+    "hyphens",
+    "image-rendering",
+    "line-break",
+    "overflow-wrap",
+    "pointer-events",
+    "ruby-align",
+    "ruby-position",
+    "tab-size",
+    "text-align-last",
+    "text-combine-upright",
+    "text-decoration-color",
+    "text-emphasis",
+    "text-emphasis-color",
+    "text-emphasis-position",
+    "text-emphasis-style",
+    "text-justify",
+    "text-orientation",
+    "text-rendering",
+    "text-shadow",
+    "text-size-adjust",
+    "text-underline-offset",
+    "text-underline-position",
+    "white-space-collapse",
+    "word-break",
+    "word-wrap",
+    "writing-mode",
+    "color-scheme",
+    "print-color-adjust",
+    // Vendor
+    "-webkit-font-smoothing",
+    "-moz-osx-font-smoothing",
+    "-webkit-locale",
+    "-webkit-text-fill-color",
+    "-webkit-text-stroke",
+    "-webkit-text-stroke-color",
+    "-webkit-text-stroke-width",
+    "-webkit-print-color-adjust",
+    // SVG
+    "clip-rule",
+    "color-interpolation",
+    "color-interpolation-filters",
+    "color-rendering",
+    "fill",
+    "fill-opacity",
+    "fill-rule",
+    "marker",
+    "marker-end",
+    "marker-mid",
+    "marker-start",
+    "paint-order",
+    "shape-rendering",
+    "stroke",
+    "stroke-dasharray",
+    "stroke-dashoffset",
+    "stroke-linecap",
+    "stroke-linejoin",
+    "stroke-miterlimit",
+    "stroke-opacity",
+    "stroke-width",
+    "text-anchor"
+  ]);
   async function importHtmlWithComputedStyles(html, options = {}) {
     const settleMs = options.settleMs ?? 1e3;
     const timeoutMs = options.timeoutMs ?? 3e4;
     const width = options.width ?? 1024;
+    const mountTarget = options.mountTarget ?? null;
     return new Promise((resolve, reject) => {
       const iframe = document.createElement("iframe");
       iframe.setAttribute("aria-hidden", "true");
@@ -2444,7 +2558,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   fail(new Error("iframe document 접근 실패"));
                   return;
                 }
-                const baked = bakeBodyToImportable(doc.body, w);
+                const baked = bakeBodyToImportable(doc.body, w, mountTarget);
                 window.clearTimeout(timer);
                 finish(baked);
               } catch (err) {
@@ -2461,23 +2575,30 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       document.body.appendChild(iframe);
     });
   }
-  function bakeBodyToImportable(body, win) {
+  function bakeBodyToImportable(body, win, mountTarget) {
     var _a;
+    const doc = body.ownerDocument;
+    if (!doc) throw new Error("body has no ownerDocument");
     const wrapper = document.createElement("div");
-    for (let i = 0; i < body.attributes.length; i++) {
-      const attr = body.attributes.item(i);
-      if (!attr) continue;
-      if (attr.name === "style") continue;
-      wrapper.setAttribute(attr.name, attr.value);
-    }
-    const bodyStyle = computedStyleToInline(body, win);
-    if (bodyStyle.length > 0) {
-      wrapper.setAttribute("style", bodyStyle);
-    }
-    for (const child of Array.from(body.children)) {
-      const imported = document.importNode(child, true);
-      applyComputedStylesParallel(child, imported, win);
-      wrapper.appendChild(imported);
+    const baseline = createBaselineProbe(doc, win, mountTarget);
+    try {
+      for (let i = 0; i < body.attributes.length; i++) {
+        const attr = body.attributes.item(i);
+        if (!attr) continue;
+        if (attr.name === "style") continue;
+        wrapper.setAttribute(attr.name, attr.value);
+      }
+      const wrapperStyle = computeMinimalInline(body, null, "div", baseline.get, win);
+      if (wrapperStyle.length > 0) {
+        wrapper.setAttribute("style", wrapperStyle);
+      }
+      for (const child of Array.from(body.children)) {
+        const imported = document.importNode(child, true);
+        applyComputedStylesParallel(child, imported, body, baseline.get, win);
+        wrapper.appendChild(imported);
+      }
+    } finally {
+      baseline.cleanup();
     }
     for (const tag of STRIP_TAGS) {
       for (const el of Array.from(wrapper.querySelectorAll(tag))) {
@@ -2491,24 +2612,83 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     wrapper.setAttribute("data-imported-html", "true");
     return [wrapper];
   }
-  function computedStyleToInline(el, win) {
+  function createBaselineProbe(iframeDoc, iframeWin, mountTarget) {
+    var _a;
+    let probeDoc;
+    let probeWin;
+    let probeHost;
+    const targetWin = ((_a = mountTarget == null ? void 0 : mountTarget.ownerDocument) == null ? void 0 : _a.defaultView) ?? null;
+    if (mountTarget && targetWin) {
+      probeDoc = mountTarget.ownerDocument;
+      probeWin = targetWin;
+      const host = probeDoc.createElement("div");
+      host.setAttribute("data-imported-html", "true");
+      host.setAttribute("aria-hidden", "true");
+      host.style.cssText = "position:absolute;left:-99999px;top:0;visibility:hidden;pointer-events:none;";
+      mountTarget.appendChild(host);
+      probeHost = host;
+    } else {
+      probeDoc = iframeDoc;
+      probeWin = iframeWin;
+      const host = probeDoc.createElement("div");
+      host.setAttribute("aria-hidden", "true");
+      host.style.cssText = "position:absolute;left:-99999px;top:0;width:0;height:0;overflow:hidden;visibility:hidden;";
+      probeDoc.body.appendChild(host);
+      probeHost = host;
+    }
+    const cache = /* @__PURE__ */ new Map();
+    const get = (tagName) => {
+      const cached = cache.get(tagName);
+      if (cached) return cached;
+      const probe = probeDoc.createElement(tagName);
+      probeHost.appendChild(probe);
+      const cs = probeWin.getComputedStyle(probe);
+      const map = /* @__PURE__ */ new Map();
+      for (let i = 0; i < cs.length; i++) {
+        const prop = cs.item(i);
+        if (prop) map.set(prop, cs.getPropertyValue(prop));
+      }
+      probeHost.removeChild(probe);
+      cache.set(tagName, map);
+      return map;
+    };
+    const cleanup = () => {
+      if (probeHost.parentNode) probeHost.parentNode.removeChild(probeHost);
+    };
+    return { get, cleanup };
+  }
+  function computeMinimalInline(el, parent, baselineTagName, getBaseline, win) {
     const cs = win.getComputedStyle(el);
+    const parentCs = parent ? win.getComputedStyle(parent) : null;
+    const baseline = getBaseline(baselineTagName);
     let cssText = "";
     for (let i = 0; i < cs.length; i++) {
       const prop = cs.item(i);
       if (!prop) continue;
       const val = cs.getPropertyValue(prop);
-      if (val && val.length > 0) {
-        cssText += `${prop}:${val};`;
+      if (!val) continue;
+      if (INHERITED_PROPERTIES.has(prop)) {
+        if (parentCs && parentCs.getPropertyValue(prop) === val) continue;
+      } else {
+        if (baseline.get(prop) === val) continue;
       }
+      cssText += `${prop}:${val};`;
     }
     return cssText;
   }
-  function applyComputedStylesParallel(orig, copy, win) {
+  function applyComputedStylesParallel(orig, copy, origParent, getBaseline, win) {
     if (orig.nodeType === 1 && copy.nodeType === 1) {
-      const cssText = computedStyleToInline(orig, win);
+      const cssText = computeMinimalInline(
+        orig,
+        origParent,
+        orig.tagName.toLowerCase(),
+        getBaseline,
+        win
+      );
       if (cssText.length > 0) {
         copy.setAttribute("style", cssText);
+      } else if (copy.hasAttribute("style")) {
+        copy.removeAttribute("style");
       }
     }
     const origChildren = orig.children;
@@ -2517,7 +2697,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     for (let i = 0; i < n; i++) {
       const oc = origChildren[i];
       const cc = copyChildren[i];
-      if (oc && cc) applyComputedStylesParallel(oc, cc, win);
+      if (oc && cc) applyComputedStylesParallel(oc, cc, orig, getBaseline, win);
     }
   }
   function markdownToBlocks(md) {
@@ -2734,6 +2914,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     label: "단락",
     allowsInlineFormat: true,
     allowedMarks: ALL_INLINE_MARKS,
+    allowsColor: true,
+    allowsFontSize: true,
     matches: (el) => el.tagName === "P" ? { kind: "paragraph", attrs: {} } : null,
     create: () => fillEmpty(document.createElement("p")),
     isEmpty: (el) => isElementBlank(el)
@@ -2745,6 +2927,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     // 사용자 지정 — 제목은 italic 만 허용. (bold 는 heading 자체가 굵으므로
     // 중복, underline / strike 는 가독성/시맨틱 면에서 부적합.)
     allowedMarks: ["italic"],
+    // 글자색/배경색은 시맨틱 헤딩 톤 보존을 위해 X.
+    allowsColor: false,
+    // 글자 크기는 heading level (h1~h6) 로 결정되므로 X.
+    allowsFontSize: false,
     matches: (el) => {
       const m = /^H([1-6])$/.exec(el.tagName);
       if (!m) return null;
@@ -2761,6 +2947,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     label: "글머리 목록",
     allowsInlineFormat: true,
     allowedMarks: ALL_INLINE_MARKS,
+    allowsColor: true,
+    allowsFontSize: true,
     matches: (el) => el.tagName === "UL" ? { kind: "bulletList", attrs: {} } : null,
     create: () => createListElement("ul"),
     isEmpty: (el) => isListEmpty(el)
@@ -2770,6 +2958,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     label: "번호 매기기 목록",
     allowsInlineFormat: true,
     allowedMarks: ALL_INLINE_MARKS,
+    allowsColor: true,
+    allowsFontSize: true,
     matches: (el) => el.tagName === "OL" ? { kind: "orderedList", attrs: {} } : null,
     create: () => createListElement("ol"),
     isEmpty: (el) => isListEmpty(el)
@@ -2781,6 +2971,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     // 사용자 지정 — 인용구는 italic 제외(인용 자체가 이미 italic 으로 렌더되어
     // 중복). bold / underline / strike 만 허용.
     allowedMarks: ["bold", "underline", "strike"],
+    // 인용구 자체의 톤(이탤릭/주변 색조) 을 보존.
+    allowsColor: false,
+    allowsFontSize: true,
     matches: (el) => el.tagName === "BLOCKQUOTE" ? { kind: "blockquote", attrs: {} } : null,
     create: () => {
       const bq = document.createElement("blockquote");
@@ -2794,6 +2987,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     label: "코드 블록",
     allowsInlineFormat: false,
     allowedMarks: [],
+    // 코드 블록은 인라인 서식은 막혀 있지만 글자 크기 조정은 (가독성) 의미가
+    // 있어 예외적으로 허용. 색은 syntax highlight 와 충돌하므로 X.
+    allowsColor: false,
+    allowsFontSize: true,
     matches: (el) => {
       if (el.tagName !== "PRE") return null;
       const code = el.querySelector(":scope > code");
@@ -2814,6 +3011,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     label: "이미지",
     allowsInlineFormat: false,
     allowedMarks: [],
+    allowsColor: false,
+    allowsFontSize: false,
     matches: (el) => {
       if (el.tagName === "FIGURE") {
         const img = el.querySelector(":scope > img");
@@ -2877,6 +3076,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     label: "표",
     allowsInlineFormat: true,
     allowedMarks: ALL_INLINE_MARKS,
+    allowsColor: true,
+    allowsFontSize: true,
     matches: (el) => {
       var _a;
       if (el.tagName !== "TABLE") return null;
@@ -2909,6 +3110,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     label: "구분선",
     allowsInlineFormat: false,
     allowedMarks: [],
+    allowsColor: false,
+    allowsFontSize: false,
     matches: (el) => el.tagName === "HR" ? { kind: "hr", attrs: {} } : null,
     create: () => {
       const hr = document.createElement("hr");
@@ -2922,6 +3125,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     label: "유튜브",
     allowsInlineFormat: false,
     allowedMarks: [],
+    allowsColor: false,
+    allowsFontSize: false,
     matches: (el) => {
       if (el.tagName !== "DIV") return null;
       if (!el.classList.contains("aw-youtube-embed")) return null;
@@ -2962,6 +3167,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     label: "링크",
     allowsInlineFormat: false,
     allowedMarks: [],
+    allowsColor: false,
+    allowsFontSize: false,
     matches: (el) => {
       var _a, _b, _c, _d, _e;
       if (el.tagName !== "A") return null;
@@ -3049,6 +3256,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     label: "파일",
     allowsInlineFormat: false,
     allowedMarks: [],
+    allowsColor: false,
+    allowsFontSize: false,
     matches: (el) => {
       if (el.tagName !== "A") return null;
       if (!el.classList.contains("aw-file-attachment")) return null;
@@ -3132,6 +3341,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     label: "HTML",
     allowsInlineFormat: false,
     allowedMarks: [],
+    allowsColor: false,
+    allowsFontSize: false,
     matches: (el) => {
       if (el.tagName !== "DIV") return null;
       if (el.getAttribute("data-imported-html") !== "true") return null;
@@ -3156,6 +3367,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     label: "알 수 없음",
     allowsInlineFormat: false,
     allowedMarks: [],
+    allowsColor: false,
+    allowsFontSize: false,
     matches: () => null,
     create: () => fillEmpty(document.createElement("p")),
     isEmpty: (el) => isElementBlank(el)
@@ -3430,6 +3643,72 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     if (!target) return;
     while (target.firstChild) target.removeChild(target.firstChild);
     for (const node of content) target.appendChild(node);
+    const type = BLOCK_TYPE_BY_KIND[kind];
+    if (type) sanitizeInlineFormat(target, type);
+  }
+  function sanitizeInlineFormat(container, type) {
+    const allowed = new Set(type.allowedMarks);
+    for (const el of Array.from(container.querySelectorAll("*"))) {
+      if (!(el instanceof HTMLElement)) continue;
+      if (!el.parentNode) continue;
+      const tag = el.tagName.toLowerCase();
+      if ((tag === "b" || tag === "strong") && !allowed.has("bold") || (tag === "i" || tag === "em") && !allowed.has("italic") || tag === "u" && !allowed.has("underline") || (tag === "s" || tag === "strike" || tag === "del") && !allowed.has("strike")) {
+        unwrapElement(el);
+        continue;
+      }
+      if (tag === "span" || tag === "font") {
+        const s = el.style;
+        if (!allowed.has("bold")) {
+          const fw = s.fontWeight;
+          if (fw === "bold" || fw === "bolder" || /^[7-9]\d{2}$|^1000$/.test(fw)) {
+            s.removeProperty("font-weight");
+          }
+        }
+        if (!allowed.has("italic") && s.fontStyle === "italic") {
+          s.removeProperty("font-style");
+        }
+        const td = s.textDecorationLine || s.textDecoration || "";
+        if (td) {
+          const parts = td.split(/\s+/);
+          const kept = parts.filter((p) => {
+            if (p === "underline" && !allowed.has("underline")) return false;
+            if (p === "line-through" && !allowed.has("strike")) return false;
+            return true;
+          });
+          if (kept.length !== parts.length) {
+            s.removeProperty("text-decoration");
+            s.removeProperty("text-decoration-line");
+            if (kept.length > 0) s.textDecoration = kept.join(" ");
+          }
+        }
+        if (!type.allowsColor) {
+          s.removeProperty("color");
+          s.removeProperty("background-color");
+          if (tag === "font") el.removeAttribute("color");
+        }
+        if (!type.allowsFontSize) {
+          s.removeProperty("font-size");
+          if (tag === "font") el.removeAttribute("size");
+        }
+        if (!type.allowsInlineFormat) {
+          s.removeProperty("font-family");
+          if (tag === "font") el.removeAttribute("face");
+        }
+        const hasStyle = s.cssText.trim().length > 0;
+        const hasOtherAttrs = Array.from(el.attributes).some(
+          (a) => a.name !== "style"
+        );
+        if (!hasStyle && !hasOtherAttrs) {
+          unwrapElement(el);
+        }
+      }
+    }
+  }
+  function unwrapElement(el) {
+    const parent = el.parentNode;
+    if (!parent) return;
+    while (el.firstChild) parent.insertBefore(el.firstChild, el);
+    parent.removeChild(el);
   }
   function resolveTheme(theme = {}) {
     const fg = theme.fg || "currentColor";
@@ -3582,12 +3861,32 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   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;
   }
   function stripEditorOnlyAttrs(root) {
     for (const el of Array.from(root.querySelectorAll("[data-block-kind]"))) {
@@ -4752,7 +5051,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
         let imported;
         try {
-          imported = await importHtmlWithComputedStyles(result.html);
+          imported = await importHtmlWithComputedStyles(result.html, {
+            mountTarget: this.content
+          });
         } catch (err) {
           console.error("HTML 가져오기 실패:", err);
           const msg = err instanceof Error ? err.message : String(err);
@@ -5269,27 +5570,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const type = BLOCK_TYPE_BY_KIND[active.kind] ?? BLOCK_TYPE_BY_KIND.unknown;
     return type.allowsInlineFormat;
   }
-  const FONT_SIZE_ALLOWED_KINDS = /* @__PURE__ */ new Set([
-    "paragraph",
-    "bulletList",
-    "orderedList",
-    "blockquote",
-    "codeBlock",
-    "table"
-  ]);
   function isFontSizeAllowed(active) {
     if (!active) return false;
-    return FONT_SIZE_ALLOWED_KINDS.has(active.kind);
+    const type = BLOCK_TYPE_BY_KIND[active.kind] ?? BLOCK_TYPE_BY_KIND.unknown;
+    return type.allowsFontSize;
   }
-  const COLOR_ALLOWED_KINDS = /* @__PURE__ */ new Set([
-    "paragraph",
-    "bulletList",
-    "orderedList",
-    "table"
-  ]);
   function isColorAllowed(active) {
     if (!active) return false;
-    return COLOR_ALLOWED_KINDS.has(active.kind);
+    const type = BLOCK_TYPE_BY_KIND[active.kind] ?? BLOCK_TYPE_BY_KIND.unknown;
+    return type.allowsColor;
   }
   const ALIGN_ALLOWED_KINDS = /* @__PURE__ */ new Set([
     "paragraph",