@ubermensch1218/hwpxeditor 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,411 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HwpxDocument, Style, RunStyle, HwpxOxmlParagraph, HwpxPackage } from '@ubermensch1218/hwpxcore';
+import { ReactNode } from 'react';
+import * as zustand from 'zustand';
+
+declare function Editor(): react_jsx_runtime.JSX.Element;
+
+declare function PageView(): react_jsx_runtime.JSX.Element;
+
+/**
+ * EditorViewModel — pure data structures derived from HwpxDocument for rendering.
+ */
+
+interface RunVM {
+    text: string;
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strikethrough: boolean;
+    color: string | null;
+    fontFamily: string | null;
+    fontSize: number | null;
+    highlightColor: string | null;
+    letterSpacing: number | null;
+    charPrIdRef: string | null;
+}
+interface TableCellVM {
+    row: number;
+    col: number;
+    rowSpan: number;
+    colSpan: number;
+    widthPx: number;
+    heightPx: number;
+    text: string;
+    isAnchor: boolean;
+}
+interface TableVM {
+    rowCount: number;
+    colCount: number;
+    cells: TableCellVM[][];
+    tableIndex: number;
+}
+interface ImageVM {
+    dataUrl: string;
+    widthPx: number;
+    heightPx: number;
+    binaryItemIdRef: string;
+}
+interface ParagraphVM {
+    runs: RunVM[];
+    tables: TableVM[];
+    images: ImageVM[];
+    alignment: string;
+    lineSpacing: number;
+    spacingBefore: number;
+    spacingAfter: number;
+    firstLineIndent: number;
+    marginLeftPx: number;
+    marginRightPx: number;
+    paragraphIndex: number;
+}
+interface SectionVM {
+    pageWidthPx: number;
+    pageHeightPx: number;
+    marginTopPx: number;
+    marginBottomPx: number;
+    marginLeftPx: number;
+    marginRightPx: number;
+    paragraphs: ParagraphVM[];
+    sectionIndex: number;
+}
+interface EditorViewModel {
+    sections: SectionVM[];
+}
+declare function buildViewModel(doc: HwpxDocument): EditorViewModel;
+
+interface PageProps {
+    section: SectionVM;
+}
+declare function Page({ section }: PageProps): react_jsx_runtime.JSX.Element;
+
+interface ParagraphBlockProps {
+    paragraph: ParagraphVM;
+    sectionIndex: number;
+    /** Index of this paragraph within the section's paragraphs array */
+    localIndex: number;
+}
+declare function ParagraphBlock({ paragraph, sectionIndex, localIndex, }: ParagraphBlockProps): react_jsx_runtime.JSX.Element;
+
+interface RunSpanProps {
+    run: RunVM;
+}
+declare function RunSpan({ run }: RunSpanProps): react_jsx_runtime.JSX.Element;
+
+interface ImageBlockProps {
+    image: ImageVM;
+}
+declare function ImageBlock({ image }: ImageBlockProps): react_jsx_runtime.JSX.Element;
+
+interface TableBlockProps {
+    table: TableVM;
+    sectionIndex: number;
+    paragraphIndex: number;
+}
+declare function TableBlock({ table, sectionIndex, paragraphIndex }: TableBlockProps): react_jsx_runtime.JSX.Element;
+
+interface TableCellProps {
+    cell: TableCellVM;
+    sectionIndex: number;
+    paragraphIndex: number;
+    tableIndex: number;
+}
+declare function TableCell({ cell, sectionIndex, paragraphIndex, tableIndex, }: TableCellProps): react_jsx_runtime.JSX.Element | null;
+
+declare function RibbonToolbar(): react_jsx_runtime.JSX.Element;
+
+declare function SecondaryToolbar(): react_jsx_runtime.JSX.Element;
+
+interface ToolbarButtonProps {
+    icon: ReactNode;
+    label?: string;
+    active?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    title?: string;
+    size?: "sm" | "md";
+    className?: string;
+}
+declare function ToolbarButton({ icon, label, active, disabled, onClick, title, size, className, }: ToolbarButtonProps): react_jsx_runtime.JSX.Element;
+
+interface ToolbarDropdownProps {
+    value: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    title?: string;
+    className?: string;
+    width?: string;
+    icon?: ReactNode;
+}
+declare function ToolbarDropdown({ value, options, onChange, disabled, title, className, width, icon, }: ToolbarDropdownProps): react_jsx_runtime.JSX.Element;
+
+declare function ToolbarDivider(): react_jsx_runtime.JSX.Element;
+
+interface ColorPickerProps {
+    color: string;
+    onChange: (color: string) => void;
+    icon: ReactNode;
+    title?: string;
+    disabled?: boolean;
+}
+declare function ColorPicker({ color, onChange, icon, title, disabled, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
+
+interface RibbonGroupProps {
+    label: string;
+    children: ReactNode;
+}
+declare function RibbonGroup({ label, children }: RibbonGroupProps): react_jsx_runtime.JSX.Element;
+
+declare function ClipboardGroup(): react_jsx_runtime.JSX.Element;
+
+declare function InsertGroup(): react_jsx_runtime.JSX.Element;
+
+interface StyleSelectorProps {
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+}
+declare function StyleSelector({ value, onChange, disabled }: StyleSelectorProps): react_jsx_runtime.JSX.Element;
+
+interface FontSelectorProps {
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+}
+declare function FontSelector({ value, onChange, disabled }: FontSelectorProps): react_jsx_runtime.JSX.Element;
+
+interface FontSizeInputProps {
+    value: number;
+    onChange: (value: number) => void;
+    disabled?: boolean;
+}
+declare function FontSizeInput({ value, onChange, disabled }: FontSizeInputProps): react_jsx_runtime.JSX.Element;
+
+declare function CharFormatButtons(): react_jsx_runtime.JSX.Element;
+
+declare function AlignmentButtons(): react_jsx_runtime.JSX.Element;
+
+declare function LineSpacingControl(): react_jsx_runtime.JSX.Element;
+
+declare function FormatSidebar(): react_jsx_runtime.JSX.Element | null;
+
+interface SidebarSectionProps {
+    title: string;
+    children: ReactNode;
+    defaultOpen?: boolean;
+}
+declare function SidebarSection({ title, children, defaultOpen, }: SidebarSectionProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarFieldProps {
+    label: string;
+    children: ReactNode;
+}
+declare function SidebarField({ label, children }: SidebarFieldProps): react_jsx_runtime.JSX.Element;
+
+declare function CharFormatPanel(): react_jsx_runtime.JSX.Element;
+
+declare function ParaFormatPanel(): react_jsx_runtime.JSX.Element;
+
+interface BorderSettingsProps {
+    disabled?: boolean;
+}
+declare function BorderSettings({ disabled }: BorderSettingsProps): react_jsx_runtime.JSX.Element;
+
+interface BackgroundSettingsProps {
+    disabled?: boolean;
+}
+declare function BackgroundSettings({ disabled }: BackgroundSettingsProps): react_jsx_runtime.JSX.Element;
+
+declare function HorizontalRuler(): react_jsx_runtime.JSX.Element | null;
+
+declare function FileUpload(): react_jsx_runtime.JSX.Element;
+
+declare function NewDocumentButton(): react_jsx_runtime.JSX.Element;
+
+/**
+ * Constants for the HWPX editor UI — font lists, style presets, alignment/spacing options.
+ */
+declare const FONT_FAMILIES: readonly ["맑은 고딕", "함초롬돋움", "함초롬바탕", "나눔고딕", "나눔명조", "나눔바른고딕", "바탕", "돋움", "굴림", "궁서", "Arial", "Times New Roman", "Courier New", "Verdana", "Georgia"];
+type FontFamily = (typeof FONT_FAMILIES)[number];
+declare const FONT_SIZES: readonly [8, 9, 10, 10.5, 11, 12, 14, 16, 18, 20, 22, 24, 28, 32, 36, 48, 72];
+interface StylePreset {
+    id: string;
+    name: string;
+    engName: string;
+}
+declare const STYLE_PRESETS: StylePreset[];
+type AlignmentType = "LEFT" | "CENTER" | "RIGHT" | "JUSTIFY" | "DISTRIBUTE";
+interface AlignmentOption {
+    value: AlignmentType;
+    label: string;
+    shortcut?: string;
+}
+declare const ALIGNMENT_OPTIONS: AlignmentOption[];
+interface LineSpacingOption {
+    value: number;
+    label: string;
+}
+declare const LINE_SPACING_OPTIONS: LineSpacingOption[];
+declare const UNDERLINE_TYPES: readonly ["NONE", "SOLID", "DASH", "DOT", "DASH_DOT", "DASH_DOT_DOT", "LONG_DASH", "DOUBLE", "WAVE", "HEAVY_WAVE", "DOUBLE_WAVE"];
+declare const COLOR_PRESETS: readonly ["#000000", "#333333", "#555555", "#777777", "#999999", "#BBBBBB", "#DDDDDD", "#FFFFFF", "#FF0000", "#FF6600", "#FFCC00", "#33CC33", "#0099FF", "#3366FF", "#6633CC", "#CC33CC", "#FF9999", "#FFCC99", "#FFFF99", "#CCFFCC", "#99CCFF", "#9999FF", "#CC99FF", "#FF99CC", "#CC0000", "#CC6600", "#CC9900", "#009900", "#006699", "#003399", "#330099", "#990066"];
+declare const HIGHLIGHT_COLORS: readonly [{
+    readonly value: "#FFFF00";
+    readonly label: "노랑";
+}, {
+    readonly value: "#00FF00";
+    readonly label: "연두";
+}, {
+    readonly value: "#00FFFF";
+    readonly label: "하늘";
+}, {
+    readonly value: "#FF00FF";
+    readonly label: "분홍";
+}, {
+    readonly value: "#0000FF";
+    readonly label: "파랑";
+}, {
+    readonly value: "#FF0000";
+    readonly label: "빨강";
+}, {
+    readonly value: "#008000";
+    readonly label: "초록";
+}, {
+    readonly value: "#800080";
+    readonly label: "보라";
+}, {
+    readonly value: "#808080";
+    readonly label: "회색";
+}, {
+    readonly value: "none";
+    readonly label: "없음";
+}];
+type SidebarTab = "char" | "para";
+
+/**
+ * format-bridge.ts — Bridge between UI and @ubermensch1218/hwpxcore formatting APIs.
+ *
+ * Reads charPr / paraPr from the document and converts to UI-friendly formats.
+ * Also provides methods to apply format changes back to the document.
+ */
+
+interface CharFormat {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strikethrough: boolean;
+    fontFamily: string | null;
+    fontSize: number | null;
+    textColor: string | null;
+    highlightColor: string | null;
+    letterSpacing: number | null;
+}
+interface ParaFormat {
+    alignment: AlignmentType;
+    lineSpacing: number;
+    spacingBefore: number;
+    spacingAfter: number;
+    indentLeft: number;
+    indentRight: number;
+    firstLineIndent: number;
+}
+declare function readCharFormat(style: RunStyle | null): CharFormat;
+declare function readParaFormat(doc: HwpxDocument, paragraph: HwpxOxmlParagraph): ParaFormat;
+declare function readStyleInfo(doc: HwpxDocument, paragraph: HwpxOxmlParagraph): {
+    styleName: string | null;
+    styleId: string | null;
+};
+declare function getDocumentStyles(doc: HwpxDocument): Style[];
+declare function readFormatFromSelection(doc: HwpxDocument, sectionIndex: number, paragraphIndex: number): {
+    char: CharFormat;
+    para: ParaFormat;
+};
+
+interface SelectionState {
+    sectionIndex: number;
+    paragraphIndex: number;
+    type: "paragraph" | "cell";
+    tableIndex?: number;
+    row?: number;
+    col?: number;
+}
+interface ActiveFormat {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+}
+interface ExtendedFormat {
+    char: CharFormat;
+    para: ParaFormat;
+}
+interface UIState {
+    sidebarOpen: boolean;
+    sidebarTab: SidebarTab;
+}
+interface EditorStore {
+    doc: HwpxDocument | null;
+    viewModel: EditorViewModel | null;
+    revision: number;
+    selection: SelectionState | null;
+    activeFormat: ActiveFormat;
+    extendedFormat: ExtendedFormat;
+    uiState: UIState;
+    loading: boolean;
+    error: string | null;
+    setDocument: (doc: HwpxDocument) => void;
+    rebuild: () => void;
+    setSelection: (sel: SelectionState | null) => void;
+    setActiveFormat: (fmt: Partial<ActiveFormat>) => void;
+    refreshExtendedFormat: () => void;
+    toggleSidebar: () => void;
+    setSidebarTab: (tab: SidebarTab) => void;
+    updateParagraphText: (sectionIndex: number, paragraphIndex: number, text: string) => void;
+    updateCellText: (sectionIndex: number, paragraphIndex: number, tableIndex: number, row: number, col: number, text: string) => void;
+    toggleBold: () => void;
+    toggleItalic: () => void;
+    toggleUnderline: () => void;
+    addParagraph: (text?: string) => void;
+    addTable: (sectionIndex: number, paragraphIndex: number, rows: number, cols: number) => void;
+    insertImage: (data: Uint8Array, mediaType: string, widthMm: number, heightMm: number) => void;
+    saveDocument: () => Promise<void>;
+    setLoading: (loading: boolean) => void;
+    setError: (error: string | null) => void;
+}
+declare const useEditorStore: zustand.UseBoundStore<zustand.StoreApi<EditorStore>>;
+
+/**
+ * HWPX unit conversion utilities.
+ *
+ * HWPX uses hwpUnit where 7200 hwpUnit = 1 inch = 25.4 mm.
+ * Screen rendering at 96 DPI: 1 hwpUnit = 96/7200 px ≈ 0.01333 px.
+ */
+/** Convert hwpUnit to pixels at 96 DPI. */
+declare function hwpToPx(hwpUnit: number): number;
+/** Convert pixels (96 DPI) to hwpUnit. */
+declare function pxToHwp(px: number): number;
+/** Convert hwpUnit to millimeters. */
+declare function hwpToMm(hwpUnit: number): number;
+/** Convert millimeters to hwpUnit. */
+declare function mmToHwp(mm: number): number;
+
+/**
+ * Extract binary image data from an HwpxDocument package as data URLs.
+ */
+
+/** Map of binaryItemIdRef → data:... URL for all images in the package. */
+declare function extractImages(pkg: HwpxPackage): Map<string, string>;
+
+/**
+ * Browser-side Skeleton.hwpx loader.
+ * Fetches from /Skeleton.hwpx and calls setSkeletonHwpx() to register it.
+ */
+
+/** Fetch Skeleton.hwpx from the public folder and register it with @ubermensch1218/hwpxcore. */
+declare function ensureSkeletonLoaded(): Promise<void>;
+/** Create a new empty HwpxDocument from the skeleton template. */
+declare function createNewDocument(): Promise<HwpxDocument>;
+
+export { ALIGNMENT_OPTIONS, type ActiveFormat, AlignmentButtons, type AlignmentOption, type AlignmentType, BackgroundSettings, BorderSettings, COLOR_PRESETS, type CharFormat, CharFormatButtons, CharFormatPanel, ClipboardGroup, ColorPicker, Editor, type EditorStore, type EditorViewModel, type ExtendedFormat, FONT_FAMILIES, FONT_SIZES, FileUpload, type FontFamily, FontSelector, FontSizeInput, FormatSidebar, HIGHLIGHT_COLORS, HorizontalRuler, ImageBlock, type ImageVM, InsertGroup, LINE_SPACING_OPTIONS, LineSpacingControl, type LineSpacingOption, NewDocumentButton, Page, PageView, type ParaFormat, ParaFormatPanel, ParagraphBlock, type ParagraphVM, RibbonGroup, RibbonToolbar, RunSpan, type RunVM, STYLE_PRESETS, SecondaryToolbar, type SectionVM, type SelectionState, SidebarField, SidebarSection, type SidebarTab, type StylePreset, StyleSelector, TableBlock, TableCell, type TableCellVM, type TableVM, ToolbarButton, ToolbarDivider, ToolbarDropdown, type UIState, UNDERLINE_TYPES, buildViewModel, createNewDocument, ensureSkeletonLoaded, extractImages, getDocumentStyles, hwpToMm, hwpToPx, mmToHwp, pxToHwp, readCharFormat, readFormatFromSelection, readParaFormat, readStyleInfo, useEditorStore };