@teriusu/rich-editor 0.10.8 → 0.11.0

package/dist/static/index.test.js

@@ -0,0 +1,194 @@
+import { describe, it, expect, vi } from 'vitest';
+import katex from 'katex';
+import { renderStaticHtml, sanitizeHtml, transformLegacyHtml, stripHtmlToExcerpt } from './index';
+/** `Math.ts`의 `renderKatex`와 같은 옵션 — 기대값을 같은 함수로 만들어 비교한다. */
+const KATEX_OPTIONS = {
+    throwOnError: false,
+    strict: false,
+    output: 'html'
+};
+/** 태그를 걷어내고 기본 엔티티를 디코드 — 하이라이트가 글자를 바꾸지 않았는지 확인용. */
+function textOf(html) {
+    return html
+        .replace(/<[^>]*>/g, '')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&quot;/g, '"')
+        .replace(/&amp;/g, '&');
+}
+describe('renderStaticHtml — 코드 블록 하이라이트', () => {
+    it('language-* 코드에 문법 색을 입히고 구조·글자는 보존한다 (엔티티 왕복 포함)', () => {
+        const input = '<pre><code class="language-cpp">#include &lt;iostream&gt;\nint main() { return 0; }</code></pre>';
+        const result = renderStaticHtml(input);
+        expect(result).toContain('class="hljs-');
+        // 색은 code 안에 — pre·code 태그와 클래스는 원문 그대로
+        expect(result).toMatch(/^<pre><code class="language-cpp">/);
+        expect(result).toMatch(/<\/code><\/pre>$/);
+        // 글자 왕복: 태그를 걷어내면 원문 코드 그대로
+        expect(textOf(result)).toBe('#include <iostream>\nint main() { return 0; }');
+    });
+    it('code 자식이 없는 옛 brush 저장본은 pre 자신에 색을 넣는다', () => {
+        const input = '<pre class="brush:c++; toolbar:false;">int a = 1;</pre>';
+        const result = renderStaticHtml(input, { defaultLanguage: 'cpp' });
+        // brush 클래스에서 언어를 추측하지 않고(defaultLanguage로) 태그는 원문 그대로
+        expect(result).toMatch(/^<pre class="brush:c\+\+; toolbar:false;">/);
+        expect(result).toContain('hljs-');
+        expect(textOf(result)).toBe('int a = 1;');
+    });
+    it('이미 요소가 섞인 저장본은 건너뛴다', () => {
+        const spans = '<pre><code class="language-cpp"><span class="hljs-keyword">int</span> a;</code></pre>';
+        expect(renderStaticHtml(spans)).toBe(spans);
+        const br = '<pre><code>line1<br>line2</code></pre>';
+        expect(renderStaticHtml(br)).toBe(br);
+    });
+    it('언어 미지정 코드는 자동 감지로 칠한다', () => {
+        const input = '<pre><code>#include &lt;cstdio&gt;\nint main() { printf("hi"); }</code></pre>';
+        const result = renderStaticHtml(input);
+        expect(result).toContain('hljs-');
+        expect(textOf(result)).toBe('#include <cstdio>\nint main() { printf("hi"); }');
+    });
+});
+describe('renderStaticHtml — 블록 사이 공백', () => {
+    it('블록 사이 개행 전용 텍스트를 지운다', () => {
+        expect(renderStaticHtml('<p>a</p>\n\n<p>b</p>')).toBe('<p>a</p><p>b</p>');
+    });
+    it('인라인 사이 공백은 보존한다', () => {
+        const input = '<p><strong>a</strong> <em>b</em></p>\n<p>c</p>';
+        expect(renderStaticHtml(input)).toBe('<p><strong>a</strong> <em>b</em></p><p>c</p>');
+    });
+    it('pre·code 안의 개행은 내용이라 건드리지 않는다', () => {
+        const input = '<pre><code class="language-plaintext">a\n\nb</code></pre>\n<p>c</p>';
+        const result = renderStaticHtml(input);
+        expect(result).toContain('a\n\nb');
+        expect(result).not.toContain('</pre>\n<p>');
+    });
+    it('`&nbsp;` 섞인 공백 전용 틈도 지운다 (U+00A0도 `\\s`다 — DOM 판정과 동일)', () => {
+        /*
+         * ⚠️ 빠른 탈출 게이트(`>\s*[\n\r]\s*<`)는 **원문 문자열**을 보므로 `&nbsp;` 리터럴이
+         * 낀 틈만으로는 열리지 않는다(앱 DOM 버전과 같은 동작). 다른 틈의 순수 개행이
+         * 게이트를 열면, `&nbsp;` 틈도 디코드 후 공백 전용으로 판정돼 지워진다.
+         */
+        expect(renderStaticHtml('<p>a</p>&nbsp;\n<p>b</p>\n<p>c</p>')).toBe('<p>a</p><p>b</p><p>c</p>');
+    });
+    it('짝 잃은 닫는 태그는 원문 그대로 흘려보낸다', () => {
+        expect(renderStaticHtml('<p>a</p>\n</div><p>b</p>')).toBe('<p>a</p></div><p>b</p>');
+    });
+});
+describe('renderStaticHtml — 수식', () => {
+    it('인라인 수식을 KaTeX로 렌더하고 바깥 태그는 속성째 보존한다', () => {
+        const input = '<math-inline class="math-node">x^2</math-inline>';
+        const expected = `<math-inline class="math-node">${katex.renderToString('x^2', {
+            ...KATEX_OPTIONS,
+            displayMode: false
+        })}</math-inline>`;
+        expect(renderStaticHtml(input)).toBe(expected);
+    });
+    it('디스플레이 수식은 displayMode로 렌더한다', () => {
+        const input = '<math-display class="math-node">\\sum_{i=1}^{n} i</math-display>';
+        const result = renderStaticHtml(input);
+        expect(result).toMatch(/^<math-display class="math-node">/);
+        expect(result).toContain('katex-display');
+    });
+    it('latex의 HTML 엔티티를 디코드한 뒤 렌더한다', () => {
+        const input = '<math-inline>a &lt; b</math-inline>';
+        const expected = `<math-inline>${katex.renderToString('a < b', {
+            ...KATEX_OPTIONS,
+            displayMode: false
+        })}</math-inline>`;
+        expect(renderStaticHtml(input)).toBe(expected);
+    });
+    it('빈 수식은 그대로 둔다', () => {
+        const input = '<math-inline class="math-node"></math-inline>';
+        expect(renderStaticHtml(input)).toBe(input);
+    });
+});
+describe('renderStaticHtml — rewriteAssetUrl', () => {
+    it('src·href를 태그·속성 문맥과 함께 넘기고 바뀐 것만 고쳐 쓴다', () => {
+        const calls = [];
+        const input = '<p><img src="https://s.jungol.co.kr/a.png"><a href="/files/f.pdf">f</a></p>';
+        const result = renderStaticHtml(input, {
+            rewriteAssetUrl: (url, context) => {
+                calls.push({ url, ...context });
+                return url.replace('https://s.jungol.co.kr', '/static/s');
+            }
+        });
+        expect(result).toBe('<p><img src="/static/s/a.png"><a href="/files/f.pdf">f</a></p>');
+        expect(calls).toEqual([
+            { url: 'https://s.jungol.co.kr/a.png', tag: 'img', attr: 'src' },
+            { url: '/files/f.pdf', tag: 'a', attr: 'href' }
+        ]);
+    });
+    it('srcset은 후보마다 부르고, data URL 속 쉼표는 구분자가 아니다', () => {
+        const urls = [];
+        const input = '<img srcset="https://x/a.png 1x, data:image/png;base64,AA==, https://x/b.png 2x">';
+        const result = renderStaticHtml(input, {
+            rewriteAssetUrl: (url) => {
+                urls.push(url);
+                return url;
+            }
+        });
+        expect(urls).toEqual(['https://x/a.png', 'data:image/png;base64,AA==', 'https://x/b.png']);
+        expect(result).toBe(input);
+    });
+    it('style·background는 url(…) 안쪽만 바꾼다', () => {
+        const input = '<div style="background-image:url(&quot;https://x/b.png&quot;);color:red">x</div>' +
+            '<table background="url(https://x/c.png)"><tbody><tr><td>y</td></tr></tbody></table>';
+        const result = renderStaticHtml(input, {
+            rewriteAssetUrl: (url) => url.replace('https://x', '/cdn')
+        });
+        expect(result).toContain('style="background-image:url(&quot;/cdn/b.png&quot;);color:red"');
+        expect(result).toContain('background="url(&quot;/cdn/c.png&quot;)"');
+    });
+    it('아무것도 안 바뀌면 원본 문자열을 그대로 돌려준다', () => {
+        const input = '<p><img src="/local/a.png" alt="x"></p>';
+        expect(renderStaticHtml(input, { rewriteAssetUrl: (url) => url })).toBe(input);
+    });
+});
+describe('renderStaticHtml — 결정성·SSR 안전', () => {
+    const combined = [
+        '<h2>제목</h2>',
+        '<pre><code class="language-cpp">int main() { return 0; }</code></pre>',
+        '<math-display class="math-node">\\frac{1}{2}</math-display>',
+        '<p><img src="https://s.jungol.co.kr/a.png"> 그림</p>'
+    ].join('\n');
+    const options = {
+        defaultLanguage: 'cpp',
+        rewriteAssetUrl: (url) => url.replace('https://s.jungol.co.kr', '/static/s')
+    };
+    it('같은 입력 두 번 = 같은 출력', () => {
+        const first = renderStaticHtml(combined, options);
+        expect(renderStaticHtml(combined, options)).toBe(first);
+        // 네 단계가 전부 실제로 일했는지도 같이 확인한다
+        expect(first).toContain('hljs-');
+        expect(first).toContain('katex');
+        expect(first).toContain('src="/static/s/a.png"');
+        expect(first).not.toContain('>\n<');
+    });
+    it('한 번 처리한 출력을 다시 넣어도 그대로다', () => {
+        const first = renderStaticHtml(combined, options);
+        expect(renderStaticHtml(first, options)).toBe(first);
+    });
+    it('빈 입력은 그대로 돌려준다', () => {
+        expect(renderStaticHtml('')).toBe('');
+    });
+    it('DOM·브라우저 전역 없이 동작한다', () => {
+        vi.stubGlobal('document', undefined);
+        vi.stubGlobal('window', undefined);
+        vi.stubGlobal('DOMParser', undefined);
+        try {
+            const result = renderStaticHtml('<pre><code class="language-cpp">int a;</code></pre>\n<math-inline>x_1</math-inline>', { rewriteAssetUrl: (url) => url });
+            expect(result).toContain('hljs-');
+            expect(result).toContain('katex');
+        }
+        finally {
+            vi.unstubAllGlobals();
+        }
+    });
+});
+describe('sanitize 유틸 재수출', () => {
+    it('sanitizeHtml·transformLegacyHtml·stripHtmlToExcerpt를 모듈 직접 경로에서 다시 내보낸다', () => {
+        expect(sanitizeHtml('<p onclick="x()">a</p><script>bad()</script>')).toBe('<p>a</p>');
+        expect(transformLegacyHtml('')).toBe('');
+        expect(stripHtmlToExcerpt('<p>hello world</p>')).toBe('hello world');
+    });
+});

package/dist/static/tokenizer.d.ts

@@ -0,0 +1,52 @@
+export interface StaticText {
+    type: "text";
+    /** 원문 그대로 — 엔티티가 살아 있다. 글자로 읽을 때는 `decodeEntities`를 거친다. */
+    raw: string;
+}
+/** 주석·독타입·짝 잃은 닫는 태그·주입된 HTML(하이라이트·KaTeX) 등 "그대로 내보내는" 조각. */
+export interface StaticRaw {
+    type: "raw";
+    raw: string;
+}
+export interface StaticAttr {
+    /** 소문자 이름 — 조회용. */
+    name: string;
+    /** 원문 표기 이름 — 태그를 다시 조립할 때 쓴다. */
+    rawName: string;
+    /** 디코드된 값. `null`이면 값 없는 속성(`<details open>`). */
+    value: string | null;
+}
+export interface StaticElement {
+    type: "element";
+    /** 소문자 태그 이름. */
+    name: string;
+    /** 원문 표기 이름 — 태그를 다시 조립할 때 쓴다. */
+    rawName: string;
+    attrs: StaticAttr[];
+    /** 여는 태그 원문(`<pre class="…">`). `dirty`가 아니면 이대로 내보낸다. */
+    rawTag: string;
+    /** 닫는 태그 원문. 없으면(void·self-closing·미닫힘) 빈 문자열. */
+    endTag: string;
+    selfClosing: boolean;
+    /** 속성이 바뀌어 여는 태그를 다시 조립해야 하는가. */
+    dirty: boolean;
+    children: StaticNode[];
+}
+export type StaticNode = StaticText | StaticRaw | StaticElement;
+export interface StaticRoot {
+    children: StaticNode[];
+}
+/**
+ * HTML 엔티티 디코드. 한 번의 치환 패스라 `&amp;lt;`는 `&lt;`가 된다(이중 디코드 없음) —
+ * latex·코드 원문에 흔한 `<`·`&`를 정확히 되살리는 데 필요한 성질이다.
+ */
+export declare function decodeEntities(value: string): string;
+export declare function parseHtml(html: string): StaticRoot;
+export declare function serializeHtml(root: StaticRoot): string;
+/** DOM `getAttribute`처럼 — 첫 동명 속성, 값 없는 속성은 `""`, 없으면 `null`. */
+export declare function getAttribute(element: StaticElement, name: string): string | null;
+export declare function setAttribute(element: StaticElement, name: string, value: string): void;
+export declare function firstElementChild(element: StaticElement): StaticElement | null;
+/** DOM `textContent`처럼 자손 텍스트를 디코드해 잇는다. 주석·raw 조각은 세지 않는다. */
+export declare function textContent(element: StaticElement): string;
+//# sourceMappingURL=tokenizer.d.ts.map

package/dist/static/tokenizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokenizer.d.ts","sourceRoot":"","sources":["../../src/static/tokenizer.ts"],"names":[],"mappings":"AAqBA,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,4DAA4D;IAC5D,GAAG,EAAE,MAAM,CAAC;CACb;AAED,+DAA+D;AAC/D,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,KAAK,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,UAAU;IACzB,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,SAAS,CAAC;IAChB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,0DAA0D;IAC1D,MAAM,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,kCAAkC;IAClC,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,UAAU,EAAE,CAAC;CACxB;AAED,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC;AAEhE,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,UAAU,EAAE,CAAC;CACxB;AAmCD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAWpD;AA8CD,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,CAyHlD;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAatD;AAYD,iEAAiE;AACjE,wBAAgB,YAAY,CAAC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAIhF;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAKtF;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,aAAa,GAAG,aAAa,GAAG,IAAI,CAK9E;AAED,+DAA+D;AAC/D,wBAAgB,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,MAAM,CAQ1D"}

package/dist/static/tokenizer.js

@@ -0,0 +1,289 @@
+/**
+ * SSR-safe 경량 HTML 토크나이저 + 얕은 트리.
+ *
+ * `renderStaticHtml` 전용이다 — 범용 파서가 아니다. DOM(`DOMParser`) 없이 문자열만으로
+ * 다음 세 가지를 판정하려고 만들었다:
+ *
+ *   1. 요소의 **자식 요소 유무** — 이미 하이라이트가 섞인 코드 판을 건너뛰는 판정
+ *   2. 텍스트 노드의 **형제가 블록인지** — 블록 사이 공백만 지우고 인라인 공백은 남기는 판정
+ *   3. 태그의 **속성 읽기·고쳐쓰기** — asset URL 치환
+ *
+ * ⚠️ **손대지 않은 노드는 원문 그대로 다시 내보낸다.** 요소는 여는 태그 원문(`rawTag`)을
+ *    보관하고, 속성을 실제로 바꾼 요소만(`dirty`) 태그를 다시 조립한다 — DOMParser 왕복이
+ *    일으키는 전면 재직렬화(속성 순서·따옴표·공백 정규화)를 피하고, 같은 입력이면 같은
+ *    출력이 바이트 단위로 보장된다.
+ *
+ * 관대한 파서다: 짝 잃은 닫는 태그는 원문 그대로 흘려보내고(DOM 은 버리지만 여기선 보존이
+ * 더 안전하다), 닫히지 않은 요소는 조상이 닫힐 때 같이 닫힌 것으로 본다. 에디터 저장본
+ * (정형 HTML)에서는 어느 분기도 타지 않는다.
+ */
+import { escapeHtml } from "../utils/escape-html";
+const VOID_ELEMENTS = new Set([
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr",
+]);
+/** 내용을 마크업으로 파싱하지 않는 요소 — 닫는 태그까지 안을 원문(raw)으로 보관한다. */
+const RAW_TEXT_ELEMENTS = new Set(["script", "style", "textarea", "title"]);
+/**
+ * 에디터 직렬화가 만드는 다섯 이름만 안다. 그 밖의 이름은 원문 그대로 남긴다 — 모르는 것을
+ * 반쯤 디코드하는 쪽이 더 위험하다. 숫자 참조(`{`·``)는 전부 디코드한다.
+ */
+const NAMED_ENTITIES = {
+    amp: "&",
+    lt: "<",
+    gt: ">",
+    quot: '"',
+    apos: "'",
+    nbsp: "\u00a0",
+};
+/**
+ * HTML 엔티티 디코드. 한 번의 치환 패스라 `&amp;lt;`는 `&lt;`가 된다(이중 디코드 없음) —
+ * latex·코드 원문에 흔한 `<`·`&`를 정확히 되살리는 데 필요한 성질이다.
+ */
+export function decodeEntities(value) {
+    if (!value.includes("&"))
+        return value;
+    return value.replace(/&(?:#(\d+)|#[xX]([0-9a-fA-F]+)|([a-zA-Z][a-zA-Z0-9]*));/g, (match, decimal, hex, name) => {
+        if (decimal)
+            return codePointToString(parseInt(decimal, 10), match);
+        if (hex)
+            return codePointToString(parseInt(hex, 16), match);
+        if (name)
+            return NAMED_ENTITIES[name] ?? NAMED_ENTITIES[name.toLowerCase()] ?? match;
+        return match;
+    });
+}
+function codePointToString(code, fallback) {
+    try {
+        return String.fromCodePoint(code);
+    }
+    catch {
+        return fallback;
+    }
+}
+/** 속성 하나: 이름 + (선택) `=` 값(따옴표 3종). `sanitizeAttributes`의 패턴에 값 없는 꼴을 더했다. */
+const ATTR_PATTERN = /([^\s"'<>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'`<>]+)))?/g;
+function parseAttributes(region) {
+    const attrs = [];
+    ATTR_PATTERN.lastIndex = 0;
+    let match;
+    while ((match = ATTR_PATTERN.exec(region)) !== null) {
+        const raw = match[2] ?? match[3] ?? match[4];
+        attrs.push({
+            name: match[1].toLowerCase(),
+            rawName: match[1],
+            value: raw === undefined ? null : decodeEntities(raw),
+        });
+    }
+    return attrs;
+}
+/** 여는 태그의 `>` 위치 — 따옴표 안의 `>`(`alt="a>b"`)는 끝이 아니다. */
+function findTagEnd(html, from) {
+    let quote = "";
+    for (let index = from; index < html.length; index++) {
+        const char = html[index];
+        if (quote) {
+            if (char === quote)
+                quote = "";
+            continue;
+        }
+        if (char === '"' || char === "'") {
+            quote = char;
+            continue;
+        }
+        if (char === ">")
+            return index;
+    }
+    return -1;
+}
+export function parseHtml(html) {
+    const root = { children: [] };
+    const stack = [];
+    const lower = html.toLowerCase();
+    const top = () => (stack.length ? stack[stack.length - 1].children : root.children);
+    const pushText = (raw) => {
+        if (raw)
+            top().push({ type: "text", raw });
+    };
+    let index = 0;
+    while (index < html.length) {
+        const lt = html.indexOf("<", index);
+        if (lt === -1) {
+            pushText(html.slice(index));
+            break;
+        }
+        if (lt > index)
+            pushText(html.slice(index, lt));
+        const next = html[lt + 1];
+        // 주석 — 닫힘이 없으면 나머지 전체가 주석이다(HTML 파서와 같은 처리).
+        if (html.startsWith("<!--", lt)) {
+            const close = html.indexOf("-->", lt + 4);
+            const end = close === -1 ? html.length : close + 3;
+            top().push({ type: "raw", raw: html.slice(lt, end) });
+            index = end;
+            continue;
+        }
+        // 독타입·CDATA·PI — 통째로 원문 보존.
+        if (next === "!" || next === "?") {
+            const gt = html.indexOf(">", lt);
+            const end = gt === -1 ? html.length : gt + 1;
+            top().push({ type: "raw", raw: html.slice(lt, end) });
+            index = end;
+            continue;
+        }
+        // 닫는 태그.
+        if (next === "/") {
+            const gt = html.indexOf(">", lt);
+            if (gt === -1) {
+                pushText(html.slice(lt));
+                break;
+            }
+            const rawEnd = html.slice(lt, gt + 1);
+            const name = /^<\/\s*([a-zA-Z][^\s/>]*)/.exec(rawEnd)?.[1]?.toLowerCase();
+            index = gt + 1;
+            if (!name) {
+                top().push({ type: "raw", raw: rawEnd });
+                continue;
+            }
+            let open = -1;
+            for (let depth = stack.length - 1; depth >= 0; depth--) {
+                if (stack[depth].name === name) {
+                    open = depth;
+                    break;
+                }
+            }
+            if (open === -1) {
+                // 짝 잃은 닫는 태그 — 원문 그대로 흘려보낸다.
+                top().push({ type: "raw", raw: rawEnd });
+                continue;
+            }
+            // 사이에 낀 미닫힘 요소들은 닫는 태그 없이 여기서 같이 닫힌 것으로 본다.
+            while (stack.length > open + 1)
+                stack.pop();
+            stack[open].endTag = rawEnd;
+            stack.pop();
+            continue;
+        }
+        // 여는 태그.
+        if (next && /[a-zA-Z]/.test(next)) {
+            const gt = findTagEnd(html, lt + 1);
+            if (gt === -1) {
+                pushText(html.slice(lt));
+                break;
+            }
+            const rawTag = html.slice(lt, gt + 1);
+            // 위 /[a-zA-Z]/ 검사로 항상 성립한다.
+            const rawName = /^<([a-zA-Z][^\s/>]*)/.exec(rawTag)[1];
+            const name = rawName.toLowerCase();
+            let region = rawTag.slice(1 + rawName.length, -1);
+            const selfClosing = /\/\s*$/.test(region);
+            if (selfClosing)
+                region = region.replace(/\/\s*$/, "");
+            const element = {
+                type: "element",
+                name,
+                rawName,
+                attrs: parseAttributes(region),
+                rawTag,
+                endTag: "",
+                selfClosing,
+                dirty: false,
+                children: [],
+            };
+            top().push(element);
+            index = gt + 1;
+            if (selfClosing || VOID_ELEMENTS.has(name))
+                continue;
+            if (RAW_TEXT_ELEMENTS.has(name)) {
+                const close = lower.indexOf(`</${name}`, index);
+                if (close === -1) {
+                    if (index < html.length)
+                        element.children.push({ type: "raw", raw: html.slice(index) });
+                    index = html.length;
+                }
+                else {
+                    if (close > index)
+                        element.children.push({ type: "raw", raw: html.slice(index, close) });
+                    const endGt = html.indexOf(">", close);
+                    const end = endGt === -1 ? html.length : endGt + 1;
+                    element.endTag = html.slice(close, end);
+                    index = end;
+                }
+                continue;
+            }
+            stack.push(element);
+            continue;
+        }
+        // `<` 뒤가 태그 이름이 아니다 — 그냥 글자다(`a < b`).
+        pushText(html[lt]);
+        index = lt + 1;
+    }
+    return root;
+}
+export function serializeHtml(root) {
+    let out = "";
+    const walk = (node) => {
+        if (node.type !== "element") {
+            out += node.raw;
+            return;
+        }
+        out += node.dirty ? buildStartTag(node) : node.rawTag;
+        node.children.forEach(walk);
+        out += node.endTag;
+    };
+    root.children.forEach(walk);
+    return out;
+}
+/** `dirty` 요소의 여는 태그 재조립. 값은 큰따옴표로 통일하고 `escapeHtml`로 되감는다. */
+function buildStartTag(element) {
+    const attrs = element.attrs
+        .map((attr) => attr.value === null ? ` ${attr.rawName}` : ` ${attr.rawName}="${escapeHtml(attr.value)}"`)
+        .join("");
+    return `<${element.rawName}${attrs}${element.selfClosing ? " /" : ""}>`;
+}
+/** DOM `getAttribute`처럼 — 첫 동명 속성, 값 없는 속성은 `""`, 없으면 `null`. */
+export function getAttribute(element, name) {
+    const found = element.attrs.find((attr) => attr.name === name);
+    if (!found)
+        return null;
+    return found.value ?? "";
+}
+export function setAttribute(element, name, value) {
+    const found = element.attrs.find((attr) => attr.name === name);
+    if (found)
+        found.value = value;
+    else
+        element.attrs.push({ name, rawName: name, value });
+    element.dirty = true;
+}
+export function firstElementChild(element) {
+    for (const child of element.children) {
+        if (child.type === "element")
+            return child;
+    }
+    return null;
+}
+/** DOM `textContent`처럼 자손 텍스트를 디코드해 잇는다. 주석·raw 조각은 세지 않는다. */
+export function textContent(element) {
+    let out = "";
+    const walk = (node) => {
+        if (node.type === "text")
+            out += decodeEntities(node.raw);
+        else if (node.type === "element")
+            node.children.forEach(walk);
+    };
+    element.children.forEach(walk);
+    return out;
+}