@aeriz/wysiwyg 1.0.4 → 2.0.0

package/dist-types/cjs/index.d.cts

@@ -1,22 +1,30 @@
+/**
+ * `@aeriz/wysiwyg` — 브라우저 진입점. 스타일시트를 부수 효과로 불러온다.
+ *
+ * 여기서 내보내는 것이 공개 API 의 전부다. 에디터 내부(블록 레지스트리 ·
+ * 정규화 · HTML 파서 · 로케일 사전) 는 내보내지 않는다 — 내보내면 고칠 때마다
+ * 호환이 깨진다. 서버(Node · workerd · Deno) 에서는 CSS 를 끌어오지 않는
+ * `@aeriz/wysiwyg/server` 를 쓴다.
+ */
 // (CSS 부수 효과 import 는 타입 선언에서 제거됨 — scripts/strip-css-imports.mjs)
 export { AerizEditor } from './core/AerizEditor.cjs';
-export type { EditorState, EditorStateListener, InlineState, } from './core/AerizEditor.cjs';
+export type { EditorState, EditorStateListener, InlineState } from './core/AerizEditor.cjs';
 export { AerizViewer } from './core/AerizViewer.cjs';
 export type { ViewerOptions } from './core/AerizViewer.cjs';
-export { ALIGN_CLASS_BY_VALUE, ALL_INLINE_MARKS, BLOCK_ID_ATTR, BLOCK_TYPES, BLOCK_TYPE_BY_KIND, BlockIdRegistry, applyBlockClassNames, applyBlockInlineStyles, assignMissingIds, classifyBlockElement, extractInlineContent, fillInlineContent, findBlockFrom, getBlockLabel, isElementBlank, listBlocks, normalizeContent, placeCaretAtStart, readBlockStyleTheme, renderBlock, renderBlocks, serializeBlock, serializeBlocks, restoreAlignFromClasses, stripEditorOnlyAttrs, stripEditorOnlyNodes, } from './core/blocks.cjs';
-export type { BlockStyleTheme } from './core/blocks.cjs';
-export type { Block, BlockAttrs, BlockAttrsByKind, BlockIdResolver, BlockKind, BlockMatch, BlockSnapshot, BlockType, BlockquoteAttrs, BulletListAttrs, ClassifyResult, CodeBlockAttrs, FileAttrs, HeadingAttrs, HeadingLevel, HrAttrs, ImageAttrs, ImportedHtmlAttrs, InlineMarkName, LinkCardAttrs, OrderedListAttrs, ParagraphAttrs, Snapshot, TableAttrs, UnknownAttrs, YoutubeAttrs, } from './core/blocks.cjs';
-export { getLocale, setLocale, t } from './core/i18n.cjs';
-export type { Locale, Strings } from './core/i18n.cjs';
-export type { EditorOptions, HtmlStyleMode, SerializeHtmlOptions, ToolbarConfig, ToolbarItem, ToolbarItemName, } from './types/index.cjs';
+export type { EditorErrorCode, EditorOptions, HtmlStyleMode, SerializeHtmlOptions, ToolbarConfig, ToolbarItem, ToolbarItemName, UploadOptions, CodeHighlighter, } from './types/index.cjs';
 export { DEFAULT_TOOLBAR } from './types/index.cjs';
-export { SNAPSHOT_VERSION, snapshotVersionOf, upgradeSnapshot, upgradeSnapshots, } from './core/snapshot.cjs';
-export { renderBlockToHTML, renderBlocksToHTML } from './core/render-string.cjs';
+export { DEFAULT_FONTS, DEFAULT_FONT_SIZES } from './core/fonts.cjs';
+export type { FontFamily } from './core/fonts.cjs';
+export type { Locale } from './core/i18n.cjs';
+export { SNAPSHOT_VERSION, upgradeSnapshots } from './core/snapshot.cjs';
+export { renderBlocksToHTML } from './core/render-string.cjs';
 export type { RenderHtmlOptions } from './core/render-string.cjs';
+export { sanitizeHTML } from './core/sanitize-html.cjs';
+export { htmlToBlocks } from './core/html-to-blocks.cjs';
 export { blocksToMarkdown } from './core/markdown-export.cjs';
 export type { MarkdownOptions } from './core/markdown-export.cjs';
+export { markdownToBlocks, markdownToHtml } from './core/import-markdown.cjs';
 export { blocksToPlainText } from './core/plain-text.cjs';
 export type { PlainTextOptions } from './core/plain-text.cjs';
-export { decodeEntities, escapeAttr, escapeHtml, parseHtmlFragment, serializeNodes, textOf, textWithBlockBreaks, } from './core/html-mini.cjs';
-export type { HtmlElementNode, HtmlNode, HtmlText } from './core/html-mini.cjs';
+export type { Block, BlockAttrs, BlockAttrsByKind, BlockKind, BlockSnapshot, BlockquoteAttrs, BulletListAttrs, CodeBlockAttrs, FileAttrs, HeadingAttrs, HeadingLevel, HrAttrs, ImageAttrs, ImportedHtmlAttrs, InlineMarkName, LinkCardAttrs, OrderedListAttrs, ParagraphAttrs, Snapshot, TableAttrs, UnknownAttrs, YoutubeAttrs, } from './core/blocks.cjs';
 // (소스맵은 CJS 선언 사본에서 제외됨 — scripts/finalize-types.mjs)

package/dist-types/cjs/server/index.d.cts

@@ -24,14 +24,13 @@
  *     },
  *   };
  */
-export { renderBlockToHTML, renderBlocksToHTML, } from '../core/render-string.cjs';
+export { renderBlocksToHTML } from '../core/render-string.cjs';
 export type { RenderHtmlOptions } from '../core/render-string.cjs';
+export { sanitizeHTML } from '../core/sanitize-html.cjs';
 export { blocksToMarkdown } from '../core/markdown-export.cjs';
 export type { MarkdownOptions } from '../core/markdown-export.cjs';
 export { blocksToPlainText } from '../core/plain-text.cjs';
 export type { PlainTextOptions } from '../core/plain-text.cjs';
-export { SNAPSHOT_VERSION, snapshotVersionOf, upgradeSnapshot, upgradeSnapshots, } from '../core/snapshot.cjs';
-export type { Block, BlockAttrs, BlockAttrsByKind, BlockKind, BlockSnapshot, BlockquoteAttrs, BulletListAttrs, CodeBlockAttrs, FileAttrs, HeadingAttrs, HeadingLevel, HrAttrs, ImageAttrs, ImportedHtmlAttrs, InlineMarkName, LinkCardAttrs, OrderedListAttrs, ParagraphAttrs, Snapshot, TableAttrs, UnknownAttrs, YoutubeAttrs, } from '../core/blocks.cjs';
-export { decodeEntities, escapeAttr, escapeHtml, parseHtmlFragment, serializeNodes, textOf, textWithBlockBreaks, } from '../core/html-mini.cjs';
-export type { HtmlElementNode, HtmlNode, HtmlText } from '../core/html-mini.cjs';
+export { SNAPSHOT_VERSION, upgradeSnapshots } from '../core/snapshot.cjs';
+export type { BlockAttrs, BlockAttrsByKind, BlockKind, BlockSnapshot, BlockquoteAttrs, BulletListAttrs, CodeBlockAttrs, FileAttrs, HeadingAttrs, HeadingLevel, HrAttrs, ImageAttrs, ImportedHtmlAttrs, InlineMarkName, LinkCardAttrs, OrderedListAttrs, ParagraphAttrs, Snapshot, TableAttrs, UnknownAttrs, YoutubeAttrs, } from '../core/blocks.cjs';
 // (소스맵은 CJS 선언 사본에서 제외됨 — scripts/finalize-types.mjs)

package/dist-types/cjs/types/index.d.cts

@@ -1,5 +1,6 @@
+import type { FontFamily } from '../core/fonts.cjs';
 export type ToolbarItem = ToolbarItemName | '|';
-export type ToolbarItemName = 'undo' | 'redo' | 'blockType' | 'fontFamily' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'strike' | 'color' | 'backgroundColor' | 'align' | 'cellBg' | 'tableMenu' | 'codeLang' | 'bulletList' | 'orderedList' | 'blockquote' | 'codeBlock' | 'link' | 'image' | 'table' | 'hr' | 'clearFormat';
+export type ToolbarItemName = 'undo' | 'redo' | 'blockType' | 'fontFamily' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'strike' | 'superscript' | 'subscript' | 'color' | 'backgroundColor' | 'align' | 'cellBg' | 'tableMenu' | 'codeLang' | 'bulletList' | 'orderedList' | 'blockquote' | 'codeBlock' | 'link' | 'image' | 'table' | 'hr' | 'clearFormat' | 'lineHeight' | 'letterSpacing' | 'specialChar' | 'findReplace' | 'source' | 'print' | 'fullscreen';
 export interface ToolbarConfig {
     items: ToolbarItem[];
     sticky?: boolean;
@@ -24,6 +25,12 @@ export interface EditorOptions {
     element: HTMLElement;
     initialHTML?: string;
     placeholder?: string;
+    /**
+     * 아래쪽 상태바(되돌리기 · 블록 수 · 글자 수) 를 보일지. 기본 `true`.
+     */
+    statusBar?: boolean;
+    /** 본문 편집 영역의 접근성 이름(aria-label). 기본은 로케일의 "본문 편집기". */
+    ariaLabel?: string;
     toolbar?: ToolbarConfig | false;
     theme?: 'light' | 'dark';
     /** UI 언어. 'en' / 'ko' / 'ja' / 'zh'. 기본 'ko'. */
@@ -35,27 +42,68 @@ export interface EditorOptions {
     htmlStyles?: HtmlStyleMode;
     onChange?: (html: string) => void;
     /**
-     * 직접 업로드 핸들러. 우선 적용된다. 미설정 + `imageUploadUrl` 만 있을 때는
-     * 에디터가 multipart/form-data 로 그 URL 에 POST 한 응답 JSON 의
-     * `url` 필드를 사용한다.
+     * 읽기 전용. 글을 고칠 수 없고 툴바는 인쇄 · 전체 화면만 쓸 수 있다.
+     * 나중에 바꾸려면 `editor.setReadOnly()`.
+     */
+    readOnly?: boolean;
+    /**
+     * 에디터 높이. 숫자는 px, 문자열은 CSS 값('60vh' 등). 지정하면 본문이 그 안에서
+     * 스크롤된다. 지정하지 않으면 부모 높이를 채우고 최소 320px 이다.
      */
-    onImageUpload?: (file: File) => Promise<string>;
+    height?: number | string;
+    /** 그림 · 파일 올리기. 없으면 다이얼로그의 "올리기" 탭이 꺼지고 붙여넣은 그림은 문서에 그대로 담긴다. */
+    upload?: UploadOptions;
     /**
-     * 서버 이미지 업로드 API URL. 설정 시 이미지 다이얼로그의 "업로드" 탭이
-     * 활성화된다. 미설정 시 업로드 탭은 비활성 + 툴팁 안내.
+     * 에디터 안에서 난 오류(올리기 실패 등). 지정하지 않으면 콘솔에 남긴다.
+     * `code` 로 종류를 가린다.
      */
-    imageUploadUrl?: string;
+    onError?: (error: Error, context: {
+        code: EditorErrorCode;
+    }) => void;
     /**
-     * 파일 첨부 직접 업로드 핸들러. 첨부 다이얼로그의 "업로드" 탭에서 사용.
-     * 미설정 + `fileUploadUrl` 만 있을 때는 에디터가 multipart/form-data 로
-     * POST 한 응답 JSON 의 `url` 필드를 사용한다.
+     * 코드 블록 색칠기. 없으면 코드는 색 없이 보이고 언어 고르기 버튼도 숨는다.
+     * 기본 색칠기는 `import { highlighter } from '@aeriz/wysiwyg/highlight'`.
      */
-    onFileUpload?: (file: File) => Promise<string>;
+    highlighter?: CodeHighlighter;
     /**
-     * 서버 파일 업로드 API URL. 설정 시 파일 첨부 다이얼로그의 "업로드" 탭이
-     * 활성화된다. 미설정 시 업로드 탭은 비활성 + 툴팁 안내.
+     * 글꼴 드롭다운 목록. 기본은 한국 문서에서 쓰는 시스템 글꼴(맑은 고딕 · 굴림 ·
+     * 돋움 · 바탕 · 궁서 …) 이며 네트워크를 쓰지 않는다. 웹폰트는 `cssUrl` 을
+     * 함께 주면 드롭다운을 처음 열 때 받는다. 이 PC 에 없는 글꼴은 목록에서 빠진다.
+     *
+     * `{ label: '', stack: '' }` 항목은 "기본 글꼴"(서식 지우기) 이다.
      */
-    fileUploadUrl?: string;
+    fonts?: ReadonlyArray<FontFamily>;
+    /** 글자 크기 드롭다운 목록(pt). 기본 8 ~ 48pt. */
+    fontSizes?: ReadonlyArray<number>;
+}
+/** `onError` 의 오류 종류. */
+export type EditorErrorCode = 'upload' | 'paste';
+/**
+ * 그림 · 파일 올리기 설정. 둘 중 하나를 준다.
+ *
+ * - `url` — 그 주소로 `multipart/form-data`(필드 `file`, `kind`) 를 POST 하고,
+ *   응답 JSON 의 `url` 을 쓴다. 인증이 필요하면 `headers`.
+ * - `handler` — 직접 올리고 주소를 돌려준다 (S3 서명 URL 등).
+ */
+/**
+ * 코드 블록 색칠기. `highlight` 는 글을 받아 HTML 을 돌려준다. 결과는 `<span class>`
+ * 만 남기고 걸러서 넣으므로, 다른 태그나 속성은 무시된다.
+ */
+export interface CodeHighlighter {
+    /** 언어 고르기 목록. `id` 는 `<code data-language>` 에 저장된다. */
+    languages: ReadonlyArray<{
+        id: string;
+        label: string;
+    }>;
+    highlight(code: string, languageId: string | undefined): string;
+}
+export interface UploadOptions {
+    url?: string;
+    /** `url` 로 보낼 때 붙일 헤더. 함수면 보낼 때마다 불러 최신 토큰을 쓴다. */
+    headers?: Record<string, string> | (() => Record<string, string>);
+    handler?: (file: File, kind: 'image' | 'file') => Promise<string>;
+    /** 올릴 수 있는 최대 크기(바이트). 넘으면 올리지 않고 `onError('upload')`. */
+    maxSize?: number;
 }
 export declare const DEFAULT_TOOLBAR: ToolbarConfig;
 // (소스맵은 CJS 선언 사본에서 제외됨 — scripts/finalize-types.mjs)

package/dist-types/cjs/ui/Toolbar.d.cts

@@ -1,11 +1,21 @@
 import type { ToolbarConfig, ToolbarItemName } from '../types/index.cjs';
 export interface ToolbarHandlers {
     onAction: (name: ToolbarItemName, anchor: HTMLElement) => void;
+    /** 툴바에서 Esc — 본문으로 돌아간다. */
+    onEscape: () => void;
 }
 export declare class Toolbar {
     readonly element: HTMLDivElement;
     private buttons;
     constructor(config: ToolbarConfig, handlers: ToolbarHandlers);
+    /** 툴바에 있는 항목 이름들. */
+    names(): ToolbarItemName[];
+    /** 툴바로 포커스를 옮긴다 (Alt+F10). 마지막으로 머문 버튼, 없으면 첫 버튼. */
+    focus(): void;
+    /** 소스 보기처럼 툴바 대부분을 잠글 때. `except` 는 계속 쓸 수 있다. */
+    setAllEnabled(enabled: boolean, except: ToolbarItemName): void;
+    private focusable;
+    private handleKeydown;
     setActive(name: ToolbarItemName, active: boolean): void;
     setEnabled(name: ToolbarItemName, enabled: boolean): void;
     /** 조건부 항목을 완전히 숨긴다 (display:none). 허용 블록으로 돌아오면 다시 보임. */

package/dist-types/cjs/ui/doc-tools.d.cts

@@ -0,0 +1,58 @@
+/** 줄 간격(%). 한글의 기본값 160% 를 포함한다. */
+export declare const LINE_HEIGHTS: ReadonlyArray<number>;
+/** 자간(em 의 백분율). 한글의 자간 -5% 는 letter-spacing: -0.05em 이다. */
+export declare const LETTER_SPACINGS: ReadonlyArray<number>;
+/** 줄 간격 드롭다운. `current` 는 지금 블록의 line-height(%), 모르면 null. */
+export declare function openLineHeightDropdown(anchor: HTMLElement, onPick: (percent: number) => void, current: number | null): void;
+/** 자간 드롭다운. 값은 em 의 백분율(-5 → -0.05em). */
+export declare function openLetterSpacingDropdown(anchor: HTMLElement, onPick: (percent: number) => void, current: number | null): void;
+/** 특수 문자 표. 고르면 `onPick(char)` — 팝오버는 열어 둔다(여러 개 넣기). */
+export declare function openSpecialCharDropdown(anchor: HTMLElement, onPick: (char: string) => void): void;
+interface Match {
+    range: Range;
+}
+/**
+ * 본문 안 글자 검색. 블록마다 텍스트 노드를 이어 붙인 문자열에서 찾으므로
+ * 굵게 · 색 같은 서식 경계를 넘는 낱말도 찾는다. 블록 경계는 넘지 않는다.
+ */
+export declare function findInContent(root: HTMLElement, query: string, matchCase: boolean): Match[];
+export interface FindPanelHost {
+    content: HTMLElement;
+    /** 바꾸기 전에 부른다 — 이력이 한 단계로 묶이도록. */
+    beforeChange(): void;
+    /** 바꾼 뒤에 부른다. */
+    afterChange(): void;
+}
+/**
+ * 찾기 · 바꾸기 패널. 에디터 위쪽에 붙는 작은 막대다 — 모달로 띄우면 찾은
+ * 자리를 가린다.
+ */
+export declare class FindPanel {
+    private readonly host;
+    readonly element: HTMLDivElement;
+    private readonly findInput;
+    private readonly replaceInput;
+    private readonly caseBox;
+    private readonly status;
+    private matches;
+    private index;
+    constructor(host: FindPanelHost);
+    get isOpen(): boolean;
+    open(): void;
+    close(): void;
+    /** 문서가 바뀌면 다시 찾는다 (열려 있을 때만). */
+    refresh(): void;
+    private search;
+    private step;
+    private paint;
+    private replaceOne;
+    private replaceAll;
+}
+/**
+ * 문서만 인쇄한다 — 툴바 · 핸들 · 페이지의 다른 부분 없이. 보이지 않는 iframe
+ * 에 `getHTML()` 결과(스타일이 인라인으로 들어 있다) 를 넣고 그 창을 인쇄한다.
+ * iframe 은 스크립트를 돌리지 않는다(sandbox) — 인쇄만 허용한다.
+ */
+export declare function printHtml(html: string, title: string): void;
+export {};
+// (소스맵은 CJS 선언 사본에서 제외됨 — scripts/finalize-types.mjs)

package/dist-types/cjs/ui/popovers.d.cts

@@ -1,4 +1,7 @@
 import type { BlockAttrs, BlockKind } from '../core/blocks.cjs';
+import type { FontFamily } from '../core/fonts.cjs';
+/** contentEditable 선택 영역이 사라지지 않도록 mousedown 시 포커스 이동을 막는다. */
+export declare function preserveSelection(el: HTMLElement): void;
 export declare const COLOR_PALETTE: string[];
 export declare function openColorPicker(anchor: HTMLElement, onPick: (color: string | null) => void, recents?: ReadonlyArray<string>): void;
 /**
@@ -12,46 +15,30 @@ export interface BlockTypeChoice {
 }
 export declare function openBlockTypeDropdown(anchor: HTMLElement, onPick: (choice: BlockTypeChoice) => void): void;
 export declare function openAlignDropdown(anchor: HTMLElement, onPick: (value: 'left' | 'center' | 'right' | 'justify') => void): void;
-export interface FontFamilyChoice {
-    id: string;
-    label: string;
-    stack: string;
-}
 /**
- * 글꼴 선택 드롭다운. 첫 호출 시 모든 글꼴 CSS 를 lazy 로드(Google Fonts +
- * Pretendard CDN), 항목 라벨은 각 글꼴 자신으로 미리보기 렌더한다.
- *
- * - `currentId` 가 지정되면 해당 글꼴 항목에 `aw-popover-item-active` 적용
- * - 선택 시 `onPick(choice)` 호출 + 팝오버 닫힘
+ * 글꼴 드롭다운. 항목 이름 옆 미리보기('가A') 만 그 글꼴로 그린다.
+ * 이 PC 에 없는 글꼴은 확인되는 대로 목록에서 빠진다.
  */
-export declare function openFontFamilyDropdown(anchor: HTMLElement, onPick: (choice: FontFamilyChoice) => void, currentId?: string): void;
+export declare function openFontFamilyDropdown(anchor: HTMLElement, fonts: ReadonlyArray<FontFamily>, onPick: (font: FontFamily) => void, current?: FontFamily | null): void;
 export interface CodeLanguageChoice {
     id: string;
     label: string;
 }
 /**
- * 코드 블록의 언어 선택 드롭다운. highlight.ts 의 LANGUAGES 를 그대로 노출.
+ * 코드 블록의 언어 선택 드롭다운. 색칠기(`highlighter.languages`) 의 목록을 보여 준다.
  *
  * - `currentId` 가 일치하는 항목에 active(✓) 표시
  * - 선택 시 onPick(choice) 호출 + 팝오버 닫힘
  */
-export declare function openCodeLanguageDropdown(anchor: HTMLElement, onPick: (choice: CodeLanguageChoice) => void, currentId?: string): void;
-export type TableMenuAction = 'rowAbove' | 'rowBelow' | 'colLeft' | 'colRight' | 'deleteRow' | 'deleteCol';
+export declare function openCodeLanguageDropdown(anchor: HTMLElement, languages: ReadonlyArray<CodeLanguageChoice>, onPick: (choice: CodeLanguageChoice) => void, currentId?: string): void;
+export type TableMenuAction = 'rowAbove' | 'rowBelow' | 'colLeft' | 'colRight' | 'deleteRow' | 'deleteCol' | 'mergeCells' | 'splitCell';
 /**
  * 표 편집 드롭다운 — 행/열 추가·삭제. 활성 블록이 table 일 때만 의미가 있어
  * AerizEditor 가 toolbar 'tableMenu' 항목 클릭 시점에 호출.
  */
-export declare function openTableMenuDropdown(anchor: HTMLElement, onPick: (action: TableMenuAction) => void): void;
-export interface FontSizeChoice {
-    px: number;
-}
-/**
- * 글자 크기 프리셋 드롭다운. FONT_SIZES 의 px 값을 작은 라벨로 나열.
- *
- * - `currentPx` 가 일치하는 항목에 active 표시
- * - 선택 시 `onPick({ px })` 호출 + 팝오버 닫힘
- */
-export declare function openFontSizeDropdown(anchor: HTMLElement, onPick: (choice: FontSizeChoice) => void, currentPx?: number): void;
+export declare function openTableMenuDropdown(anchor: HTMLElement, onPick: (action: TableMenuAction) => void, disabled?: ReadonlySet<TableMenuAction>): void;
+/** 글자 크기(pt) 드롭다운. `current` 와 같은 항목에 표시. */
+export declare function openFontSizeDropdown(anchor: HTMLElement, sizes: ReadonlyArray<number>, onPick: (pt: number) => void, current?: number | null): void;
 /**
  * 기능 미구현 메뉴 항목용 placeholder 드롭다운.
  * 항목명만 노출하고 "준비 중" 메시지를 보여준다.
@@ -67,4 +54,6 @@ export interface TableSizeChoice {
     cols: number;
 }
 export declare function openTableDropdown(anchor: HTMLElement, onPick: (choice: TableSizeChoice) => void): void;
+export declare function anchorPopover(popover: HTMLElement, anchor: HTMLElement): void;
+export declare function closeAllPopovers(): void;
 // (소스맵은 CJS 선언 사본에서 제외됨 — scripts/finalize-types.mjs)