@eigenpal/docx-js-editor 0.0.1
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 +21 -0
- package/README.md +191 -0
- package/dist/colorResolver-C-tITrbI.d.cts +1037 -0
- package/dist/colorResolver-Yakhydrt.d.ts +1037 -0
- package/dist/core-plugins.cjs +7131 -0
- package/dist/core-plugins.cjs.map +1 -0
- package/dist/core-plugins.d.cts +27 -0
- package/dist/core-plugins.d.ts +27 -0
- package/dist/core-plugins.js +7102 -0
- package/dist/core-plugins.js.map +1 -0
- package/dist/headless.cjs +10984 -0
- package/dist/headless.cjs.map +1 -0
- package/dist/headless.d.cts +361 -0
- package/dist/headless.d.ts +361 -0
- package/dist/headless.js +10852 -0
- package/dist/headless.js.map +1 -0
- package/dist/index.cjs +45026 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.css +369 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.cts +4579 -0
- package/dist/index.d.ts +4579 -0
- package/dist/index.js +44701 -0
- package/dist/index.js.map +1 -0
- package/dist/mcp-cli.js +9657 -0
- package/dist/mcp-cli.js.map +1 -0
- package/dist/mcp.cjs +8715 -0
- package/dist/mcp.cjs.map +1 -0
- package/dist/mcp.d.cts +155 -0
- package/dist/mcp.d.ts +155 -0
- package/dist/mcp.js +8667 -0
- package/dist/mcp.js.map +1 -0
- package/dist/registry-D3zhko7n.d.ts +165 -0
- package/dist/registry-DeeU0bQB.d.cts +165 -0
- package/dist/styles.css +1 -0
- package/dist/types-BJXChtaM.d.cts +2216 -0
- package/dist/types-BJXChtaM.d.ts +2216 -0
- package/package.json +132 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,4579 @@
|
|
|
1
|
+
import * as prosemirror_view from 'prosemirror-view';
|
|
2
|
+
import { EditorView, DecorationSet } from 'prosemirror-view';
|
|
3
|
+
import * as prosemirror_state from 'prosemirror-state';
|
|
4
|
+
import { EditorState, Command, Plugin, PluginKey } from 'prosemirror-state';
|
|
5
|
+
import * as React$1 from 'react';
|
|
6
|
+
import React__default, { CSSProperties, ReactNode, Component, ErrorInfo } from 'react';
|
|
7
|
+
import { T as TextFormatting, e as Paragraph, f as Table, a1 as SectionProperties, an as HeaderFooter, h as Document, ab as Theme, U as ParagraphFormatting, a2 as SelectionContext, a8 as TableCell, ao as ParagraphAlignment, a4 as Style, A as AIAction, l as AgentResponse, ap as StyleType, aq as BorderSpec, ar as ShadingProperties, R as Run, as as BreakContent, $ as RunContent } from './types-BJXChtaM.js';
|
|
8
|
+
export { i as AIActionRequest, j as AgentCommand, k as AgentContext, m as ApplyStyleCommand, B as BlockContent, at as BookmarkEnd, au as BookmarkStart, C as CorePlugin, q as DeleteTextCommand, D as DocumentBody, r as DocxPackage, E as Endnote, av as Field, aw as FooterReference, F as Footnote, t as FormatTextCommand, ax as HeaderReference, H as Hyperlink, I as Image, u as InsertHyperlinkCommand, v as InsertImageCommand, w as InsertTableCommand, x as InsertTextCommand, L as ListLevel, d as McpSession, M as McpToolDefinition, N as McpToolHandler, O as McpToolResult, Q as NumberingDefinitions, S as ParagraphContext, g as Position, Y as Range, Z as Relationship, _ as ReplaceTextCommand, a3 as SetVariableCommand, ay as Shape, a5 as StyleDefinitions, a7 as SuggestedAction, a9 as TableRow, az as TextBox, aa as TextContent, aA as ThemeColorScheme, aB as ThemeFont, aC as ThemeFontScheme } from './types-BJXChtaM.js';
|
|
9
|
+
import { D as DocumentAgent } from './colorResolver-Yakhydrt.js';
|
|
10
|
+
export { A as AgentContextOptions, C as CreateEmptyDocumentOptions, E as ExtendedSelectionContext, P as ProcessTemplateOptions, e as ProcessTemplateResult, f as SelectionContextOptions, g as blendColors, h as buildExtendedSelectionContext, i as buildSelectionContext, k as colorsEqual, n as createDocumentWithText, o as createEmptyDocument, p as createRgbColor, r as createThemeColor, s as darkenColor, t as emuToPixels, u as emuToTwips, v as executeCommand, w as executeCommands, x as formatPx, y as getAgentContext, z as getContrastingColor, B as getDocumentSummary, J as getTemplateTags, K as halfPointsToPixels, L as isBlack, M as isWhite, N as lightenColor, O as parseColorString, Q as parseDocx, R as pixelsToEmu, U as pixelsToTwips, V as pointsToPixels, X as processTemplate, Z as processTemplateAsBlob, _ as processTemplateDetailed, $ as resolveColor, a0 as resolveHighlightColor, a1 as resolveShadingColor, a2 as serializeDocumentBody, a3 as serializeDocx, a4 as serializeSectionProperties, a5 as twipsToEmu, a6 as twipsToPixels, a7 as validateTemplate } from './colorResolver-Yakhydrt.js';
|
|
11
|
+
import { Node as Node$1 } from 'prosemirror-model';
|
|
12
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
13
|
+
export { P as PluginRegistry, p as pluginRegistry, r as registerPlugins } from './registry-D3zhko7n.js';
|
|
14
|
+
export { docxtemplaterPlugin } from './core-plugins.js';
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* PageNumberIndicator Component
|
|
18
|
+
*
|
|
19
|
+
* Displays the current page number and total page count.
|
|
20
|
+
* Can be used as a floating indicator or status bar element.
|
|
21
|
+
*/
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Position options for the indicator
|
|
25
|
+
*/
|
|
26
|
+
type PageIndicatorPosition = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
|
|
27
|
+
/**
|
|
28
|
+
* Style variant for the indicator
|
|
29
|
+
*/
|
|
30
|
+
type PageIndicatorVariant = 'default' | 'minimal' | 'badge' | 'pill';
|
|
31
|
+
/**
|
|
32
|
+
* Props for PageNumberIndicator
|
|
33
|
+
*/
|
|
34
|
+
interface PageNumberIndicatorProps {
|
|
35
|
+
/** Current page number (1-indexed) */
|
|
36
|
+
currentPage: number;
|
|
37
|
+
/** Total number of pages */
|
|
38
|
+
totalPages: number;
|
|
39
|
+
/** Position of the indicator (default: 'bottom-center') */
|
|
40
|
+
position?: PageIndicatorPosition;
|
|
41
|
+
/** Style variant (default: 'default') */
|
|
42
|
+
variant?: PageIndicatorVariant;
|
|
43
|
+
/** Whether to show as floating overlay (default: true) */
|
|
44
|
+
floating?: boolean;
|
|
45
|
+
/** Whether to show "Page" prefix (default: true) */
|
|
46
|
+
showPrefix?: boolean;
|
|
47
|
+
/** Custom format function for the display text */
|
|
48
|
+
formatText?: (current: number, total: number) => string;
|
|
49
|
+
/** Callback when page number is clicked (for navigation) */
|
|
50
|
+
onClick?: () => void;
|
|
51
|
+
/** Whether the indicator is disabled */
|
|
52
|
+
disabled?: boolean;
|
|
53
|
+
/** Additional CSS class name */
|
|
54
|
+
className?: string;
|
|
55
|
+
/** Additional inline styles */
|
|
56
|
+
style?: CSSProperties;
|
|
57
|
+
/** Custom content (overrides default display) */
|
|
58
|
+
children?: ReactNode;
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* PageNumberIndicator - Displays current page and total pages
|
|
62
|
+
*/
|
|
63
|
+
declare function PageNumberIndicator({ currentPage, totalPages, position, variant, floating, showPrefix, formatText, onClick, disabled, className, style, children, }: PageNumberIndicatorProps): React__default.ReactElement;
|
|
64
|
+
/**
|
|
65
|
+
* Format page number with ordinal suffix (1st, 2nd, 3rd, etc.)
|
|
66
|
+
*/
|
|
67
|
+
declare function formatPageOrdinal(page: number): string;
|
|
68
|
+
/**
|
|
69
|
+
* Create a custom format function
|
|
70
|
+
*/
|
|
71
|
+
declare function createPageFormat(template: string): (current: number, total: number) => string;
|
|
72
|
+
/**
|
|
73
|
+
* Get percentage progress through document
|
|
74
|
+
*/
|
|
75
|
+
declare function getPageProgress(current: number, total: number): number;
|
|
76
|
+
/**
|
|
77
|
+
* Check if at first page
|
|
78
|
+
*/
|
|
79
|
+
declare function isFirstPage(current: number): boolean;
|
|
80
|
+
/**
|
|
81
|
+
* Check if at last page
|
|
82
|
+
*/
|
|
83
|
+
declare function isLastPage(current: number, total: number): boolean;
|
|
84
|
+
/**
|
|
85
|
+
* Calculate which page is visible given scroll position
|
|
86
|
+
*/
|
|
87
|
+
declare function calculateVisiblePage(scrollTop: number, pageHeights: number[], pageGap?: number): number;
|
|
88
|
+
/**
|
|
89
|
+
* Calculate scroll position to center a page
|
|
90
|
+
*/
|
|
91
|
+
declare function calculateScrollToPage(pageNumber: number, pageHeights: number[], containerHeight: number, pageGap?: number): number;
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* PageNavigator Component
|
|
95
|
+
*
|
|
96
|
+
* Provides UI for navigating between pages in a paginated document.
|
|
97
|
+
* Includes:
|
|
98
|
+
* - Previous/Next page buttons
|
|
99
|
+
* - Current page display (clickable to show input)
|
|
100
|
+
* - Page number input for direct navigation
|
|
101
|
+
* - Keyboard navigation support
|
|
102
|
+
*/
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* Position options for the navigator
|
|
106
|
+
*/
|
|
107
|
+
type PageNavigatorPosition = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
|
|
108
|
+
/**
|
|
109
|
+
* Style variant for the navigator
|
|
110
|
+
*/
|
|
111
|
+
type PageNavigatorVariant = 'default' | 'compact' | 'minimal';
|
|
112
|
+
/**
|
|
113
|
+
* Props for PageNavigator
|
|
114
|
+
*/
|
|
115
|
+
interface PageNavigatorProps {
|
|
116
|
+
/** Current page number (1-indexed) */
|
|
117
|
+
currentPage: number;
|
|
118
|
+
/** Total number of pages */
|
|
119
|
+
totalPages: number;
|
|
120
|
+
/** Callback when page navigation is requested */
|
|
121
|
+
onNavigate: (pageNumber: number) => void;
|
|
122
|
+
/** Position of the navigator (default: 'bottom-center') */
|
|
123
|
+
position?: PageNavigatorPosition;
|
|
124
|
+
/** Style variant (default: 'default') */
|
|
125
|
+
variant?: PageNavigatorVariant;
|
|
126
|
+
/** Whether to show as floating overlay (default: true) */
|
|
127
|
+
floating?: boolean;
|
|
128
|
+
/** Whether to show previous/next buttons (default: true) */
|
|
129
|
+
showButtons?: boolean;
|
|
130
|
+
/** Whether the navigator is disabled */
|
|
131
|
+
disabled?: boolean;
|
|
132
|
+
/** Additional CSS class name */
|
|
133
|
+
className?: string;
|
|
134
|
+
/** Additional inline styles */
|
|
135
|
+
style?: CSSProperties;
|
|
136
|
+
}
|
|
137
|
+
/**
|
|
138
|
+
* PageNavigator - Navigation controls for paginated documents
|
|
139
|
+
*/
|
|
140
|
+
declare function PageNavigator({ currentPage, totalPages, onNavigate, position, variant, floating, showButtons, disabled, className, style, }: PageNavigatorProps): React__default.ReactElement;
|
|
141
|
+
/**
|
|
142
|
+
* Calculate page number from keyboard input
|
|
143
|
+
*/
|
|
144
|
+
declare function parsePageInput(input: string): number | null;
|
|
145
|
+
/**
|
|
146
|
+
* Validate page number
|
|
147
|
+
*/
|
|
148
|
+
declare function isValidPageNumber(page: number, totalPages: number): boolean;
|
|
149
|
+
/**
|
|
150
|
+
* Clamp page number to valid range
|
|
151
|
+
*/
|
|
152
|
+
declare function clampPageNumber(page: number, totalPages: number): number;
|
|
153
|
+
/**
|
|
154
|
+
* Get navigation info for keyboard shortcuts
|
|
155
|
+
*/
|
|
156
|
+
declare function getNavigationShortcuts(): Array<{
|
|
157
|
+
key: string;
|
|
158
|
+
description: string;
|
|
159
|
+
}>;
|
|
160
|
+
/**
|
|
161
|
+
* Format page range for display
|
|
162
|
+
*/
|
|
163
|
+
declare function formatPageRange$1(start: number, end: number, total: number): string;
|
|
164
|
+
/**
|
|
165
|
+
* Calculate progress percentage
|
|
166
|
+
*/
|
|
167
|
+
declare function calculateProgress(current: number, total: number): number;
|
|
168
|
+
|
|
169
|
+
/**
|
|
170
|
+
* Line Breaker
|
|
171
|
+
*
|
|
172
|
+
* Breaks paragraphs into lines based on available width.
|
|
173
|
+
* Handles:
|
|
174
|
+
* - Word boundary line breaking
|
|
175
|
+
* - Multiple runs with different font sizes
|
|
176
|
+
* - Tab stops and their alignment
|
|
177
|
+
* - Non-breaking spaces and hyphens
|
|
178
|
+
* - Soft hyphens
|
|
179
|
+
*/
|
|
180
|
+
|
|
181
|
+
/**
|
|
182
|
+
* A fragment of content that can't be broken (word or inline element)
|
|
183
|
+
*/
|
|
184
|
+
interface LineFragment {
|
|
185
|
+
/** Type of fragment */
|
|
186
|
+
type: 'text' | 'tab' | 'break' | 'image' | 'field' | 'symbol' | 'space';
|
|
187
|
+
/** The content (text for text fragments) */
|
|
188
|
+
content: string;
|
|
189
|
+
/** Width in pixels */
|
|
190
|
+
width: number;
|
|
191
|
+
/** Height in pixels */
|
|
192
|
+
height: number;
|
|
193
|
+
/** Baseline from top in pixels */
|
|
194
|
+
baseline: number;
|
|
195
|
+
/** Source run index */
|
|
196
|
+
runIndex: number;
|
|
197
|
+
/** Source content index within run */
|
|
198
|
+
contentIndex: number;
|
|
199
|
+
/** Character offset within text content (for text fragments) */
|
|
200
|
+
charOffset?: number;
|
|
201
|
+
/** Character count (for text fragments) */
|
|
202
|
+
charCount?: number;
|
|
203
|
+
/** Text formatting applied */
|
|
204
|
+
formatting?: TextFormatting;
|
|
205
|
+
/** Whether this is a break point */
|
|
206
|
+
canBreakAfter: boolean;
|
|
207
|
+
/** Whether this is a non-breaking element */
|
|
208
|
+
nonBreaking?: boolean;
|
|
209
|
+
/** Tab stop position (for tabs) */
|
|
210
|
+
tabStopPosition?: number;
|
|
211
|
+
}
|
|
212
|
+
/**
|
|
213
|
+
* A line of formatted text
|
|
214
|
+
*/
|
|
215
|
+
interface Line {
|
|
216
|
+
/** Fragments on this line */
|
|
217
|
+
fragments: LineFragment[];
|
|
218
|
+
/** Total width of the line */
|
|
219
|
+
width: number;
|
|
220
|
+
/** Height of the line (max of all fragments) */
|
|
221
|
+
height: number;
|
|
222
|
+
/** Baseline position from top */
|
|
223
|
+
baseline: number;
|
|
224
|
+
/** Y position from top of paragraph */
|
|
225
|
+
y: number;
|
|
226
|
+
/** Whether this is the last line of the paragraph */
|
|
227
|
+
isLastLine: boolean;
|
|
228
|
+
/** Whether this line ends with a hard break */
|
|
229
|
+
hasHardBreak: boolean;
|
|
230
|
+
/** Line number (0-indexed within paragraph) */
|
|
231
|
+
lineNumber: number;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
/**
|
|
235
|
+
* Page Layout Engine
|
|
236
|
+
*
|
|
237
|
+
* Distributes document content across pages based on:
|
|
238
|
+
* - Page size and margins
|
|
239
|
+
* - Explicit page breaks
|
|
240
|
+
* - Natural page breaks (content overflow)
|
|
241
|
+
* - Headers and footers
|
|
242
|
+
* - Keep-with-next, keep-lines-together constraints
|
|
243
|
+
*/
|
|
244
|
+
|
|
245
|
+
/**
|
|
246
|
+
* A laid out page
|
|
247
|
+
*/
|
|
248
|
+
interface Page {
|
|
249
|
+
/** Page number (1-indexed) */
|
|
250
|
+
pageNumber: number;
|
|
251
|
+
/** Section this page belongs to */
|
|
252
|
+
sectionIndex: number;
|
|
253
|
+
/** Section properties for this page */
|
|
254
|
+
sectionProps: SectionProperties;
|
|
255
|
+
/** Content blocks on this page */
|
|
256
|
+
content: PageContent[];
|
|
257
|
+
/** Header for this page (if any) */
|
|
258
|
+
header: HeaderFooter | null;
|
|
259
|
+
/** Footer for this page (if any) */
|
|
260
|
+
footer: HeaderFooter | null;
|
|
261
|
+
/** Whether this is the first page of its section */
|
|
262
|
+
isFirstPageOfSection: boolean;
|
|
263
|
+
/** Whether this is the last page of the document */
|
|
264
|
+
isLastPage: boolean;
|
|
265
|
+
/** Page width in pixels */
|
|
266
|
+
widthPx: number;
|
|
267
|
+
/** Page height in pixels */
|
|
268
|
+
heightPx: number;
|
|
269
|
+
/** Content area width in pixels */
|
|
270
|
+
contentWidthPx: number;
|
|
271
|
+
/** Content area height in pixels */
|
|
272
|
+
contentHeightPx: number;
|
|
273
|
+
/** Content area top offset */
|
|
274
|
+
contentTopPx: number;
|
|
275
|
+
/** Content area left offset */
|
|
276
|
+
contentLeftPx: number;
|
|
277
|
+
}
|
|
278
|
+
/**
|
|
279
|
+
* Content positioned on a page
|
|
280
|
+
*/
|
|
281
|
+
interface PageContent {
|
|
282
|
+
/** Type of content */
|
|
283
|
+
type: 'paragraph' | 'table';
|
|
284
|
+
/** The original block */
|
|
285
|
+
block: Paragraph | Table;
|
|
286
|
+
/** Block index in the document */
|
|
287
|
+
blockIndex: number;
|
|
288
|
+
/** Y position on the page (relative to content area) */
|
|
289
|
+
y: number;
|
|
290
|
+
/** Height of this content */
|
|
291
|
+
height: number;
|
|
292
|
+
/** Whether this block continues from previous page */
|
|
293
|
+
isContinuation: boolean;
|
|
294
|
+
/** Whether this block continues on next page */
|
|
295
|
+
continuesOnNextPage: boolean;
|
|
296
|
+
/** Lines for paragraphs (if laid out) */
|
|
297
|
+
lines?: Line[];
|
|
298
|
+
/** First line index if continuation */
|
|
299
|
+
startLineIndex?: number;
|
|
300
|
+
}
|
|
301
|
+
/**
|
|
302
|
+
* Result of page layout
|
|
303
|
+
*/
|
|
304
|
+
interface PageLayoutResult {
|
|
305
|
+
/** All pages */
|
|
306
|
+
pages: Page[];
|
|
307
|
+
/** Total page count */
|
|
308
|
+
totalPages: number;
|
|
309
|
+
/** Page number field values by location */
|
|
310
|
+
pageNumberFields?: Map<string, number>;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
/**
|
|
314
|
+
* PrintPreview Component
|
|
315
|
+
*
|
|
316
|
+
* Provides print preview functionality with:
|
|
317
|
+
* - Print-optimized rendering of document pages
|
|
318
|
+
* - Browser print dialog trigger
|
|
319
|
+
* - Print-specific CSS styles
|
|
320
|
+
* - Page scale adjustment for printing
|
|
321
|
+
*/
|
|
322
|
+
|
|
323
|
+
/**
|
|
324
|
+
* Print options
|
|
325
|
+
*/
|
|
326
|
+
interface PrintOptions {
|
|
327
|
+
/** Whether to include headers */
|
|
328
|
+
includeHeaders?: boolean;
|
|
329
|
+
/** Whether to include footers */
|
|
330
|
+
includeFooters?: boolean;
|
|
331
|
+
/** Whether to include page numbers */
|
|
332
|
+
includePageNumbers?: boolean;
|
|
333
|
+
/** Page range to print (null = all) */
|
|
334
|
+
pageRange?: {
|
|
335
|
+
start: number;
|
|
336
|
+
end: number;
|
|
337
|
+
} | null;
|
|
338
|
+
/** Scale factor for printing (1.0 = 100%) */
|
|
339
|
+
scale?: number;
|
|
340
|
+
/** Whether to show background colors */
|
|
341
|
+
printBackground?: boolean;
|
|
342
|
+
/** Margins mode */
|
|
343
|
+
margins?: 'default' | 'none' | 'minimum';
|
|
344
|
+
}
|
|
345
|
+
/**
|
|
346
|
+
* PrintPreview props
|
|
347
|
+
*/
|
|
348
|
+
interface PrintPreviewProps {
|
|
349
|
+
/** Document to print */
|
|
350
|
+
document: Document;
|
|
351
|
+
/** Theme for color resolution */
|
|
352
|
+
theme?: Theme | null;
|
|
353
|
+
/** Print options */
|
|
354
|
+
options?: PrintOptions;
|
|
355
|
+
/** Whether the preview is open */
|
|
356
|
+
isOpen: boolean;
|
|
357
|
+
/** Callback when preview is closed */
|
|
358
|
+
onClose: () => void;
|
|
359
|
+
/** Callback when print is triggered */
|
|
360
|
+
onPrint?: () => void;
|
|
361
|
+
/** Render function for paragraphs */
|
|
362
|
+
renderParagraph?: (paragraph: Paragraph, index: number, pageContent: PageContent) => ReactNode;
|
|
363
|
+
/** Render function for tables */
|
|
364
|
+
renderTable?: (table: Table, index: number, pageContent: PageContent) => ReactNode;
|
|
365
|
+
/** Render function for headers */
|
|
366
|
+
renderHeader?: (header: HeaderFooter, pageNumber: number, totalPages: number) => ReactNode;
|
|
367
|
+
/** Render function for footers */
|
|
368
|
+
renderFooter?: (footer: HeaderFooter, pageNumber: number, totalPages: number) => ReactNode;
|
|
369
|
+
}
|
|
370
|
+
/**
|
|
371
|
+
* PrintButton props
|
|
372
|
+
*/
|
|
373
|
+
interface PrintButtonProps {
|
|
374
|
+
/** Callback when print is triggered */
|
|
375
|
+
onPrint: () => void;
|
|
376
|
+
/** Whether the button is disabled */
|
|
377
|
+
disabled?: boolean;
|
|
378
|
+
/** Button label */
|
|
379
|
+
label?: string;
|
|
380
|
+
/** Additional CSS class */
|
|
381
|
+
className?: string;
|
|
382
|
+
/** Additional inline styles */
|
|
383
|
+
style?: CSSProperties;
|
|
384
|
+
/** Show icon */
|
|
385
|
+
showIcon?: boolean;
|
|
386
|
+
/** Compact mode */
|
|
387
|
+
compact?: boolean;
|
|
388
|
+
}
|
|
389
|
+
/**
|
|
390
|
+
* PrintPreview - Modal showing print-optimized document view
|
|
391
|
+
*/
|
|
392
|
+
declare function PrintPreview({ document: doc, theme, options, isOpen, onClose, onPrint, renderParagraph, renderTable, renderHeader, renderFooter, }: PrintPreviewProps): React__default.ReactElement | null;
|
|
393
|
+
/**
|
|
394
|
+
* PrintButton - Standalone print button for toolbar
|
|
395
|
+
*/
|
|
396
|
+
declare function PrintButton({ onPrint, disabled, label, className, style, showIcon, compact, }: PrintButtonProps): React__default.ReactElement;
|
|
397
|
+
/**
|
|
398
|
+
* PrintStyles - Injects print-specific CSS
|
|
399
|
+
*/
|
|
400
|
+
declare function PrintStyles(): React__default.ReactElement;
|
|
401
|
+
/**
|
|
402
|
+
* Trigger browser print dialog for the current document
|
|
403
|
+
*/
|
|
404
|
+
declare function triggerPrint(): void;
|
|
405
|
+
/**
|
|
406
|
+
* Create print-optimized document view in a new window
|
|
407
|
+
*/
|
|
408
|
+
declare function openPrintWindow(title: string | undefined, content: string): Window | null;
|
|
409
|
+
/**
|
|
410
|
+
* Get default print options
|
|
411
|
+
*/
|
|
412
|
+
declare function getDefaultPrintOptions(): PrintOptions;
|
|
413
|
+
/**
|
|
414
|
+
* Create page range from string (e.g., "1-5", "3", "1,3,5")
|
|
415
|
+
*/
|
|
416
|
+
declare function parsePageRange(input: string, maxPages: number): {
|
|
417
|
+
start: number;
|
|
418
|
+
end: number;
|
|
419
|
+
} | null;
|
|
420
|
+
/**
|
|
421
|
+
* Format page range for display
|
|
422
|
+
*/
|
|
423
|
+
declare function formatPageRange(range: {
|
|
424
|
+
start: number;
|
|
425
|
+
end: number;
|
|
426
|
+
} | null, totalPages: number): string;
|
|
427
|
+
/**
|
|
428
|
+
* Check if browser supports good print functionality
|
|
429
|
+
*/
|
|
430
|
+
declare function isPrintSupported(): boolean;
|
|
431
|
+
|
|
432
|
+
/**
|
|
433
|
+
* Selection state for toolbar integration
|
|
434
|
+
*/
|
|
435
|
+
interface SelectionState {
|
|
436
|
+
/** Whether there's an active selection (not just cursor) */
|
|
437
|
+
hasSelection: boolean;
|
|
438
|
+
/** Whether selection spans multiple paragraphs */
|
|
439
|
+
isMultiParagraph: boolean;
|
|
440
|
+
/** Current text formatting at selection/cursor */
|
|
441
|
+
textFormatting: TextFormatting;
|
|
442
|
+
/** Current paragraph formatting */
|
|
443
|
+
paragraphFormatting: ParagraphFormatting;
|
|
444
|
+
/** Current paragraph style ID (e.g., 'Heading1', 'Normal') */
|
|
445
|
+
styleId: string | null;
|
|
446
|
+
/** Start paragraph index */
|
|
447
|
+
startParagraphIndex: number;
|
|
448
|
+
/** End paragraph index */
|
|
449
|
+
endParagraphIndex: number;
|
|
450
|
+
}
|
|
451
|
+
/**
|
|
452
|
+
* Ref interface for external control
|
|
453
|
+
*/
|
|
454
|
+
interface ProseMirrorEditorRef {
|
|
455
|
+
/** Focus the editor */
|
|
456
|
+
focus: () => void;
|
|
457
|
+
/** Blur the editor */
|
|
458
|
+
blur: () => void;
|
|
459
|
+
/** Get the current ProseMirror state */
|
|
460
|
+
getState: () => EditorState | null;
|
|
461
|
+
/** Get the current ProseMirror view */
|
|
462
|
+
getView: () => EditorView | null;
|
|
463
|
+
/** Undo the last change */
|
|
464
|
+
undo: () => boolean;
|
|
465
|
+
/** Redo the last undone change */
|
|
466
|
+
redo: () => boolean;
|
|
467
|
+
/** Check if undo is available */
|
|
468
|
+
canUndo: () => boolean;
|
|
469
|
+
/** Check if redo is available */
|
|
470
|
+
canRedo: () => boolean;
|
|
471
|
+
/** Execute a ProseMirror command */
|
|
472
|
+
executeCommand: (command: Command) => boolean;
|
|
473
|
+
/** Toggle bold mark */
|
|
474
|
+
toggleBold: () => boolean;
|
|
475
|
+
/** Toggle italic mark */
|
|
476
|
+
toggleItalic: () => boolean;
|
|
477
|
+
/** Toggle underline mark */
|
|
478
|
+
toggleUnderline: () => boolean;
|
|
479
|
+
/** Get the current Document from PM state */
|
|
480
|
+
getDocument: () => Document | null;
|
|
481
|
+
/** Get selection context for AI features */
|
|
482
|
+
getSelectionContext: () => SelectionContext | null;
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
/**
|
|
486
|
+
* Generic Plugin Interface for the DOCX Editor
|
|
487
|
+
*
|
|
488
|
+
* This module defines the EditorPlugin interface that allows
|
|
489
|
+
* external plugins to integrate with the ProseMirror-based editor.
|
|
490
|
+
*/
|
|
491
|
+
|
|
492
|
+
/**
|
|
493
|
+
* Coordinates returned by position lookup in the rendered DOM.
|
|
494
|
+
*/
|
|
495
|
+
interface PositionCoordinates {
|
|
496
|
+
x: number;
|
|
497
|
+
y: number;
|
|
498
|
+
height: number;
|
|
499
|
+
}
|
|
500
|
+
/**
|
|
501
|
+
* Context for accessing the rendered DOM in PagedEditor.
|
|
502
|
+
*
|
|
503
|
+
* This interface provides DOM-based position mapping that works with
|
|
504
|
+
* the LayoutPainter output (visible pages) rather than the hidden
|
|
505
|
+
* ProseMirror editor. Use this for rendering overlays, annotations,
|
|
506
|
+
* and other visual elements that need to be positioned relative to
|
|
507
|
+
* the actual rendered content.
|
|
508
|
+
*
|
|
509
|
+
* The rendered DOM uses data-pm-start/data-pm-end attributes on spans
|
|
510
|
+
* to map between ProseMirror positions and DOM elements.
|
|
511
|
+
*/
|
|
512
|
+
interface RenderedDomContext {
|
|
513
|
+
/** The container element holding all rendered pages. */
|
|
514
|
+
pagesContainer: HTMLElement;
|
|
515
|
+
/**
|
|
516
|
+
* Get pixel coordinates for a ProseMirror position in the rendered DOM.
|
|
517
|
+
* Returns null if the position cannot be found.
|
|
518
|
+
*
|
|
519
|
+
* @param pmPos - ProseMirror document position
|
|
520
|
+
* @returns Coordinates relative to the pages container, or null
|
|
521
|
+
*/
|
|
522
|
+
getCoordinatesForPosition(pmPos: number): PositionCoordinates | null;
|
|
523
|
+
/**
|
|
524
|
+
* Find DOM elements that overlap with a ProseMirror position range.
|
|
525
|
+
* Useful for highlighting or overlaying content.
|
|
526
|
+
*
|
|
527
|
+
* @param from - Start ProseMirror position
|
|
528
|
+
* @param to - End ProseMirror position
|
|
529
|
+
* @returns Array of DOM elements that intersect with the range
|
|
530
|
+
*/
|
|
531
|
+
findElementsForRange(from: number, to: number): Element[];
|
|
532
|
+
/**
|
|
533
|
+
* Get bounding rectangles for a range of text, accounting for line wraps.
|
|
534
|
+
* Returns rects relative to the pages container.
|
|
535
|
+
*
|
|
536
|
+
* @param from - Start ProseMirror position
|
|
537
|
+
* @param to - End ProseMirror position
|
|
538
|
+
* @returns Array of DOMRect-like objects for the range
|
|
539
|
+
*/
|
|
540
|
+
getRectsForRange(from: number, to: number): Array<{
|
|
541
|
+
x: number;
|
|
542
|
+
y: number;
|
|
543
|
+
width: number;
|
|
544
|
+
height: number;
|
|
545
|
+
}>;
|
|
546
|
+
/** Current zoom level (1 = 100%). */
|
|
547
|
+
zoom: number;
|
|
548
|
+
/**
|
|
549
|
+
* Offset of the pages container from its parent viewport.
|
|
550
|
+
* Use this to adjust coordinates when rendering overlays in the viewport
|
|
551
|
+
* container rather than directly in the pages container.
|
|
552
|
+
*/
|
|
553
|
+
getContainerOffset(): {
|
|
554
|
+
x: number;
|
|
555
|
+
y: number;
|
|
556
|
+
};
|
|
557
|
+
}
|
|
558
|
+
/**
|
|
559
|
+
* Props passed to plugin panel components.
|
|
560
|
+
*/
|
|
561
|
+
interface PluginPanelProps<TState = unknown> {
|
|
562
|
+
/** Current ProseMirror editor view */
|
|
563
|
+
editorView: EditorView | null;
|
|
564
|
+
/** Current ProseMirror document */
|
|
565
|
+
doc: Node$1 | null;
|
|
566
|
+
/** Scroll editor to a specific position */
|
|
567
|
+
scrollToPosition: (pos: number) => void;
|
|
568
|
+
/** Select a range in the editor */
|
|
569
|
+
selectRange: (from: number, to: number) => void;
|
|
570
|
+
/** Plugin-specific state (managed by the plugin) */
|
|
571
|
+
pluginState: TState;
|
|
572
|
+
/** Width of the panel in pixels */
|
|
573
|
+
panelWidth: number;
|
|
574
|
+
/**
|
|
575
|
+
* Context for the rendered DOM (LayoutPainter output).
|
|
576
|
+
* Use this for positioning annotations relative to the visible pages.
|
|
577
|
+
* May be null if layout hasn't completed yet.
|
|
578
|
+
*/
|
|
579
|
+
renderedDomContext: RenderedDomContext | null;
|
|
580
|
+
}
|
|
581
|
+
/**
|
|
582
|
+
* Configuration for plugin panel rendering.
|
|
583
|
+
*/
|
|
584
|
+
interface PanelConfig {
|
|
585
|
+
/** Where to render the panel */
|
|
586
|
+
position: 'left' | 'right' | 'bottom';
|
|
587
|
+
/** Default width/height of the panel */
|
|
588
|
+
defaultSize: number;
|
|
589
|
+
/** Minimum size */
|
|
590
|
+
minSize?: number;
|
|
591
|
+
/** Maximum size */
|
|
592
|
+
maxSize?: number;
|
|
593
|
+
/** Whether the panel is resizable */
|
|
594
|
+
resizable?: boolean;
|
|
595
|
+
/** Whether the panel can be collapsed */
|
|
596
|
+
collapsible?: boolean;
|
|
597
|
+
/** Initial collapsed state */
|
|
598
|
+
defaultCollapsed?: boolean;
|
|
599
|
+
}
|
|
600
|
+
/**
|
|
601
|
+
* Generic interface for editor plugins.
|
|
602
|
+
*
|
|
603
|
+
* Implement this interface to create custom plugins that can:
|
|
604
|
+
* - Add ProseMirror plugins (decorations, keymaps, etc.)
|
|
605
|
+
* - Render panels alongside the document
|
|
606
|
+
* - React to editor state changes
|
|
607
|
+
* - Inject custom styles
|
|
608
|
+
*
|
|
609
|
+
* @typeParam TState - The type of plugin-specific state
|
|
610
|
+
*/
|
|
611
|
+
interface EditorPlugin<TState = any> {
|
|
612
|
+
/** Unique plugin identifier */
|
|
613
|
+
id: string;
|
|
614
|
+
/** Display name for the plugin */
|
|
615
|
+
name: string;
|
|
616
|
+
/**
|
|
617
|
+
* ProseMirror plugins to register with the editor.
|
|
618
|
+
* These are merged with the editor's internal plugins.
|
|
619
|
+
*/
|
|
620
|
+
proseMirrorPlugins?: Plugin[];
|
|
621
|
+
/**
|
|
622
|
+
* React component to render in the annotation panel area.
|
|
623
|
+
* Receives editor state and callbacks for interaction.
|
|
624
|
+
*/
|
|
625
|
+
Panel?: React.ComponentType<PluginPanelProps<TState>>;
|
|
626
|
+
/**
|
|
627
|
+
* Configuration for the panel (position, size, etc.)
|
|
628
|
+
*/
|
|
629
|
+
panelConfig?: PanelConfig;
|
|
630
|
+
/**
|
|
631
|
+
* Called when the editor state changes.
|
|
632
|
+
* Use this to update plugin-specific state based on document changes.
|
|
633
|
+
*
|
|
634
|
+
* @param view - The current ProseMirror editor view
|
|
635
|
+
* @returns The new plugin state, or undefined to keep existing state
|
|
636
|
+
*/
|
|
637
|
+
onStateChange?: (view: EditorView) => TState | undefined;
|
|
638
|
+
/**
|
|
639
|
+
* Initialize plugin state when the plugin is first loaded.
|
|
640
|
+
*
|
|
641
|
+
* @param view - The ProseMirror editor view (may be null initially)
|
|
642
|
+
* @returns Initial plugin state
|
|
643
|
+
*/
|
|
644
|
+
initialize?: (view: EditorView | null) => TState;
|
|
645
|
+
/**
|
|
646
|
+
* Called when the plugin is being destroyed.
|
|
647
|
+
* Use this for cleanup (subscriptions, timers, etc.)
|
|
648
|
+
*/
|
|
649
|
+
destroy?: () => void;
|
|
650
|
+
/**
|
|
651
|
+
* CSS styles to inject for this plugin.
|
|
652
|
+
* Can be a string of CSS or a URL to a stylesheet.
|
|
653
|
+
*/
|
|
654
|
+
styles?: string;
|
|
655
|
+
/**
|
|
656
|
+
* Render an overlay on top of the rendered pages.
|
|
657
|
+
* Use this for highlights, annotations, or other visual elements
|
|
658
|
+
* that need to be positioned relative to the document content.
|
|
659
|
+
*
|
|
660
|
+
* The overlay is rendered inside the viewport, positioned absolutely
|
|
661
|
+
* over the pages container.
|
|
662
|
+
*
|
|
663
|
+
* @param context - The rendered DOM context for position lookup
|
|
664
|
+
* @param state - Current plugin state
|
|
665
|
+
* @param editorView - The editor view for dispatching transactions
|
|
666
|
+
* @returns React node to render as overlay, or null
|
|
667
|
+
*/
|
|
668
|
+
renderOverlay?: (context: RenderedDomContext, state: TState, editorView: EditorView | null) => ReactNode;
|
|
669
|
+
}
|
|
670
|
+
/**
|
|
671
|
+
* Context value provided to plugins and panels.
|
|
672
|
+
*/
|
|
673
|
+
interface PluginContext {
|
|
674
|
+
/** All registered plugins */
|
|
675
|
+
plugins: EditorPlugin[];
|
|
676
|
+
/** Current editor view */
|
|
677
|
+
editorView: EditorView | null;
|
|
678
|
+
/** Set the editor view (called by editor on mount) */
|
|
679
|
+
setEditorView: (view: EditorView | null) => void;
|
|
680
|
+
/** Get plugin state by plugin ID */
|
|
681
|
+
getPluginState: <T>(pluginId: string) => T | undefined;
|
|
682
|
+
/** Update plugin state */
|
|
683
|
+
setPluginState: <T>(pluginId: string, state: T) => void;
|
|
684
|
+
/** Scroll to a position in the editor */
|
|
685
|
+
scrollToPosition: (pos: number) => void;
|
|
686
|
+
/** Select a range in the editor */
|
|
687
|
+
selectRange: (from: number, to: number) => void;
|
|
688
|
+
}
|
|
689
|
+
/**
|
|
690
|
+
* Props for the PluginHost component.
|
|
691
|
+
*/
|
|
692
|
+
interface PluginHostProps {
|
|
693
|
+
/** Plugins to enable */
|
|
694
|
+
plugins: EditorPlugin[];
|
|
695
|
+
/** The editor component (passed as child) */
|
|
696
|
+
children: React.ReactElement;
|
|
697
|
+
/** Class name for the host container */
|
|
698
|
+
className?: string;
|
|
699
|
+
}
|
|
700
|
+
/**
|
|
701
|
+
* Ref interface for the PluginHost component.
|
|
702
|
+
*/
|
|
703
|
+
interface PluginHostRef {
|
|
704
|
+
/** Get plugin state by plugin ID */
|
|
705
|
+
getPluginState: <T>(pluginId: string) => T | undefined;
|
|
706
|
+
/** Update plugin state for a plugin */
|
|
707
|
+
setPluginState: <T>(pluginId: string, state: T) => void;
|
|
708
|
+
/** Get the current editor view */
|
|
709
|
+
getEditorView: () => EditorView | null;
|
|
710
|
+
/** Force a refresh of all plugin states */
|
|
711
|
+
refreshPluginStates: () => void;
|
|
712
|
+
}
|
|
713
|
+
|
|
714
|
+
/**
|
|
715
|
+
* DocxEditor props
|
|
716
|
+
*/
|
|
717
|
+
interface DocxEditorProps {
|
|
718
|
+
/** Document buffer (ArrayBuffer from file read) */
|
|
719
|
+
documentBuffer?: ArrayBuffer | null;
|
|
720
|
+
/** Pre-parsed document (alternative to documentBuffer) */
|
|
721
|
+
document?: Document | null;
|
|
722
|
+
/** Callback when document is saved */
|
|
723
|
+
onSave?: (buffer: ArrayBuffer) => void;
|
|
724
|
+
/** Callback when document changes */
|
|
725
|
+
onChange?: (document: Document) => void;
|
|
726
|
+
/** Callback when selection changes */
|
|
727
|
+
onSelectionChange?: (state: SelectionState | null) => void;
|
|
728
|
+
/** Callback on error */
|
|
729
|
+
onError?: (error: Error) => void;
|
|
730
|
+
/** Callback when fonts are loaded */
|
|
731
|
+
onFontsLoaded?: () => void;
|
|
732
|
+
/** External ProseMirror plugins (from PluginHost) */
|
|
733
|
+
externalPlugins?: prosemirror_state.Plugin[];
|
|
734
|
+
/** Callback when editor view is ready (for PluginHost) */
|
|
735
|
+
onEditorViewReady?: (view: prosemirror_view.EditorView) => void;
|
|
736
|
+
/** Theme for styling */
|
|
737
|
+
theme?: Theme | null;
|
|
738
|
+
/** Whether to show toolbar (default: true) */
|
|
739
|
+
showToolbar?: boolean;
|
|
740
|
+
/** Whether to show variable panel (default: true) */
|
|
741
|
+
showVariablePanel?: boolean;
|
|
742
|
+
/** Whether to show zoom control (default: true) */
|
|
743
|
+
showZoomControl?: boolean;
|
|
744
|
+
/** Whether to show page number indicator (default: true) */
|
|
745
|
+
showPageNumbers?: boolean;
|
|
746
|
+
/** Whether to enable interactive page navigation (default: true) */
|
|
747
|
+
enablePageNavigation?: boolean;
|
|
748
|
+
/** Position of page number indicator (default: 'bottom-center') */
|
|
749
|
+
pageNumberPosition?: PageIndicatorPosition | PageNavigatorPosition;
|
|
750
|
+
/** Variant of page number indicator (default: 'default') */
|
|
751
|
+
pageNumberVariant?: PageIndicatorVariant | PageNavigatorVariant;
|
|
752
|
+
/** Whether to show page margin guides/boundaries (default: false) */
|
|
753
|
+
showMarginGuides?: boolean;
|
|
754
|
+
/** Color for margin guides (default: '#c0c0c0') */
|
|
755
|
+
marginGuideColor?: string;
|
|
756
|
+
/** Whether to show horizontal ruler (default: false) */
|
|
757
|
+
showRuler?: boolean;
|
|
758
|
+
/** Unit for ruler display (default: 'inch') */
|
|
759
|
+
rulerUnit?: 'inch' | 'cm';
|
|
760
|
+
/** Initial zoom level (default: 1.0) */
|
|
761
|
+
initialZoom?: number;
|
|
762
|
+
/** Whether the editor is read-only */
|
|
763
|
+
readOnly?: boolean;
|
|
764
|
+
/** Custom toolbar actions */
|
|
765
|
+
toolbarExtra?: ReactNode;
|
|
766
|
+
/** Variable panel position (default: 'right') */
|
|
767
|
+
variablePanelPosition?: 'left' | 'right';
|
|
768
|
+
/** Variable descriptions */
|
|
769
|
+
variableDescriptions?: Record<string, string>;
|
|
770
|
+
/** Additional CSS class name */
|
|
771
|
+
className?: string;
|
|
772
|
+
/** Additional inline styles */
|
|
773
|
+
style?: CSSProperties;
|
|
774
|
+
/** Placeholder when no document */
|
|
775
|
+
placeholder?: ReactNode;
|
|
776
|
+
/** Loading indicator */
|
|
777
|
+
loadingIndicator?: ReactNode;
|
|
778
|
+
/** Whether to show print button in toolbar (default: true) */
|
|
779
|
+
showPrintButton?: boolean;
|
|
780
|
+
/** Print options for print preview */
|
|
781
|
+
printOptions?: PrintOptions;
|
|
782
|
+
/** Callback when print is triggered */
|
|
783
|
+
onPrint?: () => void;
|
|
784
|
+
/** Callback when content is copied */
|
|
785
|
+
onCopy?: () => void;
|
|
786
|
+
/** Callback when content is cut */
|
|
787
|
+
onCut?: () => void;
|
|
788
|
+
/** Callback when content is pasted */
|
|
789
|
+
onPaste?: () => void;
|
|
790
|
+
/**
|
|
791
|
+
* Use paginated editor mode (experimental).
|
|
792
|
+
* When enabled, shows true paginated editing with visible page breaks.
|
|
793
|
+
* When disabled (default), uses standard ProseMirror editor.
|
|
794
|
+
*/
|
|
795
|
+
usePaginatedEditor?: boolean;
|
|
796
|
+
/**
|
|
797
|
+
* Callback when rendered DOM context is ready (for plugin overlays).
|
|
798
|
+
* Used by PluginHost to get access to the rendered page DOM for positioning.
|
|
799
|
+
*/
|
|
800
|
+
onRenderedDomContextReady?: (context: RenderedDomContext) => void;
|
|
801
|
+
/**
|
|
802
|
+
* Plugin overlays to render inside the editor viewport.
|
|
803
|
+
* Passed from PluginHost to render plugin-specific overlays.
|
|
804
|
+
*/
|
|
805
|
+
pluginOverlays?: ReactNode;
|
|
806
|
+
}
|
|
807
|
+
/**
|
|
808
|
+
* DocxEditor ref interface
|
|
809
|
+
*/
|
|
810
|
+
interface DocxEditorRef {
|
|
811
|
+
/** Get the DocumentAgent for programmatic access */
|
|
812
|
+
getAgent: () => DocumentAgent | null;
|
|
813
|
+
/** Get the current document */
|
|
814
|
+
getDocument: () => Document | null;
|
|
815
|
+
/** Get the ProseMirror editor ref */
|
|
816
|
+
getEditorRef: () => ProseMirrorEditorRef | null;
|
|
817
|
+
/** Save the document to buffer */
|
|
818
|
+
save: () => Promise<ArrayBuffer | null>;
|
|
819
|
+
/** Set zoom level */
|
|
820
|
+
setZoom: (zoom: number) => void;
|
|
821
|
+
/** Get current zoom level */
|
|
822
|
+
getZoom: () => number;
|
|
823
|
+
/** Focus the editor */
|
|
824
|
+
focus: () => void;
|
|
825
|
+
/** Get current page number */
|
|
826
|
+
getCurrentPage: () => number;
|
|
827
|
+
/** Get total page count */
|
|
828
|
+
getTotalPages: () => number;
|
|
829
|
+
/** Scroll to a specific page */
|
|
830
|
+
scrollToPage: (pageNumber: number) => void;
|
|
831
|
+
/** Open print preview */
|
|
832
|
+
openPrintPreview: () => void;
|
|
833
|
+
/** Print the document directly */
|
|
834
|
+
print: () => void;
|
|
835
|
+
}
|
|
836
|
+
/**
|
|
837
|
+
* DocxEditor - Complete DOCX editor component
|
|
838
|
+
*/
|
|
839
|
+
declare const DocxEditor: React__default.ForwardRefExoticComponent<DocxEditorProps & React__default.RefAttributes<DocxEditorRef>>;
|
|
840
|
+
|
|
841
|
+
/**
|
|
842
|
+
* Google Fonts Loader
|
|
843
|
+
*
|
|
844
|
+
* Dynamically loads fonts from Google Fonts API with:
|
|
845
|
+
* - Loading state tracking
|
|
846
|
+
* - Duplicate prevention
|
|
847
|
+
* - Callback notifications
|
|
848
|
+
* - Font availability detection
|
|
849
|
+
*/
|
|
850
|
+
/**
|
|
851
|
+
* Load a font from Google Fonts
|
|
852
|
+
*
|
|
853
|
+
* @param fontFamily - The font family name to load
|
|
854
|
+
* @param options - Optional configuration
|
|
855
|
+
* @returns Promise resolving to true if font loaded successfully, false otherwise
|
|
856
|
+
*/
|
|
857
|
+
declare function loadFont(fontFamily: string, options?: {
|
|
858
|
+
weights?: number[];
|
|
859
|
+
styles?: ('normal' | 'italic')[];
|
|
860
|
+
}): Promise<boolean>;
|
|
861
|
+
/**
|
|
862
|
+
* Load multiple fonts from Google Fonts
|
|
863
|
+
*
|
|
864
|
+
* @param families - Array of font family names to load
|
|
865
|
+
* @param options - Optional configuration
|
|
866
|
+
* @returns Promise resolving when all fonts are loaded (or failed)
|
|
867
|
+
*/
|
|
868
|
+
declare function loadFonts(families: string[], options?: {
|
|
869
|
+
weights?: number[];
|
|
870
|
+
styles?: ('normal' | 'italic')[];
|
|
871
|
+
}): Promise<void>;
|
|
872
|
+
/**
|
|
873
|
+
* Check if a font is loaded
|
|
874
|
+
*
|
|
875
|
+
* @param fontFamily - The font family name to check
|
|
876
|
+
* @returns true if the font is loaded, false otherwise
|
|
877
|
+
*/
|
|
878
|
+
declare function isFontLoaded(fontFamily: string): boolean;
|
|
879
|
+
/**
|
|
880
|
+
* Check if any fonts are currently loading
|
|
881
|
+
*
|
|
882
|
+
* @returns true if any fonts are loading, false otherwise
|
|
883
|
+
*/
|
|
884
|
+
declare function isLoading(): boolean;
|
|
885
|
+
/**
|
|
886
|
+
* Get list of all loaded fonts
|
|
887
|
+
*
|
|
888
|
+
* @returns Array of loaded font family names
|
|
889
|
+
*/
|
|
890
|
+
declare function getLoadedFonts(): string[];
|
|
891
|
+
/**
|
|
892
|
+
* Register a callback to be notified when fonts are loaded
|
|
893
|
+
*
|
|
894
|
+
* @param callback - Function to call when fonts are loaded
|
|
895
|
+
* @returns Cleanup function to remove the callback
|
|
896
|
+
*/
|
|
897
|
+
declare function onFontsLoaded(callback: (fonts: string[]) => void): () => void;
|
|
898
|
+
/**
|
|
899
|
+
* Check if a font is available on the system using canvas measurement
|
|
900
|
+
*
|
|
901
|
+
* This uses the technique of comparing text width with the target font
|
|
902
|
+
* vs a known fallback font. If they differ, the font is available.
|
|
903
|
+
*
|
|
904
|
+
* @param fontFamily - The font family name to check
|
|
905
|
+
* @param fallbackFont - Fallback font to compare against
|
|
906
|
+
* @returns true if font is available, false otherwise
|
|
907
|
+
*/
|
|
908
|
+
declare function canRenderFont(fontFamily: string, fallbackFont?: string): boolean;
|
|
909
|
+
/**
|
|
910
|
+
* Load a font from a raw buffer (e.g., embedded in DOCX)
|
|
911
|
+
*
|
|
912
|
+
* @param fontFamily - The font family name
|
|
913
|
+
* @param buffer - Font file buffer (TTF, OTF, WOFF, WOFF2)
|
|
914
|
+
* @param options - Font options
|
|
915
|
+
* @returns Promise resolving when font is loaded
|
|
916
|
+
*/
|
|
917
|
+
declare function loadFontFromBuffer(fontFamily: string, buffer: ArrayBuffer, options?: {
|
|
918
|
+
weight?: number | string;
|
|
919
|
+
style?: 'normal' | 'italic';
|
|
920
|
+
}): Promise<boolean>;
|
|
921
|
+
/**
|
|
922
|
+
* Preload a list of common document fonts
|
|
923
|
+
*
|
|
924
|
+
* This preloads fonts commonly used in DOCX documents that have
|
|
925
|
+
* Google Fonts equivalents.
|
|
926
|
+
*/
|
|
927
|
+
declare function preloadCommonFonts(): Promise<void>;
|
|
928
|
+
|
|
929
|
+
/**
|
|
930
|
+
* List type
|
|
931
|
+
*/
|
|
932
|
+
type ListType = 'bullet' | 'numbered' | 'none';
|
|
933
|
+
/**
|
|
934
|
+
* List state for the current selection
|
|
935
|
+
*/
|
|
936
|
+
interface ListState {
|
|
937
|
+
/** Type of list (bullet, numbered, or none) */
|
|
938
|
+
type: ListType;
|
|
939
|
+
/** Current list level (0-8) */
|
|
940
|
+
level: number;
|
|
941
|
+
/** Whether the selection is in a list */
|
|
942
|
+
isInList: boolean;
|
|
943
|
+
/** Numbering ID if in a list */
|
|
944
|
+
numId?: number;
|
|
945
|
+
}
|
|
946
|
+
/**
|
|
947
|
+
* Props for the ListButtons component
|
|
948
|
+
*/
|
|
949
|
+
interface ListButtonsProps {
|
|
950
|
+
/** Current list state of the selection */
|
|
951
|
+
listState?: ListState;
|
|
952
|
+
/** Callback when bullet list is toggled */
|
|
953
|
+
onBulletList?: () => void;
|
|
954
|
+
/** Callback when numbered list is toggled */
|
|
955
|
+
onNumberedList?: () => void;
|
|
956
|
+
/** Callback to increase list indent */
|
|
957
|
+
onIndent?: () => void;
|
|
958
|
+
/** Callback to decrease list indent */
|
|
959
|
+
onOutdent?: () => void;
|
|
960
|
+
/** Whether the buttons are disabled */
|
|
961
|
+
disabled?: boolean;
|
|
962
|
+
/** Additional CSS class name */
|
|
963
|
+
className?: string;
|
|
964
|
+
/** Additional inline styles */
|
|
965
|
+
style?: CSSProperties;
|
|
966
|
+
/** Show indent/outdent buttons */
|
|
967
|
+
showIndentButtons?: boolean;
|
|
968
|
+
/** Compact mode (smaller buttons) */
|
|
969
|
+
compact?: boolean;
|
|
970
|
+
/** Whether the current paragraph has left indentation (for enabling outdent) */
|
|
971
|
+
hasIndent?: boolean;
|
|
972
|
+
}
|
|
973
|
+
/**
|
|
974
|
+
* List buttons component for bullet/numbered list controls
|
|
975
|
+
*/
|
|
976
|
+
declare function ListButtons({ listState, onBulletList, onNumberedList, onIndent, onOutdent, disabled, className, style, showIndentButtons, compact, hasIndent, }: ListButtonsProps): react_jsx_runtime.JSX.Element;
|
|
977
|
+
/**
|
|
978
|
+
* Create a default list state (not in a list)
|
|
979
|
+
*/
|
|
980
|
+
declare function createDefaultListState(): ListState;
|
|
981
|
+
|
|
982
|
+
/**
|
|
983
|
+
* TableToolbar Component
|
|
984
|
+
*
|
|
985
|
+
* Provides controls for editing tables:
|
|
986
|
+
* - Add row above/below
|
|
987
|
+
* - Add column left/right
|
|
988
|
+
* - Delete row/column
|
|
989
|
+
* - Merge cells
|
|
990
|
+
* - Split cell
|
|
991
|
+
*
|
|
992
|
+
* Shows when cursor is in a table.
|
|
993
|
+
*/
|
|
994
|
+
|
|
995
|
+
/**
|
|
996
|
+
* Table editing action types
|
|
997
|
+
*/
|
|
998
|
+
type TableAction = 'addRowAbove' | 'addRowBelow' | 'addColumnLeft' | 'addColumnRight' | 'deleteRow' | 'deleteColumn' | 'mergeCells' | 'splitCell' | 'deleteTable' | 'borderAll' | 'borderOutside' | 'borderInside' | 'borderNone' | 'borderTop' | 'borderBottom' | 'borderLeft' | 'borderRight' | {
|
|
999
|
+
type: 'cellFillColor';
|
|
1000
|
+
color: string | null;
|
|
1001
|
+
} | {
|
|
1002
|
+
type: 'borderColor';
|
|
1003
|
+
color: string;
|
|
1004
|
+
};
|
|
1005
|
+
/**
|
|
1006
|
+
* Selection within a table
|
|
1007
|
+
*/
|
|
1008
|
+
interface TableSelection {
|
|
1009
|
+
/** Index of the table in the document */
|
|
1010
|
+
tableIndex: number;
|
|
1011
|
+
/** Row index (0-indexed) */
|
|
1012
|
+
rowIndex: number;
|
|
1013
|
+
/** Column index (0-indexed) */
|
|
1014
|
+
columnIndex: number;
|
|
1015
|
+
/** Selected cell range for multi-cell selection */
|
|
1016
|
+
selectedCells?: {
|
|
1017
|
+
startRow: number;
|
|
1018
|
+
startCol: number;
|
|
1019
|
+
endRow: number;
|
|
1020
|
+
endCol: number;
|
|
1021
|
+
};
|
|
1022
|
+
}
|
|
1023
|
+
/**
|
|
1024
|
+
* Context for table operations
|
|
1025
|
+
*/
|
|
1026
|
+
interface TableContext {
|
|
1027
|
+
/** The table being edited */
|
|
1028
|
+
table: Table;
|
|
1029
|
+
/** Current selection within the table */
|
|
1030
|
+
selection: TableSelection;
|
|
1031
|
+
/** Whether multiple cells are selected (for merge) */
|
|
1032
|
+
hasMultiCellSelection: boolean;
|
|
1033
|
+
/** Whether current cell can be split */
|
|
1034
|
+
canSplitCell: boolean;
|
|
1035
|
+
/** Total number of rows */
|
|
1036
|
+
rowCount: number;
|
|
1037
|
+
/** Total number of columns */
|
|
1038
|
+
columnCount: number;
|
|
1039
|
+
}
|
|
1040
|
+
/**
|
|
1041
|
+
* Props for TableToolbar component
|
|
1042
|
+
*/
|
|
1043
|
+
interface TableToolbarProps {
|
|
1044
|
+
/** Current table context (null if cursor not in table) */
|
|
1045
|
+
context: TableContext | null;
|
|
1046
|
+
/** Callback when a table action is triggered */
|
|
1047
|
+
onAction?: (action: TableAction, context: TableContext) => void;
|
|
1048
|
+
/** Whether the toolbar is disabled */
|
|
1049
|
+
disabled?: boolean;
|
|
1050
|
+
/** Additional CSS class name */
|
|
1051
|
+
className?: string;
|
|
1052
|
+
/** Additional inline styles */
|
|
1053
|
+
style?: CSSProperties;
|
|
1054
|
+
/** Show labels next to icons */
|
|
1055
|
+
showLabels?: boolean;
|
|
1056
|
+
/** Compact mode */
|
|
1057
|
+
compact?: boolean;
|
|
1058
|
+
/** Position of the toolbar */
|
|
1059
|
+
position?: 'top' | 'floating';
|
|
1060
|
+
/** Custom render for additional buttons */
|
|
1061
|
+
children?: ReactNode;
|
|
1062
|
+
}
|
|
1063
|
+
/**
|
|
1064
|
+
* TableToolbar - Shows table manipulation controls when cursor is in a table
|
|
1065
|
+
*/
|
|
1066
|
+
declare function TableToolbar({ context, onAction, disabled, className, style, showLabels, compact, position, children, }: TableToolbarProps): React__default.ReactElement | null;
|
|
1067
|
+
/**
|
|
1068
|
+
* Create a table context from a table and selection
|
|
1069
|
+
*/
|
|
1070
|
+
declare function createTableContext(table: Table, selection: TableSelection): TableContext;
|
|
1071
|
+
/**
|
|
1072
|
+
* Get column count from a table
|
|
1073
|
+
*/
|
|
1074
|
+
declare function getColumnCount(table: Table): number;
|
|
1075
|
+
/**
|
|
1076
|
+
* Get cell at specific row and column index
|
|
1077
|
+
*/
|
|
1078
|
+
declare function getCellAt(table: Table, rowIndex: number, columnIndex: number): TableCell | null;
|
|
1079
|
+
/**
|
|
1080
|
+
* Add a row to a table at the specified index
|
|
1081
|
+
*/
|
|
1082
|
+
declare function addRow(table: Table, atIndex: number, position?: 'before' | 'after'): Table;
|
|
1083
|
+
/**
|
|
1084
|
+
* Delete a row from a table
|
|
1085
|
+
*/
|
|
1086
|
+
declare function deleteRow(table: Table, rowIndex: number): Table;
|
|
1087
|
+
/**
|
|
1088
|
+
* Add a column to a table at the specified index
|
|
1089
|
+
*/
|
|
1090
|
+
declare function addColumn(table: Table, atIndex: number, position?: 'before' | 'after'): Table;
|
|
1091
|
+
/**
|
|
1092
|
+
* Delete a column from a table
|
|
1093
|
+
*/
|
|
1094
|
+
declare function deleteColumn(table: Table, columnIndex: number): Table;
|
|
1095
|
+
/**
|
|
1096
|
+
* Merge cells in a selection
|
|
1097
|
+
*/
|
|
1098
|
+
declare function mergeCells(table: Table, selection: TableSelection): Table;
|
|
1099
|
+
/**
|
|
1100
|
+
* Split a merged cell
|
|
1101
|
+
*/
|
|
1102
|
+
declare function splitCell(table: Table, rowIndex: number, columnIndex: number): Table;
|
|
1103
|
+
|
|
1104
|
+
/**
|
|
1105
|
+
* Current formatting state of the selection
|
|
1106
|
+
*/
|
|
1107
|
+
interface SelectionFormatting {
|
|
1108
|
+
/** Whether selected text is bold */
|
|
1109
|
+
bold?: boolean;
|
|
1110
|
+
/** Whether selected text is italic */
|
|
1111
|
+
italic?: boolean;
|
|
1112
|
+
/** Whether selected text is underlined */
|
|
1113
|
+
underline?: boolean;
|
|
1114
|
+
/** Whether selected text has strikethrough */
|
|
1115
|
+
strike?: boolean;
|
|
1116
|
+
/** Whether selected text is superscript */
|
|
1117
|
+
superscript?: boolean;
|
|
1118
|
+
/** Whether selected text is subscript */
|
|
1119
|
+
subscript?: boolean;
|
|
1120
|
+
/** Font family of selected text */
|
|
1121
|
+
fontFamily?: string;
|
|
1122
|
+
/** Font size of selected text (in half-points) */
|
|
1123
|
+
fontSize?: number;
|
|
1124
|
+
/** Text color */
|
|
1125
|
+
color?: string;
|
|
1126
|
+
/** Highlight color */
|
|
1127
|
+
highlight?: string;
|
|
1128
|
+
/** Paragraph alignment */
|
|
1129
|
+
alignment?: ParagraphAlignment;
|
|
1130
|
+
/** List state of the current paragraph */
|
|
1131
|
+
listState?: ListState;
|
|
1132
|
+
/** Line spacing in twips (OOXML value, 240 = single spacing) */
|
|
1133
|
+
lineSpacing?: number;
|
|
1134
|
+
/** Paragraph style ID */
|
|
1135
|
+
styleId?: string;
|
|
1136
|
+
/** Paragraph left indentation in twips */
|
|
1137
|
+
indentLeft?: number;
|
|
1138
|
+
}
|
|
1139
|
+
/**
|
|
1140
|
+
* Formatting action types
|
|
1141
|
+
*/
|
|
1142
|
+
type FormattingAction = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'superscript' | 'subscript' | 'clearFormatting' | 'bulletList' | 'numberedList' | 'indent' | 'outdent' | 'insertLink' | {
|
|
1143
|
+
type: 'fontFamily';
|
|
1144
|
+
value: string;
|
|
1145
|
+
} | {
|
|
1146
|
+
type: 'fontSize';
|
|
1147
|
+
value: number;
|
|
1148
|
+
} | {
|
|
1149
|
+
type: 'textColor';
|
|
1150
|
+
value: string;
|
|
1151
|
+
} | {
|
|
1152
|
+
type: 'highlightColor';
|
|
1153
|
+
value: string;
|
|
1154
|
+
} | {
|
|
1155
|
+
type: 'alignment';
|
|
1156
|
+
value: ParagraphAlignment;
|
|
1157
|
+
} | {
|
|
1158
|
+
type: 'lineSpacing';
|
|
1159
|
+
value: number;
|
|
1160
|
+
} | {
|
|
1161
|
+
type: 'applyStyle';
|
|
1162
|
+
value: string;
|
|
1163
|
+
};
|
|
1164
|
+
/**
|
|
1165
|
+
* Props for the Toolbar component
|
|
1166
|
+
*/
|
|
1167
|
+
interface ToolbarProps {
|
|
1168
|
+
/** Current formatting of the selection */
|
|
1169
|
+
currentFormatting?: SelectionFormatting;
|
|
1170
|
+
/** Callback when a formatting action is triggered */
|
|
1171
|
+
onFormat?: (action: FormattingAction) => void;
|
|
1172
|
+
/** Callback for undo action */
|
|
1173
|
+
onUndo?: () => void;
|
|
1174
|
+
/** Callback for redo action */
|
|
1175
|
+
onRedo?: () => void;
|
|
1176
|
+
/** Whether undo is available */
|
|
1177
|
+
canUndo?: boolean;
|
|
1178
|
+
/** Whether redo is available */
|
|
1179
|
+
canRedo?: boolean;
|
|
1180
|
+
/** Whether the toolbar is disabled */
|
|
1181
|
+
disabled?: boolean;
|
|
1182
|
+
/** Additional CSS class name */
|
|
1183
|
+
className?: string;
|
|
1184
|
+
/** Additional inline styles */
|
|
1185
|
+
style?: CSSProperties;
|
|
1186
|
+
/** Whether to enable keyboard shortcuts (default: true) */
|
|
1187
|
+
enableShortcuts?: boolean;
|
|
1188
|
+
/** Ref to the editor container for keyboard events */
|
|
1189
|
+
editorRef?: React__default.RefObject<HTMLElement>;
|
|
1190
|
+
/** Custom toolbar items to render */
|
|
1191
|
+
children?: ReactNode;
|
|
1192
|
+
/** Whether to show font family picker (default: true) */
|
|
1193
|
+
showFontPicker?: boolean;
|
|
1194
|
+
/** Whether to show font size picker (default: true) */
|
|
1195
|
+
showFontSizePicker?: boolean;
|
|
1196
|
+
/** Whether to show text color picker (default: true) */
|
|
1197
|
+
showTextColorPicker?: boolean;
|
|
1198
|
+
/** Whether to show highlight color picker (default: true) */
|
|
1199
|
+
showHighlightColorPicker?: boolean;
|
|
1200
|
+
/** Whether to show alignment buttons (default: true) */
|
|
1201
|
+
showAlignmentButtons?: boolean;
|
|
1202
|
+
/** Whether to show list buttons (default: true) */
|
|
1203
|
+
showListButtons?: boolean;
|
|
1204
|
+
/** Whether to show line spacing picker (default: true) */
|
|
1205
|
+
showLineSpacingPicker?: boolean;
|
|
1206
|
+
/** Whether to show style picker (default: true) */
|
|
1207
|
+
showStylePicker?: boolean;
|
|
1208
|
+
/** Document styles for the style picker */
|
|
1209
|
+
documentStyles?: Style[];
|
|
1210
|
+
/** Theme for the style picker */
|
|
1211
|
+
theme?: Theme | null;
|
|
1212
|
+
/** Callback for print action */
|
|
1213
|
+
onPrint?: () => void;
|
|
1214
|
+
/** Whether to show print button (default: true) */
|
|
1215
|
+
showPrintButton?: boolean;
|
|
1216
|
+
/** Whether to show zoom control (default: true) */
|
|
1217
|
+
showZoomControl?: boolean;
|
|
1218
|
+
/** Current zoom level (1.0 = 100%) */
|
|
1219
|
+
zoom?: number;
|
|
1220
|
+
/** Callback when zoom changes */
|
|
1221
|
+
onZoomChange?: (zoom: number) => void;
|
|
1222
|
+
/** Callback to refocus the editor after toolbar interactions */
|
|
1223
|
+
onRefocusEditor?: () => void;
|
|
1224
|
+
/** Callback when a table should be inserted */
|
|
1225
|
+
onInsertTable?: (rows: number, columns: number) => void;
|
|
1226
|
+
/** Whether to show table insert button (default: true) */
|
|
1227
|
+
showTableInsert?: boolean;
|
|
1228
|
+
/** Table context when cursor is in a table */
|
|
1229
|
+
tableContext?: {
|
|
1230
|
+
isInTable: boolean;
|
|
1231
|
+
rowCount?: number;
|
|
1232
|
+
columnCount?: number;
|
|
1233
|
+
canSplitCell?: boolean;
|
|
1234
|
+
hasMultiCellSelection?: boolean;
|
|
1235
|
+
} | null;
|
|
1236
|
+
/** Callback when a table action is triggered */
|
|
1237
|
+
onTableAction?: (action: TableAction) => void;
|
|
1238
|
+
}
|
|
1239
|
+
/**
|
|
1240
|
+
* Props for individual toolbar buttons
|
|
1241
|
+
*/
|
|
1242
|
+
interface ToolbarButtonProps {
|
|
1243
|
+
/** Whether the button is in active/pressed state */
|
|
1244
|
+
active?: boolean;
|
|
1245
|
+
/** Whether the button is disabled */
|
|
1246
|
+
disabled?: boolean;
|
|
1247
|
+
/** Button title/tooltip */
|
|
1248
|
+
title?: string;
|
|
1249
|
+
/** Click handler */
|
|
1250
|
+
onClick?: () => void;
|
|
1251
|
+
/** Button content */
|
|
1252
|
+
children: ReactNode;
|
|
1253
|
+
/** Additional CSS class name */
|
|
1254
|
+
className?: string;
|
|
1255
|
+
/** ARIA label for accessibility */
|
|
1256
|
+
ariaLabel?: string;
|
|
1257
|
+
}
|
|
1258
|
+
/**
|
|
1259
|
+
* Props for toolbar button groups
|
|
1260
|
+
*/
|
|
1261
|
+
interface ToolbarGroupProps$1 {
|
|
1262
|
+
/** Group label for accessibility */
|
|
1263
|
+
label?: string;
|
|
1264
|
+
/** Group content */
|
|
1265
|
+
children: ReactNode;
|
|
1266
|
+
/** Additional CSS class name */
|
|
1267
|
+
className?: string;
|
|
1268
|
+
}
|
|
1269
|
+
/**
|
|
1270
|
+
* Individual toolbar button with shadcn styling
|
|
1271
|
+
*/
|
|
1272
|
+
declare function ToolbarButton({ active, disabled, title, onClick, children, className, ariaLabel, }: ToolbarButtonProps): react_jsx_runtime.JSX.Element;
|
|
1273
|
+
/**
|
|
1274
|
+
* Toolbar button group with modern styling
|
|
1275
|
+
*/
|
|
1276
|
+
declare function ToolbarGroup$1({ label, children, className }: ToolbarGroupProps$1): react_jsx_runtime.JSX.Element;
|
|
1277
|
+
/**
|
|
1278
|
+
* Toolbar separator
|
|
1279
|
+
*/
|
|
1280
|
+
declare function ToolbarSeparator(): react_jsx_runtime.JSX.Element;
|
|
1281
|
+
/**
|
|
1282
|
+
* Formatting toolbar with all controls
|
|
1283
|
+
*/
|
|
1284
|
+
declare function Toolbar({ currentFormatting, onFormat, onUndo, onRedo, canUndo, canRedo, disabled, className, style, enableShortcuts, editorRef, children, showFontPicker, showFontSizePicker, showTextColorPicker, showHighlightColorPicker, showAlignmentButtons, showListButtons, showLineSpacingPicker, showStylePicker, documentStyles, theme, onPrint, showPrintButton, showZoomControl, zoom, onZoomChange, onRefocusEditor, onInsertTable, showTableInsert, tableContext, onTableAction, }: ToolbarProps): react_jsx_runtime.JSX.Element;
|
|
1285
|
+
|
|
1286
|
+
/**
|
|
1287
|
+
* VariablePanel Component
|
|
1288
|
+
*
|
|
1289
|
+
* A panel that lists detected template variables with input fields for values:
|
|
1290
|
+
* - Lists detected variables from document
|
|
1291
|
+
* - Input field for each value
|
|
1292
|
+
* - Apply button to process template
|
|
1293
|
+
* - Shows empty state when no variables
|
|
1294
|
+
*/
|
|
1295
|
+
|
|
1296
|
+
/**
|
|
1297
|
+
* Props for VariablePanel component
|
|
1298
|
+
*/
|
|
1299
|
+
interface VariablePanelProps {
|
|
1300
|
+
/** Detected variable names */
|
|
1301
|
+
variables: string[];
|
|
1302
|
+
/** Current variable values */
|
|
1303
|
+
values?: Record<string, string>;
|
|
1304
|
+
/** Callback when values change */
|
|
1305
|
+
onValuesChange?: (values: Record<string, string>) => void;
|
|
1306
|
+
/** Callback when Apply button is clicked */
|
|
1307
|
+
onApply?: (values: Record<string, string>) => void;
|
|
1308
|
+
/** Callback when Reset button is clicked */
|
|
1309
|
+
onReset?: () => void;
|
|
1310
|
+
/** Whether Apply is in progress */
|
|
1311
|
+
isApplying?: boolean;
|
|
1312
|
+
/** Whether the panel is disabled */
|
|
1313
|
+
disabled?: boolean;
|
|
1314
|
+
/** Additional CSS class name */
|
|
1315
|
+
className?: string;
|
|
1316
|
+
/** Additional inline styles */
|
|
1317
|
+
style?: CSSProperties;
|
|
1318
|
+
/** Panel title */
|
|
1319
|
+
title?: string;
|
|
1320
|
+
/** Show empty state message */
|
|
1321
|
+
emptyMessage?: string;
|
|
1322
|
+
/** Show variable count */
|
|
1323
|
+
showCount?: boolean;
|
|
1324
|
+
/** Collapsible panel */
|
|
1325
|
+
collapsible?: boolean;
|
|
1326
|
+
/** Initially collapsed */
|
|
1327
|
+
defaultCollapsed?: boolean;
|
|
1328
|
+
/** Show search filter */
|
|
1329
|
+
showSearch?: boolean;
|
|
1330
|
+
/** Custom variable descriptions */
|
|
1331
|
+
descriptions?: Record<string, string>;
|
|
1332
|
+
}
|
|
1333
|
+
/**
|
|
1334
|
+
* VariablePanel - Panel for managing template variable values
|
|
1335
|
+
*/
|
|
1336
|
+
declare function VariablePanel({ variables, values: externalValues, onValuesChange, onApply, onReset, isApplying, disabled, className, style, title, emptyMessage, showCount, collapsible, defaultCollapsed, showSearch, descriptions, }: VariablePanelProps): React__default.ReactElement;
|
|
1337
|
+
|
|
1338
|
+
/**
|
|
1339
|
+
* DocumentViewer Component
|
|
1340
|
+
*
|
|
1341
|
+
* Full paginated document viewer:
|
|
1342
|
+
* - Renders all pages vertically
|
|
1343
|
+
* - Gap between pages
|
|
1344
|
+
* - Scrollable container
|
|
1345
|
+
* - Loading state while parsing
|
|
1346
|
+
* - Placeholder when no document
|
|
1347
|
+
* - Zoom control
|
|
1348
|
+
*/
|
|
1349
|
+
|
|
1350
|
+
/**
|
|
1351
|
+
* Props for the DocumentViewer component
|
|
1352
|
+
*/
|
|
1353
|
+
interface DocumentViewerProps {
|
|
1354
|
+
/** The document to render */
|
|
1355
|
+
document?: Document | null;
|
|
1356
|
+
/** Theme for resolving colors and fonts */
|
|
1357
|
+
theme?: Theme | null;
|
|
1358
|
+
/** Zoom level (1.0 = 100%) */
|
|
1359
|
+
zoom?: number;
|
|
1360
|
+
/** Gap between pages in pixels */
|
|
1361
|
+
pageGap?: number;
|
|
1362
|
+
/** Whether to show page shadows */
|
|
1363
|
+
showPageShadows?: boolean;
|
|
1364
|
+
/** Whether to show page numbers */
|
|
1365
|
+
showPageNumbers?: boolean;
|
|
1366
|
+
/** Loading state */
|
|
1367
|
+
isLoading?: boolean;
|
|
1368
|
+
/** Custom loading indicator */
|
|
1369
|
+
loadingIndicator?: ReactNode;
|
|
1370
|
+
/** Custom placeholder for no document */
|
|
1371
|
+
placeholder?: ReactNode;
|
|
1372
|
+
/** Custom paragraph renderer */
|
|
1373
|
+
renderParagraph?: (paragraph: Paragraph, index: number, pageContent: PageContent) => ReactNode;
|
|
1374
|
+
/** Custom table renderer */
|
|
1375
|
+
renderTable?: (table: Table, index: number, pageContent: PageContent) => ReactNode;
|
|
1376
|
+
/** Custom header renderer */
|
|
1377
|
+
renderHeader?: (header: HeaderFooter, pageNumber: number) => ReactNode;
|
|
1378
|
+
/** Custom footer renderer */
|
|
1379
|
+
renderFooter?: (footer: HeaderFooter, pageNumber: number) => ReactNode;
|
|
1380
|
+
/** Callback when page becomes visible */
|
|
1381
|
+
onPageVisible?: (pageNumber: number) => void;
|
|
1382
|
+
/** Callback when document is clicked */
|
|
1383
|
+
onDocumentClick?: (e: React__default.MouseEvent, page: Page | null) => void;
|
|
1384
|
+
/** Additional CSS class name */
|
|
1385
|
+
className?: string;
|
|
1386
|
+
/** Additional inline styles */
|
|
1387
|
+
style?: CSSProperties;
|
|
1388
|
+
}
|
|
1389
|
+
/**
|
|
1390
|
+
* DocumentViewer component - renders paginated document view
|
|
1391
|
+
*/
|
|
1392
|
+
declare function DocumentViewer({ document, theme, zoom, pageGap, showPageShadows, showPageNumbers, isLoading, loadingIndicator, placeholder, renderParagraph, renderTable, renderHeader, renderFooter, onPageVisible, onDocumentClick, className, style: additionalStyle, }: DocumentViewerProps): React__default.ReactElement;
|
|
1393
|
+
/**
|
|
1394
|
+
* Scroll to a specific page
|
|
1395
|
+
*/
|
|
1396
|
+
declare function scrollToPage(containerRef: React__default.RefObject<HTMLDivElement>, pageNumber: number, layoutResult: PageLayoutResult | null, zoom?: number, pageGap?: number): void;
|
|
1397
|
+
/**
|
|
1398
|
+
* Get visible page numbers
|
|
1399
|
+
*/
|
|
1400
|
+
declare function getVisiblePages(containerRef: React__default.RefObject<HTMLDivElement>, layoutResult: PageLayoutResult | null, zoom?: number, pageGap?: number): number[];
|
|
1401
|
+
/**
|
|
1402
|
+
* Calculate zoom to fit page width
|
|
1403
|
+
*/
|
|
1404
|
+
declare function calculateFitWidthZoom(containerWidth: number, pageWidth: number, padding?: number): number;
|
|
1405
|
+
/**
|
|
1406
|
+
* Calculate zoom to fit whole page
|
|
1407
|
+
*/
|
|
1408
|
+
declare function calculateFitPageZoom(containerWidth: number, containerHeight: number, pageWidth: number, pageHeight: number, padding?: number): number;
|
|
1409
|
+
|
|
1410
|
+
/**
|
|
1411
|
+
* Context Menu Component
|
|
1412
|
+
*
|
|
1413
|
+
* Right-click context menu for AI actions on selected text.
|
|
1414
|
+
* Shows AI options like rewrite, expand, summarize, translate, etc.
|
|
1415
|
+
*/
|
|
1416
|
+
|
|
1417
|
+
/**
|
|
1418
|
+
* Context menu props
|
|
1419
|
+
*/
|
|
1420
|
+
interface ContextMenuProps {
|
|
1421
|
+
/** Whether the menu is visible */
|
|
1422
|
+
isOpen: boolean;
|
|
1423
|
+
/** Menu position */
|
|
1424
|
+
position: {
|
|
1425
|
+
x: number;
|
|
1426
|
+
y: number;
|
|
1427
|
+
};
|
|
1428
|
+
/** Selected text */
|
|
1429
|
+
selectedText: string;
|
|
1430
|
+
/** Selection context for AI operations */
|
|
1431
|
+
selectionContext?: SelectionContext;
|
|
1432
|
+
/** Callback when an action is selected */
|
|
1433
|
+
onAction: (action: AIAction, customPrompt?: string) => void;
|
|
1434
|
+
/** Callback when menu is closed */
|
|
1435
|
+
onClose: () => void;
|
|
1436
|
+
/** Available actions (defaults to DEFAULT_AI_ACTIONS) */
|
|
1437
|
+
actions?: AIAction[];
|
|
1438
|
+
/** Whether to show custom prompt option */
|
|
1439
|
+
showCustomPrompt?: boolean;
|
|
1440
|
+
/** Additional className */
|
|
1441
|
+
className?: string;
|
|
1442
|
+
}
|
|
1443
|
+
declare const ContextMenu: React__default.FC<ContextMenuProps>;
|
|
1444
|
+
/**
|
|
1445
|
+
* Hook to manage context menu state
|
|
1446
|
+
*/
|
|
1447
|
+
declare function useContextMenu(): {
|
|
1448
|
+
isOpen: boolean;
|
|
1449
|
+
position: {
|
|
1450
|
+
x: number;
|
|
1451
|
+
y: number;
|
|
1452
|
+
};
|
|
1453
|
+
selectedText: string;
|
|
1454
|
+
selectionContext: SelectionContext | undefined;
|
|
1455
|
+
openMenu: (e: React__default.MouseEvent | MouseEvent, text: string, context?: SelectionContext) => void;
|
|
1456
|
+
closeMenu: () => void;
|
|
1457
|
+
};
|
|
1458
|
+
/**
|
|
1459
|
+
* Get action shortcuts
|
|
1460
|
+
*/
|
|
1461
|
+
declare function getActionShortcut(action: AIAction): string | undefined;
|
|
1462
|
+
/**
|
|
1463
|
+
* Check if action is available for selection
|
|
1464
|
+
*/
|
|
1465
|
+
declare function isActionAvailable(_action: AIAction, selectedText: string, _selectionContext?: SelectionContext): boolean;
|
|
1466
|
+
/**
|
|
1467
|
+
* Get default actions for selection
|
|
1468
|
+
*/
|
|
1469
|
+
declare function getDefaultActions(): AIAction[];
|
|
1470
|
+
/**
|
|
1471
|
+
* Get all available actions
|
|
1472
|
+
*/
|
|
1473
|
+
declare function getAllActions(): AIAction[];
|
|
1474
|
+
|
|
1475
|
+
/**
|
|
1476
|
+
* Response Preview Component
|
|
1477
|
+
*
|
|
1478
|
+
* Shows AI response preview with diff view before applying changes.
|
|
1479
|
+
* Allows user to accept, reject, or edit the response.
|
|
1480
|
+
*/
|
|
1481
|
+
|
|
1482
|
+
/**
|
|
1483
|
+
* Response preview props
|
|
1484
|
+
*/
|
|
1485
|
+
interface ResponsePreviewProps {
|
|
1486
|
+
/** Original selected text */
|
|
1487
|
+
originalText: string;
|
|
1488
|
+
/** AI response (or null if loading/error) */
|
|
1489
|
+
response: AgentResponse | null;
|
|
1490
|
+
/** Action that was performed */
|
|
1491
|
+
action: AIAction;
|
|
1492
|
+
/** Whether the response is loading */
|
|
1493
|
+
isLoading: boolean;
|
|
1494
|
+
/** Error message if request failed */
|
|
1495
|
+
error?: string;
|
|
1496
|
+
/** Callback when user accepts the change */
|
|
1497
|
+
onAccept: (newText: string) => void;
|
|
1498
|
+
/** Callback when user rejects the change */
|
|
1499
|
+
onReject: () => void;
|
|
1500
|
+
/** Callback when user wants to retry */
|
|
1501
|
+
onRetry?: () => void;
|
|
1502
|
+
/** Allow editing before accepting */
|
|
1503
|
+
allowEdit?: boolean;
|
|
1504
|
+
/** Show diff view */
|
|
1505
|
+
showDiff?: boolean;
|
|
1506
|
+
/** Additional className */
|
|
1507
|
+
className?: string;
|
|
1508
|
+
/** Position for the preview */
|
|
1509
|
+
position?: {
|
|
1510
|
+
x: number;
|
|
1511
|
+
y: number;
|
|
1512
|
+
};
|
|
1513
|
+
}
|
|
1514
|
+
declare const ResponsePreview: React__default.FC<ResponsePreviewProps>;
|
|
1515
|
+
/**
|
|
1516
|
+
* State for response preview
|
|
1517
|
+
*/
|
|
1518
|
+
interface ResponsePreviewState {
|
|
1519
|
+
isVisible: boolean;
|
|
1520
|
+
originalText: string;
|
|
1521
|
+
response: AgentResponse | null;
|
|
1522
|
+
action: AIAction;
|
|
1523
|
+
isLoading: boolean;
|
|
1524
|
+
error?: string;
|
|
1525
|
+
position?: {
|
|
1526
|
+
x: number;
|
|
1527
|
+
y: number;
|
|
1528
|
+
};
|
|
1529
|
+
}
|
|
1530
|
+
/**
|
|
1531
|
+
* Hook to manage response preview state
|
|
1532
|
+
*/
|
|
1533
|
+
declare function useResponsePreview(): {
|
|
1534
|
+
state: ResponsePreviewState;
|
|
1535
|
+
showPreview: (originalText: string, action: AIAction, position?: {
|
|
1536
|
+
x: number;
|
|
1537
|
+
y: number;
|
|
1538
|
+
}) => void;
|
|
1539
|
+
setResponse: (response: AgentResponse) => void;
|
|
1540
|
+
setError: (error: string) => void;
|
|
1541
|
+
hidePreview: () => void;
|
|
1542
|
+
};
|
|
1543
|
+
/**
|
|
1544
|
+
* Create a mock response for testing
|
|
1545
|
+
*/
|
|
1546
|
+
declare function createMockResponse(newText: string, warnings?: string[]): AgentResponse;
|
|
1547
|
+
/**
|
|
1548
|
+
* Create an error response
|
|
1549
|
+
*/
|
|
1550
|
+
declare function createErrorResponse(error: string): AgentResponse;
|
|
1551
|
+
|
|
1552
|
+
/**
|
|
1553
|
+
* Text Context Menu Component
|
|
1554
|
+
*
|
|
1555
|
+
* Right-click context menu for text editing operations.
|
|
1556
|
+
* Shows Cut, Copy, Paste, and other text editing options.
|
|
1557
|
+
*/
|
|
1558
|
+
|
|
1559
|
+
/**
|
|
1560
|
+
* Context menu action types
|
|
1561
|
+
*/
|
|
1562
|
+
type TextContextAction = 'cut' | 'copy' | 'paste' | 'pasteAsPlainText' | 'selectAll' | 'delete' | 'separator';
|
|
1563
|
+
/**
|
|
1564
|
+
* Menu item configuration
|
|
1565
|
+
*/
|
|
1566
|
+
interface TextContextMenuItem {
|
|
1567
|
+
/** Action type */
|
|
1568
|
+
action: TextContextAction;
|
|
1569
|
+
/** Display label */
|
|
1570
|
+
label: string;
|
|
1571
|
+
/** Keyboard shortcut hint */
|
|
1572
|
+
shortcut?: string;
|
|
1573
|
+
/** Whether the item is disabled */
|
|
1574
|
+
disabled?: boolean;
|
|
1575
|
+
/** Whether to show divider after this item */
|
|
1576
|
+
dividerAfter?: boolean;
|
|
1577
|
+
}
|
|
1578
|
+
/**
|
|
1579
|
+
* Context menu props
|
|
1580
|
+
*/
|
|
1581
|
+
interface TextContextMenuProps {
|
|
1582
|
+
/** Whether the menu is visible */
|
|
1583
|
+
isOpen: boolean;
|
|
1584
|
+
/** Menu position */
|
|
1585
|
+
position: {
|
|
1586
|
+
x: number;
|
|
1587
|
+
y: number;
|
|
1588
|
+
};
|
|
1589
|
+
/** Whether there's a selection (enables copy/cut) */
|
|
1590
|
+
hasSelection: boolean;
|
|
1591
|
+
/** Whether the editor is editable (enables paste/cut/delete) */
|
|
1592
|
+
isEditable: boolean;
|
|
1593
|
+
/** Whether clipboard has content (enables paste) */
|
|
1594
|
+
hasClipboardContent?: boolean;
|
|
1595
|
+
/** Callback when an action is selected */
|
|
1596
|
+
onAction: (action: TextContextAction) => void;
|
|
1597
|
+
/** Callback when menu is closed */
|
|
1598
|
+
onClose: () => void;
|
|
1599
|
+
/** Custom menu items (overrides default) */
|
|
1600
|
+
items?: TextContextMenuItem[];
|
|
1601
|
+
/** Additional className */
|
|
1602
|
+
className?: string;
|
|
1603
|
+
}
|
|
1604
|
+
/**
|
|
1605
|
+
* Hook options for text context menu
|
|
1606
|
+
*/
|
|
1607
|
+
interface UseTextContextMenuOptions {
|
|
1608
|
+
/** Whether the context menu is enabled */
|
|
1609
|
+
enabled?: boolean;
|
|
1610
|
+
/** Whether the editor is editable */
|
|
1611
|
+
isEditable?: boolean;
|
|
1612
|
+
/** Container element ref */
|
|
1613
|
+
containerRef?: React__default.RefObject<HTMLElement>;
|
|
1614
|
+
/** Callback when an action is triggered */
|
|
1615
|
+
onAction?: (action: TextContextAction) => void;
|
|
1616
|
+
}
|
|
1617
|
+
/**
|
|
1618
|
+
* Hook return value
|
|
1619
|
+
*/
|
|
1620
|
+
interface UseTextContextMenuReturn {
|
|
1621
|
+
/** Whether the menu is open */
|
|
1622
|
+
isOpen: boolean;
|
|
1623
|
+
/** Menu position */
|
|
1624
|
+
position: {
|
|
1625
|
+
x: number;
|
|
1626
|
+
y: number;
|
|
1627
|
+
};
|
|
1628
|
+
/** Whether there's a text selection */
|
|
1629
|
+
hasSelection: boolean;
|
|
1630
|
+
/** Open the context menu */
|
|
1631
|
+
openMenu: (event: React__default.MouseEvent | MouseEvent) => void;
|
|
1632
|
+
/** Close the context menu */
|
|
1633
|
+
closeMenu: () => void;
|
|
1634
|
+
/** Handle action selection */
|
|
1635
|
+
handleAction: (action: TextContextAction) => void;
|
|
1636
|
+
/** Context menu event handler for onContextMenu prop */
|
|
1637
|
+
onContextMenu: (event: React__default.MouseEvent) => void;
|
|
1638
|
+
}
|
|
1639
|
+
declare const TextContextMenu: React__default.FC<TextContextMenuProps>;
|
|
1640
|
+
/**
|
|
1641
|
+
* Hook to manage text context menu state
|
|
1642
|
+
*/
|
|
1643
|
+
declare function useTextContextMenu(options?: UseTextContextMenuOptions): UseTextContextMenuReturn;
|
|
1644
|
+
/**
|
|
1645
|
+
* Get action label
|
|
1646
|
+
*/
|
|
1647
|
+
declare function getTextActionLabel(action: TextContextAction): string;
|
|
1648
|
+
/**
|
|
1649
|
+
* Get action shortcut
|
|
1650
|
+
*/
|
|
1651
|
+
declare function getTextActionShortcut(action: TextContextAction): string;
|
|
1652
|
+
/**
|
|
1653
|
+
* Get default menu items
|
|
1654
|
+
*/
|
|
1655
|
+
declare function getDefaultTextContextMenuItems(): TextContextMenuItem[];
|
|
1656
|
+
/**
|
|
1657
|
+
* Check if action is available
|
|
1658
|
+
*/
|
|
1659
|
+
declare function isTextActionAvailable(action: TextContextAction, hasSelection: boolean, isEditable: boolean): boolean;
|
|
1660
|
+
|
|
1661
|
+
/**
|
|
1662
|
+
* Error severity levels
|
|
1663
|
+
*/
|
|
1664
|
+
type ErrorSeverity = 'error' | 'warning' | 'info';
|
|
1665
|
+
/**
|
|
1666
|
+
* Error notification
|
|
1667
|
+
*/
|
|
1668
|
+
interface ErrorNotification {
|
|
1669
|
+
id: string;
|
|
1670
|
+
message: string;
|
|
1671
|
+
severity: ErrorSeverity;
|
|
1672
|
+
details?: string;
|
|
1673
|
+
timestamp: number;
|
|
1674
|
+
dismissed?: boolean;
|
|
1675
|
+
}
|
|
1676
|
+
/**
|
|
1677
|
+
* Error context value
|
|
1678
|
+
*/
|
|
1679
|
+
interface ErrorContextValue {
|
|
1680
|
+
/** Current notifications */
|
|
1681
|
+
notifications: ErrorNotification[];
|
|
1682
|
+
/** Show an error notification */
|
|
1683
|
+
showError: (message: string, details?: string) => void;
|
|
1684
|
+
/** Show a warning notification */
|
|
1685
|
+
showWarning: (message: string, details?: string) => void;
|
|
1686
|
+
/** Show an info notification */
|
|
1687
|
+
showInfo: (message: string, details?: string) => void;
|
|
1688
|
+
/** Dismiss a notification */
|
|
1689
|
+
dismissNotification: (id: string) => void;
|
|
1690
|
+
/** Clear all notifications */
|
|
1691
|
+
clearNotifications: () => void;
|
|
1692
|
+
}
|
|
1693
|
+
/**
|
|
1694
|
+
* Error boundary props
|
|
1695
|
+
*/
|
|
1696
|
+
interface ErrorBoundaryProps {
|
|
1697
|
+
/** Child components to render */
|
|
1698
|
+
children: ReactNode;
|
|
1699
|
+
/** Custom fallback UI */
|
|
1700
|
+
fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode);
|
|
1701
|
+
/** Callback when error occurs */
|
|
1702
|
+
onError?: (error: Error, errorInfo: ErrorInfo) => void;
|
|
1703
|
+
/** Whether to show error details */
|
|
1704
|
+
showDetails?: boolean;
|
|
1705
|
+
}
|
|
1706
|
+
/**
|
|
1707
|
+
* Error boundary state
|
|
1708
|
+
*/
|
|
1709
|
+
interface ErrorBoundaryState {
|
|
1710
|
+
hasError: boolean;
|
|
1711
|
+
error: Error | null;
|
|
1712
|
+
errorInfo: ErrorInfo | null;
|
|
1713
|
+
}
|
|
1714
|
+
/**
|
|
1715
|
+
* Hook to use error notifications
|
|
1716
|
+
*/
|
|
1717
|
+
declare function useErrorNotifications(): ErrorContextValue;
|
|
1718
|
+
/**
|
|
1719
|
+
* Error notification provider
|
|
1720
|
+
*/
|
|
1721
|
+
declare function ErrorProvider({ children }: {
|
|
1722
|
+
children: ReactNode;
|
|
1723
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1724
|
+
/**
|
|
1725
|
+
* Error Boundary class component
|
|
1726
|
+
*
|
|
1727
|
+
* Catches render errors in child components and displays fallback UI.
|
|
1728
|
+
*/
|
|
1729
|
+
declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
|
1730
|
+
constructor(props: ErrorBoundaryProps);
|
|
1731
|
+
static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState>;
|
|
1732
|
+
componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
|
|
1733
|
+
resetError: () => void;
|
|
1734
|
+
render(): ReactNode;
|
|
1735
|
+
}
|
|
1736
|
+
interface ParseErrorDisplayProps {
|
|
1737
|
+
message: string;
|
|
1738
|
+
details?: string;
|
|
1739
|
+
onRetry?: () => void;
|
|
1740
|
+
className?: string;
|
|
1741
|
+
}
|
|
1742
|
+
/**
|
|
1743
|
+
* Parse error display component
|
|
1744
|
+
*
|
|
1745
|
+
* Shows a helpful message for DOCX parsing errors.
|
|
1746
|
+
*/
|
|
1747
|
+
declare function ParseErrorDisplay({ message, details, onRetry, className, }: ParseErrorDisplayProps): React__default.ReactElement;
|
|
1748
|
+
interface UnsupportedFeatureWarningProps {
|
|
1749
|
+
feature: string;
|
|
1750
|
+
description?: string;
|
|
1751
|
+
className?: string;
|
|
1752
|
+
}
|
|
1753
|
+
/**
|
|
1754
|
+
* Unsupported feature warning component
|
|
1755
|
+
*
|
|
1756
|
+
* Shows a non-blocking warning for unsupported features.
|
|
1757
|
+
*/
|
|
1758
|
+
declare function UnsupportedFeatureWarning({ feature, description, className, }: UnsupportedFeatureWarningProps): React__default.ReactElement;
|
|
1759
|
+
/**
|
|
1760
|
+
* Check if an error is a parse error
|
|
1761
|
+
*/
|
|
1762
|
+
declare function isParseError(error: Error): boolean;
|
|
1763
|
+
/**
|
|
1764
|
+
* Get user-friendly error message
|
|
1765
|
+
*/
|
|
1766
|
+
declare function getUserFriendlyMessage(error: Error): string;
|
|
1767
|
+
|
|
1768
|
+
/**
|
|
1769
|
+
* Zoom Control Component (Radix UI)
|
|
1770
|
+
*
|
|
1771
|
+
* A dropdown for controlling document zoom level using Radix Select.
|
|
1772
|
+
*/
|
|
1773
|
+
interface ZoomLevel {
|
|
1774
|
+
value: number;
|
|
1775
|
+
label: string;
|
|
1776
|
+
}
|
|
1777
|
+
interface ZoomControlProps {
|
|
1778
|
+
value?: number;
|
|
1779
|
+
onChange?: (zoom: number) => void;
|
|
1780
|
+
levels?: ZoomLevel[];
|
|
1781
|
+
disabled?: boolean;
|
|
1782
|
+
className?: string;
|
|
1783
|
+
minZoom?: number;
|
|
1784
|
+
maxZoom?: number;
|
|
1785
|
+
showButtons?: boolean;
|
|
1786
|
+
persistZoom?: boolean;
|
|
1787
|
+
storageKey?: string;
|
|
1788
|
+
compact?: boolean;
|
|
1789
|
+
}
|
|
1790
|
+
declare function ZoomControl({ value, onChange, levels, disabled, className, compact, }: ZoomControlProps): react_jsx_runtime.JSX.Element;
|
|
1791
|
+
|
|
1792
|
+
/**
|
|
1793
|
+
* Font Picker Component (Radix UI)
|
|
1794
|
+
*
|
|
1795
|
+
* A dropdown selector for choosing font families using Radix Select.
|
|
1796
|
+
*/
|
|
1797
|
+
interface FontOption {
|
|
1798
|
+
name: string;
|
|
1799
|
+
fontFamily: string;
|
|
1800
|
+
category?: 'sans-serif' | 'serif' | 'monospace' | 'other';
|
|
1801
|
+
}
|
|
1802
|
+
interface FontPickerProps {
|
|
1803
|
+
value?: string;
|
|
1804
|
+
onChange?: (fontFamily: string) => void;
|
|
1805
|
+
fonts?: FontOption[];
|
|
1806
|
+
disabled?: boolean;
|
|
1807
|
+
className?: string;
|
|
1808
|
+
placeholder?: string;
|
|
1809
|
+
width?: number | string;
|
|
1810
|
+
showPreview?: boolean;
|
|
1811
|
+
}
|
|
1812
|
+
declare function FontPicker({ value, onChange, fonts, disabled, className, placeholder, width, showPreview, }: FontPickerProps): react_jsx_runtime.JSX.Element;
|
|
1813
|
+
|
|
1814
|
+
/**
|
|
1815
|
+
* Font Size Picker Component (Google Docs Style)
|
|
1816
|
+
*
|
|
1817
|
+
* A font size control with minus/plus buttons and editable input.
|
|
1818
|
+
* Features:
|
|
1819
|
+
* - Minus button to decrease font size
|
|
1820
|
+
* - Plus button to increase font size
|
|
1821
|
+
* - Editable input for custom sizes
|
|
1822
|
+
* - Click input to show dropdown with preset sizes
|
|
1823
|
+
*/
|
|
1824
|
+
interface FontSizePickerProps {
|
|
1825
|
+
value?: number;
|
|
1826
|
+
onChange?: (size: number) => void;
|
|
1827
|
+
sizes?: number[];
|
|
1828
|
+
disabled?: boolean;
|
|
1829
|
+
className?: string;
|
|
1830
|
+
placeholder?: string;
|
|
1831
|
+
width?: number | string;
|
|
1832
|
+
minSize?: number;
|
|
1833
|
+
maxSize?: number;
|
|
1834
|
+
}
|
|
1835
|
+
declare function FontSizePicker({ value, onChange, sizes, disabled, className, placeholder, minSize, maxSize, }: FontSizePickerProps): react_jsx_runtime.JSX.Element;
|
|
1836
|
+
|
|
1837
|
+
/**
|
|
1838
|
+
* Line Spacing Picker Component (Radix UI)
|
|
1839
|
+
*
|
|
1840
|
+
* A dropdown selector for choosing line spacing values using Radix Select.
|
|
1841
|
+
* Styled like Google Docs with options: Single, 1.15, 1.5, Double
|
|
1842
|
+
*/
|
|
1843
|
+
interface LineSpacingOption {
|
|
1844
|
+
label: string;
|
|
1845
|
+
value: number;
|
|
1846
|
+
twipsValue: number;
|
|
1847
|
+
}
|
|
1848
|
+
interface LineSpacingPickerProps {
|
|
1849
|
+
value?: number;
|
|
1850
|
+
onChange?: (twipsValue: number) => void;
|
|
1851
|
+
options?: LineSpacingOption[];
|
|
1852
|
+
disabled?: boolean;
|
|
1853
|
+
className?: string;
|
|
1854
|
+
width?: number | string;
|
|
1855
|
+
}
|
|
1856
|
+
declare function LineSpacingPicker({ value, onChange, options, disabled, className, width, }: LineSpacingPickerProps): react_jsx_runtime.JSX.Element;
|
|
1857
|
+
|
|
1858
|
+
/**
|
|
1859
|
+
* Color option for the color grid
|
|
1860
|
+
*/
|
|
1861
|
+
interface ColorOption {
|
|
1862
|
+
/** Display name for the color */
|
|
1863
|
+
name: string;
|
|
1864
|
+
/** Hex value (without #) */
|
|
1865
|
+
hex: string;
|
|
1866
|
+
/** Is this a theme color? */
|
|
1867
|
+
isTheme?: boolean;
|
|
1868
|
+
/** Theme color slot if applicable */
|
|
1869
|
+
themeSlot?: string;
|
|
1870
|
+
}
|
|
1871
|
+
/**
|
|
1872
|
+
* Props for the ColorPicker component
|
|
1873
|
+
*/
|
|
1874
|
+
interface ColorPickerProps {
|
|
1875
|
+
/** Current color value */
|
|
1876
|
+
value?: string;
|
|
1877
|
+
/** Callback when color is selected */
|
|
1878
|
+
onChange?: (color: string) => void;
|
|
1879
|
+
/** Type of color picker */
|
|
1880
|
+
type?: 'text' | 'highlight';
|
|
1881
|
+
/** Theme for resolving theme colors */
|
|
1882
|
+
theme?: Theme | null;
|
|
1883
|
+
/** Custom colors to display */
|
|
1884
|
+
colors?: ColorOption[];
|
|
1885
|
+
/** Whether the picker is disabled */
|
|
1886
|
+
disabled?: boolean;
|
|
1887
|
+
/** Additional CSS class name */
|
|
1888
|
+
className?: string;
|
|
1889
|
+
/** Additional inline styles */
|
|
1890
|
+
style?: CSSProperties;
|
|
1891
|
+
/** Placeholder/tooltip text */
|
|
1892
|
+
title?: string;
|
|
1893
|
+
/** Custom button content */
|
|
1894
|
+
children?: ReactNode;
|
|
1895
|
+
/** Width of the dropdown */
|
|
1896
|
+
dropdownWidth?: number;
|
|
1897
|
+
/** Show "No Color" option */
|
|
1898
|
+
showNoColor?: boolean;
|
|
1899
|
+
/** Show "More Colors" option for custom input */
|
|
1900
|
+
showMoreColors?: boolean;
|
|
1901
|
+
}
|
|
1902
|
+
/**
|
|
1903
|
+
* Color picker component with dropdown grid
|
|
1904
|
+
*/
|
|
1905
|
+
declare function ColorPicker({ value, onChange, type, theme: _theme, colors, disabled, className, style, title, children, dropdownWidth, showNoColor, showMoreColors, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
|
|
1906
|
+
|
|
1907
|
+
interface StyleOption {
|
|
1908
|
+
styleId: string;
|
|
1909
|
+
name: string;
|
|
1910
|
+
type: StyleType;
|
|
1911
|
+
isDefault?: boolean;
|
|
1912
|
+
qFormat?: boolean;
|
|
1913
|
+
priority?: number;
|
|
1914
|
+
/** Font size in half-points for visual preview */
|
|
1915
|
+
fontSize?: number;
|
|
1916
|
+
/** Bold styling */
|
|
1917
|
+
bold?: boolean;
|
|
1918
|
+
/** Italic styling */
|
|
1919
|
+
italic?: boolean;
|
|
1920
|
+
/** Text color (RGB hex) */
|
|
1921
|
+
color?: string;
|
|
1922
|
+
}
|
|
1923
|
+
interface StylePickerProps {
|
|
1924
|
+
value?: string;
|
|
1925
|
+
onChange?: (styleId: string) => void;
|
|
1926
|
+
styles?: Style[];
|
|
1927
|
+
theme?: Theme | null;
|
|
1928
|
+
disabled?: boolean;
|
|
1929
|
+
className?: string;
|
|
1930
|
+
placeholder?: string;
|
|
1931
|
+
width?: number | string;
|
|
1932
|
+
showPreview?: boolean;
|
|
1933
|
+
styleTypes?: StyleType[];
|
|
1934
|
+
quickFormatOnly?: boolean;
|
|
1935
|
+
}
|
|
1936
|
+
declare function StylePicker({ value, onChange, styles, disabled, className, placeholder, width, quickFormatOnly, }: StylePickerProps): react_jsx_runtime.JSX.Element;
|
|
1937
|
+
|
|
1938
|
+
/**
|
|
1939
|
+
* Props for the AlignmentButtons component
|
|
1940
|
+
*/
|
|
1941
|
+
interface AlignmentButtonsProps {
|
|
1942
|
+
/** Current alignment value */
|
|
1943
|
+
value?: ParagraphAlignment;
|
|
1944
|
+
/** Callback when alignment is changed */
|
|
1945
|
+
onChange?: (alignment: ParagraphAlignment) => void;
|
|
1946
|
+
/** Whether the buttons are disabled */
|
|
1947
|
+
disabled?: boolean;
|
|
1948
|
+
/** Additional CSS class name */
|
|
1949
|
+
className?: string;
|
|
1950
|
+
/** Additional inline styles */
|
|
1951
|
+
style?: CSSProperties;
|
|
1952
|
+
/** Show labels next to icons */
|
|
1953
|
+
showLabels?: boolean;
|
|
1954
|
+
/** Compact mode (smaller buttons) */
|
|
1955
|
+
compact?: boolean;
|
|
1956
|
+
}
|
|
1957
|
+
/**
|
|
1958
|
+
* Alignment buttons component for paragraph alignment controls
|
|
1959
|
+
*/
|
|
1960
|
+
declare function AlignmentButtons({ value, onChange, disabled, className, style, showLabels, compact, }: AlignmentButtonsProps): react_jsx_runtime.JSX.Element;
|
|
1961
|
+
|
|
1962
|
+
/**
|
|
1963
|
+
* HorizontalRuler Component
|
|
1964
|
+
*
|
|
1965
|
+
* A horizontal ruler that displays above the document with:
|
|
1966
|
+
* - Page width scale with tick marks
|
|
1967
|
+
* - Left and right margin indicators
|
|
1968
|
+
* - First line indent indicator
|
|
1969
|
+
* - Optional dragging to adjust margins
|
|
1970
|
+
* - Support for zoom levels
|
|
1971
|
+
*
|
|
1972
|
+
* Similar to Microsoft Word's horizontal ruler.
|
|
1973
|
+
*/
|
|
1974
|
+
|
|
1975
|
+
/**
|
|
1976
|
+
* Props for the HorizontalRuler component
|
|
1977
|
+
*/
|
|
1978
|
+
interface HorizontalRulerProps {
|
|
1979
|
+
/** Section properties for page layout */
|
|
1980
|
+
sectionProps?: SectionProperties | null;
|
|
1981
|
+
/** Zoom level (1.0 = 100%) */
|
|
1982
|
+
zoom?: number;
|
|
1983
|
+
/** Whether margins can be dragged to adjust */
|
|
1984
|
+
editable?: boolean;
|
|
1985
|
+
/** Callback when left margin changes (in twips) */
|
|
1986
|
+
onLeftMarginChange?: (marginTwips: number) => void;
|
|
1987
|
+
/** Callback when right margin changes (in twips) */
|
|
1988
|
+
onRightMarginChange?: (marginTwips: number) => void;
|
|
1989
|
+
/** Callback when first line indent changes (in twips) */
|
|
1990
|
+
onFirstLineIndentChange?: (indentTwips: number) => void;
|
|
1991
|
+
/** Show first line indent marker */
|
|
1992
|
+
showFirstLineIndent?: boolean;
|
|
1993
|
+
/** First line indent value (in twips) */
|
|
1994
|
+
firstLineIndent?: number;
|
|
1995
|
+
/** Unit to display (inches or cm) */
|
|
1996
|
+
unit?: 'inch' | 'cm';
|
|
1997
|
+
/** Additional CSS class name */
|
|
1998
|
+
className?: string;
|
|
1999
|
+
/** Additional inline styles */
|
|
2000
|
+
style?: CSSProperties;
|
|
2001
|
+
}
|
|
2002
|
+
/**
|
|
2003
|
+
* HorizontalRuler - displays a ruler with margin markers
|
|
2004
|
+
*/
|
|
2005
|
+
declare function HorizontalRuler({ sectionProps, zoom, editable, onLeftMarginChange, onRightMarginChange, onFirstLineIndentChange, showFirstLineIndent, firstLineIndent, unit, className, style, }: HorizontalRulerProps): React__default.ReactElement;
|
|
2006
|
+
/**
|
|
2007
|
+
* Convert a ruler position to margin value
|
|
2008
|
+
*/
|
|
2009
|
+
declare function positionToMargin(positionPx: number, side: 'left' | 'right', pageWidthPx: number, zoom: number): number;
|
|
2010
|
+
/**
|
|
2011
|
+
* Get ruler dimensions based on section properties
|
|
2012
|
+
*/
|
|
2013
|
+
declare function getRulerDimensions(sectionProps?: SectionProperties | null, zoom?: number): {
|
|
2014
|
+
width: number;
|
|
2015
|
+
leftMargin: number;
|
|
2016
|
+
rightMargin: number;
|
|
2017
|
+
contentWidth: number;
|
|
2018
|
+
};
|
|
2019
|
+
/**
|
|
2020
|
+
* Get margin value in display units
|
|
2021
|
+
*/
|
|
2022
|
+
declare function getMarginInUnits(marginTwips: number, unit: 'inch' | 'cm'): string;
|
|
2023
|
+
/**
|
|
2024
|
+
* Parse a margin value from display units to twips
|
|
2025
|
+
*/
|
|
2026
|
+
declare function parseMarginFromUnits(value: string, unit: 'inch' | 'cm'): number | null;
|
|
2027
|
+
|
|
2028
|
+
/**
|
|
2029
|
+
* TableBorderPicker Component
|
|
2030
|
+
*
|
|
2031
|
+
* UI for changing table/cell border styling:
|
|
2032
|
+
* - Border style (none, single, double, dashed, dotted, etc.)
|
|
2033
|
+
* - Border color
|
|
2034
|
+
* - Border width
|
|
2035
|
+
* - Which borders to apply (all, top, bottom, left, right, inside, outside)
|
|
2036
|
+
*/
|
|
2037
|
+
|
|
2038
|
+
/**
|
|
2039
|
+
* Border style options (OOXML border styles)
|
|
2040
|
+
*/
|
|
2041
|
+
type BorderStyleType = 'none' | 'single' | 'double' | 'dotted' | 'dashed' | 'dashSmallGap' | 'dotDash' | 'dotDotDash' | 'triple' | 'thick' | 'thickThinSmallGap' | 'thinThickSmallGap';
|
|
2042
|
+
/**
|
|
2043
|
+
* Border position options
|
|
2044
|
+
*/
|
|
2045
|
+
type BorderPosition = 'all' | 'outside' | 'inside' | 'top' | 'bottom' | 'left' | 'right' | 'insideHorizontal' | 'insideVertical' | 'none';
|
|
2046
|
+
/**
|
|
2047
|
+
* Border configuration
|
|
2048
|
+
*/
|
|
2049
|
+
interface BorderConfig {
|
|
2050
|
+
style: BorderStyleType;
|
|
2051
|
+
color: string;
|
|
2052
|
+
width: number;
|
|
2053
|
+
}
|
|
2054
|
+
/**
|
|
2055
|
+
* Props for TableBorderPicker
|
|
2056
|
+
*/
|
|
2057
|
+
interface TableBorderPickerProps {
|
|
2058
|
+
/** Current border configuration */
|
|
2059
|
+
currentBorder?: BorderConfig;
|
|
2060
|
+
/** Callback when border is applied */
|
|
2061
|
+
onApply?: (position: BorderPosition, config: BorderConfig) => void;
|
|
2062
|
+
/** Whether the picker is disabled */
|
|
2063
|
+
disabled?: boolean;
|
|
2064
|
+
/** Additional CSS class */
|
|
2065
|
+
className?: string;
|
|
2066
|
+
/** Additional inline styles */
|
|
2067
|
+
style?: CSSProperties;
|
|
2068
|
+
/** Compact mode */
|
|
2069
|
+
compact?: boolean;
|
|
2070
|
+
}
|
|
2071
|
+
/**
|
|
2072
|
+
* Available border styles
|
|
2073
|
+
*/
|
|
2074
|
+
declare const BORDER_STYLES: {
|
|
2075
|
+
value: BorderStyleType;
|
|
2076
|
+
label: string;
|
|
2077
|
+
}[];
|
|
2078
|
+
/**
|
|
2079
|
+
* Available border widths (in eighths of a point)
|
|
2080
|
+
*/
|
|
2081
|
+
declare const BORDER_WIDTHS: {
|
|
2082
|
+
value: number;
|
|
2083
|
+
label: string;
|
|
2084
|
+
}[];
|
|
2085
|
+
/**
|
|
2086
|
+
* Border position options
|
|
2087
|
+
*/
|
|
2088
|
+
declare const BORDER_POSITIONS: {
|
|
2089
|
+
value: BorderPosition;
|
|
2090
|
+
label: string;
|
|
2091
|
+
icon: ReactNode;
|
|
2092
|
+
}[];
|
|
2093
|
+
/**
|
|
2094
|
+
* Default border configuration
|
|
2095
|
+
*/
|
|
2096
|
+
declare const DEFAULT_BORDER_CONFIG: BorderConfig;
|
|
2097
|
+
/**
|
|
2098
|
+
* TableBorderPicker - UI for styling table/cell borders
|
|
2099
|
+
*/
|
|
2100
|
+
declare function TableBorderPicker({ currentBorder, onApply, disabled, className, style: additionalStyle, compact, }: TableBorderPickerProps): React__default.ReactElement;
|
|
2101
|
+
/**
|
|
2102
|
+
* Map OOXML border style to CSS border-style
|
|
2103
|
+
*/
|
|
2104
|
+
declare function mapStyleToCss(style: BorderStyleType): string;
|
|
2105
|
+
/**
|
|
2106
|
+
* Create BorderSpec from BorderConfig
|
|
2107
|
+
*/
|
|
2108
|
+
declare function createBorderSpec(config: BorderConfig): BorderSpec;
|
|
2109
|
+
/**
|
|
2110
|
+
* Create BorderConfig from BorderSpec
|
|
2111
|
+
*/
|
|
2112
|
+
declare function createBorderConfig(spec: BorderSpec | undefined): BorderConfig;
|
|
2113
|
+
/**
|
|
2114
|
+
* Get border position label
|
|
2115
|
+
*/
|
|
2116
|
+
declare function getBorderPositionLabel(position: BorderPosition): string;
|
|
2117
|
+
/**
|
|
2118
|
+
* Get available border styles
|
|
2119
|
+
*/
|
|
2120
|
+
declare function getAvailableBorderStyles(): typeof BORDER_STYLES;
|
|
2121
|
+
/**
|
|
2122
|
+
* Get available border widths
|
|
2123
|
+
*/
|
|
2124
|
+
declare function getAvailableBorderWidths(): typeof BORDER_WIDTHS;
|
|
2125
|
+
|
|
2126
|
+
/**
|
|
2127
|
+
* CellBackgroundPicker Component
|
|
2128
|
+
*
|
|
2129
|
+
* UI for changing table cell background/shading color.
|
|
2130
|
+
* Provides a color grid similar to the text highlight picker but
|
|
2131
|
+
* optimized for table cell backgrounds.
|
|
2132
|
+
*/
|
|
2133
|
+
|
|
2134
|
+
/**
|
|
2135
|
+
* Color option for the picker
|
|
2136
|
+
*/
|
|
2137
|
+
interface CellColorOption {
|
|
2138
|
+
/** Hex color value */
|
|
2139
|
+
hex: string;
|
|
2140
|
+
/** Display name */
|
|
2141
|
+
name: string;
|
|
2142
|
+
}
|
|
2143
|
+
/**
|
|
2144
|
+
* Props for CellBackgroundPicker
|
|
2145
|
+
*/
|
|
2146
|
+
interface CellBackgroundPickerProps {
|
|
2147
|
+
/** Current background color (hex) */
|
|
2148
|
+
value?: string | null;
|
|
2149
|
+
/** Callback when color is selected */
|
|
2150
|
+
onChange?: (color: string | null) => void;
|
|
2151
|
+
/** Custom color options */
|
|
2152
|
+
colors?: CellColorOption[];
|
|
2153
|
+
/** Whether the picker is disabled */
|
|
2154
|
+
disabled?: boolean;
|
|
2155
|
+
/** Additional CSS class */
|
|
2156
|
+
className?: string;
|
|
2157
|
+
/** Additional inline styles */
|
|
2158
|
+
style?: CSSProperties;
|
|
2159
|
+
/** Show "No Fill" option (default: true) */
|
|
2160
|
+
showNoFill?: boolean;
|
|
2161
|
+
/** Show custom color input (default: true) */
|
|
2162
|
+
showCustomColor?: boolean;
|
|
2163
|
+
/** Compact mode for toolbar */
|
|
2164
|
+
compact?: boolean;
|
|
2165
|
+
}
|
|
2166
|
+
/**
|
|
2167
|
+
* Default cell background colors
|
|
2168
|
+
* Common colors for table cell backgrounds
|
|
2169
|
+
*/
|
|
2170
|
+
declare const DEFAULT_CELL_COLORS: CellColorOption[];
|
|
2171
|
+
/**
|
|
2172
|
+
* CellBackgroundPicker - Color picker for table cell backgrounds
|
|
2173
|
+
*/
|
|
2174
|
+
declare function CellBackgroundPicker({ value, onChange, colors, disabled, className, style: additionalStyle, showNoFill, showCustomColor, compact, }: CellBackgroundPickerProps): React__default.ReactElement;
|
|
2175
|
+
/**
|
|
2176
|
+
* Get default cell colors
|
|
2177
|
+
*/
|
|
2178
|
+
declare function getDefaultCellColors(): CellColorOption[];
|
|
2179
|
+
/**
|
|
2180
|
+
* Create a color option
|
|
2181
|
+
*/
|
|
2182
|
+
declare function createCellColorOption(hex: string, name?: string): CellColorOption;
|
|
2183
|
+
/**
|
|
2184
|
+
* Check if color is in the default palette
|
|
2185
|
+
*/
|
|
2186
|
+
declare function isDefaultCellColor(hex: string): boolean;
|
|
2187
|
+
/**
|
|
2188
|
+
* Get color name from hex
|
|
2189
|
+
*/
|
|
2190
|
+
declare function getCellColorName(hex: string): string;
|
|
2191
|
+
/**
|
|
2192
|
+
* Create ShadingProperties from color
|
|
2193
|
+
*/
|
|
2194
|
+
declare function createShadingFromColor(color: string | null): ShadingProperties | undefined;
|
|
2195
|
+
/**
|
|
2196
|
+
* Get color from ShadingProperties
|
|
2197
|
+
*/
|
|
2198
|
+
declare function getColorFromShading(shading: ShadingProperties | undefined): string | null;
|
|
2199
|
+
/**
|
|
2200
|
+
* Get contrasting text color (black or white) for a background
|
|
2201
|
+
*/
|
|
2202
|
+
declare function getContrastingTextColor(bgHex: string): string;
|
|
2203
|
+
|
|
2204
|
+
/**
|
|
2205
|
+
* Unsaved Changes Indicator Component
|
|
2206
|
+
*
|
|
2207
|
+
* Visual indicator that shows when document has unsaved changes.
|
|
2208
|
+
* Features:
|
|
2209
|
+
* - Configurable appearance (dot, badge, text)
|
|
2210
|
+
* - Pulse animation option for visibility
|
|
2211
|
+
* - Hook for tracking changes
|
|
2212
|
+
* - Browser beforeunload warning
|
|
2213
|
+
*/
|
|
2214
|
+
|
|
2215
|
+
/**
|
|
2216
|
+
* Indicator variant type
|
|
2217
|
+
*/
|
|
2218
|
+
type IndicatorVariant = 'dot' | 'badge' | 'text' | 'icon';
|
|
2219
|
+
/**
|
|
2220
|
+
* Indicator position type
|
|
2221
|
+
*/
|
|
2222
|
+
type IndicatorPosition = 'inline' | 'absolute-top-right' | 'absolute-top-left';
|
|
2223
|
+
/**
|
|
2224
|
+
* Unsaved indicator props
|
|
2225
|
+
*/
|
|
2226
|
+
interface UnsavedIndicatorProps {
|
|
2227
|
+
/** Whether there are unsaved changes */
|
|
2228
|
+
hasUnsavedChanges: boolean;
|
|
2229
|
+
/** Variant of the indicator */
|
|
2230
|
+
variant?: IndicatorVariant;
|
|
2231
|
+
/** Position of the indicator */
|
|
2232
|
+
position?: IndicatorPosition;
|
|
2233
|
+
/** Whether to show pulse animation */
|
|
2234
|
+
showPulse?: boolean;
|
|
2235
|
+
/** Custom label for text variant */
|
|
2236
|
+
label?: string;
|
|
2237
|
+
/** Custom saved label for text variant */
|
|
2238
|
+
savedLabel?: string;
|
|
2239
|
+
/** Whether to show indicator when saved (always show) */
|
|
2240
|
+
showWhenSaved?: boolean;
|
|
2241
|
+
/** Custom color for unsaved state */
|
|
2242
|
+
unsavedColor?: string;
|
|
2243
|
+
/** Custom color for saved state */
|
|
2244
|
+
savedColor?: string;
|
|
2245
|
+
/** Size in pixels (for dot/icon) */
|
|
2246
|
+
size?: number;
|
|
2247
|
+
/** Additional className */
|
|
2248
|
+
className?: string;
|
|
2249
|
+
/** Additional inline styles */
|
|
2250
|
+
style?: React__default.CSSProperties;
|
|
2251
|
+
/** Click handler */
|
|
2252
|
+
onClick?: () => void;
|
|
2253
|
+
/** Title/tooltip text */
|
|
2254
|
+
title?: string;
|
|
2255
|
+
}
|
|
2256
|
+
/**
|
|
2257
|
+
* Hook options for tracking unsaved changes
|
|
2258
|
+
*/
|
|
2259
|
+
interface UseUnsavedChangesOptions {
|
|
2260
|
+
/** The document to track */
|
|
2261
|
+
document?: Document | null;
|
|
2262
|
+
/** Whether to warn before leaving page */
|
|
2263
|
+
warnBeforeLeave?: boolean;
|
|
2264
|
+
/** Custom warning message */
|
|
2265
|
+
warningMessage?: string;
|
|
2266
|
+
/** Whether tracking is enabled */
|
|
2267
|
+
enabled?: boolean;
|
|
2268
|
+
/** Callback when changes status changes */
|
|
2269
|
+
onChangeStatusChange?: (hasChanges: boolean) => void;
|
|
2270
|
+
}
|
|
2271
|
+
/**
|
|
2272
|
+
* Hook return value
|
|
2273
|
+
*/
|
|
2274
|
+
interface UseUnsavedChangesReturn {
|
|
2275
|
+
/** Whether there are unsaved changes */
|
|
2276
|
+
hasUnsavedChanges: boolean;
|
|
2277
|
+
/** Mark the document as saved (resets change tracking) */
|
|
2278
|
+
markAsSaved: () => void;
|
|
2279
|
+
/** Mark the document as changed */
|
|
2280
|
+
markAsChanged: () => void;
|
|
2281
|
+
/** Reset tracking (resets baseline) */
|
|
2282
|
+
resetTracking: (newDocument?: Document | null) => void;
|
|
2283
|
+
/** The last saved document snapshot */
|
|
2284
|
+
lastSavedDocument: Document | null;
|
|
2285
|
+
/** Number of changes since last save */
|
|
2286
|
+
changeCount: number;
|
|
2287
|
+
}
|
|
2288
|
+
declare const UnsavedIndicator: React__default.FC<UnsavedIndicatorProps>;
|
|
2289
|
+
/**
|
|
2290
|
+
* Hook to track unsaved changes in a document
|
|
2291
|
+
*/
|
|
2292
|
+
declare function useUnsavedChanges(options?: UseUnsavedChangesOptions): UseUnsavedChangesReturn;
|
|
2293
|
+
/**
|
|
2294
|
+
* Get indicator variant label
|
|
2295
|
+
*/
|
|
2296
|
+
declare function getVariantLabel(variant: IndicatorVariant): string;
|
|
2297
|
+
/**
|
|
2298
|
+
* Get all indicator variants
|
|
2299
|
+
*/
|
|
2300
|
+
declare function getAllVariants(): IndicatorVariant[];
|
|
2301
|
+
/**
|
|
2302
|
+
* Get all indicator positions
|
|
2303
|
+
*/
|
|
2304
|
+
declare function getAllPositions(): IndicatorPosition[];
|
|
2305
|
+
/**
|
|
2306
|
+
* Create a document change tracker
|
|
2307
|
+
* Simple utility for external change tracking
|
|
2308
|
+
*/
|
|
2309
|
+
declare function createChangeTracker(): {
|
|
2310
|
+
markChanged: () => void;
|
|
2311
|
+
markSaved: () => void;
|
|
2312
|
+
getState: () => {
|
|
2313
|
+
changeCount: number;
|
|
2314
|
+
lastSaveTime: Date | null;
|
|
2315
|
+
hasUnsavedChanges: boolean;
|
|
2316
|
+
};
|
|
2317
|
+
reset: () => void;
|
|
2318
|
+
};
|
|
2319
|
+
|
|
2320
|
+
/**
|
|
2321
|
+
* Loading Indicator Component
|
|
2322
|
+
*
|
|
2323
|
+
* Displays loading states for operations with configurable appearance.
|
|
2324
|
+
* Features:
|
|
2325
|
+
* - Multiple spinner styles (spinner, dots, bar, pulse)
|
|
2326
|
+
* - Overlay mode for blocking UI during operations
|
|
2327
|
+
* - Inline mode for subtle loading indication
|
|
2328
|
+
* - Progress bar variant
|
|
2329
|
+
* - Hook for managing loading states
|
|
2330
|
+
*/
|
|
2331
|
+
|
|
2332
|
+
/**
|
|
2333
|
+
* Loading indicator variant
|
|
2334
|
+
*/
|
|
2335
|
+
type LoadingVariant = 'spinner' | 'dots' | 'bar' | 'pulse' | 'progress';
|
|
2336
|
+
/**
|
|
2337
|
+
* Loading indicator size
|
|
2338
|
+
*/
|
|
2339
|
+
type LoadingSize = 'small' | 'medium' | 'large';
|
|
2340
|
+
/**
|
|
2341
|
+
* Loading indicator props
|
|
2342
|
+
*/
|
|
2343
|
+
interface LoadingIndicatorProps {
|
|
2344
|
+
/** Whether loading is active */
|
|
2345
|
+
isLoading: boolean;
|
|
2346
|
+
/** Variant of the loading indicator */
|
|
2347
|
+
variant?: LoadingVariant;
|
|
2348
|
+
/** Size of the indicator */
|
|
2349
|
+
size?: LoadingSize;
|
|
2350
|
+
/** Loading message to display */
|
|
2351
|
+
message?: string;
|
|
2352
|
+
/** Whether to show as full-screen overlay */
|
|
2353
|
+
overlay?: boolean;
|
|
2354
|
+
/** Overlay background opacity (0-1) */
|
|
2355
|
+
overlayOpacity?: number;
|
|
2356
|
+
/** Progress percentage (0-100) for progress variant */
|
|
2357
|
+
progress?: number;
|
|
2358
|
+
/** Show progress percentage text */
|
|
2359
|
+
showProgressText?: boolean;
|
|
2360
|
+
/** Custom color */
|
|
2361
|
+
color?: string;
|
|
2362
|
+
/** Additional className */
|
|
2363
|
+
className?: string;
|
|
2364
|
+
/** Additional inline styles */
|
|
2365
|
+
style?: React__default.CSSProperties;
|
|
2366
|
+
}
|
|
2367
|
+
/**
|
|
2368
|
+
* Options for useLoading hook
|
|
2369
|
+
*/
|
|
2370
|
+
interface UseLoadingOptions {
|
|
2371
|
+
/** Initial loading state */
|
|
2372
|
+
initialLoading?: boolean;
|
|
2373
|
+
/** Minimum loading duration in ms (prevents flash) */
|
|
2374
|
+
minDuration?: number;
|
|
2375
|
+
/** Callback when loading starts */
|
|
2376
|
+
onStart?: () => void;
|
|
2377
|
+
/** Callback when loading ends */
|
|
2378
|
+
onEnd?: () => void;
|
|
2379
|
+
}
|
|
2380
|
+
/**
|
|
2381
|
+
* Return value of useLoading hook
|
|
2382
|
+
*/
|
|
2383
|
+
interface UseLoadingReturn {
|
|
2384
|
+
/** Current loading state */
|
|
2385
|
+
isLoading: boolean;
|
|
2386
|
+
/** Current message */
|
|
2387
|
+
message: string | null;
|
|
2388
|
+
/** Current progress (0-100) */
|
|
2389
|
+
progress: number;
|
|
2390
|
+
/** Start loading with optional message */
|
|
2391
|
+
startLoading: (message?: string) => void;
|
|
2392
|
+
/** Stop loading */
|
|
2393
|
+
stopLoading: () => void;
|
|
2394
|
+
/** Update progress (0-100) */
|
|
2395
|
+
setProgress: (progress: number) => void;
|
|
2396
|
+
/** Update message */
|
|
2397
|
+
setMessage: (message: string | null) => void;
|
|
2398
|
+
/** Wrap an async operation with loading state */
|
|
2399
|
+
withLoading: <T>(operation: () => Promise<T>, message?: string) => Promise<T>;
|
|
2400
|
+
}
|
|
2401
|
+
/**
|
|
2402
|
+
* Loading operation state
|
|
2403
|
+
*/
|
|
2404
|
+
interface LoadingOperation {
|
|
2405
|
+
id: string;
|
|
2406
|
+
message?: string;
|
|
2407
|
+
progress?: number;
|
|
2408
|
+
startTime: number;
|
|
2409
|
+
}
|
|
2410
|
+
declare const LoadingIndicator: React__default.FC<LoadingIndicatorProps>;
|
|
2411
|
+
/**
|
|
2412
|
+
* Hook to manage loading states
|
|
2413
|
+
*/
|
|
2414
|
+
declare function useLoading(options?: UseLoadingOptions): UseLoadingReturn;
|
|
2415
|
+
/**
|
|
2416
|
+
* Hook to manage multiple concurrent loading operations
|
|
2417
|
+
*/
|
|
2418
|
+
declare function useLoadingOperations(): {
|
|
2419
|
+
operations: LoadingOperation[];
|
|
2420
|
+
isAnyLoading: boolean;
|
|
2421
|
+
startOperation: (id: string, message?: string) => void;
|
|
2422
|
+
updateOperation: (id: string, updates: Partial<LoadingOperation>) => void;
|
|
2423
|
+
endOperation: (id: string) => void;
|
|
2424
|
+
getOperation: (id: string) => LoadingOperation | undefined;
|
|
2425
|
+
};
|
|
2426
|
+
/**
|
|
2427
|
+
* Get loading variant label
|
|
2428
|
+
*/
|
|
2429
|
+
declare function getLoadingVariantLabel(variant: LoadingVariant): string;
|
|
2430
|
+
/**
|
|
2431
|
+
* Get all loading variants
|
|
2432
|
+
*/
|
|
2433
|
+
declare function getAllLoadingVariants(): LoadingVariant[];
|
|
2434
|
+
/**
|
|
2435
|
+
* Get all loading sizes
|
|
2436
|
+
*/
|
|
2437
|
+
declare function getAllLoadingSizes(): LoadingSize[];
|
|
2438
|
+
/**
|
|
2439
|
+
* Create a delay promise for testing loading states
|
|
2440
|
+
*/
|
|
2441
|
+
declare function delay(ms: number): Promise<void>;
|
|
2442
|
+
|
|
2443
|
+
/**
|
|
2444
|
+
* Responsive Toolbar Component
|
|
2445
|
+
*
|
|
2446
|
+
* A responsive toolbar wrapper that collapses items into an overflow menu
|
|
2447
|
+
* when the screen is narrow.
|
|
2448
|
+
*
|
|
2449
|
+
* Features:
|
|
2450
|
+
* - Automatically measures available space
|
|
2451
|
+
* - Moves items to overflow menu when they don't fit
|
|
2452
|
+
* - Priority-based item ordering
|
|
2453
|
+
* - Configurable breakpoints
|
|
2454
|
+
* - ResizeObserver for dynamic resizing
|
|
2455
|
+
*/
|
|
2456
|
+
|
|
2457
|
+
/**
|
|
2458
|
+
* Priority level for toolbar items
|
|
2459
|
+
* Lower numbers = higher priority (shown first, hidden last)
|
|
2460
|
+
*/
|
|
2461
|
+
type ToolbarItemPriority = 1 | 2 | 3 | 4 | 5;
|
|
2462
|
+
/**
|
|
2463
|
+
* Toolbar item configuration
|
|
2464
|
+
*/
|
|
2465
|
+
interface ToolbarItem {
|
|
2466
|
+
/** Unique identifier */
|
|
2467
|
+
id: string;
|
|
2468
|
+
/** The content to render */
|
|
2469
|
+
content: ReactNode;
|
|
2470
|
+
/** Priority level (1 = highest, 5 = lowest) */
|
|
2471
|
+
priority?: ToolbarItemPriority;
|
|
2472
|
+
/** Minimum width in pixels (for measuring) */
|
|
2473
|
+
minWidth?: number;
|
|
2474
|
+
/** Whether this item should never be hidden */
|
|
2475
|
+
alwaysVisible?: boolean;
|
|
2476
|
+
/** Whether to show separator after this item */
|
|
2477
|
+
separatorAfter?: boolean;
|
|
2478
|
+
/** Group name for keeping items together */
|
|
2479
|
+
group?: string;
|
|
2480
|
+
}
|
|
2481
|
+
/**
|
|
2482
|
+
* Props for ResponsiveToolbar component
|
|
2483
|
+
*/
|
|
2484
|
+
interface ResponsiveToolbarProps {
|
|
2485
|
+
/** Toolbar items */
|
|
2486
|
+
items: ToolbarItem[];
|
|
2487
|
+
/** Additional items for overflow menu only */
|
|
2488
|
+
overflowItems?: ToolbarItem[];
|
|
2489
|
+
/** Whether to show overflow button even when all items fit */
|
|
2490
|
+
alwaysShowOverflow?: boolean;
|
|
2491
|
+
/** Custom overflow button renderer */
|
|
2492
|
+
renderOverflowButton?: (itemCount: number, isOpen: boolean, onClick: () => void) => ReactNode;
|
|
2493
|
+
/** Custom overflow menu renderer */
|
|
2494
|
+
renderOverflowMenu?: (items: ToolbarItem[], onClose: () => void) => ReactNode;
|
|
2495
|
+
/** Gap between items in pixels */
|
|
2496
|
+
itemGap?: number;
|
|
2497
|
+
/** Padding for the toolbar */
|
|
2498
|
+
padding?: number | string;
|
|
2499
|
+
/** Minimum width for overflow button */
|
|
2500
|
+
overflowButtonWidth?: number;
|
|
2501
|
+
/** Additional className */
|
|
2502
|
+
className?: string;
|
|
2503
|
+
/** Additional styles */
|
|
2504
|
+
style?: CSSProperties;
|
|
2505
|
+
/** Height of the toolbar */
|
|
2506
|
+
height?: number | string;
|
|
2507
|
+
/** Background color */
|
|
2508
|
+
backgroundColor?: string;
|
|
2509
|
+
/** Border styles */
|
|
2510
|
+
borderBottom?: string;
|
|
2511
|
+
}
|
|
2512
|
+
/**
|
|
2513
|
+
* Options for useResponsiveToolbar hook
|
|
2514
|
+
*/
|
|
2515
|
+
interface UseResponsiveToolbarOptions {
|
|
2516
|
+
/** Container ref */
|
|
2517
|
+
containerRef: React__default.RefObject<HTMLElement>;
|
|
2518
|
+
/** Total items */
|
|
2519
|
+
items: ToolbarItem[];
|
|
2520
|
+
/** Gap between items */
|
|
2521
|
+
itemGap?: number;
|
|
2522
|
+
/** Width reserved for overflow button */
|
|
2523
|
+
overflowButtonWidth?: number;
|
|
2524
|
+
}
|
|
2525
|
+
/**
|
|
2526
|
+
* Return value of useResponsiveToolbar hook
|
|
2527
|
+
*/
|
|
2528
|
+
interface UseResponsiveToolbarReturn {
|
|
2529
|
+
/** Items that fit in visible area */
|
|
2530
|
+
visibleItems: ToolbarItem[];
|
|
2531
|
+
/** Items in overflow menu */
|
|
2532
|
+
overflowItems: ToolbarItem[];
|
|
2533
|
+
/** Whether overflow menu is needed */
|
|
2534
|
+
hasOverflow: boolean;
|
|
2535
|
+
/** Force a recalculation */
|
|
2536
|
+
recalculate: () => void;
|
|
2537
|
+
}
|
|
2538
|
+
/**
|
|
2539
|
+
* Hook to calculate which items fit in the toolbar
|
|
2540
|
+
*/
|
|
2541
|
+
declare function useResponsiveToolbar(options: UseResponsiveToolbarOptions): UseResponsiveToolbarReturn;
|
|
2542
|
+
declare const ResponsiveToolbar: React__default.FC<ResponsiveToolbarProps>;
|
|
2543
|
+
interface ToolbarGroupProps {
|
|
2544
|
+
/** Group items */
|
|
2545
|
+
children: ReactNode;
|
|
2546
|
+
/** Gap between items */
|
|
2547
|
+
gap?: number;
|
|
2548
|
+
/** Whether to show separator after group */
|
|
2549
|
+
separatorAfter?: boolean;
|
|
2550
|
+
/** Additional className */
|
|
2551
|
+
className?: string;
|
|
2552
|
+
/** Additional styles */
|
|
2553
|
+
style?: CSSProperties;
|
|
2554
|
+
}
|
|
2555
|
+
declare const ToolbarGroup: React__default.FC<ToolbarGroupProps>;
|
|
2556
|
+
/**
|
|
2557
|
+
* Create a toolbar item
|
|
2558
|
+
*/
|
|
2559
|
+
declare function createToolbarItem(id: string, content: ReactNode, options?: Partial<Omit<ToolbarItem, 'id' | 'content'>>): ToolbarItem;
|
|
2560
|
+
/**
|
|
2561
|
+
* Create toolbar items from an array of configs
|
|
2562
|
+
*/
|
|
2563
|
+
declare function createToolbarItems(configs: Array<{
|
|
2564
|
+
id: string;
|
|
2565
|
+
content: ReactNode;
|
|
2566
|
+
priority?: ToolbarItemPriority;
|
|
2567
|
+
minWidth?: number;
|
|
2568
|
+
alwaysVisible?: boolean;
|
|
2569
|
+
separatorAfter?: boolean;
|
|
2570
|
+
group?: string;
|
|
2571
|
+
}>): ToolbarItem[];
|
|
2572
|
+
/**
|
|
2573
|
+
* Get recommended priority for common toolbar items
|
|
2574
|
+
*/
|
|
2575
|
+
declare function getRecommendedPriority(itemType: string): ToolbarItemPriority;
|
|
2576
|
+
|
|
2577
|
+
/**
|
|
2578
|
+
* Find and Replace Dialog Component
|
|
2579
|
+
*
|
|
2580
|
+
* Modal dialog for searching and replacing text in the document.
|
|
2581
|
+
* Supports find, find next/previous, replace, and replace all operations.
|
|
2582
|
+
*
|
|
2583
|
+
* Features:
|
|
2584
|
+
* - Find input with next/previous navigation
|
|
2585
|
+
* - Replace input with replace/replace all
|
|
2586
|
+
* - Match case option
|
|
2587
|
+
* - Match whole word option
|
|
2588
|
+
* - Keyboard shortcuts (Ctrl+F, Ctrl+H, Enter, Escape)
|
|
2589
|
+
* - Match count display
|
|
2590
|
+
*/
|
|
2591
|
+
|
|
2592
|
+
/**
|
|
2593
|
+
* A single match result in the document
|
|
2594
|
+
*/
|
|
2595
|
+
interface FindMatch {
|
|
2596
|
+
/** Index of the paragraph containing the match */
|
|
2597
|
+
paragraphIndex: number;
|
|
2598
|
+
/** Index of the run/content within the paragraph */
|
|
2599
|
+
contentIndex: number;
|
|
2600
|
+
/** Character offset within the content */
|
|
2601
|
+
startOffset: number;
|
|
2602
|
+
/** Character offset for end of match */
|
|
2603
|
+
endOffset: number;
|
|
2604
|
+
/** The matched text */
|
|
2605
|
+
text: string;
|
|
2606
|
+
}
|
|
2607
|
+
/**
|
|
2608
|
+
* Find options for controlling search behavior
|
|
2609
|
+
*/
|
|
2610
|
+
interface FindOptions {
|
|
2611
|
+
/** Whether to match case */
|
|
2612
|
+
matchCase: boolean;
|
|
2613
|
+
/** Whether to match whole words only */
|
|
2614
|
+
matchWholeWord: boolean;
|
|
2615
|
+
/** Whether to use regular expressions (future) */
|
|
2616
|
+
useRegex?: boolean;
|
|
2617
|
+
}
|
|
2618
|
+
/**
|
|
2619
|
+
* Find result with all matches
|
|
2620
|
+
*/
|
|
2621
|
+
interface FindResult {
|
|
2622
|
+
/** All matches found */
|
|
2623
|
+
matches: FindMatch[];
|
|
2624
|
+
/** Total match count */
|
|
2625
|
+
totalCount: number;
|
|
2626
|
+
/** Current match index (0-based) */
|
|
2627
|
+
currentIndex: number;
|
|
2628
|
+
}
|
|
2629
|
+
/**
|
|
2630
|
+
* Props for the FindReplaceDialog component
|
|
2631
|
+
*/
|
|
2632
|
+
interface FindReplaceDialogProps {
|
|
2633
|
+
/** Whether the dialog is open */
|
|
2634
|
+
isOpen: boolean;
|
|
2635
|
+
/** Callback when dialog is closed */
|
|
2636
|
+
onClose: () => void;
|
|
2637
|
+
/** Callback when searching for text */
|
|
2638
|
+
onFind: (searchText: string, options: FindOptions) => FindResult | null;
|
|
2639
|
+
/** Callback when navigating to next match */
|
|
2640
|
+
onFindNext: () => FindMatch | null;
|
|
2641
|
+
/** Callback when navigating to previous match */
|
|
2642
|
+
onFindPrevious: () => FindMatch | null;
|
|
2643
|
+
/** Callback when replacing current match */
|
|
2644
|
+
onReplace: (replaceText: string) => boolean;
|
|
2645
|
+
/** Callback when replacing all matches */
|
|
2646
|
+
onReplaceAll: (searchText: string, replaceText: string, options: FindOptions) => number;
|
|
2647
|
+
/** Callback to highlight matches in document */
|
|
2648
|
+
onHighlightMatches?: (matches: FindMatch[]) => void;
|
|
2649
|
+
/** Callback to clear highlights */
|
|
2650
|
+
onClearHighlights?: () => void;
|
|
2651
|
+
/** Initial search text (e.g., from selected text) */
|
|
2652
|
+
initialSearchText?: string;
|
|
2653
|
+
/** Whether to start in replace mode */
|
|
2654
|
+
replaceMode?: boolean;
|
|
2655
|
+
/** Current match result (from external state) */
|
|
2656
|
+
currentResult?: FindResult | null;
|
|
2657
|
+
/** Additional CSS class */
|
|
2658
|
+
className?: string;
|
|
2659
|
+
/** Additional inline styles */
|
|
2660
|
+
style?: CSSProperties;
|
|
2661
|
+
}
|
|
2662
|
+
/**
|
|
2663
|
+
* FindReplaceDialog component - Modal for finding and replacing text
|
|
2664
|
+
*/
|
|
2665
|
+
declare function FindReplaceDialog({ isOpen, onClose, onFind, onFindNext, onFindPrevious, onReplace, onReplaceAll, onHighlightMatches, onClearHighlights, initialSearchText, replaceMode, currentResult, className, style, }: FindReplaceDialogProps): React__default.ReactElement | null;
|
|
2666
|
+
/**
|
|
2667
|
+
* Create default find options
|
|
2668
|
+
*/
|
|
2669
|
+
declare function createDefaultFindOptions(): FindOptions;
|
|
2670
|
+
/**
|
|
2671
|
+
* Find all matches of search text in content
|
|
2672
|
+
* @param content - The text to search in
|
|
2673
|
+
* @param searchText - The text to find
|
|
2674
|
+
* @param options - Find options
|
|
2675
|
+
* @returns Array of match indices [startIndex, endIndex]
|
|
2676
|
+
*/
|
|
2677
|
+
declare function findAllMatches(content: string, searchText: string, options: FindOptions): Array<{
|
|
2678
|
+
start: number;
|
|
2679
|
+
end: number;
|
|
2680
|
+
}>;
|
|
2681
|
+
/**
|
|
2682
|
+
* Escape string for use in regex pattern
|
|
2683
|
+
*/
|
|
2684
|
+
declare function escapeRegexString(str: string): string;
|
|
2685
|
+
/**
|
|
2686
|
+
* Create a regex pattern from search text and options
|
|
2687
|
+
*/
|
|
2688
|
+
declare function createSearchPattern(searchText: string, options: FindOptions): RegExp | null;
|
|
2689
|
+
/**
|
|
2690
|
+
* Replace text in content
|
|
2691
|
+
* @param content - Original content
|
|
2692
|
+
* @param searchText - Text to find
|
|
2693
|
+
* @param replaceText - Text to replace with
|
|
2694
|
+
* @param options - Find options
|
|
2695
|
+
* @returns New content with replacements
|
|
2696
|
+
*/
|
|
2697
|
+
declare function replaceAllInContent(content: string, searchText: string, replaceText: string, options: FindOptions): string;
|
|
2698
|
+
/**
|
|
2699
|
+
* Replace first match in content
|
|
2700
|
+
* @param content - Original content
|
|
2701
|
+
* @param searchText - Text to find
|
|
2702
|
+
* @param replaceText - Text to replace with
|
|
2703
|
+
* @param options - Find options
|
|
2704
|
+
* @param startIndex - Index to start searching from
|
|
2705
|
+
* @returns New content with replacement, or original if no match
|
|
2706
|
+
*/
|
|
2707
|
+
declare function replaceFirstInContent(content: string, searchText: string, replaceText: string, options: FindOptions, startIndex?: number): {
|
|
2708
|
+
content: string;
|
|
2709
|
+
replaced: boolean;
|
|
2710
|
+
matchStart: number;
|
|
2711
|
+
matchEnd: number;
|
|
2712
|
+
};
|
|
2713
|
+
/**
|
|
2714
|
+
* Get match count for status display
|
|
2715
|
+
*/
|
|
2716
|
+
declare function getMatchCountText(result: FindResult | null): string;
|
|
2717
|
+
/**
|
|
2718
|
+
* Check if search text is empty or whitespace-only
|
|
2719
|
+
*/
|
|
2720
|
+
declare function isEmptySearch(searchText: string): boolean;
|
|
2721
|
+
/**
|
|
2722
|
+
* Highlight options for document rendering
|
|
2723
|
+
*/
|
|
2724
|
+
interface HighlightOptions {
|
|
2725
|
+
/** Background color for current match */
|
|
2726
|
+
currentMatchColor: string;
|
|
2727
|
+
/** Background color for other matches */
|
|
2728
|
+
otherMatchColor: string;
|
|
2729
|
+
}
|
|
2730
|
+
/**
|
|
2731
|
+
* Get default highlight options
|
|
2732
|
+
*/
|
|
2733
|
+
declare function getDefaultHighlightOptions(): HighlightOptions;
|
|
2734
|
+
/**
|
|
2735
|
+
* Options for the useFindReplace hook
|
|
2736
|
+
*/
|
|
2737
|
+
interface FindReplaceOptions {
|
|
2738
|
+
/** Whether to show replace functionality initially */
|
|
2739
|
+
initialReplaceMode?: boolean;
|
|
2740
|
+
/** Callback when matches change */
|
|
2741
|
+
onMatchesChange?: (matches: FindMatch[]) => void;
|
|
2742
|
+
/** Callback when current match changes */
|
|
2743
|
+
onCurrentMatchChange?: (match: FindMatch | null, index: number) => void;
|
|
2744
|
+
}
|
|
2745
|
+
/**
|
|
2746
|
+
* State for the find/replace hook
|
|
2747
|
+
*/
|
|
2748
|
+
interface FindReplaceState {
|
|
2749
|
+
/** Whether the dialog is open */
|
|
2750
|
+
isOpen: boolean;
|
|
2751
|
+
/** Current search text */
|
|
2752
|
+
searchText: string;
|
|
2753
|
+
/** Current replace text */
|
|
2754
|
+
replaceText: string;
|
|
2755
|
+
/** Find options */
|
|
2756
|
+
options: FindOptions;
|
|
2757
|
+
/** All matches found */
|
|
2758
|
+
matches: FindMatch[];
|
|
2759
|
+
/** Current match index */
|
|
2760
|
+
currentIndex: number;
|
|
2761
|
+
/** Whether in replace mode */
|
|
2762
|
+
replaceMode: boolean;
|
|
2763
|
+
}
|
|
2764
|
+
/**
|
|
2765
|
+
* Return type for the useFindReplace hook
|
|
2766
|
+
*/
|
|
2767
|
+
interface UseFindReplaceReturn {
|
|
2768
|
+
/** Current state */
|
|
2769
|
+
state: FindReplaceState;
|
|
2770
|
+
/** Open the find dialog */
|
|
2771
|
+
openFind: (selectedText?: string) => void;
|
|
2772
|
+
/** Open the replace dialog */
|
|
2773
|
+
openReplace: (selectedText?: string) => void;
|
|
2774
|
+
/** Close the dialog */
|
|
2775
|
+
close: () => void;
|
|
2776
|
+
/** Toggle dialog visibility */
|
|
2777
|
+
toggle: () => void;
|
|
2778
|
+
/** Update search text */
|
|
2779
|
+
setSearchText: (text: string) => void;
|
|
2780
|
+
/** Update replace text */
|
|
2781
|
+
setReplaceText: (text: string) => void;
|
|
2782
|
+
/** Update find options */
|
|
2783
|
+
setOptions: (options: Partial<FindOptions>) => void;
|
|
2784
|
+
/** Set search results */
|
|
2785
|
+
setMatches: (matches: FindMatch[], currentIndex?: number) => void;
|
|
2786
|
+
/** Go to next match */
|
|
2787
|
+
goToNextMatch: () => number;
|
|
2788
|
+
/** Go to previous match */
|
|
2789
|
+
goToPreviousMatch: () => number;
|
|
2790
|
+
/** Go to a specific match by index */
|
|
2791
|
+
goToMatch: (index: number) => void;
|
|
2792
|
+
/** Get current match */
|
|
2793
|
+
getCurrentMatch: () => FindMatch | null;
|
|
2794
|
+
/** Check if has matches */
|
|
2795
|
+
hasMatches: () => boolean;
|
|
2796
|
+
}
|
|
2797
|
+
/**
|
|
2798
|
+
* Hook for managing find/replace dialog state
|
|
2799
|
+
*/
|
|
2800
|
+
declare function useFindReplace(hookOptions?: FindReplaceOptions): UseFindReplaceReturn;
|
|
2801
|
+
/**
|
|
2802
|
+
* Find all matches in a document
|
|
2803
|
+
*/
|
|
2804
|
+
declare function findInDocument(document: any, searchText: string, options: FindOptions): FindMatch[];
|
|
2805
|
+
/**
|
|
2806
|
+
* Find matches in a single paragraph
|
|
2807
|
+
*/
|
|
2808
|
+
declare function findInParagraph(paragraph: any, searchText: string, options: FindOptions, paragraphIndex: number): FindMatch[];
|
|
2809
|
+
/**
|
|
2810
|
+
* Scroll to a match in the document (to be used with the editor)
|
|
2811
|
+
*/
|
|
2812
|
+
declare function scrollToMatch(containerElement: HTMLElement | null, match: FindMatch): void;
|
|
2813
|
+
|
|
2814
|
+
/**
|
|
2815
|
+
* Hyperlink Dialog Component
|
|
2816
|
+
*
|
|
2817
|
+
* Modal dialog for inserting and editing hyperlinks in the document.
|
|
2818
|
+
* Supports both external URLs and internal bookmark links.
|
|
2819
|
+
*
|
|
2820
|
+
* Features:
|
|
2821
|
+
* - Input for URL (http, https, mailto, tel, etc.)
|
|
2822
|
+
* - Input for display text
|
|
2823
|
+
* - Edit existing hyperlinks
|
|
2824
|
+
* - Remove hyperlink option
|
|
2825
|
+
* - Internal bookmark selection
|
|
2826
|
+
* - Validation and error handling
|
|
2827
|
+
*/
|
|
2828
|
+
|
|
2829
|
+
/**
|
|
2830
|
+
* Hyperlink data structure for dialog
|
|
2831
|
+
*/
|
|
2832
|
+
interface HyperlinkData {
|
|
2833
|
+
/** URL for external link */
|
|
2834
|
+
url?: string;
|
|
2835
|
+
/** Display text for the link */
|
|
2836
|
+
displayText?: string;
|
|
2837
|
+
/** Internal bookmark name */
|
|
2838
|
+
bookmark?: string;
|
|
2839
|
+
/** Tooltip text */
|
|
2840
|
+
tooltip?: string;
|
|
2841
|
+
}
|
|
2842
|
+
/**
|
|
2843
|
+
* Bookmark option for internal link selection
|
|
2844
|
+
*/
|
|
2845
|
+
interface BookmarkOption {
|
|
2846
|
+
/** Bookmark name/ID */
|
|
2847
|
+
name: string;
|
|
2848
|
+
/** Optional display label */
|
|
2849
|
+
label?: string;
|
|
2850
|
+
}
|
|
2851
|
+
/**
|
|
2852
|
+
* Props for the HyperlinkDialog component
|
|
2853
|
+
*/
|
|
2854
|
+
interface HyperlinkDialogProps {
|
|
2855
|
+
/** Whether the dialog is open */
|
|
2856
|
+
isOpen: boolean;
|
|
2857
|
+
/** Callback when dialog is closed */
|
|
2858
|
+
onClose: () => void;
|
|
2859
|
+
/** Callback when hyperlink is inserted/updated */
|
|
2860
|
+
onSubmit: (data: HyperlinkData) => void;
|
|
2861
|
+
/** Callback when hyperlink is removed */
|
|
2862
|
+
onRemove?: () => void;
|
|
2863
|
+
/** Initial data for editing existing hyperlink */
|
|
2864
|
+
initialData?: HyperlinkData;
|
|
2865
|
+
/** Currently selected text (used as default display text) */
|
|
2866
|
+
selectedText?: string;
|
|
2867
|
+
/** Whether we're editing an existing hyperlink */
|
|
2868
|
+
isEditing?: boolean;
|
|
2869
|
+
/** Available bookmarks for internal links */
|
|
2870
|
+
bookmarks?: BookmarkOption[];
|
|
2871
|
+
/** Additional CSS class */
|
|
2872
|
+
className?: string;
|
|
2873
|
+
/** Additional inline styles */
|
|
2874
|
+
style?: CSSProperties;
|
|
2875
|
+
}
|
|
2876
|
+
/**
|
|
2877
|
+
* HyperlinkDialog component - Modal for inserting/editing hyperlinks
|
|
2878
|
+
*/
|
|
2879
|
+
declare function HyperlinkDialog({ isOpen, onClose, onSubmit, onRemove, initialData, selectedText, isEditing, bookmarks, className, style, }: HyperlinkDialogProps): React__default.ReactElement | null;
|
|
2880
|
+
/**
|
|
2881
|
+
* Hook state for the Hyperlink dialog
|
|
2882
|
+
*/
|
|
2883
|
+
interface UseHyperlinkDialogState {
|
|
2884
|
+
/** Whether the dialog is open */
|
|
2885
|
+
isOpen: boolean;
|
|
2886
|
+
/** Initial data for the dialog (for editing) */
|
|
2887
|
+
initialData?: HyperlinkData;
|
|
2888
|
+
/** Currently selected text */
|
|
2889
|
+
selectedText?: string;
|
|
2890
|
+
/** Whether we're editing an existing hyperlink */
|
|
2891
|
+
isEditing: boolean;
|
|
2892
|
+
}
|
|
2893
|
+
/**
|
|
2894
|
+
* Hook return type for the Hyperlink dialog
|
|
2895
|
+
*/
|
|
2896
|
+
interface UseHyperlinkDialogReturn {
|
|
2897
|
+
/** Current state */
|
|
2898
|
+
state: UseHyperlinkDialogState;
|
|
2899
|
+
/** Open dialog for inserting new hyperlink */
|
|
2900
|
+
openInsert: (selectedText?: string) => void;
|
|
2901
|
+
/** Open dialog for editing existing hyperlink */
|
|
2902
|
+
openEdit: (data: HyperlinkData) => void;
|
|
2903
|
+
/** Close the dialog */
|
|
2904
|
+
close: () => void;
|
|
2905
|
+
/** Toggle dialog open/closed */
|
|
2906
|
+
toggle: () => void;
|
|
2907
|
+
}
|
|
2908
|
+
/**
|
|
2909
|
+
* Hook for managing Hyperlink dialog state
|
|
2910
|
+
*/
|
|
2911
|
+
declare function useHyperlinkDialog(): UseHyperlinkDialogReturn;
|
|
2912
|
+
|
|
2913
|
+
/**
|
|
2914
|
+
* Insert Table Dialog Component
|
|
2915
|
+
*
|
|
2916
|
+
* Modal dialog for inserting a new table into the document.
|
|
2917
|
+
* Provides a visual grid selector for choosing rows and columns.
|
|
2918
|
+
*
|
|
2919
|
+
* Features:
|
|
2920
|
+
* - Visual grid selector (hover to select dimensions)
|
|
2921
|
+
* - Manual row/column input
|
|
2922
|
+
* - Preview of table dimensions
|
|
2923
|
+
* - Quick insert with default sizes
|
|
2924
|
+
*/
|
|
2925
|
+
|
|
2926
|
+
/**
|
|
2927
|
+
* Table configuration for insertion
|
|
2928
|
+
*/
|
|
2929
|
+
interface TableConfig {
|
|
2930
|
+
/** Number of rows */
|
|
2931
|
+
rows: number;
|
|
2932
|
+
/** Number of columns */
|
|
2933
|
+
columns: number;
|
|
2934
|
+
}
|
|
2935
|
+
/**
|
|
2936
|
+
* Props for InsertTableDialog
|
|
2937
|
+
*/
|
|
2938
|
+
interface InsertTableDialogProps {
|
|
2939
|
+
/** Whether the dialog is open */
|
|
2940
|
+
isOpen: boolean;
|
|
2941
|
+
/** Callback when dialog is closed */
|
|
2942
|
+
onClose: () => void;
|
|
2943
|
+
/** Callback when table is inserted */
|
|
2944
|
+
onInsert: (config: TableConfig) => void;
|
|
2945
|
+
/** Maximum rows in grid selector (default: 8) */
|
|
2946
|
+
maxGridRows?: number;
|
|
2947
|
+
/** Maximum columns in grid selector (default: 10) */
|
|
2948
|
+
maxGridColumns?: number;
|
|
2949
|
+
/** Maximum allowed rows (default: 100) */
|
|
2950
|
+
maxRows?: number;
|
|
2951
|
+
/** Maximum allowed columns (default: 20) */
|
|
2952
|
+
maxColumns?: number;
|
|
2953
|
+
/** Additional CSS class */
|
|
2954
|
+
className?: string;
|
|
2955
|
+
/** Additional inline styles */
|
|
2956
|
+
style?: CSSProperties;
|
|
2957
|
+
}
|
|
2958
|
+
/**
|
|
2959
|
+
* InsertTableDialog - Modal for inserting tables with visual grid selector
|
|
2960
|
+
*/
|
|
2961
|
+
declare function InsertTableDialog({ isOpen, onClose, onInsert, maxGridRows, maxGridColumns, maxRows, maxColumns, className, style, }: InsertTableDialogProps): React__default.ReactElement | null;
|
|
2962
|
+
/**
|
|
2963
|
+
* Hook for managing Insert Table dialog state
|
|
2964
|
+
*/
|
|
2965
|
+
declare function useInsertTableDialog(): {
|
|
2966
|
+
isOpen: boolean;
|
|
2967
|
+
open: () => void;
|
|
2968
|
+
close: () => void;
|
|
2969
|
+
toggle: () => void;
|
|
2970
|
+
};
|
|
2971
|
+
/**
|
|
2972
|
+
* Create a default TableConfig
|
|
2973
|
+
*/
|
|
2974
|
+
declare function createDefaultTableConfig(rows?: number, columns?: number): TableConfig;
|
|
2975
|
+
/**
|
|
2976
|
+
* Validate TableConfig
|
|
2977
|
+
*/
|
|
2978
|
+
declare function isValidTableConfig(config: TableConfig, maxRows?: number, maxColumns?: number): boolean;
|
|
2979
|
+
/**
|
|
2980
|
+
* Clamp TableConfig to valid range
|
|
2981
|
+
*/
|
|
2982
|
+
declare function clampTableConfig(config: TableConfig, maxRows?: number, maxColumns?: number): TableConfig;
|
|
2983
|
+
/**
|
|
2984
|
+
* Format table dimensions for display
|
|
2985
|
+
*/
|
|
2986
|
+
declare function formatTableDimensions(config: TableConfig): string;
|
|
2987
|
+
/**
|
|
2988
|
+
* Get common table presets
|
|
2989
|
+
*/
|
|
2990
|
+
declare function getTablePresets(): {
|
|
2991
|
+
label: string;
|
|
2992
|
+
config: TableConfig;
|
|
2993
|
+
}[];
|
|
2994
|
+
|
|
2995
|
+
/**
|
|
2996
|
+
* Insert Image Dialog Component
|
|
2997
|
+
*
|
|
2998
|
+
* Modal dialog for inserting images into the document.
|
|
2999
|
+
* Supports file upload with preview and basic sizing options.
|
|
3000
|
+
*
|
|
3001
|
+
* Features:
|
|
3002
|
+
* - File input for image selection
|
|
3003
|
+
* - Drag and drop support
|
|
3004
|
+
* - Image preview
|
|
3005
|
+
* - Width/height controls with aspect ratio lock
|
|
3006
|
+
* - Alt text input
|
|
3007
|
+
*/
|
|
3008
|
+
|
|
3009
|
+
/**
|
|
3010
|
+
* Image data for insertion
|
|
3011
|
+
*/
|
|
3012
|
+
interface ImageData {
|
|
3013
|
+
/** Base64 data URL or external URL */
|
|
3014
|
+
src: string;
|
|
3015
|
+
/** Image width in pixels */
|
|
3016
|
+
width: number;
|
|
3017
|
+
/** Image height in pixels */
|
|
3018
|
+
height: number;
|
|
3019
|
+
/** Alt text for accessibility */
|
|
3020
|
+
alt?: string;
|
|
3021
|
+
/** Original file name */
|
|
3022
|
+
fileName?: string;
|
|
3023
|
+
/** MIME type */
|
|
3024
|
+
mimeType?: string;
|
|
3025
|
+
}
|
|
3026
|
+
/**
|
|
3027
|
+
* Props for InsertImageDialog
|
|
3028
|
+
*/
|
|
3029
|
+
interface InsertImageDialogProps {
|
|
3030
|
+
/** Whether the dialog is open */
|
|
3031
|
+
isOpen: boolean;
|
|
3032
|
+
/** Callback when dialog is closed */
|
|
3033
|
+
onClose: () => void;
|
|
3034
|
+
/** Callback when image is inserted */
|
|
3035
|
+
onInsert: (data: ImageData) => void;
|
|
3036
|
+
/** Maximum width in pixels (default: 800) */
|
|
3037
|
+
maxWidth?: number;
|
|
3038
|
+
/** Maximum height in pixels (default: 600) */
|
|
3039
|
+
maxHeight?: number;
|
|
3040
|
+
/** Accepted file types (default: image/*) */
|
|
3041
|
+
accept?: string;
|
|
3042
|
+
/** Additional CSS class */
|
|
3043
|
+
className?: string;
|
|
3044
|
+
/** Additional inline styles */
|
|
3045
|
+
style?: CSSProperties;
|
|
3046
|
+
}
|
|
3047
|
+
/**
|
|
3048
|
+
* InsertImageDialog - Modal for inserting images with preview and sizing
|
|
3049
|
+
*/
|
|
3050
|
+
declare function InsertImageDialog({ isOpen, onClose, onInsert, maxWidth, maxHeight, accept, className, style, }: InsertImageDialogProps): React__default.ReactElement | null;
|
|
3051
|
+
/**
|
|
3052
|
+
* Hook for managing Insert Image dialog state
|
|
3053
|
+
*/
|
|
3054
|
+
declare function useInsertImageDialog(): {
|
|
3055
|
+
isOpen: boolean;
|
|
3056
|
+
open: () => void;
|
|
3057
|
+
close: () => void;
|
|
3058
|
+
toggle: () => void;
|
|
3059
|
+
};
|
|
3060
|
+
/**
|
|
3061
|
+
* Check if a file is a valid image
|
|
3062
|
+
*/
|
|
3063
|
+
declare function isValidImageFile(file: File): boolean;
|
|
3064
|
+
/**
|
|
3065
|
+
* Get supported image extensions
|
|
3066
|
+
*/
|
|
3067
|
+
declare function getSupportedImageExtensions(): string[];
|
|
3068
|
+
/**
|
|
3069
|
+
* Get accept string for file input
|
|
3070
|
+
*/
|
|
3071
|
+
declare function getImageAcceptString(): string;
|
|
3072
|
+
/**
|
|
3073
|
+
* Calculate scaled dimensions to fit within bounds
|
|
3074
|
+
*/
|
|
3075
|
+
declare function calculateFitDimensions(originalWidth: number, originalHeight: number, maxWidth: number, maxHeight: number): {
|
|
3076
|
+
width: number;
|
|
3077
|
+
height: number;
|
|
3078
|
+
};
|
|
3079
|
+
/**
|
|
3080
|
+
* Convert data URL to Blob
|
|
3081
|
+
*/
|
|
3082
|
+
declare function dataUrlToBlob(dataUrl: string): Blob;
|
|
3083
|
+
/**
|
|
3084
|
+
* Get image dimensions from a data URL
|
|
3085
|
+
*/
|
|
3086
|
+
declare function getImageDimensions(src: string): Promise<{
|
|
3087
|
+
width: number;
|
|
3088
|
+
height: number;
|
|
3089
|
+
}>;
|
|
3090
|
+
/**
|
|
3091
|
+
* Format file size for display
|
|
3092
|
+
*/
|
|
3093
|
+
declare function formatFileSize(bytes: number): string;
|
|
3094
|
+
|
|
3095
|
+
/**
|
|
3096
|
+
* Insert Symbol Dialog Component
|
|
3097
|
+
*
|
|
3098
|
+
* Modal dialog for inserting special characters and symbols into the document.
|
|
3099
|
+
* Provides categorized symbol picker with search functionality.
|
|
3100
|
+
*
|
|
3101
|
+
* Features:
|
|
3102
|
+
* - Categorized symbol groups
|
|
3103
|
+
* - Recent symbols
|
|
3104
|
+
* - Search functionality
|
|
3105
|
+
* - Unicode character display
|
|
3106
|
+
*/
|
|
3107
|
+
|
|
3108
|
+
/**
|
|
3109
|
+
* Symbol category
|
|
3110
|
+
*/
|
|
3111
|
+
interface SymbolCategory {
|
|
3112
|
+
/** Category name */
|
|
3113
|
+
name: string;
|
|
3114
|
+
/** Display label */
|
|
3115
|
+
label: string;
|
|
3116
|
+
/** Symbols in this category */
|
|
3117
|
+
symbols: string[];
|
|
3118
|
+
}
|
|
3119
|
+
/**
|
|
3120
|
+
* Props for InsertSymbolDialog
|
|
3121
|
+
*/
|
|
3122
|
+
interface InsertSymbolDialogProps {
|
|
3123
|
+
/** Whether the dialog is open */
|
|
3124
|
+
isOpen: boolean;
|
|
3125
|
+
/** Callback when dialog is closed */
|
|
3126
|
+
onClose: () => void;
|
|
3127
|
+
/** Callback when symbol is inserted */
|
|
3128
|
+
onInsert: (symbol: string) => void;
|
|
3129
|
+
/** Recently used symbols */
|
|
3130
|
+
recentSymbols?: string[];
|
|
3131
|
+
/** Additional CSS class */
|
|
3132
|
+
className?: string;
|
|
3133
|
+
/** Additional inline styles */
|
|
3134
|
+
style?: CSSProperties;
|
|
3135
|
+
}
|
|
3136
|
+
/**
|
|
3137
|
+
* Default symbol categories
|
|
3138
|
+
*/
|
|
3139
|
+
declare const SYMBOL_CATEGORIES: SymbolCategory[];
|
|
3140
|
+
/**
|
|
3141
|
+
* InsertSymbolDialog - Modal for inserting special characters
|
|
3142
|
+
*/
|
|
3143
|
+
declare function InsertSymbolDialog({ isOpen, onClose, onInsert, recentSymbols, className, style, }: InsertSymbolDialogProps): React__default.ReactElement | null;
|
|
3144
|
+
/**
|
|
3145
|
+
* Hook for managing Insert Symbol dialog state with recent symbols
|
|
3146
|
+
*/
|
|
3147
|
+
declare function useInsertSymbolDialog(maxRecent?: number): {
|
|
3148
|
+
isOpen: boolean;
|
|
3149
|
+
recentSymbols: string[];
|
|
3150
|
+
open: () => void;
|
|
3151
|
+
close: () => void;
|
|
3152
|
+
toggle: () => void;
|
|
3153
|
+
addRecent: (symbol: string) => void;
|
|
3154
|
+
};
|
|
3155
|
+
/**
|
|
3156
|
+
* Get all symbol categories
|
|
3157
|
+
*/
|
|
3158
|
+
declare function getSymbolCategories(): SymbolCategory[];
|
|
3159
|
+
/**
|
|
3160
|
+
* Get symbols by category name
|
|
3161
|
+
*/
|
|
3162
|
+
declare function getSymbolsByCategory(categoryName: string): string[];
|
|
3163
|
+
/**
|
|
3164
|
+
* Get symbol Unicode info
|
|
3165
|
+
*/
|
|
3166
|
+
declare function getSymbolInfo(symbol: string): {
|
|
3167
|
+
character: string;
|
|
3168
|
+
codePoint: string;
|
|
3169
|
+
decimal: number;
|
|
3170
|
+
hex: string;
|
|
3171
|
+
};
|
|
3172
|
+
/**
|
|
3173
|
+
* Search symbols by query
|
|
3174
|
+
*/
|
|
3175
|
+
declare function searchSymbols(query: string): string[];
|
|
3176
|
+
/**
|
|
3177
|
+
* Get symbol from Unicode code point string
|
|
3178
|
+
*/
|
|
3179
|
+
declare function symbolFromCodePoint(codePointStr: string): string | null;
|
|
3180
|
+
|
|
3181
|
+
/**
|
|
3182
|
+
* Clipboard utilities for copy/paste with formatting
|
|
3183
|
+
*
|
|
3184
|
+
* Handles:
|
|
3185
|
+
* - Copy: puts formatted HTML and plain text on clipboard
|
|
3186
|
+
* - Paste: reads HTML clipboard, converts to runs with formatting
|
|
3187
|
+
* - Handles paste from Word (cleans up Word HTML)
|
|
3188
|
+
* - Ctrl+C, Ctrl+V, Ctrl+X keyboard shortcuts
|
|
3189
|
+
*/
|
|
3190
|
+
|
|
3191
|
+
/**
|
|
3192
|
+
* Clipboard content format
|
|
3193
|
+
*/
|
|
3194
|
+
interface ClipboardContent {
|
|
3195
|
+
/** Plain text representation */
|
|
3196
|
+
plainText: string;
|
|
3197
|
+
/** HTML representation */
|
|
3198
|
+
html: string;
|
|
3199
|
+
/** Internal format (JSON) for preserving full formatting */
|
|
3200
|
+
internal?: string;
|
|
3201
|
+
}
|
|
3202
|
+
/**
|
|
3203
|
+
* Parsed clipboard content
|
|
3204
|
+
*/
|
|
3205
|
+
interface ParsedClipboardContent {
|
|
3206
|
+
/** Runs parsed from clipboard */
|
|
3207
|
+
runs: Run[];
|
|
3208
|
+
/** Whether content came from Word */
|
|
3209
|
+
fromWord: boolean;
|
|
3210
|
+
/** Whether content came from our editor */
|
|
3211
|
+
fromEditor: boolean;
|
|
3212
|
+
/** Original plain text */
|
|
3213
|
+
plainText: string;
|
|
3214
|
+
}
|
|
3215
|
+
/**
|
|
3216
|
+
* Options for clipboard operations
|
|
3217
|
+
*/
|
|
3218
|
+
interface ClipboardOptions {
|
|
3219
|
+
/** Whether to include formatting in copy */
|
|
3220
|
+
includeFormatting?: boolean;
|
|
3221
|
+
/** Whether to clean Word-specific formatting */
|
|
3222
|
+
cleanWordFormatting?: boolean;
|
|
3223
|
+
/** Callback for handling errors */
|
|
3224
|
+
onError?: (error: Error) => void;
|
|
3225
|
+
}
|
|
3226
|
+
/**
|
|
3227
|
+
* Custom MIME type for internal clipboard format
|
|
3228
|
+
*/
|
|
3229
|
+
declare const INTERNAL_CLIPBOARD_TYPE = "application/x-docx-editor";
|
|
3230
|
+
/**
|
|
3231
|
+
* Standard clipboard MIME types
|
|
3232
|
+
*/
|
|
3233
|
+
declare const CLIPBOARD_TYPES: {
|
|
3234
|
+
readonly HTML: "text/html";
|
|
3235
|
+
readonly PLAIN: "text/plain";
|
|
3236
|
+
};
|
|
3237
|
+
/**
|
|
3238
|
+
* Copy runs to clipboard with formatting
|
|
3239
|
+
*/
|
|
3240
|
+
declare function copyRuns(runs: Run[], options?: ClipboardOptions): Promise<boolean>;
|
|
3241
|
+
/**
|
|
3242
|
+
* Copy paragraphs to clipboard with formatting
|
|
3243
|
+
*/
|
|
3244
|
+
declare function copyParagraphs(paragraphs: Paragraph[], options?: ClipboardOptions): Promise<boolean>;
|
|
3245
|
+
/**
|
|
3246
|
+
* Convert runs to clipboard content (HTML and plain text)
|
|
3247
|
+
*/
|
|
3248
|
+
declare function runsToClipboardContent(runs: Run[], includeFormatting?: boolean): ClipboardContent;
|
|
3249
|
+
/**
|
|
3250
|
+
* Convert paragraphs to clipboard content
|
|
3251
|
+
*/
|
|
3252
|
+
declare function paragraphsToClipboardContent(paragraphs: Paragraph[], includeFormatting?: boolean): ClipboardContent;
|
|
3253
|
+
/**
|
|
3254
|
+
* Write content to clipboard
|
|
3255
|
+
*/
|
|
3256
|
+
declare function writeToClipboard(content: ClipboardContent): Promise<boolean>;
|
|
3257
|
+
/**
|
|
3258
|
+
* Read content from clipboard
|
|
3259
|
+
*/
|
|
3260
|
+
declare function readFromClipboard(options?: ClipboardOptions): Promise<ParsedClipboardContent | null>;
|
|
3261
|
+
/**
|
|
3262
|
+
* Handle paste event
|
|
3263
|
+
*/
|
|
3264
|
+
declare function handlePasteEvent(event: ClipboardEvent, options?: ClipboardOptions): ParsedClipboardContent | null;
|
|
3265
|
+
/**
|
|
3266
|
+
* Parse HTML from clipboard
|
|
3267
|
+
*/
|
|
3268
|
+
declare function parseClipboardHtml(html: string, plainText: string, cleanWordFormatting?: boolean): ParsedClipboardContent;
|
|
3269
|
+
/**
|
|
3270
|
+
* Check if HTML is from Microsoft Word
|
|
3271
|
+
*/
|
|
3272
|
+
declare function isWordHtml(html: string): boolean;
|
|
3273
|
+
/**
|
|
3274
|
+
* Check if HTML is from our editor
|
|
3275
|
+
*/
|
|
3276
|
+
declare function isEditorHtml(html: string): boolean;
|
|
3277
|
+
/**
|
|
3278
|
+
* Clean Microsoft Word HTML
|
|
3279
|
+
*/
|
|
3280
|
+
declare function cleanWordHtml(html: string): string;
|
|
3281
|
+
/**
|
|
3282
|
+
* Convert HTML to runs
|
|
3283
|
+
*/
|
|
3284
|
+
declare function htmlToRuns(html: string, plainTextFallback: string): Run[];
|
|
3285
|
+
/**
|
|
3286
|
+
* Create clipboard keyboard handlers for an editor
|
|
3287
|
+
*/
|
|
3288
|
+
declare function createClipboardHandlers(options: {
|
|
3289
|
+
onCopy?: () => {
|
|
3290
|
+
runs: Run[];
|
|
3291
|
+
} | null;
|
|
3292
|
+
onCut?: () => {
|
|
3293
|
+
runs: Run[];
|
|
3294
|
+
} | null;
|
|
3295
|
+
onPaste?: (content: ParsedClipboardContent) => void;
|
|
3296
|
+
clipboardOptions?: ClipboardOptions;
|
|
3297
|
+
}): {
|
|
3298
|
+
handleCopy: (event: ClipboardEvent) => Promise<void>;
|
|
3299
|
+
handleCut: (event: ClipboardEvent) => Promise<void>;
|
|
3300
|
+
handlePaste: (event: ClipboardEvent) => void;
|
|
3301
|
+
handleKeyDown: (event: KeyboardEvent) => Promise<void>;
|
|
3302
|
+
};
|
|
3303
|
+
|
|
3304
|
+
/**
|
|
3305
|
+
* Paste Special Dialog Component
|
|
3306
|
+
*
|
|
3307
|
+
* Provides paste options for pasting content with or without formatting.
|
|
3308
|
+
* Features:
|
|
3309
|
+
* - Paste with formatting (default)
|
|
3310
|
+
* - Paste as plain text (unformatted)
|
|
3311
|
+
* - Keyboard shortcut: Ctrl+Shift+V opens dialog
|
|
3312
|
+
*/
|
|
3313
|
+
|
|
3314
|
+
/**
|
|
3315
|
+
* Paste option type
|
|
3316
|
+
*/
|
|
3317
|
+
type PasteOption = 'formatted' | 'plainText';
|
|
3318
|
+
/**
|
|
3319
|
+
* Paste special dialog props
|
|
3320
|
+
*/
|
|
3321
|
+
interface PasteSpecialDialogProps {
|
|
3322
|
+
/** Whether the dialog is open */
|
|
3323
|
+
isOpen: boolean;
|
|
3324
|
+
/** Callback when dialog is closed */
|
|
3325
|
+
onClose: () => void;
|
|
3326
|
+
/** Callback when paste is confirmed */
|
|
3327
|
+
onPaste: (content: ParsedClipboardContent, asPlainText: boolean) => void;
|
|
3328
|
+
/** Optional custom position */
|
|
3329
|
+
position?: {
|
|
3330
|
+
x: number;
|
|
3331
|
+
y: number;
|
|
3332
|
+
};
|
|
3333
|
+
/** Additional className */
|
|
3334
|
+
className?: string;
|
|
3335
|
+
}
|
|
3336
|
+
/**
|
|
3337
|
+
* Paste option item
|
|
3338
|
+
*/
|
|
3339
|
+
interface PasteOptionItem {
|
|
3340
|
+
id: PasteOption;
|
|
3341
|
+
label: string;
|
|
3342
|
+
description: string;
|
|
3343
|
+
shortcut: string;
|
|
3344
|
+
}
|
|
3345
|
+
/**
|
|
3346
|
+
* Hook return value for paste special
|
|
3347
|
+
*/
|
|
3348
|
+
interface UsePasteSpecialReturn {
|
|
3349
|
+
/** Whether the dialog is open */
|
|
3350
|
+
isOpen: boolean;
|
|
3351
|
+
/** Open the paste special dialog */
|
|
3352
|
+
openDialog: () => void;
|
|
3353
|
+
/** Close the dialog */
|
|
3354
|
+
closeDialog: () => void;
|
|
3355
|
+
/** Handle keyboard shortcut (Ctrl+Shift+V) */
|
|
3356
|
+
handleKeyDown: (event: KeyboardEvent) => boolean;
|
|
3357
|
+
/** Paste as plain text directly */
|
|
3358
|
+
pasteAsPlainText: () => Promise<void>;
|
|
3359
|
+
}
|
|
3360
|
+
/**
|
|
3361
|
+
* Options for usePasteSpecial hook
|
|
3362
|
+
*/
|
|
3363
|
+
interface UsePasteSpecialOptions {
|
|
3364
|
+
/** Callback when paste is confirmed */
|
|
3365
|
+
onPaste?: (content: ParsedClipboardContent, asPlainText: boolean) => void;
|
|
3366
|
+
/** Whether paste operations are enabled */
|
|
3367
|
+
enabled?: boolean;
|
|
3368
|
+
}
|
|
3369
|
+
declare const PasteSpecialDialog: React__default.FC<PasteSpecialDialogProps>;
|
|
3370
|
+
/**
|
|
3371
|
+
* Hook to manage paste special dialog
|
|
3372
|
+
*/
|
|
3373
|
+
declare function usePasteSpecial(options?: UsePasteSpecialOptions): UsePasteSpecialReturn;
|
|
3374
|
+
/**
|
|
3375
|
+
* Get paste option by id
|
|
3376
|
+
*/
|
|
3377
|
+
declare function getPasteOption(id: PasteOption): PasteOptionItem | undefined;
|
|
3378
|
+
/**
|
|
3379
|
+
* Get all paste options
|
|
3380
|
+
*/
|
|
3381
|
+
declare function getAllPasteOptions(): PasteOptionItem[];
|
|
3382
|
+
/**
|
|
3383
|
+
* Get default paste option
|
|
3384
|
+
*/
|
|
3385
|
+
declare function getDefaultPasteOption(): PasteOption;
|
|
3386
|
+
/**
|
|
3387
|
+
* Check if paste special shortcut
|
|
3388
|
+
*/
|
|
3389
|
+
declare function isPasteSpecialShortcut(event: KeyboardEvent): boolean;
|
|
3390
|
+
|
|
3391
|
+
/**
|
|
3392
|
+
* Keyboard Shortcuts Dialog Component
|
|
3393
|
+
*
|
|
3394
|
+
* Displays all available keyboard shortcuts organized by category.
|
|
3395
|
+
* Features:
|
|
3396
|
+
* - Categorized shortcut list
|
|
3397
|
+
* - Search/filter functionality
|
|
3398
|
+
* - Platform-aware modifier keys (Ctrl/Cmd)
|
|
3399
|
+
* - Keyboard shortcut to open (Ctrl+/)
|
|
3400
|
+
*/
|
|
3401
|
+
|
|
3402
|
+
/**
|
|
3403
|
+
* Keyboard shortcut definition
|
|
3404
|
+
*/
|
|
3405
|
+
interface KeyboardShortcut$1 {
|
|
3406
|
+
/** Unique identifier */
|
|
3407
|
+
id: string;
|
|
3408
|
+
/** Display name */
|
|
3409
|
+
name: string;
|
|
3410
|
+
/** Description of what the shortcut does */
|
|
3411
|
+
description: string;
|
|
3412
|
+
/** Primary key combination (e.g., 'Ctrl+C') */
|
|
3413
|
+
keys: string;
|
|
3414
|
+
/** Alternative key combination */
|
|
3415
|
+
altKeys?: string;
|
|
3416
|
+
/** Category for grouping */
|
|
3417
|
+
category: ShortcutCategory;
|
|
3418
|
+
/** Whether this is a common/frequently used shortcut */
|
|
3419
|
+
common?: boolean;
|
|
3420
|
+
}
|
|
3421
|
+
/**
|
|
3422
|
+
* Shortcut category
|
|
3423
|
+
*/
|
|
3424
|
+
type ShortcutCategory = 'editing' | 'formatting' | 'navigation' | 'clipboard' | 'selection' | 'view' | 'file' | 'other';
|
|
3425
|
+
/**
|
|
3426
|
+
* Dialog props
|
|
3427
|
+
*/
|
|
3428
|
+
interface KeyboardShortcutsDialogProps {
|
|
3429
|
+
/** Whether the dialog is open */
|
|
3430
|
+
isOpen: boolean;
|
|
3431
|
+
/** Close callback */
|
|
3432
|
+
onClose: () => void;
|
|
3433
|
+
/** Custom shortcuts (merged with defaults) */
|
|
3434
|
+
customShortcuts?: KeyboardShortcut$1[];
|
|
3435
|
+
/** Whether to show search */
|
|
3436
|
+
showSearch?: boolean;
|
|
3437
|
+
/** Additional className */
|
|
3438
|
+
className?: string;
|
|
3439
|
+
}
|
|
3440
|
+
/**
|
|
3441
|
+
* Hook options
|
|
3442
|
+
*/
|
|
3443
|
+
interface UseKeyboardShortcutsDialogOptions {
|
|
3444
|
+
/** Whether the dialog can be opened with Ctrl+? or F1 */
|
|
3445
|
+
enabled?: boolean;
|
|
3446
|
+
/** Custom open shortcut (default: Ctrl+/) */
|
|
3447
|
+
openShortcut?: string;
|
|
3448
|
+
}
|
|
3449
|
+
/**
|
|
3450
|
+
* Hook return value
|
|
3451
|
+
*/
|
|
3452
|
+
interface UseKeyboardShortcutsDialogReturn {
|
|
3453
|
+
/** Whether dialog is open */
|
|
3454
|
+
isOpen: boolean;
|
|
3455
|
+
/** Open the dialog */
|
|
3456
|
+
open: () => void;
|
|
3457
|
+
/** Close the dialog */
|
|
3458
|
+
close: () => void;
|
|
3459
|
+
/** Toggle the dialog */
|
|
3460
|
+
toggle: () => void;
|
|
3461
|
+
/** Keyboard event handler */
|
|
3462
|
+
handleKeyDown: (event: KeyboardEvent) => void;
|
|
3463
|
+
}
|
|
3464
|
+
declare const KeyboardShortcutsDialog: React__default.FC<KeyboardShortcutsDialogProps>;
|
|
3465
|
+
/**
|
|
3466
|
+
* Hook to manage keyboard shortcuts dialog
|
|
3467
|
+
*/
|
|
3468
|
+
declare function useKeyboardShortcutsDialog(options?: UseKeyboardShortcutsDialogOptions): UseKeyboardShortcutsDialogReturn;
|
|
3469
|
+
/**
|
|
3470
|
+
* Get all default shortcuts
|
|
3471
|
+
*/
|
|
3472
|
+
declare function getDefaultShortcuts(): KeyboardShortcut$1[];
|
|
3473
|
+
/**
|
|
3474
|
+
* Get shortcuts by category
|
|
3475
|
+
*/
|
|
3476
|
+
declare function getShortcutsByCategory(category: ShortcutCategory): KeyboardShortcut$1[];
|
|
3477
|
+
/**
|
|
3478
|
+
* Get common/frequently used shortcuts
|
|
3479
|
+
*/
|
|
3480
|
+
declare function getCommonShortcuts(): KeyboardShortcut$1[];
|
|
3481
|
+
/**
|
|
3482
|
+
* Get category label
|
|
3483
|
+
*/
|
|
3484
|
+
declare function getCategoryLabel(category: ShortcutCategory): string;
|
|
3485
|
+
/**
|
|
3486
|
+
* Get all categories
|
|
3487
|
+
*/
|
|
3488
|
+
declare function getAllCategories(): ShortcutCategory[];
|
|
3489
|
+
/**
|
|
3490
|
+
* Format shortcut keys for display
|
|
3491
|
+
*/
|
|
3492
|
+
declare function formatShortcutKeys(keys: string): string;
|
|
3493
|
+
|
|
3494
|
+
/**
|
|
3495
|
+
* useTableSelection Hook
|
|
3496
|
+
*
|
|
3497
|
+
* Tracks table selection state based on user clicks.
|
|
3498
|
+
* Provides:
|
|
3499
|
+
* - Current table context when clicking in a table cell
|
|
3500
|
+
* - Methods to handle table actions (add row, delete column, etc.)
|
|
3501
|
+
* - Clears selection when clicking outside tables
|
|
3502
|
+
*/
|
|
3503
|
+
|
|
3504
|
+
/**
|
|
3505
|
+
* Table selection state
|
|
3506
|
+
*/
|
|
3507
|
+
interface TableSelectionState {
|
|
3508
|
+
/** Current table context (null if not in a table) */
|
|
3509
|
+
context: TableContext | null;
|
|
3510
|
+
/** The selected table */
|
|
3511
|
+
table: Table | null;
|
|
3512
|
+
/** Index of the table in the document */
|
|
3513
|
+
tableIndex: number | null;
|
|
3514
|
+
/** Row index */
|
|
3515
|
+
rowIndex: number | null;
|
|
3516
|
+
/** Column index */
|
|
3517
|
+
columnIndex: number | null;
|
|
3518
|
+
}
|
|
3519
|
+
/**
|
|
3520
|
+
* Return type for useTableSelection hook
|
|
3521
|
+
*/
|
|
3522
|
+
interface UseTableSelectionReturn {
|
|
3523
|
+
/** Current table selection state */
|
|
3524
|
+
state: TableSelectionState;
|
|
3525
|
+
/** Handle click on a table cell */
|
|
3526
|
+
handleCellClick: (tableIndex: number, rowIndex: number, columnIndex: number) => void;
|
|
3527
|
+
/** Handle table action */
|
|
3528
|
+
handleAction: (action: TableAction) => void;
|
|
3529
|
+
/** Clear the selection */
|
|
3530
|
+
clearSelection: () => void;
|
|
3531
|
+
/** Check if a cell is selected */
|
|
3532
|
+
isCellSelected: (tableIndex: number, rowIndex: number, columnIndex: number) => boolean;
|
|
3533
|
+
/** The table context for the TableToolbar */
|
|
3534
|
+
tableContext: TableContext | null;
|
|
3535
|
+
}
|
|
3536
|
+
/**
|
|
3537
|
+
* Options for useTableSelection
|
|
3538
|
+
*/
|
|
3539
|
+
interface UseTableSelectionOptions {
|
|
3540
|
+
/** The document being edited */
|
|
3541
|
+
document: Document | null;
|
|
3542
|
+
/** Callback when document changes */
|
|
3543
|
+
onChange?: (document: Document) => void;
|
|
3544
|
+
/** Callback when table selection changes */
|
|
3545
|
+
onSelectionChange?: (context: TableContext | null) => void;
|
|
3546
|
+
}
|
|
3547
|
+
/**
|
|
3548
|
+
* Data attributes for table elements
|
|
3549
|
+
*/
|
|
3550
|
+
declare const TABLE_DATA_ATTRIBUTES: {
|
|
3551
|
+
/** Attribute for table index */
|
|
3552
|
+
TABLE_INDEX: string;
|
|
3553
|
+
/** Attribute for row index */
|
|
3554
|
+
ROW_INDEX: string;
|
|
3555
|
+
/** Attribute for column index */
|
|
3556
|
+
COLUMN_INDEX: string;
|
|
3557
|
+
/** Attribute marking a table cell */
|
|
3558
|
+
TABLE_CELL: string;
|
|
3559
|
+
};
|
|
3560
|
+
/**
|
|
3561
|
+
* Hook for tracking and managing table selection
|
|
3562
|
+
*/
|
|
3563
|
+
declare function useTableSelection({ document: doc, onChange, onSelectionChange, }: UseTableSelectionOptions): UseTableSelectionReturn;
|
|
3564
|
+
|
|
3565
|
+
/**
|
|
3566
|
+
* useAutoSave Hook
|
|
3567
|
+
*
|
|
3568
|
+
* Automatically saves document state to localStorage at configurable intervals.
|
|
3569
|
+
*
|
|
3570
|
+
* Features:
|
|
3571
|
+
* - Configurable save interval (default: 30 seconds)
|
|
3572
|
+
* - Saves document JSON to localStorage
|
|
3573
|
+
* - Recovery of saved state on load
|
|
3574
|
+
* - Manual save trigger
|
|
3575
|
+
* - Last save timestamp tracking
|
|
3576
|
+
* - Save status callbacks
|
|
3577
|
+
*/
|
|
3578
|
+
|
|
3579
|
+
/**
|
|
3580
|
+
* Auto-save status
|
|
3581
|
+
*/
|
|
3582
|
+
type AutoSaveStatus = 'idle' | 'saving' | 'saved' | 'error';
|
|
3583
|
+
/**
|
|
3584
|
+
* Options for useAutoSave hook
|
|
3585
|
+
*/
|
|
3586
|
+
interface UseAutoSaveOptions {
|
|
3587
|
+
/** Storage key for localStorage (default: 'docx-editor-autosave') */
|
|
3588
|
+
storageKey?: string;
|
|
3589
|
+
/** Save interval in milliseconds (default: 30000 - 30 seconds) */
|
|
3590
|
+
interval?: number;
|
|
3591
|
+
/** Whether auto-save is enabled (default: true) */
|
|
3592
|
+
enabled?: boolean;
|
|
3593
|
+
/** Maximum age of auto-save in milliseconds before it's considered stale (default: 24 hours) */
|
|
3594
|
+
maxAge?: number;
|
|
3595
|
+
/** Callback when save succeeds */
|
|
3596
|
+
onSave?: (timestamp: Date) => void;
|
|
3597
|
+
/** Callback when save fails */
|
|
3598
|
+
onError?: (error: Error) => void;
|
|
3599
|
+
/** Callback when recovery data is found */
|
|
3600
|
+
onRecoveryAvailable?: (savedDocument: SavedDocumentData) => void;
|
|
3601
|
+
/** Whether to save immediately when document changes (debounced) */
|
|
3602
|
+
saveOnChange?: boolean;
|
|
3603
|
+
/** Debounce delay for saveOnChange in milliseconds (default: 2000) */
|
|
3604
|
+
debounceDelay?: number;
|
|
3605
|
+
}
|
|
3606
|
+
/**
|
|
3607
|
+
* Return value of useAutoSave hook
|
|
3608
|
+
*/
|
|
3609
|
+
interface UseAutoSaveReturn {
|
|
3610
|
+
/** Current auto-save status */
|
|
3611
|
+
status: AutoSaveStatus;
|
|
3612
|
+
/** Last save timestamp */
|
|
3613
|
+
lastSaveTime: Date | null;
|
|
3614
|
+
/** Manually trigger a save */
|
|
3615
|
+
save: () => Promise<boolean>;
|
|
3616
|
+
/** Clear auto-saved data from storage */
|
|
3617
|
+
clearAutoSave: () => void;
|
|
3618
|
+
/** Check if there's recoverable data */
|
|
3619
|
+
hasRecoveryData: boolean;
|
|
3620
|
+
/** Get the saved document data for recovery */
|
|
3621
|
+
getRecoveryData: () => SavedDocumentData | null;
|
|
3622
|
+
/** Accept and apply recovered data */
|
|
3623
|
+
acceptRecovery: () => Document | null;
|
|
3624
|
+
/** Dismiss recovery (clears saved data) */
|
|
3625
|
+
dismissRecovery: () => void;
|
|
3626
|
+
/** Whether auto-save is currently enabled */
|
|
3627
|
+
isEnabled: boolean;
|
|
3628
|
+
/** Enable auto-save */
|
|
3629
|
+
enable: () => void;
|
|
3630
|
+
/** Disable auto-save */
|
|
3631
|
+
disable: () => void;
|
|
3632
|
+
}
|
|
3633
|
+
/**
|
|
3634
|
+
* Saved document data structure
|
|
3635
|
+
*/
|
|
3636
|
+
interface SavedDocumentData {
|
|
3637
|
+
/** The document JSON */
|
|
3638
|
+
document: Document;
|
|
3639
|
+
/** When the document was saved */
|
|
3640
|
+
savedAt: string;
|
|
3641
|
+
/** Version for format compatibility */
|
|
3642
|
+
version: number;
|
|
3643
|
+
/** Optional document identifier */
|
|
3644
|
+
documentId?: string;
|
|
3645
|
+
}
|
|
3646
|
+
/**
|
|
3647
|
+
* React hook for auto-saving document to localStorage
|
|
3648
|
+
*/
|
|
3649
|
+
declare function useAutoSave(document: Document | null | undefined, options?: UseAutoSaveOptions): UseAutoSaveReturn;
|
|
3650
|
+
/**
|
|
3651
|
+
* Format last save time for display
|
|
3652
|
+
*/
|
|
3653
|
+
declare function formatLastSaveTime(date: Date | null): string;
|
|
3654
|
+
/**
|
|
3655
|
+
* Get auto-save status label
|
|
3656
|
+
*/
|
|
3657
|
+
declare function getAutoSaveStatusLabel(status: AutoSaveStatus): string;
|
|
3658
|
+
/**
|
|
3659
|
+
* Get storage size used by auto-save
|
|
3660
|
+
*/
|
|
3661
|
+
declare function getAutoSaveStorageSize(storageKey?: string): number;
|
|
3662
|
+
/**
|
|
3663
|
+
* Format storage size for display
|
|
3664
|
+
*/
|
|
3665
|
+
declare function formatStorageSize(bytes: number): string;
|
|
3666
|
+
/**
|
|
3667
|
+
* Check if auto-save is supported in this environment
|
|
3668
|
+
*/
|
|
3669
|
+
declare function isAutoSaveSupported(): boolean;
|
|
3670
|
+
|
|
3671
|
+
/**
|
|
3672
|
+
* useWheelZoom Hook
|
|
3673
|
+
*
|
|
3674
|
+
* Enables Ctrl+scroll (or Cmd+scroll on Mac) to zoom in/out.
|
|
3675
|
+
* Features:
|
|
3676
|
+
* - Configurable zoom range and step
|
|
3677
|
+
* - Smooth zoom transitions
|
|
3678
|
+
* - Pinch-to-zoom support on trackpads
|
|
3679
|
+
* - Zoom reset (Ctrl+0)
|
|
3680
|
+
* - Zoom in/out shortcuts (Ctrl++, Ctrl+-)
|
|
3681
|
+
*/
|
|
3682
|
+
/**
|
|
3683
|
+
* Options for useWheelZoom hook
|
|
3684
|
+
*/
|
|
3685
|
+
interface UseWheelZoomOptions {
|
|
3686
|
+
/** Initial zoom level (default: 1.0) */
|
|
3687
|
+
initialZoom?: number;
|
|
3688
|
+
/** Minimum zoom level (default: 0.25) */
|
|
3689
|
+
minZoom?: number;
|
|
3690
|
+
/** Maximum zoom level (default: 4.0) */
|
|
3691
|
+
maxZoom?: number;
|
|
3692
|
+
/** Zoom step for each scroll event (default: 0.1) */
|
|
3693
|
+
zoomStep?: number;
|
|
3694
|
+
/** Whether zoom is enabled (default: true) */
|
|
3695
|
+
enabled?: boolean;
|
|
3696
|
+
/** Container element ref to attach wheel listener */
|
|
3697
|
+
containerRef?: React.RefObject<HTMLElement>;
|
|
3698
|
+
/** Callback when zoom changes */
|
|
3699
|
+
onZoomChange?: (zoom: number) => void;
|
|
3700
|
+
/** Whether to enable keyboard shortcuts (Ctrl++, Ctrl+-, Ctrl+0) */
|
|
3701
|
+
enableKeyboardShortcuts?: boolean;
|
|
3702
|
+
/** Whether to prevent default browser zoom behavior */
|
|
3703
|
+
preventDefault?: boolean;
|
|
3704
|
+
}
|
|
3705
|
+
/**
|
|
3706
|
+
* Return value of useWheelZoom hook
|
|
3707
|
+
*/
|
|
3708
|
+
interface UseWheelZoomReturn {
|
|
3709
|
+
/** Current zoom level */
|
|
3710
|
+
zoom: number;
|
|
3711
|
+
/** Set zoom level directly */
|
|
3712
|
+
setZoom: (zoom: number) => void;
|
|
3713
|
+
/** Zoom in by step */
|
|
3714
|
+
zoomIn: () => void;
|
|
3715
|
+
/** Zoom out by step */
|
|
3716
|
+
zoomOut: () => void;
|
|
3717
|
+
/** Reset zoom to initial level */
|
|
3718
|
+
resetZoom: () => void;
|
|
3719
|
+
/** Reset zoom to 100% */
|
|
3720
|
+
zoomTo100: () => void;
|
|
3721
|
+
/** Zoom to fit width */
|
|
3722
|
+
zoomToFit: (containerWidth: number, contentWidth: number) => void;
|
|
3723
|
+
/** Whether currently at minimum zoom */
|
|
3724
|
+
isMinZoom: boolean;
|
|
3725
|
+
/** Whether currently at maximum zoom */
|
|
3726
|
+
isMaxZoom: boolean;
|
|
3727
|
+
/** Zoom percentage (e.g., 100 for zoom level 1.0) */
|
|
3728
|
+
zoomPercent: number;
|
|
3729
|
+
/** Wheel event handler (for manual attachment) */
|
|
3730
|
+
handleWheel: (event: WheelEvent) => void;
|
|
3731
|
+
/** Keyboard event handler (for manual attachment) */
|
|
3732
|
+
handleKeyDown: (event: KeyboardEvent) => void;
|
|
3733
|
+
}
|
|
3734
|
+
/**
|
|
3735
|
+
* Preset zoom levels for snapping
|
|
3736
|
+
*/
|
|
3737
|
+
declare const ZOOM_PRESETS: number[];
|
|
3738
|
+
/**
|
|
3739
|
+
* React hook for Ctrl+scroll zoom functionality
|
|
3740
|
+
*/
|
|
3741
|
+
declare function useWheelZoom(options?: UseWheelZoomOptions): UseWheelZoomReturn;
|
|
3742
|
+
/**
|
|
3743
|
+
* Get zoom presets
|
|
3744
|
+
*/
|
|
3745
|
+
declare function getZoomPresets(): number[];
|
|
3746
|
+
/**
|
|
3747
|
+
* Find nearest zoom preset
|
|
3748
|
+
*/
|
|
3749
|
+
declare function findNearestZoomPreset(zoom: number): number;
|
|
3750
|
+
/**
|
|
3751
|
+
* Get next zoom preset (for zoom in)
|
|
3752
|
+
*/
|
|
3753
|
+
declare function getNextZoomPreset(zoom: number): number;
|
|
3754
|
+
/**
|
|
3755
|
+
* Get previous zoom preset (for zoom out)
|
|
3756
|
+
*/
|
|
3757
|
+
declare function getPreviousZoomPreset(zoom: number): number;
|
|
3758
|
+
/**
|
|
3759
|
+
* Format zoom level for display
|
|
3760
|
+
*/
|
|
3761
|
+
declare function formatZoom(zoom: number): string;
|
|
3762
|
+
/**
|
|
3763
|
+
* Parse zoom from percentage string
|
|
3764
|
+
*/
|
|
3765
|
+
declare function parseZoom(zoomString: string): number | null;
|
|
3766
|
+
/**
|
|
3767
|
+
* Check if zoom level is at a preset
|
|
3768
|
+
*/
|
|
3769
|
+
declare function isZoomPreset(zoom: number): boolean;
|
|
3770
|
+
/**
|
|
3771
|
+
* Clamp zoom to valid range
|
|
3772
|
+
*/
|
|
3773
|
+
declare function clampZoom(zoom: number, minZoom?: number, maxZoom?: number): number;
|
|
3774
|
+
|
|
3775
|
+
/**
|
|
3776
|
+
* Insert Operations Utility
|
|
3777
|
+
*
|
|
3778
|
+
* Utility functions for inserting content into the document.
|
|
3779
|
+
* Provides functions for inserting page breaks, horizontal rules, and other elements.
|
|
3780
|
+
*/
|
|
3781
|
+
|
|
3782
|
+
/**
|
|
3783
|
+
* Insert position in the document
|
|
3784
|
+
*/
|
|
3785
|
+
interface InsertPosition {
|
|
3786
|
+
/** Paragraph index in the document body */
|
|
3787
|
+
paragraphIndex: number;
|
|
3788
|
+
/** Run index within the paragraph (optional) */
|
|
3789
|
+
runIndex?: number;
|
|
3790
|
+
/** Character offset within the run (optional) */
|
|
3791
|
+
offset?: number;
|
|
3792
|
+
}
|
|
3793
|
+
/**
|
|
3794
|
+
* Create a page break content element
|
|
3795
|
+
*/
|
|
3796
|
+
declare function createPageBreak(): BreakContent;
|
|
3797
|
+
/**
|
|
3798
|
+
* Create a column break content element
|
|
3799
|
+
*/
|
|
3800
|
+
declare function createColumnBreak(): BreakContent;
|
|
3801
|
+
/**
|
|
3802
|
+
* Create a text wrapping break (line break)
|
|
3803
|
+
*/
|
|
3804
|
+
declare function createLineBreak(clear?: 'none' | 'left' | 'right' | 'all'): BreakContent;
|
|
3805
|
+
/**
|
|
3806
|
+
* Create a run containing a page break
|
|
3807
|
+
*/
|
|
3808
|
+
declare function createPageBreakRun(): Run;
|
|
3809
|
+
/**
|
|
3810
|
+
* Create an empty paragraph with a page break before it
|
|
3811
|
+
*/
|
|
3812
|
+
declare function createPageBreakParagraph(): Paragraph;
|
|
3813
|
+
/**
|
|
3814
|
+
* Insert a page break at a position in the document
|
|
3815
|
+
* This inserts a new paragraph with pageBreakBefore: true
|
|
3816
|
+
*/
|
|
3817
|
+
declare function insertPageBreak(doc: Document, position: InsertPosition): Document;
|
|
3818
|
+
/**
|
|
3819
|
+
* Create a horizontal rule paragraph
|
|
3820
|
+
* Uses a paragraph with bottom border to simulate horizontal rule
|
|
3821
|
+
*/
|
|
3822
|
+
declare function createHorizontalRule(): Paragraph;
|
|
3823
|
+
/**
|
|
3824
|
+
* Insert a horizontal rule at a position in the document
|
|
3825
|
+
*/
|
|
3826
|
+
declare function insertHorizontalRule(doc: Document, position: InsertPosition): Document;
|
|
3827
|
+
/**
|
|
3828
|
+
* Check if content is a page break
|
|
3829
|
+
*/
|
|
3830
|
+
declare function isPageBreak(content: RunContent): boolean;
|
|
3831
|
+
/**
|
|
3832
|
+
* Check if content is a column break
|
|
3833
|
+
*/
|
|
3834
|
+
declare function isColumnBreak(content: RunContent): boolean;
|
|
3835
|
+
/**
|
|
3836
|
+
* Check if content is a line break
|
|
3837
|
+
*/
|
|
3838
|
+
declare function isLineBreak(content: RunContent): boolean;
|
|
3839
|
+
/**
|
|
3840
|
+
* Check if content is any type of break
|
|
3841
|
+
*/
|
|
3842
|
+
declare function isBreakContent(content: RunContent): content is BreakContent;
|
|
3843
|
+
/**
|
|
3844
|
+
* Check if a paragraph has pageBreakBefore
|
|
3845
|
+
*/
|
|
3846
|
+
declare function hasPageBreakBefore(paragraph: Paragraph): boolean;
|
|
3847
|
+
/**
|
|
3848
|
+
* Count page breaks in a document
|
|
3849
|
+
*/
|
|
3850
|
+
declare function countPageBreaks(doc: Document): number;
|
|
3851
|
+
/**
|
|
3852
|
+
* Find all page break positions in a document
|
|
3853
|
+
*/
|
|
3854
|
+
declare function findPageBreaks(doc: Document): InsertPosition[];
|
|
3855
|
+
/**
|
|
3856
|
+
* Remove a page break at a specific position
|
|
3857
|
+
*/
|
|
3858
|
+
declare function removePageBreak(doc: Document, position: InsertPosition): Document;
|
|
3859
|
+
|
|
3860
|
+
/**
|
|
3861
|
+
* Selection Highlight Utilities
|
|
3862
|
+
*
|
|
3863
|
+
* Provides visual highlighting for text selection across multiple runs.
|
|
3864
|
+
* Browsers handle ::selection pseudo-element differently, especially when
|
|
3865
|
+
* selection spans multiple elements with different backgrounds or styling.
|
|
3866
|
+
*
|
|
3867
|
+
* This module provides:
|
|
3868
|
+
* - Custom selection highlight rendering
|
|
3869
|
+
* - Programmatic selection range marking
|
|
3870
|
+
* - Visual feedback for selection across runs
|
|
3871
|
+
*/
|
|
3872
|
+
|
|
3873
|
+
/**
|
|
3874
|
+
* Highlight rectangle representing a selected region
|
|
3875
|
+
*/
|
|
3876
|
+
interface HighlightRect {
|
|
3877
|
+
/** Left position in pixels */
|
|
3878
|
+
left: number;
|
|
3879
|
+
/** Top position in pixels */
|
|
3880
|
+
top: number;
|
|
3881
|
+
/** Width in pixels */
|
|
3882
|
+
width: number;
|
|
3883
|
+
/** Height in pixels */
|
|
3884
|
+
height: number;
|
|
3885
|
+
}
|
|
3886
|
+
/**
|
|
3887
|
+
* Selection highlight configuration
|
|
3888
|
+
*/
|
|
3889
|
+
interface SelectionHighlightConfig {
|
|
3890
|
+
/** Background color for selection */
|
|
3891
|
+
backgroundColor: string;
|
|
3892
|
+
/** Optional border color for selection */
|
|
3893
|
+
borderColor?: string;
|
|
3894
|
+
/** Optional border radius */
|
|
3895
|
+
borderRadius?: number;
|
|
3896
|
+
/** Z-index for overlay */
|
|
3897
|
+
zIndex?: number;
|
|
3898
|
+
/** Opacity for highlight */
|
|
3899
|
+
opacity?: number;
|
|
3900
|
+
/** Mix blend mode */
|
|
3901
|
+
mixBlendMode?: CSSProperties['mixBlendMode'];
|
|
3902
|
+
}
|
|
3903
|
+
/**
|
|
3904
|
+
* Selection range in document coordinates
|
|
3905
|
+
*/
|
|
3906
|
+
interface SelectionRange {
|
|
3907
|
+
/** Start position */
|
|
3908
|
+
start: {
|
|
3909
|
+
paragraphIndex: number;
|
|
3910
|
+
contentIndex: number;
|
|
3911
|
+
offset: number;
|
|
3912
|
+
};
|
|
3913
|
+
/** End position */
|
|
3914
|
+
end: {
|
|
3915
|
+
paragraphIndex: number;
|
|
3916
|
+
contentIndex: number;
|
|
3917
|
+
offset: number;
|
|
3918
|
+
};
|
|
3919
|
+
}
|
|
3920
|
+
/**
|
|
3921
|
+
* Default selection highlight style (matches Word/Google Docs)
|
|
3922
|
+
*/
|
|
3923
|
+
declare const DEFAULT_SELECTION_STYLE: SelectionHighlightConfig;
|
|
3924
|
+
/**
|
|
3925
|
+
* High contrast selection style
|
|
3926
|
+
*/
|
|
3927
|
+
declare const HIGH_CONTRAST_SELECTION_STYLE: SelectionHighlightConfig;
|
|
3928
|
+
/**
|
|
3929
|
+
* Selection highlight CSS custom properties
|
|
3930
|
+
*/
|
|
3931
|
+
declare const SELECTION_CSS_VARS: {
|
|
3932
|
+
readonly backgroundColor: "--docx-selection-bg";
|
|
3933
|
+
readonly borderColor: "--docx-selection-border";
|
|
3934
|
+
readonly textColor: "--docx-selection-text";
|
|
3935
|
+
};
|
|
3936
|
+
/**
|
|
3937
|
+
* Get all selection rectangles from the current DOM selection
|
|
3938
|
+
*
|
|
3939
|
+
* Uses getClientRects() to get accurate rectangles even when
|
|
3940
|
+
* selection spans multiple inline elements.
|
|
3941
|
+
*/
|
|
3942
|
+
declare function getSelectionRects(containerElement?: HTMLElement | null): HighlightRect[];
|
|
3943
|
+
/**
|
|
3944
|
+
* Merge adjacent or overlapping rectangles
|
|
3945
|
+
*
|
|
3946
|
+
* This reduces the number of highlight elements needed and creates
|
|
3947
|
+
* a cleaner visual appearance.
|
|
3948
|
+
*/
|
|
3949
|
+
declare function mergeAdjacentRects(rects: HighlightRect[], tolerance?: number): HighlightRect[];
|
|
3950
|
+
/**
|
|
3951
|
+
* Get selection rectangles with merging applied
|
|
3952
|
+
*/
|
|
3953
|
+
declare function getMergedSelectionRects(containerElement?: HTMLElement | null): HighlightRect[];
|
|
3954
|
+
/**
|
|
3955
|
+
* Generate CSS styles for a highlight rectangle
|
|
3956
|
+
*/
|
|
3957
|
+
declare function getHighlightRectStyle(rect: HighlightRect, config?: SelectionHighlightConfig): CSSProperties;
|
|
3958
|
+
/**
|
|
3959
|
+
* Generate inline CSS for selection pseudo-elements
|
|
3960
|
+
*
|
|
3961
|
+
* This is used to inject consistent selection styling
|
|
3962
|
+
* across all editable elements.
|
|
3963
|
+
*/
|
|
3964
|
+
declare function generateSelectionCSS(selector: string, config?: SelectionHighlightConfig): string;
|
|
3965
|
+
/**
|
|
3966
|
+
* Check if there is an active text selection (not collapsed)
|
|
3967
|
+
*/
|
|
3968
|
+
declare function hasActiveSelection(): boolean;
|
|
3969
|
+
/**
|
|
3970
|
+
* Get the selected text
|
|
3971
|
+
*/
|
|
3972
|
+
declare function getSelectedText(): string;
|
|
3973
|
+
/**
|
|
3974
|
+
* Check if selection is within a specific element
|
|
3975
|
+
*/
|
|
3976
|
+
declare function isSelectionWithin(element: HTMLElement): boolean;
|
|
3977
|
+
/**
|
|
3978
|
+
* Get the bounding rect of the current selection
|
|
3979
|
+
*/
|
|
3980
|
+
declare function getSelectionBoundingRect(): DOMRect | null;
|
|
3981
|
+
/**
|
|
3982
|
+
* Create a selection highlight for a specific text range
|
|
3983
|
+
*
|
|
3984
|
+
* This is useful for find/replace highlighting, AI action previews, etc.
|
|
3985
|
+
*/
|
|
3986
|
+
declare function highlightTextRange(_containerElement: HTMLElement, startNode: Node, startOffset: number, endNode: Node, endOffset: number): Range | null;
|
|
3987
|
+
/**
|
|
3988
|
+
* Select a text range programmatically
|
|
3989
|
+
*/
|
|
3990
|
+
declare function selectRange(range: Range): void;
|
|
3991
|
+
/**
|
|
3992
|
+
* Clear the current selection
|
|
3993
|
+
*/
|
|
3994
|
+
declare function clearSelection(): void;
|
|
3995
|
+
/**
|
|
3996
|
+
* Check if selection is backwards (focus before anchor)
|
|
3997
|
+
*/
|
|
3998
|
+
declare function isSelectionBackwards(): boolean;
|
|
3999
|
+
/**
|
|
4000
|
+
* Normalize selection to always be forward (start before end)
|
|
4001
|
+
*/
|
|
4002
|
+
declare function normalizeSelectionDirection(): void;
|
|
4003
|
+
/**
|
|
4004
|
+
* Inject selection highlight CSS into document
|
|
4005
|
+
*/
|
|
4006
|
+
declare function injectSelectionStyles(config?: SelectionHighlightConfig): void;
|
|
4007
|
+
/**
|
|
4008
|
+
* Remove injected selection styles
|
|
4009
|
+
*/
|
|
4010
|
+
declare function removeSelectionStyles(): void;
|
|
4011
|
+
/**
|
|
4012
|
+
* Check if selection styles are injected
|
|
4013
|
+
*/
|
|
4014
|
+
declare function areSelectionStylesInjected(): boolean;
|
|
4015
|
+
/**
|
|
4016
|
+
* Create a selection change handler that updates highlight rects
|
|
4017
|
+
*/
|
|
4018
|
+
declare function createSelectionChangeHandler(containerElement: HTMLElement | null, onRectsChange: (rects: HighlightRect[]) => void, merge?: boolean): () => void;
|
|
4019
|
+
|
|
4020
|
+
/**
|
|
4021
|
+
* Selection Highlight Hook
|
|
4022
|
+
*
|
|
4023
|
+
* A React hook that manages visual selection highlighting across multiple runs.
|
|
4024
|
+
* Uses a combination of CSS ::selection pseudo-element styling and optional
|
|
4025
|
+
* overlay rectangles for complex scenarios.
|
|
4026
|
+
*
|
|
4027
|
+
* Features:
|
|
4028
|
+
* - Consistent selection highlighting across all text runs
|
|
4029
|
+
* - Support for text with different backgrounds (highlighted, dark bg)
|
|
4030
|
+
* - Optional overlay rectangles for custom highlight effects
|
|
4031
|
+
* - Debounced updates for performance
|
|
4032
|
+
*/
|
|
4033
|
+
|
|
4034
|
+
/**
|
|
4035
|
+
* Options for the useSelectionHighlight hook
|
|
4036
|
+
*/
|
|
4037
|
+
interface UseSelectionHighlightOptions {
|
|
4038
|
+
/** Reference to the container element */
|
|
4039
|
+
containerRef: React__default.RefObject<HTMLElement>;
|
|
4040
|
+
/** Whether to enable selection highlighting */
|
|
4041
|
+
enabled?: boolean;
|
|
4042
|
+
/** Custom highlight configuration */
|
|
4043
|
+
config?: SelectionHighlightConfig;
|
|
4044
|
+
/** Whether to use overlay rectangles (default: false, uses CSS) */
|
|
4045
|
+
useOverlay?: boolean;
|
|
4046
|
+
/** Debounce delay for rect updates in ms (default: 16) */
|
|
4047
|
+
debounceMs?: number;
|
|
4048
|
+
/** Callback when selection changes */
|
|
4049
|
+
onSelectionChange?: (hasSelection: boolean, text: string) => void;
|
|
4050
|
+
}
|
|
4051
|
+
/**
|
|
4052
|
+
* Return value from the useSelectionHighlight hook
|
|
4053
|
+
*/
|
|
4054
|
+
interface UseSelectionHighlightReturn {
|
|
4055
|
+
/** Whether there is an active selection */
|
|
4056
|
+
hasSelection: boolean;
|
|
4057
|
+
/** The selected text */
|
|
4058
|
+
selectedText: string;
|
|
4059
|
+
/** Highlight rectangles (only populated if useOverlay is true) */
|
|
4060
|
+
highlightRects: HighlightRect[];
|
|
4061
|
+
/** Whether selection is within the container */
|
|
4062
|
+
isSelectionInContainer: boolean;
|
|
4063
|
+
/** Refresh the highlight state */
|
|
4064
|
+
refresh: () => void;
|
|
4065
|
+
/** Get styles for a highlight rect overlay */
|
|
4066
|
+
getOverlayStyle: (rect: HighlightRect) => CSSProperties;
|
|
4067
|
+
}
|
|
4068
|
+
/**
|
|
4069
|
+
* Hook to manage selection highlighting in the editor
|
|
4070
|
+
*/
|
|
4071
|
+
declare function useSelectionHighlight(options: UseSelectionHighlightOptions): UseSelectionHighlightReturn;
|
|
4072
|
+
/**
|
|
4073
|
+
* Props for selection overlay component
|
|
4074
|
+
*/
|
|
4075
|
+
interface SelectionOverlayProps {
|
|
4076
|
+
/** Highlight rectangles to render */
|
|
4077
|
+
rects: HighlightRect[];
|
|
4078
|
+
/** Style configuration */
|
|
4079
|
+
config?: SelectionHighlightConfig;
|
|
4080
|
+
/** Additional class name */
|
|
4081
|
+
className?: string;
|
|
4082
|
+
}
|
|
4083
|
+
/**
|
|
4084
|
+
* Generate selection overlay elements (for use in JSX)
|
|
4085
|
+
*
|
|
4086
|
+
* Usage:
|
|
4087
|
+
* ```tsx
|
|
4088
|
+
* const { highlightRects } = useSelectionHighlight({ ... });
|
|
4089
|
+
* return (
|
|
4090
|
+
* <div style={{ position: 'relative' }}>
|
|
4091
|
+
* {generateOverlayElements(highlightRects)}
|
|
4092
|
+
* <div>... content ...</div>
|
|
4093
|
+
* </div>
|
|
4094
|
+
* );
|
|
4095
|
+
* ```
|
|
4096
|
+
*/
|
|
4097
|
+
declare function generateOverlayElements(rects: HighlightRect[], config?: SelectionHighlightConfig): React__default.ReactNode[];
|
|
4098
|
+
|
|
4099
|
+
/**
|
|
4100
|
+
* Text Selection Utilities
|
|
4101
|
+
*
|
|
4102
|
+
* Utilities for word-level and paragraph-level text selection.
|
|
4103
|
+
* Used for double-click (word) and triple-click (paragraph) selection.
|
|
4104
|
+
*/
|
|
4105
|
+
/**
|
|
4106
|
+
* Check if a character is a word character
|
|
4107
|
+
*/
|
|
4108
|
+
declare function isWordCharacter$1(char: string): boolean;
|
|
4109
|
+
/**
|
|
4110
|
+
* Check if a character is whitespace
|
|
4111
|
+
*/
|
|
4112
|
+
declare function isWhitespace$1(char: string): boolean;
|
|
4113
|
+
/**
|
|
4114
|
+
* Find word boundaries around a position in text
|
|
4115
|
+
* Returns [startIndex, endIndex] inclusive start, exclusive end
|
|
4116
|
+
*/
|
|
4117
|
+
declare function findWordBoundaries(text: string, position: number): [number, number];
|
|
4118
|
+
/**
|
|
4119
|
+
* Get the word at a position in text
|
|
4120
|
+
*/
|
|
4121
|
+
declare function getWordAt(text: string, position: number): string;
|
|
4122
|
+
/**
|
|
4123
|
+
* Word selection result
|
|
4124
|
+
*/
|
|
4125
|
+
interface WordSelectionResult {
|
|
4126
|
+
/** The selected word */
|
|
4127
|
+
word: string;
|
|
4128
|
+
/** Start index in the text (inclusive) */
|
|
4129
|
+
startIndex: number;
|
|
4130
|
+
/** End index in the text (exclusive) */
|
|
4131
|
+
endIndex: number;
|
|
4132
|
+
}
|
|
4133
|
+
/**
|
|
4134
|
+
* Find the word at a position and return detailed info
|
|
4135
|
+
*/
|
|
4136
|
+
declare function findWordAt(text: string, position: number): WordSelectionResult;
|
|
4137
|
+
/**
|
|
4138
|
+
* Select a word at the current cursor position using the browser's native APIs.
|
|
4139
|
+
* This works reliably across different browsers and handles contentEditable well.
|
|
4140
|
+
*/
|
|
4141
|
+
declare function selectWordAtCursor(): boolean;
|
|
4142
|
+
/**
|
|
4143
|
+
* Select a word in a specific text node at the given offset
|
|
4144
|
+
*/
|
|
4145
|
+
declare function selectWordInTextNode(textNode: Text, offset: number): boolean;
|
|
4146
|
+
/**
|
|
4147
|
+
* Expand the current selection to word boundaries.
|
|
4148
|
+
* If there's a collapsed selection (cursor), selects the word at cursor.
|
|
4149
|
+
* If there's an existing selection, expands to include complete words.
|
|
4150
|
+
*/
|
|
4151
|
+
declare function expandSelectionToWordBoundaries(): boolean;
|
|
4152
|
+
/**
|
|
4153
|
+
* Select the entire paragraph containing the current selection.
|
|
4154
|
+
* Looks for the nearest element with [data-paragraph-index] attribute.
|
|
4155
|
+
*/
|
|
4156
|
+
declare function selectParagraphAtCursor(): boolean;
|
|
4157
|
+
/**
|
|
4158
|
+
* Handle click event for multi-click detection.
|
|
4159
|
+
* Call this in your click handler.
|
|
4160
|
+
* Returns the click count (1 = single, 2 = double, 3 = triple).
|
|
4161
|
+
*/
|
|
4162
|
+
declare function handleClickForMultiClick(event: MouseEvent): number;
|
|
4163
|
+
/**
|
|
4164
|
+
* Create a double-click handler that selects words.
|
|
4165
|
+
* Returns a function that should be called on dblclick events.
|
|
4166
|
+
*/
|
|
4167
|
+
declare function createDoubleClickWordSelector(): (event: MouseEvent) => void;
|
|
4168
|
+
/**
|
|
4169
|
+
* Create a triple-click handler that selects paragraphs.
|
|
4170
|
+
* This uses our custom click counting since browsers have inconsistent triple-click.
|
|
4171
|
+
*/
|
|
4172
|
+
declare function createTripleClickParagraphSelector(): (event: MouseEvent) => void;
|
|
4173
|
+
|
|
4174
|
+
/**
|
|
4175
|
+
* Keyboard Navigation Utilities
|
|
4176
|
+
*
|
|
4177
|
+
* Provides enhanced keyboard navigation for the editor:
|
|
4178
|
+
* - Ctrl+Left/Right: Move by word
|
|
4179
|
+
* - Home/End: Move to start/end of line
|
|
4180
|
+
* - Ctrl+Home/End: Move to start/end of document
|
|
4181
|
+
* - Ctrl+Shift+Left/Right: Select by word
|
|
4182
|
+
* - Shift+Home/End: Select to start/end of line
|
|
4183
|
+
*/
|
|
4184
|
+
/**
|
|
4185
|
+
* Navigation direction
|
|
4186
|
+
*/
|
|
4187
|
+
type NavigationDirection = 'left' | 'right' | 'up' | 'down';
|
|
4188
|
+
/**
|
|
4189
|
+
* Navigation unit
|
|
4190
|
+
*/
|
|
4191
|
+
type NavigationUnit = 'character' | 'word' | 'line' | 'paragraph' | 'document';
|
|
4192
|
+
/**
|
|
4193
|
+
* Keyboard navigation action
|
|
4194
|
+
*/
|
|
4195
|
+
interface NavigationAction {
|
|
4196
|
+
/** Direction to navigate */
|
|
4197
|
+
direction: NavigationDirection;
|
|
4198
|
+
/** Unit of movement */
|
|
4199
|
+
unit: NavigationUnit;
|
|
4200
|
+
/** Whether to extend selection */
|
|
4201
|
+
extend: boolean;
|
|
4202
|
+
}
|
|
4203
|
+
/**
|
|
4204
|
+
* Keyboard shortcut definition
|
|
4205
|
+
*/
|
|
4206
|
+
interface KeyboardShortcut {
|
|
4207
|
+
key: string;
|
|
4208
|
+
ctrlKey?: boolean;
|
|
4209
|
+
metaKey?: boolean;
|
|
4210
|
+
shiftKey?: boolean;
|
|
4211
|
+
altKey?: boolean;
|
|
4212
|
+
}
|
|
4213
|
+
/**
|
|
4214
|
+
* Check if a character is a word character (letter, digit, or underscore)
|
|
4215
|
+
*/
|
|
4216
|
+
declare function isWordCharacter(char: string): boolean;
|
|
4217
|
+
/**
|
|
4218
|
+
* Check if a character is whitespace
|
|
4219
|
+
*/
|
|
4220
|
+
declare function isWhitespace(char: string): boolean;
|
|
4221
|
+
/**
|
|
4222
|
+
* Check if a character is a punctuation character
|
|
4223
|
+
*/
|
|
4224
|
+
declare function isPunctuation(char: string): boolean;
|
|
4225
|
+
/**
|
|
4226
|
+
* Find the start of the current or previous word
|
|
4227
|
+
*/
|
|
4228
|
+
declare function findWordStart(text: string, position: number): number;
|
|
4229
|
+
/**
|
|
4230
|
+
* Find the end of the current or next word
|
|
4231
|
+
*/
|
|
4232
|
+
declare function findWordEnd(text: string, position: number): number;
|
|
4233
|
+
/**
|
|
4234
|
+
* Find the next word start (for Ctrl+Right navigation)
|
|
4235
|
+
*/
|
|
4236
|
+
declare function findNextWordStart(text: string, position: number): number;
|
|
4237
|
+
/**
|
|
4238
|
+
* Find the previous word start (for Ctrl+Left navigation)
|
|
4239
|
+
*/
|
|
4240
|
+
declare function findPreviousWordStart(text: string, position: number): number;
|
|
4241
|
+
/**
|
|
4242
|
+
* Find the start of the current line in a text node
|
|
4243
|
+
* Uses visual line detection based on bounding rectangles
|
|
4244
|
+
*/
|
|
4245
|
+
declare function findVisualLineStart(container: Node, offset: number): {
|
|
4246
|
+
node: Node;
|
|
4247
|
+
offset: number;
|
|
4248
|
+
} | null;
|
|
4249
|
+
/**
|
|
4250
|
+
* Find the end of the current line in a text node
|
|
4251
|
+
* Uses visual line detection based on bounding rectangles
|
|
4252
|
+
*/
|
|
4253
|
+
declare function findVisualLineEnd(container: Node, offset: number): {
|
|
4254
|
+
node: Node;
|
|
4255
|
+
offset: number;
|
|
4256
|
+
} | null;
|
|
4257
|
+
/**
|
|
4258
|
+
* Get the current selection info
|
|
4259
|
+
*/
|
|
4260
|
+
declare function getSelectionInfo(): {
|
|
4261
|
+
node: Node;
|
|
4262
|
+
offset: number;
|
|
4263
|
+
anchorNode: Node | null;
|
|
4264
|
+
anchorOffset: number;
|
|
4265
|
+
focusNode: Node | null;
|
|
4266
|
+
focusOffset: number;
|
|
4267
|
+
isCollapsed: boolean;
|
|
4268
|
+
text: string;
|
|
4269
|
+
} | null;
|
|
4270
|
+
/**
|
|
4271
|
+
* Set the selection to a specific position
|
|
4272
|
+
*/
|
|
4273
|
+
declare function setSelectionPosition(node: Node, offset: number): void;
|
|
4274
|
+
/**
|
|
4275
|
+
* Extend selection to a specific position
|
|
4276
|
+
*/
|
|
4277
|
+
declare function extendSelectionTo(node: Node, offset: number): void;
|
|
4278
|
+
/**
|
|
4279
|
+
* Move selection by word in a text node
|
|
4280
|
+
*/
|
|
4281
|
+
declare function moveByWord(direction: 'left' | 'right', extend?: boolean): boolean;
|
|
4282
|
+
/**
|
|
4283
|
+
* Move to start/end of line
|
|
4284
|
+
*/
|
|
4285
|
+
declare function moveToLineEdge(edge: 'start' | 'end', extend?: boolean): boolean;
|
|
4286
|
+
/**
|
|
4287
|
+
* Parse a keyboard event into a navigation action
|
|
4288
|
+
*/
|
|
4289
|
+
declare function parseNavigationAction(event: KeyboardEvent): NavigationAction | null;
|
|
4290
|
+
/**
|
|
4291
|
+
* Handle a keyboard navigation event
|
|
4292
|
+
* Returns true if the event was handled
|
|
4293
|
+
*/
|
|
4294
|
+
declare function handleNavigationKey(event: KeyboardEvent, options?: {
|
|
4295
|
+
onDocumentStart?: () => void;
|
|
4296
|
+
onDocumentEnd?: () => void;
|
|
4297
|
+
}): boolean;
|
|
4298
|
+
/**
|
|
4299
|
+
* Check if an event is a navigation key event
|
|
4300
|
+
*/
|
|
4301
|
+
declare function isNavigationKey(event: KeyboardEvent): boolean;
|
|
4302
|
+
/**
|
|
4303
|
+
* Expand selection to word boundaries
|
|
4304
|
+
* Used for double-click word selection
|
|
4305
|
+
*/
|
|
4306
|
+
declare function expandSelectionToWord(): boolean;
|
|
4307
|
+
/**
|
|
4308
|
+
* Get the word at the current cursor position
|
|
4309
|
+
*/
|
|
4310
|
+
declare function getWordAtCursor(): string | null;
|
|
4311
|
+
/**
|
|
4312
|
+
* Check if a keyboard event matches a shortcut definition
|
|
4313
|
+
*/
|
|
4314
|
+
declare function matchesShortcut(event: KeyboardEvent, shortcut: KeyboardShortcut): boolean;
|
|
4315
|
+
/**
|
|
4316
|
+
* Common navigation shortcuts
|
|
4317
|
+
*/
|
|
4318
|
+
declare const NAVIGATION_SHORTCUTS: {
|
|
4319
|
+
readonly wordLeft: KeyboardShortcut;
|
|
4320
|
+
readonly wordRight: KeyboardShortcut;
|
|
4321
|
+
readonly selectWordLeft: KeyboardShortcut;
|
|
4322
|
+
readonly selectWordRight: KeyboardShortcut;
|
|
4323
|
+
readonly lineStart: KeyboardShortcut;
|
|
4324
|
+
readonly lineEnd: KeyboardShortcut;
|
|
4325
|
+
readonly selectToLineStart: KeyboardShortcut;
|
|
4326
|
+
readonly selectToLineEnd: KeyboardShortcut;
|
|
4327
|
+
readonly documentStart: KeyboardShortcut;
|
|
4328
|
+
readonly documentEnd: KeyboardShortcut;
|
|
4329
|
+
readonly selectToDocumentStart: KeyboardShortcut;
|
|
4330
|
+
readonly selectToDocumentEnd: KeyboardShortcut;
|
|
4331
|
+
};
|
|
4332
|
+
/**
|
|
4333
|
+
* Get a human-readable description of a shortcut
|
|
4334
|
+
*/
|
|
4335
|
+
declare function describeShortcut(shortcut: KeyboardShortcut): string;
|
|
4336
|
+
/**
|
|
4337
|
+
* Get all navigation shortcuts with descriptions
|
|
4338
|
+
*/
|
|
4339
|
+
declare function getNavigationShortcutDescriptions(): Array<{
|
|
4340
|
+
action: string;
|
|
4341
|
+
shortcut: string;
|
|
4342
|
+
}>;
|
|
4343
|
+
|
|
4344
|
+
/**
|
|
4345
|
+
* useClipboard Hook
|
|
4346
|
+
*
|
|
4347
|
+
* React hook for managing clipboard operations in the editor with formatting preservation.
|
|
4348
|
+
*
|
|
4349
|
+
* Features:
|
|
4350
|
+
* - Copy: Copies selected runs/paragraphs to clipboard with formatting as HTML
|
|
4351
|
+
* - Cut: Copies and removes selected content
|
|
4352
|
+
* - Paste: Parses clipboard HTML/text and applies formatting
|
|
4353
|
+
* - Handles Word-pasted content (cleans Word-specific markup)
|
|
4354
|
+
* - Keyboard shortcuts (Ctrl+C, Ctrl+X, Ctrl+V)
|
|
4355
|
+
*/
|
|
4356
|
+
|
|
4357
|
+
/**
|
|
4358
|
+
* Selection data for clipboard operations
|
|
4359
|
+
*/
|
|
4360
|
+
interface ClipboardSelection {
|
|
4361
|
+
/** Selected text (plain text) */
|
|
4362
|
+
text: string;
|
|
4363
|
+
/** Selected runs */
|
|
4364
|
+
runs: Run[];
|
|
4365
|
+
/** Start position */
|
|
4366
|
+
startParagraphIndex: number;
|
|
4367
|
+
startRunIndex: number;
|
|
4368
|
+
startOffset: number;
|
|
4369
|
+
/** End position */
|
|
4370
|
+
endParagraphIndex: number;
|
|
4371
|
+
endRunIndex: number;
|
|
4372
|
+
endOffset: number;
|
|
4373
|
+
/** Whether selection spans multiple paragraphs */
|
|
4374
|
+
isMultiParagraph: boolean;
|
|
4375
|
+
}
|
|
4376
|
+
/**
|
|
4377
|
+
* Options for useClipboard hook
|
|
4378
|
+
*/
|
|
4379
|
+
interface UseClipboardOptions {
|
|
4380
|
+
/** Callback when content is copied */
|
|
4381
|
+
onCopy?: (selection: ClipboardSelection) => void;
|
|
4382
|
+
/** Callback when content is cut */
|
|
4383
|
+
onCut?: (selection: ClipboardSelection) => void;
|
|
4384
|
+
/** Callback when content is pasted */
|
|
4385
|
+
onPaste?: (content: ParsedClipboardContent, asPlainText: boolean) => void;
|
|
4386
|
+
/** Whether to clean Word-specific formatting */
|
|
4387
|
+
cleanWordFormatting?: boolean;
|
|
4388
|
+
/** Whether the editor is editable */
|
|
4389
|
+
editable?: boolean;
|
|
4390
|
+
/** Callback for errors */
|
|
4391
|
+
onError?: (error: Error) => void;
|
|
4392
|
+
}
|
|
4393
|
+
/**
|
|
4394
|
+
* Return value of useClipboard hook
|
|
4395
|
+
*/
|
|
4396
|
+
interface UseClipboardReturn {
|
|
4397
|
+
/** Copy the current selection to clipboard */
|
|
4398
|
+
copy: (selection: ClipboardSelection) => Promise<boolean>;
|
|
4399
|
+
/** Cut the current selection to clipboard */
|
|
4400
|
+
cut: (selection: ClipboardSelection) => Promise<boolean>;
|
|
4401
|
+
/** Paste from clipboard */
|
|
4402
|
+
paste: (asPlainText?: boolean) => Promise<ParsedClipboardContent | null>;
|
|
4403
|
+
/** Handle copy event from DOM */
|
|
4404
|
+
handleCopy: (event: ClipboardEvent) => void;
|
|
4405
|
+
/** Handle cut event from DOM */
|
|
4406
|
+
handleCut: (event: ClipboardEvent) => void;
|
|
4407
|
+
/** Handle paste event from DOM */
|
|
4408
|
+
handlePaste: (event: ClipboardEvent) => void;
|
|
4409
|
+
/** Handle keyboard shortcuts */
|
|
4410
|
+
handleKeyDown: (event: KeyboardEvent) => void;
|
|
4411
|
+
/** Whether a clipboard operation is in progress */
|
|
4412
|
+
isProcessing: boolean;
|
|
4413
|
+
/** Last pasted content */
|
|
4414
|
+
lastPastedContent: ParsedClipboardContent | null;
|
|
4415
|
+
}
|
|
4416
|
+
/**
|
|
4417
|
+
* Get selected runs from the current DOM selection
|
|
4418
|
+
*/
|
|
4419
|
+
declare function getSelectionRuns(): Run[];
|
|
4420
|
+
/**
|
|
4421
|
+
* Create a selection object from the current DOM selection
|
|
4422
|
+
*/
|
|
4423
|
+
declare function createSelectionFromDOM(): ClipboardSelection | null;
|
|
4424
|
+
/**
|
|
4425
|
+
* React hook for clipboard operations
|
|
4426
|
+
*/
|
|
4427
|
+
declare function useClipboard(options?: UseClipboardOptions): UseClipboardReturn;
|
|
4428
|
+
|
|
4429
|
+
declare const PLUGIN_HOST_STYLES = "\n.plugin-host {\n display: flex;\n width: 100%;\n height: 100%;\n overflow: visible;\n position: relative;\n}\n\n.plugin-host-editor {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n overflow: visible;\n}\n\n\n.plugin-panels-left,\n.plugin-panels-right {\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n background: #f8f9fa;\n border-color: #e9ecef;\n}\n\n.plugin-panels-left {\n border-right: 1px solid #e9ecef;\n}\n\n.plugin-panels-right {\n border-left: 1px solid #e9ecef;\n}\n\n.plugin-panels-bottom {\n border-top: 1px solid #e9ecef;\n background: #f8f9fa;\n}\n\n.plugin-panel {\n position: relative;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n transition: width 0.2s ease, height 0.2s ease;\n}\n\n.plugin-panel.collapsed {\n overflow: visible;\n}\n\n.plugin-panel-toggle {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 6px 8px;\n background: transparent;\n border: none;\n cursor: pointer;\n font-size: 12px;\n color: #6c757d;\n white-space: nowrap;\n}\n\n.plugin-panel.collapsed .plugin-panel-toggle {\n writing-mode: vertical-rl;\n text-orientation: mixed;\n flex-direction: column;\n height: 100%;\n padding: 8px 6px;\n}\n\n.plugin-panel-toggle:hover {\n background: #e9ecef;\n color: #495057;\n}\n\n.plugin-panel-toggle-icon {\n font-weight: bold;\n font-size: 14px;\n}\n\n.plugin-panel.collapsed .plugin-panel-toggle-icon {\n transform: rotate(90deg);\n}\n\n.plugin-panel-toggle-label {\n font-weight: 500;\n}\n\n.plugin-panel-content {\n flex: 1;\n overflow: auto;\n}\n\n/* Overlay panels - positioned absolutely over the editor, outside the page */\n.plugin-panels-overlay-right {\n position: absolute;\n top: 0;\n right: 50%;\n margin-right: -600px; /* Position outside the ~816px page width / 2 + gap */\n bottom: 0;\n width: 220px;\n pointer-events: none;\n z-index: 10;\n overflow: visible;\n clip: unset;\n}\n\n.plugin-panel-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n flex-shrink: 0;\n pointer-events: none;\n background: transparent;\n overflow: visible;\n clip: unset;\n}\n\n.plugin-panel-overlay.collapsed {\n display: none;\n}\n\n.plugin-panel-overlay-content {\n flex: 1;\n overflow: visible;\n position: relative;\n clip: unset;\n}\n\n/* Plugin overlay container for rendering highlights/decorations */\n.plugin-overlays-container {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n overflow: visible;\n z-index: 5;\n}\n\n.plugin-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n}\n\n.plugin-overlay > * {\n pointer-events: auto;\n}\n";
|
|
4430
|
+
/**
|
|
4431
|
+
* PluginHost Component
|
|
4432
|
+
*
|
|
4433
|
+
* Wraps the editor and provides:
|
|
4434
|
+
* - Plugin state management
|
|
4435
|
+
* - Panel rendering for each plugin
|
|
4436
|
+
* - CSS injection for plugin styles
|
|
4437
|
+
* - Callbacks for editor interaction
|
|
4438
|
+
*/
|
|
4439
|
+
declare const PluginHost: React$1.ForwardRefExoticComponent<PluginHostProps & React$1.RefAttributes<PluginHostRef>>;
|
|
4440
|
+
|
|
4441
|
+
/**
|
|
4442
|
+
* Template tag types
|
|
4443
|
+
*/
|
|
4444
|
+
type TagType = 'variable' | 'sectionStart' | 'sectionEnd' | 'invertedStart' | 'raw';
|
|
4445
|
+
/**
|
|
4446
|
+
* A found template tag
|
|
4447
|
+
*/
|
|
4448
|
+
interface TemplateTag {
|
|
4449
|
+
id: string;
|
|
4450
|
+
type: TagType;
|
|
4451
|
+
name: string;
|
|
4452
|
+
rawTag: string;
|
|
4453
|
+
from: number;
|
|
4454
|
+
to: number;
|
|
4455
|
+
/** For sections: nested variable names */
|
|
4456
|
+
nestedVars?: string[];
|
|
4457
|
+
/** True if this variable is inside a section (shown in section's nested vars) */
|
|
4458
|
+
insideSection?: boolean;
|
|
4459
|
+
}
|
|
4460
|
+
/**
|
|
4461
|
+
* Plugin state
|
|
4462
|
+
*/
|
|
4463
|
+
interface TemplatePluginState$1 {
|
|
4464
|
+
tags: TemplateTag[];
|
|
4465
|
+
decorations: DecorationSet;
|
|
4466
|
+
hoveredId?: string;
|
|
4467
|
+
selectedId?: string;
|
|
4468
|
+
}
|
|
4469
|
+
/**
|
|
4470
|
+
* Plugin key
|
|
4471
|
+
*/
|
|
4472
|
+
declare const templatePluginKey: PluginKey<TemplatePluginState$1>;
|
|
4473
|
+
/**
|
|
4474
|
+
* Create the template plugin
|
|
4475
|
+
*/
|
|
4476
|
+
declare function createTemplatePlugin(): Plugin<TemplatePluginState$1>;
|
|
4477
|
+
/**
|
|
4478
|
+
* Get tags from editor state
|
|
4479
|
+
*/
|
|
4480
|
+
declare function getTemplateTags(state: prosemirror_state.EditorState): TemplateTag[];
|
|
4481
|
+
/**
|
|
4482
|
+
* Set hovered tag
|
|
4483
|
+
*/
|
|
4484
|
+
declare function setHoveredElement(view: EditorView, id: string | undefined): void;
|
|
4485
|
+
/**
|
|
4486
|
+
* Set selected tag
|
|
4487
|
+
*/
|
|
4488
|
+
declare function setSelectedElement(view: EditorView, id: string | undefined): void;
|
|
4489
|
+
/**
|
|
4490
|
+
* CSS styles for template decorations
|
|
4491
|
+
*/
|
|
4492
|
+
declare const TEMPLATE_DECORATION_STYLES = "\n.docx-template-tag {\n cursor: pointer;\n transition: background-color 0.1s;\n}\n\n.docx-template-tag:hover,\n.docx-template-tag.hovered {\n filter: brightness(0.95);\n}\n\n.docx-template-tag.selected {\n box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);\n}\n";
|
|
4493
|
+
|
|
4494
|
+
interface PluginState {
|
|
4495
|
+
tags: TemplateTag[];
|
|
4496
|
+
hoveredId?: string;
|
|
4497
|
+
selectedId?: string;
|
|
4498
|
+
}
|
|
4499
|
+
interface AnnotationPanelProps extends PluginPanelProps<PluginState> {
|
|
4500
|
+
}
|
|
4501
|
+
declare function AnnotationPanel({ editorView, pluginState, renderedDomContext, }: AnnotationPanelProps): react_jsx_runtime.JSX.Element | null;
|
|
4502
|
+
declare const ANNOTATION_PANEL_STYLES = "\n.template-panel {\n display: flex;\n min-height: 100%;\n background: transparent;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n position: relative;\n}\n\n.template-panel-annotations {\n flex: 1;\n position: relative;\n overflow: visible;\n min-height: 100%;\n pointer-events: none;\n will-change: transform;\n}\n\n.template-panel-annotations > * {\n pointer-events: auto;\n}\n\n.template-annotation-anchor {\n position: absolute;\n left: 0;\n right: 0;\n display: flex;\n align-items: flex-start;\n}\n\n.template-annotation-connector {\n width: 20px;\n height: 1px;\n background: #d0d0d0;\n margin-top: 12px;\n margin-right: 4px;\n flex-shrink: 0;\n}\n\n.template-annotation-anchor:hover .template-annotation-connector {\n background: #3b82f6;\n}\n\n.template-annotation-chip {\n display: inline-flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 4px;\n padding: 5px 10px;\n background: white;\n border: 1px solid #e2e8f0;\n border-left: 3px solid #6c757d;\n border-radius: 4px;\n font-size: 11px;\n cursor: pointer;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n max-width: 200px;\n}\n\n.template-annotation-chip:hover,\n.template-annotation-chip.hovered {\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\n border-color: #cbd5e1;\n}\n\n.template-annotation-chip.selected {\n box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);\n}\n\n.template-chip-badge {\n font-size: 9px;\n font-weight: 600;\n padding: 1px 5px;\n border-radius: 3px;\n color: white;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.template-chip-dot {\n font-size: 8px;\n}\n\n.template-chip-name {\n color: #334155;\n font-weight: 500;\n}\n\n.template-chip-nested {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n width: 100%;\n margin-top: 4px;\n padding-top: 4px;\n border-top: 1px solid rgba(0, 0, 0, 0.06);\n}\n\n.template-nested-var {\n font-size: 10px;\n color: #64748b;\n background: rgba(0, 0, 0, 0.04);\n padding: 2px 6px;\n border-radius: 3px;\n}\n\n.template-nested-var:hover {\n background: rgba(59, 130, 246, 0.15);\n color: #1e40af;\n}\n";
|
|
4503
|
+
|
|
4504
|
+
/**
|
|
4505
|
+
* Template Plugin
|
|
4506
|
+
*
|
|
4507
|
+
* Docxtemplater template support as a plugin for the DOCX Editor.
|
|
4508
|
+
*
|
|
4509
|
+
* Features:
|
|
4510
|
+
* - Full docxtemplater syntax detection (variables, loops, conditionals)
|
|
4511
|
+
* - Schema annotation panel showing template structure
|
|
4512
|
+
* - Differentiated visual highlighting by element type
|
|
4513
|
+
*
|
|
4514
|
+
* @example
|
|
4515
|
+
* ```tsx
|
|
4516
|
+
* import { PluginHost } from '@docx-editor/plugin-api';
|
|
4517
|
+
* import { templatePlugin } from '@docx-editor/plugins/template';
|
|
4518
|
+
*
|
|
4519
|
+
* function MyEditor() {
|
|
4520
|
+
* return (
|
|
4521
|
+
* <PluginHost plugins={[templatePlugin]}>
|
|
4522
|
+
* <DocxEditor document={doc} onChange={handleChange} />
|
|
4523
|
+
* </PluginHost>
|
|
4524
|
+
* );
|
|
4525
|
+
* }
|
|
4526
|
+
* ```
|
|
4527
|
+
*/
|
|
4528
|
+
|
|
4529
|
+
/**
|
|
4530
|
+
* Plugin state interface
|
|
4531
|
+
*/
|
|
4532
|
+
interface TemplatePluginState {
|
|
4533
|
+
tags: TemplateTag[];
|
|
4534
|
+
hoveredId?: string;
|
|
4535
|
+
selectedId?: string;
|
|
4536
|
+
}
|
|
4537
|
+
/**
|
|
4538
|
+
* Create the template plugin instance.
|
|
4539
|
+
*
|
|
4540
|
+
* @param options - Plugin configuration options
|
|
4541
|
+
*/
|
|
4542
|
+
declare function createPlugin(options?: {
|
|
4543
|
+
/** Initial panel collapsed state */
|
|
4544
|
+
defaultCollapsed?: boolean;
|
|
4545
|
+
/** Panel position */
|
|
4546
|
+
panelPosition?: 'left' | 'right';
|
|
4547
|
+
/** Panel default width */
|
|
4548
|
+
panelWidth?: number;
|
|
4549
|
+
}): EditorPlugin<TemplatePluginState>;
|
|
4550
|
+
/**
|
|
4551
|
+
* Default template plugin instance.
|
|
4552
|
+
* Use this for quick setup without custom configuration.
|
|
4553
|
+
*/
|
|
4554
|
+
declare const templatePlugin: EditorPlugin<TemplatePluginState>;
|
|
4555
|
+
|
|
4556
|
+
/**
|
|
4557
|
+
* @eigenpal/docx-js-editor
|
|
4558
|
+
*
|
|
4559
|
+
* A complete WYSIWYG DOCX editor with full Microsoft Word fidelity.
|
|
4560
|
+
*
|
|
4561
|
+
* Features:
|
|
4562
|
+
* - Full text and paragraph formatting
|
|
4563
|
+
* - Tables, images, shapes, text boxes
|
|
4564
|
+
* - Hyperlinks, bookmarks, fields
|
|
4565
|
+
* - Footnotes, lists, headers/footers
|
|
4566
|
+
* - Page layout with margins and columns
|
|
4567
|
+
* - DocumentAgent API for programmatic editing
|
|
4568
|
+
* - Template variable substitution
|
|
4569
|
+
* - AI-powered context menu
|
|
4570
|
+
*
|
|
4571
|
+
* CSS Styles:
|
|
4572
|
+
* For optimal cursor visibility and selection highlighting, import the editor styles:
|
|
4573
|
+
* ```
|
|
4574
|
+
* import '@eigenpal/docx-js-editor/styles/editor.css';
|
|
4575
|
+
* ```
|
|
4576
|
+
*/
|
|
4577
|
+
declare const VERSION = "0.0.1";
|
|
4578
|
+
|
|
4579
|
+
export { AIAction, ANNOTATION_PANEL_STYLES, AgentResponse, AlignmentButtons, type AlignmentButtonsProps, AnnotationPanel, type AutoSaveStatus, BORDER_POSITIONS, BORDER_STYLES, BORDER_WIDTHS, type BorderConfig, type BorderPosition, type BorderStyleType, CLIPBOARD_TYPES, CellBackgroundPicker, type CellBackgroundPickerProps, type CellColorOption, type ClipboardContent, type ClipboardOptions, type ClipboardSelection, type ColorOption, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuProps, DEFAULT_BORDER_CONFIG, DEFAULT_CELL_COLORS, DEFAULT_SELECTION_STYLE, type KeyboardShortcut$1 as DialogKeyboardShortcut, Document, DocumentAgent, DocumentViewer, type DocumentViewerProps, DocxEditor, type DocxEditorProps, type DocxEditorRef, type EditorPlugin, ErrorBoundary, type ErrorBoundaryProps, type ErrorContextValue, type ErrorNotification, ErrorProvider, type ErrorSeverity, type FindMatch, type FindOptions, FindReplaceDialog, type FindReplaceDialogProps, type FindReplaceOptions, type FindReplaceState, type FindResult, type FontOption, FontPicker, type FontPickerProps, FontSizePicker, type FontSizePickerProps, HIGH_CONTRAST_SELECTION_STYLE, HeaderFooter, type HighlightOptions, type HighlightRect, HorizontalRuler, type HorizontalRulerProps, type HyperlinkData, HyperlinkDialog, type HyperlinkDialogProps, INTERNAL_CLIPBOARD_TYPE, type ImageData, type IndicatorPosition, type IndicatorVariant, InsertImageDialog, type InsertImageDialogProps, type InsertPosition, InsertSymbolDialog, type InsertSymbolDialogProps, InsertTableDialog, type InsertTableDialogProps, type KeyboardShortcut, KeyboardShortcutsDialog, type KeyboardShortcutsDialogProps, type LineSpacingOption, LineSpacingPicker, type LineSpacingPickerProps, ListButtons, type ListButtonsProps, type ListState, LoadingIndicator, type LoadingIndicatorProps, type LoadingOperation, type LoadingSize, type LoadingVariant, NAVIGATION_SHORTCUTS, type NavigationAction, type NavigationDirection, type NavigationUnit, PLUGIN_HOST_STYLES, type PageIndicatorPosition, type PageIndicatorVariant, PageNavigator, type PageNavigatorPosition, type PageNavigatorProps, type PageNavigatorVariant, PageNumberIndicator, type PageNumberIndicatorProps, type PanelConfig, Paragraph, ParagraphFormatting, ParseErrorDisplay, type ParseErrorDisplayProps, type ParsedClipboardContent, type PasteOption, PasteSpecialDialog, type PasteSpecialDialogProps, type PluginContext, PluginHost, type PluginHostProps, type PluginHostRef, type PluginPanelProps, PrintButton, type PrintButtonProps, type PrintOptions, PrintPreview, type PrintPreviewProps, PrintStyles, ResponsePreview, type ResponsePreviewProps, type ResponsePreviewState, ResponsiveToolbar, ToolbarGroup as ResponsiveToolbarGroup, type ToolbarGroupProps as ResponsiveToolbarGroupProps, type ResponsiveToolbarProps, Run, RunContent, SELECTION_CSS_VARS, SYMBOL_CATEGORIES, type SavedDocumentData, SectionProperties, SelectionContext, type SelectionHighlightConfig, type SelectionOverlayProps, type SelectionRange, type ShortcutCategory, Style, type StyleOption, StylePicker, type StylePickerProps, type SymbolCategory, TABLE_DATA_ATTRIBUTES, TEMPLATE_DECORATION_STYLES, Table, type TableAction, TableBorderPicker, type TableBorderPickerProps, TableCell, type TableConfig, type TableContext, type TableSelection, type TableSelectionState, TableToolbar, type TableToolbarProps, type TagType, type TemplateTag, type TextContextAction, TextContextMenu, type TextContextMenuItem, type TextContextMenuProps, TextFormatting, Theme, Toolbar, ToolbarButton, ToolbarGroup$1 as ToolbarGroup, type ToolbarItem, type ToolbarItemPriority, type ToolbarProps, ToolbarSeparator, UnsavedIndicator, type UnsavedIndicatorProps, UnsupportedFeatureWarning, type UnsupportedFeatureWarningProps, type UseAutoSaveOptions, type UseAutoSaveReturn, type UseClipboardOptions, type UseClipboardReturn, type UseFindReplaceReturn, type UseKeyboardShortcutsDialogOptions, type UseKeyboardShortcutsDialogReturn, type UseLoadingOptions, type UseLoadingReturn, type UsePasteSpecialOptions, type UsePasteSpecialReturn, type UseResponsiveToolbarOptions, type UseResponsiveToolbarReturn, type UseSelectionHighlightOptions, type UseSelectionHighlightReturn, type UseTableSelectionOptions, type UseTableSelectionReturn, type UseTextContextMenuOptions, type UseTextContextMenuReturn, type UseUnsavedChangesOptions, type UseUnsavedChangesReturn, type UseWheelZoomOptions, type UseWheelZoomReturn, VERSION, VariablePanel, type VariablePanelProps, type WordSelectionResult, ZOOM_PRESETS, ZoomControl, type ZoomControlProps, addColumn, addRow, areSelectionStylesInjected, calculateFitDimensions, calculateFitPageZoom, calculateFitWidthZoom, calculateProgress, calculateScrollToPage, calculateVisiblePage, canRenderFont, clampPageNumber, clampTableConfig, clampZoom, cleanWordHtml, clearSelection, copyParagraphs, copyRuns, countPageBreaks, createBorderConfig, createBorderSpec, createCellColorOption, createChangeTracker, createClipboardHandlers, createColumnBreak, createDefaultFindOptions, createDefaultListState, createDefaultTableConfig, createDoubleClickWordSelector, createErrorResponse, createHorizontalRule, createLineBreak, createMockResponse, createPageBreak, createPageBreakParagraph, createPageBreakRun, createPageFormat, createSearchPattern, createSelectionChangeHandler, createSelectionFromDOM, createShadingFromColor, createTableContext, createPlugin as createTemplatePlugin, createTemplatePlugin as createTemplateProseMirrorPlugin, createToolbarItem, createToolbarItems, createTripleClickParagraphSelector, dataUrlToBlob, DocxEditor as default, delay, deleteColumn, deleteRow, describeShortcut, escapeRegexString, expandSelectionToWord, expandSelectionToWordBoundaries, extendSelectionTo, findAllMatches, findInDocument, findInParagraph, findNearestZoomPreset, findNextWordStart, findPageBreaks, findPreviousWordStart, findVisualLineEnd, findVisualLineStart, findWordAt, findWordBoundaries, findWordEnd, findWordStart, formatFileSize, formatLastSaveTime, formatPageOrdinal, formatPageRange$1 as formatPageRange, formatPageRange as formatPrintPageRange, formatShortcutKeys, formatStorageSize, formatTableDimensions, formatZoom, generateOverlayElements, generateSelectionCSS, getActionShortcut, getAllActions, getAllCategories, getAllPositions as getAllIndicatorPositions, getAllVariants as getAllIndicatorVariants, getAllLoadingSizes, getAllLoadingVariants, getAllPasteOptions, getAutoSaveStatusLabel, getAutoSaveStorageSize, getAvailableBorderStyles, getAvailableBorderWidths, getBorderPositionLabel, getCategoryLabel, getCellAt, getCellColorName, getColorFromShading, getColumnCount, getCommonShortcuts, getContrastingTextColor, getDefaultActions, getDefaultCellColors, getDefaultHighlightOptions, getDefaultPasteOption, getDefaultPrintOptions, getDefaultShortcuts, getDefaultTextContextMenuItems, getHighlightRectStyle, getImageAcceptString, getImageDimensions, getLoadedFonts, getLoadingVariantLabel, getMarginInUnits, getMatchCountText, getMergedSelectionRects, getNavigationShortcutDescriptions, getNavigationShortcuts, getNextZoomPreset, getPageProgress, getPasteOption, getPreviousZoomPreset, getRecommendedPriority, getRulerDimensions, getSelectedText, getSelectionBoundingRect, getSelectionInfo, getSelectionRects, getSelectionRuns, getShortcutsByCategory, getSupportedImageExtensions, getSymbolCategories, getSymbolInfo as getSymbolUnicodeInfo, getSymbolsByCategory, getTablePresets, getTemplateTags as getTemplatePluginTags, getTextActionLabel, getTextActionShortcut, getUserFriendlyMessage, getVariantLabel, getVisiblePages, getWordAt, getWordAtCursor, getZoomPresets, handleClickForMultiClick, handleNavigationKey, handlePasteEvent, hasActiveSelection, hasPageBreakBefore, highlightTextRange, htmlToRuns, injectSelectionStyles, insertHorizontalRule, insertPageBreak, isActionAvailable, isAutoSaveSupported, isBreakContent, isColumnBreak, isDefaultCellColor, isEditorHtml, isEmptySearch, isFirstPage, isFontLoaded, isLoading as isFontsLoading, isLastPage, isLineBreak, isNavigationKey, isPageBreak, isParseError, isPasteSpecialShortcut, isPrintSupported, isPunctuation, isSelectionBackwards, isSelectionWithin, isTextActionAvailable, isValidImageFile, isValidPageNumber, isValidTableConfig, isWhitespace$1 as isWhitespace, isWhitespace as isWhitespaceChar, isWordCharacter as isWordChar, isWordCharacter$1 as isWordCharacter, isWordHtml, isZoomPreset, loadFont, loadFontFromBuffer, loadFonts, mapStyleToCss, matchesShortcut, mergeAdjacentRects, mergeCells, moveByWord, moveToLineEdge, normalizeSelectionDirection, onFontsLoaded, openPrintWindow, paragraphsToClipboardContent, parseClipboardHtml, parseMarginFromUnits, parseNavigationAction, parsePageInput, parsePageRange, parseZoom, positionToMargin, preloadCommonFonts, readFromClipboard, removePageBreak, removeSelectionStyles, replaceAllInContent, replaceFirstInContent, runsToClipboardContent, scrollToMatch, scrollToPage, searchSymbols, selectParagraphAtCursor, selectRange, selectWordAtCursor, selectWordInTextNode, setHoveredElement, setSelectedElement, setSelectionPosition, splitCell, symbolFromCodePoint, templatePlugin, templatePluginKey, triggerPrint, useAutoSave, useClipboard, useContextMenu, useErrorNotifications, useFindReplace, useHyperlinkDialog, useInsertImageDialog, useInsertSymbolDialog, useInsertTableDialog, useKeyboardShortcutsDialog, useLoading, useLoadingOperations, usePasteSpecial, useResponsePreview, useResponsiveToolbar, useSelectionHighlight, useTableSelection, useTextContextMenu, useUnsavedChanges, useWheelZoom, writeToClipboard };
|