1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 | import * as Immutable from 'immutable';
|
21 | import * as React from 'react';
|
22 |
|
23 | type SyntheticClipboardEvent = React.ClipboardEvent<{}>;
|
24 | type SyntheticKeyboardEvent = React.KeyboardEvent<{}>;
|
25 | type SyntheticEvent = React.SyntheticEvent<{}>;
|
26 | export as namespace Draft;
|
27 | declare namespace Draft {
|
28 | namespace Component {
|
29 | namespace Base {
|
30 | import DraftEditorCommand = Draft.Model.Constants.DraftEditorCommand;
|
31 | import DraftBlockType = Draft.Model.Constants.DraftBlockType;
|
32 | import DraftDragType = Draft.Model.Constants.DraftDragType;
|
33 | import DraftHandleValue = Draft.Model.Constants.DraftHandleValue;
|
34 |
|
35 | import EditorState = Draft.Model.ImmutableData.EditorState;
|
36 | import ContentBlock = Draft.Model.ImmutableData.ContentBlock;
|
37 | import SelectionState = Draft.Model.ImmutableData.SelectionState;
|
38 | import DraftInlineStyle = Draft.Model.ImmutableData.DraftInlineStyle;
|
39 |
|
40 | import DraftBlockRenderConfig = Draft.Model.ImmutableData.DraftBlockRenderConfig;
|
41 |
|
42 | type DraftBlockRenderMap = Immutable.Map<DraftBlockType, DraftBlockRenderConfig>;
|
43 |
|
44 | type DraftStyleMap = {
|
45 | [styleName: string]: React.CSSProperties;
|
46 | };
|
47 |
|
48 | type EditorCommand = DraftEditorCommand | string;
|
49 |
|
50 | |
51 |
|
52 |
|
53 |
|
54 |
|
55 | class DraftEditor extends React.Component<DraftEditorProps, {}> {
|
56 | editor: HTMLElement | null | undefined;
|
57 | editorContainer: HTMLElement | null | undefined;
|
58 | getEditorKey(): string;
|
59 |
|
60 |
|
61 | focus(): void;
|
62 |
|
63 | blur(): void;
|
64 | }
|
65 |
|
66 | |
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 | export interface DraftEditorProps {
|
77 | editorState: EditorState;
|
78 | onChange(editorState: EditorState): void;
|
79 |
|
80 | placeholder?: string | undefined;
|
81 |
|
82 | |
83 |
|
84 |
|
85 |
|
86 | textAlignment?: DraftTextAlignment | undefined;
|
87 |
|
88 | |
89 |
|
90 |
|
91 |
|
92 | textDirectionality?: DraftTextDirectionality | undefined;
|
93 |
|
94 | |
95 |
|
96 |
|
97 |
|
98 |
|
99 | blockRendererFn?(block: ContentBlock): any;
|
100 |
|
101 | |
102 |
|
103 |
|
104 |
|
105 |
|
106 | blockRenderMap?: DraftBlockRenderMap | undefined;
|
107 |
|
108 | |
109 |
|
110 |
|
111 | blockStyleFn?(block: ContentBlock): string;
|
112 |
|
113 | |
114 |
|
115 |
|
116 |
|
117 | customStyleMap?: DraftStyleMap | undefined;
|
118 |
|
119 | |
120 |
|
121 |
|
122 |
|
123 | customStyleFn?: ((style: DraftInlineStyle, block: ContentBlock) => React.CSSProperties) | undefined;
|
124 |
|
125 | /**
|
126 | * A function that accepts a synthetic key event and returns
|
127 | * the matching DraftEditorCommand constant, or null if no command should
|
128 | * be invoked.
|
129 | */
|
130 | keyBindingFn?(e: SyntheticKeyboardEvent): EditorCommand | null;
|
131 |
|
132 | /**
|
133 | * Set whether the `DraftEditor` component should be editable. Useful for
|
134 | * temporarily disabling edit behavior or allowing `DraftEditor` rendering
|
135 | * to be used for consumption purposes.
|
136 | */
|
137 | readOnly?: boolean | undefined;
|
138 |
|
139 | /**
|
140 | * Note: spellcheck is always disabled for IE. If enabled in Safari, OSX
|
141 | * autocorrect is enabled as well.
|
142 | */
|
143 | spellCheck?: boolean | undefined;
|
144 |
|
145 | /**
|
146 | * When the Editor loses focus (blurs) text selections are cleared
|
147 | * by default to mimic <textarea> behaviour, however in some situations
|
148 | * users may wish to preserve native behaviour.
|
149 | */
|
150 | preserveSelectionOnBlur?: boolean | undefined;
|
151 |
|
152 | /**
|
153 | * Set whether to remove all style information from pasted content. If your
|
154 | * use case should not have any block or inline styles, it is recommended
|
155 | * that you set this to `true`.
|
156 | */
|
157 | stripPastedStyles?: boolean | undefined;
|
158 | formatPastedText?:
|
159 | | ((text: string, html?: string) => { text: string; html: string | undefined })
|
160 | | undefined;
|
161 |
|
162 | tabIndex?: number | undefined;
|
163 |
|
164 | // exposed especially to help improve mobile web behaviors
|
165 | autoCapitalize?: string | undefined;
|
166 | autoComplete?: string | undefined;
|
167 | autoCorrect?: string | undefined;
|
168 |
|
169 | ariaActiveDescendantID?: string | undefined;
|
170 | ariaAutoComplete?: string | undefined;
|
171 | ariaControls?: string | undefined;
|
172 | ariaDescribedBy?: string | undefined;
|
173 | ariaExpanded?: boolean | undefined;
|
174 | ariaLabel?: string | undefined;
|
175 | ariaLabelledBy?: string | undefined;
|
176 | ariaMultiline?: boolean | undefined;
|
177 | ariaOwneeID?: string | undefined;
|
178 |
|
179 | role?: string | undefined;
|
180 |
|
181 | webDriverTestID?: string | undefined;
|
182 |
|
183 | /**
|
184 | * If using server-side rendering, this prop is required to be set to
|
185 | * avoid client/server mismatches.
|
186 | */
|
187 | editorKey?: string | undefined;
|
188 |
|
189 | // Cancelable event handlers, handled from the top level down. A handler
|
190 | // that returns `handled` will be the last handler to execute for that event.
|
191 |
|
192 | /**
|
193 | * Useful for managing special behavior for pressing the `Return` key. E.g.
|
194 | * removing the style from an empty list item.
|
195 | */
|
196 | handleReturn?(e: SyntheticKeyboardEvent, editorState: EditorState): DraftHandleValue;
|
197 |
|
198 | /**
|
199 | * Map a key command string provided by your key binding function to a
|
200 | * specified behavior.
|
201 | */
|
202 | handleKeyCommand?(
|
203 | command: EditorCommand,
|
204 | editorState: EditorState,
|
205 | eventTimeStamp: number,
|
206 | ): DraftHandleValue;
|
207 |
|
208 | /**
|
209 | * Handle intended text insertion before the insertion occurs. This may be
|
210 | * useful in cases where the user has entered characters that you would like
|
211 | * to trigger some special behavior. E.g. immediately converting `:)` to an
|
212 | * emoji Unicode character, or replacing ASCII quote characters with smart
|
213 | * quotes.
|
214 | */
|
215 | handleBeforeInput?(chars: string, editorState: EditorState, eventTimeStamp: number): DraftHandleValue;
|
216 |
|
217 | handlePastedText?(text: string, html: string | undefined, editorState: EditorState): DraftHandleValue;
|
218 |
|
219 | handlePastedFiles?(files: Array<Blob>): DraftHandleValue;
|
220 |
|
221 | /** Handle dropped files */
|
222 | handleDroppedFiles?(selection: SelectionState, files: Array<Blob>): DraftHandleValue;
|
223 |
|
224 | /** Handle other drops to prevent default text movement/insertion behaviour */
|
225 | handleDrop?(
|
226 | selection: SelectionState,
|
227 | dataTransfer: Object,
|
228 | isInternal: DraftDragType,
|
229 | ): DraftHandleValue;
|
230 |
|
231 | // Non-cancelable event triggers.
|
232 | onEscape?(e: SyntheticKeyboardEvent): void;
|
233 | onTab?(e: SyntheticKeyboardEvent): void;
|
234 | onUpArrow?(e: SyntheticKeyboardEvent): void;
|
235 | onDownArrow?(e: SyntheticKeyboardEvent): void;
|
236 | onRightArrow?(e: SyntheticKeyboardEvent): void;
|
237 | onLeftArrow?(e: SyntheticKeyboardEvent): void;
|
238 |
|
239 | onBlur?(e: SyntheticEvent): void;
|
240 | onFocus?(e: SyntheticEvent): void;
|
241 | onCopy?(editor: Editor, e: SyntheticClipboardEvent): void;
|
242 | onCut?(editor: Editor, e: SyntheticClipboardEvent): void;
|
243 | }
|
244 |
|
245 | type DraftTextAlignment = 'left' | 'center' | 'right';
|
246 |
|
247 | type DraftTextDirectionality = 'LTR' | 'RTL' | 'NEUTRAL';
|
248 | }
|
249 |
|
250 | namespace Components {
|
251 | class DraftEditorBlock extends React.Component<any, {}> {}
|
252 | }
|
253 |
|
254 | namespace Selection {
|
255 | interface FakeClientRect {
|
256 | left: number;
|
257 | width: number;
|
258 | right: number;
|
259 | top: number;
|
260 | bottom: number;
|
261 | height: number;
|
262 | }
|
263 |
|
264 | /**
|
265 | * Return the bounding ClientRect for the visible DOM selection, if any.
|
266 | * In cases where there are no selected ranges or the bounding rect is
|
267 | * temporarily invalid, return null.
|
268 | */
|
269 | function getVisibleSelectionRect(global: any): FakeClientRect;
|
270 | }
|
271 |
|
272 | namespace Utils {
|
273 | import DraftEditorCommand = Draft.Model.Constants.DraftEditorCommand;
|
274 |
|
275 | class KeyBindingUtil {
|
276 | /**
|
277 | * Check whether the ctrlKey modifier is *not* being used in conjunction with
|
278 | * the altKey modifier. If they are combined, the result is an `altGraph`
|
279 | * key modifier, which should not be handled by this set of key bindings.
|
280 | */
|
281 | static isCtrlKeyCommand(e: SyntheticKeyboardEvent): boolean;
|
282 |
|
283 | static isOptionKeyCommand(e: SyntheticKeyboardEvent): boolean;
|
284 |
|
285 | static hasCommandModifier(e: SyntheticKeyboardEvent): boolean;
|
286 |
|
287 | static isSoftNewlineEvent(e: SyntheticKeyboardEvent): boolean;
|
288 |
|
289 | /**
|
290 | * Check whether heuristics that only apply to macOS are used
|
291 | * internally, for example when determining the key combination
|
292 | * used as command modifier.
|
293 | */
|
294 | static usesMacOSHeuristics(): boolean;
|
295 | }
|
296 |
|
297 | /**
|
298 | * Retrieve a bound key command for the given event.
|
299 | */
|
300 | function getDefaultKeyBinding(e: SyntheticKeyboardEvent): DraftEditorCommand | null;
|
301 | }
|
302 | }
|
303 |
|
304 | namespace Model {
|
305 | namespace Constants {
|
306 | /**
|
307 | * A set of editor commands that may be invoked by keyboard commands or UI
|
308 | * controls. These commands should map to operations that modify content or
|
309 | * selection state and update the editor state accordingly.
|
310 | */
|
311 | type DraftEditorCommand =
|
312 | /**
|
313 | * Self-explanatory.
|
314 | */
|
315 | | 'undo'
|
316 | | 'redo'
|
317 |
|
318 | /**
|
319 | * Perform a forward deletion.
|
320 | */
|
321 | | 'delete'
|
322 |
|
323 | /**
|
324 | * Perform a forward deletion to the next word boundary after the selection.
|
325 | */
|
326 | | 'delete-word'
|
327 |
|
328 | /**
|
329 | * Perform a backward deletion.
|
330 | */
|
331 | | 'backspace'
|
332 |
|
333 | /**
|
334 | * Perform a backward deletion to the previous word boundary before the
|
335 | * selection.
|
336 | */
|
337 | | 'backspace-word'
|
338 |
|
339 | /**
|
340 | * Perform a backward deletion to the beginning of the current line.
|
341 | */
|
342 | | 'backspace-to-start-of-line'
|
343 |
|
344 | /**
|
345 | * Toggle styles. Commands may be intepreted to modify inline text ranges
|
346 | * or block types.
|
347 | */
|
348 | | 'bold'
|
349 | | 'code'
|
350 | | 'italic'
|
351 | | 'strikethrough'
|
352 | | 'underline'
|
353 |
|
354 | /**
|
355 | * Split a block in two.
|
356 | */
|
357 | | 'split-block'
|
358 |
|
359 | /**
|
360 | * Self-explanatory.
|
361 | */
|
362 | | 'transpose-characters'
|
363 | | 'move-selection-to-start-of-block'
|
364 | | 'move-selection-to-end-of-block'
|
365 |
|
366 | /**
|
367 | * Commands to support the "secondary" clipboard provided by certain
|
368 | * browsers and operating systems.
|
369 | */
|
370 | | 'secondary-cut'
|
371 | | 'secondary-paste';
|
372 |
|
373 | /**
|
374 | * A type that allows us to avoid passing boolean arguments
|
375 | * around to indicate whether a drag type is internal or external.
|
376 | */
|
377 | type DraftDragType = 'internal' | 'external';
|
378 |
|
379 | /**
|
380 | * The list of default valid block types.
|
381 | */
|
382 | type CoreDraftBlockType =
|
383 | | 'unstyled'
|
384 | | 'paragraph'
|
385 | | 'header-one'
|
386 | | 'header-two'
|
387 | | 'header-three'
|
388 | | 'header-four'
|
389 | | 'header-five'
|
390 | | 'header-six'
|
391 | | 'unordered-list-item'
|
392 | | 'ordered-list-item'
|
393 | | 'blockquote'
|
394 | | 'code-block'
|
395 | | 'atomic';
|
396 |
|
397 | type CustomBlockType = string;
|
398 |
|
399 | type DraftBlockType = CoreDraftBlockType | CustomBlockType;
|
400 |
|
401 | /**
|
402 | * A type that allows us to avoid passing boolean arguments
|
403 | * around to indicate whether a deletion is forward or backward.
|
404 | */
|
405 | type DraftRemovalDirection = 'backward' | 'forward';
|
406 |
|
407 | /**
|
408 | * A type that allows us to avoid returning boolean values
|
409 | * to indicate whether an event was handled or not.
|
410 | */
|
411 | type DraftHandleValue = 'handled' | 'not-handled';
|
412 |
|
413 | /**
|
414 | * A type that defines if an fragment shall be inserted before or after
|
415 | * another fragment or if the selected fragment shall be replaced
|
416 | */
|
417 | type DraftInsertionType = 'replace' | 'before' | 'after';
|
418 |
|
419 | /**
|
420 | * Valid inline styles.
|
421 | */
|
422 | type DraftInlineStyleType = 'BOLD' | 'CODE' | 'ITALIC' | 'STRIKETHROUGH' | 'UNDERLINE';
|
423 |
|
424 | /**
|
425 | * Default entity types.
|
426 | */
|
427 | type ComposedEntityType = 'LINK' | 'TOKEN' | 'PHOTO' | 'IMAGE';
|
428 |
|
429 | /**
|
430 | * Possible entity types.
|
431 | */
|
432 | type DraftEntityType = string | ComposedEntityType;
|
433 |
|
434 | /**
|
435 | * Possible "mutability" options for an entity. This refers to the behavior
|
436 | * that should occur when inserting or removing characters in a text range
|
437 | * with an entity applied to it.
|
438 | *
|
439 | * `MUTABLE`:
|
440 | * The text range can be modified freely. Generally used in cases where
|
441 | * the text content and the entity do not necessarily have a direct
|
442 | * relationship. For instance, the text and URI for a link may be completely
|
443 | * different. The user is allowed to edit the text as needed, and the entity
|
444 | * is preserved and applied to any characters added within the range.
|
445 | *
|
446 | * `IMMUTABLE`:
|
447 | * Not to be confused with immutable data structures used to represent the
|
448 | * state of the editor. Immutable entity ranges cannot be modified in any
|
449 | * way. Adding characters within the range will remove the entity from the
|
450 | * entire range. Deleting characters will delete the entire range. Example:
|
451 | * Facebook Page mentions.
|
452 | *
|
453 | * `SEGMENTED`:
|
454 | * Segmented entities allow the removal of partial ranges of text, as
|
455 | * separated by a delimiter. Adding characters wihin the range will remove
|
456 | * the entity from the entire range. Deleting characters within a segmented
|
457 | * entity will delete only the segments affected by the deletion. Example:
|
458 | * Facebook User mentions.
|
459 | */
|
460 | type DraftEntityMutability = 'MUTABLE' | 'IMMUTABLE' | 'SEGMENTED';
|
461 | }
|
462 |
|
463 | namespace Decorators {
|
464 | import ContentBlock = Draft.Model.ImmutableData.ContentBlock;
|
465 |
|
466 | /**
|
467 | * An interface for document decorator classes, allowing the creation of
|
468 | * custom decorator classes.
|
469 | *
|
470 | * See `CompositeDraftDecorator` for the most common use case.
|
471 | */
|
472 | interface DraftDecoratorType {
|
473 | /**
|
474 | * Given a `ContentBlock`, return an immutable List of decorator keys.
|
475 | */
|
476 | getDecorations(block: ContentBlock, contentState: ContentState): Immutable.List<string>;
|
477 |
|
478 | /**
|
479 | * Given a decorator key, return the component to use when rendering
|
480 | * this decorated range.
|
481 | */
|
482 | getComponentForKey(key: string): Function;
|
483 |
|
484 | /**
|
485 | * Given a decorator key, optionally return the props to use when rendering
|
486 | * this decorated range.
|
487 | */
|
488 | getPropsForKey(key: string): any;
|
489 | }
|
490 |
|
491 | /**
|
492 | * A DraftDecorator is a strategy-component pair intended for use when
|
493 | * rendering content.
|
494 | *
|
495 | * - A "strategy": A function that accepts a ContentBlock object and
|
496 | * continuously executes a callback with start/end values corresponding to
|
497 | * relevant matches in the document text. For example, getHashtagMatches
|
498 | * uses a hashtag regex to find hashtag strings in the block, and
|
499 | * for each hashtag match, executes the callback with start/end pairs.
|
500 | *
|
501 | * - A "component": A React component that will be used to render the
|
502 | * "decorated" section of text.
|
503 | *
|
504 | * - "props": Props to be passed into the React component that will be used.
|
505 | */
|
506 | interface DraftDecorator {
|
507 | strategy: (
|
508 | block: ContentBlock,
|
509 | callback: (start: number, end: number) => void,
|
510 | contentState: ContentState,
|
511 | ) => void;
|
512 | component: Function;
|
513 | props?: object | undefined;
|
514 | }
|
515 |
|
516 | |
517 |
|
518 |
|
519 |
|
520 |
|
521 |
|
522 |
|
523 |
|
524 |
|
525 |
|
526 |
|
527 |
|
528 |
|
529 |
|
530 |
|
531 |
|
532 |
|
533 |
|
534 |
|
535 | class CompositeDraftDecorator {
|
536 | constructor(decorators: Array<DraftDecorator>);
|
537 |
|
538 | getDecorations(block: ContentBlock, contentState: ContentState): Immutable.List<string>;
|
539 | getComponentForKey(key: string): Function;
|
540 | getPropsForKey(key: string): Object;
|
541 | }
|
542 | }
|
543 |
|
544 | namespace Encoding {
|
545 | import DraftInlineStyleType = Draft.Model.Constants.DraftInlineStyleType;
|
546 | import DraftBlockType = Draft.Model.Constants.DraftBlockType;
|
547 | import DraftEntityMutability = Draft.Model.Constants.DraftEntityMutability;
|
548 | import DraftEntityType = Draft.Model.Constants.DraftEntityType;
|
549 |
|
550 | import ContentBlock = Draft.Model.ImmutableData.ContentBlock;
|
551 | import ContentState = Draft.Model.ImmutableData.ContentState;
|
552 |
|
553 | import DraftBlockRenderMap = Draft.Component.Base.DraftBlockRenderMap;
|
554 |
|
555 | |
556 |
|
557 |
|
558 | interface RawDraftInlineStyleRange {
|
559 | style: DraftInlineStyleType;
|
560 | offset: number;
|
561 | length: number;
|
562 | }
|
563 |
|
564 | |
565 |
|
566 |
|
567 |
|
568 |
|
569 |
|
570 | interface RawDraftEntityRange {
|
571 | key: number;
|
572 | offset: number;
|
573 | length: number;
|
574 | }
|
575 |
|
576 | |
577 |
|
578 |
|
579 | interface RawDraftEntity<T = { [key: string]: any }> {
|
580 | type: DraftEntityType;
|
581 | mutability: DraftEntityMutability;
|
582 | data: T;
|
583 | }
|
584 |
|
585 | |
586 |
|
587 |
|
588 |
|
589 | interface RawDraftContentBlock {
|
590 | key: string;
|
591 | type: DraftBlockType;
|
592 | text: string;
|
593 | depth: number;
|
594 | inlineStyleRanges: Array<RawDraftInlineStyleRange>;
|
595 | entityRanges: Array<RawDraftEntityRange>;
|
596 | data?: { [key: string]: any } | undefined;
|
597 | }
|
598 |
|
599 | |
600 |
|
601 |
|
602 |
|
603 |
|
604 |
|
605 |
|
606 |
|
607 |
|
608 | interface RawDraftContentState {
|
609 | blocks: Array<RawDraftContentBlock>;
|
610 | entityMap: { [key: string]: RawDraftEntity };
|
611 | }
|
612 |
|
613 | function convertFromHTMLtoContentBlocks(
|
614 | html: string,
|
615 | DOMBuilder?: Function,
|
616 | blockRenderMap?: DraftBlockRenderMap,
|
617 | ): { contentBlocks: Array<ContentBlock>; entityMap: any };
|
618 | function convertFromRawToDraftState(rawState: RawDraftContentState): ContentState;
|
619 | function convertFromDraftStateToRaw(contentState: ContentState): RawDraftContentState;
|
620 | }
|
621 |
|
622 | namespace Entity {
|
623 | import DraftEntityMutability = Draft.Model.Constants.DraftEntityMutability;
|
624 | import DraftEntityType = Draft.Model.Constants.DraftEntityType;
|
625 |
|
626 | |
627 |
|
628 |
|
629 |
|
630 |
|
631 |
|
632 |
|
633 |
|
634 |
|
635 |
|
636 |
|
637 |
|
638 |
|
639 | class DraftEntity {
|
640 | |
641 |
|
642 |
|
643 |
|
644 |
|
645 |
|
646 |
|
647 | static create(type: DraftEntityType, mutability: DraftEntityMutability, data?: Object): string;
|
648 |
|
649 | |
650 |
|
651 |
|
652 |
|
653 | static add(instance: DraftEntityInstance): string;
|
654 |
|
655 | |
656 |
|
657 |
|
658 | static get(key: string): DraftEntityInstance;
|
659 |
|
660 | |
661 |
|
662 |
|
663 |
|
664 |
|
665 | static mergeData(key: string, toMerge: { [key: string]: any }): DraftEntityInstance;
|
666 |
|
667 | |
668 |
|
669 |
|
670 | static replaceData(key: string, newData: { [key: string]: any }): DraftEntityInstance;
|
671 | }
|
672 |
|
673 | |
674 |
|
675 |
|
676 |
|
677 |
|
678 |
|
679 |
|
680 |
|
681 |
|
682 |
|
683 |
|
684 | interface DraftEntityInstance {
|
685 | getType(): DraftEntityType;
|
686 | getMutability(): DraftEntityMutability;
|
687 | getData(): any;
|
688 | }
|
689 | }
|
690 |
|
691 | namespace ImmutableData {
|
692 | import DraftBlockType = Draft.Model.Constants.DraftBlockType;
|
693 | import DraftEntityMutability = Draft.Model.Constants.DraftEntityMutability;
|
694 | import DraftEntityType = Draft.Model.Constants.DraftEntityType;
|
695 | import DraftEntityInstance = Draft.Model.Entity.DraftEntityInstance;
|
696 |
|
697 | import DraftDecoratorType = Draft.Model.Decorators.DraftDecoratorType;
|
698 |
|
699 | type DraftInlineStyle = Immutable.OrderedSet<string>;
|
700 | type BlockMap = Immutable.OrderedMap<string, Draft.Model.ImmutableData.ContentBlock>;
|
701 |
|
702 | var Record: Immutable.Record.Class;
|
703 |
|
704 | interface DraftBlockRenderConfig {
|
705 | element: string;
|
706 | wrapper?: React.ReactNode | undefined;
|
707 | }
|
708 |
|
709 | class EditorState extends Record {
|
710 | static createEmpty(decorator?: DraftDecoratorType): EditorState;
|
711 | static createWithContent(contentState: ContentState, decorator?: DraftDecoratorType): EditorState;
|
712 | static create(config: Object): EditorState;
|
713 | static set(editorState: EditorState, put: Object): EditorState;
|
714 |
|
715 | |
716 |
|
717 |
|
718 |
|
719 |
|
720 |
|
721 |
|
722 |
|
723 | static acceptSelection(editorState: EditorState, selection: SelectionState): EditorState;
|
724 |
|
725 | |
726 |
|
727 |
|
728 |
|
729 |
|
730 |
|
731 |
|
732 |
|
733 |
|
734 |
|
735 |
|
736 |
|
737 | static forceSelection(editorState: EditorState, selection: SelectionState): EditorState;
|
738 |
|
739 | |
740 |
|
741 |
|
742 | static moveSelectionToEnd(editorState: EditorState): EditorState;
|
743 |
|
744 | |
745 |
|
746 |
|
747 |
|
748 |
|
749 | static moveFocusToEnd(editorState: EditorState): EditorState;
|
750 |
|
751 | |
752 |
|
753 |
|
754 |
|
755 |
|
756 | static push(
|
757 | editorState: EditorState,
|
758 | contentState: ContentState,
|
759 | changeType: EditorChangeType,
|
760 | ): EditorState;
|
761 |
|
762 | |
763 |
|
764 |
|
765 |
|
766 | static undo(editorState: EditorState): EditorState;
|
767 |
|
768 | |
769 |
|
770 |
|
771 |
|
772 | static redo(editorState: EditorState): EditorState;
|
773 |
|
774 | toJS(): Object;
|
775 | getAllowUndo(): boolean;
|
776 | getCurrentContent(): ContentState;
|
777 | getUndoStack(): Immutable.Stack<ContentState>;
|
778 | getRedoStack(): Immutable.Stack<ContentState>;
|
779 | getSelection(): SelectionState;
|
780 | getDecorator(): DraftDecoratorType;
|
781 | isInCompositionMode(): boolean;
|
782 | mustForceSelection(): boolean;
|
783 | getNativelyRenderedContent(): ContentState;
|
784 | getLastChangeType(): EditorChangeType;
|
785 |
|
786 | |
787 |
|
788 |
|
789 |
|
790 |
|
791 |
|
792 |
|
793 |
|
794 | getInlineStyleOverride(): DraftInlineStyle;
|
795 |
|
796 | static setInlineStyleOverride(
|
797 | editorState: EditorState,
|
798 | inlineStyleOverride: DraftInlineStyle,
|
799 | ): EditorState;
|
800 |
|
801 | |
802 |
|
803 |
|
804 |
|
805 |
|
806 | getCurrentInlineStyle(): DraftInlineStyle;
|
807 |
|
808 | getBlockTree(blockKey: string): Immutable.List<any>;
|
809 | isSelectionAtStartOfContent(): boolean;
|
810 | isSelectionAtEndOfContent(): boolean;
|
811 | getDirectionMap(): Immutable.OrderedMap<any, any>;
|
812 | }
|
813 |
|
814 | class ContentBlock extends Record {
|
815 | getKey(): string;
|
816 |
|
817 | getType(): DraftBlockType;
|
818 |
|
819 | getText(): string;
|
820 | getCharacterList(): Immutable.List<CharacterMetadata>;
|
821 | getLength(): number;
|
822 | getDepth(): number;
|
823 | getData(): Immutable.Map<any, any>;
|
824 | getInlineStyleAt(offset: number): DraftInlineStyle;
|
825 | getEntityAt(offset: number): string;
|
826 |
|
827 | |
828 |
|
829 |
|
830 | findStyleRanges(
|
831 | filterFn: (value: CharacterMetadata) => boolean,
|
832 | callback: (start: number, end: number) => void,
|
833 | ): void;
|
834 |
|
835 | |
836 |
|
837 |
|
838 | findEntityRanges(
|
839 | filterFn: (value: CharacterMetadata) => boolean,
|
840 | callback: (start: number, end: number) => void,
|
841 | ): void;
|
842 | }
|
843 |
|
844 | class ContentState extends Record {
|
845 | static createFromBlockArray(blocks: Array<ContentBlock>, entityMap?: any): ContentState;
|
846 | static createFromText(text: string, delimiter?: string): ContentState;
|
847 |
|
848 | createEntity(type: DraftEntityType, mutability: DraftEntityMutability, data?: Object): ContentState;
|
849 | getEntity(key: string): EntityInstance;
|
850 | getEntityMap(): any;
|
851 | getAllEntities(): Immutable.OrderedMap<string, DraftEntityInstance>;
|
852 | getLastCreatedEntityKey(): string;
|
853 | mergeEntityData(key: string, toMerge: { [key: string]: any }): ContentState;
|
854 | replaceEntityData(key: string, toMerge: { [key: string]: any }): ContentState;
|
855 | addEntity(instance: DraftEntityInstance): ContentState;
|
856 |
|
857 | getBlockMap(): BlockMap;
|
858 | getSelectionBefore(): SelectionState;
|
859 | getSelectionAfter(): SelectionState;
|
860 | getBlockForKey(key: string): ContentBlock;
|
861 |
|
862 | getKeyBefore(key: string): string;
|
863 | getKeyAfter(key: string): string;
|
864 | getBlockAfter(key: string): ContentBlock | undefined;
|
865 | getBlockBefore(key: string): ContentBlock | undefined;
|
866 |
|
867 | getBlocksAsArray(): Array<ContentBlock>;
|
868 | getFirstBlock(): ContentBlock;
|
869 | getLastBlock(): ContentBlock;
|
870 | getPlainText(delimiter?: string): string;
|
871 | hasText(): boolean;
|
872 | }
|
873 |
|
874 | interface SelectionStateProperties {
|
875 | anchorKey: string;
|
876 | anchorOffset: number;
|
877 | focusKey: string;
|
878 | focusOffset: number;
|
879 | isBackward: boolean;
|
880 | hasFocus: boolean;
|
881 | }
|
882 |
|
883 | class SelectionState extends Record {
|
884 | static createEmpty(key: string): SelectionState;
|
885 |
|
886 | merge(
|
887 | ...iterables: Immutable.Iterable<
|
888 | keyof SelectionStateProperties,
|
889 | SelectionStateProperties[keyof SelectionStateProperties]
|
890 | >[]
|
891 | ): SelectionState;
|
892 | merge(...iterables: Partial<SelectionStateProperties>[]): SelectionState;
|
893 |
|
894 | serialize(): string;
|
895 | getAnchorKey(): string;
|
896 | getAnchorOffset(): number;
|
897 | getFocusKey(): string;
|
898 | getFocusOffset(): number;
|
899 | getIsBackward(): boolean;
|
900 | getHasFocus(): boolean;
|
901 | |
902 |
|
903 |
|
904 |
|
905 | hasEdgeWithin(blockKey: string, start: number, end: number): boolean;
|
906 | isCollapsed(): boolean;
|
907 | getStartKey(): string;
|
908 | getStartOffset(): number;
|
909 | getEndKey(): string;
|
910 | getEndOffset(): number;
|
911 | }
|
912 |
|
913 | class CharacterMetadata {
|
914 | static applyStyle(record: CharacterMetadata, style: string): CharacterMetadata;
|
915 | static removeStyle(record: CharacterMetadata, style: string): CharacterMetadata;
|
916 | static applyEntity(record: CharacterMetadata, entityKey: string | null): CharacterMetadata;
|
917 | static applyEntity(record: CharacterMetadata): CharacterMetadata;
|
918 | |
919 |
|
920 |
|
921 |
|
922 |
|
923 |
|
924 | static create(config?: CharacterMetadataConfig): CharacterMetadata;
|
925 | static create(): CharacterMetadata;
|
926 |
|
927 | getStyle(): DraftInlineStyle;
|
928 | getEntity(): string;
|
929 | hasStyle(style: string): boolean;
|
930 | }
|
931 |
|
932 | interface CharacterMetadataConfig {
|
933 | style?: DraftInlineStyle | undefined;
|
934 | entity?: string | undefined;
|
935 | }
|
936 |
|
937 | type EditorChangeType =
|
938 | | 'adjust-depth'
|
939 | | 'apply-entity'
|
940 | | 'backspace-character'
|
941 | | 'change-block-data'
|
942 | | 'change-block-type'
|
943 | | 'change-inline-style'
|
944 | | 'move-block'
|
945 | | 'delete-character'
|
946 | | 'insert-characters'
|
947 | | 'insert-fragment'
|
948 | | 'redo'
|
949 | | 'remove-range'
|
950 | | 'spellcheck-change'
|
951 | | 'split-block'
|
952 | | 'undo';
|
953 |
|
954 | class BlockMapBuilder {
|
955 | static createFromArray(blocks: Array<ContentBlock>): BlockMap;
|
956 | }
|
957 |
|
958 | const DefaultDraftBlockRenderMap: Immutable.Map<any, any>;
|
959 | const DefaultDraftInlineStyle: Immutable.Map<any, any>;
|
960 | }
|
961 |
|
962 | namespace Keys {
|
963 | function generateRandomKey(): string;
|
964 | }
|
965 |
|
966 | namespace Modifier {
|
967 | import EditorState = Draft.Model.ImmutableData.EditorState;
|
968 | import ContentState = Draft.Model.ImmutableData.ContentState;
|
969 | import SelectionState = Draft.Model.ImmutableData.SelectionState;
|
970 |
|
971 | import BlockMap = Draft.Model.ImmutableData.BlockMap;
|
972 | import DraftInlineStyle = Draft.Model.ImmutableData.DraftInlineStyle;
|
973 |
|
974 | import DraftRemovalDirection = Draft.Model.Constants.DraftRemovalDirection;
|
975 | import DraftBlockType = Draft.Model.Constants.DraftBlockType;
|
976 |
|
977 | import DraftEditorCommand = Draft.Model.Constants.DraftEditorCommand;
|
978 |
|
979 | type URI = any;
|
980 |
|
981 | class AtomicBlockUtils {
|
982 | static insertAtomicBlock(editorState: EditorState, entityKey: string, character: string): EditorState;
|
983 | static moveAtomicBlock(
|
984 | editorState: EditorState,
|
985 | atomicBlock: ContentBlock,
|
986 | targetRange: SelectionState,
|
987 | insertionMode?: DraftInsertionType,
|
988 | ): EditorState;
|
989 | }
|
990 |
|
991 | |
992 |
|
993 |
|
994 |
|
995 |
|
996 |
|
997 |
|
998 |
|
999 |
|
1000 |
|
1001 | class DraftModifier {
|
1002 | static replaceText(
|
1003 | contentState: ContentState,
|
1004 | rangeToReplace: SelectionState,
|
1005 | text: string,
|
1006 | inlineStyle?: DraftInlineStyle,
|
1007 | entityKey?: string,
|
1008 | ): ContentState;
|
1009 | static insertText(
|
1010 | contentState: ContentState,
|
1011 | targetRange: SelectionState,
|
1012 | text: string,
|
1013 | inlineStyle?: DraftInlineStyle,
|
1014 | entityKey?: string,
|
1015 | ): ContentState;
|
1016 | static moveText(
|
1017 | contentState: ContentState,
|
1018 | removalRange: SelectionState,
|
1019 | targetRange: SelectionState,
|
1020 | ): ContentState;
|
1021 | static replaceWithFragment(
|
1022 | contentState: ContentState,
|
1023 | targetRange: SelectionState,
|
1024 | fragment: BlockMap,
|
1025 | ): ContentState;
|
1026 |
|
1027 | static removeRange(
|
1028 | contentState: ContentState,
|
1029 | rangeToRemove: SelectionState,
|
1030 | removalDirection: DraftRemovalDirection,
|
1031 | ): ContentState;
|
1032 |
|
1033 | static splitBlock(contentState: ContentState, selectionState: SelectionState): ContentState;
|
1034 | static applyInlineStyle(
|
1035 | contentState: ContentState,
|
1036 | selectionState: SelectionState,
|
1037 | inlineStyle: string,
|
1038 | ): ContentState;
|
1039 | static removeInlineStyle(
|
1040 | contentState: ContentState,
|
1041 | selectionState: SelectionState,
|
1042 | inlineStyle: string,
|
1043 | ): ContentState;
|
1044 |
|
1045 | static setBlockType(
|
1046 | contentState: ContentState,
|
1047 | selectionState: SelectionState,
|
1048 | blockType: DraftBlockType,
|
1049 | ): ContentState;
|
1050 | static setBlockType(
|
1051 | contentState: ContentState,
|
1052 | selectionState: SelectionState,
|
1053 | blockType: string,
|
1054 | ): ContentState;
|
1055 |
|
1056 | static setBlockData(
|
1057 | contentState: ContentState,
|
1058 | selectionState: SelectionState,
|
1059 | blockData: Immutable.Map<any, any>,
|
1060 | ): ContentState;
|
1061 | static mergeBlockData(
|
1062 | contentState: ContentState,
|
1063 | selectionState: SelectionState,
|
1064 | blockData: Immutable.Map<any, any>,
|
1065 | ): ContentState;
|
1066 | static applyEntity(
|
1067 | contentState: ContentState,
|
1068 | selectionState: SelectionState,
|
1069 | entityKey: string | null,
|
1070 | ): ContentState;
|
1071 | }
|
1072 |
|
1073 | class RichTextEditorUtil {
|
1074 | static currentBlockContainsLink(editorState: EditorState): boolean;
|
1075 | static getCurrentBlockType(editorState: EditorState): DraftBlockType;
|
1076 | static getCurrentBlockType(editorState: EditorState): string;
|
1077 | static getDataObjectForLinkURL(uri: URI): Object;
|
1078 |
|
1079 | static handleKeyCommand(editorState: EditorState, command: DraftEditorCommand): EditorState | null;
|
1080 | static handleKeyCommand(editorState: EditorState, command: string): null;
|
1081 |
|
1082 | static insertSoftNewline(editorState: EditorState): EditorState;
|
1083 |
|
1084 | |
1085 |
|
1086 |
|
1087 |
|
1088 | static onBackspace(editorState: EditorState): EditorState | null;
|
1089 | static onDelete(editorState: EditorState): EditorState | null;
|
1090 | static onTab(event: SyntheticKeyboardEvent, editorState: EditorState, maxDepth: number): EditorState;
|
1091 |
|
1092 | static toggleBlockType(editorState: EditorState, blockType: DraftBlockType): EditorState;
|
1093 | static toggleBlockType(editorState: EditorState, blockType: string): EditorState;
|
1094 |
|
1095 | static toggleCode(editorState: EditorState): EditorState;
|
1096 |
|
1097 | |
1098 |
|
1099 |
|
1100 |
|
1101 |
|
1102 |
|
1103 | static toggleInlineStyle(editorState: EditorState, inlineStyle: string): EditorState;
|
1104 |
|
1105 | static toggleLink(
|
1106 | editorState: EditorState,
|
1107 | targetSelection: SelectionState,
|
1108 | entityKey: string | null,
|
1109 | ): EditorState;
|
1110 |
|
1111 | |
1112 |
|
1113 |
|
1114 |
|
1115 |
|
1116 | static tryToRemoveBlockStyle(editorState: EditorState): ContentState | null;
|
1117 | }
|
1118 | }
|
1119 | }
|
1120 | }
|
1121 |
|
1122 | import Editor = Draft.Component.Base.DraftEditor;
|
1123 | import EditorProps = Draft.Component.Base.DraftEditorProps;
|
1124 | import EditorBlock = Draft.Component.Components.DraftEditorBlock;
|
1125 | import EditorState = Draft.Model.ImmutableData.EditorState;
|
1126 | import EditorChangeType = Draft.Model.ImmutableData.EditorChangeType;
|
1127 | import EditorCommand = Draft.Component.Base.EditorCommand;
|
1128 |
|
1129 | import DraftDecoratorType = Draft.Model.Decorators.DraftDecoratorType;
|
1130 | import DraftDecorator = Draft.Model.Decorators.DraftDecorator;
|
1131 | import CompositeDecorator = Draft.Model.Decorators.CompositeDraftDecorator;
|
1132 | import Entity = Draft.Model.Entity.DraftEntity;
|
1133 | import EntityInstance = Draft.Model.Entity.DraftEntityInstance;
|
1134 |
|
1135 | import BlockMapBuilder = Draft.Model.ImmutableData.BlockMapBuilder;
|
1136 | import CharacterMetadata = Draft.Model.ImmutableData.CharacterMetadata;
|
1137 | import ContentBlock = Draft.Model.ImmutableData.ContentBlock;
|
1138 | import ContentState = Draft.Model.ImmutableData.ContentState;
|
1139 | import SelectionState = Draft.Model.ImmutableData.SelectionState;
|
1140 | import DraftInlineStyle = Draft.Model.ImmutableData.DraftInlineStyle;
|
1141 | import BlockMap = Draft.Model.ImmutableData.BlockMap;
|
1142 |
|
1143 | import AtomicBlockUtils = Draft.Model.Modifier.AtomicBlockUtils;
|
1144 | import KeyBindingUtil = Draft.Component.Utils.KeyBindingUtil;
|
1145 | import Modifier = Draft.Model.Modifier.DraftModifier;
|
1146 | import RichUtils = Draft.Model.Modifier.RichTextEditorUtil;
|
1147 |
|
1148 | import DefaultDraftBlockRenderMap = Draft.Model.ImmutableData.DefaultDraftBlockRenderMap;
|
1149 | import DefaultDraftInlineStyle = Draft.Model.ImmutableData.DefaultDraftInlineStyle;
|
1150 |
|
1151 | import RawDraftInlineStyleRange = Draft.Model.Encoding.RawDraftInlineStyleRange;
|
1152 | import RawDraftEntityRange = Draft.Model.Encoding.RawDraftEntityRange;
|
1153 | import RawDraftEntity = Draft.Model.Encoding.RawDraftEntity;
|
1154 | import RawDraftContentBlock = Draft.Model.Encoding.RawDraftContentBlock;
|
1155 | import RawDraftContentState = Draft.Model.Encoding.RawDraftContentState;
|
1156 | import convertFromRaw = Draft.Model.Encoding.convertFromRawToDraftState;
|
1157 | import convertToRaw = Draft.Model.Encoding.convertFromDraftStateToRaw;
|
1158 | import convertFromHTML = Draft.Model.Encoding.convertFromHTMLtoContentBlocks;
|
1159 |
|
1160 | import genKey = Draft.Model.Keys.generateRandomKey;
|
1161 | import getDefaultKeyBinding = Draft.Component.Utils.getDefaultKeyBinding;
|
1162 | import getVisibleSelectionRect = Draft.Component.Selection.getVisibleSelectionRect;
|
1163 |
|
1164 | import DraftEditorCommand = Draft.Model.Constants.DraftEditorCommand;
|
1165 | import DraftDragType = Draft.Model.Constants.DraftDragType;
|
1166 | import DraftBlockType = Draft.Model.Constants.DraftBlockType;
|
1167 | import DraftBlockRenderConfig = Draft.Model.ImmutableData.DraftBlockRenderConfig;
|
1168 | import DraftBlockRenderMap = Draft.Component.Base.DraftBlockRenderMap;
|
1169 | import DraftInlineStyleType = Draft.Model.Constants.DraftInlineStyleType;
|
1170 | import DraftEntityMutability = Draft.Model.Constants.DraftEntityMutability;
|
1171 | import DraftEntityType = Draft.Model.Constants.DraftEntityType;
|
1172 | import DraftRemovalDirection = Draft.Model.Constants.DraftRemovalDirection;
|
1173 | import DraftHandleValue = Draft.Model.Constants.DraftHandleValue;
|
1174 | import DraftInsertionType = Draft.Model.Constants.DraftInsertionType;
|
1175 | import DraftStyleMap = Draft.Component.Base.DraftStyleMap;
|
1176 |
|
1177 | import DraftModel = Draft.Model;
|
1178 | import DraftComponent = Draft.Component;
|
1179 |
|
1180 | export {
|
1181 | Editor,
|
1182 | EditorProps,
|
1183 | EditorBlock,
|
1184 | EditorState,
|
1185 | EditorChangeType,
|
1186 | EditorCommand,
|
1187 | DraftDecoratorType,
|
1188 | DraftDecorator,
|
1189 | CompositeDecorator,
|
1190 | Entity,
|
1191 | EntityInstance,
|
1192 | BlockMapBuilder,
|
1193 | CharacterMetadata,
|
1194 | ContentBlock,
|
1195 | ContentState,
|
1196 | SelectionState,
|
1197 | DraftInlineStyle,
|
1198 | BlockMap,
|
1199 | AtomicBlockUtils,
|
1200 | KeyBindingUtil,
|
1201 | Modifier,
|
1202 | RichUtils,
|
1203 | DefaultDraftBlockRenderMap,
|
1204 | DefaultDraftInlineStyle,
|
1205 | RawDraftInlineStyleRange,
|
1206 | RawDraftEntityRange,
|
1207 | RawDraftEntity,
|
1208 | RawDraftContentBlock,
|
1209 | RawDraftContentState,
|
1210 | convertFromRaw,
|
1211 | convertToRaw,
|
1212 | convertFromHTML,
|
1213 | genKey,
|
1214 | getDefaultKeyBinding,
|
1215 | getVisibleSelectionRect,
|
1216 | DraftEditorCommand,
|
1217 | DraftDragType,
|
1218 | DraftBlockType,
|
1219 | DraftBlockRenderConfig,
|
1220 | DraftBlockRenderMap,
|
1221 | DraftInlineStyleType,
|
1222 | DraftEntityType,
|
1223 | DraftEntityMutability,
|
1224 | DraftRemovalDirection,
|
1225 | DraftHandleValue,
|
1226 | DraftInsertionType,
|
1227 | DraftStyleMap,
|
1228 | DraftModel,
|
1229 | DraftComponent
|
1230 | };
|