@eigenpal/docx-js-editor 0.0.12 → 0.0.13
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/dist/DocumentAgent-Ci6_T-XM.d.ts +412 -0
- package/dist/DocumentAgent-DEGFgYEN.d.cts +412 -0
- package/dist/FindReplaceDialog-BAACAU67.cjs +1 -0
- package/dist/FindReplaceDialog-RWYDRWHF.js +1 -0
- package/dist/FootnotePropertiesDialog-BC6JIPDA.cjs +1 -0
- package/dist/FootnotePropertiesDialog-CWQF5EBK.js +1 -0
- package/dist/HyperlinkDialog-EG2BSLPD.cjs +1 -0
- package/dist/HyperlinkDialog-YAVK64F4.js +1 -0
- package/dist/ImagePositionDialog-IGYS5KMK.cjs +1 -0
- package/dist/ImagePositionDialog-S6SMH7XH.js +1 -0
- package/dist/ImagePropertiesDialog-UO5QUIBS.js +1 -0
- package/dist/ImagePropertiesDialog-VGV4E4SN.cjs +1 -0
- package/dist/TablePropertiesDialog-VBOU4DID.js +1 -0
- package/dist/TablePropertiesDialog-WRM47JI6.cjs +1 -0
- package/dist/{types-BALm1KBi.d.cts → agentApi-CbVUCZRu.d.cts} +1 -308
- package/dist/{types-BALm1KBi.d.ts → agentApi-CbVUCZRu.d.ts} +1 -308
- package/dist/chunk-2ASOEN3V.js +1 -0
- package/dist/chunk-6MBDPZVD.js +111 -0
- package/dist/chunk-6YLNNCRZ.cjs +10 -0
- package/dist/chunk-BVQ2QRHA.cjs +4 -0
- package/dist/chunk-COP5BIBZ.js +10 -0
- package/dist/chunk-CZ7W7MCM.cjs +2 -0
- package/dist/chunk-E6XDMUAM.js +4 -0
- package/dist/chunk-EMKABJPH.js +1 -0
- package/dist/{chunk-GIZ5CTBD.cjs → chunk-EPCZ24TY.cjs} +5 -5
- package/dist/chunk-ESI4BSBF.js +1 -0
- package/dist/chunk-FLECKDK4.cjs +58 -0
- package/dist/chunk-ITWEFKGQ.cjs +1 -0
- package/dist/chunk-KESNGXGO.js +1 -0
- package/dist/chunk-KVAT5SVD.js +2 -0
- package/dist/chunk-L34XFLQZ.cjs +1 -0
- package/dist/chunk-M7F2CUUD.js +2 -0
- package/dist/chunk-MDPDH7KS.js +58 -0
- package/dist/chunk-MTX3EEBJ.js +258 -0
- package/dist/chunk-NT2REEAA.cjs +1 -0
- package/dist/{chunk-P332HWDE.js → chunk-OTG4NABM.js} +5 -5
- package/dist/chunk-OW5H5DNE.cjs +1 -0
- package/dist/chunk-PJVI53AH.js +2 -0
- package/dist/chunk-PNMZPPPI.cjs +2 -0
- package/dist/chunk-SF53KLDZ.cjs +1 -0
- package/dist/chunk-TOI5W3HK.js +8 -0
- package/dist/chunk-UAVOWAIF.cjs +8 -0
- package/dist/chunk-VN7XH644.cjs +258 -0
- package/dist/chunk-W4DUKACP.cjs +111 -0
- package/dist/chunk-XS2AQFMF.cjs +2 -0
- package/dist/chunk-ZDYHAYN6.js +1 -0
- package/dist/clipboard-BOocwmAM.d.ts +539 -0
- package/dist/clipboard-Cx7cb3kX.d.cts +539 -0
- package/dist/{colorResolver-BNj-uZ58.d.ts → colorResolver-CIDiSPWd.d.cts} +3 -411
- package/dist/{colorResolver-DiMquGWR.d.cts → colorResolver-KXbUgzWC.d.ts} +3 -411
- package/dist/core-plugins.cjs +1 -1
- package/dist/core-plugins.d.cts +4 -3
- package/dist/core-plugins.d.ts +4 -3
- package/dist/core-plugins.js +1 -1
- package/dist/core.cjs +1 -0
- package/dist/core.d.cts +23 -0
- package/dist/core.d.ts +23 -0
- package/dist/core.js +1 -0
- package/dist/headless.cjs +2 -2
- package/dist/headless.d.cts +8 -175
- package/dist/headless.d.ts +8 -175
- package/dist/headless.js +1 -1
- package/dist/index.cjs +9 -378
- package/dist/index.d.cts +17 -4161
- package/dist/index.d.ts +17 -4161
- package/dist/index.js +9 -378
- package/dist/insertOperations-CzB5b-Of.d.ts +176 -0
- package/dist/insertOperations-DKVmCV32.d.cts +176 -0
- package/dist/mcp-cli.js +21 -21
- package/dist/mcp.cjs +10 -10
- package/dist/mcp.d.cts +2 -1
- package/dist/mcp.d.ts +2 -1
- package/dist/mcp.js +9 -9
- package/dist/processTemplate-BHBTDAIC.js +1 -0
- package/dist/processTemplate-QOEAXCKA.cjs +1 -0
- package/dist/react-Be1YOl4z.d.ts +1356 -0
- package/dist/react-DPuSVbgY.d.cts +1356 -0
- package/dist/react.cjs +1 -0
- package/dist/react.css +1 -0
- package/dist/react.d.cts +9 -0
- package/dist/react.d.ts +9 -0
- package/dist/react.js +1 -0
- package/dist/{registry-CzqAPdui.d.ts → registry-D4tvj9f3.d.ts} +1 -1
- package/dist/{registry-BUTMLqSj.d.cts → registry-ngv6Bumt.d.cts} +1 -1
- package/dist/types-D96elyJF.d.cts +310 -0
- package/dist/types-xMzSPT4i.d.ts +310 -0
- package/dist/ui.cjs +1 -0
- package/dist/ui.d.cts +2103 -0
- package/dist/ui.d.ts +2103 -0
- package/dist/ui.js +1 -0
- package/dist/variableDetector-CPxKo9jP.d.cts +173 -0
- package/dist/variableDetector-DeM1N-_L.d.ts +173 -0
- package/package.json +85 -10
- package/dist/chunk-56AGRHVO.cjs +0 -58
- package/dist/chunk-E23CAQXT.js +0 -9
- package/dist/chunk-HIBC7HTU.cjs +0 -9
- package/dist/chunk-ICEPOA7G.js +0 -58
- package/dist/chunk-IZGUXSCC.js +0 -10
- package/dist/chunk-XF3IPO7C.cjs +0 -10
|
@@ -0,0 +1,1356 @@
|
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
|
+
import React__default, { ReactNode, CSSProperties, Component, ErrorInfo } from 'react';
|
|
3
|
+
import * as prosemirror_view from 'prosemirror-view';
|
|
4
|
+
import { EditorView } from 'prosemirror-view';
|
|
5
|
+
import * as prosemirror_state from 'prosemirror-state';
|
|
6
|
+
import { Plugin, EditorState, Transaction } from 'prosemirror-state';
|
|
7
|
+
import { X as TextFormatting, u as ParagraphFormatting, h as Document, Y as Theme, T as Table, y as Run } from './agentApi-CbVUCZRu.cjs';
|
|
8
|
+
import { P as PageIndicatorPosition, e as PageNavigatorPosition, c as PageIndicatorVariant, g as PageNavigatorVariant, m as PrintOptions, o as TableContext, T as TableAction, j as ParsedClipboardContent } from './clipboard-Cx7cb3kX.cjs';
|
|
9
|
+
import { a as DocxInput, D as DocumentAgent } from './DocumentAgent-DEGFgYEN.cjs';
|
|
10
|
+
import { Node as Node$1 } from 'prosemirror-model';
|
|
11
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Selection State Utilities
|
|
15
|
+
*
|
|
16
|
+
* Extracts selection state from ProseMirror for toolbar integration.
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Selection state for toolbar integration
|
|
21
|
+
*/
|
|
22
|
+
interface SelectionState {
|
|
23
|
+
/** Whether there's an active selection (not just cursor) */
|
|
24
|
+
hasSelection: boolean;
|
|
25
|
+
/** Whether selection spans multiple paragraphs */
|
|
26
|
+
isMultiParagraph: boolean;
|
|
27
|
+
/** Current text formatting at selection/cursor */
|
|
28
|
+
textFormatting: TextFormatting;
|
|
29
|
+
/** Current paragraph formatting */
|
|
30
|
+
paragraphFormatting: ParagraphFormatting;
|
|
31
|
+
/** Current paragraph style ID (e.g., 'Heading1', 'Normal') */
|
|
32
|
+
styleId: string | null;
|
|
33
|
+
/** Start paragraph index */
|
|
34
|
+
startParagraphIndex: number;
|
|
35
|
+
/** End paragraph index */
|
|
36
|
+
endParagraphIndex: number;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* Layout Engine Types
|
|
41
|
+
*
|
|
42
|
+
* Core types for the paginated layout engine.
|
|
43
|
+
* Converts document blocks + measurements into positioned fragments on pages.
|
|
44
|
+
*/
|
|
45
|
+
/**
|
|
46
|
+
* Unique identifier for a block in the document.
|
|
47
|
+
* Format: typically `${index}-${type}` or just the block index.
|
|
48
|
+
*/
|
|
49
|
+
type BlockId = string | number;
|
|
50
|
+
/**
|
|
51
|
+
* Base fragment properties common to all fragment types.
|
|
52
|
+
*/
|
|
53
|
+
type FragmentBase = {
|
|
54
|
+
/** Block ID this fragment belongs to. */
|
|
55
|
+
blockId: BlockId;
|
|
56
|
+
/** X position on page (relative to page left). */
|
|
57
|
+
x: number;
|
|
58
|
+
/** Y position on page (relative to page top). */
|
|
59
|
+
y: number;
|
|
60
|
+
/** Width of the fragment. */
|
|
61
|
+
width: number;
|
|
62
|
+
/** ProseMirror start position (for click mapping). */
|
|
63
|
+
pmStart?: number;
|
|
64
|
+
/** ProseMirror end position (for click mapping). */
|
|
65
|
+
pmEnd?: number;
|
|
66
|
+
};
|
|
67
|
+
/**
|
|
68
|
+
* A paragraph fragment positioned on a page.
|
|
69
|
+
* May span only part of the paragraph's lines if split across pages.
|
|
70
|
+
*/
|
|
71
|
+
type ParagraphFragment = FragmentBase & {
|
|
72
|
+
kind: 'paragraph';
|
|
73
|
+
/** First line index (inclusive) from the measure. */
|
|
74
|
+
fromLine: number;
|
|
75
|
+
/** Last line index (exclusive) from the measure. */
|
|
76
|
+
toLine: number;
|
|
77
|
+
/** Height of this fragment. */
|
|
78
|
+
height: number;
|
|
79
|
+
/** True if this continues from a previous page. */
|
|
80
|
+
continuesFromPrev?: boolean;
|
|
81
|
+
/** True if this continues onto the next page. */
|
|
82
|
+
continuesOnNext?: boolean;
|
|
83
|
+
};
|
|
84
|
+
/**
|
|
85
|
+
* A table fragment positioned on a page.
|
|
86
|
+
* May span only part of the table's rows if split across pages.
|
|
87
|
+
*/
|
|
88
|
+
type TableFragment = FragmentBase & {
|
|
89
|
+
kind: 'table';
|
|
90
|
+
/** First row index (inclusive). */
|
|
91
|
+
fromRow: number;
|
|
92
|
+
/** Last row index (exclusive). */
|
|
93
|
+
toRow: number;
|
|
94
|
+
/** Height of this fragment. */
|
|
95
|
+
height: number;
|
|
96
|
+
/** True if this is a floating table. */
|
|
97
|
+
isFloating?: boolean;
|
|
98
|
+
/** True if this continues from a previous page. */
|
|
99
|
+
continuesFromPrev?: boolean;
|
|
100
|
+
/** True if this continues onto the next page. */
|
|
101
|
+
continuesOnNext?: boolean;
|
|
102
|
+
};
|
|
103
|
+
/**
|
|
104
|
+
* An image fragment positioned on a page.
|
|
105
|
+
*/
|
|
106
|
+
type ImageFragment = FragmentBase & {
|
|
107
|
+
kind: 'image';
|
|
108
|
+
/** Height of the image. */
|
|
109
|
+
height: number;
|
|
110
|
+
/** True if this is an anchored/floating image. */
|
|
111
|
+
isAnchored?: boolean;
|
|
112
|
+
/** Z-index for layering. */
|
|
113
|
+
zIndex?: number;
|
|
114
|
+
};
|
|
115
|
+
/**
|
|
116
|
+
* Union of all fragment types.
|
|
117
|
+
*/
|
|
118
|
+
type Fragment = ParagraphFragment | TableFragment | ImageFragment;
|
|
119
|
+
/**
|
|
120
|
+
* Page margin configuration.
|
|
121
|
+
*/
|
|
122
|
+
type PageMargins = {
|
|
123
|
+
top: number;
|
|
124
|
+
right: number;
|
|
125
|
+
bottom: number;
|
|
126
|
+
left: number;
|
|
127
|
+
/** Distance from page top to header content. */
|
|
128
|
+
header?: number;
|
|
129
|
+
/** Distance from page bottom to footer content. */
|
|
130
|
+
footer?: number;
|
|
131
|
+
};
|
|
132
|
+
/**
|
|
133
|
+
* A rendered page containing positioned fragments.
|
|
134
|
+
*/
|
|
135
|
+
type Page = {
|
|
136
|
+
/** Page number (1-indexed). */
|
|
137
|
+
number: number;
|
|
138
|
+
/** Fragments positioned on this page. */
|
|
139
|
+
fragments: Fragment[];
|
|
140
|
+
/** Page margins. */
|
|
141
|
+
margins: PageMargins;
|
|
142
|
+
/** Page size (width, height). */
|
|
143
|
+
size: {
|
|
144
|
+
w: number;
|
|
145
|
+
h: number;
|
|
146
|
+
};
|
|
147
|
+
/** Page orientation. */
|
|
148
|
+
orientation?: 'portrait' | 'landscape';
|
|
149
|
+
/** Section index this page belongs to. */
|
|
150
|
+
sectionIndex?: number;
|
|
151
|
+
/** Header/footer references for this page. */
|
|
152
|
+
headerFooterRefs?: {
|
|
153
|
+
headerDefault?: string;
|
|
154
|
+
headerFirst?: string;
|
|
155
|
+
headerEven?: string;
|
|
156
|
+
footerDefault?: string;
|
|
157
|
+
footerFirst?: string;
|
|
158
|
+
footerEven?: string;
|
|
159
|
+
};
|
|
160
|
+
/** Footnote IDs that appear on this page (for rendering). */
|
|
161
|
+
footnoteIds?: number[];
|
|
162
|
+
/** Height reserved for the footnote area at page bottom (pixels). */
|
|
163
|
+
footnoteReservedHeight?: number;
|
|
164
|
+
};
|
|
165
|
+
/**
|
|
166
|
+
* Column layout configuration.
|
|
167
|
+
*/
|
|
168
|
+
type ColumnLayout = {
|
|
169
|
+
count: number;
|
|
170
|
+
gap: number;
|
|
171
|
+
equalWidth?: boolean;
|
|
172
|
+
};
|
|
173
|
+
/**
|
|
174
|
+
* Header/footer layout for a specific type.
|
|
175
|
+
*/
|
|
176
|
+
type HeaderFooterLayout = {
|
|
177
|
+
height: number;
|
|
178
|
+
fragments: Fragment[];
|
|
179
|
+
};
|
|
180
|
+
/**
|
|
181
|
+
* Final layout output ready for rendering/painting.
|
|
182
|
+
*/
|
|
183
|
+
type Layout = {
|
|
184
|
+
/** Default page size for the document. */
|
|
185
|
+
pageSize: {
|
|
186
|
+
w: number;
|
|
187
|
+
h: number;
|
|
188
|
+
};
|
|
189
|
+
/** All rendered pages with positioned fragments. */
|
|
190
|
+
pages: Page[];
|
|
191
|
+
/** Column configuration (if multi-column). */
|
|
192
|
+
columns?: ColumnLayout;
|
|
193
|
+
/** Header layouts by type (default, first, even). */
|
|
194
|
+
headers?: Record<string, HeaderFooterLayout>;
|
|
195
|
+
/** Footer layouts by type (default, first, even). */
|
|
196
|
+
footers?: Record<string, HeaderFooterLayout>;
|
|
197
|
+
/** Gap between pages in pixels (for rendering). */
|
|
198
|
+
pageGap?: number;
|
|
199
|
+
};
|
|
200
|
+
|
|
201
|
+
/**
|
|
202
|
+
* Generic Plugin Interface for the DOCX Editor
|
|
203
|
+
*
|
|
204
|
+
* This module defines the EditorPlugin interface that allows
|
|
205
|
+
* external plugins to integrate with the ProseMirror-based editor.
|
|
206
|
+
*/
|
|
207
|
+
|
|
208
|
+
/**
|
|
209
|
+
* Coordinates returned by position lookup in the rendered DOM.
|
|
210
|
+
*/
|
|
211
|
+
interface PositionCoordinates {
|
|
212
|
+
x: number;
|
|
213
|
+
y: number;
|
|
214
|
+
height: number;
|
|
215
|
+
}
|
|
216
|
+
/**
|
|
217
|
+
* Context for accessing the rendered DOM in PagedEditor.
|
|
218
|
+
*
|
|
219
|
+
* This interface provides DOM-based position mapping that works with
|
|
220
|
+
* the LayoutPainter output (visible pages) rather than the hidden
|
|
221
|
+
* ProseMirror editor. Use this for rendering overlays, annotations,
|
|
222
|
+
* and other visual elements that need to be positioned relative to
|
|
223
|
+
* the actual rendered content.
|
|
224
|
+
*
|
|
225
|
+
* The rendered DOM uses data-pm-start/data-pm-end attributes on spans
|
|
226
|
+
* to map between ProseMirror positions and DOM elements.
|
|
227
|
+
*/
|
|
228
|
+
interface RenderedDomContext {
|
|
229
|
+
/** The container element holding all rendered pages. */
|
|
230
|
+
pagesContainer: HTMLElement;
|
|
231
|
+
/**
|
|
232
|
+
* Get pixel coordinates for a ProseMirror position in the rendered DOM.
|
|
233
|
+
* Returns null if the position cannot be found.
|
|
234
|
+
*
|
|
235
|
+
* @param pmPos - ProseMirror document position
|
|
236
|
+
* @returns Coordinates relative to the pages container, or null
|
|
237
|
+
*/
|
|
238
|
+
getCoordinatesForPosition(pmPos: number): PositionCoordinates | null;
|
|
239
|
+
/**
|
|
240
|
+
* Find DOM elements that overlap with a ProseMirror position range.
|
|
241
|
+
* Useful for highlighting or overlaying content.
|
|
242
|
+
*
|
|
243
|
+
* @param from - Start ProseMirror position
|
|
244
|
+
* @param to - End ProseMirror position
|
|
245
|
+
* @returns Array of DOM elements that intersect with the range
|
|
246
|
+
*/
|
|
247
|
+
findElementsForRange(from: number, to: number): Element[];
|
|
248
|
+
/**
|
|
249
|
+
* Get bounding rectangles for a range of text, accounting for line wraps.
|
|
250
|
+
* Returns rects relative to the pages container.
|
|
251
|
+
*
|
|
252
|
+
* @param from - Start ProseMirror position
|
|
253
|
+
* @param to - End ProseMirror position
|
|
254
|
+
* @returns Array of DOMRect-like objects for the range
|
|
255
|
+
*/
|
|
256
|
+
getRectsForRange(from: number, to: number): Array<{
|
|
257
|
+
x: number;
|
|
258
|
+
y: number;
|
|
259
|
+
width: number;
|
|
260
|
+
height: number;
|
|
261
|
+
}>;
|
|
262
|
+
/** Current zoom level (1 = 100%). */
|
|
263
|
+
zoom: number;
|
|
264
|
+
/**
|
|
265
|
+
* Offset of the pages container from its parent viewport.
|
|
266
|
+
* Use this to adjust coordinates when rendering overlays in the viewport
|
|
267
|
+
* container rather than directly in the pages container.
|
|
268
|
+
*/
|
|
269
|
+
getContainerOffset(): {
|
|
270
|
+
x: number;
|
|
271
|
+
y: number;
|
|
272
|
+
};
|
|
273
|
+
}
|
|
274
|
+
/**
|
|
275
|
+
* Props passed to plugin panel components.
|
|
276
|
+
*/
|
|
277
|
+
interface PluginPanelProps<TState = unknown> {
|
|
278
|
+
/** Current ProseMirror editor view */
|
|
279
|
+
editorView: EditorView | null;
|
|
280
|
+
/** Current ProseMirror document */
|
|
281
|
+
doc: Node$1 | null;
|
|
282
|
+
/** Scroll editor to a specific position */
|
|
283
|
+
scrollToPosition: (pos: number) => void;
|
|
284
|
+
/** Select a range in the editor */
|
|
285
|
+
selectRange: (from: number, to: number) => void;
|
|
286
|
+
/** Plugin-specific state (managed by the plugin) */
|
|
287
|
+
pluginState: TState;
|
|
288
|
+
/** Width of the panel in pixels */
|
|
289
|
+
panelWidth: number;
|
|
290
|
+
/**
|
|
291
|
+
* Context for the rendered DOM (LayoutPainter output).
|
|
292
|
+
* Use this for positioning annotations relative to the visible pages.
|
|
293
|
+
* May be null if layout hasn't completed yet.
|
|
294
|
+
*/
|
|
295
|
+
renderedDomContext: RenderedDomContext | null;
|
|
296
|
+
}
|
|
297
|
+
/**
|
|
298
|
+
* Configuration for plugin panel rendering.
|
|
299
|
+
*/
|
|
300
|
+
interface PanelConfig {
|
|
301
|
+
/** Where to render the panel */
|
|
302
|
+
position: 'left' | 'right' | 'bottom';
|
|
303
|
+
/** Default width/height of the panel */
|
|
304
|
+
defaultSize: number;
|
|
305
|
+
/** Minimum size */
|
|
306
|
+
minSize?: number;
|
|
307
|
+
/** Maximum size */
|
|
308
|
+
maxSize?: number;
|
|
309
|
+
/** Whether the panel is resizable */
|
|
310
|
+
resizable?: boolean;
|
|
311
|
+
/** Whether the panel can be collapsed */
|
|
312
|
+
collapsible?: boolean;
|
|
313
|
+
/** Initial collapsed state */
|
|
314
|
+
defaultCollapsed?: boolean;
|
|
315
|
+
}
|
|
316
|
+
/**
|
|
317
|
+
* Generic interface for editor plugins.
|
|
318
|
+
*
|
|
319
|
+
* Implement this interface to create custom plugins that can:
|
|
320
|
+
* - Add ProseMirror plugins (decorations, keymaps, etc.)
|
|
321
|
+
* - Render panels alongside the document
|
|
322
|
+
* - React to editor state changes
|
|
323
|
+
* - Inject custom styles
|
|
324
|
+
*
|
|
325
|
+
* @typeParam TState - The type of plugin-specific state
|
|
326
|
+
*/
|
|
327
|
+
interface EditorPlugin<TState = any> {
|
|
328
|
+
/** Unique plugin identifier */
|
|
329
|
+
id: string;
|
|
330
|
+
/** Display name for the plugin */
|
|
331
|
+
name: string;
|
|
332
|
+
/**
|
|
333
|
+
* ProseMirror plugins to register with the editor.
|
|
334
|
+
* These are merged with the editor's internal plugins.
|
|
335
|
+
*/
|
|
336
|
+
proseMirrorPlugins?: Plugin[];
|
|
337
|
+
/**
|
|
338
|
+
* React component to render in the annotation panel area.
|
|
339
|
+
* Receives editor state and callbacks for interaction.
|
|
340
|
+
*/
|
|
341
|
+
Panel?: React.ComponentType<PluginPanelProps<TState>>;
|
|
342
|
+
/**
|
|
343
|
+
* Configuration for the panel (position, size, etc.)
|
|
344
|
+
*/
|
|
345
|
+
panelConfig?: PanelConfig;
|
|
346
|
+
/**
|
|
347
|
+
* Called when the editor state changes.
|
|
348
|
+
* Use this to update plugin-specific state based on document changes.
|
|
349
|
+
*
|
|
350
|
+
* @param view - The current ProseMirror editor view
|
|
351
|
+
* @returns The new plugin state, or undefined to keep existing state
|
|
352
|
+
*/
|
|
353
|
+
onStateChange?: (view: EditorView) => TState | undefined;
|
|
354
|
+
/**
|
|
355
|
+
* Initialize plugin state when the plugin is first loaded.
|
|
356
|
+
*
|
|
357
|
+
* @param view - The ProseMirror editor view (may be null initially)
|
|
358
|
+
* @returns Initial plugin state
|
|
359
|
+
*/
|
|
360
|
+
initialize?: (view: EditorView | null) => TState;
|
|
361
|
+
/**
|
|
362
|
+
* Called when the plugin is being destroyed.
|
|
363
|
+
* Use this for cleanup (subscriptions, timers, etc.)
|
|
364
|
+
*/
|
|
365
|
+
destroy?: () => void;
|
|
366
|
+
/**
|
|
367
|
+
* CSS styles to inject for this plugin.
|
|
368
|
+
* Can be a string of CSS or a URL to a stylesheet.
|
|
369
|
+
*/
|
|
370
|
+
styles?: string;
|
|
371
|
+
/**
|
|
372
|
+
* Render an overlay on top of the rendered pages.
|
|
373
|
+
* Use this for highlights, annotations, or other visual elements
|
|
374
|
+
* that need to be positioned relative to the document content.
|
|
375
|
+
*
|
|
376
|
+
* The overlay is rendered inside the viewport, positioned absolutely
|
|
377
|
+
* over the pages container.
|
|
378
|
+
*
|
|
379
|
+
* @param context - The rendered DOM context for position lookup
|
|
380
|
+
* @param state - Current plugin state
|
|
381
|
+
* @param editorView - The editor view for dispatching transactions
|
|
382
|
+
* @returns React node to render as overlay, or null
|
|
383
|
+
*/
|
|
384
|
+
renderOverlay?: (context: RenderedDomContext, state: TState, editorView: EditorView | null) => ReactNode;
|
|
385
|
+
}
|
|
386
|
+
/**
|
|
387
|
+
* Context value provided to plugins and panels.
|
|
388
|
+
*/
|
|
389
|
+
interface PluginContext {
|
|
390
|
+
/** All registered plugins */
|
|
391
|
+
plugins: EditorPlugin[];
|
|
392
|
+
/** Current editor view */
|
|
393
|
+
editorView: EditorView | null;
|
|
394
|
+
/** Set the editor view (called by editor on mount) */
|
|
395
|
+
setEditorView: (view: EditorView | null) => void;
|
|
396
|
+
/** Get plugin state by plugin ID */
|
|
397
|
+
getPluginState: <T>(pluginId: string) => T | undefined;
|
|
398
|
+
/** Update plugin state */
|
|
399
|
+
setPluginState: <T>(pluginId: string, state: T) => void;
|
|
400
|
+
/** Scroll to a position in the editor */
|
|
401
|
+
scrollToPosition: (pos: number) => void;
|
|
402
|
+
/** Select a range in the editor */
|
|
403
|
+
selectRange: (from: number, to: number) => void;
|
|
404
|
+
}
|
|
405
|
+
/**
|
|
406
|
+
* Props for the PluginHost component.
|
|
407
|
+
*/
|
|
408
|
+
interface PluginHostProps {
|
|
409
|
+
/** Plugins to enable */
|
|
410
|
+
plugins: EditorPlugin[];
|
|
411
|
+
/** The editor component (passed as child) */
|
|
412
|
+
children: React.ReactElement;
|
|
413
|
+
/** Class name for the host container */
|
|
414
|
+
className?: string;
|
|
415
|
+
}
|
|
416
|
+
/**
|
|
417
|
+
* Ref interface for the PluginHost component.
|
|
418
|
+
*/
|
|
419
|
+
interface PluginHostRef {
|
|
420
|
+
/** Get plugin state by plugin ID */
|
|
421
|
+
getPluginState: <T>(pluginId: string) => T | undefined;
|
|
422
|
+
/** Update plugin state for a plugin */
|
|
423
|
+
setPluginState: <T>(pluginId: string, state: T) => void;
|
|
424
|
+
/** Get the current editor view */
|
|
425
|
+
getEditorView: () => EditorView | null;
|
|
426
|
+
/** Force a refresh of all plugin states */
|
|
427
|
+
refreshPluginStates: () => void;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
interface PagedEditorRef {
|
|
431
|
+
/** Get the current document. */
|
|
432
|
+
getDocument(): Document | null;
|
|
433
|
+
/** Get the ProseMirror EditorState. */
|
|
434
|
+
getState(): EditorState | null;
|
|
435
|
+
/** Get the ProseMirror EditorView. */
|
|
436
|
+
getView(): EditorView | null;
|
|
437
|
+
/** Focus the editor. */
|
|
438
|
+
focus(): void;
|
|
439
|
+
/** Blur the editor. */
|
|
440
|
+
blur(): void;
|
|
441
|
+
/** Check if focused. */
|
|
442
|
+
isFocused(): boolean;
|
|
443
|
+
/** Dispatch a transaction. */
|
|
444
|
+
dispatch(tr: Transaction): void;
|
|
445
|
+
/** Undo. */
|
|
446
|
+
undo(): boolean;
|
|
447
|
+
/** Redo. */
|
|
448
|
+
redo(): boolean;
|
|
449
|
+
/** Set selection by PM position. */
|
|
450
|
+
setSelection(anchor: number, head?: number): void;
|
|
451
|
+
/** Get current layout. */
|
|
452
|
+
getLayout(): Layout | null;
|
|
453
|
+
/** Force re-layout. */
|
|
454
|
+
relayout(): void;
|
|
455
|
+
/** Scroll the visible pages to bring a PM position into view. */
|
|
456
|
+
scrollToPosition(pmPos: number): void;
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
/**
|
|
460
|
+
* DocxEditor props
|
|
461
|
+
*/
|
|
462
|
+
interface DocxEditorProps {
|
|
463
|
+
/** Document data — ArrayBuffer, Uint8Array, Blob, or File */
|
|
464
|
+
documentBuffer?: DocxInput | null;
|
|
465
|
+
/** Pre-parsed document (alternative to documentBuffer) */
|
|
466
|
+
document?: Document | null;
|
|
467
|
+
/** Callback when document is saved */
|
|
468
|
+
onSave?: (buffer: ArrayBuffer) => void;
|
|
469
|
+
/** Callback when document changes */
|
|
470
|
+
onChange?: (document: Document) => void;
|
|
471
|
+
/** Callback when selection changes */
|
|
472
|
+
onSelectionChange?: (state: SelectionState | null) => void;
|
|
473
|
+
/** Callback on error */
|
|
474
|
+
onError?: (error: Error) => void;
|
|
475
|
+
/** Callback when fonts are loaded */
|
|
476
|
+
onFontsLoaded?: () => void;
|
|
477
|
+
/** External ProseMirror plugins (from PluginHost) */
|
|
478
|
+
externalPlugins?: prosemirror_state.Plugin[];
|
|
479
|
+
/** Callback when editor view is ready (for PluginHost) */
|
|
480
|
+
onEditorViewReady?: (view: prosemirror_view.EditorView) => void;
|
|
481
|
+
/** Theme for styling */
|
|
482
|
+
theme?: Theme | null;
|
|
483
|
+
/** Whether to show toolbar (default: true) */
|
|
484
|
+
showToolbar?: boolean;
|
|
485
|
+
/** Whether to show variable panel (default: true) */
|
|
486
|
+
showVariablePanel?: boolean;
|
|
487
|
+
/** Whether to show zoom control (default: true) */
|
|
488
|
+
showZoomControl?: boolean;
|
|
489
|
+
/** Whether to show page number indicator (default: true) */
|
|
490
|
+
showPageNumbers?: boolean;
|
|
491
|
+
/** Whether to enable interactive page navigation (default: true) */
|
|
492
|
+
enablePageNavigation?: boolean;
|
|
493
|
+
/** Position of page number indicator (default: 'bottom-center') */
|
|
494
|
+
pageNumberPosition?: PageIndicatorPosition | PageNavigatorPosition;
|
|
495
|
+
/** Variant of page number indicator (default: 'default') */
|
|
496
|
+
pageNumberVariant?: PageIndicatorVariant | PageNavigatorVariant;
|
|
497
|
+
/** Whether to show page margin guides/boundaries (default: false) */
|
|
498
|
+
showMarginGuides?: boolean;
|
|
499
|
+
/** Color for margin guides (default: '#c0c0c0') */
|
|
500
|
+
marginGuideColor?: string;
|
|
501
|
+
/** Whether to show horizontal ruler (default: false) */
|
|
502
|
+
showRuler?: boolean;
|
|
503
|
+
/** Unit for ruler display (default: 'inch') */
|
|
504
|
+
rulerUnit?: 'inch' | 'cm';
|
|
505
|
+
/** Initial zoom level (default: 1.0) */
|
|
506
|
+
initialZoom?: number;
|
|
507
|
+
/** Whether the editor is read-only. When true, hides toolbar, rulers, and variable panel */
|
|
508
|
+
readOnly?: boolean;
|
|
509
|
+
/** Custom toolbar actions */
|
|
510
|
+
toolbarExtra?: ReactNode;
|
|
511
|
+
/** Variable panel position (default: 'right') */
|
|
512
|
+
variablePanelPosition?: 'left' | 'right';
|
|
513
|
+
/** Variable descriptions */
|
|
514
|
+
variableDescriptions?: Record<string, string>;
|
|
515
|
+
/** Additional CSS class name */
|
|
516
|
+
className?: string;
|
|
517
|
+
/** Additional inline styles */
|
|
518
|
+
style?: CSSProperties;
|
|
519
|
+
/** Placeholder when no document */
|
|
520
|
+
placeholder?: ReactNode;
|
|
521
|
+
/** Loading indicator */
|
|
522
|
+
loadingIndicator?: ReactNode;
|
|
523
|
+
/** Whether to show the document outline sidebar (default: false) */
|
|
524
|
+
showOutline?: boolean;
|
|
525
|
+
/** Whether to show print button in toolbar (default: true) */
|
|
526
|
+
showPrintButton?: boolean;
|
|
527
|
+
/** Print options for print preview */
|
|
528
|
+
printOptions?: PrintOptions;
|
|
529
|
+
/** Callback when print is triggered */
|
|
530
|
+
onPrint?: () => void;
|
|
531
|
+
/** Callback when content is copied */
|
|
532
|
+
onCopy?: () => void;
|
|
533
|
+
/** Callback when content is cut */
|
|
534
|
+
onCut?: () => void;
|
|
535
|
+
/** Callback when content is pasted */
|
|
536
|
+
onPaste?: () => void;
|
|
537
|
+
/**
|
|
538
|
+
* Callback when rendered DOM context is ready (for plugin overlays).
|
|
539
|
+
* Used by PluginHost to get access to the rendered page DOM for positioning.
|
|
540
|
+
*/
|
|
541
|
+
onRenderedDomContextReady?: (context: RenderedDomContext) => void;
|
|
542
|
+
/**
|
|
543
|
+
* Plugin overlays to render inside the editor viewport.
|
|
544
|
+
* Passed from PluginHost to render plugin-specific overlays.
|
|
545
|
+
*/
|
|
546
|
+
pluginOverlays?: ReactNode;
|
|
547
|
+
}
|
|
548
|
+
/**
|
|
549
|
+
* DocxEditor ref interface
|
|
550
|
+
*/
|
|
551
|
+
interface DocxEditorRef {
|
|
552
|
+
/** Get the DocumentAgent for programmatic access */
|
|
553
|
+
getAgent: () => DocumentAgent | null;
|
|
554
|
+
/** Get the current document */
|
|
555
|
+
getDocument: () => Document | null;
|
|
556
|
+
/** Get the editor ref */
|
|
557
|
+
getEditorRef: () => PagedEditorRef | null;
|
|
558
|
+
/** Save the document to buffer */
|
|
559
|
+
save: () => Promise<ArrayBuffer | null>;
|
|
560
|
+
/** Set zoom level */
|
|
561
|
+
setZoom: (zoom: number) => void;
|
|
562
|
+
/** Get current zoom level */
|
|
563
|
+
getZoom: () => number;
|
|
564
|
+
/** Focus the editor */
|
|
565
|
+
focus: () => void;
|
|
566
|
+
/** Get current page number */
|
|
567
|
+
getCurrentPage: () => number;
|
|
568
|
+
/** Get total page count */
|
|
569
|
+
getTotalPages: () => number;
|
|
570
|
+
/** Scroll to a specific page */
|
|
571
|
+
scrollToPage: (pageNumber: number) => void;
|
|
572
|
+
/** Open print preview */
|
|
573
|
+
openPrintPreview: () => void;
|
|
574
|
+
/** Print the document directly */
|
|
575
|
+
print: () => void;
|
|
576
|
+
}
|
|
577
|
+
/**
|
|
578
|
+
* DocxEditor - Complete DOCX editor component
|
|
579
|
+
*/
|
|
580
|
+
declare const DocxEditor: React$1.ForwardRefExoticComponent<DocxEditorProps & React$1.RefAttributes<DocxEditorRef>>;
|
|
581
|
+
|
|
582
|
+
/**
|
|
583
|
+
* Simple imperative API for rendering a DOCX editor into a DOM element.
|
|
584
|
+
*
|
|
585
|
+
* Usage:
|
|
586
|
+
* ```ts
|
|
587
|
+
* import { renderAsync } from '@eigenpal/docx-js-editor';
|
|
588
|
+
*
|
|
589
|
+
* const editor = await renderAsync(docxBlob, document.getElementById('container'), {
|
|
590
|
+
* readOnly: false,
|
|
591
|
+
* showToolbar: true,
|
|
592
|
+
* });
|
|
593
|
+
*
|
|
594
|
+
* // Save the edited document
|
|
595
|
+
* const buffer = await editor.save();
|
|
596
|
+
*
|
|
597
|
+
* // Clean up
|
|
598
|
+
* editor.destroy();
|
|
599
|
+
* ```
|
|
600
|
+
*/
|
|
601
|
+
|
|
602
|
+
/**
|
|
603
|
+
* Options for {@link renderAsync}. A subset of DocxEditorProps minus
|
|
604
|
+
* `documentBuffer` / `document` (passed as the first argument instead).
|
|
605
|
+
*/
|
|
606
|
+
type RenderAsyncOptions = Omit<DocxEditorProps, 'documentBuffer' | 'document'>;
|
|
607
|
+
/**
|
|
608
|
+
* Handle returned by {@link renderAsync} for interacting with the editor.
|
|
609
|
+
*/
|
|
610
|
+
interface DocxEditorHandle {
|
|
611
|
+
/** Save the document and return the DOCX as an ArrayBuffer. */
|
|
612
|
+
save: () => Promise<ArrayBuffer | null>;
|
|
613
|
+
/** Get the current parsed document model. */
|
|
614
|
+
getDocument: () => Document | null;
|
|
615
|
+
/** Focus the editor. */
|
|
616
|
+
focus: () => void;
|
|
617
|
+
/** Set zoom level (1.0 = 100%). */
|
|
618
|
+
setZoom: (zoom: number) => void;
|
|
619
|
+
/** Unmount the editor and clean up. */
|
|
620
|
+
destroy: () => void;
|
|
621
|
+
}
|
|
622
|
+
/**
|
|
623
|
+
* Render a DOCX editor into a container element.
|
|
624
|
+
*
|
|
625
|
+
* @param input - DOCX data as ArrayBuffer, Uint8Array, Blob, or File
|
|
626
|
+
* @param container - DOM element to render into
|
|
627
|
+
* @param options - Editor configuration (toolbar, readOnly, callbacks, etc.)
|
|
628
|
+
* @returns A handle with save / destroy / getDocument methods
|
|
629
|
+
*/
|
|
630
|
+
declare function renderAsync(input: DocxInput, container: HTMLElement, options?: RenderAsyncOptions): Promise<DocxEditorHandle>;
|
|
631
|
+
|
|
632
|
+
/**
|
|
633
|
+
* Error severity levels
|
|
634
|
+
*/
|
|
635
|
+
type ErrorSeverity = 'error' | 'warning' | 'info';
|
|
636
|
+
/**
|
|
637
|
+
* Error notification
|
|
638
|
+
*/
|
|
639
|
+
interface ErrorNotification {
|
|
640
|
+
id: string;
|
|
641
|
+
message: string;
|
|
642
|
+
severity: ErrorSeverity;
|
|
643
|
+
details?: string;
|
|
644
|
+
timestamp: number;
|
|
645
|
+
dismissed?: boolean;
|
|
646
|
+
}
|
|
647
|
+
/**
|
|
648
|
+
* Error context value
|
|
649
|
+
*/
|
|
650
|
+
interface ErrorContextValue {
|
|
651
|
+
/** Current notifications */
|
|
652
|
+
notifications: ErrorNotification[];
|
|
653
|
+
/** Show an error notification */
|
|
654
|
+
showError: (message: string, details?: string) => void;
|
|
655
|
+
/** Show a warning notification */
|
|
656
|
+
showWarning: (message: string, details?: string) => void;
|
|
657
|
+
/** Show an info notification */
|
|
658
|
+
showInfo: (message: string, details?: string) => void;
|
|
659
|
+
/** Dismiss a notification */
|
|
660
|
+
dismissNotification: (id: string) => void;
|
|
661
|
+
/** Clear all notifications */
|
|
662
|
+
clearNotifications: () => void;
|
|
663
|
+
}
|
|
664
|
+
/**
|
|
665
|
+
* Error boundary props
|
|
666
|
+
*/
|
|
667
|
+
interface ErrorBoundaryProps {
|
|
668
|
+
/** Child components to render */
|
|
669
|
+
children: ReactNode;
|
|
670
|
+
/** Custom fallback UI */
|
|
671
|
+
fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode);
|
|
672
|
+
/** Callback when error occurs */
|
|
673
|
+
onError?: (error: Error, errorInfo: ErrorInfo) => void;
|
|
674
|
+
/** Whether to show error details */
|
|
675
|
+
showDetails?: boolean;
|
|
676
|
+
}
|
|
677
|
+
/**
|
|
678
|
+
* Error boundary state
|
|
679
|
+
*/
|
|
680
|
+
interface ErrorBoundaryState {
|
|
681
|
+
hasError: boolean;
|
|
682
|
+
error: Error | null;
|
|
683
|
+
errorInfo: ErrorInfo | null;
|
|
684
|
+
}
|
|
685
|
+
/**
|
|
686
|
+
* Hook to use error notifications
|
|
687
|
+
*/
|
|
688
|
+
declare function useErrorNotifications(): ErrorContextValue;
|
|
689
|
+
/**
|
|
690
|
+
* Error notification provider
|
|
691
|
+
*/
|
|
692
|
+
declare function ErrorProvider({ children }: {
|
|
693
|
+
children: ReactNode;
|
|
694
|
+
}): react_jsx_runtime.JSX.Element;
|
|
695
|
+
/**
|
|
696
|
+
* Error Boundary class component
|
|
697
|
+
*
|
|
698
|
+
* Catches render errors in child components and displays fallback UI.
|
|
699
|
+
*/
|
|
700
|
+
declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
|
701
|
+
constructor(props: ErrorBoundaryProps);
|
|
702
|
+
static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState>;
|
|
703
|
+
componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
|
|
704
|
+
resetError: () => void;
|
|
705
|
+
render(): ReactNode;
|
|
706
|
+
}
|
|
707
|
+
interface ParseErrorDisplayProps {
|
|
708
|
+
message: string;
|
|
709
|
+
details?: string;
|
|
710
|
+
onRetry?: () => void;
|
|
711
|
+
className?: string;
|
|
712
|
+
}
|
|
713
|
+
/**
|
|
714
|
+
* Parse error display component
|
|
715
|
+
*
|
|
716
|
+
* Shows a helpful message for DOCX parsing errors.
|
|
717
|
+
*/
|
|
718
|
+
declare function ParseErrorDisplay({ message, details, onRetry, className, }: ParseErrorDisplayProps): React__default.ReactElement;
|
|
719
|
+
interface UnsupportedFeatureWarningProps {
|
|
720
|
+
feature: string;
|
|
721
|
+
description?: string;
|
|
722
|
+
className?: string;
|
|
723
|
+
}
|
|
724
|
+
/**
|
|
725
|
+
* Unsupported feature warning component
|
|
726
|
+
*
|
|
727
|
+
* Shows a non-blocking warning for unsupported features.
|
|
728
|
+
*/
|
|
729
|
+
declare function UnsupportedFeatureWarning({ feature, description, className, }: UnsupportedFeatureWarningProps): React__default.ReactElement;
|
|
730
|
+
/**
|
|
731
|
+
* Check if an error is a parse error
|
|
732
|
+
*/
|
|
733
|
+
declare function isParseError(error: Error): boolean;
|
|
734
|
+
/**
|
|
735
|
+
* Get user-friendly error message
|
|
736
|
+
*/
|
|
737
|
+
declare function getUserFriendlyMessage(error: Error): string;
|
|
738
|
+
|
|
739
|
+
/**
|
|
740
|
+
* useTableSelection Hook
|
|
741
|
+
*
|
|
742
|
+
* Tracks table selection state based on user clicks.
|
|
743
|
+
* Provides:
|
|
744
|
+
* - Current table context when clicking in a table cell
|
|
745
|
+
* - Methods to handle table actions (add row, delete column, etc.)
|
|
746
|
+
* - Clears selection when clicking outside tables
|
|
747
|
+
*/
|
|
748
|
+
|
|
749
|
+
/**
|
|
750
|
+
* Table selection state
|
|
751
|
+
*/
|
|
752
|
+
interface TableSelectionState {
|
|
753
|
+
/** Current table context (null if not in a table) */
|
|
754
|
+
context: TableContext | null;
|
|
755
|
+
/** The selected table */
|
|
756
|
+
table: Table | null;
|
|
757
|
+
/** Index of the table in the document */
|
|
758
|
+
tableIndex: number | null;
|
|
759
|
+
/** Row index */
|
|
760
|
+
rowIndex: number | null;
|
|
761
|
+
/** Column index */
|
|
762
|
+
columnIndex: number | null;
|
|
763
|
+
}
|
|
764
|
+
/**
|
|
765
|
+
* Return type for useTableSelection hook
|
|
766
|
+
*/
|
|
767
|
+
interface UseTableSelectionReturn {
|
|
768
|
+
/** Current table selection state */
|
|
769
|
+
state: TableSelectionState;
|
|
770
|
+
/** Handle click on a table cell */
|
|
771
|
+
handleCellClick: (tableIndex: number, rowIndex: number, columnIndex: number) => void;
|
|
772
|
+
/** Handle table action */
|
|
773
|
+
handleAction: (action: TableAction) => void;
|
|
774
|
+
/** Clear the selection */
|
|
775
|
+
clearSelection: () => void;
|
|
776
|
+
/** Check if a cell is selected */
|
|
777
|
+
isCellSelected: (tableIndex: number, rowIndex: number, columnIndex: number) => boolean;
|
|
778
|
+
/** The table context for the TableToolbar */
|
|
779
|
+
tableContext: TableContext | null;
|
|
780
|
+
}
|
|
781
|
+
/**
|
|
782
|
+
* Options for useTableSelection
|
|
783
|
+
*/
|
|
784
|
+
interface UseTableSelectionOptions {
|
|
785
|
+
/** The document being edited */
|
|
786
|
+
document: Document | null;
|
|
787
|
+
/** Callback when document changes */
|
|
788
|
+
onChange?: (document: Document) => void;
|
|
789
|
+
/** Callback when table selection changes */
|
|
790
|
+
onSelectionChange?: (context: TableContext | null) => void;
|
|
791
|
+
}
|
|
792
|
+
/**
|
|
793
|
+
* Data attributes for table elements
|
|
794
|
+
*/
|
|
795
|
+
declare const TABLE_DATA_ATTRIBUTES: {
|
|
796
|
+
/** Attribute for table index */
|
|
797
|
+
TABLE_INDEX: string;
|
|
798
|
+
/** Attribute for row index */
|
|
799
|
+
ROW_INDEX: string;
|
|
800
|
+
/** Attribute for column index */
|
|
801
|
+
COLUMN_INDEX: string;
|
|
802
|
+
/** Attribute marking a table cell */
|
|
803
|
+
TABLE_CELL: string;
|
|
804
|
+
};
|
|
805
|
+
/**
|
|
806
|
+
* Hook for tracking and managing table selection
|
|
807
|
+
*/
|
|
808
|
+
declare function useTableSelection({ document: doc, onChange, onSelectionChange, }: UseTableSelectionOptions): UseTableSelectionReturn;
|
|
809
|
+
|
|
810
|
+
/**
|
|
811
|
+
* useAutoSave Hook
|
|
812
|
+
*
|
|
813
|
+
* Automatically saves document state to localStorage at configurable intervals.
|
|
814
|
+
*
|
|
815
|
+
* Features:
|
|
816
|
+
* - Configurable save interval (default: 30 seconds)
|
|
817
|
+
* - Saves document JSON to localStorage
|
|
818
|
+
* - Recovery of saved state on load
|
|
819
|
+
* - Manual save trigger
|
|
820
|
+
* - Last save timestamp tracking
|
|
821
|
+
* - Save status callbacks
|
|
822
|
+
*/
|
|
823
|
+
|
|
824
|
+
/**
|
|
825
|
+
* Auto-save status
|
|
826
|
+
*/
|
|
827
|
+
type AutoSaveStatus = 'idle' | 'saving' | 'saved' | 'error';
|
|
828
|
+
/**
|
|
829
|
+
* Options for useAutoSave hook
|
|
830
|
+
*/
|
|
831
|
+
interface UseAutoSaveOptions {
|
|
832
|
+
/** Storage key for localStorage (default: 'docx-editor-autosave') */
|
|
833
|
+
storageKey?: string;
|
|
834
|
+
/** Save interval in milliseconds (default: 30000 - 30 seconds) */
|
|
835
|
+
interval?: number;
|
|
836
|
+
/** Whether auto-save is enabled (default: true) */
|
|
837
|
+
enabled?: boolean;
|
|
838
|
+
/** Maximum age of auto-save in milliseconds before it's considered stale (default: 24 hours) */
|
|
839
|
+
maxAge?: number;
|
|
840
|
+
/** Callback when save succeeds */
|
|
841
|
+
onSave?: (timestamp: Date) => void;
|
|
842
|
+
/** Callback when save fails */
|
|
843
|
+
onError?: (error: Error) => void;
|
|
844
|
+
/** Callback when recovery data is found */
|
|
845
|
+
onRecoveryAvailable?: (savedDocument: SavedDocumentData) => void;
|
|
846
|
+
/** Whether to save immediately when document changes (debounced) */
|
|
847
|
+
saveOnChange?: boolean;
|
|
848
|
+
/** Debounce delay for saveOnChange in milliseconds (default: 2000) */
|
|
849
|
+
debounceDelay?: number;
|
|
850
|
+
}
|
|
851
|
+
/**
|
|
852
|
+
* Return value of useAutoSave hook
|
|
853
|
+
*/
|
|
854
|
+
interface UseAutoSaveReturn {
|
|
855
|
+
/** Current auto-save status */
|
|
856
|
+
status: AutoSaveStatus;
|
|
857
|
+
/** Last save timestamp */
|
|
858
|
+
lastSaveTime: Date | null;
|
|
859
|
+
/** Manually trigger a save */
|
|
860
|
+
save: () => Promise<boolean>;
|
|
861
|
+
/** Clear auto-saved data from storage */
|
|
862
|
+
clearAutoSave: () => void;
|
|
863
|
+
/** Check if there's recoverable data */
|
|
864
|
+
hasRecoveryData: boolean;
|
|
865
|
+
/** Get the saved document data for recovery */
|
|
866
|
+
getRecoveryData: () => SavedDocumentData | null;
|
|
867
|
+
/** Accept and apply recovered data */
|
|
868
|
+
acceptRecovery: () => Document | null;
|
|
869
|
+
/** Dismiss recovery (clears saved data) */
|
|
870
|
+
dismissRecovery: () => void;
|
|
871
|
+
/** Whether auto-save is currently enabled */
|
|
872
|
+
isEnabled: boolean;
|
|
873
|
+
/** Enable auto-save */
|
|
874
|
+
enable: () => void;
|
|
875
|
+
/** Disable auto-save */
|
|
876
|
+
disable: () => void;
|
|
877
|
+
}
|
|
878
|
+
/**
|
|
879
|
+
* Saved document data structure
|
|
880
|
+
*/
|
|
881
|
+
interface SavedDocumentData {
|
|
882
|
+
/** The document JSON */
|
|
883
|
+
document: Document;
|
|
884
|
+
/** When the document was saved */
|
|
885
|
+
savedAt: string;
|
|
886
|
+
/** Version for format compatibility */
|
|
887
|
+
version: number;
|
|
888
|
+
/** Optional document identifier */
|
|
889
|
+
documentId?: string;
|
|
890
|
+
}
|
|
891
|
+
/**
|
|
892
|
+
* React hook for auto-saving document to localStorage
|
|
893
|
+
*/
|
|
894
|
+
declare function useAutoSave(document: Document | null | undefined, options?: UseAutoSaveOptions): UseAutoSaveReturn;
|
|
895
|
+
/**
|
|
896
|
+
* Format last save time for display
|
|
897
|
+
*/
|
|
898
|
+
declare function formatLastSaveTime(date: Date | null): string;
|
|
899
|
+
/**
|
|
900
|
+
* Get auto-save status label
|
|
901
|
+
*/
|
|
902
|
+
declare function getAutoSaveStatusLabel(status: AutoSaveStatus): string;
|
|
903
|
+
/**
|
|
904
|
+
* Get storage size used by auto-save
|
|
905
|
+
*/
|
|
906
|
+
declare function getAutoSaveStorageSize(storageKey?: string): number;
|
|
907
|
+
/**
|
|
908
|
+
* Format storage size for display
|
|
909
|
+
*/
|
|
910
|
+
declare function formatStorageSize(bytes: number): string;
|
|
911
|
+
/**
|
|
912
|
+
* Check if auto-save is supported in this environment
|
|
913
|
+
*/
|
|
914
|
+
declare function isAutoSaveSupported(): boolean;
|
|
915
|
+
|
|
916
|
+
/**
|
|
917
|
+
* useWheelZoom Hook
|
|
918
|
+
*
|
|
919
|
+
* Enables Ctrl+scroll (or Cmd+scroll on Mac) to zoom in/out.
|
|
920
|
+
* Features:
|
|
921
|
+
* - Configurable zoom range and step
|
|
922
|
+
* - Smooth zoom transitions
|
|
923
|
+
* - Pinch-to-zoom support on trackpads
|
|
924
|
+
* - Zoom reset (Ctrl+0)
|
|
925
|
+
* - Zoom in/out shortcuts (Ctrl++, Ctrl+-)
|
|
926
|
+
*/
|
|
927
|
+
/**
|
|
928
|
+
* Options for useWheelZoom hook
|
|
929
|
+
*/
|
|
930
|
+
interface UseWheelZoomOptions {
|
|
931
|
+
/** Initial zoom level (default: 1.0) */
|
|
932
|
+
initialZoom?: number;
|
|
933
|
+
/** Minimum zoom level (default: 0.25) */
|
|
934
|
+
minZoom?: number;
|
|
935
|
+
/** Maximum zoom level (default: 4.0) */
|
|
936
|
+
maxZoom?: number;
|
|
937
|
+
/** Zoom step for each scroll event (default: 0.1) */
|
|
938
|
+
zoomStep?: number;
|
|
939
|
+
/** Whether zoom is enabled (default: true) */
|
|
940
|
+
enabled?: boolean;
|
|
941
|
+
/** Container element ref to attach wheel listener */
|
|
942
|
+
containerRef?: React.RefObject<HTMLElement>;
|
|
943
|
+
/** Callback when zoom changes */
|
|
944
|
+
onZoomChange?: (zoom: number) => void;
|
|
945
|
+
/** Whether to enable keyboard shortcuts (Ctrl++, Ctrl+-, Ctrl+0) */
|
|
946
|
+
enableKeyboardShortcuts?: boolean;
|
|
947
|
+
/** Whether to prevent default browser zoom behavior */
|
|
948
|
+
preventDefault?: boolean;
|
|
949
|
+
}
|
|
950
|
+
/**
|
|
951
|
+
* Return value of useWheelZoom hook
|
|
952
|
+
*/
|
|
953
|
+
interface UseWheelZoomReturn {
|
|
954
|
+
/** Current zoom level */
|
|
955
|
+
zoom: number;
|
|
956
|
+
/** Set zoom level directly */
|
|
957
|
+
setZoom: (zoom: number) => void;
|
|
958
|
+
/** Zoom in by step */
|
|
959
|
+
zoomIn: () => void;
|
|
960
|
+
/** Zoom out by step */
|
|
961
|
+
zoomOut: () => void;
|
|
962
|
+
/** Reset zoom to initial level */
|
|
963
|
+
resetZoom: () => void;
|
|
964
|
+
/** Reset zoom to 100% */
|
|
965
|
+
zoomTo100: () => void;
|
|
966
|
+
/** Zoom to fit width */
|
|
967
|
+
zoomToFit: (containerWidth: number, contentWidth: number) => void;
|
|
968
|
+
/** Whether currently at minimum zoom */
|
|
969
|
+
isMinZoom: boolean;
|
|
970
|
+
/** Whether currently at maximum zoom */
|
|
971
|
+
isMaxZoom: boolean;
|
|
972
|
+
/** Zoom percentage (e.g., 100 for zoom level 1.0) */
|
|
973
|
+
zoomPercent: number;
|
|
974
|
+
/** Wheel event handler (for manual attachment) */
|
|
975
|
+
handleWheel: (event: WheelEvent) => void;
|
|
976
|
+
/** Keyboard event handler (for manual attachment) */
|
|
977
|
+
handleKeyDown: (event: KeyboardEvent) => void;
|
|
978
|
+
}
|
|
979
|
+
/**
|
|
980
|
+
* Preset zoom levels for snapping
|
|
981
|
+
*/
|
|
982
|
+
declare const ZOOM_PRESETS: number[];
|
|
983
|
+
/**
|
|
984
|
+
* React hook for Ctrl+scroll zoom functionality
|
|
985
|
+
*/
|
|
986
|
+
declare function useWheelZoom(options?: UseWheelZoomOptions): UseWheelZoomReturn;
|
|
987
|
+
/**
|
|
988
|
+
* Get zoom presets
|
|
989
|
+
*/
|
|
990
|
+
declare function getZoomPresets(): number[];
|
|
991
|
+
/**
|
|
992
|
+
* Find nearest zoom preset
|
|
993
|
+
*/
|
|
994
|
+
declare function findNearestZoomPreset(zoom: number): number;
|
|
995
|
+
/**
|
|
996
|
+
* Get next zoom preset (for zoom in)
|
|
997
|
+
*/
|
|
998
|
+
declare function getNextZoomPreset(zoom: number): number;
|
|
999
|
+
/**
|
|
1000
|
+
* Get previous zoom preset (for zoom out)
|
|
1001
|
+
*/
|
|
1002
|
+
declare function getPreviousZoomPreset(zoom: number): number;
|
|
1003
|
+
/**
|
|
1004
|
+
* Format zoom level for display
|
|
1005
|
+
*/
|
|
1006
|
+
declare function formatZoom(zoom: number): string;
|
|
1007
|
+
/**
|
|
1008
|
+
* Parse zoom from percentage string
|
|
1009
|
+
*/
|
|
1010
|
+
declare function parseZoom(zoomString: string): number | null;
|
|
1011
|
+
/**
|
|
1012
|
+
* Check if zoom level is at a preset
|
|
1013
|
+
*/
|
|
1014
|
+
declare function isZoomPreset(zoom: number): boolean;
|
|
1015
|
+
/**
|
|
1016
|
+
* Clamp zoom to valid range
|
|
1017
|
+
*/
|
|
1018
|
+
declare function clampZoom(zoom: number, minZoom?: number, maxZoom?: number): number;
|
|
1019
|
+
|
|
1020
|
+
/**
|
|
1021
|
+
* Selection Highlight Utilities
|
|
1022
|
+
*
|
|
1023
|
+
* Provides visual highlighting for text selection across multiple runs.
|
|
1024
|
+
* Browsers handle ::selection pseudo-element differently, especially when
|
|
1025
|
+
* selection spans multiple elements with different backgrounds or styling.
|
|
1026
|
+
*
|
|
1027
|
+
* This module provides:
|
|
1028
|
+
* - Custom selection highlight rendering
|
|
1029
|
+
* - Programmatic selection range marking
|
|
1030
|
+
* - Visual feedback for selection across runs
|
|
1031
|
+
*/
|
|
1032
|
+
|
|
1033
|
+
/**
|
|
1034
|
+
* Highlight rectangle representing a selected region
|
|
1035
|
+
*/
|
|
1036
|
+
interface HighlightRect {
|
|
1037
|
+
/** Left position in pixels */
|
|
1038
|
+
left: number;
|
|
1039
|
+
/** Top position in pixels */
|
|
1040
|
+
top: number;
|
|
1041
|
+
/** Width in pixels */
|
|
1042
|
+
width: number;
|
|
1043
|
+
/** Height in pixels */
|
|
1044
|
+
height: number;
|
|
1045
|
+
}
|
|
1046
|
+
/**
|
|
1047
|
+
* Selection highlight configuration
|
|
1048
|
+
*/
|
|
1049
|
+
interface SelectionHighlightConfig {
|
|
1050
|
+
/** Background color for selection */
|
|
1051
|
+
backgroundColor: string;
|
|
1052
|
+
/** Optional border color for selection */
|
|
1053
|
+
borderColor?: string;
|
|
1054
|
+
/** Optional border radius */
|
|
1055
|
+
borderRadius?: number;
|
|
1056
|
+
/** Z-index for overlay */
|
|
1057
|
+
zIndex?: number;
|
|
1058
|
+
/** Opacity for highlight */
|
|
1059
|
+
opacity?: number;
|
|
1060
|
+
/** Mix blend mode */
|
|
1061
|
+
mixBlendMode?: CSSProperties['mixBlendMode'];
|
|
1062
|
+
}
|
|
1063
|
+
/**
|
|
1064
|
+
* Selection range in document coordinates
|
|
1065
|
+
*/
|
|
1066
|
+
interface SelectionRange {
|
|
1067
|
+
/** Start position */
|
|
1068
|
+
start: {
|
|
1069
|
+
paragraphIndex: number;
|
|
1070
|
+
contentIndex: number;
|
|
1071
|
+
offset: number;
|
|
1072
|
+
};
|
|
1073
|
+
/** End position */
|
|
1074
|
+
end: {
|
|
1075
|
+
paragraphIndex: number;
|
|
1076
|
+
contentIndex: number;
|
|
1077
|
+
offset: number;
|
|
1078
|
+
};
|
|
1079
|
+
}
|
|
1080
|
+
/**
|
|
1081
|
+
* Default selection highlight style (matches Word/Google Docs)
|
|
1082
|
+
*/
|
|
1083
|
+
declare const DEFAULT_SELECTION_STYLE: SelectionHighlightConfig;
|
|
1084
|
+
/**
|
|
1085
|
+
* High contrast selection style
|
|
1086
|
+
*/
|
|
1087
|
+
declare const HIGH_CONTRAST_SELECTION_STYLE: SelectionHighlightConfig;
|
|
1088
|
+
/**
|
|
1089
|
+
* Selection highlight CSS custom properties
|
|
1090
|
+
*/
|
|
1091
|
+
declare const SELECTION_CSS_VARS: {
|
|
1092
|
+
readonly backgroundColor: "--docx-selection-bg";
|
|
1093
|
+
readonly borderColor: "--docx-selection-border";
|
|
1094
|
+
readonly textColor: "--docx-selection-text";
|
|
1095
|
+
};
|
|
1096
|
+
/**
|
|
1097
|
+
* Get all selection rectangles from the current DOM selection
|
|
1098
|
+
*
|
|
1099
|
+
* Uses getClientRects() to get accurate rectangles even when
|
|
1100
|
+
* selection spans multiple inline elements.
|
|
1101
|
+
*/
|
|
1102
|
+
declare function getSelectionRects(containerElement?: HTMLElement | null): HighlightRect[];
|
|
1103
|
+
/**
|
|
1104
|
+
* Merge adjacent or overlapping rectangles
|
|
1105
|
+
*
|
|
1106
|
+
* This reduces the number of highlight elements needed and creates
|
|
1107
|
+
* a cleaner visual appearance.
|
|
1108
|
+
*/
|
|
1109
|
+
declare function mergeAdjacentRects(rects: HighlightRect[], tolerance?: number): HighlightRect[];
|
|
1110
|
+
/**
|
|
1111
|
+
* Get selection rectangles with merging applied
|
|
1112
|
+
*/
|
|
1113
|
+
declare function getMergedSelectionRects(containerElement?: HTMLElement | null): HighlightRect[];
|
|
1114
|
+
/**
|
|
1115
|
+
* Generate CSS styles for a highlight rectangle
|
|
1116
|
+
*/
|
|
1117
|
+
declare function getHighlightRectStyle(rect: HighlightRect, config?: SelectionHighlightConfig): CSSProperties;
|
|
1118
|
+
/**
|
|
1119
|
+
* Generate inline CSS for selection pseudo-elements
|
|
1120
|
+
*
|
|
1121
|
+
* This is used to inject consistent selection styling
|
|
1122
|
+
* across all editable elements.
|
|
1123
|
+
*/
|
|
1124
|
+
declare function generateSelectionCSS(selector: string, config?: SelectionHighlightConfig): string;
|
|
1125
|
+
/**
|
|
1126
|
+
* Check if there is an active text selection (not collapsed)
|
|
1127
|
+
*/
|
|
1128
|
+
declare function hasActiveSelection(): boolean;
|
|
1129
|
+
/**
|
|
1130
|
+
* Get the selected text
|
|
1131
|
+
*/
|
|
1132
|
+
declare function getSelectedText(): string;
|
|
1133
|
+
/**
|
|
1134
|
+
* Check if selection is within a specific element
|
|
1135
|
+
*/
|
|
1136
|
+
declare function isSelectionWithin(element: HTMLElement): boolean;
|
|
1137
|
+
/**
|
|
1138
|
+
* Get the bounding rect of the current selection
|
|
1139
|
+
*/
|
|
1140
|
+
declare function getSelectionBoundingRect(): DOMRect | null;
|
|
1141
|
+
/**
|
|
1142
|
+
* Create a selection highlight for a specific text range
|
|
1143
|
+
*
|
|
1144
|
+
* This is useful for find/replace highlighting, AI action previews, etc.
|
|
1145
|
+
*/
|
|
1146
|
+
declare function highlightTextRange(_containerElement: HTMLElement, startNode: Node, startOffset: number, endNode: Node, endOffset: number): Range | null;
|
|
1147
|
+
/**
|
|
1148
|
+
* Select a text range programmatically
|
|
1149
|
+
*/
|
|
1150
|
+
declare function selectRange(range: Range): void;
|
|
1151
|
+
/**
|
|
1152
|
+
* Clear the current selection
|
|
1153
|
+
*/
|
|
1154
|
+
declare function clearSelection(): void;
|
|
1155
|
+
/**
|
|
1156
|
+
* Check if selection is backwards (focus before anchor)
|
|
1157
|
+
*/
|
|
1158
|
+
declare function isSelectionBackwards(): boolean;
|
|
1159
|
+
/**
|
|
1160
|
+
* Normalize selection to always be forward (start before end)
|
|
1161
|
+
*/
|
|
1162
|
+
declare function normalizeSelectionDirection(): void;
|
|
1163
|
+
/**
|
|
1164
|
+
* Inject selection highlight CSS into document
|
|
1165
|
+
*/
|
|
1166
|
+
declare function injectSelectionStyles(config?: SelectionHighlightConfig): void;
|
|
1167
|
+
/**
|
|
1168
|
+
* Remove injected selection styles
|
|
1169
|
+
*/
|
|
1170
|
+
declare function removeSelectionStyles(): void;
|
|
1171
|
+
/**
|
|
1172
|
+
* Check if selection styles are injected
|
|
1173
|
+
*/
|
|
1174
|
+
declare function areSelectionStylesInjected(): boolean;
|
|
1175
|
+
/**
|
|
1176
|
+
* Create a selection change handler that updates highlight rects
|
|
1177
|
+
*/
|
|
1178
|
+
declare function createSelectionChangeHandler(containerElement: HTMLElement | null, onRectsChange: (rects: HighlightRect[]) => void, merge?: boolean): () => void;
|
|
1179
|
+
|
|
1180
|
+
/**
|
|
1181
|
+
* Selection Highlight Hook
|
|
1182
|
+
*
|
|
1183
|
+
* A React hook that manages visual selection highlighting across multiple runs.
|
|
1184
|
+
* Uses a combination of CSS ::selection pseudo-element styling and optional
|
|
1185
|
+
* overlay rectangles for complex scenarios.
|
|
1186
|
+
*
|
|
1187
|
+
* Features:
|
|
1188
|
+
* - Consistent selection highlighting across all text runs
|
|
1189
|
+
* - Support for text with different backgrounds (highlighted, dark bg)
|
|
1190
|
+
* - Optional overlay rectangles for custom highlight effects
|
|
1191
|
+
* - Debounced updates for performance
|
|
1192
|
+
*/
|
|
1193
|
+
|
|
1194
|
+
/**
|
|
1195
|
+
* Options for the useSelectionHighlight hook
|
|
1196
|
+
*/
|
|
1197
|
+
interface UseSelectionHighlightOptions {
|
|
1198
|
+
/** Reference to the container element */
|
|
1199
|
+
containerRef: React__default.RefObject<HTMLElement>;
|
|
1200
|
+
/** Whether to enable selection highlighting */
|
|
1201
|
+
enabled?: boolean;
|
|
1202
|
+
/** Custom highlight configuration */
|
|
1203
|
+
config?: SelectionHighlightConfig;
|
|
1204
|
+
/** Whether to use overlay rectangles (default: false, uses CSS) */
|
|
1205
|
+
useOverlay?: boolean;
|
|
1206
|
+
/** Debounce delay for rect updates in ms (default: 16) */
|
|
1207
|
+
debounceMs?: number;
|
|
1208
|
+
/** Callback when selection changes */
|
|
1209
|
+
onSelectionChange?: (hasSelection: boolean, text: string) => void;
|
|
1210
|
+
}
|
|
1211
|
+
/**
|
|
1212
|
+
* Return value from the useSelectionHighlight hook
|
|
1213
|
+
*/
|
|
1214
|
+
interface UseSelectionHighlightReturn {
|
|
1215
|
+
/** Whether there is an active selection */
|
|
1216
|
+
hasSelection: boolean;
|
|
1217
|
+
/** The selected text */
|
|
1218
|
+
selectedText: string;
|
|
1219
|
+
/** Highlight rectangles (only populated if useOverlay is true) */
|
|
1220
|
+
highlightRects: HighlightRect[];
|
|
1221
|
+
/** Whether selection is within the container */
|
|
1222
|
+
isSelectionInContainer: boolean;
|
|
1223
|
+
/** Refresh the highlight state */
|
|
1224
|
+
refresh: () => void;
|
|
1225
|
+
/** Get styles for a highlight rect overlay */
|
|
1226
|
+
getOverlayStyle: (rect: HighlightRect) => CSSProperties;
|
|
1227
|
+
}
|
|
1228
|
+
/**
|
|
1229
|
+
* Hook to manage selection highlighting in the editor
|
|
1230
|
+
*/
|
|
1231
|
+
declare function useSelectionHighlight(options: UseSelectionHighlightOptions): UseSelectionHighlightReturn;
|
|
1232
|
+
/**
|
|
1233
|
+
* Props for selection overlay component
|
|
1234
|
+
*/
|
|
1235
|
+
interface SelectionOverlayProps {
|
|
1236
|
+
/** Highlight rectangles to render */
|
|
1237
|
+
rects: HighlightRect[];
|
|
1238
|
+
/** Style configuration */
|
|
1239
|
+
config?: SelectionHighlightConfig;
|
|
1240
|
+
/** Additional class name */
|
|
1241
|
+
className?: string;
|
|
1242
|
+
}
|
|
1243
|
+
/**
|
|
1244
|
+
* Generate selection overlay elements (for use in JSX)
|
|
1245
|
+
*
|
|
1246
|
+
* Usage:
|
|
1247
|
+
* ```tsx
|
|
1248
|
+
* const { highlightRects } = useSelectionHighlight({ ... });
|
|
1249
|
+
* return (
|
|
1250
|
+
* <div style={{ position: 'relative' }}>
|
|
1251
|
+
* {generateOverlayElements(highlightRects)}
|
|
1252
|
+
* <div>... content ...</div>
|
|
1253
|
+
* </div>
|
|
1254
|
+
* );
|
|
1255
|
+
* ```
|
|
1256
|
+
*/
|
|
1257
|
+
declare function generateOverlayElements(rects: HighlightRect[], config?: SelectionHighlightConfig): React__default.ReactNode[];
|
|
1258
|
+
|
|
1259
|
+
/**
|
|
1260
|
+
* useClipboard Hook
|
|
1261
|
+
*
|
|
1262
|
+
* React hook for managing clipboard operations in the editor with formatting preservation.
|
|
1263
|
+
*
|
|
1264
|
+
* Features:
|
|
1265
|
+
* - Copy: Copies selected runs/paragraphs to clipboard with formatting as HTML
|
|
1266
|
+
* - Cut: Copies and removes selected content
|
|
1267
|
+
* - Paste: Parses clipboard HTML/text and applies formatting
|
|
1268
|
+
* - Handles Word-pasted content (cleans Word-specific markup)
|
|
1269
|
+
* - Keyboard shortcuts (Ctrl+C, Ctrl+X, Ctrl+V)
|
|
1270
|
+
*/
|
|
1271
|
+
|
|
1272
|
+
/**
|
|
1273
|
+
* Selection data for clipboard operations
|
|
1274
|
+
*/
|
|
1275
|
+
interface ClipboardSelection {
|
|
1276
|
+
/** Selected text (plain text) */
|
|
1277
|
+
text: string;
|
|
1278
|
+
/** Selected runs */
|
|
1279
|
+
runs: Run[];
|
|
1280
|
+
/** Start position */
|
|
1281
|
+
startParagraphIndex: number;
|
|
1282
|
+
startRunIndex: number;
|
|
1283
|
+
startOffset: number;
|
|
1284
|
+
/** End position */
|
|
1285
|
+
endParagraphIndex: number;
|
|
1286
|
+
endRunIndex: number;
|
|
1287
|
+
endOffset: number;
|
|
1288
|
+
/** Whether selection spans multiple paragraphs */
|
|
1289
|
+
isMultiParagraph: boolean;
|
|
1290
|
+
}
|
|
1291
|
+
/**
|
|
1292
|
+
* Options for useClipboard hook
|
|
1293
|
+
*/
|
|
1294
|
+
interface UseClipboardOptions {
|
|
1295
|
+
/** Callback when content is copied */
|
|
1296
|
+
onCopy?: (selection: ClipboardSelection) => void;
|
|
1297
|
+
/** Callback when content is cut */
|
|
1298
|
+
onCut?: (selection: ClipboardSelection) => void;
|
|
1299
|
+
/** Callback when content is pasted */
|
|
1300
|
+
onPaste?: (content: ParsedClipboardContent, asPlainText: boolean) => void;
|
|
1301
|
+
/** Whether to clean Word-specific formatting */
|
|
1302
|
+
cleanWordFormatting?: boolean;
|
|
1303
|
+
/** Whether the editor is editable */
|
|
1304
|
+
editable?: boolean;
|
|
1305
|
+
/** Callback for errors */
|
|
1306
|
+
onError?: (error: Error) => void;
|
|
1307
|
+
}
|
|
1308
|
+
/**
|
|
1309
|
+
* Return value of useClipboard hook
|
|
1310
|
+
*/
|
|
1311
|
+
interface UseClipboardReturn {
|
|
1312
|
+
/** Copy the current selection to clipboard */
|
|
1313
|
+
copy: (selection: ClipboardSelection) => Promise<boolean>;
|
|
1314
|
+
/** Cut the current selection to clipboard */
|
|
1315
|
+
cut: (selection: ClipboardSelection) => Promise<boolean>;
|
|
1316
|
+
/** Paste from clipboard */
|
|
1317
|
+
paste: (asPlainText?: boolean) => Promise<ParsedClipboardContent | null>;
|
|
1318
|
+
/** Handle copy event from DOM */
|
|
1319
|
+
handleCopy: (event: ClipboardEvent) => void;
|
|
1320
|
+
/** Handle cut event from DOM */
|
|
1321
|
+
handleCut: (event: ClipboardEvent) => void;
|
|
1322
|
+
/** Handle paste event from DOM */
|
|
1323
|
+
handlePaste: (event: ClipboardEvent) => void;
|
|
1324
|
+
/** Handle keyboard shortcuts */
|
|
1325
|
+
handleKeyDown: (event: KeyboardEvent) => void;
|
|
1326
|
+
/** Whether a clipboard operation is in progress */
|
|
1327
|
+
isProcessing: boolean;
|
|
1328
|
+
/** Last pasted content */
|
|
1329
|
+
lastPastedContent: ParsedClipboardContent | null;
|
|
1330
|
+
}
|
|
1331
|
+
/**
|
|
1332
|
+
* Get selected runs from the current DOM selection
|
|
1333
|
+
*/
|
|
1334
|
+
declare function getSelectionRuns(): Run[];
|
|
1335
|
+
/**
|
|
1336
|
+
* Create a selection object from the current DOM selection
|
|
1337
|
+
*/
|
|
1338
|
+
declare function createSelectionFromDOM(): ClipboardSelection | null;
|
|
1339
|
+
/**
|
|
1340
|
+
* React hook for clipboard operations
|
|
1341
|
+
*/
|
|
1342
|
+
declare function useClipboard(options?: UseClipboardOptions): UseClipboardReturn;
|
|
1343
|
+
|
|
1344
|
+
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/* Right panel rendered inside viewport - scrolls with content */\n.plugin-panel-in-viewport {\n position: absolute;\n top: 0;\n /* Position is set dynamically via inline styles based on page edge */\n width: 220px;\n pointer-events: auto;\n z-index: 10;\n overflow: visible;\n}\n\n.plugin-panel-in-viewport.collapsed {\n width: 32px;\n}\n\n.plugin-panel-in-viewport .plugin-panel-toggle {\n position: sticky;\n top: 0;\n background: rgba(255, 255, 255, 0.95);\n border-radius: 4px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.plugin-panel-in-viewport-content {\n overflow: visible;\n position: relative;\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";
|
|
1345
|
+
/**
|
|
1346
|
+
* PluginHost Component
|
|
1347
|
+
*
|
|
1348
|
+
* Wraps the editor and provides:
|
|
1349
|
+
* - Plugin state management
|
|
1350
|
+
* - Panel rendering for each plugin
|
|
1351
|
+
* - CSS injection for plugin styles
|
|
1352
|
+
* - Callbacks for editor interaction
|
|
1353
|
+
*/
|
|
1354
|
+
declare const PluginHost: React$1.ForwardRefExoticComponent<PluginHostProps & React$1.RefAttributes<PluginHostRef>>;
|
|
1355
|
+
|
|
1356
|
+
export { formatStorageSize as $, type AutoSaveStatus as A, type UseAutoSaveReturn as B, type ClipboardSelection as C, DEFAULT_SELECTION_STYLE as D, type EditorPlugin as E, type UseClipboardOptions as F, type UseClipboardReturn as G, HIGH_CONTRAST_SELECTION_STYLE as H, type UseSelectionHighlightOptions as I, type UseSelectionHighlightReturn as J, type UseTableSelectionOptions as K, type UseTableSelectionReturn as L, type UseWheelZoomOptions as M, type UseWheelZoomReturn as N, areSelectionStylesInjected as O, type PluginPanelProps as P, clampZoom as Q, type RenderAsyncOptions as R, SELECTION_CSS_VARS as S, TABLE_DATA_ATTRIBUTES as T, UnsupportedFeatureWarning as U, clearSelection as V, createSelectionChangeHandler as W, createSelectionFromDOM as X, findNearestZoomPreset as Y, ZOOM_PRESETS as Z, formatLastSaveTime as _, DocxEditor as a, formatZoom as a0, generateOverlayElements as a1, generateSelectionCSS as a2, getAutoSaveStatusLabel as a3, getAutoSaveStorageSize as a4, getHighlightRectStyle as a5, getMergedSelectionRects as a6, getNextZoomPreset as a7, getPreviousZoomPreset as a8, getSelectedText as a9, getSelectionBoundingRect as aa, getSelectionRects as ab, getSelectionRuns as ac, getUserFriendlyMessage as ad, getZoomPresets as ae, hasActiveSelection as af, highlightTextRange as ag, injectSelectionStyles as ah, isAutoSaveSupported as ai, isParseError as aj, isSelectionBackwards as ak, isSelectionWithin as al, isZoomPreset as am, mergeAdjacentRects as an, normalizeSelectionDirection as ao, parseZoom as ap, removeSelectionStyles as aq, renderAsync as ar, selectRange as as, useAutoSave as at, useClipboard as au, useErrorNotifications as av, useSelectionHighlight as aw, useTableSelection as ax, useWheelZoom as ay, type DocxEditorHandle as b, type DocxEditorProps as c, type DocxEditorRef as d, ErrorBoundary as e, type ErrorBoundaryProps as f, type ErrorContextValue as g, type ErrorNotification as h, ErrorProvider as i, type ErrorSeverity as j, type HighlightRect as k, PLUGIN_HOST_STYLES as l, type PanelConfig as m, ParseErrorDisplay as n, type ParseErrorDisplayProps as o, type PluginContext as p, PluginHost as q, type PluginHostProps as r, type PluginHostRef as s, type SavedDocumentData as t, type SelectionHighlightConfig as u, type SelectionOverlayProps as v, type SelectionRange as w, type TableSelectionState as x, type UnsupportedFeatureWarningProps as y, type UseAutoSaveOptions as z };
|