@zeke-02/docx-editor-react 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +201 -0
- package/README.md +122 -0
- package/dist/FindReplaceDialog-25PDOTC7.js +1 -0
- package/dist/FindReplaceDialog-6PLDD22H.mjs +1 -0
- package/dist/FootnotePropertiesDialog-JIWAFAKL.js +1 -0
- package/dist/FootnotePropertiesDialog-SZYOYLR3.mjs +1 -0
- package/dist/HyperlinkDialog-G5FFKLWY.js +1 -0
- package/dist/HyperlinkDialog-PSJ6P3E3.mjs +1 -0
- package/dist/ImagePositionDialog-DTGYFFAR.js +1 -0
- package/dist/ImagePositionDialog-FKBG2MSL.mjs +1 -0
- package/dist/ImagePropertiesDialog-SO6RAOT6.js +1 -0
- package/dist/ImagePropertiesDialog-T77XMKJF.mjs +1 -0
- package/dist/KeyboardShortcutsDialog-04AoVwn3.d.mts +415 -0
- package/dist/KeyboardShortcutsDialog-04AoVwn3.d.ts +415 -0
- package/dist/PageSetupDialog-Q7UGLILM.mjs +1 -0
- package/dist/PageSetupDialog-XMG64O3T.js +1 -0
- package/dist/PrintPreview-DEhwRBC_.d.mts +93 -0
- package/dist/PrintPreview-DEhwRBC_.d.ts +93 -0
- package/dist/SplitCellDialog-NPGW4JGQ.mjs +1 -0
- package/dist/SplitCellDialog-RNP37SKZ.js +1 -0
- package/dist/TablePropertiesDialog-3QNCWNEG.mjs +1 -0
- package/dist/TablePropertiesDialog-AQVM7FGA.js +1 -0
- package/dist/chunk-2DBLZSGF.js +1 -0
- package/dist/chunk-3QCOIABL.js +2 -0
- package/dist/chunk-45GFZZ45.mjs +1 -0
- package/dist/chunk-4RTT4L2S.js +1 -0
- package/dist/chunk-7DAI755K.mjs +1 -0
- package/dist/chunk-BJ5RZW6Y.js +1 -0
- package/dist/chunk-BMBP5UFA.mjs +1 -0
- package/dist/chunk-DZHU5RSL.mjs +2 -0
- package/dist/chunk-FZ357PVD.mjs +2 -0
- package/dist/chunk-GM2S2WMT.mjs +1 -0
- package/dist/chunk-GNIO6SOS.js +1 -0
- package/dist/chunk-HAFRR4IT.js +1 -0
- package/dist/chunk-ICVBXT6V.mjs +2 -0
- package/dist/chunk-JGPOALUP.js +1 -0
- package/dist/chunk-JTUSMG6J.js +1 -0
- package/dist/chunk-K5DD2LSK.mjs +1 -0
- package/dist/chunk-NIBCC7WQ.js +1 -0
- package/dist/chunk-PBA4ERQP.js +2 -0
- package/dist/chunk-RK5GPBQ5.mjs +1 -0
- package/dist/chunk-UMM2BQ4N.mjs +1 -0
- package/dist/chunk-UT6DJWGC.js +2 -0
- package/dist/chunk-UZLKRJJK.js +2 -0
- package/dist/chunk-W3QFF3SQ.mjs +2 -0
- package/dist/chunk-XA53EBKC.js +1 -0
- package/dist/chunk-XRZKQOQJ.mjs +1 -0
- package/dist/chunk-ZFZJRL2R.mjs +1 -0
- package/dist/dialogs.d.mts +40 -0
- package/dist/dialogs.d.ts +40 -0
- package/dist/dialogs.js +1 -0
- package/dist/dialogs.mjs +1 -0
- package/dist/hooks.d.mts +513 -0
- package/dist/hooks.d.ts +513 -0
- package/dist/hooks.js +1 -0
- package/dist/hooks.mjs +1 -0
- package/dist/index.d.mts +567 -0
- package/dist/index.d.ts +567 -0
- package/dist/index.js +33 -0
- package/dist/index.mjs +33 -0
- package/dist/plugin-api.d.mts +90 -0
- package/dist/plugin-api.d.ts +90 -0
- package/dist/plugin-api.js +246 -0
- package/dist/plugin-api.mjs +246 -0
- package/dist/styles.css +1 -0
- package/dist/styles.d.mts +13 -0
- package/dist/styles.d.ts +13 -0
- package/dist/styles.js +1 -0
- package/dist/styles.mjs +1 -0
- package/dist/types-DaQbko33.d.mts +106 -0
- package/dist/types-DaQbko33.d.ts +106 -0
- package/dist/ui.d.mts +1565 -0
- package/dist/ui.d.ts +1565 -0
- package/dist/ui.js +111 -0
- package/dist/ui.mjs +111 -0
- package/dist/useFindReplace-C5gZIvkA.d.mts +219 -0
- package/dist/useFindReplace-C5gZIvkA.d.ts +219 -0
- package/package.json +137 -0
package/dist/ui.d.mts
ADDED
|
@@ -0,0 +1,1565 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @zeke-02/docx-editor-react/ui
|
|
3
|
+
*
|
|
4
|
+
* UI entry point — Toolbar, pickers, dialogs, and UI components.
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* ```tsx
|
|
8
|
+
* import { Toolbar, FontPicker, ColorPicker } from '@zeke-02/docx-editor-react/ui';
|
|
9
|
+
* ```
|
|
10
|
+
*
|
|
11
|
+
* @packageDocumentation
|
|
12
|
+
* @public
|
|
13
|
+
*/
|
|
14
|
+
import React__default, { CSSProperties, ReactNode } from 'react';
|
|
15
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
16
|
+
import { Table, TableCell, ParagraphAlignment, ColorValue, Style, Theme, StyleType, SectionProperties, TabStop, Document } from '@zeke-02/docx-editor-core/types/document';
|
|
17
|
+
import { FontOption } from '@zeke-02/docx-editor-core/utils/fontOptions';
|
|
18
|
+
export { FontOption } from '@zeke-02/docx-editor-core/utils/fontOptions';
|
|
19
|
+
import { ListState } from '@zeke-02/docx-editor-core/utils/listState';
|
|
20
|
+
export { ListState, createDefaultListState } from '@zeke-02/docx-editor-core/utils/listState';
|
|
21
|
+
import { T as TableSelection, a as TableContext, b as TableSplitConfig, c as TableAction } from './useFindReplace-C5gZIvkA.mjs';
|
|
22
|
+
export { F as FindReplaceOptions, d as FindReplaceState, e as TableToolbar, f as TableToolbarProps, U as UseFindReplaceReturn, u as useFindReplace } from './useFindReplace-C5gZIvkA.mjs';
|
|
23
|
+
import { SelectionContext, AIAction, AgentResponse } from '@zeke-02/docx-editor-core/types/agentApi';
|
|
24
|
+
import { TranslationKey } from '@eigenpal/docx-editor-i18n';
|
|
25
|
+
export { a as PrintButton, b as PrintButtonProps, P as PrintOptions, c as PrintStyles, f as formatPrintPageRange, g as getDefaultPrintOptions, i as isPrintSupported, o as openPrintWindow, p as parsePageRange, t as triggerPrint } from './PrintPreview-DEhwRBC_.mjs';
|
|
26
|
+
export { K as DialogKeyboardShortcut, F as FindReplaceDialog, a as FindReplaceDialogProps, H as HyperlinkData, b as HyperlinkDialog, c as HyperlinkDialogProps, d as KeyboardShortcutsDialog, e as KeyboardShortcutsDialogProps, P as PasteOption, f as PasteSpecialDialog, g as PasteSpecialDialogProps, S as ShortcutCategory, U as UseKeyboardShortcutsDialogOptions, h as UseKeyboardShortcutsDialogReturn, i as UsePasteSpecialOptions, j as UsePasteSpecialReturn, k as formatShortcutKeys, l as getAllCategories, m as getAllPasteOptions, n as getCategoryLabel, o as getCommonShortcuts, p as getDefaultPasteOption, q as getDefaultShortcuts, r as getPasteOption, s as getShortcutsByCategory, t as isPasteSpecialShortcut, u as useHyperlinkDialog, v as useKeyboardShortcutsDialog, w as usePasteSpecial } from './KeyboardShortcutsDialog-04AoVwn3.mjs';
|
|
27
|
+
export { FindMatch, FindOptions, FindResult, HighlightOptions, createDefaultFindOptions, createSearchPattern, escapeRegexString, findAllMatches, findInDocument, findInParagraph, getDefaultHighlightOptions, getMatchCountText, isEmptySearch, replaceAllInContent, replaceFirstInContent, scrollToMatch } from '@zeke-02/docx-editor-core/utils/findReplace';
|
|
28
|
+
import '@zeke-02/docx-editor-core/utils';
|
|
29
|
+
|
|
30
|
+
interface FontPickerProps {
|
|
31
|
+
value?: string;
|
|
32
|
+
onChange?: (fontFamily: string) => void;
|
|
33
|
+
fonts?: FontOption[];
|
|
34
|
+
disabled?: boolean;
|
|
35
|
+
className?: string;
|
|
36
|
+
placeholder?: string;
|
|
37
|
+
width?: number | string;
|
|
38
|
+
showPreview?: boolean;
|
|
39
|
+
}
|
|
40
|
+
declare function FontPicker({ value, onChange, fonts, disabled, className, placeholder, width, showPreview, }: FontPickerProps): react_jsx_runtime.JSX.Element;
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* Props for the ListButtons component
|
|
44
|
+
*/
|
|
45
|
+
interface ListButtonsProps {
|
|
46
|
+
/** Current list state of the selection */
|
|
47
|
+
listState?: ListState;
|
|
48
|
+
/** Callback when bullet list is toggled */
|
|
49
|
+
onBulletList?: () => void;
|
|
50
|
+
/** Callback when numbered list is toggled */
|
|
51
|
+
onNumberedList?: () => void;
|
|
52
|
+
/** Callback to increase list indent */
|
|
53
|
+
onIndent?: () => void;
|
|
54
|
+
/** Callback to decrease list indent */
|
|
55
|
+
onOutdent?: () => void;
|
|
56
|
+
/** Whether the buttons are disabled */
|
|
57
|
+
disabled?: boolean;
|
|
58
|
+
/** Additional CSS class name */
|
|
59
|
+
className?: string;
|
|
60
|
+
/** Additional inline styles */
|
|
61
|
+
style?: CSSProperties;
|
|
62
|
+
/** Show indent/outdent buttons */
|
|
63
|
+
showIndentButtons?: boolean;
|
|
64
|
+
/** Compact mode (smaller buttons) */
|
|
65
|
+
compact?: boolean;
|
|
66
|
+
/** Whether the current paragraph has left indentation (for enabling outdent) */
|
|
67
|
+
hasIndent?: boolean;
|
|
68
|
+
}
|
|
69
|
+
/**
|
|
70
|
+
* List buttons component for bullet/numbered list controls
|
|
71
|
+
*/
|
|
72
|
+
declare function ListButtons({ listState, onBulletList, onNumberedList, onIndent, onOutdent, disabled, className, style, showIndentButtons, compact, hasIndent, }: ListButtonsProps): react_jsx_runtime.JSX.Element;
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* Document-model table operations — pure functions over the Table type:
|
|
76
|
+
* row/column add+delete, cell merge/split, selection bounds + lookups,
|
|
77
|
+
* grid-anchor calculations for irregular merged tables. Used by
|
|
78
|
+
* TableToolbar.tsx and the React table-selection hook; published from
|
|
79
|
+
* `@zeke-02/docx-editor-react`.
|
|
80
|
+
*/
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* Create a table context from a table and selection
|
|
84
|
+
*/
|
|
85
|
+
declare function createTableContext(table: Table, selection: TableSelection): TableContext;
|
|
86
|
+
/**
|
|
87
|
+
* Get column count from a table
|
|
88
|
+
*/
|
|
89
|
+
declare function getColumnCount(table: Table): number;
|
|
90
|
+
/**
|
|
91
|
+
* Get cell at specific row and column index
|
|
92
|
+
*/
|
|
93
|
+
declare function getCellAt(table: Table, rowIndex: number, columnIndex: number): TableCell | null;
|
|
94
|
+
declare function getTableSplitCellDialogConfig(table: Table, rowIndex: number, columnIndex: number): TableSplitConfig | null;
|
|
95
|
+
declare function splitTableCell(table: Table, rowIndex: number, columnIndex: number, rows: number, cols: number): Table;
|
|
96
|
+
/**
|
|
97
|
+
* Add a row to a table at the specified index
|
|
98
|
+
*/
|
|
99
|
+
declare function addRow(table: Table, atIndex: number, position?: 'before' | 'after'): Table;
|
|
100
|
+
/**
|
|
101
|
+
* Delete a row from a table
|
|
102
|
+
*/
|
|
103
|
+
declare function deleteRow(table: Table, rowIndex: number): Table;
|
|
104
|
+
/**
|
|
105
|
+
* Add a column to a table at the specified index
|
|
106
|
+
*/
|
|
107
|
+
declare function addColumn(table: Table, atIndex: number, position?: 'before' | 'after'): Table;
|
|
108
|
+
/**
|
|
109
|
+
* Delete a column from a table
|
|
110
|
+
*/
|
|
111
|
+
declare function deleteColumn(table: Table, columnIndex: number): Table;
|
|
112
|
+
/**
|
|
113
|
+
* Merge cells in a selection
|
|
114
|
+
*/
|
|
115
|
+
declare function mergeCells(table: Table, selection: TableSelection): Table;
|
|
116
|
+
/**
|
|
117
|
+
* Backward-compatible helper for callers that still use the older merged-cell
|
|
118
|
+
* split behavior directly.
|
|
119
|
+
*
|
|
120
|
+
* User-facing Split cell is now dialog-driven. For document-model tables, use
|
|
121
|
+
* `getTableSplitCellDialogConfig()` and `splitTableCell()` instead.
|
|
122
|
+
*/
|
|
123
|
+
declare function splitCell(table: Table, rowIndex: number, columnIndex: number): Table;
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* Current formatting state of the selection
|
|
127
|
+
*/
|
|
128
|
+
interface SelectionFormatting {
|
|
129
|
+
/** Whether selected text is bold */
|
|
130
|
+
bold?: boolean;
|
|
131
|
+
/** Whether selected text is italic */
|
|
132
|
+
italic?: boolean;
|
|
133
|
+
/** Whether selected text is underlined */
|
|
134
|
+
underline?: boolean;
|
|
135
|
+
/** Whether selected text has strikethrough */
|
|
136
|
+
strike?: boolean;
|
|
137
|
+
/** Whether selected text is superscript */
|
|
138
|
+
superscript?: boolean;
|
|
139
|
+
/** Whether selected text is subscript */
|
|
140
|
+
subscript?: boolean;
|
|
141
|
+
/** Font family of selected text */
|
|
142
|
+
fontFamily?: string;
|
|
143
|
+
/** Font size of selected text (in half-points) */
|
|
144
|
+
fontSize?: number;
|
|
145
|
+
/** Text color */
|
|
146
|
+
color?: string;
|
|
147
|
+
/** Highlight color */
|
|
148
|
+
highlight?: string;
|
|
149
|
+
/** Paragraph alignment */
|
|
150
|
+
alignment?: ParagraphAlignment;
|
|
151
|
+
/** List state of the current paragraph */
|
|
152
|
+
listState?: ListState;
|
|
153
|
+
/** Line spacing in twips (OOXML value, 240 = single spacing) */
|
|
154
|
+
lineSpacing?: number;
|
|
155
|
+
/** Paragraph style ID */
|
|
156
|
+
styleId?: string;
|
|
157
|
+
/** Paragraph left indentation in twips */
|
|
158
|
+
indentLeft?: number;
|
|
159
|
+
/** Whether the paragraph is RTL (bidi) */
|
|
160
|
+
bidi?: boolean;
|
|
161
|
+
}
|
|
162
|
+
/**
|
|
163
|
+
* Formatting action types
|
|
164
|
+
*/
|
|
165
|
+
type FormattingAction = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'superscript' | 'subscript' | 'clearFormatting' | 'bulletList' | 'numberedList' | 'indent' | 'outdent' | 'insertLink' | 'setRtl' | 'setLtr' | {
|
|
166
|
+
type: 'fontFamily';
|
|
167
|
+
value: string;
|
|
168
|
+
} | {
|
|
169
|
+
type: 'fontSize';
|
|
170
|
+
value: number;
|
|
171
|
+
} | {
|
|
172
|
+
type: 'textColor';
|
|
173
|
+
value: ColorValue | string;
|
|
174
|
+
} | {
|
|
175
|
+
type: 'highlightColor';
|
|
176
|
+
value: string;
|
|
177
|
+
} | {
|
|
178
|
+
type: 'alignment';
|
|
179
|
+
value: ParagraphAlignment;
|
|
180
|
+
} | {
|
|
181
|
+
type: 'lineSpacing';
|
|
182
|
+
value: number;
|
|
183
|
+
} | {
|
|
184
|
+
type: 'applyStyle';
|
|
185
|
+
value: string;
|
|
186
|
+
};
|
|
187
|
+
/**
|
|
188
|
+
* Props for the Toolbar (formatting rail) component
|
|
189
|
+
*/
|
|
190
|
+
interface ToolbarProps {
|
|
191
|
+
/** Current formatting of the selection */
|
|
192
|
+
currentFormatting?: SelectionFormatting;
|
|
193
|
+
/** Callback when a formatting action is triggered */
|
|
194
|
+
onFormat?: (action: FormattingAction) => void;
|
|
195
|
+
/** Callback for undo action */
|
|
196
|
+
onUndo?: () => void;
|
|
197
|
+
/** Callback for redo action */
|
|
198
|
+
onRedo?: () => void;
|
|
199
|
+
/** Whether undo is available */
|
|
200
|
+
canUndo?: boolean;
|
|
201
|
+
/** Whether redo is available */
|
|
202
|
+
canRedo?: boolean;
|
|
203
|
+
/** Whether the toolbar is disabled */
|
|
204
|
+
disabled?: boolean;
|
|
205
|
+
/** Additional CSS class name */
|
|
206
|
+
className?: string;
|
|
207
|
+
/** Additional inline styles */
|
|
208
|
+
style?: CSSProperties;
|
|
209
|
+
/** Whether to enable keyboard shortcuts (default: true) */
|
|
210
|
+
enableShortcuts?: boolean;
|
|
211
|
+
/** Ref to the editor container for keyboard events */
|
|
212
|
+
editorRef?: React__default.RefObject<HTMLElement>;
|
|
213
|
+
/** Custom toolbar items to render at the end */
|
|
214
|
+
children?: ReactNode;
|
|
215
|
+
/** When true, renders with display:contents so children flow in the parent flex container */
|
|
216
|
+
inline?: boolean;
|
|
217
|
+
/** Whether to show font family picker (default: true) */
|
|
218
|
+
showFontPicker?: boolean;
|
|
219
|
+
/**
|
|
220
|
+
* Custom list of fonts in the toolbar dropdown. When omitted, the built-in
|
|
221
|
+
* 12-font default is used. Strings render in the "Other" group; pass
|
|
222
|
+
* `FontOption[]` for category grouping and CSS fallback chains.
|
|
223
|
+
* An empty array renders an empty (but enabled) dropdown.
|
|
224
|
+
*/
|
|
225
|
+
fontFamilies?: ReadonlyArray<string | FontOption>;
|
|
226
|
+
/** Whether to show font size picker (default: true) */
|
|
227
|
+
showFontSizePicker?: boolean;
|
|
228
|
+
/** Whether to show text color picker (default: true) */
|
|
229
|
+
showTextColorPicker?: boolean;
|
|
230
|
+
/** Whether to show highlight color picker (default: true) */
|
|
231
|
+
showHighlightColorPicker?: boolean;
|
|
232
|
+
/** Whether to show alignment buttons (default: true) */
|
|
233
|
+
showAlignmentButtons?: boolean;
|
|
234
|
+
/** Whether to show list buttons (default: true) */
|
|
235
|
+
showListButtons?: boolean;
|
|
236
|
+
/** Whether to show line spacing picker (default: true) */
|
|
237
|
+
showLineSpacingPicker?: boolean;
|
|
238
|
+
/** Whether to show style picker (default: true) */
|
|
239
|
+
showStylePicker?: boolean;
|
|
240
|
+
/** Document styles for the style picker */
|
|
241
|
+
documentStyles?: Style[];
|
|
242
|
+
/** Theme for the style picker / color picker theme matrix */
|
|
243
|
+
theme?: Theme | null;
|
|
244
|
+
/** Callback for print action. Set to enable the File > Print menu entry. */
|
|
245
|
+
onPrint?: () => void;
|
|
246
|
+
/** Callback to open/import a DOCX file (File → Open) */
|
|
247
|
+
onOpen?: () => void;
|
|
248
|
+
/** Callback to save/download the current DOCX (File → Save) */
|
|
249
|
+
onSave?: () => void;
|
|
250
|
+
/** Whether to show zoom control (default: true) */
|
|
251
|
+
showZoomControl?: boolean;
|
|
252
|
+
/** Current zoom level (1.0 = 100%) */
|
|
253
|
+
zoom?: number;
|
|
254
|
+
/** Callback when zoom changes */
|
|
255
|
+
onZoomChange?: (zoom: number) => void;
|
|
256
|
+
/** Callback to refocus the editor after toolbar interactions */
|
|
257
|
+
onRefocusEditor?: () => void;
|
|
258
|
+
/** Callback when a table should be inserted */
|
|
259
|
+
onInsertTable?: (rows: number, columns: number) => void;
|
|
260
|
+
/** Whether to show table insert button (default: true) */
|
|
261
|
+
showTableInsert?: boolean;
|
|
262
|
+
/** Callback when user wants to insert an image */
|
|
263
|
+
onInsertImage?: () => void;
|
|
264
|
+
/** Callback when user wants to insert a page break */
|
|
265
|
+
onInsertPageBreak?: () => void;
|
|
266
|
+
/** Callback when user wants to insert a table of contents */
|
|
267
|
+
onInsertTOC?: () => void;
|
|
268
|
+
/** Callback when user wants to insert a shape */
|
|
269
|
+
onInsertShape?: (data: {
|
|
270
|
+
shapeType: string;
|
|
271
|
+
width: number;
|
|
272
|
+
height: number;
|
|
273
|
+
fillColor?: string;
|
|
274
|
+
fillType?: string;
|
|
275
|
+
outlineWidth?: number;
|
|
276
|
+
outlineColor?: string;
|
|
277
|
+
}) => void;
|
|
278
|
+
/** Image context when an image is selected */
|
|
279
|
+
imageContext?: {
|
|
280
|
+
wrapType: string;
|
|
281
|
+
displayMode: string;
|
|
282
|
+
cssFloat: string | null;
|
|
283
|
+
} | null;
|
|
284
|
+
/** Callback when image wrap type changes */
|
|
285
|
+
onImageWrapType?: (wrapType: string) => void;
|
|
286
|
+
/** Callback for image transform (rotate/flip) */
|
|
287
|
+
onImageTransform?: (action: 'rotateCW' | 'rotateCCW' | 'flipH' | 'flipV') => void;
|
|
288
|
+
/** Callback to open image properties dialog (alt text + border) */
|
|
289
|
+
onOpenImageProperties?: () => void;
|
|
290
|
+
/** Callback to open page setup dialog */
|
|
291
|
+
onPageSetup?: () => void;
|
|
292
|
+
/** Table context when cursor is in a table */
|
|
293
|
+
tableContext?: {
|
|
294
|
+
isInTable: boolean;
|
|
295
|
+
rowCount?: number;
|
|
296
|
+
columnCount?: number;
|
|
297
|
+
canSplitCell?: boolean;
|
|
298
|
+
hasMultiCellSelection?: boolean;
|
|
299
|
+
cellBorderColor?: ColorValue;
|
|
300
|
+
cellBackgroundColor?: string;
|
|
301
|
+
} | null;
|
|
302
|
+
/** Callback when a table action is triggered */
|
|
303
|
+
onTableAction?: (action: TableAction) => void;
|
|
304
|
+
}
|
|
305
|
+
/**
|
|
306
|
+
* Props for individual toolbar buttons
|
|
307
|
+
*/
|
|
308
|
+
interface ToolbarButtonProps {
|
|
309
|
+
/** Whether the button is in active/pressed state */
|
|
310
|
+
active?: boolean;
|
|
311
|
+
/** Whether the button is disabled */
|
|
312
|
+
disabled?: boolean;
|
|
313
|
+
/** Button title/tooltip */
|
|
314
|
+
title?: string;
|
|
315
|
+
/** Click handler */
|
|
316
|
+
onClick?: () => void;
|
|
317
|
+
/** Button content */
|
|
318
|
+
children: ReactNode;
|
|
319
|
+
/** Additional CSS class name */
|
|
320
|
+
className?: string;
|
|
321
|
+
/** ARIA label for accessibility */
|
|
322
|
+
ariaLabel?: string;
|
|
323
|
+
}
|
|
324
|
+
/**
|
|
325
|
+
* Props for toolbar button groups
|
|
326
|
+
*/
|
|
327
|
+
interface ToolbarGroupProps$1 {
|
|
328
|
+
/** Group label for accessibility */
|
|
329
|
+
label?: string;
|
|
330
|
+
/** Group content */
|
|
331
|
+
children: ReactNode;
|
|
332
|
+
/** Additional CSS class name */
|
|
333
|
+
className?: string;
|
|
334
|
+
}
|
|
335
|
+
/**
|
|
336
|
+
* Individual toolbar button with shadcn styling
|
|
337
|
+
*/
|
|
338
|
+
declare function ToolbarButton({ active, disabled, title, onClick, children, className, ariaLabel, }: ToolbarButtonProps): react_jsx_runtime.JSX.Element;
|
|
339
|
+
/**
|
|
340
|
+
* Toolbar button group with modern styling
|
|
341
|
+
*/
|
|
342
|
+
declare function ToolbarGroup$1({ label, children, className }: ToolbarGroupProps$1): react_jsx_runtime.JSX.Element;
|
|
343
|
+
/**
|
|
344
|
+
* Toolbar separator
|
|
345
|
+
*/
|
|
346
|
+
declare function ToolbarSeparator(): react_jsx_runtime.JSX.Element;
|
|
347
|
+
/**
|
|
348
|
+
* Icon-based formatting toolbar — undo/redo, zoom, styles, fonts,
|
|
349
|
+
* bold/italic/underline, colors, alignment, lists, table/image context, clear formatting.
|
|
350
|
+
*/
|
|
351
|
+
declare function Toolbar(explicitProps: ToolbarProps): react_jsx_runtime.JSX.Element;
|
|
352
|
+
|
|
353
|
+
/**
|
|
354
|
+
* Props for the EditorToolbar compound component.
|
|
355
|
+
* Extends ToolbarProps with title bar-specific fields.
|
|
356
|
+
*/
|
|
357
|
+
interface EditorToolbarProps extends ToolbarProps {
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
interface LogoProps {
|
|
361
|
+
children: ReactNode;
|
|
362
|
+
}
|
|
363
|
+
declare function Logo({ children }: LogoProps): react_jsx_runtime.JSX.Element;
|
|
364
|
+
interface DocumentNameProps {
|
|
365
|
+
value: string;
|
|
366
|
+
onChange?: (value: string) => void;
|
|
367
|
+
placeholder?: string;
|
|
368
|
+
editable?: boolean;
|
|
369
|
+
}
|
|
370
|
+
declare function DocumentName({ value, onChange, placeholder, editable }: DocumentNameProps): react_jsx_runtime.JSX.Element;
|
|
371
|
+
interface TitleBarRightProps {
|
|
372
|
+
children: ReactNode;
|
|
373
|
+
}
|
|
374
|
+
declare function TitleBarRight({ children }: TitleBarRightProps): react_jsx_runtime.JSX.Element;
|
|
375
|
+
declare function MenuBar(): react_jsx_runtime.JSX.Element;
|
|
376
|
+
interface TitleBarProps {
|
|
377
|
+
children: ReactNode;
|
|
378
|
+
}
|
|
379
|
+
/**
|
|
380
|
+
* TitleBar layout (Google Docs style):
|
|
381
|
+
*
|
|
382
|
+
* ┌──────────┬────────────────────────────┬──────────────────┐
|
|
383
|
+
* │ │ Document Name │ │
|
|
384
|
+
* │ Logo │ │ Right Actions │
|
|
385
|
+
* │ │ File Format Insert │ │
|
|
386
|
+
* └──────────┴────────────────────────────┴──────────────────┘
|
|
387
|
+
*
|
|
388
|
+
* Logo and TitleBarRight span full height. DocumentName + MenuBar
|
|
389
|
+
* stack vertically in the center column.
|
|
390
|
+
*/
|
|
391
|
+
declare function TitleBar({ children }: TitleBarProps): react_jsx_runtime.JSX.Element;
|
|
392
|
+
|
|
393
|
+
/**
|
|
394
|
+
* EditorToolbar — Google Docs-style 2-level compound component.
|
|
395
|
+
*
|
|
396
|
+
* Usage:
|
|
397
|
+
* <EditorToolbar {...toolbarProps}>
|
|
398
|
+
* <EditorToolbar.TitleBar>
|
|
399
|
+
* <EditorToolbar.Logo><MyIcon /></EditorToolbar.Logo>
|
|
400
|
+
* <EditorToolbar.DocumentName value={name} onChange={setName} />
|
|
401
|
+
* <EditorToolbar.MenuBar />
|
|
402
|
+
* <EditorToolbar.TitleBarRight>
|
|
403
|
+
* <button>Save</button>
|
|
404
|
+
* </EditorToolbar.TitleBarRight>
|
|
405
|
+
* </EditorToolbar.TitleBar>
|
|
406
|
+
* <EditorToolbar.Toolbar />
|
|
407
|
+
* </EditorToolbar>
|
|
408
|
+
*/
|
|
409
|
+
|
|
410
|
+
interface EditorToolbarComponent {
|
|
411
|
+
(props: EditorToolbarProps & {
|
|
412
|
+
children: ReactNode;
|
|
413
|
+
}): React.JSX.Element;
|
|
414
|
+
TitleBar: typeof TitleBar;
|
|
415
|
+
Logo: typeof Logo;
|
|
416
|
+
DocumentName: typeof DocumentName;
|
|
417
|
+
MenuBar: typeof MenuBar;
|
|
418
|
+
TitleBarRight: typeof TitleBarRight;
|
|
419
|
+
Toolbar: typeof Toolbar;
|
|
420
|
+
}
|
|
421
|
+
declare const EditorToolbar: EditorToolbarComponent;
|
|
422
|
+
|
|
423
|
+
/**
|
|
424
|
+
* Context Menu Component
|
|
425
|
+
*
|
|
426
|
+
* Right-click context menu for AI actions on selected text.
|
|
427
|
+
* Shows AI options like rewrite, expand, summarize, translate, etc.
|
|
428
|
+
*/
|
|
429
|
+
|
|
430
|
+
/**
|
|
431
|
+
* Context menu props
|
|
432
|
+
*/
|
|
433
|
+
interface ContextMenuProps {
|
|
434
|
+
/** Whether the menu is visible */
|
|
435
|
+
isOpen: boolean;
|
|
436
|
+
/** Menu position */
|
|
437
|
+
position: {
|
|
438
|
+
x: number;
|
|
439
|
+
y: number;
|
|
440
|
+
};
|
|
441
|
+
/** Selected text */
|
|
442
|
+
selectedText: string;
|
|
443
|
+
/** Selection context for AI operations */
|
|
444
|
+
selectionContext?: SelectionContext;
|
|
445
|
+
/** Callback when an action is selected */
|
|
446
|
+
onAction: (action: AIAction, customPrompt?: string) => void;
|
|
447
|
+
/** Callback when menu is closed */
|
|
448
|
+
onClose: () => void;
|
|
449
|
+
/** Available actions (defaults to DEFAULT_AI_ACTIONS) */
|
|
450
|
+
actions?: AIAction[];
|
|
451
|
+
/** Whether to show custom prompt option */
|
|
452
|
+
showCustomPrompt?: boolean;
|
|
453
|
+
/** Additional className */
|
|
454
|
+
className?: string;
|
|
455
|
+
}
|
|
456
|
+
declare const ContextMenu: React__default.FC<ContextMenuProps>;
|
|
457
|
+
/**
|
|
458
|
+
* Hook to manage context menu state
|
|
459
|
+
*/
|
|
460
|
+
declare function useContextMenu(): {
|
|
461
|
+
isOpen: boolean;
|
|
462
|
+
position: {
|
|
463
|
+
x: number;
|
|
464
|
+
y: number;
|
|
465
|
+
};
|
|
466
|
+
selectedText: string;
|
|
467
|
+
selectionContext: SelectionContext | undefined;
|
|
468
|
+
openMenu: (e: React__default.MouseEvent | MouseEvent, text: string, context?: SelectionContext) => void;
|
|
469
|
+
closeMenu: () => void;
|
|
470
|
+
};
|
|
471
|
+
/**
|
|
472
|
+
* Get action shortcuts
|
|
473
|
+
*/
|
|
474
|
+
declare function getActionShortcut(action: AIAction): string | undefined;
|
|
475
|
+
/**
|
|
476
|
+
* Check if action is available for selection
|
|
477
|
+
*/
|
|
478
|
+
declare function isActionAvailable(_action: AIAction, selectedText: string, _selectionContext?: SelectionContext): boolean;
|
|
479
|
+
/**
|
|
480
|
+
* Get default actions for selection
|
|
481
|
+
*/
|
|
482
|
+
declare function getDefaultActions(): AIAction[];
|
|
483
|
+
/**
|
|
484
|
+
* Get all available actions
|
|
485
|
+
*/
|
|
486
|
+
declare function getAllActions(): AIAction[];
|
|
487
|
+
|
|
488
|
+
/**
|
|
489
|
+
* Response Preview Component
|
|
490
|
+
*
|
|
491
|
+
* Shows AI response preview with diff view before applying changes.
|
|
492
|
+
* Allows user to accept, reject, or edit the response.
|
|
493
|
+
*/
|
|
494
|
+
|
|
495
|
+
/**
|
|
496
|
+
* Response preview props
|
|
497
|
+
*/
|
|
498
|
+
interface ResponsePreviewProps {
|
|
499
|
+
/** Original selected text */
|
|
500
|
+
originalText: string;
|
|
501
|
+
/** AI response (or null if loading/error) */
|
|
502
|
+
response: AgentResponse | null;
|
|
503
|
+
/** Action that was performed */
|
|
504
|
+
action: AIAction;
|
|
505
|
+
/** Whether the response is loading */
|
|
506
|
+
isLoading: boolean;
|
|
507
|
+
/** Error message if request failed */
|
|
508
|
+
error?: string;
|
|
509
|
+
/** Callback when user accepts the change */
|
|
510
|
+
onAccept: (newText: string) => void;
|
|
511
|
+
/** Callback when user rejects the change */
|
|
512
|
+
onReject: () => void;
|
|
513
|
+
/** Callback when user wants to retry */
|
|
514
|
+
onRetry?: () => void;
|
|
515
|
+
/** Allow editing before accepting */
|
|
516
|
+
allowEdit?: boolean;
|
|
517
|
+
/** Show diff view */
|
|
518
|
+
showDiff?: boolean;
|
|
519
|
+
/** Additional className */
|
|
520
|
+
className?: string;
|
|
521
|
+
/** Position for the preview */
|
|
522
|
+
position?: {
|
|
523
|
+
x: number;
|
|
524
|
+
y: number;
|
|
525
|
+
};
|
|
526
|
+
}
|
|
527
|
+
declare const ResponsePreview: React__default.FC<ResponsePreviewProps>;
|
|
528
|
+
/**
|
|
529
|
+
* State for response preview
|
|
530
|
+
*/
|
|
531
|
+
interface ResponsePreviewState {
|
|
532
|
+
isVisible: boolean;
|
|
533
|
+
originalText: string;
|
|
534
|
+
response: AgentResponse | null;
|
|
535
|
+
action: AIAction;
|
|
536
|
+
isLoading: boolean;
|
|
537
|
+
error?: string;
|
|
538
|
+
position?: {
|
|
539
|
+
x: number;
|
|
540
|
+
y: number;
|
|
541
|
+
};
|
|
542
|
+
}
|
|
543
|
+
/**
|
|
544
|
+
* Hook to manage response preview state
|
|
545
|
+
*/
|
|
546
|
+
declare function useResponsePreview(): {
|
|
547
|
+
state: ResponsePreviewState;
|
|
548
|
+
showPreview: (originalText: string, action: AIAction, position?: {
|
|
549
|
+
x: number;
|
|
550
|
+
y: number;
|
|
551
|
+
}) => void;
|
|
552
|
+
setResponse: (response: AgentResponse) => void;
|
|
553
|
+
setError: (error: string) => void;
|
|
554
|
+
hidePreview: () => void;
|
|
555
|
+
};
|
|
556
|
+
/**
|
|
557
|
+
* Create a mock response for testing
|
|
558
|
+
*/
|
|
559
|
+
declare function createMockResponse(newText: string, warnings?: string[]): AgentResponse;
|
|
560
|
+
/**
|
|
561
|
+
* Create an error response
|
|
562
|
+
*/
|
|
563
|
+
declare function createErrorResponse(error: string): AgentResponse;
|
|
564
|
+
|
|
565
|
+
/**
|
|
566
|
+
* Text Context Menu Component
|
|
567
|
+
*
|
|
568
|
+
* Right-click context menu for text editing operations.
|
|
569
|
+
* Shows Cut, Copy, Paste, and other text editing options.
|
|
570
|
+
*/
|
|
571
|
+
|
|
572
|
+
/**
|
|
573
|
+
* Context menu action types
|
|
574
|
+
*/
|
|
575
|
+
type TextContextAction = 'cut' | 'copy' | 'paste' | 'pasteAsPlainText' | 'selectAll' | 'delete' | 'separator' | 'addRowAbove' | 'addRowBelow' | 'deleteRow' | 'addColumnLeft' | 'addColumnRight' | 'deleteColumn' | 'mergeCells' | 'splitCell' | 'addComment';
|
|
576
|
+
/**
|
|
577
|
+
* Menu item configuration
|
|
578
|
+
*/
|
|
579
|
+
interface TextContextMenuItem {
|
|
580
|
+
/** Action type */
|
|
581
|
+
action: TextContextAction;
|
|
582
|
+
/** Display label */
|
|
583
|
+
label: string;
|
|
584
|
+
/** Keyboard shortcut hint */
|
|
585
|
+
shortcut?: string;
|
|
586
|
+
/** Whether the item is disabled */
|
|
587
|
+
disabled?: boolean;
|
|
588
|
+
/** Whether to show divider after this item */
|
|
589
|
+
dividerAfter?: boolean;
|
|
590
|
+
}
|
|
591
|
+
/**
|
|
592
|
+
* Context menu props
|
|
593
|
+
*/
|
|
594
|
+
interface TextContextMenuProps {
|
|
595
|
+
/** Whether the menu is visible */
|
|
596
|
+
isOpen: boolean;
|
|
597
|
+
/** Menu position */
|
|
598
|
+
position: {
|
|
599
|
+
x: number;
|
|
600
|
+
y: number;
|
|
601
|
+
};
|
|
602
|
+
/** Whether there's a selection (enables copy/cut) */
|
|
603
|
+
hasSelection: boolean;
|
|
604
|
+
/** Whether the editor is editable (enables paste/cut/delete) */
|
|
605
|
+
isEditable: boolean;
|
|
606
|
+
/** Whether clipboard has content (enables paste) */
|
|
607
|
+
hasClipboardContent?: boolean;
|
|
608
|
+
/** Callback when an action is selected */
|
|
609
|
+
onAction: (action: TextContextAction) => void;
|
|
610
|
+
/** Callback when menu is closed */
|
|
611
|
+
onClose: () => void;
|
|
612
|
+
/** Custom menu items (overrides default) */
|
|
613
|
+
items?: TextContextMenuItem[];
|
|
614
|
+
/** Additional className */
|
|
615
|
+
className?: string;
|
|
616
|
+
}
|
|
617
|
+
/**
|
|
618
|
+
* Hook options for text context menu
|
|
619
|
+
*/
|
|
620
|
+
interface UseTextContextMenuOptions {
|
|
621
|
+
/** Whether the context menu is enabled */
|
|
622
|
+
enabled?: boolean;
|
|
623
|
+
/** Whether the editor is editable */
|
|
624
|
+
isEditable?: boolean;
|
|
625
|
+
/** Container element ref */
|
|
626
|
+
containerRef?: React__default.RefObject<HTMLElement>;
|
|
627
|
+
/** Callback when an action is triggered */
|
|
628
|
+
onAction?: (action: TextContextAction) => void;
|
|
629
|
+
}
|
|
630
|
+
/**
|
|
631
|
+
* Hook return value
|
|
632
|
+
*/
|
|
633
|
+
interface UseTextContextMenuReturn {
|
|
634
|
+
/** Whether the menu is open */
|
|
635
|
+
isOpen: boolean;
|
|
636
|
+
/** Menu position */
|
|
637
|
+
position: {
|
|
638
|
+
x: number;
|
|
639
|
+
y: number;
|
|
640
|
+
};
|
|
641
|
+
/** Whether there's a text selection */
|
|
642
|
+
hasSelection: boolean;
|
|
643
|
+
/** Open the context menu */
|
|
644
|
+
openMenu: (event: React__default.MouseEvent | MouseEvent) => void;
|
|
645
|
+
/** Close the context menu */
|
|
646
|
+
closeMenu: () => void;
|
|
647
|
+
/** Handle action selection */
|
|
648
|
+
handleAction: (action: TextContextAction) => void;
|
|
649
|
+
/** Context menu event handler for onContextMenu prop */
|
|
650
|
+
onContextMenu: (event: React__default.MouseEvent) => void;
|
|
651
|
+
}
|
|
652
|
+
declare const TextContextMenu: React__default.FC<TextContextMenuProps>;
|
|
653
|
+
/**
|
|
654
|
+
* Hook to manage text context menu state
|
|
655
|
+
*/
|
|
656
|
+
declare function useTextContextMenu(options?: UseTextContextMenuOptions): UseTextContextMenuReturn;
|
|
657
|
+
/**
|
|
658
|
+
* Get action label
|
|
659
|
+
*/
|
|
660
|
+
declare function getTextActionLabel(action: TextContextAction): string;
|
|
661
|
+
/**
|
|
662
|
+
* Get action shortcut
|
|
663
|
+
*/
|
|
664
|
+
declare function getTextActionShortcut(action: TextContextAction): string;
|
|
665
|
+
/**
|
|
666
|
+
* Get default menu item definitions (untranslated, use translation keys)
|
|
667
|
+
*/
|
|
668
|
+
declare function getDefaultTextContextMenuItems(): TextContextMenuItem[];
|
|
669
|
+
/**
|
|
670
|
+
* Check if action is available
|
|
671
|
+
*/
|
|
672
|
+
declare function isTextActionAvailable(action: TextContextAction, hasSelection: boolean, isEditable: boolean): boolean;
|
|
673
|
+
|
|
674
|
+
/**
|
|
675
|
+
* Zoom Control Component (Radix UI)
|
|
676
|
+
*
|
|
677
|
+
* A dropdown for controlling document zoom level using Radix Select.
|
|
678
|
+
*/
|
|
679
|
+
interface ZoomLevel {
|
|
680
|
+
value: number;
|
|
681
|
+
label: string;
|
|
682
|
+
}
|
|
683
|
+
interface ZoomControlProps {
|
|
684
|
+
value?: number;
|
|
685
|
+
onChange?: (zoom: number) => void;
|
|
686
|
+
levels?: ZoomLevel[];
|
|
687
|
+
disabled?: boolean;
|
|
688
|
+
className?: string;
|
|
689
|
+
minZoom?: number;
|
|
690
|
+
maxZoom?: number;
|
|
691
|
+
showButtons?: boolean;
|
|
692
|
+
persistZoom?: boolean;
|
|
693
|
+
storageKey?: string;
|
|
694
|
+
compact?: boolean;
|
|
695
|
+
}
|
|
696
|
+
declare function ZoomControl({ value, onChange, levels, disabled, className, compact, }: ZoomControlProps): react_jsx_runtime.JSX.Element;
|
|
697
|
+
|
|
698
|
+
/**
|
|
699
|
+
* Font Size Picker Component (Google Docs Style)
|
|
700
|
+
*
|
|
701
|
+
* A font size control with minus/plus buttons and editable input.
|
|
702
|
+
* Features:
|
|
703
|
+
* - Minus button to decrease font size
|
|
704
|
+
* - Plus button to increase font size
|
|
705
|
+
* - Editable input for custom sizes
|
|
706
|
+
* - Click input to show dropdown with preset sizes
|
|
707
|
+
*/
|
|
708
|
+
interface FontSizePickerProps {
|
|
709
|
+
value?: number;
|
|
710
|
+
onChange?: (size: number) => void;
|
|
711
|
+
sizes?: number[];
|
|
712
|
+
disabled?: boolean;
|
|
713
|
+
className?: string;
|
|
714
|
+
placeholder?: string;
|
|
715
|
+
width?: number | string;
|
|
716
|
+
minSize?: number;
|
|
717
|
+
maxSize?: number;
|
|
718
|
+
}
|
|
719
|
+
|
|
720
|
+
declare function FontSizePicker({ value, onChange, sizes, disabled, className, placeholder, minSize, maxSize, }: FontSizePickerProps): react_jsx_runtime.JSX.Element;
|
|
721
|
+
|
|
722
|
+
interface LineSpacingOption {
|
|
723
|
+
label: string;
|
|
724
|
+
labelKey?: TranslationKey;
|
|
725
|
+
value: number;
|
|
726
|
+
twipsValue: number;
|
|
727
|
+
}
|
|
728
|
+
interface LineSpacingPickerProps {
|
|
729
|
+
value?: number;
|
|
730
|
+
onChange?: (twipsValue: number) => void;
|
|
731
|
+
options?: LineSpacingOption[];
|
|
732
|
+
disabled?: boolean;
|
|
733
|
+
className?: string;
|
|
734
|
+
width?: number | string;
|
|
735
|
+
}
|
|
736
|
+
declare function LineSpacingPicker({ value, onChange, options, disabled, className, }: LineSpacingPickerProps): react_jsx_runtime.JSX.Element;
|
|
737
|
+
|
|
738
|
+
type ColorPickerMode = 'text' | 'highlight' | 'border';
|
|
739
|
+
interface ColorPickerProps {
|
|
740
|
+
mode: ColorPickerMode;
|
|
741
|
+
value?: ColorValue | string;
|
|
742
|
+
onChange?: (color: ColorValue | string) => void;
|
|
743
|
+
theme?: Theme | null;
|
|
744
|
+
disabled?: boolean;
|
|
745
|
+
className?: string;
|
|
746
|
+
style?: CSSProperties;
|
|
747
|
+
title?: string;
|
|
748
|
+
/** Override the default icon for the mode */
|
|
749
|
+
icon?: string;
|
|
750
|
+
/** Override the auto/no-color button label */
|
|
751
|
+
autoLabel?: string;
|
|
752
|
+
/**
|
|
753
|
+
* Word-style split button. When true (default), renders two halves:
|
|
754
|
+
* - left (apply): re-applies the last picked color directly
|
|
755
|
+
* - right (arrow): opens the color picker
|
|
756
|
+
* When false, the legacy single button is rendered (one click toggles dropdown).
|
|
757
|
+
*/
|
|
758
|
+
splitButton?: boolean;
|
|
759
|
+
/**
|
|
760
|
+
* Initial "last picked" color used by the apply half before the user picks
|
|
761
|
+
* anything. Defaults: text → red, highlight → yellow, border → black.
|
|
762
|
+
*/
|
|
763
|
+
defaultColor?: ColorValue | string;
|
|
764
|
+
}
|
|
765
|
+
declare function ColorPicker({ mode, value, onChange, theme, disabled, className, style, title, icon: iconOverride, autoLabel, splitButton, defaultColor, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
|
|
766
|
+
|
|
767
|
+
interface StyleOption {
|
|
768
|
+
styleId: string;
|
|
769
|
+
name: string;
|
|
770
|
+
nameKey?: TranslationKey;
|
|
771
|
+
type: StyleType;
|
|
772
|
+
isDefault?: boolean;
|
|
773
|
+
qFormat?: boolean;
|
|
774
|
+
priority?: number;
|
|
775
|
+
/** Font size in half-points for visual preview */
|
|
776
|
+
fontSize?: number;
|
|
777
|
+
/** Bold styling */
|
|
778
|
+
bold?: boolean;
|
|
779
|
+
/** Italic styling */
|
|
780
|
+
italic?: boolean;
|
|
781
|
+
/** Text color (RGB hex) */
|
|
782
|
+
color?: string;
|
|
783
|
+
}
|
|
784
|
+
interface StylePickerProps {
|
|
785
|
+
value?: string;
|
|
786
|
+
onChange?: (styleId: string) => void;
|
|
787
|
+
styles?: Style[];
|
|
788
|
+
theme?: Theme | null;
|
|
789
|
+
disabled?: boolean;
|
|
790
|
+
className?: string;
|
|
791
|
+
width?: number | string;
|
|
792
|
+
}
|
|
793
|
+
declare function StylePicker({ value, onChange, styles, disabled, className, width, }: StylePickerProps): react_jsx_runtime.JSX.Element;
|
|
794
|
+
|
|
795
|
+
/**
|
|
796
|
+
* Props for the AlignmentButtons component
|
|
797
|
+
*/
|
|
798
|
+
interface AlignmentButtonsProps {
|
|
799
|
+
/** Current alignment value */
|
|
800
|
+
value?: ParagraphAlignment;
|
|
801
|
+
/** Callback when alignment is changed */
|
|
802
|
+
onChange?: (alignment: ParagraphAlignment) => void;
|
|
803
|
+
/** Whether the buttons are disabled */
|
|
804
|
+
disabled?: boolean;
|
|
805
|
+
/** Additional CSS class name */
|
|
806
|
+
className?: string;
|
|
807
|
+
/** Additional inline styles */
|
|
808
|
+
style?: CSSProperties;
|
|
809
|
+
/** Show labels next to icons */
|
|
810
|
+
showLabels?: boolean;
|
|
811
|
+
/** Compact mode (smaller buttons) */
|
|
812
|
+
compact?: boolean;
|
|
813
|
+
}
|
|
814
|
+
/**
|
|
815
|
+
* Alignment dropdown component — single button with popover panel
|
|
816
|
+
*/
|
|
817
|
+
declare function AlignmentButtons({ value, onChange, disabled, }: AlignmentButtonsProps): react_jsx_runtime.JSX.Element;
|
|
818
|
+
|
|
819
|
+
/**
|
|
820
|
+
* HorizontalRuler Component — Google Docs style
|
|
821
|
+
*
|
|
822
|
+
* 3 handles only:
|
|
823
|
+
* - Left side: first-line indent (▼ down at top) + left indent (▲ up at bottom)
|
|
824
|
+
* - Right side: right indent (▼ down at top)
|
|
825
|
+
*
|
|
826
|
+
* Margins shown as gray zones on the ruler edges.
|
|
827
|
+
* Drag the boundary between gray/white to adjust page margins.
|
|
828
|
+
* Drag tooltip shows value during any drag.
|
|
829
|
+
*/
|
|
830
|
+
|
|
831
|
+
interface HorizontalRulerProps {
|
|
832
|
+
sectionProps?: SectionProperties | null;
|
|
833
|
+
zoom?: number;
|
|
834
|
+
editable?: boolean;
|
|
835
|
+
onLeftMarginChange?: (marginTwips: number) => void;
|
|
836
|
+
onRightMarginChange?: (marginTwips: number) => void;
|
|
837
|
+
onFirstLineIndentChange?: (indentTwips: number) => void;
|
|
838
|
+
showFirstLineIndent?: boolean;
|
|
839
|
+
firstLineIndent?: number;
|
|
840
|
+
hangingIndent?: boolean;
|
|
841
|
+
indentLeft?: number;
|
|
842
|
+
indentRight?: number;
|
|
843
|
+
onIndentLeftChange?: (indentTwips: number) => void;
|
|
844
|
+
onIndentRightChange?: (indentTwips: number) => void;
|
|
845
|
+
unit?: 'inch' | 'cm';
|
|
846
|
+
className?: string;
|
|
847
|
+
style?: CSSProperties;
|
|
848
|
+
tabStops?: TabStop[] | null;
|
|
849
|
+
onTabStopRemove?: (positionTwips: number) => void;
|
|
850
|
+
}
|
|
851
|
+
declare function HorizontalRuler({ sectionProps, zoom, editable, onLeftMarginChange, onRightMarginChange, onFirstLineIndentChange, showFirstLineIndent, firstLineIndent, hangingIndent, indentLeft, indentRight, onIndentLeftChange, onIndentRightChange, unit, className, style, tabStops, onTabStopRemove, }: HorizontalRulerProps): React__default.ReactElement;
|
|
852
|
+
declare function positionToMargin(positionPx: number, side: 'left' | 'right', pageWidthPx: number, zoom: number): number;
|
|
853
|
+
declare function getRulerDimensions(sectionProps?: SectionProperties | null, zoom?: number): {
|
|
854
|
+
width: number;
|
|
855
|
+
leftMargin: number;
|
|
856
|
+
rightMargin: number;
|
|
857
|
+
contentWidth: number;
|
|
858
|
+
};
|
|
859
|
+
declare function getMarginInUnits(marginTwips: number, unit: 'inch' | 'cm'): string;
|
|
860
|
+
declare function parseMarginFromUnits(value: string, unit: 'inch' | 'cm'): number | null;
|
|
861
|
+
|
|
862
|
+
interface TableBorderPickerProps {
|
|
863
|
+
onAction: (action: TableAction) => void;
|
|
864
|
+
disabled?: boolean;
|
|
865
|
+
}
|
|
866
|
+
declare function TableBorderPicker({ onAction, disabled }: TableBorderPickerProps): react_jsx_runtime.JSX.Element;
|
|
867
|
+
|
|
868
|
+
interface TableBorderColorPickerProps {
|
|
869
|
+
onAction: (action: TableAction) => void;
|
|
870
|
+
disabled?: boolean;
|
|
871
|
+
theme?: Theme | null;
|
|
872
|
+
/** Current border color (RGB hex without #) */
|
|
873
|
+
value?: string;
|
|
874
|
+
}
|
|
875
|
+
declare function TableBorderColorPicker({ onAction, disabled, theme, value, }: TableBorderColorPickerProps): react_jsx_runtime.JSX.Element;
|
|
876
|
+
|
|
877
|
+
interface TableBorderWidthPickerProps {
|
|
878
|
+
onAction: (action: TableAction) => void;
|
|
879
|
+
disabled?: boolean;
|
|
880
|
+
}
|
|
881
|
+
declare function TableBorderWidthPicker({ onAction, disabled, }: TableBorderWidthPickerProps): react_jsx_runtime.JSX.Element;
|
|
882
|
+
|
|
883
|
+
interface TableCellFillPickerProps {
|
|
884
|
+
onAction: (action: TableAction) => void;
|
|
885
|
+
disabled?: boolean;
|
|
886
|
+
theme?: Theme | null;
|
|
887
|
+
/** Current fill color (RGB hex without #) */
|
|
888
|
+
value?: string;
|
|
889
|
+
}
|
|
890
|
+
declare function TableCellFillPicker({ onAction, disabled, theme, value, }: TableCellFillPickerProps): react_jsx_runtime.JSX.Element;
|
|
891
|
+
|
|
892
|
+
interface TableMergeButtonProps {
|
|
893
|
+
onAction: (action: TableAction) => void;
|
|
894
|
+
disabled?: boolean;
|
|
895
|
+
canMerge?: boolean;
|
|
896
|
+
canSplit?: boolean;
|
|
897
|
+
}
|
|
898
|
+
declare function TableMergeButton({ onAction, disabled, canMerge, canSplit, }: TableMergeButtonProps): react_jsx_runtime.JSX.Element;
|
|
899
|
+
|
|
900
|
+
interface TableInsertButtonsProps {
|
|
901
|
+
onAction: (action: TableAction) => void;
|
|
902
|
+
disabled?: boolean;
|
|
903
|
+
}
|
|
904
|
+
declare function TableInsertButtons({ onAction, disabled }: TableInsertButtonsProps): react_jsx_runtime.JSX.Element;
|
|
905
|
+
|
|
906
|
+
interface TableMoreDropdownProps {
|
|
907
|
+
onAction: (action: TableAction) => void;
|
|
908
|
+
disabled?: boolean;
|
|
909
|
+
tableContext?: {
|
|
910
|
+
isInTable: boolean;
|
|
911
|
+
rowCount?: number;
|
|
912
|
+
columnCount?: number;
|
|
913
|
+
canSplitCell?: boolean;
|
|
914
|
+
hasMultiCellSelection?: boolean;
|
|
915
|
+
table?: {
|
|
916
|
+
attrs?: {
|
|
917
|
+
justification?: string;
|
|
918
|
+
};
|
|
919
|
+
};
|
|
920
|
+
} | null;
|
|
921
|
+
}
|
|
922
|
+
declare function TableMoreDropdown({ onAction, disabled, tableContext, }: TableMoreDropdownProps): react_jsx_runtime.JSX.Element;
|
|
923
|
+
|
|
924
|
+
/**
|
|
925
|
+
* Unsaved Changes Indicator Component
|
|
926
|
+
*
|
|
927
|
+
* Visual indicator that shows when document has unsaved changes.
|
|
928
|
+
* Features:
|
|
929
|
+
* - Configurable appearance (dot, badge, text)
|
|
930
|
+
* - Pulse animation option for visibility
|
|
931
|
+
* - Hook for tracking changes
|
|
932
|
+
* - Browser beforeunload warning
|
|
933
|
+
*/
|
|
934
|
+
|
|
935
|
+
/**
|
|
936
|
+
* Indicator variant type
|
|
937
|
+
*/
|
|
938
|
+
type IndicatorVariant = 'dot' | 'badge' | 'text' | 'icon';
|
|
939
|
+
/**
|
|
940
|
+
* Indicator position type
|
|
941
|
+
*/
|
|
942
|
+
type IndicatorPosition = 'inline' | 'absolute-top-right' | 'absolute-top-left';
|
|
943
|
+
/**
|
|
944
|
+
* Unsaved indicator props
|
|
945
|
+
*/
|
|
946
|
+
interface UnsavedIndicatorProps {
|
|
947
|
+
/** Whether there are unsaved changes */
|
|
948
|
+
hasUnsavedChanges: boolean;
|
|
949
|
+
/** Variant of the indicator */
|
|
950
|
+
variant?: IndicatorVariant;
|
|
951
|
+
/** Position of the indicator */
|
|
952
|
+
position?: IndicatorPosition;
|
|
953
|
+
/** Whether to show pulse animation */
|
|
954
|
+
showPulse?: boolean;
|
|
955
|
+
/** Custom label for text variant */
|
|
956
|
+
label?: string;
|
|
957
|
+
/** Custom saved label for text variant */
|
|
958
|
+
savedLabel?: string;
|
|
959
|
+
/** Whether to show indicator when saved (always show) */
|
|
960
|
+
showWhenSaved?: boolean;
|
|
961
|
+
/** Custom color for unsaved state */
|
|
962
|
+
unsavedColor?: string;
|
|
963
|
+
/** Custom color for saved state */
|
|
964
|
+
savedColor?: string;
|
|
965
|
+
/** Size in pixels (for dot/icon) */
|
|
966
|
+
size?: number;
|
|
967
|
+
/** Additional className */
|
|
968
|
+
className?: string;
|
|
969
|
+
/** Additional inline styles */
|
|
970
|
+
style?: React__default.CSSProperties;
|
|
971
|
+
/** Click handler */
|
|
972
|
+
onClick?: () => void;
|
|
973
|
+
/** Title/tooltip text */
|
|
974
|
+
title?: string;
|
|
975
|
+
}
|
|
976
|
+
/**
|
|
977
|
+
* Hook options for tracking unsaved changes
|
|
978
|
+
*/
|
|
979
|
+
interface UseUnsavedChangesOptions {
|
|
980
|
+
/** The document to track */
|
|
981
|
+
document?: Document | null;
|
|
982
|
+
/** Whether to warn before leaving page */
|
|
983
|
+
warnBeforeLeave?: boolean;
|
|
984
|
+
/** Custom warning message */
|
|
985
|
+
warningMessage?: string;
|
|
986
|
+
/** Whether tracking is enabled */
|
|
987
|
+
enabled?: boolean;
|
|
988
|
+
/** Callback when changes status changes */
|
|
989
|
+
onChangeStatusChange?: (hasChanges: boolean) => void;
|
|
990
|
+
}
|
|
991
|
+
/**
|
|
992
|
+
* Hook return value
|
|
993
|
+
*/
|
|
994
|
+
interface UseUnsavedChangesReturn {
|
|
995
|
+
/** Whether there are unsaved changes */
|
|
996
|
+
hasUnsavedChanges: boolean;
|
|
997
|
+
/** Mark the document as saved (resets change tracking) */
|
|
998
|
+
markAsSaved: () => void;
|
|
999
|
+
/** Mark the document as changed */
|
|
1000
|
+
markAsChanged: () => void;
|
|
1001
|
+
/** Reset tracking (resets baseline) */
|
|
1002
|
+
resetTracking: (newDocument?: Document | null) => void;
|
|
1003
|
+
/** The last saved document snapshot */
|
|
1004
|
+
lastSavedDocument: Document | null;
|
|
1005
|
+
/** Number of changes since last save */
|
|
1006
|
+
changeCount: number;
|
|
1007
|
+
}
|
|
1008
|
+
declare const UnsavedIndicator: React__default.FC<UnsavedIndicatorProps>;
|
|
1009
|
+
/**
|
|
1010
|
+
* Hook to track unsaved changes in a document
|
|
1011
|
+
*/
|
|
1012
|
+
declare function useUnsavedChanges(options?: UseUnsavedChangesOptions): UseUnsavedChangesReturn;
|
|
1013
|
+
/**
|
|
1014
|
+
* Get indicator variant label
|
|
1015
|
+
*/
|
|
1016
|
+
declare function getVariantLabel(variant: IndicatorVariant): string;
|
|
1017
|
+
/**
|
|
1018
|
+
* Get all indicator variants
|
|
1019
|
+
*/
|
|
1020
|
+
declare function getAllVariants(): IndicatorVariant[];
|
|
1021
|
+
/**
|
|
1022
|
+
* Get all indicator positions
|
|
1023
|
+
*/
|
|
1024
|
+
declare function getAllPositions(): IndicatorPosition[];
|
|
1025
|
+
/**
|
|
1026
|
+
* Create a document change tracker
|
|
1027
|
+
* Simple utility for external change tracking
|
|
1028
|
+
*/
|
|
1029
|
+
declare function createChangeTracker(): {
|
|
1030
|
+
markChanged: () => void;
|
|
1031
|
+
markSaved: () => void;
|
|
1032
|
+
getState: () => {
|
|
1033
|
+
changeCount: number;
|
|
1034
|
+
lastSaveTime: Date | null;
|
|
1035
|
+
hasUnsavedChanges: boolean;
|
|
1036
|
+
};
|
|
1037
|
+
reset: () => void;
|
|
1038
|
+
};
|
|
1039
|
+
|
|
1040
|
+
/**
|
|
1041
|
+
* Loading Indicator Component
|
|
1042
|
+
*
|
|
1043
|
+
* Displays loading states for operations with configurable appearance.
|
|
1044
|
+
* Features:
|
|
1045
|
+
* - Multiple spinner styles (spinner, dots, bar, pulse)
|
|
1046
|
+
* - Overlay mode for blocking UI during operations
|
|
1047
|
+
* - Inline mode for subtle loading indication
|
|
1048
|
+
* - Progress bar variant
|
|
1049
|
+
* - Hook for managing loading states
|
|
1050
|
+
*/
|
|
1051
|
+
|
|
1052
|
+
/**
|
|
1053
|
+
* Loading indicator variant
|
|
1054
|
+
*/
|
|
1055
|
+
type LoadingVariant = 'spinner' | 'dots' | 'bar' | 'pulse' | 'progress';
|
|
1056
|
+
/**
|
|
1057
|
+
* Loading indicator size
|
|
1058
|
+
*/
|
|
1059
|
+
type LoadingSize = 'small' | 'medium' | 'large';
|
|
1060
|
+
/**
|
|
1061
|
+
* Loading indicator props
|
|
1062
|
+
*/
|
|
1063
|
+
interface LoadingIndicatorProps {
|
|
1064
|
+
/** Whether loading is active */
|
|
1065
|
+
isLoading: boolean;
|
|
1066
|
+
/** Variant of the loading indicator */
|
|
1067
|
+
variant?: LoadingVariant;
|
|
1068
|
+
/** Size of the indicator */
|
|
1069
|
+
size?: LoadingSize;
|
|
1070
|
+
/** Loading message to display */
|
|
1071
|
+
message?: string;
|
|
1072
|
+
/** Whether to show as full-screen overlay */
|
|
1073
|
+
overlay?: boolean;
|
|
1074
|
+
/** Overlay background opacity (0-1) */
|
|
1075
|
+
overlayOpacity?: number;
|
|
1076
|
+
/** Progress percentage (0-100) for progress variant */
|
|
1077
|
+
progress?: number;
|
|
1078
|
+
/** Show progress percentage text */
|
|
1079
|
+
showProgressText?: boolean;
|
|
1080
|
+
/** Custom color */
|
|
1081
|
+
color?: string;
|
|
1082
|
+
/** Additional className */
|
|
1083
|
+
className?: string;
|
|
1084
|
+
/** Additional inline styles */
|
|
1085
|
+
style?: React__default.CSSProperties;
|
|
1086
|
+
}
|
|
1087
|
+
/**
|
|
1088
|
+
* Options for useLoading hook
|
|
1089
|
+
*/
|
|
1090
|
+
interface UseLoadingOptions {
|
|
1091
|
+
/** Initial loading state */
|
|
1092
|
+
initialLoading?: boolean;
|
|
1093
|
+
/** Minimum loading duration in ms (prevents flash) */
|
|
1094
|
+
minDuration?: number;
|
|
1095
|
+
/** Callback when loading starts */
|
|
1096
|
+
onStart?: () => void;
|
|
1097
|
+
/** Callback when loading ends */
|
|
1098
|
+
onEnd?: () => void;
|
|
1099
|
+
}
|
|
1100
|
+
/**
|
|
1101
|
+
* Return value of useLoading hook
|
|
1102
|
+
*/
|
|
1103
|
+
interface UseLoadingReturn {
|
|
1104
|
+
/** Current loading state */
|
|
1105
|
+
isLoading: boolean;
|
|
1106
|
+
/** Current message */
|
|
1107
|
+
message: string | null;
|
|
1108
|
+
/** Current progress (0-100) */
|
|
1109
|
+
progress: number;
|
|
1110
|
+
/** Start loading with optional message */
|
|
1111
|
+
startLoading: (message?: string) => void;
|
|
1112
|
+
/** Stop loading */
|
|
1113
|
+
stopLoading: () => void;
|
|
1114
|
+
/** Update progress (0-100) */
|
|
1115
|
+
setProgress: (progress: number) => void;
|
|
1116
|
+
/** Update message */
|
|
1117
|
+
setMessage: (message: string | null) => void;
|
|
1118
|
+
/** Wrap an async operation with loading state */
|
|
1119
|
+
withLoading: <T>(operation: () => Promise<T>, message?: string) => Promise<T>;
|
|
1120
|
+
}
|
|
1121
|
+
/**
|
|
1122
|
+
* Loading operation state
|
|
1123
|
+
*/
|
|
1124
|
+
interface LoadingOperation {
|
|
1125
|
+
id: string;
|
|
1126
|
+
message?: string;
|
|
1127
|
+
progress?: number;
|
|
1128
|
+
startTime: number;
|
|
1129
|
+
}
|
|
1130
|
+
declare const LoadingIndicator: React__default.FC<LoadingIndicatorProps>;
|
|
1131
|
+
/**
|
|
1132
|
+
* Hook to manage loading states
|
|
1133
|
+
*/
|
|
1134
|
+
declare function useLoading(options?: UseLoadingOptions): UseLoadingReturn;
|
|
1135
|
+
/**
|
|
1136
|
+
* Hook to manage multiple concurrent loading operations
|
|
1137
|
+
*/
|
|
1138
|
+
declare function useLoadingOperations(): {
|
|
1139
|
+
operations: LoadingOperation[];
|
|
1140
|
+
isAnyLoading: boolean;
|
|
1141
|
+
startOperation: (id: string, message?: string) => void;
|
|
1142
|
+
updateOperation: (id: string, updates: Partial<LoadingOperation>) => void;
|
|
1143
|
+
endOperation: (id: string) => void;
|
|
1144
|
+
getOperation: (id: string) => LoadingOperation | undefined;
|
|
1145
|
+
};
|
|
1146
|
+
/**
|
|
1147
|
+
* Get loading variant label
|
|
1148
|
+
*/
|
|
1149
|
+
declare function getLoadingVariantLabel(variant: LoadingVariant): string;
|
|
1150
|
+
/**
|
|
1151
|
+
* Get all loading variants
|
|
1152
|
+
*/
|
|
1153
|
+
declare function getAllLoadingVariants(): LoadingVariant[];
|
|
1154
|
+
/**
|
|
1155
|
+
* Get all loading sizes
|
|
1156
|
+
*/
|
|
1157
|
+
declare function getAllLoadingSizes(): LoadingSize[];
|
|
1158
|
+
/**
|
|
1159
|
+
* Create a delay promise for testing loading states
|
|
1160
|
+
*/
|
|
1161
|
+
declare function delay(ms: number): Promise<void>;
|
|
1162
|
+
|
|
1163
|
+
/**
|
|
1164
|
+
* Responsive Toolbar Component
|
|
1165
|
+
*
|
|
1166
|
+
* A responsive toolbar wrapper that collapses items into an overflow menu
|
|
1167
|
+
* when the screen is narrow.
|
|
1168
|
+
*
|
|
1169
|
+
* Features:
|
|
1170
|
+
* - Automatically measures available space
|
|
1171
|
+
* - Moves items to overflow menu when they don't fit
|
|
1172
|
+
* - Priority-based item ordering
|
|
1173
|
+
* - Configurable breakpoints
|
|
1174
|
+
* - ResizeObserver for dynamic resizing
|
|
1175
|
+
*/
|
|
1176
|
+
|
|
1177
|
+
/**
|
|
1178
|
+
* Priority level for toolbar items
|
|
1179
|
+
* Lower numbers = higher priority (shown first, hidden last)
|
|
1180
|
+
*/
|
|
1181
|
+
type ToolbarItemPriority = 1 | 2 | 3 | 4 | 5;
|
|
1182
|
+
/**
|
|
1183
|
+
* Toolbar item configuration
|
|
1184
|
+
*/
|
|
1185
|
+
interface ToolbarItem {
|
|
1186
|
+
/** Unique identifier */
|
|
1187
|
+
id: string;
|
|
1188
|
+
/** The content to render */
|
|
1189
|
+
content: ReactNode;
|
|
1190
|
+
/** Priority level (1 = highest, 5 = lowest) */
|
|
1191
|
+
priority?: ToolbarItemPriority;
|
|
1192
|
+
/** Minimum width in pixels (for measuring) */
|
|
1193
|
+
minWidth?: number;
|
|
1194
|
+
/** Whether this item should never be hidden */
|
|
1195
|
+
alwaysVisible?: boolean;
|
|
1196
|
+
/** Whether to show separator after this item */
|
|
1197
|
+
separatorAfter?: boolean;
|
|
1198
|
+
/** Group name for keeping items together */
|
|
1199
|
+
group?: string;
|
|
1200
|
+
}
|
|
1201
|
+
/**
|
|
1202
|
+
* Props for ResponsiveToolbar component
|
|
1203
|
+
*/
|
|
1204
|
+
interface ResponsiveToolbarProps {
|
|
1205
|
+
/** Toolbar items */
|
|
1206
|
+
items: ToolbarItem[];
|
|
1207
|
+
/** Additional items for overflow menu only */
|
|
1208
|
+
overflowItems?: ToolbarItem[];
|
|
1209
|
+
/** Whether to show overflow button even when all items fit */
|
|
1210
|
+
alwaysShowOverflow?: boolean;
|
|
1211
|
+
/** Custom overflow button renderer */
|
|
1212
|
+
renderOverflowButton?: (itemCount: number, isOpen: boolean, onClick: () => void) => ReactNode;
|
|
1213
|
+
/** Custom overflow menu renderer */
|
|
1214
|
+
renderOverflowMenu?: (items: ToolbarItem[], onClose: () => void) => ReactNode;
|
|
1215
|
+
/** Gap between items in pixels */
|
|
1216
|
+
itemGap?: number;
|
|
1217
|
+
/** Padding for the toolbar */
|
|
1218
|
+
padding?: number | string;
|
|
1219
|
+
/** Minimum width for overflow button */
|
|
1220
|
+
overflowButtonWidth?: number;
|
|
1221
|
+
/** Additional className */
|
|
1222
|
+
className?: string;
|
|
1223
|
+
/** Additional styles */
|
|
1224
|
+
style?: CSSProperties;
|
|
1225
|
+
/** Height of the toolbar */
|
|
1226
|
+
height?: number | string;
|
|
1227
|
+
/** Background color */
|
|
1228
|
+
backgroundColor?: string;
|
|
1229
|
+
/** Border styles */
|
|
1230
|
+
borderBottom?: string;
|
|
1231
|
+
}
|
|
1232
|
+
/**
|
|
1233
|
+
* Options for useResponsiveToolbar hook
|
|
1234
|
+
*/
|
|
1235
|
+
interface UseResponsiveToolbarOptions {
|
|
1236
|
+
/** Container ref */
|
|
1237
|
+
containerRef: React__default.RefObject<HTMLElement | null>;
|
|
1238
|
+
/** Total items */
|
|
1239
|
+
items: ToolbarItem[];
|
|
1240
|
+
/** Gap between items */
|
|
1241
|
+
itemGap?: number;
|
|
1242
|
+
/** Width reserved for overflow button */
|
|
1243
|
+
overflowButtonWidth?: number;
|
|
1244
|
+
}
|
|
1245
|
+
/**
|
|
1246
|
+
* Return value of useResponsiveToolbar hook
|
|
1247
|
+
*/
|
|
1248
|
+
interface UseResponsiveToolbarReturn {
|
|
1249
|
+
/** Items that fit in visible area */
|
|
1250
|
+
visibleItems: ToolbarItem[];
|
|
1251
|
+
/** Items in overflow menu */
|
|
1252
|
+
overflowItems: ToolbarItem[];
|
|
1253
|
+
/** Whether overflow menu is needed */
|
|
1254
|
+
hasOverflow: boolean;
|
|
1255
|
+
/** Force a recalculation */
|
|
1256
|
+
recalculate: () => void;
|
|
1257
|
+
}
|
|
1258
|
+
/**
|
|
1259
|
+
* Hook to calculate which items fit in the toolbar
|
|
1260
|
+
*/
|
|
1261
|
+
declare function useResponsiveToolbar(options: UseResponsiveToolbarOptions): UseResponsiveToolbarReturn;
|
|
1262
|
+
declare const ResponsiveToolbar: React__default.FC<ResponsiveToolbarProps>;
|
|
1263
|
+
interface ToolbarGroupProps {
|
|
1264
|
+
/** Group items */
|
|
1265
|
+
children: ReactNode;
|
|
1266
|
+
/** Gap between items */
|
|
1267
|
+
gap?: number;
|
|
1268
|
+
/** Whether to show separator after group */
|
|
1269
|
+
separatorAfter?: boolean;
|
|
1270
|
+
/** Additional className */
|
|
1271
|
+
className?: string;
|
|
1272
|
+
/** Additional styles */
|
|
1273
|
+
style?: CSSProperties;
|
|
1274
|
+
}
|
|
1275
|
+
declare const ToolbarGroup: React__default.FC<ToolbarGroupProps>;
|
|
1276
|
+
/**
|
|
1277
|
+
* Create a toolbar item
|
|
1278
|
+
*/
|
|
1279
|
+
declare function createToolbarItem(id: string, content: ReactNode, options?: Partial<Omit<ToolbarItem, 'id' | 'content'>>): ToolbarItem;
|
|
1280
|
+
/**
|
|
1281
|
+
* Create toolbar items from an array of configs
|
|
1282
|
+
*/
|
|
1283
|
+
declare function createToolbarItems(configs: Array<{
|
|
1284
|
+
id: string;
|
|
1285
|
+
content: ReactNode;
|
|
1286
|
+
priority?: ToolbarItemPriority;
|
|
1287
|
+
minWidth?: number;
|
|
1288
|
+
alwaysVisible?: boolean;
|
|
1289
|
+
separatorAfter?: boolean;
|
|
1290
|
+
group?: string;
|
|
1291
|
+
}>): ToolbarItem[];
|
|
1292
|
+
/**
|
|
1293
|
+
* Get recommended priority for common toolbar items
|
|
1294
|
+
*/
|
|
1295
|
+
declare function getRecommendedPriority(itemType: string): ToolbarItemPriority;
|
|
1296
|
+
|
|
1297
|
+
/**
|
|
1298
|
+
* Insert Table Dialog Component
|
|
1299
|
+
*
|
|
1300
|
+
* Modal dialog for inserting a new table into the document.
|
|
1301
|
+
* Provides a visual grid selector for choosing rows and columns.
|
|
1302
|
+
*
|
|
1303
|
+
* Features:
|
|
1304
|
+
* - Visual grid selector (hover to select dimensions)
|
|
1305
|
+
* - Manual row/column input
|
|
1306
|
+
* - Preview of table dimensions
|
|
1307
|
+
* - Quick insert with default sizes
|
|
1308
|
+
*/
|
|
1309
|
+
|
|
1310
|
+
/**
|
|
1311
|
+
* Table configuration for insertion
|
|
1312
|
+
*/
|
|
1313
|
+
interface TableConfig {
|
|
1314
|
+
/** Number of rows */
|
|
1315
|
+
rows: number;
|
|
1316
|
+
/** Number of columns */
|
|
1317
|
+
columns: number;
|
|
1318
|
+
}
|
|
1319
|
+
/**
|
|
1320
|
+
* Props for InsertTableDialog
|
|
1321
|
+
*/
|
|
1322
|
+
interface InsertTableDialogProps {
|
|
1323
|
+
/** Whether the dialog is open */
|
|
1324
|
+
isOpen: boolean;
|
|
1325
|
+
/** Callback when dialog is closed */
|
|
1326
|
+
onClose: () => void;
|
|
1327
|
+
/** Callback when table is inserted */
|
|
1328
|
+
onInsert: (config: TableConfig) => void;
|
|
1329
|
+
/** Maximum rows in grid selector (default: 8) */
|
|
1330
|
+
maxGridRows?: number;
|
|
1331
|
+
/** Maximum columns in grid selector (default: 10) */
|
|
1332
|
+
maxGridColumns?: number;
|
|
1333
|
+
/** Maximum allowed rows (default: 100) */
|
|
1334
|
+
maxRows?: number;
|
|
1335
|
+
/** Maximum allowed columns (default: 20) */
|
|
1336
|
+
maxColumns?: number;
|
|
1337
|
+
/** Additional CSS class */
|
|
1338
|
+
className?: string;
|
|
1339
|
+
/** Additional inline styles */
|
|
1340
|
+
style?: CSSProperties;
|
|
1341
|
+
}
|
|
1342
|
+
/**
|
|
1343
|
+
* InsertTableDialog - Modal for inserting tables with visual grid selector
|
|
1344
|
+
*/
|
|
1345
|
+
declare function InsertTableDialog({ isOpen, onClose, onInsert, maxGridRows, maxGridColumns, maxRows, maxColumns, className, style, }: InsertTableDialogProps): React__default.ReactElement | null;
|
|
1346
|
+
/**
|
|
1347
|
+
* Hook for managing Insert Table dialog state
|
|
1348
|
+
*/
|
|
1349
|
+
declare function useInsertTableDialog(): {
|
|
1350
|
+
isOpen: boolean;
|
|
1351
|
+
open: () => void;
|
|
1352
|
+
close: () => void;
|
|
1353
|
+
toggle: () => void;
|
|
1354
|
+
};
|
|
1355
|
+
/**
|
|
1356
|
+
* Create a default TableConfig
|
|
1357
|
+
*/
|
|
1358
|
+
declare function createDefaultTableConfig(rows?: number, columns?: number): TableConfig;
|
|
1359
|
+
/**
|
|
1360
|
+
* Validate TableConfig
|
|
1361
|
+
*/
|
|
1362
|
+
declare function isValidTableConfig(config: TableConfig, maxRows?: number, maxColumns?: number): boolean;
|
|
1363
|
+
/**
|
|
1364
|
+
* Clamp TableConfig to valid range
|
|
1365
|
+
*/
|
|
1366
|
+
declare function clampTableConfig(config: TableConfig, maxRows?: number, maxColumns?: number): TableConfig;
|
|
1367
|
+
/**
|
|
1368
|
+
* Format table dimensions for display
|
|
1369
|
+
*/
|
|
1370
|
+
declare function formatTableDimensions(config: TableConfig): string;
|
|
1371
|
+
/**
|
|
1372
|
+
* Get common table presets
|
|
1373
|
+
*/
|
|
1374
|
+
declare function getTablePresets(): {
|
|
1375
|
+
label: string;
|
|
1376
|
+
config: TableConfig;
|
|
1377
|
+
}[];
|
|
1378
|
+
|
|
1379
|
+
/**
|
|
1380
|
+
* Insert Image Dialog Component
|
|
1381
|
+
*
|
|
1382
|
+
* Modal dialog for inserting images into the document.
|
|
1383
|
+
* Supports file upload with preview and basic sizing options.
|
|
1384
|
+
*
|
|
1385
|
+
* Features:
|
|
1386
|
+
* - File input for image selection
|
|
1387
|
+
* - Drag and drop support
|
|
1388
|
+
* - Image preview
|
|
1389
|
+
* - Width/height controls with aspect ratio lock
|
|
1390
|
+
* - Alt text input
|
|
1391
|
+
*/
|
|
1392
|
+
|
|
1393
|
+
/**
|
|
1394
|
+
* Image data for insertion
|
|
1395
|
+
*/
|
|
1396
|
+
interface ImageData {
|
|
1397
|
+
/** Base64 data URL or external URL */
|
|
1398
|
+
src: string;
|
|
1399
|
+
/** Image width in pixels */
|
|
1400
|
+
width: number;
|
|
1401
|
+
/** Image height in pixels */
|
|
1402
|
+
height: number;
|
|
1403
|
+
/** Alt text for accessibility */
|
|
1404
|
+
alt?: string;
|
|
1405
|
+
/** Original file name */
|
|
1406
|
+
fileName?: string;
|
|
1407
|
+
/** MIME type */
|
|
1408
|
+
mimeType?: string;
|
|
1409
|
+
}
|
|
1410
|
+
/**
|
|
1411
|
+
* Props for InsertImageDialog
|
|
1412
|
+
*/
|
|
1413
|
+
interface InsertImageDialogProps {
|
|
1414
|
+
/** Whether the dialog is open */
|
|
1415
|
+
isOpen: boolean;
|
|
1416
|
+
/** Callback when dialog is closed */
|
|
1417
|
+
onClose: () => void;
|
|
1418
|
+
/** Callback when image is inserted */
|
|
1419
|
+
onInsert: (data: ImageData) => void;
|
|
1420
|
+
/** Maximum width in pixels (default: 800) */
|
|
1421
|
+
maxWidth?: number;
|
|
1422
|
+
/** Maximum height in pixels (default: 600) */
|
|
1423
|
+
maxHeight?: number;
|
|
1424
|
+
/** Accepted file types (default: image/*) */
|
|
1425
|
+
accept?: string;
|
|
1426
|
+
/** Additional CSS class */
|
|
1427
|
+
className?: string;
|
|
1428
|
+
/** Additional inline styles */
|
|
1429
|
+
style?: CSSProperties;
|
|
1430
|
+
}
|
|
1431
|
+
/**
|
|
1432
|
+
* InsertImageDialog - Modal for inserting images with preview and sizing
|
|
1433
|
+
*/
|
|
1434
|
+
declare function InsertImageDialog({ isOpen, onClose, onInsert, maxWidth, maxHeight, accept, className, style, }: InsertImageDialogProps): React__default.ReactElement | null;
|
|
1435
|
+
/**
|
|
1436
|
+
* Hook for managing Insert Image dialog state
|
|
1437
|
+
*/
|
|
1438
|
+
declare function useInsertImageDialog(): {
|
|
1439
|
+
isOpen: boolean;
|
|
1440
|
+
open: () => void;
|
|
1441
|
+
close: () => void;
|
|
1442
|
+
toggle: () => void;
|
|
1443
|
+
};
|
|
1444
|
+
/**
|
|
1445
|
+
* Check if a file is a valid image
|
|
1446
|
+
*/
|
|
1447
|
+
declare function isValidImageFile(file: File): boolean;
|
|
1448
|
+
/**
|
|
1449
|
+
* Get supported image extensions
|
|
1450
|
+
*/
|
|
1451
|
+
declare function getSupportedImageExtensions(): string[];
|
|
1452
|
+
/**
|
|
1453
|
+
* Get accept string for file input
|
|
1454
|
+
*/
|
|
1455
|
+
declare function getImageAcceptString(): string;
|
|
1456
|
+
/**
|
|
1457
|
+
* Calculate scaled dimensions to fit within bounds
|
|
1458
|
+
*/
|
|
1459
|
+
declare function calculateFitDimensions(originalWidth: number, originalHeight: number, maxWidth: number, maxHeight: number): {
|
|
1460
|
+
width: number;
|
|
1461
|
+
height: number;
|
|
1462
|
+
};
|
|
1463
|
+
/**
|
|
1464
|
+
* Convert data URL to Blob
|
|
1465
|
+
*/
|
|
1466
|
+
declare function dataUrlToBlob(dataUrl: string): Blob;
|
|
1467
|
+
/**
|
|
1468
|
+
* Get image dimensions from a data URL
|
|
1469
|
+
*/
|
|
1470
|
+
declare function getImageDimensions(src: string): Promise<{
|
|
1471
|
+
width: number;
|
|
1472
|
+
height: number;
|
|
1473
|
+
}>;
|
|
1474
|
+
/**
|
|
1475
|
+
* Format file size for display
|
|
1476
|
+
*/
|
|
1477
|
+
declare function formatFileSize(bytes: number): string;
|
|
1478
|
+
|
|
1479
|
+
/**
|
|
1480
|
+
* Insert Symbol Dialog Component
|
|
1481
|
+
*
|
|
1482
|
+
* Modal dialog for inserting special characters and symbols into the document.
|
|
1483
|
+
* Provides categorized symbol picker with search functionality.
|
|
1484
|
+
*
|
|
1485
|
+
* Features:
|
|
1486
|
+
* - Categorized symbol groups
|
|
1487
|
+
* - Recent symbols
|
|
1488
|
+
* - Search functionality
|
|
1489
|
+
* - Unicode character display
|
|
1490
|
+
*/
|
|
1491
|
+
|
|
1492
|
+
/**
|
|
1493
|
+
* Symbol category
|
|
1494
|
+
*/
|
|
1495
|
+
interface SymbolCategory {
|
|
1496
|
+
/** Category name */
|
|
1497
|
+
name: string;
|
|
1498
|
+
/** Display label */
|
|
1499
|
+
label: string;
|
|
1500
|
+
/** Symbols in this category */
|
|
1501
|
+
symbols: string[];
|
|
1502
|
+
}
|
|
1503
|
+
/**
|
|
1504
|
+
* Props for InsertSymbolDialog
|
|
1505
|
+
*/
|
|
1506
|
+
interface InsertSymbolDialogProps {
|
|
1507
|
+
/** Whether the dialog is open */
|
|
1508
|
+
isOpen: boolean;
|
|
1509
|
+
/** Callback when dialog is closed */
|
|
1510
|
+
onClose: () => void;
|
|
1511
|
+
/** Callback when symbol is inserted */
|
|
1512
|
+
onInsert: (symbol: string) => void;
|
|
1513
|
+
/** Recently used symbols */
|
|
1514
|
+
recentSymbols?: string[];
|
|
1515
|
+
/** Additional CSS class */
|
|
1516
|
+
className?: string;
|
|
1517
|
+
/** Additional inline styles */
|
|
1518
|
+
style?: CSSProperties;
|
|
1519
|
+
}
|
|
1520
|
+
/**
|
|
1521
|
+
* Default symbol categories
|
|
1522
|
+
*/
|
|
1523
|
+
declare const SYMBOL_CATEGORIES: SymbolCategory[];
|
|
1524
|
+
/**
|
|
1525
|
+
* InsertSymbolDialog - Modal for inserting special characters
|
|
1526
|
+
*/
|
|
1527
|
+
declare function InsertSymbolDialog({ isOpen, onClose, onInsert, recentSymbols, className, style, }: InsertSymbolDialogProps): React__default.ReactElement | null;
|
|
1528
|
+
/**
|
|
1529
|
+
* Hook for managing Insert Symbol dialog state with recent symbols
|
|
1530
|
+
*/
|
|
1531
|
+
declare function useInsertSymbolDialog(maxRecent?: number): {
|
|
1532
|
+
isOpen: boolean;
|
|
1533
|
+
recentSymbols: string[];
|
|
1534
|
+
open: () => void;
|
|
1535
|
+
close: () => void;
|
|
1536
|
+
toggle: () => void;
|
|
1537
|
+
addRecent: (symbol: string) => void;
|
|
1538
|
+
};
|
|
1539
|
+
/**
|
|
1540
|
+
* Get all symbol categories
|
|
1541
|
+
*/
|
|
1542
|
+
declare function getSymbolCategories(): SymbolCategory[];
|
|
1543
|
+
/**
|
|
1544
|
+
* Get symbols by category name
|
|
1545
|
+
*/
|
|
1546
|
+
declare function getSymbolsByCategory(categoryName: string): string[];
|
|
1547
|
+
/**
|
|
1548
|
+
* Get symbol Unicode info
|
|
1549
|
+
*/
|
|
1550
|
+
declare function getSymbolInfo(symbol: string): {
|
|
1551
|
+
character: string;
|
|
1552
|
+
codePoint: string;
|
|
1553
|
+
decimal: number;
|
|
1554
|
+
hex: string;
|
|
1555
|
+
};
|
|
1556
|
+
/**
|
|
1557
|
+
* Search symbols by query
|
|
1558
|
+
*/
|
|
1559
|
+
declare function searchSymbols(query: string): string[];
|
|
1560
|
+
/**
|
|
1561
|
+
* Get symbol from Unicode code point string
|
|
1562
|
+
*/
|
|
1563
|
+
declare function symbolFromCodePoint(codePointStr: string): string | null;
|
|
1564
|
+
|
|
1565
|
+
export { AlignmentButtons, type AlignmentButtonsProps, ColorPicker, type ColorPickerMode, type ColorPickerProps, ContextMenu, type ContextMenuProps, type DocumentNameProps, EditorToolbar, type EditorToolbarProps, FontPicker, type FontPickerProps, FontSizePicker, type FontSizePickerProps, HorizontalRuler, type HorizontalRulerProps, type ImageData, type IndicatorPosition, type IndicatorVariant, InsertImageDialog, type InsertImageDialogProps, InsertSymbolDialog, type InsertSymbolDialogProps, InsertTableDialog, type InsertTableDialogProps, type LineSpacingOption, LineSpacingPicker, type LineSpacingPickerProps, ListButtons, type ListButtonsProps, LoadingIndicator, type LoadingIndicatorProps, type LoadingOperation, type LoadingSize, type LoadingVariant, type LogoProps, ResponsePreview, type ResponsePreviewProps, type ResponsePreviewState, ResponsiveToolbar, ToolbarGroup as ResponsiveToolbarGroup, type ToolbarGroupProps as ResponsiveToolbarGroupProps, type ResponsiveToolbarProps, SYMBOL_CATEGORIES, type StyleOption, StylePicker, type StylePickerProps, type SymbolCategory, TableAction, TableBorderColorPicker, type TableBorderColorPickerProps, TableBorderPicker, type TableBorderPickerProps, TableBorderWidthPicker, type TableBorderWidthPickerProps, TableCellFillPicker, type TableCellFillPickerProps, type TableConfig, TableContext, TableInsertButtons, type TableInsertButtonsProps, TableMergeButton, type TableMergeButtonProps, TableMoreDropdown, type TableMoreDropdownProps, TableSelection, TableSplitConfig, type TextContextAction, TextContextMenu, type TextContextMenuItem, type TextContextMenuProps, type TitleBarProps, type TitleBarRightProps, Toolbar, ToolbarButton, ToolbarGroup$1 as ToolbarGroup, type ToolbarItem, type ToolbarItemPriority, type ToolbarProps, ToolbarSeparator, UnsavedIndicator, type UnsavedIndicatorProps, type UseLoadingOptions, type UseLoadingReturn, type UseResponsiveToolbarOptions, type UseResponsiveToolbarReturn, type UseTextContextMenuOptions, type UseTextContextMenuReturn, type UseUnsavedChangesOptions, type UseUnsavedChangesReturn, ZoomControl, type ZoomControlProps, addColumn, addRow, calculateFitDimensions, clampTableConfig, createChangeTracker, createDefaultTableConfig, createErrorResponse, createMockResponse, createTableContext, createToolbarItem, createToolbarItems, dataUrlToBlob, delay, deleteColumn, deleteRow, formatFileSize, formatTableDimensions, getActionShortcut, getAllActions, getAllPositions as getAllIndicatorPositions, getAllVariants as getAllIndicatorVariants, getAllLoadingSizes, getAllLoadingVariants, getCellAt, getColumnCount, getDefaultActions, getDefaultTextContextMenuItems, getImageAcceptString, getImageDimensions, getLoadingVariantLabel, getMarginInUnits, getRecommendedPriority, getRulerDimensions, getSupportedImageExtensions, getSymbolCategories, getSymbolInfo as getSymbolUnicodeInfo, getSymbolsByCategory, getTablePresets, getTableSplitCellDialogConfig, getTextActionLabel, getTextActionShortcut, getVariantLabel, isActionAvailable, isTextActionAvailable, isValidImageFile, isValidTableConfig, mergeCells, parseMarginFromUnits, positionToMargin, searchSymbols, splitCell, splitTableCell, symbolFromCodePoint, useContextMenu, useInsertImageDialog, useInsertSymbolDialog, useInsertTableDialog, useLoading, useLoadingOperations, useResponsePreview, useResponsiveToolbar, useTextContextMenu, useUnsavedChanges };
|