@aeriz/wysiwyg 1.0.0 → 1.0.1

package/README.md

@@ -0,0 +1,96 @@
+# @aeriz/wysiwyg
+
+한국어 친화 contentEditable WYSIWYG 에디터.
+
+자세한 동작 사양은 [SPEC.md](./SPEC.md) 를 참고하세요.
+
+## 설치
+
+### CDN — 스크립트 태그
+
+빌드 단계 없이 바로 사용. 라이브러리는 글로벌
+`window.AerizWysiwyg` 와 단축 별칭 `window.AerizEditor` /
+`window.AerizViewer` 로 노출됩니다.
+
+```html
+<!-- ✓ 프로덕션 — 특정 버전 고정 (immutable, 가장 긴 캐시) -->
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@0.0.1/dist/aeriz-wysiwyg.min.css"
+/>
+<script src="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@0.0.1/dist/aeriz-wysiwyg.min.js"></script>
+
+<!-- 1.x 트랙 — 패치만 자동 수신 -->
+<script src="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@^1.0.1/dist/aeriz-wysiwyg.min.js"></script>
+
+<!-- 항상 최신 — 프로토타이핑용 (프로덕션 권장 X) -->
+<script src="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@latest/dist/aeriz-wysiwyg.min.js"></script>
+
+<!-- unpkg 미러 -->
+<script src="https://unpkg.com/@aeriz/wysiwyg@0.0.1/dist/aeriz-wysiwyg.min.js"></script>
+
+<div id="editor"></div>
+<script>
+  const editor = new AerizEditor({
+    element: document.querySelector('#editor'),
+    initialHTML: '<p>안녕하세요</p>',
+    onChange: (html) => console.log(html),
+  });
+</script>
+```
+
+### CDN — ES Module
+
+```html
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@0.0.1/dist/aeriz-wysiwyg.min.css"
+/>
+<script type="module">
+  import {
+    AerizEditor,
+    AerizViewer,
+  } from 'https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@0.0.1/dist/aeriz-wysiwyg.esm.js';
+
+  new AerizEditor({ element: document.querySelector('#editor') });
+</script>
+```
+
+### NPM / Yarn / pnpm
+
+번들러(Vite, webpack, Rollup, esbuild, Parcel) 사용 프로젝트에서:
+
+```bash
+npm install @aeriz/wysiwyg
+# yarn add @aeriz/wysiwyg
+# pnpm add @aeriz/wysiwyg
+```
+
+```ts
+import { AerizEditor, AerizViewer } from '@aeriz/wysiwyg';
+import '@aeriz/wysiwyg/style.css';
+
+const editor = new AerizEditor({
+  element: document.querySelector('#editor')!,
+  initialHTML: '<p>안녕하세요</p>',
+  theme: 'dark',
+  onChange: (html) => localStorage.setItem('draft', html),
+});
+
+const viewer = new AerizViewer({
+  element: document.querySelector('#preview')!,
+  initialHTML: localStorage.getItem('draft') ?? '',
+});
+```
+
+## 빌드
+
+```bash
+npm install
+npm run build       # dist/ 에 IIFE / ESM / CSS / .d.ts 생성
+npm run dev         # 데모 페이지 (http://localhost:5173)
+```
+
+## 라이선스
+
+Apache-2.0

package/dist/aeriz-wysiwyg.css

@@ -498,7 +498,7 @@
   aspect-ratio: 16 / 9;
   margin: 1em 0;
   border-radius: 8px;
-  overflow: hidden;
+  /* overflow: hidden; */
   background: #000;
   border: 1px solid var(--aw-border);
 }
@@ -800,6 +800,15 @@
   transform: scale(1.15);
 }
 
+/* 유튜브 임베드는 iframe 안에 자체 워터마크/컨트롤이 있어 코너에 핸들을 두면
+ * 클릭이 충돌한다. embed 안쪽 우하단에 약간 들여서 배치 — YouTube 자체 UI
+ * 영역과 약간 떨어진 위치. */
+
+.aw-content > div.aw-youtube-embed > .aw-resize-handle {
+  right: 0px;
+  bottom: -15px;
+}
+
 .aw-resizing {
   user-select: none;
 }

package/dist/aeriz-wysiwyg.esm.js

@@ -2386,10 +2386,124 @@ function closeAllPopovers() {
 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");
@@ -2442,7 +2556,7 @@ async function importHtmlWithComputedStyles(html, options = {}) {
                 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) {
@@ -2459,23 +2573,30 @@ async function importHtmlWithComputedStyles(html, options = {}) {
     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))) {
@@ -2489,24 +2610,83 @@ function bakeBodyToImportable(body, win) {
   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;
@@ -2515,7 +2695,7 @@ function applyComputedStylesParallel(orig, copy, win) {
   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) {
@@ -2732,6 +2912,8 @@ const PARAGRAPH = {
   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)
@@ -2743,6 +2925,10 @@ const HEADING = {
   // 사용자 지정 — 제목은 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;
@@ -2759,6 +2945,8 @@ const BULLET_LIST = {
   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)
@@ -2768,6 +2956,8 @@ const ORDERED_LIST = {
   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)
@@ -2779,6 +2969,9 @@ const BLOCKQUOTE = {
   // 사용자 지정 — 인용구는 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");
@@ -2792,6 +2985,10 @@ const CODE_BLOCK = {
   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");
@@ -2812,6 +3009,8 @@ const IMAGE = {
   label: "이미지",
   allowsInlineFormat: false,
   allowedMarks: [],
+  allowsColor: false,
+  allowsFontSize: false,
   matches: (el) => {
     if (el.tagName === "FIGURE") {
       const img = el.querySelector(":scope > img");
@@ -2875,6 +3074,8 @@ const TABLE = {
   label: "표",
   allowsInlineFormat: true,
   allowedMarks: ALL_INLINE_MARKS,
+  allowsColor: true,
+  allowsFontSize: true,
   matches: (el) => {
     var _a;
     if (el.tagName !== "TABLE") return null;
@@ -2907,6 +3108,8 @@ const HR = {
   label: "구분선",
   allowsInlineFormat: false,
   allowedMarks: [],
+  allowsColor: false,
+  allowsFontSize: false,
   matches: (el) => el.tagName === "HR" ? { kind: "hr", attrs: {} } : null,
   create: () => {
     const hr = document.createElement("hr");
@@ -2920,6 +3123,8 @@ const YOUTUBE = {
   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;
@@ -2960,6 +3165,8 @@ const LINK_CARD = {
   label: "링크",
   allowsInlineFormat: false,
   allowedMarks: [],
+  allowsColor: false,
+  allowsFontSize: false,
   matches: (el) => {
     var _a, _b, _c, _d, _e;
     if (el.tagName !== "A") return null;
@@ -3047,6 +3254,8 @@ const FILE = {
   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;
@@ -3130,6 +3339,8 @@ const IMPORTED_HTML = {
   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;
@@ -3154,6 +3365,8 @@ const UNKNOWN = {
   label: "알 수 없음",
   allowsInlineFormat: false,
   allowedMarks: [],
+  allowsColor: false,
+  allowsFontSize: false,
   matches: () => null,
   create: () => fillEmpty(document.createElement("p")),
   isEmpty: (el) => isElementBlank(el)
@@ -3428,6 +3641,72 @@ function fillInlineContent(newEl, kind, content) {
   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";
@@ -4750,7 +5029,9 @@ class AerizEditor {
       }
       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);
@@ -5267,27 +5548,15 @@ function isInlineFormatAllowed(active) {
   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",