@portabletext/editor 3.3.14 → 3.3.16
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/lib/_chunks-dts/behavior.types.action.d.ts +2069 -0
- package/lib/behaviors/index.d.ts +2 -2
- package/lib/index.d.ts +1 -1
- package/lib/plugins/index.d.ts +1 -1
- package/lib/selectors/index.d.ts +1 -1
- package/lib/utils/index.d.ts +3 -3
- package/package.json +6 -6
- package/lib/_chunks-dts/index.d.ts +0 -3520
|
@@ -0,0 +1,2069 @@
|
|
|
1
|
+
import * as _portabletext_schema6 from "@portabletext/schema";
|
|
2
|
+
import { AnnotationDefinition, AnnotationSchemaType, BaseDefinition, BlockObjectDefinition, BlockObjectSchemaType, DecoratorDefinition, DecoratorSchemaType, FieldDefinition, InlineObjectDefinition, InlineObjectSchemaType, ListDefinition, ListSchemaType, PortableTextBlock, PortableTextBlock as PortableTextBlock$1, PortableTextChild, PortableTextChild as PortableTextChild$1, PortableTextListBlock, PortableTextObject, PortableTextObject as PortableTextObject$1, PortableTextSpan, PortableTextSpan as PortableTextSpan$1, PortableTextTextBlock, PortableTextTextBlock as PortableTextTextBlock$1, Schema, SchemaDefinition, SchemaDefinition as SchemaDefinition$1, StyleDefinition, StyleSchemaType, TypedObject, defineSchema } from "@portabletext/schema";
|
|
3
|
+
import { BaseRange, Descendant, Operation, Range } from "slate";
|
|
4
|
+
import * as xstate72 from "xstate";
|
|
5
|
+
import { ActorRef, ActorRefFrom, EventObject, Snapshot } from "xstate";
|
|
6
|
+
import * as react10 from "react";
|
|
7
|
+
import React$1, { BaseSyntheticEvent, ClipboardEvent, Component, FocusEvent, JSX, KeyboardEvent as KeyboardEvent$1, MutableRefObject, PropsWithChildren, ReactElement, RefObject, TextareaHTMLAttributes } from "react";
|
|
8
|
+
import { Patch, Patch as Patch$1 } from "@portabletext/patches";
|
|
9
|
+
import { Observable, Subject } from "rxjs";
|
|
10
|
+
import { ArrayDefinition, ArraySchemaType, BlockDecoratorDefinition, BlockListDefinition, BlockStyleDefinition, ObjectSchemaType } from "@sanity/types";
|
|
11
|
+
import { ReactEditor } from "slate-react";
|
|
12
|
+
type MIMEType = `${string}/${string}`;
|
|
13
|
+
/**
|
|
14
|
+
* @internal
|
|
15
|
+
*/
|
|
16
|
+
type PickFromUnion<TUnion, TTagKey extends keyof TUnion, TPickedTags extends TUnion[TTagKey]> = TUnion extends Record<TTagKey, TPickedTags> ? TUnion : never;
|
|
17
|
+
type NamespaceEvent<TEvent, TNamespace$1 extends string> = TEvent extends {
|
|
18
|
+
type: infer TEventType;
|
|
19
|
+
} ? { [K in keyof TEvent]: K extends 'type' ? `${TNamespace$1}.${TEventType & string}` : TEvent[K] } : never;
|
|
20
|
+
type StrictExtract<T, U extends T> = U;
|
|
21
|
+
type Converter<TMIMEType extends MIMEType = MIMEType> = {
|
|
22
|
+
mimeType: TMIMEType;
|
|
23
|
+
serialize: Serializer<TMIMEType>;
|
|
24
|
+
deserialize: Deserializer<TMIMEType>;
|
|
25
|
+
};
|
|
26
|
+
type ConverterEvent<TMIMEType extends MIMEType = MIMEType> = {
|
|
27
|
+
type: 'serialize';
|
|
28
|
+
originEvent: 'clipboard.copy' | 'clipboard.cut' | 'drag.dragstart';
|
|
29
|
+
} | {
|
|
30
|
+
type: 'serialization.failure';
|
|
31
|
+
mimeType: TMIMEType;
|
|
32
|
+
originEvent: 'clipboard.copy' | 'clipboard.cut' | 'drag.dragstart';
|
|
33
|
+
reason: string;
|
|
34
|
+
} | {
|
|
35
|
+
type: 'serialization.success';
|
|
36
|
+
data: string;
|
|
37
|
+
mimeType: TMIMEType;
|
|
38
|
+
originEvent: 'clipboard.copy' | 'clipboard.cut' | 'drag.dragstart';
|
|
39
|
+
} | {
|
|
40
|
+
type: 'deserialize';
|
|
41
|
+
data: string;
|
|
42
|
+
} | {
|
|
43
|
+
type: 'deserialization.failure';
|
|
44
|
+
mimeType: TMIMEType;
|
|
45
|
+
reason: string;
|
|
46
|
+
} | {
|
|
47
|
+
type: 'deserialization.success';
|
|
48
|
+
data: Array<PortableTextBlock>;
|
|
49
|
+
mimeType: TMIMEType;
|
|
50
|
+
};
|
|
51
|
+
type Serializer<TMIMEType extends MIMEType> = ({
|
|
52
|
+
snapshot,
|
|
53
|
+
event
|
|
54
|
+
}: {
|
|
55
|
+
snapshot: EditorSnapshot;
|
|
56
|
+
event: PickFromUnion<ConverterEvent<TMIMEType>, 'type', 'serialize'>;
|
|
57
|
+
}) => PickFromUnion<ConverterEvent<TMIMEType>, 'type', 'serialization.success' | 'serialization.failure'>;
|
|
58
|
+
type Deserializer<TMIMEType extends MIMEType> = ({
|
|
59
|
+
snapshot,
|
|
60
|
+
event
|
|
61
|
+
}: {
|
|
62
|
+
snapshot: EditorSnapshot;
|
|
63
|
+
event: PickFromUnion<ConverterEvent<TMIMEType>, 'type', 'deserialize'>;
|
|
64
|
+
}) => PickFromUnion<ConverterEvent<TMIMEType>, 'type', 'deserialization.success' | 'deserialization.failure'>;
|
|
65
|
+
/**
|
|
66
|
+
* A segment in a path that identifies an element by its `_key` property.
|
|
67
|
+
* @public
|
|
68
|
+
*/
|
|
69
|
+
interface KeyedSegment {
|
|
70
|
+
_key: string;
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* A tuple representing a range selection, e.g., `[0, 5]` or `['', 3]`.
|
|
74
|
+
* @public
|
|
75
|
+
*/
|
|
76
|
+
type IndexTuple = [number | '', number | ''];
|
|
77
|
+
/**
|
|
78
|
+
* A single segment in a path. Can be:
|
|
79
|
+
* - A string (property name)
|
|
80
|
+
* - A number (array index)
|
|
81
|
+
* - A KeyedSegment (object with `_key`)
|
|
82
|
+
* - An IndexTuple (range selection)
|
|
83
|
+
* @public
|
|
84
|
+
*/
|
|
85
|
+
type PathSegment = string | number | KeyedSegment | IndexTuple;
|
|
86
|
+
/**
|
|
87
|
+
* A path is an array of path segments that describes a location in a document.
|
|
88
|
+
* @public
|
|
89
|
+
*/
|
|
90
|
+
type Path = PathSegment[];
|
|
91
|
+
/**
|
|
92
|
+
* @public
|
|
93
|
+
*/
|
|
94
|
+
type BlockPath = [{
|
|
95
|
+
_key: string;
|
|
96
|
+
}];
|
|
97
|
+
/**
|
|
98
|
+
* @public
|
|
99
|
+
*/
|
|
100
|
+
type AnnotationPath = [{
|
|
101
|
+
_key: string;
|
|
102
|
+
}, 'markDefs', {
|
|
103
|
+
_key: string;
|
|
104
|
+
}];
|
|
105
|
+
/**
|
|
106
|
+
* @public
|
|
107
|
+
*/
|
|
108
|
+
type ChildPath = [{
|
|
109
|
+
_key: string;
|
|
110
|
+
}, 'children', {
|
|
111
|
+
_key: string;
|
|
112
|
+
}];
|
|
113
|
+
/**
|
|
114
|
+
* @public
|
|
115
|
+
*/
|
|
116
|
+
type EditorSchema = Schema;
|
|
117
|
+
type DecoratedRange = BaseRange & {
|
|
118
|
+
rangeDecoration: RangeDecoration;
|
|
119
|
+
};
|
|
120
|
+
type HistoryItem = {
|
|
121
|
+
operations: Operation[];
|
|
122
|
+
timestamp: Date;
|
|
123
|
+
};
|
|
124
|
+
interface History {
|
|
125
|
+
redos: HistoryItem[];
|
|
126
|
+
undos: HistoryItem[];
|
|
127
|
+
}
|
|
128
|
+
type RemotePatch = {
|
|
129
|
+
patch: Patch;
|
|
130
|
+
time: Date;
|
|
131
|
+
snapshot: PortableTextBlock[] | undefined;
|
|
132
|
+
previousSnapshot: PortableTextBlock[] | undefined;
|
|
133
|
+
};
|
|
134
|
+
interface PortableTextSlateEditor extends ReactEditor {
|
|
135
|
+
_key: 'editor';
|
|
136
|
+
_type: 'editor';
|
|
137
|
+
createPlaceholderBlock: () => Descendant;
|
|
138
|
+
isTextBlock: (value: unknown) => value is PortableTextTextBlock;
|
|
139
|
+
isTextSpan: (value: unknown) => value is PortableTextSpan;
|
|
140
|
+
isListBlock: (value: unknown) => value is PortableTextListBlock;
|
|
141
|
+
decoratedRanges: Array<DecoratedRange>;
|
|
142
|
+
decoratorState: Record<string, boolean | undefined>;
|
|
143
|
+
blockIndexMap: Map<string, number>;
|
|
144
|
+
history: History;
|
|
145
|
+
lastSelection: EditorSelection;
|
|
146
|
+
lastSlateSelection: Range | null;
|
|
147
|
+
listIndexMap: Map<string, number>;
|
|
148
|
+
remotePatches: Array<RemotePatch>;
|
|
149
|
+
undoStepId: string | undefined;
|
|
150
|
+
value: Array<PortableTextBlock>;
|
|
151
|
+
isNormalizingNode: boolean;
|
|
152
|
+
isPatching: boolean;
|
|
153
|
+
isPerformingBehaviorOperation: boolean;
|
|
154
|
+
isProcessingRemoteChanges: boolean;
|
|
155
|
+
isRedoing: boolean;
|
|
156
|
+
isUndoing: boolean;
|
|
157
|
+
withHistory: boolean;
|
|
158
|
+
/**
|
|
159
|
+
* Use hotkeys
|
|
160
|
+
*/
|
|
161
|
+
pteWithHotKeys: (event: KeyboardEvent$1<HTMLDivElement>) => void;
|
|
162
|
+
/**
|
|
163
|
+
* Undo
|
|
164
|
+
*/
|
|
165
|
+
undo: () => void;
|
|
166
|
+
/**
|
|
167
|
+
* Redo
|
|
168
|
+
*/
|
|
169
|
+
redo: () => void;
|
|
170
|
+
}
|
|
171
|
+
/**
|
|
172
|
+
* @public
|
|
173
|
+
*/
|
|
174
|
+
type EditorEmittedEvent = {
|
|
175
|
+
type: 'blurred';
|
|
176
|
+
event: FocusEvent<HTMLDivElement, Element>;
|
|
177
|
+
} | {
|
|
178
|
+
/**
|
|
179
|
+
* @deprecated Will be removed in the next major version
|
|
180
|
+
*/
|
|
181
|
+
type: 'done loading';
|
|
182
|
+
} | {
|
|
183
|
+
type: 'editable';
|
|
184
|
+
} | ErrorEvent | {
|
|
185
|
+
type: 'focused';
|
|
186
|
+
event: FocusEvent<HTMLDivElement, Element>;
|
|
187
|
+
} | {
|
|
188
|
+
type: 'invalid value';
|
|
189
|
+
resolution: InvalidValueResolution | null;
|
|
190
|
+
value: Array<PortableTextBlock> | undefined;
|
|
191
|
+
} | {
|
|
192
|
+
/**
|
|
193
|
+
* @deprecated Will be removed in the next major version
|
|
194
|
+
*/
|
|
195
|
+
type: 'loading';
|
|
196
|
+
} | MutationEvent | PatchEvent | {
|
|
197
|
+
type: 'read only';
|
|
198
|
+
} | {
|
|
199
|
+
type: 'ready';
|
|
200
|
+
} | {
|
|
201
|
+
type: 'selection';
|
|
202
|
+
selection: EditorSelection;
|
|
203
|
+
} | {
|
|
204
|
+
type: 'value changed';
|
|
205
|
+
value: Array<PortableTextBlock> | undefined;
|
|
206
|
+
};
|
|
207
|
+
/**
|
|
208
|
+
* @deprecated The event is no longer emitted
|
|
209
|
+
*/
|
|
210
|
+
type ErrorEvent = {
|
|
211
|
+
type: 'error';
|
|
212
|
+
name: string;
|
|
213
|
+
description: string;
|
|
214
|
+
data: unknown;
|
|
215
|
+
};
|
|
216
|
+
/**
|
|
217
|
+
* @public
|
|
218
|
+
*/
|
|
219
|
+
type MutationEvent = {
|
|
220
|
+
type: 'mutation';
|
|
221
|
+
patches: Array<Patch>;
|
|
222
|
+
value: Array<PortableTextBlock> | undefined;
|
|
223
|
+
};
|
|
224
|
+
type PatchEvent = {
|
|
225
|
+
type: 'patch';
|
|
226
|
+
patch: Patch;
|
|
227
|
+
};
|
|
228
|
+
type SlateEditor = {
|
|
229
|
+
instance: PortableTextSlateEditor;
|
|
230
|
+
initialValue: Array<Descendant>;
|
|
231
|
+
};
|
|
232
|
+
type InternalEditor = Editor & {
|
|
233
|
+
_internal: {
|
|
234
|
+
editable: EditableAPI;
|
|
235
|
+
editorActor: EditorActor;
|
|
236
|
+
slateEditor: SlateEditor;
|
|
237
|
+
};
|
|
238
|
+
};
|
|
239
|
+
/**
|
|
240
|
+
* Props for the PortableTextEditor component
|
|
241
|
+
*
|
|
242
|
+
* @public
|
|
243
|
+
* @deprecated Use `EditorProvider` instead
|
|
244
|
+
*/
|
|
245
|
+
type PortableTextEditorProps<TEditor extends InternalEditor | undefined = undefined> = PropsWithChildren<TEditor extends InternalEditor ? {
|
|
246
|
+
/**
|
|
247
|
+
* @internal
|
|
248
|
+
*/
|
|
249
|
+
editor: TEditor;
|
|
250
|
+
} : {
|
|
251
|
+
editor?: undefined;
|
|
252
|
+
/**
|
|
253
|
+
* Function that gets called when the editor changes the value
|
|
254
|
+
*/
|
|
255
|
+
onChange: (change: EditorChange) => void;
|
|
256
|
+
/**
|
|
257
|
+
* Schema type for the portable text field
|
|
258
|
+
*/
|
|
259
|
+
schemaType: ArraySchemaType<PortableTextBlock> | ArrayDefinition;
|
|
260
|
+
/**
|
|
261
|
+
* Function used to generate keys for array items (`_key`)
|
|
262
|
+
*/
|
|
263
|
+
keyGenerator?: () => string;
|
|
264
|
+
/**
|
|
265
|
+
* Observable of local and remote patches for the edited value.
|
|
266
|
+
*/
|
|
267
|
+
patches$?: PatchObservable;
|
|
268
|
+
/**
|
|
269
|
+
* Backward compatibility (renamed to patches$).
|
|
270
|
+
*/
|
|
271
|
+
incomingPatches$?: PatchObservable;
|
|
272
|
+
/**
|
|
273
|
+
* Whether or not the editor should be in read-only mode
|
|
274
|
+
*/
|
|
275
|
+
readOnly?: boolean;
|
|
276
|
+
/**
|
|
277
|
+
* The current value of the portable text field
|
|
278
|
+
*/
|
|
279
|
+
value?: PortableTextBlock[];
|
|
280
|
+
/**
|
|
281
|
+
* A ref to the editor instance
|
|
282
|
+
*/
|
|
283
|
+
editorRef?: MutableRefObject<PortableTextEditor | null>;
|
|
284
|
+
}>;
|
|
285
|
+
/**
|
|
286
|
+
* The main Portable Text Editor component.
|
|
287
|
+
* @public
|
|
288
|
+
* @deprecated Use `EditorProvider` instead
|
|
289
|
+
*/
|
|
290
|
+
declare class PortableTextEditor extends Component<PortableTextEditorProps<InternalEditor | undefined>> {
|
|
291
|
+
static displayName: string;
|
|
292
|
+
/**
|
|
293
|
+
* An observable of all the editor changes.
|
|
294
|
+
*/
|
|
295
|
+
change$: EditorChanges;
|
|
296
|
+
/**
|
|
297
|
+
* A lookup table for all the relevant schema types for this portable text type.
|
|
298
|
+
*/
|
|
299
|
+
schemaTypes: PortableTextMemberSchemaTypes;
|
|
300
|
+
/**
|
|
301
|
+
* The editor instance
|
|
302
|
+
*/
|
|
303
|
+
private editor;
|
|
304
|
+
private editable;
|
|
305
|
+
private actors?;
|
|
306
|
+
private subscriptions;
|
|
307
|
+
private unsubscribers;
|
|
308
|
+
constructor(props: PortableTextEditorProps);
|
|
309
|
+
componentDidMount(): void;
|
|
310
|
+
componentDidUpdate(prevProps: PortableTextEditorProps): void;
|
|
311
|
+
componentWillUnmount(): void;
|
|
312
|
+
setEditable: (editable: EditableAPI) => void;
|
|
313
|
+
render(): react10.JSX.Element;
|
|
314
|
+
/**
|
|
315
|
+
* @deprecated
|
|
316
|
+
* Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
|
|
317
|
+
*
|
|
318
|
+
* ```
|
|
319
|
+
* import * as selectors from '@portabletext/editor/selectors'
|
|
320
|
+
* const editor = useEditor()
|
|
321
|
+
* const isActive = useEditorSelector(editor, selectors.getActiveAnnotations)
|
|
322
|
+
* ```
|
|
323
|
+
*/
|
|
324
|
+
static activeAnnotations: (editor: PortableTextEditor) => PortableTextObject[];
|
|
325
|
+
/**
|
|
326
|
+
* @deprecated
|
|
327
|
+
* Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
|
|
328
|
+
*
|
|
329
|
+
* ```
|
|
330
|
+
* import * as selectors from '@portabletext/editor/selectors'
|
|
331
|
+
* const editor = useEditor()
|
|
332
|
+
* const isActive = useEditorSelector(editor, selectors.isActiveAnnotation(...))
|
|
333
|
+
* ```
|
|
334
|
+
*/
|
|
335
|
+
static isAnnotationActive: (editor: PortableTextEditor, annotationType: PortableTextObject["_type"]) => boolean;
|
|
336
|
+
/**
|
|
337
|
+
* @deprecated
|
|
338
|
+
* Use `editor.send(...)` instead
|
|
339
|
+
*
|
|
340
|
+
* ```
|
|
341
|
+
* const editor = useEditor()
|
|
342
|
+
* editor.send({
|
|
343
|
+
* type: 'annotation.add',
|
|
344
|
+
* annotation: {
|
|
345
|
+
* name: '...',
|
|
346
|
+
* value: {...},
|
|
347
|
+
* }
|
|
348
|
+
* })
|
|
349
|
+
* ```
|
|
350
|
+
*/
|
|
351
|
+
static addAnnotation: <TSchemaType extends {
|
|
352
|
+
name: string;
|
|
353
|
+
}>(editor: PortableTextEditor, type: TSchemaType, value?: {
|
|
354
|
+
[prop: string]: unknown;
|
|
355
|
+
}) => AddedAnnotationPaths | undefined;
|
|
356
|
+
/**
|
|
357
|
+
* @deprecated
|
|
358
|
+
* Use `editor.send(...)` instead
|
|
359
|
+
*
|
|
360
|
+
* ```
|
|
361
|
+
* const editor = useEditor()
|
|
362
|
+
* editor.send({
|
|
363
|
+
* type: 'blur',
|
|
364
|
+
* })
|
|
365
|
+
* ```
|
|
366
|
+
*/
|
|
367
|
+
static blur: (editor: PortableTextEditor) => void;
|
|
368
|
+
/**
|
|
369
|
+
* @deprecated
|
|
370
|
+
* Use `editor.send(...)` instead
|
|
371
|
+
*
|
|
372
|
+
* ```
|
|
373
|
+
* const editor = useEditor()
|
|
374
|
+
* editor.send({
|
|
375
|
+
* type: 'delete',
|
|
376
|
+
* at: {...},
|
|
377
|
+
* direction: '...',
|
|
378
|
+
* unit: '...',
|
|
379
|
+
* })
|
|
380
|
+
* ```
|
|
381
|
+
*/
|
|
382
|
+
static delete: (editor: PortableTextEditor, selection: EditorSelection, options?: EditableAPIDeleteOptions) => void;
|
|
383
|
+
static findDOMNode: (editor: PortableTextEditor, element: PortableTextBlock | PortableTextChild) => Node | undefined;
|
|
384
|
+
static findByPath: (editor: PortableTextEditor, path: Path) => [_portabletext_schema6.PortableTextTextBlock<PortableTextObject | _portabletext_schema6.PortableTextSpan> | PortableTextObject | _portabletext_schema6.PortableTextSpan | undefined, Path | undefined];
|
|
385
|
+
/**
|
|
386
|
+
* @deprecated
|
|
387
|
+
* Use `editor.send(...)` instead
|
|
388
|
+
*
|
|
389
|
+
* ```
|
|
390
|
+
* const editor = useEditor()
|
|
391
|
+
* editor.send({
|
|
392
|
+
* type: 'focus',
|
|
393
|
+
* })
|
|
394
|
+
* ```
|
|
395
|
+
*/
|
|
396
|
+
static focus: (editor: PortableTextEditor) => void;
|
|
397
|
+
/**
|
|
398
|
+
* @deprecated
|
|
399
|
+
* Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
|
|
400
|
+
*
|
|
401
|
+
* ```
|
|
402
|
+
* import * as selectors from '@portabletext/editor/selectors'
|
|
403
|
+
* const editor = useEditor()
|
|
404
|
+
* const focusBlock = useEditorSelector(editor, selectors.getFocusBlock)
|
|
405
|
+
* ```
|
|
406
|
+
*/
|
|
407
|
+
static focusBlock: (editor: PortableTextEditor) => PortableTextBlock | undefined;
|
|
408
|
+
/**
|
|
409
|
+
* @deprecated
|
|
410
|
+
* Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
|
|
411
|
+
*
|
|
412
|
+
* ```
|
|
413
|
+
* import * as selectors from '@portabletext/editor/selectors'
|
|
414
|
+
* const editor = useEditor()
|
|
415
|
+
* const focusChild = useEditorSelector(editor, selectors.getFocusChild)
|
|
416
|
+
* ```
|
|
417
|
+
*/
|
|
418
|
+
static focusChild: (editor: PortableTextEditor) => PortableTextChild | undefined;
|
|
419
|
+
/**
|
|
420
|
+
* @deprecated
|
|
421
|
+
* Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
|
|
422
|
+
*
|
|
423
|
+
* ```
|
|
424
|
+
* import * as selectors from '@portabletext/editor/selectors'
|
|
425
|
+
* const editor = useEditor()
|
|
426
|
+
* const selection = useEditorSelector(editor, selectors.getSelection)
|
|
427
|
+
* ```
|
|
428
|
+
*/
|
|
429
|
+
static getSelection: (editor: PortableTextEditor) => EditorSelection;
|
|
430
|
+
/**
|
|
431
|
+
* @deprecated
|
|
432
|
+
* Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
|
|
433
|
+
*
|
|
434
|
+
* ```
|
|
435
|
+
* import * as selectors from '@portabletext/editor/selectors'
|
|
436
|
+
* const editor = useEditor()
|
|
437
|
+
* const value = useEditorSelector(editor, selectors.getValue)
|
|
438
|
+
* ```
|
|
439
|
+
*/
|
|
440
|
+
static getValue: (editor: PortableTextEditor) => PortableTextBlock[] | undefined;
|
|
441
|
+
/**
|
|
442
|
+
* @deprecated
|
|
443
|
+
* Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
|
|
444
|
+
*
|
|
445
|
+
* ```
|
|
446
|
+
* import * as selectors from '@portabletext/editor/selectors'
|
|
447
|
+
* const editor = useEditor()
|
|
448
|
+
* const isActive = useEditorSelector(editor, selectors.isActiveStyle(...))
|
|
449
|
+
* ```
|
|
450
|
+
*/
|
|
451
|
+
static hasBlockStyle: (editor: PortableTextEditor, blockStyle: string) => boolean;
|
|
452
|
+
/**
|
|
453
|
+
* @deprecated
|
|
454
|
+
* Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
|
|
455
|
+
*
|
|
456
|
+
* ```
|
|
457
|
+
* import * as selectors from '@portabletext/editor/selectors'
|
|
458
|
+
* const editor = useEditor()
|
|
459
|
+
* const isActive = useEditorSelector(editor, selectors.isActiveListItem(...))
|
|
460
|
+
* ```
|
|
461
|
+
*/
|
|
462
|
+
static hasListStyle: (editor: PortableTextEditor, listStyle: string) => boolean;
|
|
463
|
+
/**
|
|
464
|
+
* @deprecated
|
|
465
|
+
* Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
|
|
466
|
+
*
|
|
467
|
+
* ```
|
|
468
|
+
* import * as selectors from '@portabletext/editor/selectors'
|
|
469
|
+
* const editor = useEditor()
|
|
470
|
+
* const isSelectionCollapsed = useEditorSelector(editor, selectors.isSelectionCollapsed)
|
|
471
|
+
* ```
|
|
472
|
+
*/
|
|
473
|
+
static isCollapsedSelection: (editor: PortableTextEditor) => boolean;
|
|
474
|
+
/**
|
|
475
|
+
* @deprecated
|
|
476
|
+
* Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
|
|
477
|
+
*
|
|
478
|
+
* ```
|
|
479
|
+
* import * as selectors from '@portabletext/editor/selectors'
|
|
480
|
+
* const editor = useEditor()
|
|
481
|
+
* const isSelectionExpanded = useEditorSelector(editor, selectors.isSelectionExpanded)
|
|
482
|
+
* ```
|
|
483
|
+
*/
|
|
484
|
+
static isExpandedSelection: (editor: PortableTextEditor) => boolean;
|
|
485
|
+
/**
|
|
486
|
+
* @deprecated
|
|
487
|
+
* Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
|
|
488
|
+
*
|
|
489
|
+
* ```
|
|
490
|
+
* import * as selectors from '@portabletext/editor/selectors'
|
|
491
|
+
* const editor = useEditor()
|
|
492
|
+
* const isActive = useEditorSelector(editor, selectors.isActiveDecorator(...))
|
|
493
|
+
* ```
|
|
494
|
+
*/
|
|
495
|
+
static isMarkActive: (editor: PortableTextEditor, mark: string) => boolean;
|
|
496
|
+
/**
|
|
497
|
+
* @deprecated
|
|
498
|
+
* Use `editor.send(...)` instead
|
|
499
|
+
*
|
|
500
|
+
* ```
|
|
501
|
+
* const editor = useEditor()
|
|
502
|
+
* editor.send({
|
|
503
|
+
* type: 'insert.span',
|
|
504
|
+
* text: '...',
|
|
505
|
+
* annotations: [{name: '...', value: {...}}],
|
|
506
|
+
* decorators: ['...'],
|
|
507
|
+
* })
|
|
508
|
+
* editor.send({
|
|
509
|
+
* type: 'insert.inline object',
|
|
510
|
+
* inlineObject: {
|
|
511
|
+
* name: '...',
|
|
512
|
+
* value: {...},
|
|
513
|
+
* },
|
|
514
|
+
* })
|
|
515
|
+
* ```
|
|
516
|
+
*/
|
|
517
|
+
static insertChild: <TSchemaType extends {
|
|
518
|
+
name: string;
|
|
519
|
+
}>(editor: PortableTextEditor, type: TSchemaType, value?: {
|
|
520
|
+
[prop: string]: unknown;
|
|
521
|
+
}) => Path | undefined;
|
|
522
|
+
/**
|
|
523
|
+
* @deprecated
|
|
524
|
+
* Use `editor.send(...)` instead
|
|
525
|
+
*
|
|
526
|
+
* ```
|
|
527
|
+
* const editor = useEditor()
|
|
528
|
+
* editor.send({
|
|
529
|
+
* type: 'insert.block object',
|
|
530
|
+
* blockObject: {
|
|
531
|
+
* name: '...',
|
|
532
|
+
* value: {...},
|
|
533
|
+
* },
|
|
534
|
+
* placement: 'auto' | 'after' | 'before',
|
|
535
|
+
* })
|
|
536
|
+
* ```
|
|
537
|
+
*/
|
|
538
|
+
static insertBlock: <TSchemaType extends {
|
|
539
|
+
name: string;
|
|
540
|
+
}>(editor: PortableTextEditor, type: TSchemaType, value?: {
|
|
541
|
+
[prop: string]: unknown;
|
|
542
|
+
}) => Path | undefined;
|
|
543
|
+
/**
|
|
544
|
+
* @deprecated
|
|
545
|
+
* Use `editor.send(...)` instead
|
|
546
|
+
*
|
|
547
|
+
* ```
|
|
548
|
+
* const editor = useEditor()
|
|
549
|
+
* editor.send({
|
|
550
|
+
* type: 'insert.break',
|
|
551
|
+
* })
|
|
552
|
+
* ```
|
|
553
|
+
*/
|
|
554
|
+
static insertBreak: (editor: PortableTextEditor) => void;
|
|
555
|
+
static isVoid: (editor: PortableTextEditor, element: PortableTextBlock | PortableTextChild) => boolean;
|
|
556
|
+
static isObjectPath: (_editor: PortableTextEditor, path: Path) => boolean;
|
|
557
|
+
static marks: (editor: PortableTextEditor) => string[];
|
|
558
|
+
/**
|
|
559
|
+
* @deprecated
|
|
560
|
+
* Use `editor.send(...)` instead
|
|
561
|
+
*
|
|
562
|
+
* ```
|
|
563
|
+
* const editor = useEditor()
|
|
564
|
+
* editor.send({
|
|
565
|
+
* type: 'select',
|
|
566
|
+
* selection: {...},
|
|
567
|
+
* })
|
|
568
|
+
* ```
|
|
569
|
+
*/
|
|
570
|
+
static select: (editor: PortableTextEditor, selection: EditorSelection | null) => void;
|
|
571
|
+
/**
|
|
572
|
+
* @deprecated
|
|
573
|
+
* Use `editor.send(...)` instead
|
|
574
|
+
*
|
|
575
|
+
* ```
|
|
576
|
+
* const editor = useEditor()
|
|
577
|
+
* editor.send({
|
|
578
|
+
* type: 'annotation.remove',
|
|
579
|
+
* annotation: {
|
|
580
|
+
* name: '...',
|
|
581
|
+
* },
|
|
582
|
+
* })
|
|
583
|
+
* ```
|
|
584
|
+
*/
|
|
585
|
+
static removeAnnotation: <TSchemaType extends {
|
|
586
|
+
name: string;
|
|
587
|
+
}>(editor: PortableTextEditor, type: TSchemaType) => void;
|
|
588
|
+
/**
|
|
589
|
+
* @deprecated
|
|
590
|
+
* Use `editor.send(...)` instead
|
|
591
|
+
*
|
|
592
|
+
* ```
|
|
593
|
+
* const editor = useEditor()
|
|
594
|
+
* editor.send({
|
|
595
|
+
* type: 'style.toggle',
|
|
596
|
+
* style: '...',
|
|
597
|
+
* })
|
|
598
|
+
* ```
|
|
599
|
+
*/
|
|
600
|
+
static toggleBlockStyle: (editor: PortableTextEditor, blockStyle: string) => void;
|
|
601
|
+
/**
|
|
602
|
+
* @deprecated
|
|
603
|
+
* Use `editor.send(...)` instead
|
|
604
|
+
*
|
|
605
|
+
* ```
|
|
606
|
+
* const editor = useEditor()
|
|
607
|
+
* editor.send({
|
|
608
|
+
* type: 'list item.toggle',
|
|
609
|
+
* listItem: '...',
|
|
610
|
+
* })
|
|
611
|
+
* ```
|
|
612
|
+
*/
|
|
613
|
+
static toggleList: (editor: PortableTextEditor, listStyle: string) => void;
|
|
614
|
+
/**
|
|
615
|
+
* @deprecated
|
|
616
|
+
* Use `editor.send(...)` instead
|
|
617
|
+
*
|
|
618
|
+
* ```
|
|
619
|
+
* const editor = useEditor()
|
|
620
|
+
* editor.send({
|
|
621
|
+
* type: 'decorator.toggle',
|
|
622
|
+
* decorator: '...',
|
|
623
|
+
* })
|
|
624
|
+
* ```
|
|
625
|
+
*/
|
|
626
|
+
static toggleMark: (editor: PortableTextEditor, mark: string) => void;
|
|
627
|
+
/**
|
|
628
|
+
* @deprecated
|
|
629
|
+
* Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
|
|
630
|
+
*
|
|
631
|
+
* ```
|
|
632
|
+
* import * as selectors from '@portabletext/editor/selectors'
|
|
633
|
+
* const editor = useEditor()
|
|
634
|
+
* const selectedValue = useEditorSelector(editor, selectors.getSelectedValue)
|
|
635
|
+
* ```
|
|
636
|
+
*/
|
|
637
|
+
static getFragment: (editor: PortableTextEditor) => PortableTextBlock[] | undefined;
|
|
638
|
+
/**
|
|
639
|
+
* @deprecated
|
|
640
|
+
* Use `editor.send(...)` instead
|
|
641
|
+
*
|
|
642
|
+
* ```
|
|
643
|
+
* const editor = useEditor()
|
|
644
|
+
* editor.send({
|
|
645
|
+
* type: 'history.undo',
|
|
646
|
+
* })
|
|
647
|
+
* ```
|
|
648
|
+
*/
|
|
649
|
+
static undo: (editor: PortableTextEditor) => void;
|
|
650
|
+
/**
|
|
651
|
+
* @deprecated
|
|
652
|
+
* Use `editor.send(...)` instead
|
|
653
|
+
*
|
|
654
|
+
* ```
|
|
655
|
+
* const editor = useEditor()
|
|
656
|
+
* editor.send({
|
|
657
|
+
* type: 'history.redo',
|
|
658
|
+
* })
|
|
659
|
+
* ```
|
|
660
|
+
*/
|
|
661
|
+
static redo: (editor: PortableTextEditor) => void;
|
|
662
|
+
/**
|
|
663
|
+
* @deprecated
|
|
664
|
+
* Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
|
|
665
|
+
*
|
|
666
|
+
* ```
|
|
667
|
+
* import * as selectors from '@portabletext/editor/selectors'
|
|
668
|
+
* const editor = useEditor()
|
|
669
|
+
* const isOverlapping = useEditorSelector(editor, selectors.isOverlappingSelection(selectionB))
|
|
670
|
+
* ```
|
|
671
|
+
*/
|
|
672
|
+
static isSelectionsOverlapping: (editor: PortableTextEditor, selectionA: EditorSelection, selectionB: EditorSelection) => boolean;
|
|
673
|
+
}
|
|
674
|
+
/**
|
|
675
|
+
* @beta
|
|
676
|
+
*/
|
|
677
|
+
type HotkeyOptions = {
|
|
678
|
+
marks?: Record<string, string>;
|
|
679
|
+
custom?: Record<string, (event: BaseSyntheticEvent, editor: PortableTextEditor) => void>;
|
|
680
|
+
};
|
|
681
|
+
/**
|
|
682
|
+
* @public
|
|
683
|
+
*/
|
|
684
|
+
type PortableTextEditableProps = Omit<TextareaHTMLAttributes<HTMLDivElement>, 'onPaste' | 'onCopy' | 'onBeforeInput'> & {
|
|
685
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
686
|
+
hotkeys?: HotkeyOptions;
|
|
687
|
+
onBeforeInput?: (event: InputEvent) => void;
|
|
688
|
+
onPaste?: OnPasteFn;
|
|
689
|
+
onCopy?: OnCopyFn;
|
|
690
|
+
rangeDecorations?: RangeDecoration[];
|
|
691
|
+
renderAnnotation?: RenderAnnotationFunction;
|
|
692
|
+
renderBlock?: RenderBlockFunction;
|
|
693
|
+
renderChild?: RenderChildFunction;
|
|
694
|
+
renderDecorator?: RenderDecoratorFunction;
|
|
695
|
+
renderListItem?: RenderListItemFunction;
|
|
696
|
+
renderPlaceholder?: RenderPlaceholderFunction;
|
|
697
|
+
renderStyle?: RenderStyleFunction;
|
|
698
|
+
scrollSelectionIntoView?: ScrollSelectionIntoViewFunction;
|
|
699
|
+
selection?: EditorSelection;
|
|
700
|
+
spellCheck?: boolean;
|
|
701
|
+
};
|
|
702
|
+
/**
|
|
703
|
+
* @public
|
|
704
|
+
*
|
|
705
|
+
*
|
|
706
|
+
* The core component that renders the editor. Must be placed within the {@link EditorProvider} component.
|
|
707
|
+
*
|
|
708
|
+
* @example
|
|
709
|
+
* ```tsx
|
|
710
|
+
* import { PortableTextEditable, EditorProvider } from '@portabletext/editor'
|
|
711
|
+
*
|
|
712
|
+
* function MyComponent() {
|
|
713
|
+
* return (
|
|
714
|
+
* <EditorProvider>
|
|
715
|
+
* <PortableTextEditable />
|
|
716
|
+
* </EditorProvider>
|
|
717
|
+
* )
|
|
718
|
+
* }
|
|
719
|
+
* ```
|
|
720
|
+
* @group Components
|
|
721
|
+
*/
|
|
722
|
+
declare const PortableTextEditable: react10.ForwardRefExoticComponent<Omit<PortableTextEditableProps, "ref"> & react10.RefAttributes<Omit<HTMLDivElement, "as" | "onPaste" | "onBeforeInput">>>;
|
|
723
|
+
/** @beta */
|
|
724
|
+
interface EditableAPIDeleteOptions {
|
|
725
|
+
mode?: 'blocks' | 'children' | 'selected';
|
|
726
|
+
}
|
|
727
|
+
/**
|
|
728
|
+
* @public
|
|
729
|
+
*/
|
|
730
|
+
type AddedAnnotationPaths = {
|
|
731
|
+
/**
|
|
732
|
+
* @deprecated An annotation may be applied to multiple blocks, resulting
|
|
733
|
+
* in multiple `markDef`'s being created. Use `markDefPaths` instead.
|
|
734
|
+
*/
|
|
735
|
+
markDefPath: Path;
|
|
736
|
+
markDefPaths: Array<Path>;
|
|
737
|
+
/**
|
|
738
|
+
* @deprecated Does not return anything meaningful since an annotation
|
|
739
|
+
* can span multiple blocks and spans. If references the span closest
|
|
740
|
+
* to the focus point of the selection.
|
|
741
|
+
*/
|
|
742
|
+
spanPath: Path;
|
|
743
|
+
};
|
|
744
|
+
/** @beta */
|
|
745
|
+
interface EditableAPI {
|
|
746
|
+
activeAnnotations: () => PortableTextObject[];
|
|
747
|
+
isAnnotationActive: (annotationType: PortableTextObject['_type']) => boolean;
|
|
748
|
+
addAnnotation: <TSchemaType extends {
|
|
749
|
+
name: string;
|
|
750
|
+
}>(type: TSchemaType, value?: {
|
|
751
|
+
[prop: string]: unknown;
|
|
752
|
+
}) => AddedAnnotationPaths | undefined;
|
|
753
|
+
blur: () => void;
|
|
754
|
+
delete: (selection: EditorSelection, options?: EditableAPIDeleteOptions) => void;
|
|
755
|
+
findByPath: (path: Path) => [PortableTextBlock | PortableTextChild | undefined, Path | undefined];
|
|
756
|
+
findDOMNode: (element: PortableTextBlock | PortableTextChild) => Node | undefined;
|
|
757
|
+
focus: () => void;
|
|
758
|
+
focusBlock: () => PortableTextBlock | undefined;
|
|
759
|
+
focusChild: () => PortableTextChild | undefined;
|
|
760
|
+
getSelection: () => EditorSelection;
|
|
761
|
+
getFragment: () => PortableTextBlock[] | undefined;
|
|
762
|
+
getValue: () => PortableTextBlock[] | undefined;
|
|
763
|
+
hasBlockStyle: (style: string) => boolean;
|
|
764
|
+
hasListStyle: (listStyle: string) => boolean;
|
|
765
|
+
insertBlock: <TSchemaType extends {
|
|
766
|
+
name: string;
|
|
767
|
+
}>(type: TSchemaType, value?: {
|
|
768
|
+
[prop: string]: unknown;
|
|
769
|
+
}) => Path;
|
|
770
|
+
insertChild: <TSchemaType extends {
|
|
771
|
+
name: string;
|
|
772
|
+
}>(type: TSchemaType, value?: {
|
|
773
|
+
[prop: string]: unknown;
|
|
774
|
+
}) => Path;
|
|
775
|
+
insertBreak: () => void;
|
|
776
|
+
isCollapsedSelection: () => boolean;
|
|
777
|
+
isExpandedSelection: () => boolean;
|
|
778
|
+
isMarkActive: (mark: string) => boolean;
|
|
779
|
+
isSelectionsOverlapping: (selectionA: EditorSelection, selectionB: EditorSelection) => boolean;
|
|
780
|
+
isVoid: (element: PortableTextBlock | PortableTextChild) => boolean;
|
|
781
|
+
marks: () => string[];
|
|
782
|
+
redo: () => void;
|
|
783
|
+
removeAnnotation: <TSchemaType extends {
|
|
784
|
+
name: string;
|
|
785
|
+
}>(type: TSchemaType) => void;
|
|
786
|
+
select: (selection: EditorSelection) => void;
|
|
787
|
+
toggleBlockStyle: (blockStyle: string) => void;
|
|
788
|
+
toggleList: (listStyle: string) => void;
|
|
789
|
+
toggleMark: (mark: string) => void;
|
|
790
|
+
undo: () => void;
|
|
791
|
+
}
|
|
792
|
+
/** @public */
|
|
793
|
+
type EditorSelectionPoint = {
|
|
794
|
+
path: Path;
|
|
795
|
+
offset: number;
|
|
796
|
+
};
|
|
797
|
+
/** @public */
|
|
798
|
+
type EditorSelection = {
|
|
799
|
+
anchor: EditorSelectionPoint;
|
|
800
|
+
focus: EditorSelectionPoint;
|
|
801
|
+
backward?: boolean;
|
|
802
|
+
} | null;
|
|
803
|
+
/**
|
|
804
|
+
* The editor has mutated it's content.
|
|
805
|
+
* @beta */
|
|
806
|
+
type MutationChange = {
|
|
807
|
+
type: 'mutation';
|
|
808
|
+
patches: Patch[];
|
|
809
|
+
snapshot: PortableTextBlock[] | undefined;
|
|
810
|
+
};
|
|
811
|
+
/**
|
|
812
|
+
* The editor has produced a patch
|
|
813
|
+
* @beta */
|
|
814
|
+
type PatchChange = {
|
|
815
|
+
type: 'patch';
|
|
816
|
+
patch: Patch;
|
|
817
|
+
};
|
|
818
|
+
/**
|
|
819
|
+
* The editor has received a new (props) value
|
|
820
|
+
* @beta */
|
|
821
|
+
type ValueChange = {
|
|
822
|
+
type: 'value';
|
|
823
|
+
value: PortableTextBlock[] | undefined;
|
|
824
|
+
};
|
|
825
|
+
/**
|
|
826
|
+
* The editor has a new selection
|
|
827
|
+
* @beta */
|
|
828
|
+
type SelectionChange = {
|
|
829
|
+
type: 'selection';
|
|
830
|
+
selection: EditorSelection;
|
|
831
|
+
};
|
|
832
|
+
/**
|
|
833
|
+
* The editor received focus
|
|
834
|
+
* @beta */
|
|
835
|
+
type FocusChange = {
|
|
836
|
+
type: 'focus';
|
|
837
|
+
event: FocusEvent<HTMLDivElement, Element>;
|
|
838
|
+
};
|
|
839
|
+
/**
|
|
840
|
+
* @beta
|
|
841
|
+
* @deprecated Use `'patch'` changes instead
|
|
842
|
+
*/
|
|
843
|
+
type UnsetChange = {
|
|
844
|
+
type: 'unset';
|
|
845
|
+
previousValue: PortableTextBlock[];
|
|
846
|
+
};
|
|
847
|
+
/**
|
|
848
|
+
* The editor blurred
|
|
849
|
+
* @beta */
|
|
850
|
+
type BlurChange = {
|
|
851
|
+
type: 'blur';
|
|
852
|
+
event: FocusEvent<HTMLDivElement, Element>;
|
|
853
|
+
};
|
|
854
|
+
/**
|
|
855
|
+
* The editor is currently loading something
|
|
856
|
+
* Could be used to show a spinner etc.
|
|
857
|
+
* @beta
|
|
858
|
+
* @deprecated Will be removed in the next major version
|
|
859
|
+
*/
|
|
860
|
+
type LoadingChange = {
|
|
861
|
+
type: 'loading';
|
|
862
|
+
isLoading: boolean;
|
|
863
|
+
};
|
|
864
|
+
/**
|
|
865
|
+
* The editor content is ready to be edited by the user
|
|
866
|
+
* @beta */
|
|
867
|
+
type ReadyChange = {
|
|
868
|
+
type: 'ready';
|
|
869
|
+
};
|
|
870
|
+
/**
|
|
871
|
+
* The editor produced an error
|
|
872
|
+
* @beta
|
|
873
|
+
* @deprecated The change is no longer emitted
|
|
874
|
+
* */
|
|
875
|
+
type ErrorChange = {
|
|
876
|
+
type: 'error';
|
|
877
|
+
name: string;
|
|
878
|
+
level: 'warning' | 'error';
|
|
879
|
+
description: string;
|
|
880
|
+
data?: unknown;
|
|
881
|
+
};
|
|
882
|
+
/**
|
|
883
|
+
* The editor has invalid data in the value that can be resolved by the user
|
|
884
|
+
* @beta */
|
|
885
|
+
type InvalidValueResolution = {
|
|
886
|
+
autoResolve?: boolean;
|
|
887
|
+
patches: Patch[];
|
|
888
|
+
description: string;
|
|
889
|
+
action: string;
|
|
890
|
+
item: PortableTextBlock[] | PortableTextBlock | PortableTextChild | undefined;
|
|
891
|
+
/**
|
|
892
|
+
* i18n keys for the description and action
|
|
893
|
+
*
|
|
894
|
+
* These are in addition to the description and action properties, to decouple the editor from
|
|
895
|
+
* the i18n system, and allow usage without it. The i18n keys take precedence over the
|
|
896
|
+
* description and action properties, if i18n framework is available.
|
|
897
|
+
*/
|
|
898
|
+
i18n: {
|
|
899
|
+
description: `inputs.portable-text.invalid-value.${Lowercase<string>}.description`;
|
|
900
|
+
action: `inputs.portable-text.invalid-value.${Lowercase<string>}.action`;
|
|
901
|
+
values?: Record<string, string | number | string[]>;
|
|
902
|
+
};
|
|
903
|
+
};
|
|
904
|
+
/**
|
|
905
|
+
* The editor has an invalid value
|
|
906
|
+
* @beta */
|
|
907
|
+
type InvalidValue = {
|
|
908
|
+
type: 'invalidValue';
|
|
909
|
+
resolution: InvalidValueResolution | null;
|
|
910
|
+
value: PortableTextBlock[] | undefined;
|
|
911
|
+
};
|
|
912
|
+
/**
|
|
913
|
+
* The editor performed a undo history step
|
|
914
|
+
* @beta
|
|
915
|
+
* @deprecated The change is no longer emitted
|
|
916
|
+
* */
|
|
917
|
+
type UndoChange = {
|
|
918
|
+
type: 'undo';
|
|
919
|
+
patches: Patch[];
|
|
920
|
+
timestamp: Date;
|
|
921
|
+
};
|
|
922
|
+
/**
|
|
923
|
+
* The editor performed redo history step
|
|
924
|
+
* @beta
|
|
925
|
+
* @deprecated The change is no longer emitted
|
|
926
|
+
* */
|
|
927
|
+
type RedoChange = {
|
|
928
|
+
type: 'redo';
|
|
929
|
+
patches: Patch[];
|
|
930
|
+
timestamp: Date;
|
|
931
|
+
};
|
|
932
|
+
/**
|
|
933
|
+
* The editor was either connected or disconnected to the network
|
|
934
|
+
* To show out of sync warnings etc when in collaborative mode.
|
|
935
|
+
* @beta
|
|
936
|
+
* @deprecated The change is no longer emitted
|
|
937
|
+
* */
|
|
938
|
+
type ConnectionChange = {
|
|
939
|
+
type: 'connection';
|
|
940
|
+
value: 'online' | 'offline';
|
|
941
|
+
};
|
|
942
|
+
/**
|
|
943
|
+
* When the editor changes, it will emit a change item describing the change
|
|
944
|
+
* @beta */
|
|
945
|
+
type EditorChange = BlurChange | ConnectionChange | ErrorChange | FocusChange | InvalidValue | LoadingChange | MutationChange | PatchChange | ReadyChange | RedoChange | SelectionChange | UndoChange | UnsetChange | ValueChange;
|
|
946
|
+
/**
|
|
947
|
+
* @beta
|
|
948
|
+
*/
|
|
949
|
+
type EditorChanges = Subject<EditorChange>;
|
|
950
|
+
/** @beta */
|
|
951
|
+
type OnPasteResult = {
|
|
952
|
+
insert?: TypedObject[];
|
|
953
|
+
path?: Path;
|
|
954
|
+
} | undefined;
|
|
955
|
+
/**
|
|
956
|
+
* @beta
|
|
957
|
+
*/
|
|
958
|
+
type OnPasteResultOrPromise = OnPasteResult | Promise<OnPasteResult>;
|
|
959
|
+
/** @beta */
|
|
960
|
+
interface PasteData {
|
|
961
|
+
event: ClipboardEvent;
|
|
962
|
+
path: Path;
|
|
963
|
+
schemaTypes: PortableTextMemberSchemaTypes;
|
|
964
|
+
value: PortableTextBlock[] | undefined;
|
|
965
|
+
}
|
|
966
|
+
/**
|
|
967
|
+
* @beta
|
|
968
|
+
* It is encouraged not to return `Promise<undefined>` from the `OnPasteFn` as
|
|
969
|
+
* a mechanism to fall back to the native paste behaviour. This doesn't work in
|
|
970
|
+
* all cases. Always return plain `undefined` if possible.
|
|
971
|
+
**/
|
|
972
|
+
type OnPasteFn = (data: PasteData) => OnPasteResultOrPromise;
|
|
973
|
+
/** @beta */
|
|
974
|
+
type OnBeforeInputFn = (event: InputEvent) => void;
|
|
975
|
+
/** @beta */
|
|
976
|
+
type OnCopyFn = (event: ClipboardEvent<HTMLDivElement | HTMLSpanElement>) => undefined | unknown;
|
|
977
|
+
/** @beta */
|
|
978
|
+
type PatchObservable = Observable<{
|
|
979
|
+
patches: Patch[];
|
|
980
|
+
snapshot: PortableTextBlock[] | undefined;
|
|
981
|
+
}>;
|
|
982
|
+
/** @beta */
|
|
983
|
+
interface BlockRenderProps {
|
|
984
|
+
children: ReactElement<any>;
|
|
985
|
+
editorElementRef: RefObject<HTMLElement | null>;
|
|
986
|
+
focused: boolean;
|
|
987
|
+
level?: number;
|
|
988
|
+
listItem?: string;
|
|
989
|
+
path: BlockPath;
|
|
990
|
+
selected: boolean;
|
|
991
|
+
style?: string;
|
|
992
|
+
schemaType: ObjectSchemaType;
|
|
993
|
+
/** @deprecated Use `schemaType` instead */
|
|
994
|
+
type: ObjectSchemaType;
|
|
995
|
+
value: PortableTextBlock;
|
|
996
|
+
}
|
|
997
|
+
/** @beta */
|
|
998
|
+
interface BlockChildRenderProps {
|
|
999
|
+
annotations: PortableTextObject[];
|
|
1000
|
+
children: ReactElement<any>;
|
|
1001
|
+
editorElementRef: RefObject<HTMLElement | null>;
|
|
1002
|
+
focused: boolean;
|
|
1003
|
+
path: Path;
|
|
1004
|
+
selected: boolean;
|
|
1005
|
+
schemaType: ObjectSchemaType;
|
|
1006
|
+
/** @deprecated Use `schemaType` instead */
|
|
1007
|
+
type: ObjectSchemaType;
|
|
1008
|
+
value: PortableTextChild;
|
|
1009
|
+
}
|
|
1010
|
+
/** @beta */
|
|
1011
|
+
interface BlockAnnotationRenderProps {
|
|
1012
|
+
block: PortableTextBlock;
|
|
1013
|
+
children: ReactElement<any>;
|
|
1014
|
+
editorElementRef: RefObject<HTMLElement | null>;
|
|
1015
|
+
focused: boolean;
|
|
1016
|
+
path: Path;
|
|
1017
|
+
schemaType: ObjectSchemaType;
|
|
1018
|
+
selected: boolean;
|
|
1019
|
+
/** @deprecated Use `schemaType` instead */
|
|
1020
|
+
type: ObjectSchemaType;
|
|
1021
|
+
value: PortableTextObject;
|
|
1022
|
+
}
|
|
1023
|
+
/** @beta */
|
|
1024
|
+
interface BlockDecoratorRenderProps {
|
|
1025
|
+
children: ReactElement<any>;
|
|
1026
|
+
editorElementRef: RefObject<HTMLElement | null>;
|
|
1027
|
+
focused: boolean;
|
|
1028
|
+
path: Path;
|
|
1029
|
+
schemaType: BlockDecoratorDefinition;
|
|
1030
|
+
selected: boolean;
|
|
1031
|
+
/** @deprecated Use `schemaType` instead */
|
|
1032
|
+
type: BlockDecoratorDefinition;
|
|
1033
|
+
value: string;
|
|
1034
|
+
}
|
|
1035
|
+
/** @beta */
|
|
1036
|
+
interface BlockListItemRenderProps {
|
|
1037
|
+
block: PortableTextTextBlock;
|
|
1038
|
+
children: ReactElement<any>;
|
|
1039
|
+
editorElementRef: RefObject<HTMLElement | null>;
|
|
1040
|
+
focused: boolean;
|
|
1041
|
+
level: number;
|
|
1042
|
+
path: Path;
|
|
1043
|
+
schemaType: BlockListDefinition;
|
|
1044
|
+
selected: boolean;
|
|
1045
|
+
value: string;
|
|
1046
|
+
}
|
|
1047
|
+
/** @beta */
|
|
1048
|
+
type RenderBlockFunction = (props: BlockRenderProps) => JSX.Element;
|
|
1049
|
+
/** @beta */
|
|
1050
|
+
type RenderChildFunction = (props: BlockChildRenderProps) => JSX.Element;
|
|
1051
|
+
/** @beta */
|
|
1052
|
+
type RenderEditableFunction = (props: PortableTextEditableProps) => JSX.Element;
|
|
1053
|
+
/** @beta */
|
|
1054
|
+
type RenderAnnotationFunction = (props: BlockAnnotationRenderProps) => JSX.Element;
|
|
1055
|
+
/** @beta */
|
|
1056
|
+
type RenderPlaceholderFunction = () => React.ReactNode;
|
|
1057
|
+
/** @beta */
|
|
1058
|
+
type RenderStyleFunction = (props: BlockStyleRenderProps) => JSX.Element;
|
|
1059
|
+
/** @beta */
|
|
1060
|
+
interface BlockStyleRenderProps {
|
|
1061
|
+
block: PortableTextTextBlock;
|
|
1062
|
+
children: ReactElement<any>;
|
|
1063
|
+
editorElementRef: RefObject<HTMLElement | null>;
|
|
1064
|
+
focused: boolean;
|
|
1065
|
+
path: Path;
|
|
1066
|
+
selected: boolean;
|
|
1067
|
+
schemaType: BlockStyleDefinition;
|
|
1068
|
+
value: string;
|
|
1069
|
+
}
|
|
1070
|
+
/** @beta */
|
|
1071
|
+
type RenderListItemFunction = (props: BlockListItemRenderProps) => JSX.Element;
|
|
1072
|
+
/** @beta */
|
|
1073
|
+
type RenderDecoratorFunction = (props: BlockDecoratorRenderProps) => JSX.Element;
|
|
1074
|
+
/** @beta */
|
|
1075
|
+
type ScrollSelectionIntoViewFunction = (editor: PortableTextEditor, domRange: globalThis.Range) => void;
|
|
1076
|
+
/**
|
|
1077
|
+
* Parameters for the callback that will be called for a RangeDecoration's onMoved.
|
|
1078
|
+
* @alpha */
|
|
1079
|
+
interface RangeDecorationOnMovedDetails {
|
|
1080
|
+
rangeDecoration: RangeDecoration;
|
|
1081
|
+
newSelection: EditorSelection;
|
|
1082
|
+
origin: 'remote' | 'local';
|
|
1083
|
+
}
|
|
1084
|
+
/**
|
|
1085
|
+
* A range decoration is a UI affordance that wraps a given selection range in the editor
|
|
1086
|
+
* with a custom component. This can be used to highlight search results,
|
|
1087
|
+
* mark validation errors on specific words, draw user presence and similar.
|
|
1088
|
+
* @alpha */
|
|
1089
|
+
interface RangeDecoration {
|
|
1090
|
+
/**
|
|
1091
|
+
* A component for rendering the range decoration.
|
|
1092
|
+
* The component will receive the children (text) of the range decoration as its children.
|
|
1093
|
+
*
|
|
1094
|
+
* @example
|
|
1095
|
+
* ```ts
|
|
1096
|
+
* (rangeComponentProps: PropsWithChildren) => (
|
|
1097
|
+
* <SearchResultHighlight>
|
|
1098
|
+
* {rangeComponentProps.children}
|
|
1099
|
+
* </SearchResultHighlight>
|
|
1100
|
+
* )
|
|
1101
|
+
* ```
|
|
1102
|
+
*/
|
|
1103
|
+
component: (props: PropsWithChildren) => ReactElement<any>;
|
|
1104
|
+
/**
|
|
1105
|
+
* The editor content selection range
|
|
1106
|
+
*/
|
|
1107
|
+
selection: EditorSelection;
|
|
1108
|
+
/**
|
|
1109
|
+
* A optional callback that will be called when the range decoration potentially moves according to user edits.
|
|
1110
|
+
*/
|
|
1111
|
+
onMoved?: (details: RangeDecorationOnMovedDetails) => void;
|
|
1112
|
+
/**
|
|
1113
|
+
* A custom payload that can be set on the range decoration
|
|
1114
|
+
*/
|
|
1115
|
+
payload?: Record<string, unknown>;
|
|
1116
|
+
}
|
|
1117
|
+
/** @beta */
|
|
1118
|
+
type PortableTextMemberSchemaTypes = {
|
|
1119
|
+
annotations: (ObjectSchemaType & {
|
|
1120
|
+
i18nTitleKey?: string;
|
|
1121
|
+
})[];
|
|
1122
|
+
block: ObjectSchemaType;
|
|
1123
|
+
blockObjects: ObjectSchemaType[];
|
|
1124
|
+
decorators: BlockDecoratorDefinition[];
|
|
1125
|
+
inlineObjects: ObjectSchemaType[];
|
|
1126
|
+
portableText: ArraySchemaType<PortableTextBlock>;
|
|
1127
|
+
span: ObjectSchemaType;
|
|
1128
|
+
styles: BlockStyleDefinition[];
|
|
1129
|
+
lists: BlockListDefinition[];
|
|
1130
|
+
};
|
|
1131
|
+
/**
|
|
1132
|
+
* @public
|
|
1133
|
+
*/
|
|
1134
|
+
type EditorContext = {
|
|
1135
|
+
converters: Array<Converter>;
|
|
1136
|
+
keyGenerator: () => string;
|
|
1137
|
+
readOnly: boolean;
|
|
1138
|
+
schema: EditorSchema;
|
|
1139
|
+
selection: EditorSelection;
|
|
1140
|
+
value: Array<PortableTextBlock>;
|
|
1141
|
+
};
|
|
1142
|
+
/**
|
|
1143
|
+
* @public
|
|
1144
|
+
*/
|
|
1145
|
+
type EditorSnapshot = {
|
|
1146
|
+
context: EditorContext;
|
|
1147
|
+
blockIndexMap: Map<string, number>;
|
|
1148
|
+
/**
|
|
1149
|
+
* @beta
|
|
1150
|
+
* Subject to change
|
|
1151
|
+
*/
|
|
1152
|
+
decoratorState: Record<string, boolean | undefined>;
|
|
1153
|
+
};
|
|
1154
|
+
/**
|
|
1155
|
+
* @beta
|
|
1156
|
+
*/
|
|
1157
|
+
type BehaviorGuard<TBehaviorEvent, TGuardResponse> = (payload: {
|
|
1158
|
+
snapshot: EditorSnapshot;
|
|
1159
|
+
event: TBehaviorEvent;
|
|
1160
|
+
dom: EditorDom;
|
|
1161
|
+
}) => TGuardResponse | false;
|
|
1162
|
+
/**
|
|
1163
|
+
* @beta
|
|
1164
|
+
*/
|
|
1165
|
+
type Behavior<TBehaviorEventType extends '*' | `${BehaviorEventTypeNamespace}.*` | BehaviorEvent['type'] = '*' | `${BehaviorEventTypeNamespace}.*` | BehaviorEvent['type'], TGuardResponse = true, TBehaviorEvent extends ResolveBehaviorEvent<TBehaviorEventType> = ResolveBehaviorEvent<TBehaviorEventType>> = {
|
|
1166
|
+
/**
|
|
1167
|
+
* Editor Event that triggers this Behavior.
|
|
1168
|
+
*/
|
|
1169
|
+
on: TBehaviorEventType;
|
|
1170
|
+
/**
|
|
1171
|
+
* Predicate function that determines if the Behavior should be executed.
|
|
1172
|
+
* Returning a non-nullable value from the guard will pass the value to the
|
|
1173
|
+
* actions and execute them.
|
|
1174
|
+
*/
|
|
1175
|
+
guard?: BehaviorGuard<TBehaviorEvent, TGuardResponse>;
|
|
1176
|
+
/**
|
|
1177
|
+
* Array of Behavior Action sets.
|
|
1178
|
+
* Each set represents a step in the history stack.
|
|
1179
|
+
*/
|
|
1180
|
+
actions: Array<BehaviorActionSet<TBehaviorEvent, TGuardResponse>>;
|
|
1181
|
+
};
|
|
1182
|
+
/**
|
|
1183
|
+
* @beta
|
|
1184
|
+
*
|
|
1185
|
+
* @example
|
|
1186
|
+
*
|
|
1187
|
+
* ```tsx
|
|
1188
|
+
* const noLowerCaseA = defineBehavior({
|
|
1189
|
+
* on: 'insert.text',
|
|
1190
|
+
* guard: ({event, snapshot}) => event.text === 'a',
|
|
1191
|
+
* actions: [({event, snapshot}) => [{type: 'insert.text', text: 'A'}]],
|
|
1192
|
+
* })
|
|
1193
|
+
* ```
|
|
1194
|
+
*
|
|
1195
|
+
*/
|
|
1196
|
+
declare function defineBehavior<TPayload extends Record<string, unknown>, TBehaviorEventType extends '*' | `${BehaviorEventTypeNamespace}.*` | BehaviorEvent['type'] = CustomBehaviorEvent['type'], TGuardResponse = true>(behavior: Behavior<TBehaviorEventType, TGuardResponse, ResolveBehaviorEvent<TBehaviorEventType, TPayload>>): Behavior;
|
|
1197
|
+
/**
|
|
1198
|
+
* @public
|
|
1199
|
+
*/
|
|
1200
|
+
type EditorConfig = {
|
|
1201
|
+
/**
|
|
1202
|
+
* @beta
|
|
1203
|
+
*/
|
|
1204
|
+
keyGenerator?: () => string;
|
|
1205
|
+
readOnly?: boolean;
|
|
1206
|
+
initialValue?: Array<PortableTextBlock>;
|
|
1207
|
+
} & ({
|
|
1208
|
+
schemaDefinition: SchemaDefinition;
|
|
1209
|
+
schema?: undefined;
|
|
1210
|
+
} | {
|
|
1211
|
+
schemaDefinition?: undefined;
|
|
1212
|
+
schema: ArraySchemaType<PortableTextBlock> | ArrayDefinition;
|
|
1213
|
+
});
|
|
1214
|
+
/**
|
|
1215
|
+
* @public
|
|
1216
|
+
*/
|
|
1217
|
+
type EditorEvent = ExternalEditorEvent | ExternalBehaviorEvent | {
|
|
1218
|
+
type: 'update value';
|
|
1219
|
+
value: Array<PortableTextBlock> | undefined;
|
|
1220
|
+
};
|
|
1221
|
+
/**
|
|
1222
|
+
* @public
|
|
1223
|
+
*/
|
|
1224
|
+
type Editor = {
|
|
1225
|
+
dom: EditorDom;
|
|
1226
|
+
getSnapshot: () => EditorSnapshot;
|
|
1227
|
+
/**
|
|
1228
|
+
* @beta
|
|
1229
|
+
*/
|
|
1230
|
+
registerBehavior: (config: {
|
|
1231
|
+
behavior: Behavior;
|
|
1232
|
+
}) => () => void;
|
|
1233
|
+
send: (event: EditorEvent) => void;
|
|
1234
|
+
on: ActorRef<Snapshot<unknown>, EventObject, EditorEmittedEvent>['on'];
|
|
1235
|
+
};
|
|
1236
|
+
/**
|
|
1237
|
+
* @public
|
|
1238
|
+
*/
|
|
1239
|
+
type EditorProviderProps = {
|
|
1240
|
+
initialConfig: EditorConfig;
|
|
1241
|
+
children?: React$1.ReactNode;
|
|
1242
|
+
};
|
|
1243
|
+
/**
|
|
1244
|
+
* @public
|
|
1245
|
+
* The EditorProvider component is used to set up the editor context and configure the Portable Text Editor.
|
|
1246
|
+
* @example
|
|
1247
|
+
* ```tsx
|
|
1248
|
+
* import {EditorProvider} from '@portabletext/editor'
|
|
1249
|
+
*
|
|
1250
|
+
* function App() {
|
|
1251
|
+
* return (
|
|
1252
|
+
* <EditorProvider initialConfig={{ ... }} >
|
|
1253
|
+
* ...
|
|
1254
|
+
* </EditorProvider>
|
|
1255
|
+
* )
|
|
1256
|
+
* }
|
|
1257
|
+
*
|
|
1258
|
+
* ```
|
|
1259
|
+
* @group Components
|
|
1260
|
+
*/
|
|
1261
|
+
declare function EditorProvider(props: EditorProviderProps): React$1.JSX.Element;
|
|
1262
|
+
/**
|
|
1263
|
+
* @public
|
|
1264
|
+
*/
|
|
1265
|
+
type EditorSelector<TSelected> = (snapshot: EditorSnapshot) => TSelected;
|
|
1266
|
+
/**
|
|
1267
|
+
* @public
|
|
1268
|
+
* Hook to select a value from the editor state.
|
|
1269
|
+
* @example
|
|
1270
|
+
* Pass a selector as the second argument
|
|
1271
|
+
* ```tsx
|
|
1272
|
+
* import { useEditorSelector } from '@portabletext/editor'
|
|
1273
|
+
*
|
|
1274
|
+
* function MyComponent(editor) {
|
|
1275
|
+
* const value = useEditorSelector(editor, selector)
|
|
1276
|
+
* }
|
|
1277
|
+
* ```
|
|
1278
|
+
* @example
|
|
1279
|
+
* Pass an inline selector as the second argument.
|
|
1280
|
+
* In this case, use the editor context to obtain the schema.
|
|
1281
|
+
* ```tsx
|
|
1282
|
+
* import { useEditorSelector } from '@portabletext/editor'
|
|
1283
|
+
*
|
|
1284
|
+
* function MyComponent(editor) {
|
|
1285
|
+
* const schema = useEditorSelector(editor, (snapshot) => snapshot.context.schema)
|
|
1286
|
+
* }
|
|
1287
|
+
* ```
|
|
1288
|
+
* @group Hooks
|
|
1289
|
+
*/
|
|
1290
|
+
declare function useEditorSelector<TSelected>(editor: Editor, selector: EditorSelector<TSelected>, compare?: (a: TSelected, b: TSelected) => boolean): TSelected;
|
|
1291
|
+
/**
|
|
1292
|
+
* @deprecated Use `useEditor` to get the current editor instance.
|
|
1293
|
+
* @public
|
|
1294
|
+
* Get the current editor object from the React context.
|
|
1295
|
+
*/
|
|
1296
|
+
declare const usePortableTextEditor: () => PortableTextEditor;
|
|
1297
|
+
/**
|
|
1298
|
+
* @deprecated Use `useEditorSelector` to get the current editor selection.
|
|
1299
|
+
* @public
|
|
1300
|
+
* Get the current editor selection from the React context.
|
|
1301
|
+
*/
|
|
1302
|
+
declare const usePortableTextEditorSelection: () => EditorSelection;
|
|
1303
|
+
/**
|
|
1304
|
+
* @public
|
|
1305
|
+
*/
|
|
1306
|
+
declare const defaultKeyGenerator: () => string;
|
|
1307
|
+
/**
|
|
1308
|
+
* @public
|
|
1309
|
+
* Get the current editor context from the `EditorProvider`.
|
|
1310
|
+
* Must be used inside the `EditorProvider` component.
|
|
1311
|
+
* @returns The current editor object.
|
|
1312
|
+
* @example
|
|
1313
|
+
* ```tsx
|
|
1314
|
+
* import { useEditor } from '@portabletext/editor'
|
|
1315
|
+
*
|
|
1316
|
+
* function MyComponent() {
|
|
1317
|
+
* const editor = useEditor()
|
|
1318
|
+
* }
|
|
1319
|
+
* ```
|
|
1320
|
+
* @group Hooks
|
|
1321
|
+
*/
|
|
1322
|
+
declare function useEditor(): Editor;
|
|
1323
|
+
/**
|
|
1324
|
+
* @beta
|
|
1325
|
+
*/
|
|
1326
|
+
type BlockOffset = {
|
|
1327
|
+
path: BlockPath;
|
|
1328
|
+
offset: number;
|
|
1329
|
+
};
|
|
1330
|
+
type EditorPriority = {
|
|
1331
|
+
id: string;
|
|
1332
|
+
name?: string;
|
|
1333
|
+
reference?: {
|
|
1334
|
+
priority: EditorPriority;
|
|
1335
|
+
importance: 'higher' | 'lower';
|
|
1336
|
+
};
|
|
1337
|
+
};
|
|
1338
|
+
type BehaviorConfig = {
|
|
1339
|
+
behavior: Behavior;
|
|
1340
|
+
priority: EditorPriority;
|
|
1341
|
+
};
|
|
1342
|
+
/**
|
|
1343
|
+
* @public
|
|
1344
|
+
*/
|
|
1345
|
+
type PatchesEvent = {
|
|
1346
|
+
type: 'patches';
|
|
1347
|
+
patches: Array<Patch>;
|
|
1348
|
+
snapshot: Array<PortableTextBlock> | undefined;
|
|
1349
|
+
};
|
|
1350
|
+
/**
|
|
1351
|
+
* @public
|
|
1352
|
+
*/
|
|
1353
|
+
type ExternalEditorEvent = {
|
|
1354
|
+
type: 'update readOnly';
|
|
1355
|
+
readOnly: boolean;
|
|
1356
|
+
} | PatchesEvent;
|
|
1357
|
+
type InternalPatchEvent = NamespaceEvent<PatchEvent, 'internal'> & {
|
|
1358
|
+
operationId?: string;
|
|
1359
|
+
value: Array<PortableTextBlock>;
|
|
1360
|
+
};
|
|
1361
|
+
/**
|
|
1362
|
+
* @internal
|
|
1363
|
+
*/
|
|
1364
|
+
type EditorActor = ActorRefFrom<typeof editorMachine>;
|
|
1365
|
+
/**
|
|
1366
|
+
* @internal
|
|
1367
|
+
*/
|
|
1368
|
+
declare const editorMachine: xstate72.StateMachine<{
|
|
1369
|
+
behaviors: Set<BehaviorConfig>;
|
|
1370
|
+
behaviorsSorted: boolean;
|
|
1371
|
+
converters: Set<Converter>;
|
|
1372
|
+
getLegacySchema: () => PortableTextMemberSchemaTypes;
|
|
1373
|
+
keyGenerator: () => string;
|
|
1374
|
+
pendingEvents: Array<InternalPatchEvent | MutationEvent>;
|
|
1375
|
+
pendingIncomingPatchesEvents: Array<PatchesEvent>;
|
|
1376
|
+
schema: EditorSchema;
|
|
1377
|
+
initialReadOnly: boolean;
|
|
1378
|
+
selection: EditorSelection;
|
|
1379
|
+
initialValue: Array<PortableTextBlock> | undefined;
|
|
1380
|
+
internalDrag?: {
|
|
1381
|
+
origin: Pick<EventPosition, "selection">;
|
|
1382
|
+
};
|
|
1383
|
+
dragGhost?: HTMLElement;
|
|
1384
|
+
slateEditor?: PortableTextSlateEditor;
|
|
1385
|
+
}, InternalPatchEvent | MutationEvent | PatchesEvent | {
|
|
1386
|
+
type: "update readOnly";
|
|
1387
|
+
readOnly: boolean;
|
|
1388
|
+
} | {
|
|
1389
|
+
type: "add behavior";
|
|
1390
|
+
behaviorConfig: BehaviorConfig;
|
|
1391
|
+
} | {
|
|
1392
|
+
type: "remove behavior";
|
|
1393
|
+
behaviorConfig: BehaviorConfig;
|
|
1394
|
+
} | {
|
|
1395
|
+
type: "blur";
|
|
1396
|
+
editor: PortableTextSlateEditor;
|
|
1397
|
+
} | {
|
|
1398
|
+
type: "focus";
|
|
1399
|
+
editor: PortableTextSlateEditor;
|
|
1400
|
+
} | {
|
|
1401
|
+
type: "update selection";
|
|
1402
|
+
selection: EditorSelection;
|
|
1403
|
+
} | {
|
|
1404
|
+
type: "done syncing value";
|
|
1405
|
+
} | {
|
|
1406
|
+
type: "syncing value";
|
|
1407
|
+
} | {
|
|
1408
|
+
type: "behavior event";
|
|
1409
|
+
behaviorEvent: BehaviorEvent;
|
|
1410
|
+
editor: PortableTextSlateEditor;
|
|
1411
|
+
nativeEvent?: {
|
|
1412
|
+
preventDefault: () => void;
|
|
1413
|
+
};
|
|
1414
|
+
} | {
|
|
1415
|
+
type: "set drag ghost";
|
|
1416
|
+
ghost: HTMLElement;
|
|
1417
|
+
} | {
|
|
1418
|
+
type: "dragstart";
|
|
1419
|
+
ghost?: HTMLElement;
|
|
1420
|
+
origin: Pick<EventPosition, "selection">;
|
|
1421
|
+
} | {
|
|
1422
|
+
type: "dragend";
|
|
1423
|
+
} | {
|
|
1424
|
+
type: "drop";
|
|
1425
|
+
} | {
|
|
1426
|
+
type: "add slate editor";
|
|
1427
|
+
editor: PortableTextSlateEditor;
|
|
1428
|
+
}, {}, never, {
|
|
1429
|
+
type: "add behavior to context";
|
|
1430
|
+
params: xstate72.NonReducibleUnknown;
|
|
1431
|
+
} | {
|
|
1432
|
+
type: "remove behavior from context";
|
|
1433
|
+
params: xstate72.NonReducibleUnknown;
|
|
1434
|
+
} | {
|
|
1435
|
+
type: "add slate editor to context";
|
|
1436
|
+
params: xstate72.NonReducibleUnknown;
|
|
1437
|
+
} | {
|
|
1438
|
+
type: "emit patch event";
|
|
1439
|
+
params: xstate72.NonReducibleUnknown;
|
|
1440
|
+
} | {
|
|
1441
|
+
type: "emit mutation event";
|
|
1442
|
+
params: xstate72.NonReducibleUnknown;
|
|
1443
|
+
} | {
|
|
1444
|
+
type: "emit read only";
|
|
1445
|
+
params: xstate72.NonReducibleUnknown;
|
|
1446
|
+
} | {
|
|
1447
|
+
type: "emit editable";
|
|
1448
|
+
params: xstate72.NonReducibleUnknown;
|
|
1449
|
+
} | {
|
|
1450
|
+
type: "defer event";
|
|
1451
|
+
params: xstate72.NonReducibleUnknown;
|
|
1452
|
+
} | {
|
|
1453
|
+
type: "emit pending events";
|
|
1454
|
+
params: xstate72.NonReducibleUnknown;
|
|
1455
|
+
} | {
|
|
1456
|
+
type: "emit ready";
|
|
1457
|
+
params: xstate72.NonReducibleUnknown;
|
|
1458
|
+
} | {
|
|
1459
|
+
type: "clear pending events";
|
|
1460
|
+
params: xstate72.NonReducibleUnknown;
|
|
1461
|
+
} | {
|
|
1462
|
+
type: "defer incoming patches";
|
|
1463
|
+
params: xstate72.NonReducibleUnknown;
|
|
1464
|
+
} | {
|
|
1465
|
+
type: "emit pending incoming patches";
|
|
1466
|
+
params: xstate72.NonReducibleUnknown;
|
|
1467
|
+
} | {
|
|
1468
|
+
type: "clear pending incoming patches";
|
|
1469
|
+
params: xstate72.NonReducibleUnknown;
|
|
1470
|
+
} | {
|
|
1471
|
+
type: "handle blur";
|
|
1472
|
+
params: unknown;
|
|
1473
|
+
} | {
|
|
1474
|
+
type: "handle focus";
|
|
1475
|
+
params: unknown;
|
|
1476
|
+
} | {
|
|
1477
|
+
type: "handle behavior event";
|
|
1478
|
+
params: unknown;
|
|
1479
|
+
} | {
|
|
1480
|
+
type: "sort behaviors";
|
|
1481
|
+
params: xstate72.NonReducibleUnknown;
|
|
1482
|
+
}, {
|
|
1483
|
+
type: "slate is busy";
|
|
1484
|
+
params: unknown;
|
|
1485
|
+
} | {
|
|
1486
|
+
type: "slate is normalizing node";
|
|
1487
|
+
params: unknown;
|
|
1488
|
+
}, never, {
|
|
1489
|
+
"edit mode": {
|
|
1490
|
+
editable: "dragging internally" | "idle" | {
|
|
1491
|
+
focusing: "checking if busy" | "busy";
|
|
1492
|
+
};
|
|
1493
|
+
} | {
|
|
1494
|
+
"read only": "read only" | "determine initial edit mode";
|
|
1495
|
+
};
|
|
1496
|
+
setup: "setting up" | {
|
|
1497
|
+
"set up": {
|
|
1498
|
+
"value sync": "syncing value" | "idle";
|
|
1499
|
+
writing: "dirty" | {
|
|
1500
|
+
pristine: "idle";
|
|
1501
|
+
};
|
|
1502
|
+
};
|
|
1503
|
+
};
|
|
1504
|
+
}, "dragging internally", {
|
|
1505
|
+
converters?: Array<Converter>;
|
|
1506
|
+
getLegacySchema: () => PortableTextMemberSchemaTypes;
|
|
1507
|
+
keyGenerator: () => string;
|
|
1508
|
+
readOnly?: boolean;
|
|
1509
|
+
schema: EditorSchema;
|
|
1510
|
+
initialValue?: Array<PortableTextBlock>;
|
|
1511
|
+
}, xstate72.NonReducibleUnknown, InternalPatchEvent | MutationEvent | PatchesEvent | {
|
|
1512
|
+
type: "blurred";
|
|
1513
|
+
event: react10.FocusEvent<HTMLDivElement, Element>;
|
|
1514
|
+
} | {
|
|
1515
|
+
type: "done loading";
|
|
1516
|
+
} | {
|
|
1517
|
+
type: "editable";
|
|
1518
|
+
} | {
|
|
1519
|
+
type: "error";
|
|
1520
|
+
name: string;
|
|
1521
|
+
description: string;
|
|
1522
|
+
data: unknown;
|
|
1523
|
+
} | {
|
|
1524
|
+
type: "focused";
|
|
1525
|
+
event: react10.FocusEvent<HTMLDivElement, Element>;
|
|
1526
|
+
} | {
|
|
1527
|
+
type: "invalid value";
|
|
1528
|
+
resolution: InvalidValueResolution | null;
|
|
1529
|
+
value: Array<PortableTextBlock> | undefined;
|
|
1530
|
+
} | {
|
|
1531
|
+
type: "loading";
|
|
1532
|
+
} | {
|
|
1533
|
+
type: "read only";
|
|
1534
|
+
} | {
|
|
1535
|
+
type: "ready";
|
|
1536
|
+
} | {
|
|
1537
|
+
type: "selection";
|
|
1538
|
+
selection: EditorSelection;
|
|
1539
|
+
} | {
|
|
1540
|
+
type: "value changed";
|
|
1541
|
+
value: Array<PortableTextBlock> | undefined;
|
|
1542
|
+
}, xstate72.MetaObject, {
|
|
1543
|
+
id: "editor";
|
|
1544
|
+
states: {
|
|
1545
|
+
readonly 'edit mode': {
|
|
1546
|
+
states: {
|
|
1547
|
+
readonly 'read only': {
|
|
1548
|
+
states: {
|
|
1549
|
+
readonly 'determine initial edit mode': {};
|
|
1550
|
+
readonly 'read only': {};
|
|
1551
|
+
};
|
|
1552
|
+
};
|
|
1553
|
+
readonly editable: {
|
|
1554
|
+
states: {
|
|
1555
|
+
readonly idle: {};
|
|
1556
|
+
readonly focusing: {
|
|
1557
|
+
states: {
|
|
1558
|
+
readonly 'checking if busy': {};
|
|
1559
|
+
readonly busy: {};
|
|
1560
|
+
};
|
|
1561
|
+
};
|
|
1562
|
+
readonly 'dragging internally': {};
|
|
1563
|
+
};
|
|
1564
|
+
};
|
|
1565
|
+
};
|
|
1566
|
+
};
|
|
1567
|
+
readonly setup: {
|
|
1568
|
+
states: {
|
|
1569
|
+
readonly 'setting up': {};
|
|
1570
|
+
readonly 'set up': {
|
|
1571
|
+
states: {
|
|
1572
|
+
readonly 'value sync': {
|
|
1573
|
+
states: {
|
|
1574
|
+
readonly idle: {};
|
|
1575
|
+
readonly 'syncing value': {};
|
|
1576
|
+
};
|
|
1577
|
+
};
|
|
1578
|
+
readonly writing: {
|
|
1579
|
+
states: {
|
|
1580
|
+
readonly pristine: {
|
|
1581
|
+
states: {
|
|
1582
|
+
readonly idle: {};
|
|
1583
|
+
};
|
|
1584
|
+
};
|
|
1585
|
+
readonly dirty: {};
|
|
1586
|
+
};
|
|
1587
|
+
};
|
|
1588
|
+
};
|
|
1589
|
+
};
|
|
1590
|
+
};
|
|
1591
|
+
};
|
|
1592
|
+
};
|
|
1593
|
+
}>;
|
|
1594
|
+
type EventPosition = {
|
|
1595
|
+
block: 'start' | 'end';
|
|
1596
|
+
/**
|
|
1597
|
+
* Did the event origin from the editor DOM node itself or from a child node?
|
|
1598
|
+
*/
|
|
1599
|
+
isEditor: boolean;
|
|
1600
|
+
selection: NonNullable<EditorSelection>;
|
|
1601
|
+
};
|
|
1602
|
+
type TextBlockWithOptionalKey = Omit<PortableTextTextBlock, '_key'> & {
|
|
1603
|
+
_key?: PortableTextTextBlock['_key'];
|
|
1604
|
+
};
|
|
1605
|
+
type ObjectBlockWithOptionalKey = Omit<PortableTextObject, '_key'> & {
|
|
1606
|
+
_key?: PortableTextObject['_key'];
|
|
1607
|
+
};
|
|
1608
|
+
type BlockWithOptionalKey = TextBlockWithOptionalKey | ObjectBlockWithOptionalKey;
|
|
1609
|
+
type SpanWithOptionalKey = Omit<PortableTextSpan, '_key'> & {
|
|
1610
|
+
_key?: PortableTextSpan['_key'];
|
|
1611
|
+
};
|
|
1612
|
+
type ChildWithOptionalKey = SpanWithOptionalKey | ObjectBlockWithOptionalKey;
|
|
1613
|
+
/**
|
|
1614
|
+
* @beta
|
|
1615
|
+
*/
|
|
1616
|
+
type BehaviorEvent = SyntheticBehaviorEvent | NativeBehaviorEvent | CustomBehaviorEvent;
|
|
1617
|
+
type BehaviorEventTypeNamespace = SyntheticBehaviorEventNamespace | NativeBehaviorEventNamespace | CustomBehaviorEventNamespace;
|
|
1618
|
+
type NamespacedBehaviorEventType<TNamespace$1 extends BehaviorEventTypeNamespace | ''> = TNamespace$1 extends '' ? BehaviorEvent['type'] : Extract<BehaviorEvent['type'], TNamespace$1 | `${TNamespace$1}.${string}`>;
|
|
1619
|
+
/**************************************
|
|
1620
|
+
* External events
|
|
1621
|
+
**************************************/
|
|
1622
|
+
type ExternalBehaviorEventNamespace = 'blur' | 'focus' | 'insert';
|
|
1623
|
+
type ExternalBehaviorEventType<TNamespace$1 extends ExternalBehaviorEventNamespace, TType$1 extends string = ''> = TType$1 extends '' ? `${TNamespace$1}` : `${TNamespace$1}.${TType$1}`;
|
|
1624
|
+
type ExternalBehaviorEvent = {
|
|
1625
|
+
type: ExternalBehaviorEventType<'blur'>;
|
|
1626
|
+
} | {
|
|
1627
|
+
type: ExternalBehaviorEventType<'focus'>;
|
|
1628
|
+
} | {
|
|
1629
|
+
type: ExternalBehaviorEventType<'insert', 'block object'>;
|
|
1630
|
+
placement: InsertPlacement;
|
|
1631
|
+
blockObject: {
|
|
1632
|
+
name: string;
|
|
1633
|
+
value?: {
|
|
1634
|
+
[prop: string]: unknown;
|
|
1635
|
+
};
|
|
1636
|
+
};
|
|
1637
|
+
} | BehaviorEvent;
|
|
1638
|
+
/**************************************
|
|
1639
|
+
* Synthetic events
|
|
1640
|
+
**************************************/
|
|
1641
|
+
declare const syntheticBehaviorEventTypes: readonly ["annotation.add", "annotation.remove", "block.set", "block.unset", "child.set", "child.unset", "decorator.add", "decorator.remove", "delete", "history.redo", "history.undo", "insert.block", "insert.child", "insert.text", "move.backward", "move.block", "move.forward", "select"];
|
|
1642
|
+
type SyntheticBehaviorEventType = (typeof syntheticBehaviorEventTypes)[number] | (typeof abstractBehaviorEventTypes)[number];
|
|
1643
|
+
type SyntheticBehaviorEventNamespace = ExtractNamespace<SyntheticBehaviorEventType>;
|
|
1644
|
+
/**
|
|
1645
|
+
* @beta
|
|
1646
|
+
*/
|
|
1647
|
+
type SyntheticBehaviorEvent = {
|
|
1648
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'annotation.add'>;
|
|
1649
|
+
annotation: {
|
|
1650
|
+
name: string;
|
|
1651
|
+
_key?: string;
|
|
1652
|
+
value: {
|
|
1653
|
+
[prop: string]: unknown;
|
|
1654
|
+
};
|
|
1655
|
+
};
|
|
1656
|
+
} | {
|
|
1657
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'annotation.remove'>;
|
|
1658
|
+
annotation: {
|
|
1659
|
+
name: string;
|
|
1660
|
+
};
|
|
1661
|
+
} | {
|
|
1662
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'block.set'>;
|
|
1663
|
+
at: BlockPath;
|
|
1664
|
+
props: Record<string, unknown>;
|
|
1665
|
+
} | {
|
|
1666
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'block.unset'>;
|
|
1667
|
+
at: BlockPath;
|
|
1668
|
+
props: Array<string>;
|
|
1669
|
+
} | {
|
|
1670
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'child.set'>;
|
|
1671
|
+
at: ChildPath;
|
|
1672
|
+
props: {
|
|
1673
|
+
[prop: string]: unknown;
|
|
1674
|
+
};
|
|
1675
|
+
} | {
|
|
1676
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'child.unset'>;
|
|
1677
|
+
at: ChildPath;
|
|
1678
|
+
props: Array<string>;
|
|
1679
|
+
} | {
|
|
1680
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'decorator.add'>;
|
|
1681
|
+
decorator: string;
|
|
1682
|
+
at?: NonNullable<EditorSelection>;
|
|
1683
|
+
} | {
|
|
1684
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'decorator.remove'>;
|
|
1685
|
+
decorator: string;
|
|
1686
|
+
} | {
|
|
1687
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'delete'>;
|
|
1688
|
+
at?: NonNullable<EditorSelection>;
|
|
1689
|
+
/**
|
|
1690
|
+
* Defaults to forward deletion.
|
|
1691
|
+
*/
|
|
1692
|
+
direction?: 'backward' | 'forward';
|
|
1693
|
+
/**
|
|
1694
|
+
* Defaults to character deletion.
|
|
1695
|
+
*/
|
|
1696
|
+
unit?: 'character' | 'word' | 'line' | 'block' | 'child';
|
|
1697
|
+
} | {
|
|
1698
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'history.redo'>;
|
|
1699
|
+
} | {
|
|
1700
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'history.undo'>;
|
|
1701
|
+
} | {
|
|
1702
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'insert.block'>;
|
|
1703
|
+
block: BlockWithOptionalKey;
|
|
1704
|
+
placement: InsertPlacement;
|
|
1705
|
+
select?: 'start' | 'end' | 'none';
|
|
1706
|
+
at?: NonNullable<EditorSelection>;
|
|
1707
|
+
} | {
|
|
1708
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'insert.child'>;
|
|
1709
|
+
child: ChildWithOptionalKey;
|
|
1710
|
+
} | {
|
|
1711
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'insert.text'>;
|
|
1712
|
+
text: string;
|
|
1713
|
+
} | {
|
|
1714
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'move.backward'>;
|
|
1715
|
+
distance: number;
|
|
1716
|
+
} | {
|
|
1717
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'move.block'>;
|
|
1718
|
+
at: BlockPath;
|
|
1719
|
+
to: BlockPath;
|
|
1720
|
+
} | {
|
|
1721
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'move.forward'>;
|
|
1722
|
+
distance: number;
|
|
1723
|
+
} | {
|
|
1724
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'select'>;
|
|
1725
|
+
at: EditorSelection;
|
|
1726
|
+
} | AbstractBehaviorEvent;
|
|
1727
|
+
/**
|
|
1728
|
+
* @beta
|
|
1729
|
+
*/
|
|
1730
|
+
type InsertPlacement = 'auto' | 'after' | 'before';
|
|
1731
|
+
/**************************************
|
|
1732
|
+
* Abstract events
|
|
1733
|
+
**************************************/
|
|
1734
|
+
declare const abstractBehaviorEventTypes: readonly ["annotation.set", "annotation.toggle", "decorator.toggle", "delete.backward", "delete.block", "delete.child", "delete.forward", "delete.text", "deserialize", "deserialize.data", "deserialization.success", "deserialization.failure", "insert.blocks", "insert.break", "insert.inline object", "insert.soft break", "insert.span", "list item.add", "list item.remove", "list item.toggle", "move.block down", "move.block up", "select.block", "select.previous block", "select.next block", "serialize", "serialize.data", "serialization.success", "serialization.failure", "split", "style.add", "style.remove", "style.toggle"];
|
|
1735
|
+
type AbstractBehaviorEvent = {
|
|
1736
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'annotation.set'>;
|
|
1737
|
+
at: AnnotationPath;
|
|
1738
|
+
props: Record<string, unknown>;
|
|
1739
|
+
} | {
|
|
1740
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'annotation.toggle'>;
|
|
1741
|
+
annotation: {
|
|
1742
|
+
name: string;
|
|
1743
|
+
value: {
|
|
1744
|
+
[prop: string]: unknown;
|
|
1745
|
+
};
|
|
1746
|
+
};
|
|
1747
|
+
} | {
|
|
1748
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'decorator.toggle'>;
|
|
1749
|
+
decorator: string;
|
|
1750
|
+
at?: NonNullable<EditorSelection>;
|
|
1751
|
+
} | {
|
|
1752
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'delete.backward'>;
|
|
1753
|
+
unit: 'character' | 'word' | 'line' | 'block';
|
|
1754
|
+
} | {
|
|
1755
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'delete.block'>;
|
|
1756
|
+
at: BlockPath;
|
|
1757
|
+
} | {
|
|
1758
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'delete.child'>;
|
|
1759
|
+
at: ChildPath;
|
|
1760
|
+
} | {
|
|
1761
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'delete.forward'>;
|
|
1762
|
+
unit: 'character' | 'word' | 'line' | 'block';
|
|
1763
|
+
} | {
|
|
1764
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'delete.text'>;
|
|
1765
|
+
at: NonNullable<EditorSelection>;
|
|
1766
|
+
} | {
|
|
1767
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'deserialize'>;
|
|
1768
|
+
originEvent: PickFromUnion<NativeBehaviorEvent, 'type', 'drag.drop' | 'clipboard.paste'> | InputBehaviorEvent;
|
|
1769
|
+
} | {
|
|
1770
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'deserialize.data'>;
|
|
1771
|
+
mimeType: MIMEType;
|
|
1772
|
+
data: string;
|
|
1773
|
+
originEvent: PickFromUnion<NativeBehaviorEvent, 'type', 'drag.drop' | 'clipboard.paste'> | InputBehaviorEvent;
|
|
1774
|
+
} | {
|
|
1775
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'serialize'>;
|
|
1776
|
+
originEvent: PickFromUnion<NativeBehaviorEvent, 'type', 'clipboard.copy' | 'clipboard.cut' | 'drag.dragstart'>;
|
|
1777
|
+
} | {
|
|
1778
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'serialize.data'>;
|
|
1779
|
+
mimeType: MIMEType;
|
|
1780
|
+
originEvent: PickFromUnion<NativeBehaviorEvent, 'type', 'clipboard.copy' | 'clipboard.cut' | 'drag.dragstart'>;
|
|
1781
|
+
} | {
|
|
1782
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'deserialization.success'>;
|
|
1783
|
+
mimeType: MIMEType;
|
|
1784
|
+
data: Array<PortableTextBlock>;
|
|
1785
|
+
originEvent: PickFromUnion<NativeBehaviorEvent, 'type', 'drag.drop' | 'clipboard.paste'> | InputBehaviorEvent;
|
|
1786
|
+
} | {
|
|
1787
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'deserialization.failure'>;
|
|
1788
|
+
mimeType: MIMEType;
|
|
1789
|
+
reason: string;
|
|
1790
|
+
originEvent: PickFromUnion<NativeBehaviorEvent, 'type', 'drag.drop' | 'clipboard.paste'> | InputBehaviorEvent;
|
|
1791
|
+
} | {
|
|
1792
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'serialization.success'>;
|
|
1793
|
+
mimeType: MIMEType;
|
|
1794
|
+
data: string;
|
|
1795
|
+
originEvent: PickFromUnion<NativeBehaviorEvent, 'type', 'clipboard.copy' | 'clipboard.cut' | 'drag.dragstart'>;
|
|
1796
|
+
} | {
|
|
1797
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'serialization.failure'>;
|
|
1798
|
+
mimeType: MIMEType;
|
|
1799
|
+
reason: string;
|
|
1800
|
+
originEvent: PickFromUnion<NativeBehaviorEvent, 'type', 'clipboard.copy' | 'clipboard.cut' | 'drag.dragstart'>;
|
|
1801
|
+
} | {
|
|
1802
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'insert.blocks'>;
|
|
1803
|
+
blocks: Array<BlockWithOptionalKey>;
|
|
1804
|
+
placement: InsertPlacement;
|
|
1805
|
+
select?: 'start' | 'end' | 'none';
|
|
1806
|
+
} | {
|
|
1807
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'insert.break'>;
|
|
1808
|
+
} | {
|
|
1809
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'insert.inline object'>;
|
|
1810
|
+
inlineObject: {
|
|
1811
|
+
name: string;
|
|
1812
|
+
value?: {
|
|
1813
|
+
[prop: string]: unknown;
|
|
1814
|
+
};
|
|
1815
|
+
};
|
|
1816
|
+
} | {
|
|
1817
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'insert.soft break'>;
|
|
1818
|
+
} | {
|
|
1819
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'insert.span'>;
|
|
1820
|
+
text: string;
|
|
1821
|
+
annotations?: Array<{
|
|
1822
|
+
name: string;
|
|
1823
|
+
value: {
|
|
1824
|
+
[prop: string]: unknown;
|
|
1825
|
+
};
|
|
1826
|
+
}>;
|
|
1827
|
+
decorators?: Array<string>;
|
|
1828
|
+
} | {
|
|
1829
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'list item.add'>;
|
|
1830
|
+
listItem: string;
|
|
1831
|
+
} | {
|
|
1832
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'list item.remove'>;
|
|
1833
|
+
listItem: string;
|
|
1834
|
+
} | {
|
|
1835
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'list item.toggle'>;
|
|
1836
|
+
listItem: string;
|
|
1837
|
+
} | {
|
|
1838
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'move.block down'>;
|
|
1839
|
+
at: BlockPath;
|
|
1840
|
+
} | {
|
|
1841
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'move.block up'>;
|
|
1842
|
+
at: BlockPath;
|
|
1843
|
+
} | {
|
|
1844
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'select.block'>;
|
|
1845
|
+
at: BlockPath;
|
|
1846
|
+
select?: 'start' | 'end';
|
|
1847
|
+
} | {
|
|
1848
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'select.previous block'>;
|
|
1849
|
+
select?: 'start' | 'end';
|
|
1850
|
+
} | {
|
|
1851
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'select.next block'>;
|
|
1852
|
+
select?: 'start' | 'end';
|
|
1853
|
+
} | {
|
|
1854
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'split'>;
|
|
1855
|
+
} | {
|
|
1856
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'style.add'>;
|
|
1857
|
+
style: string;
|
|
1858
|
+
} | {
|
|
1859
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'style.remove'>;
|
|
1860
|
+
style: string;
|
|
1861
|
+
} | {
|
|
1862
|
+
type: StrictExtract<SyntheticBehaviorEventType, 'style.toggle'>;
|
|
1863
|
+
style: string;
|
|
1864
|
+
};
|
|
1865
|
+
/**************************************
|
|
1866
|
+
* Native events
|
|
1867
|
+
**************************************/
|
|
1868
|
+
declare const nativeBehaviorEventTypes: readonly ["clipboard.copy", "clipboard.cut", "clipboard.paste", "drag.dragstart", "drag.drag", "drag.dragend", "drag.dragenter", "drag.dragover", "drag.dragleave", "drag.drop", "input.*", "keyboard.keydown", "keyboard.keyup", "mouse.click"];
|
|
1869
|
+
type NativeBehaviorEventType = (typeof nativeBehaviorEventTypes)[number];
|
|
1870
|
+
type NativeBehaviorEventNamespace = ExtractNamespace<NativeBehaviorEventType>;
|
|
1871
|
+
/**
|
|
1872
|
+
* @beta
|
|
1873
|
+
*/
|
|
1874
|
+
type NativeBehaviorEvent = ClipboardBehaviorEvent | DragBehaviorEvent | InputBehaviorEvent | KeyboardBehaviorEvent | MouseBehaviorEvent;
|
|
1875
|
+
type ClipboardBehaviorEvent = {
|
|
1876
|
+
type: StrictExtract<NativeBehaviorEventType, 'clipboard.copy'>;
|
|
1877
|
+
originEvent: {
|
|
1878
|
+
dataTransfer: DataTransfer;
|
|
1879
|
+
};
|
|
1880
|
+
position: Pick<EventPosition, 'selection'>;
|
|
1881
|
+
} | {
|
|
1882
|
+
type: StrictExtract<NativeBehaviorEventType, 'clipboard.cut'>;
|
|
1883
|
+
originEvent: {
|
|
1884
|
+
dataTransfer: DataTransfer;
|
|
1885
|
+
};
|
|
1886
|
+
position: Pick<EventPosition, 'selection'>;
|
|
1887
|
+
} | {
|
|
1888
|
+
type: StrictExtract<NativeBehaviorEventType, 'clipboard.paste'>;
|
|
1889
|
+
originEvent: {
|
|
1890
|
+
dataTransfer: DataTransfer;
|
|
1891
|
+
};
|
|
1892
|
+
position: Pick<EventPosition, 'selection'>;
|
|
1893
|
+
};
|
|
1894
|
+
type DragBehaviorEvent = {
|
|
1895
|
+
type: StrictExtract<NativeBehaviorEventType, 'drag.dragstart'>;
|
|
1896
|
+
originEvent: {
|
|
1897
|
+
clientX: number;
|
|
1898
|
+
clientY: number;
|
|
1899
|
+
dataTransfer: DataTransfer;
|
|
1900
|
+
};
|
|
1901
|
+
position: Pick<EventPosition, 'selection'>;
|
|
1902
|
+
} | {
|
|
1903
|
+
type: StrictExtract<NativeBehaviorEventType, 'drag.drag'>;
|
|
1904
|
+
originEvent: {
|
|
1905
|
+
dataTransfer: DataTransfer;
|
|
1906
|
+
};
|
|
1907
|
+
} | {
|
|
1908
|
+
type: StrictExtract<NativeBehaviorEventType, 'drag.dragend'>;
|
|
1909
|
+
originEvent: {
|
|
1910
|
+
dataTransfer: DataTransfer;
|
|
1911
|
+
};
|
|
1912
|
+
} | {
|
|
1913
|
+
type: StrictExtract<NativeBehaviorEventType, 'drag.dragenter'>;
|
|
1914
|
+
originEvent: {
|
|
1915
|
+
dataTransfer: DataTransfer;
|
|
1916
|
+
};
|
|
1917
|
+
position: EventPosition;
|
|
1918
|
+
} | {
|
|
1919
|
+
type: StrictExtract<NativeBehaviorEventType, 'drag.dragover'>;
|
|
1920
|
+
originEvent: {
|
|
1921
|
+
dataTransfer: DataTransfer;
|
|
1922
|
+
};
|
|
1923
|
+
dragOrigin?: Pick<EventPosition, 'selection'>;
|
|
1924
|
+
position: EventPosition;
|
|
1925
|
+
} | {
|
|
1926
|
+
type: StrictExtract<NativeBehaviorEventType, 'drag.drop'>;
|
|
1927
|
+
originEvent: {
|
|
1928
|
+
dataTransfer: DataTransfer;
|
|
1929
|
+
};
|
|
1930
|
+
dragOrigin?: Pick<EventPosition, 'selection'>;
|
|
1931
|
+
position: EventPosition;
|
|
1932
|
+
} | {
|
|
1933
|
+
type: StrictExtract<NativeBehaviorEventType, 'drag.dragleave'>;
|
|
1934
|
+
originEvent: {
|
|
1935
|
+
dataTransfer: DataTransfer;
|
|
1936
|
+
};
|
|
1937
|
+
};
|
|
1938
|
+
/**
|
|
1939
|
+
* Used to represent native InputEvents that hold a DataTransfer object.
|
|
1940
|
+
*
|
|
1941
|
+
* These can either be one of:
|
|
1942
|
+
*
|
|
1943
|
+
* - insertFromPaste
|
|
1944
|
+
* - insertFromPasteAsQuotation
|
|
1945
|
+
* - insertFromDrop
|
|
1946
|
+
* - insertReplacementText
|
|
1947
|
+
* - insertFromYank
|
|
1948
|
+
*/
|
|
1949
|
+
type InputBehaviorEvent = {
|
|
1950
|
+
type: StrictExtract<NativeBehaviorEventType, 'input.*'>;
|
|
1951
|
+
originEvent: {
|
|
1952
|
+
dataTransfer: DataTransfer;
|
|
1953
|
+
};
|
|
1954
|
+
};
|
|
1955
|
+
type KeyboardBehaviorEvent = {
|
|
1956
|
+
type: StrictExtract<NativeBehaviorEventType, 'keyboard.keydown'>;
|
|
1957
|
+
originEvent: Pick<KeyboardEvent, 'key' | 'code' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'>;
|
|
1958
|
+
} | {
|
|
1959
|
+
type: StrictExtract<NativeBehaviorEventType, 'keyboard.keyup'>;
|
|
1960
|
+
originEvent: Pick<KeyboardEvent, 'key' | 'code' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'>;
|
|
1961
|
+
};
|
|
1962
|
+
type MouseBehaviorEvent = {
|
|
1963
|
+
type: StrictExtract<NativeBehaviorEventType, 'mouse.click'>;
|
|
1964
|
+
position: EventPosition;
|
|
1965
|
+
};
|
|
1966
|
+
/**************************************
|
|
1967
|
+
* Custom events
|
|
1968
|
+
**************************************/
|
|
1969
|
+
type CustomBehaviorEventNamespace = 'custom';
|
|
1970
|
+
type CustomBehaviorEventType<TNamespace$1 extends CustomBehaviorEventNamespace, TType$1 extends string = ''> = TType$1 extends '' ? `${TNamespace$1}` : `${TNamespace$1}.${TType$1}`;
|
|
1971
|
+
/**
|
|
1972
|
+
* @beta
|
|
1973
|
+
*/
|
|
1974
|
+
type CustomBehaviorEvent<TPayload extends Record<string, unknown> = Record<string, unknown>, TType$1 extends string = string, TInternalType extends CustomBehaviorEventType<'custom', TType$1> = CustomBehaviorEventType<'custom', TType$1>> = {
|
|
1975
|
+
type: TInternalType;
|
|
1976
|
+
} & TPayload;
|
|
1977
|
+
/**************************************
|
|
1978
|
+
* Resolve behavior event
|
|
1979
|
+
**************************************/
|
|
1980
|
+
type ResolveBehaviorEvent<TBehaviorEventType extends '*' | `${BehaviorEventTypeNamespace}.*` | BehaviorEvent['type'], TPayload extends Record<string, unknown> = Record<string, unknown>> = TBehaviorEventType extends '*' ? BehaviorEvent : TBehaviorEventType extends `${infer TNamespace}.*` ? TNamespace extends BehaviorEventTypeNamespace ? PickFromUnion<BehaviorEvent, 'type', NamespacedBehaviorEventType<TNamespace>> : never : TBehaviorEventType extends `custom.${infer TType}` ? CustomBehaviorEvent<TPayload, TType> : TBehaviorEventType extends BehaviorEvent['type'] ? PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType> : never;
|
|
1981
|
+
type ExtractNamespace<TType$1 extends string> = TType$1 extends `${infer Namespace}.${string}` ? Namespace : TType$1;
|
|
1982
|
+
type EditorDom = {
|
|
1983
|
+
getBlockNodes: (snapshot: EditorSnapshot) => Array<Node>;
|
|
1984
|
+
getChildNodes: (snapshot: EditorSnapshot) => Array<Node>;
|
|
1985
|
+
getEditorElement: () => Element | undefined;
|
|
1986
|
+
getSelectionRect: (snapshot: EditorSnapshot) => DOMRect | null;
|
|
1987
|
+
getStartBlockElement: (snapshot: EditorSnapshot) => Element | null;
|
|
1988
|
+
getEndBlockElement: (snapshot: EditorSnapshot) => Element | null;
|
|
1989
|
+
/**
|
|
1990
|
+
* Let the Editor set the drag ghost. This is to be sure that it will get
|
|
1991
|
+
* properly removed again when the drag ends.
|
|
1992
|
+
*/
|
|
1993
|
+
setDragGhost: ({
|
|
1994
|
+
event,
|
|
1995
|
+
ghost
|
|
1996
|
+
}: {
|
|
1997
|
+
event: PickFromUnion<BehaviorEvent, 'type', 'drag.dragstart'>;
|
|
1998
|
+
ghost: {
|
|
1999
|
+
element: HTMLElement;
|
|
2000
|
+
x: number;
|
|
2001
|
+
y: number;
|
|
2002
|
+
};
|
|
2003
|
+
}) => void;
|
|
2004
|
+
};
|
|
2005
|
+
/**
|
|
2006
|
+
* @beta
|
|
2007
|
+
*/
|
|
2008
|
+
type BehaviorAction = {
|
|
2009
|
+
type: 'execute';
|
|
2010
|
+
event: SyntheticBehaviorEvent;
|
|
2011
|
+
} | {
|
|
2012
|
+
type: 'forward';
|
|
2013
|
+
event: NativeBehaviorEvent | SyntheticBehaviorEvent | CustomBehaviorEvent;
|
|
2014
|
+
} | {
|
|
2015
|
+
type: 'raise';
|
|
2016
|
+
event: SyntheticBehaviorEvent | CustomBehaviorEvent;
|
|
2017
|
+
} | {
|
|
2018
|
+
type: 'effect';
|
|
2019
|
+
effect: (payload: {
|
|
2020
|
+
/**
|
|
2021
|
+
* Send a Behavior Event back into the Editor.
|
|
2022
|
+
*
|
|
2023
|
+
* @example
|
|
2024
|
+
* ```ts
|
|
2025
|
+
* defineBehavior({
|
|
2026
|
+
* on: '...',
|
|
2027
|
+
* actions: [
|
|
2028
|
+
* () => [
|
|
2029
|
+
* effect(({send}) => {
|
|
2030
|
+
* doSomethingAsync()
|
|
2031
|
+
* .then(() => {
|
|
2032
|
+
* send({
|
|
2033
|
+
* type: '...',
|
|
2034
|
+
* })
|
|
2035
|
+
* })
|
|
2036
|
+
* })
|
|
2037
|
+
* ],
|
|
2038
|
+
* ],
|
|
2039
|
+
* })
|
|
2040
|
+
* ```
|
|
2041
|
+
*/
|
|
2042
|
+
send: (event: ExternalBehaviorEvent) => void;
|
|
2043
|
+
}) => void;
|
|
2044
|
+
};
|
|
2045
|
+
/**
|
|
2046
|
+
* @beta
|
|
2047
|
+
*/
|
|
2048
|
+
declare function execute(event: SyntheticBehaviorEvent): PickFromUnion<BehaviorAction, 'type', 'execute'>;
|
|
2049
|
+
/**
|
|
2050
|
+
* @beta
|
|
2051
|
+
*/
|
|
2052
|
+
declare function forward(event: NativeBehaviorEvent | SyntheticBehaviorEvent | CustomBehaviorEvent): PickFromUnion<BehaviorAction, 'type', 'forward'>;
|
|
2053
|
+
/**
|
|
2054
|
+
* @beta
|
|
2055
|
+
*/
|
|
2056
|
+
declare function raise(event: SyntheticBehaviorEvent | CustomBehaviorEvent): PickFromUnion<BehaviorAction, 'type', 'raise'>;
|
|
2057
|
+
/**
|
|
2058
|
+
* @beta
|
|
2059
|
+
*/
|
|
2060
|
+
declare function effect(effect: PickFromUnion<BehaviorAction, 'type', 'effect'>['effect']): PickFromUnion<BehaviorAction, 'type', 'effect'>;
|
|
2061
|
+
/**
|
|
2062
|
+
* @beta
|
|
2063
|
+
*/
|
|
2064
|
+
type BehaviorActionSet<TBehaviorEvent, TGuardResponse> = (payload: {
|
|
2065
|
+
snapshot: EditorSnapshot;
|
|
2066
|
+
event: TBehaviorEvent;
|
|
2067
|
+
dom: EditorDom;
|
|
2068
|
+
}, guardResponse: TGuardResponse) => Array<BehaviorAction>;
|
|
2069
|
+
export { BlockAnnotationRenderProps as $, AnnotationPath as $t, PortableTextTextBlock$1 as A, ReadyChange as At, EditorSelector as B, ScrollSelectionIntoViewFunction as Bt, ListDefinition as C, OnPasteResultOrPromise as Ct, PortableTextChild$1 as D, PortableTextMemberSchemaTypes as Dt, PortableTextBlock$1 as E, PatchObservable as Et, BlockOffset as F, RenderDecoratorFunction as Ft, EditorConfig as G, PortableTextEditable as Gt, EditorProvider as H, UndoChange as Ht, useEditor as I, RenderEditableFunction as It, defineBehavior as J, PortableTextEditor as Jt, EditorEvent as K, PortableTextEditableProps as Kt, defaultKeyGenerator as L, RenderListItemFunction as Lt, StyleDefinition as M, RenderAnnotationFunction as Mt, StyleSchemaType as N, RenderBlockFunction as Nt, PortableTextObject$1 as O, RangeDecoration as Ot, defineSchema as P, RenderChildFunction as Pt, AddedAnnotationPaths as Q, EditorSchema as Qt, usePortableTextEditorSelection as R, RenderPlaceholderFunction as Rt, InlineObjectSchemaType as S, OnPasteResult as St, Patch$1 as T, PatchChange as Tt, EditorProviderProps as U, UnsetChange as Ut, useEditorSelector as V, SelectionChange as Vt, Editor as W, ValueChange as Wt, EditorContext as X, EditorEmittedEvent as Xt, BehaviorGuard as Y, PortableTextEditorProps as Yt, EditorSnapshot as Z, MutationEvent as Zt, BlockObjectSchemaType as _, LoadingChange as _t, forward as a, BlurChange as at, FieldDefinition as b, OnCopyFn as bt, CustomBehaviorEvent as c, EditableAPIDeleteOptions as ct, SyntheticBehaviorEvent as d, EditorSelection as dt, BlockPath as en, BlockChildRenderProps as et, PatchesEvent as f, EditorSelectionPoint as ft, BlockObjectDefinition as g, InvalidValueResolution as gt, BaseDefinition as h, InvalidValue as ht, execute as i, BlockStyleRenderProps as it, SchemaDefinition$1 as j, RedoChange as jt, PortableTextSpan$1 as k, RangeDecorationOnMovedDetails as kt, InsertPlacement as l, EditorChange as lt, AnnotationSchemaType as m, FocusChange as mt, BehaviorActionSet as n, KeyedSegment as nn, BlockListItemRenderProps as nt, raise as o, ConnectionChange as ot, AnnotationDefinition as p, ErrorChange as pt, Behavior as q, HotkeyOptions as qt, effect as r, BlockRenderProps as rt, BehaviorEvent as s, EditableAPI as st, BehaviorAction as t, ChildPath as tn, BlockDecoratorRenderProps as tt, NativeBehaviorEvent as u, EditorChanges as ut, DecoratorDefinition as v, MutationChange as vt, ListSchemaType as w, PasteData as wt, InlineObjectDefinition as x, OnPasteFn as xt, DecoratorSchemaType as y, OnBeforeInputFn as yt, usePortableTextEditor as z, RenderStyleFunction as zt };
|