@portabletext/toolbar 8.0.42 → 8.0.44
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/index.d.ts +376 -523
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +1300 -1953
- package/dist/index.js.map +1 -1
- package/package.json +12 -10
package/dist/index.d.ts
CHANGED
|
@@ -1,448 +1,93 @@
|
|
|
1
|
-
import {AnnotationDefinition} from
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {BlockPath} from '@portabletext/editor'
|
|
7
|
-
import {ChildPath} from '@portabletext/editor'
|
|
8
|
-
import {DecoratorDefinition} from '@portabletext/editor'
|
|
9
|
-
import {DecoratorSchemaType} from '@portabletext/editor'
|
|
10
|
-
import {InlineObjectSchemaType} from '@portabletext/editor'
|
|
11
|
-
import {InsertPlacement} from '@portabletext/editor/behaviors'
|
|
12
|
-
import type {KeyboardShortcut} from '@portabletext/keyboard-shortcuts'
|
|
13
|
-
import {ListSchemaType} from '@portabletext/editor'
|
|
14
|
-
import {PortableTextObject} from '@portabletext/editor'
|
|
15
|
-
import type {RefObject} from 'react'
|
|
16
|
-
import {StyleSchemaType} from '@portabletext/editor'
|
|
17
|
-
|
|
18
|
-
declare type ActiveContext = {
|
|
19
|
-
annotations: Array<{
|
|
20
|
-
value: PortableTextObject
|
|
21
|
-
schemaType: ToolbarAnnotationSchemaType
|
|
22
|
-
at: AnnotationPath
|
|
23
|
-
}>
|
|
24
|
-
elementRef: RefObject<Element | null>
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
declare type ActiveContext_2 = {
|
|
28
|
-
blockObjects: Array<{
|
|
29
|
-
value: PortableTextObject
|
|
30
|
-
schemaType: ToolbarBlockObjectSchemaType
|
|
31
|
-
at: BlockPath
|
|
32
|
-
}>
|
|
33
|
-
elementRef: RefObject<Element | null>
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
declare type ActiveContext_3 = {
|
|
37
|
-
inlineObjects: Array<{
|
|
38
|
-
value: PortableTextObject
|
|
39
|
-
schemaType: ToolbarInlineObjectSchemaType
|
|
40
|
-
at: ChildPath
|
|
41
|
-
}>
|
|
42
|
-
elementRef: RefObject<Element | null>
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
/**
|
|
46
|
-
* @beta
|
|
47
|
-
*/
|
|
48
|
-
export declare type AnnotationButton = {
|
|
49
|
-
snapshot: {
|
|
50
|
-
matches: (
|
|
51
|
-
state:
|
|
52
|
-
| 'disabled'
|
|
53
|
-
| 'enabled'
|
|
54
|
-
| {
|
|
55
|
-
disabled: 'inactive'
|
|
56
|
-
}
|
|
57
|
-
| {
|
|
58
|
-
disabled: 'active'
|
|
59
|
-
}
|
|
60
|
-
| {
|
|
61
|
-
enabled: 'inactive'
|
|
62
|
-
}
|
|
63
|
-
| {
|
|
64
|
-
enabled: {
|
|
65
|
-
inactive: 'idle'
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
| {
|
|
69
|
-
enabled: {
|
|
70
|
-
inactive: 'showing dialog'
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
| {
|
|
74
|
-
enabled: 'active'
|
|
75
|
-
},
|
|
76
|
-
) => boolean
|
|
77
|
-
}
|
|
78
|
-
send: (event: AnnotationButtonEvent) => void
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
/**
|
|
82
|
-
* @beta
|
|
83
|
-
*/
|
|
84
|
-
export declare type AnnotationButtonEvent =
|
|
85
|
-
| {
|
|
86
|
-
type: 'close dialog'
|
|
87
|
-
}
|
|
88
|
-
| {
|
|
89
|
-
type: 'open dialog'
|
|
90
|
-
}
|
|
91
|
-
| {
|
|
92
|
-
type: 'add'
|
|
93
|
-
annotation: {
|
|
94
|
-
value: Record<string, unknown>
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
| {
|
|
98
|
-
type: 'remove'
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
/**
|
|
102
|
-
* @beta
|
|
103
|
-
*/
|
|
104
|
-
export declare type AnnotationPopover = {
|
|
105
|
-
snapshot: {
|
|
106
|
-
context: ActiveContext
|
|
107
|
-
matches: (
|
|
108
|
-
state:
|
|
109
|
-
| 'disabled'
|
|
110
|
-
| 'enabled'
|
|
111
|
-
| {
|
|
112
|
-
enabled: 'inactive' | 'active'
|
|
113
|
-
},
|
|
114
|
-
) => boolean
|
|
115
|
-
}
|
|
116
|
-
send: (event: AnnotationPopoverEvent) => void
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
/**
|
|
120
|
-
* @beta
|
|
121
|
-
*/
|
|
122
|
-
export declare type AnnotationPopoverEvent =
|
|
123
|
-
| {
|
|
124
|
-
type: 'remove'
|
|
125
|
-
schemaType: AnnotationSchemaType
|
|
126
|
-
}
|
|
127
|
-
| {
|
|
128
|
-
type: 'edit'
|
|
129
|
-
at: AnnotationPath
|
|
130
|
-
props: {
|
|
131
|
-
[key: string]: unknown
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
| {
|
|
135
|
-
type: 'close'
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
export {ApplicableSchema}
|
|
139
|
-
|
|
140
|
-
/**
|
|
141
|
-
* @beta
|
|
142
|
-
*/
|
|
143
|
-
export declare type BlockObjectButton = {
|
|
144
|
-
snapshot: {
|
|
145
|
-
matches: (
|
|
146
|
-
state:
|
|
147
|
-
| 'disabled'
|
|
148
|
-
| 'enabled'
|
|
149
|
-
| {
|
|
150
|
-
enabled: 'idle'
|
|
151
|
-
}
|
|
152
|
-
| {
|
|
153
|
-
enabled: 'showing dialog'
|
|
154
|
-
},
|
|
155
|
-
) => boolean
|
|
156
|
-
}
|
|
157
|
-
send: (event: BlockObjectButtonEvent) => void
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
/**
|
|
161
|
-
* @beta
|
|
162
|
-
*/
|
|
163
|
-
export declare type BlockObjectButtonEvent =
|
|
164
|
-
| {
|
|
165
|
-
type: 'close dialog'
|
|
166
|
-
}
|
|
167
|
-
| {
|
|
168
|
-
type: 'open dialog'
|
|
169
|
-
}
|
|
170
|
-
| {
|
|
171
|
-
type: 'insert'
|
|
172
|
-
value: {
|
|
173
|
-
[key: string]: unknown
|
|
174
|
-
}
|
|
175
|
-
placement: InsertPlacement | undefined
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
/**
|
|
179
|
-
* @beta
|
|
180
|
-
*/
|
|
181
|
-
export declare type BlockObjectPopover = {
|
|
182
|
-
snapshot: {
|
|
183
|
-
context: ActiveContext_2
|
|
184
|
-
matches: (
|
|
185
|
-
state:
|
|
186
|
-
| 'disabled'
|
|
187
|
-
| 'enabled'
|
|
188
|
-
| {
|
|
189
|
-
enabled: 'inactive' | 'active'
|
|
190
|
-
},
|
|
191
|
-
) => boolean
|
|
192
|
-
}
|
|
193
|
-
send: (event: BlockObjectPopoverEvent) => void
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
/**
|
|
197
|
-
* @beta
|
|
198
|
-
*/
|
|
199
|
-
export declare type BlockObjectPopoverEvent =
|
|
200
|
-
| {
|
|
201
|
-
type: 'remove'
|
|
202
|
-
at: BlockPath
|
|
203
|
-
}
|
|
204
|
-
| {
|
|
205
|
-
type: 'edit'
|
|
206
|
-
at: BlockPath
|
|
207
|
-
props: {
|
|
208
|
-
[key: string]: unknown
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
| {
|
|
212
|
-
type: 'close'
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
/**
|
|
216
|
-
* @beta
|
|
217
|
-
*/
|
|
218
|
-
export declare type DecoratorButton = {
|
|
219
|
-
snapshot: {
|
|
220
|
-
matches: (
|
|
221
|
-
state:
|
|
222
|
-
| 'disabled'
|
|
223
|
-
| 'enabled'
|
|
224
|
-
| {
|
|
225
|
-
disabled: 'inactive'
|
|
226
|
-
}
|
|
227
|
-
| {
|
|
228
|
-
disabled: 'active'
|
|
229
|
-
}
|
|
230
|
-
| {
|
|
231
|
-
enabled: 'inactive'
|
|
232
|
-
}
|
|
233
|
-
| {
|
|
234
|
-
enabled: 'active'
|
|
235
|
-
},
|
|
236
|
-
) => boolean
|
|
237
|
-
}
|
|
238
|
-
send: (event: DecoratorButtonEvent) => void
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
/**
|
|
242
|
-
* @beta
|
|
243
|
-
*/
|
|
244
|
-
export declare type DecoratorButtonEvent = {
|
|
245
|
-
type: 'toggle'
|
|
246
|
-
}
|
|
247
|
-
|
|
1
|
+
import { AnnotationDefinition, AnnotationPath, AnnotationSchemaType, BlockObjectSchemaType, BlockPath, ChildPath, DecoratorDefinition, DecoratorSchemaType, InlineObjectSchemaType, ListSchemaType, PortableTextObject, StyleSchemaType } from "@portabletext/editor";
|
|
2
|
+
import { ApplicableSchema } from "@portabletext/editor/selectors";
|
|
3
|
+
import { InsertPlacement } from "@portabletext/editor/behaviors";
|
|
4
|
+
import { RefObject } from "react";
|
|
5
|
+
import { KeyboardShortcut } from "@portabletext/keyboard-shortcuts";
|
|
248
6
|
/**
|
|
249
7
|
* @beta
|
|
8
|
+
*
|
|
9
|
+
* React hook that subscribes to {@link getApplicableSchema} for the active
|
|
10
|
+
* editor and returns a stable reference across editor ticks while the
|
|
11
|
+
* applicable set is unchanged.
|
|
12
|
+
*
|
|
13
|
+
* Pair with {@link useToolbarSchema} to render a static toolbar whose
|
|
14
|
+
* buttons stay stable across selection moves and gate their enabled state
|
|
15
|
+
* on whether the corresponding name is in the relevant set.
|
|
250
16
|
*/
|
|
251
|
-
|
|
252
|
-
annotation: AnnotationSchemaType,
|
|
253
|
-
) => ToolbarAnnotationSchemaType
|
|
254
|
-
|
|
17
|
+
declare function useApplicableSchema(): ApplicableSchema;
|
|
255
18
|
/**
|
|
256
19
|
* @beta
|
|
257
20
|
*/
|
|
258
|
-
|
|
259
|
-
blockObject: BlockObjectSchemaType,
|
|
260
|
-
) => ToolbarBlockObjectSchemaType
|
|
261
|
-
|
|
21
|
+
type ExtendDecoratorSchemaType = (decorator: DecoratorSchemaType) => ToolbarDecoratorSchemaType;
|
|
262
22
|
/**
|
|
263
23
|
* @beta
|
|
264
24
|
*/
|
|
265
|
-
|
|
266
|
-
decorator: DecoratorSchemaType,
|
|
267
|
-
) => ToolbarDecoratorSchemaType
|
|
268
|
-
|
|
25
|
+
type ExtendAnnotationSchemaType = (annotation: AnnotationSchemaType) => ToolbarAnnotationSchemaType;
|
|
269
26
|
/**
|
|
270
27
|
* @beta
|
|
271
28
|
*/
|
|
272
|
-
|
|
273
|
-
inlineObject: InlineObjectSchemaType,
|
|
274
|
-
) => ToolbarInlineObjectSchemaType
|
|
275
|
-
|
|
29
|
+
type ExtendListSchemaType = (list: ListSchemaType) => ToolbarListSchemaType;
|
|
276
30
|
/**
|
|
277
31
|
* @beta
|
|
278
32
|
*/
|
|
279
|
-
|
|
280
|
-
list: ListSchemaType,
|
|
281
|
-
) => ToolbarListSchemaType
|
|
282
|
-
|
|
33
|
+
type ExtendBlockObjectSchemaType = (blockObject: BlockObjectSchemaType) => ToolbarBlockObjectSchemaType;
|
|
283
34
|
/**
|
|
284
35
|
* @beta
|
|
285
36
|
*/
|
|
286
|
-
|
|
287
|
-
style: StyleSchemaType,
|
|
288
|
-
) => ToolbarStyleSchemaType
|
|
289
|
-
|
|
37
|
+
type ExtendInlineObjectSchemaType = (inlineObject: InlineObjectSchemaType) => ToolbarInlineObjectSchemaType;
|
|
290
38
|
/**
|
|
291
39
|
* @beta
|
|
292
40
|
*/
|
|
293
|
-
|
|
294
|
-
snapshot: {
|
|
295
|
-
matches: (state: 'disabled' | 'enabled') => boolean
|
|
296
|
-
}
|
|
297
|
-
send: (event: HistoryButtonsEvent) => void
|
|
298
|
-
}
|
|
299
|
-
|
|
41
|
+
type ExtendStyleSchemaType = (style: StyleSchemaType) => ToolbarStyleSchemaType;
|
|
300
42
|
/**
|
|
301
43
|
* @beta
|
|
44
|
+
*
|
|
45
|
+
* Resolve the editor's full toolbar schema. Returns the union of every
|
|
46
|
+
* decorator, annotation, list, style, block object and inline object declared
|
|
47
|
+
* anywhere in the editor's schema graph that is reachable from a position
|
|
48
|
+
* where text is edited - the root schema merged with the sub-schema of every
|
|
49
|
+
* registered container whose field accepts text blocks. Useful for rendering
|
|
50
|
+
* a static toolbar whose buttons stay stable across selection moves.
|
|
51
|
+
*
|
|
52
|
+
* Re-renders only when the schema graph or the extension callbacks change.
|
|
53
|
+
* Pair with {@link useApplicableSchema} to determine which entries are
|
|
54
|
+
* applicable at the current selection (which buttons should be enabled vs.
|
|
55
|
+
* disabled).
|
|
302
56
|
*/
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
57
|
+
declare function useToolbarSchema(props: {
|
|
58
|
+
extendDecorator?: ExtendDecoratorSchemaType;
|
|
59
|
+
extendAnnotation?: ExtendAnnotationSchemaType;
|
|
60
|
+
extendList?: ExtendListSchemaType;
|
|
61
|
+
extendBlockObject?: ExtendBlockObjectSchemaType;
|
|
62
|
+
extendInlineObject?: ExtendInlineObjectSchemaType;
|
|
63
|
+
extendStyle?: ExtendStyleSchemaType;
|
|
64
|
+
}): ToolbarSchema;
|
|
311
65
|
/**
|
|
312
66
|
* @beta
|
|
313
67
|
*/
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
}
|
|
323
|
-
| {
|
|
324
|
-
enabled: 'showing dialog'
|
|
325
|
-
},
|
|
326
|
-
) => boolean
|
|
327
|
-
}
|
|
328
|
-
send: (event: InlineObjectButtonEvent) => void
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
/**
|
|
332
|
-
* @beta
|
|
333
|
-
*/
|
|
334
|
-
export declare type InlineObjectButtonEvent =
|
|
335
|
-
| {
|
|
336
|
-
type: 'close dialog'
|
|
337
|
-
}
|
|
338
|
-
| {
|
|
339
|
-
type: 'open dialog'
|
|
340
|
-
}
|
|
341
|
-
| {
|
|
342
|
-
type: 'insert'
|
|
343
|
-
value: {
|
|
344
|
-
[key: string]: unknown
|
|
345
|
-
}
|
|
346
|
-
}
|
|
347
|
-
|
|
348
|
-
/**
|
|
349
|
-
* @beta
|
|
350
|
-
*/
|
|
351
|
-
export declare type InlineObjectPopover = {
|
|
352
|
-
snapshot: {
|
|
353
|
-
context: ActiveContext_3
|
|
354
|
-
matches: (
|
|
355
|
-
state:
|
|
356
|
-
| 'disabled'
|
|
357
|
-
| 'enabled'
|
|
358
|
-
| {
|
|
359
|
-
enabled: 'inactive' | 'active'
|
|
360
|
-
},
|
|
361
|
-
) => boolean
|
|
362
|
-
}
|
|
363
|
-
send: (event: InlineObjectPopoverEvent) => void
|
|
364
|
-
}
|
|
365
|
-
|
|
366
|
-
/**
|
|
367
|
-
* @beta
|
|
368
|
-
*/
|
|
369
|
-
export declare type InlineObjectPopoverEvent =
|
|
370
|
-
| {
|
|
371
|
-
type: 'remove'
|
|
372
|
-
at: ChildPath
|
|
373
|
-
}
|
|
374
|
-
| {
|
|
375
|
-
type: 'edit'
|
|
376
|
-
at: ChildPath
|
|
377
|
-
props: {
|
|
378
|
-
[key: string]: unknown
|
|
379
|
-
}
|
|
380
|
-
}
|
|
381
|
-
| {
|
|
382
|
-
type: 'close'
|
|
383
|
-
}
|
|
384
|
-
|
|
385
|
-
/**
|
|
386
|
-
* @beta
|
|
387
|
-
*/
|
|
388
|
-
export declare type ListButton = {
|
|
389
|
-
snapshot: {
|
|
390
|
-
matches: (
|
|
391
|
-
state:
|
|
392
|
-
| 'disabled'
|
|
393
|
-
| 'enabled'
|
|
394
|
-
| {
|
|
395
|
-
disabled: 'inactive'
|
|
396
|
-
}
|
|
397
|
-
| {
|
|
398
|
-
disabled: 'active'
|
|
399
|
-
}
|
|
400
|
-
| {
|
|
401
|
-
enabled: 'inactive'
|
|
402
|
-
}
|
|
403
|
-
| {
|
|
404
|
-
enabled: 'active'
|
|
405
|
-
},
|
|
406
|
-
) => boolean
|
|
407
|
-
}
|
|
408
|
-
send: (event: ListButtonEvent) => void
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
/**
|
|
412
|
-
* @beta
|
|
413
|
-
*/
|
|
414
|
-
export declare type ListButtonEvent = {
|
|
415
|
-
type: 'toggle'
|
|
416
|
-
}
|
|
417
|
-
|
|
418
|
-
/**
|
|
419
|
-
* @beta
|
|
420
|
-
*/
|
|
421
|
-
export declare type StyleSelector = {
|
|
422
|
-
snapshot: {
|
|
423
|
-
matches: (state: 'disabled' | 'enabled') => boolean
|
|
424
|
-
context: {
|
|
425
|
-
activeStyle: StyleSchemaType['name'] | undefined
|
|
426
|
-
}
|
|
427
|
-
}
|
|
428
|
-
send: (event: StyleSelectorEvent) => void
|
|
429
|
-
}
|
|
430
|
-
|
|
68
|
+
type ToolbarSchema = {
|
|
69
|
+
decorators: ReadonlyArray<ToolbarDecoratorSchemaType>;
|
|
70
|
+
annotations: ReadonlyArray<ToolbarAnnotationSchemaType>;
|
|
71
|
+
lists: ReadonlyArray<ToolbarListSchemaType>;
|
|
72
|
+
blockObjects: ReadonlyArray<ToolbarBlockObjectSchemaType>;
|
|
73
|
+
inlineObjects: ReadonlyArray<ToolbarInlineObjectSchemaType>;
|
|
74
|
+
styles: ReadonlyArray<ToolbarStyleSchemaType>;
|
|
75
|
+
};
|
|
431
76
|
/**
|
|
432
77
|
* @beta
|
|
433
78
|
*/
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
79
|
+
type ToolbarDecoratorSchemaType = DecoratorSchemaType & {
|
|
80
|
+
icon?: React.ComponentType;
|
|
81
|
+
shortcut?: KeyboardShortcut;
|
|
82
|
+
mutuallyExclusive?: ReadonlyArray<DecoratorDefinition['name']>;
|
|
83
|
+
};
|
|
439
84
|
/**
|
|
440
85
|
* @beta
|
|
441
86
|
*/
|
|
442
|
-
|
|
443
|
-
icon?: React.ComponentType
|
|
444
|
-
defaultValues?: Record<string, unknown
|
|
445
|
-
shortcut?: KeyboardShortcut
|
|
87
|
+
type ToolbarAnnotationSchemaType = AnnotationSchemaType & {
|
|
88
|
+
icon?: React.ComponentType;
|
|
89
|
+
defaultValues?: Record<string, unknown>;
|
|
90
|
+
shortcut?: KeyboardShortcut;
|
|
446
91
|
/**
|
|
447
92
|
* The annotations this annotation cannot coexist with. The list
|
|
448
93
|
* replaces the default rule that an annotation is mutually exclusive
|
|
@@ -455,63 +100,77 @@ export declare type ToolbarAnnotationSchemaType = AnnotationSchemaType & {
|
|
|
455
100
|
* - `['other']`: exclusive with exactly the listed annotations.
|
|
456
101
|
* Include the annotation's own name to keep self-exclusivity.
|
|
457
102
|
*/
|
|
458
|
-
mutuallyExclusive?: ReadonlyArray<AnnotationDefinition['name']
|
|
459
|
-
}
|
|
460
|
-
|
|
103
|
+
mutuallyExclusive?: ReadonlyArray<AnnotationDefinition['name']>;
|
|
104
|
+
};
|
|
461
105
|
/**
|
|
462
106
|
* @beta
|
|
463
107
|
*/
|
|
464
|
-
|
|
465
|
-
icon?: React.ComponentType
|
|
466
|
-
|
|
467
|
-
shortcut?: KeyboardShortcut
|
|
468
|
-
}
|
|
469
|
-
|
|
108
|
+
type ToolbarListSchemaType = ListSchemaType & {
|
|
109
|
+
icon?: React.ComponentType;
|
|
110
|
+
};
|
|
470
111
|
/**
|
|
471
112
|
* @beta
|
|
472
113
|
*/
|
|
473
|
-
|
|
474
|
-
icon?: React.ComponentType
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
}
|
|
478
|
-
|
|
114
|
+
type ToolbarBlockObjectSchemaType = BlockObjectSchemaType & {
|
|
115
|
+
icon?: React.ComponentType;
|
|
116
|
+
defaultValues?: Record<string, unknown>;
|
|
117
|
+
shortcut?: KeyboardShortcut;
|
|
118
|
+
};
|
|
479
119
|
/**
|
|
480
120
|
* @beta
|
|
481
121
|
*/
|
|
482
|
-
|
|
483
|
-
icon?: React.ComponentType
|
|
484
|
-
defaultValues?: Record<string, unknown
|
|
485
|
-
shortcut?: KeyboardShortcut
|
|
486
|
-
}
|
|
487
|
-
|
|
122
|
+
type ToolbarInlineObjectSchemaType = InlineObjectSchemaType & {
|
|
123
|
+
icon?: React.ComponentType;
|
|
124
|
+
defaultValues?: Record<string, unknown>;
|
|
125
|
+
shortcut?: KeyboardShortcut;
|
|
126
|
+
};
|
|
488
127
|
/**
|
|
489
128
|
* @beta
|
|
490
129
|
*/
|
|
491
|
-
|
|
492
|
-
icon?: React.ComponentType
|
|
493
|
-
|
|
494
|
-
|
|
130
|
+
type ToolbarStyleSchemaType = StyleSchemaType & {
|
|
131
|
+
icon?: React.ComponentType;
|
|
132
|
+
shortcut?: KeyboardShortcut;
|
|
133
|
+
};
|
|
495
134
|
/**
|
|
496
135
|
* @beta
|
|
497
136
|
*/
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
137
|
+
type AnnotationButtonEvent = {
|
|
138
|
+
type: 'close dialog';
|
|
139
|
+
} | {
|
|
140
|
+
type: 'open dialog';
|
|
141
|
+
} | {
|
|
142
|
+
type: 'add';
|
|
143
|
+
annotation: {
|
|
144
|
+
value: Record<string, unknown>;
|
|
145
|
+
};
|
|
146
|
+
} | {
|
|
147
|
+
type: 'remove';
|
|
148
|
+
};
|
|
507
149
|
/**
|
|
508
150
|
* @beta
|
|
509
151
|
*/
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
152
|
+
type AnnotationButton = {
|
|
153
|
+
snapshot: {
|
|
154
|
+
matches: (state: 'disabled' | 'enabled' | {
|
|
155
|
+
disabled: 'inactive';
|
|
156
|
+
} | {
|
|
157
|
+
disabled: 'active';
|
|
158
|
+
} | {
|
|
159
|
+
enabled: 'inactive';
|
|
160
|
+
} | {
|
|
161
|
+
enabled: {
|
|
162
|
+
inactive: 'idle';
|
|
163
|
+
};
|
|
164
|
+
} | {
|
|
165
|
+
enabled: {
|
|
166
|
+
inactive: 'showing dialog';
|
|
167
|
+
};
|
|
168
|
+
} | {
|
|
169
|
+
enabled: 'active';
|
|
170
|
+
}) => boolean;
|
|
171
|
+
};
|
|
172
|
+
send: (event: AnnotationButtonEvent) => void;
|
|
173
|
+
};
|
|
515
174
|
/**
|
|
516
175
|
* @beta
|
|
517
176
|
* Manages the state, keyboard shortcut and available events for an annotation
|
|
@@ -520,31 +179,78 @@ export declare type ToolbarStyleSchemaType = StyleSchemaType & {
|
|
|
520
179
|
* Note: This hook assumes that the button triggers a dialog for inputting
|
|
521
180
|
* the annotation value.
|
|
522
181
|
*/
|
|
523
|
-
|
|
524
|
-
schemaType: ToolbarAnnotationSchemaType
|
|
525
|
-
}): AnnotationButton
|
|
526
|
-
|
|
182
|
+
declare function useAnnotationButton(props: {
|
|
183
|
+
schemaType: ToolbarAnnotationSchemaType;
|
|
184
|
+
}): AnnotationButton;
|
|
185
|
+
type ActiveContext$2 = {
|
|
186
|
+
annotations: Array<{
|
|
187
|
+
value: PortableTextObject;
|
|
188
|
+
schemaType: ToolbarAnnotationSchemaType;
|
|
189
|
+
at: AnnotationPath;
|
|
190
|
+
}>;
|
|
191
|
+
elementRef: RefObject<Element | null>;
|
|
192
|
+
};
|
|
193
|
+
/**
|
|
194
|
+
* @beta
|
|
195
|
+
*/
|
|
196
|
+
type AnnotationPopoverEvent = {
|
|
197
|
+
type: 'remove';
|
|
198
|
+
schemaType: AnnotationSchemaType;
|
|
199
|
+
} | {
|
|
200
|
+
type: 'edit';
|
|
201
|
+
at: AnnotationPath;
|
|
202
|
+
props: {
|
|
203
|
+
[key: string]: unknown;
|
|
204
|
+
};
|
|
205
|
+
} | {
|
|
206
|
+
type: 'close';
|
|
207
|
+
};
|
|
208
|
+
/**
|
|
209
|
+
* @beta
|
|
210
|
+
*/
|
|
211
|
+
type AnnotationPopover = {
|
|
212
|
+
snapshot: {
|
|
213
|
+
context: ActiveContext$2;
|
|
214
|
+
matches: (state: 'disabled' | 'enabled' | {
|
|
215
|
+
enabled: 'inactive' | 'active';
|
|
216
|
+
}) => boolean;
|
|
217
|
+
};
|
|
218
|
+
send: (event: AnnotationPopoverEvent) => void;
|
|
219
|
+
};
|
|
527
220
|
/**
|
|
528
221
|
* @beta
|
|
529
222
|
* Manages the state and available events for an annotation popover.
|
|
530
223
|
*/
|
|
531
|
-
|
|
532
|
-
schemaTypes: ReadonlyArray<ToolbarAnnotationSchemaType
|
|
533
|
-
}): AnnotationPopover
|
|
534
|
-
|
|
224
|
+
declare function useAnnotationPopover(props: {
|
|
225
|
+
schemaTypes: ReadonlyArray<ToolbarAnnotationSchemaType>;
|
|
226
|
+
}): AnnotationPopover;
|
|
535
227
|
/**
|
|
536
228
|
* @beta
|
|
537
|
-
*
|
|
538
|
-
* React hook that subscribes to {@link getApplicableSchema} for the active
|
|
539
|
-
* editor and returns a stable reference across editor ticks while the
|
|
540
|
-
* applicable set is unchanged.
|
|
541
|
-
*
|
|
542
|
-
* Pair with {@link useToolbarSchema} to render a static toolbar whose
|
|
543
|
-
* buttons stay stable across selection moves and gate their enabled state
|
|
544
|
-
* on whether the corresponding name is in the relevant set.
|
|
545
229
|
*/
|
|
546
|
-
|
|
547
|
-
|
|
230
|
+
type BlockObjectButtonEvent = {
|
|
231
|
+
type: 'close dialog';
|
|
232
|
+
} | {
|
|
233
|
+
type: 'open dialog';
|
|
234
|
+
} | {
|
|
235
|
+
type: 'insert';
|
|
236
|
+
value: {
|
|
237
|
+
[key: string]: unknown;
|
|
238
|
+
};
|
|
239
|
+
placement: InsertPlacement | undefined;
|
|
240
|
+
};
|
|
241
|
+
/**
|
|
242
|
+
* @beta
|
|
243
|
+
*/
|
|
244
|
+
type BlockObjectButton = {
|
|
245
|
+
snapshot: {
|
|
246
|
+
matches: (state: 'disabled' | 'enabled' | {
|
|
247
|
+
enabled: 'idle';
|
|
248
|
+
} | {
|
|
249
|
+
enabled: 'showing dialog';
|
|
250
|
+
}) => boolean;
|
|
251
|
+
};
|
|
252
|
+
send: (event: BlockObjectButtonEvent) => void;
|
|
253
|
+
};
|
|
548
254
|
/**
|
|
549
255
|
* @beta
|
|
550
256
|
* Manages the state, keyboard shortcut and available events for a block
|
|
@@ -553,32 +259,129 @@ export declare function useApplicableSchema(): ApplicableSchema
|
|
|
553
259
|
* Note: This hook assumes that the button triggers a dialog for inputting
|
|
554
260
|
* the block object value.
|
|
555
261
|
*/
|
|
556
|
-
|
|
557
|
-
schemaType: ToolbarBlockObjectSchemaType
|
|
558
|
-
}): BlockObjectButton
|
|
559
|
-
|
|
262
|
+
declare function useBlockObjectButton(props: {
|
|
263
|
+
schemaType: ToolbarBlockObjectSchemaType;
|
|
264
|
+
}): BlockObjectButton;
|
|
265
|
+
type ActiveContext$1 = {
|
|
266
|
+
blockObjects: Array<{
|
|
267
|
+
value: PortableTextObject;
|
|
268
|
+
schemaType: ToolbarBlockObjectSchemaType;
|
|
269
|
+
at: BlockPath;
|
|
270
|
+
}>;
|
|
271
|
+
elementRef: RefObject<Element | null>;
|
|
272
|
+
};
|
|
273
|
+
/**
|
|
274
|
+
* @beta
|
|
275
|
+
*/
|
|
276
|
+
type BlockObjectPopoverEvent = {
|
|
277
|
+
type: 'remove';
|
|
278
|
+
at: BlockPath;
|
|
279
|
+
} | {
|
|
280
|
+
type: 'edit';
|
|
281
|
+
at: BlockPath;
|
|
282
|
+
props: {
|
|
283
|
+
[key: string]: unknown;
|
|
284
|
+
};
|
|
285
|
+
} | {
|
|
286
|
+
type: 'close';
|
|
287
|
+
};
|
|
288
|
+
/**
|
|
289
|
+
* @beta
|
|
290
|
+
*/
|
|
291
|
+
type BlockObjectPopover = {
|
|
292
|
+
snapshot: {
|
|
293
|
+
context: ActiveContext$1;
|
|
294
|
+
matches: (state: 'disabled' | 'enabled' | {
|
|
295
|
+
enabled: 'inactive' | 'active';
|
|
296
|
+
}) => boolean;
|
|
297
|
+
};
|
|
298
|
+
send: (event: BlockObjectPopoverEvent) => void;
|
|
299
|
+
};
|
|
560
300
|
/**
|
|
561
301
|
* @beta
|
|
562
302
|
* Manages the state and available events for a block object popover.
|
|
563
303
|
*/
|
|
564
|
-
|
|
565
|
-
schemaTypes: ReadonlyArray<ToolbarBlockObjectSchemaType
|
|
566
|
-
}): BlockObjectPopover
|
|
567
|
-
|
|
304
|
+
declare function useBlockObjectPopover(props: {
|
|
305
|
+
schemaTypes: ReadonlyArray<ToolbarBlockObjectSchemaType>;
|
|
306
|
+
}): BlockObjectPopover;
|
|
307
|
+
/**
|
|
308
|
+
* @beta
|
|
309
|
+
*/
|
|
310
|
+
type DecoratorButtonEvent = {
|
|
311
|
+
type: 'toggle';
|
|
312
|
+
};
|
|
313
|
+
/**
|
|
314
|
+
* @beta
|
|
315
|
+
*/
|
|
316
|
+
type DecoratorButton = {
|
|
317
|
+
snapshot: {
|
|
318
|
+
matches: (state: 'disabled' | 'enabled' | {
|
|
319
|
+
disabled: 'inactive';
|
|
320
|
+
} | {
|
|
321
|
+
disabled: 'active';
|
|
322
|
+
} | {
|
|
323
|
+
enabled: 'inactive';
|
|
324
|
+
} | {
|
|
325
|
+
enabled: 'active';
|
|
326
|
+
}) => boolean;
|
|
327
|
+
};
|
|
328
|
+
send: (event: DecoratorButtonEvent) => void;
|
|
329
|
+
};
|
|
568
330
|
/**
|
|
569
331
|
* @beta
|
|
570
332
|
* Manages the state, keyboard shortcuts and available events for a decorator
|
|
571
333
|
* button and sets up mutually exclusive decorator behaviors.
|
|
572
334
|
*/
|
|
573
|
-
|
|
574
|
-
schemaType: ToolbarDecoratorSchemaType
|
|
575
|
-
}): DecoratorButton
|
|
576
|
-
|
|
335
|
+
declare function useDecoratorButton(props: {
|
|
336
|
+
schemaType: ToolbarDecoratorSchemaType;
|
|
337
|
+
}): DecoratorButton;
|
|
338
|
+
/**
|
|
339
|
+
* @beta
|
|
340
|
+
*/
|
|
341
|
+
type HistoryButtonsEvent = {
|
|
342
|
+
type: 'history.undo';
|
|
343
|
+
} | {
|
|
344
|
+
type: 'history.redo';
|
|
345
|
+
};
|
|
577
346
|
/**
|
|
578
347
|
* @beta
|
|
579
348
|
*/
|
|
580
|
-
|
|
581
|
-
|
|
349
|
+
type HistoryButtons = {
|
|
350
|
+
snapshot: {
|
|
351
|
+
matches: (state: 'disabled' | 'enabled') => boolean;
|
|
352
|
+
};
|
|
353
|
+
send: (event: HistoryButtonsEvent) => void;
|
|
354
|
+
};
|
|
355
|
+
/**
|
|
356
|
+
* @beta
|
|
357
|
+
*/
|
|
358
|
+
declare function useHistoryButtons(): HistoryButtons;
|
|
359
|
+
/**
|
|
360
|
+
* @beta
|
|
361
|
+
*/
|
|
362
|
+
type InlineObjectButtonEvent = {
|
|
363
|
+
type: 'close dialog';
|
|
364
|
+
} | {
|
|
365
|
+
type: 'open dialog';
|
|
366
|
+
} | {
|
|
367
|
+
type: 'insert';
|
|
368
|
+
value: {
|
|
369
|
+
[key: string]: unknown;
|
|
370
|
+
};
|
|
371
|
+
};
|
|
372
|
+
/**
|
|
373
|
+
* @beta
|
|
374
|
+
*/
|
|
375
|
+
type InlineObjectButton = {
|
|
376
|
+
snapshot: {
|
|
377
|
+
matches: (state: 'disabled' | 'enabled' | {
|
|
378
|
+
enabled: 'idle';
|
|
379
|
+
} | {
|
|
380
|
+
enabled: 'showing dialog';
|
|
381
|
+
}) => boolean;
|
|
382
|
+
};
|
|
383
|
+
send: (event: InlineObjectButtonEvent) => void;
|
|
384
|
+
};
|
|
582
385
|
/**
|
|
583
386
|
* @beta
|
|
584
387
|
* Manages the state, keyboard shortcut and available events for an inline
|
|
@@ -587,57 +390,107 @@ export declare function useHistoryButtons(): HistoryButtons
|
|
|
587
390
|
* Note: This hook assumes that the button triggers a dialog for inputting
|
|
588
391
|
* the inline object value.
|
|
589
392
|
*/
|
|
590
|
-
|
|
591
|
-
schemaType: ToolbarInlineObjectSchemaType
|
|
592
|
-
}): InlineObjectButton
|
|
593
|
-
|
|
393
|
+
declare function useInlineObjectButton(props: {
|
|
394
|
+
schemaType: ToolbarInlineObjectSchemaType;
|
|
395
|
+
}): InlineObjectButton;
|
|
396
|
+
type ActiveContext = {
|
|
397
|
+
inlineObjects: Array<{
|
|
398
|
+
value: PortableTextObject;
|
|
399
|
+
schemaType: ToolbarInlineObjectSchemaType;
|
|
400
|
+
at: ChildPath;
|
|
401
|
+
}>;
|
|
402
|
+
elementRef: RefObject<Element | null>;
|
|
403
|
+
};
|
|
404
|
+
/**
|
|
405
|
+
* @beta
|
|
406
|
+
*/
|
|
407
|
+
type InlineObjectPopoverEvent = {
|
|
408
|
+
type: 'remove';
|
|
409
|
+
at: ChildPath;
|
|
410
|
+
} | {
|
|
411
|
+
type: 'edit';
|
|
412
|
+
at: ChildPath;
|
|
413
|
+
props: {
|
|
414
|
+
[key: string]: unknown;
|
|
415
|
+
};
|
|
416
|
+
} | {
|
|
417
|
+
type: 'close';
|
|
418
|
+
};
|
|
419
|
+
/**
|
|
420
|
+
* @beta
|
|
421
|
+
*/
|
|
422
|
+
type InlineObjectPopover = {
|
|
423
|
+
snapshot: {
|
|
424
|
+
context: ActiveContext;
|
|
425
|
+
matches: (state: 'disabled' | 'enabled' | {
|
|
426
|
+
enabled: 'inactive' | 'active';
|
|
427
|
+
}) => boolean;
|
|
428
|
+
};
|
|
429
|
+
send: (event: InlineObjectPopoverEvent) => void;
|
|
430
|
+
};
|
|
594
431
|
/**
|
|
595
432
|
* @beta
|
|
596
433
|
* Manages the state and available events for an inline object popover.
|
|
597
434
|
*/
|
|
598
|
-
|
|
599
|
-
schemaTypes: ReadonlyArray<ToolbarInlineObjectSchemaType
|
|
600
|
-
}): InlineObjectPopover
|
|
601
|
-
|
|
435
|
+
declare function useInlineObjectPopover(props: {
|
|
436
|
+
schemaTypes: ReadonlyArray<ToolbarInlineObjectSchemaType>;
|
|
437
|
+
}): InlineObjectPopover;
|
|
438
|
+
/**
|
|
439
|
+
* @beta
|
|
440
|
+
*/
|
|
441
|
+
type ListButtonEvent = {
|
|
442
|
+
type: 'toggle';
|
|
443
|
+
};
|
|
444
|
+
/**
|
|
445
|
+
* @beta
|
|
446
|
+
*/
|
|
447
|
+
type ListButton = {
|
|
448
|
+
snapshot: {
|
|
449
|
+
matches: (state: 'disabled' | 'enabled' | {
|
|
450
|
+
disabled: 'inactive';
|
|
451
|
+
} | {
|
|
452
|
+
disabled: 'active';
|
|
453
|
+
} | {
|
|
454
|
+
enabled: 'inactive';
|
|
455
|
+
} | {
|
|
456
|
+
enabled: 'active';
|
|
457
|
+
}) => boolean;
|
|
458
|
+
};
|
|
459
|
+
send: (event: ListButtonEvent) => void;
|
|
460
|
+
};
|
|
602
461
|
/**
|
|
603
462
|
* @beta
|
|
604
463
|
* Manages the state, keyboard shortcuts and available events for a list button.
|
|
605
464
|
*/
|
|
606
|
-
|
|
607
|
-
schemaType: ToolbarListSchemaType
|
|
608
|
-
}): ListButton
|
|
609
|
-
|
|
465
|
+
declare function useListButton(props: {
|
|
466
|
+
schemaType: ToolbarListSchemaType;
|
|
467
|
+
}): ListButton;
|
|
610
468
|
/**
|
|
611
469
|
* @beta
|
|
612
|
-
* Manages the state, keyboard shortcuts and available events for a style
|
|
613
|
-
* selector.
|
|
614
470
|
*/
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
471
|
+
type StyleSelectorEvent = {
|
|
472
|
+
type: 'toggle';
|
|
473
|
+
style: StyleSchemaType['name'];
|
|
474
|
+
};
|
|
619
475
|
/**
|
|
620
476
|
* @beta
|
|
621
|
-
*
|
|
622
|
-
* Resolve the editor's full toolbar schema. Returns the union of every
|
|
623
|
-
* decorator, annotation, list, style, block object and inline object declared
|
|
624
|
-
* anywhere in the editor's schema graph that is reachable from a position
|
|
625
|
-
* where text is edited - the root schema merged with the sub-schema of every
|
|
626
|
-
* registered container whose field accepts text blocks. Useful for rendering
|
|
627
|
-
* a static toolbar whose buttons stay stable across selection moves.
|
|
628
|
-
*
|
|
629
|
-
* Re-renders only when the schema graph or the extension callbacks change.
|
|
630
|
-
* Pair with {@link useApplicableSchema} to determine which entries are
|
|
631
|
-
* applicable at the current selection (which buttons should be enabled vs.
|
|
632
|
-
* disabled).
|
|
633
477
|
*/
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
478
|
+
type StyleSelector = {
|
|
479
|
+
snapshot: {
|
|
480
|
+
matches: (state: 'disabled' | 'enabled') => boolean;
|
|
481
|
+
context: {
|
|
482
|
+
activeStyle: StyleSchemaType['name'] | undefined;
|
|
483
|
+
};
|
|
484
|
+
};
|
|
485
|
+
send: (event: StyleSelectorEvent) => void;
|
|
486
|
+
};
|
|
487
|
+
/**
|
|
488
|
+
* @beta
|
|
489
|
+
* Manages the state, keyboard shortcuts and available events for a style
|
|
490
|
+
* selector.
|
|
491
|
+
*/
|
|
492
|
+
declare function useStyleSelector(props: {
|
|
493
|
+
schemaTypes: ReadonlyArray<ToolbarStyleSchemaType>;
|
|
494
|
+
}): StyleSelector;
|
|
495
|
+
export { AnnotationButton, AnnotationButtonEvent, AnnotationPopover, AnnotationPopoverEvent, type ApplicableSchema, BlockObjectButton, BlockObjectButtonEvent, BlockObjectPopover, BlockObjectPopoverEvent, DecoratorButton, DecoratorButtonEvent, ExtendAnnotationSchemaType, ExtendBlockObjectSchemaType, ExtendDecoratorSchemaType, ExtendInlineObjectSchemaType, ExtendListSchemaType, ExtendStyleSchemaType, HistoryButtons, HistoryButtonsEvent, InlineObjectButton, InlineObjectButtonEvent, InlineObjectPopover, InlineObjectPopoverEvent, ListButton, ListButtonEvent, StyleSelector, StyleSelectorEvent, ToolbarAnnotationSchemaType, ToolbarBlockObjectSchemaType, ToolbarDecoratorSchemaType, ToolbarInlineObjectSchemaType, ToolbarListSchemaType, ToolbarSchema, ToolbarStyleSchemaType, useAnnotationButton, useAnnotationPopover, useApplicableSchema, useBlockObjectButton, useBlockObjectPopover, useDecoratorButton, useHistoryButtons, useInlineObjectButton, useInlineObjectPopover, useListButton, useStyleSelector, useToolbarSchema };
|
|
496
|
+
//# sourceMappingURL=index.d.ts.map
|