UNPKG

53.4 kBTypeScriptView Raw
1// Type definitions for Draft.js v0.11.1
2// Project: https://facebook.github.io/draft-js/
3// Definitions by: Dmitry Rogozhny <https://github.com/dmitryrogozhny>
4// Eelco Lempsink <https://github.com/eelco>
5// Yale Cason <https://github.com/ghotiphud>
6// Ryan Schwers <https://github.com/schwers>
7// Michael Wu <https://github.com/michael-yx-wu>
8// Willis Plummer <https://github.com/willisplummer>
9// Santiago Vilar <https://github.com/smvilar>
10// Ulf Schwekendiek <https://github.com/sulf>
11// Pablo Varela <https://github.com/pablopunk>
12// Claudio Procida <https://github.com/claudiopro>
13// Kevin Hawkinson <https://github.com/khawkinson>
14// Munif Tanjim <https://github.com/MunifTanjim>
15// Peter Dekkers <https://github.com/PeterDekkers>
16// Ankit Ranjan <https://github.com/ankitr>
17// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
18// TypeScript Version: 2.9
19
20import * as Immutable from 'immutable';
21import * as React from 'react';
22
23type SyntheticClipboardEvent = React.ClipboardEvent<{}>;
24type SyntheticKeyboardEvent = React.KeyboardEvent<{}>;
25type SyntheticEvent = React.SyntheticEvent<{}>;
26export as namespace Draft;
27declare 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 * `DraftEditor` is the root editor component. It composes a `contentEditable`
52 * div, and provides a wide variety of useful function props for managing the
53 * state of the editor. See `DraftEditorProps` for details.
54 */
55 class DraftEditor extends React.Component<DraftEditorProps, {}> {
56 editor: HTMLElement | null | undefined;
57 editorContainer: HTMLElement | null | undefined;
58 getEditorKey(): string;
59
60 /** Force focus back onto the editor node. */
61 focus(): void;
62 /** Remove focus from the editor node. */
63 blur(): void;
64 }
65
66 /**
67 * The two most critical props are `editorState` and `onChange`.
68 *
69 * The `editorState` prop defines the entire state of the editor, while the
70 * `onChange` prop is the method in which all state changes are propagated
71 * upward to higher-level components.
72 *
73 * These props are analagous to `value` and `onChange` in controlled React
74 * text inputs.
75 */
76 export interface DraftEditorProps {
77 editorState: EditorState;
78 onChange(editorState: EditorState): void;
79
80 placeholder?: string | undefined;
81
82 /**
83 * Specify whether text alignment should be forced in a direction
84 * regardless of input characters.
85 */
86 textAlignment?: DraftTextAlignment | undefined;
87
88 /**
89 * Specify whether text directionality should be forced in a direction
90 * regardless of input characters.
91 */
92 textDirectionality?: DraftTextDirectionality | undefined;
93
94 /**
95 * For a given `ContentBlock` object, return an object that specifies
96 * a custom block component and/or props. If no object is returned,
97 * the default `TextEditorBlock` is used.
98 */
99 blockRendererFn?(block: ContentBlock): any;
100
101 /**
102 * Provide a map of block rendering configurations. Each block type maps to
103 * an element tag and an optional react element wrapper. This configuration
104 * is used for both rendering and paste processing.
105 */
106 blockRenderMap?: DraftBlockRenderMap | undefined;
107
108 /**
109 * Function that allows to define class names to apply to the given block when it is rendered.
110 */
111 blockStyleFn?(block: ContentBlock): string;
112
113 /**
114 * Provide a map of inline style names corresponding to CSS style objects
115 * that will be rendered for matching ranges.
116 */
117 customStyleMap?: DraftStyleMap | undefined;
118
119 /**
120 * Define a function to transform inline styles to CSS objects
121 * that are applied to spans of text.
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 * A CompositeDraftDecorator traverses through a list of DraftDecorator
518 * instances to identify sections of a ContentBlock that should be rendered
519 * in a "decorated" manner. For example, hashtags, mentions, and links may
520 * be intended to stand out visually, be rendered as anchors, etc.
521 *
522 * The list of decorators supplied to the constructor will be used in the
523 * order they are provided. This allows the caller to specify a priority for
524 * string matching, in case of match collisions among decorators.
525 *
526 * For instance, I may have a link with a `#` in its text. Though this section
527 * of text may match our hashtag decorator, it should not be treated as a
528 * hashtag. I should therefore list my link DraftDecorator
529 * before my hashtag DraftDecorator when constructing this composite
530 * decorator instance.
531 *
532 * Thus, when a collision like this is encountered, the earlier match is
533 * preserved and the new match is discarded.
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 * A plain object representation of an inline style range.
557 */
558 interface RawDraftInlineStyleRange {
559 style: DraftInlineStyleType;
560 offset: number;
561 length: number;
562 }
563
564 /**
565 * A plain object representation of an entity attribution.
566 *
567 * The `key` value corresponds to the key of the entity in the `entityMap` of
568 * a `ComposedText` object, not for use with `DraftEntity.get()`.
569 */
570 interface RawDraftEntityRange {
571 key: number;
572 offset: number;
573 length: number;
574 }
575
576 /**
577 * A plain object representation of an EntityInstance.
578 */
579 interface RawDraftEntity<T = { [key: string]: any }> {
580 type: DraftEntityType;
581 mutability: DraftEntityMutability;
582 data: T;
583 }
584
585 /**
586 * A plain object representation of a ContentBlock, with all style and entity
587 * attribution repackaged as range objects.
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 * A type that represents a composed document as vanilla JavaScript objects,
601 * with all styles and entities represented as ranges. Corresponding entity
602 * objects are packaged as objects as well.
603 *
604 * This object is especially useful when sending the document state to the
605 * server for storage, as its representation is more concise than our
606 * immutable objects.
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 * A "document entity" is an object containing metadata associated with a
628 * piece of text in a ContentBlock.
629 *
630 * For example, a `link` entity might include a `uri` property. When a
631 * ContentBlock is rendered in the browser, text that refers to that link
632 * entity may be rendered as an anchor, with the `uri` as the href value.
633 *
634 * In a ContentBlock, every position in the text may correspond to zero
635 * or one entities. This correspondence is tracked using a key string,
636 * generated via DraftEntity.create() and used to obtain entity metadata
637 * via DraftEntity.get().
638 */
639 class DraftEntity {
640 /**
641 * Create a DraftEntityInstance and store it for later retrieval.
642 *
643 * A random key string will be generated and returned. This key may
644 * be used to track the entity's usage in a ContentBlock, and for
645 * retrieving data about the entity at render time.
646 */
647 static create(type: DraftEntityType, mutability: DraftEntityMutability, data?: Object): string;
648
649 /**
650 * Add an existing DraftEntityInstance to the DraftEntity map. This is
651 * useful when restoring instances from the server.
652 */
653 static add(instance: DraftEntityInstance): string;
654
655 /**
656 * Retrieve the entity corresponding to the supplied key string.
657 */
658 static get(key: string): DraftEntityInstance;
659
660 /**
661 * Entity instances are immutable. If you need to update the data for an
662 * instance, this method will merge your data updates and return a new
663 * instance.
664 */
665 static mergeData(key: string, toMerge: { [key: string]: any }): DraftEntityInstance;
666
667 /**
668 * Completely replace the data for a given instance.
669 */
670 static replaceData(key: string, newData: { [key: string]: any }): DraftEntityInstance;
671 }
672
673 /**
674 * An instance of a document entity, consisting of a `type` and relevant
675 * `data`, metadata about the entity.
676 *
677 * For instance, a "link" entity might provide a URI, and a "mention"
678 * entity might provide the mentioned user's ID. These pieces of data
679 * may be used when rendering the entity as part of a ContentBlock DOM
680 * representation. For a link, the data would be used as an href for
681 * the rendered anchor. For a mention, the ID could be used to retrieve
682 * a hovercard.
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 * Incorporate native DOM selection changes into the EditorState. This
717 * method can be used when we simply want to accept whatever the DOM
718 * has given us to represent selection, and we do not need to re-render
719 * the editor.
720 *
721 * To forcibly move the DOM selection, see `EditorState.forceSelection`.
722 */
723 static acceptSelection(editorState: EditorState, selection: SelectionState): EditorState;
724
725 /**
726 * At times, we need to force the DOM selection to be where we
727 * need it to be. This can occur when the anchor or focus nodes
728 * are non-text nodes, for instance. In this case, we want to trigger
729 * a re-render of the editor, which in turn forces selection into
730 * the correct place in the DOM. The `forceSelection` method
731 * accomplishes this.
732 *
733 * This method should be used in cases where you need to explicitly
734 * move the DOM selection from one place to another without a change
735 * in ContentState.
736 */
737 static forceSelection(editorState: EditorState, selection: SelectionState): EditorState;
738
739 /**
740 * Move selection to the end of the editor without forcing focus.
741 */
742 static moveSelectionToEnd(editorState: EditorState): EditorState;
743
744 /**
745 * Force focus to the end of the editor. This is useful in scenarios
746 * where we want to programmatically focus the input and it makes sense
747 * to allow the user to continue working seamlessly.
748 */
749 static moveFocusToEnd(editorState: EditorState): EditorState;
750
751 /**
752 * Push the current ContentState onto the undo stack if it should be
753 * considered a boundary state, and set the provided ContentState as the
754 * new current content.
755 */
756 static push(
757 editorState: EditorState,
758 contentState: ContentState,
759 changeType: EditorChangeType,
760 ): EditorState;
761
762 /**
763 * Make the top ContentState in the undo stack the new current content and
764 * push the current content onto the redo stack.
765 */
766 static undo(editorState: EditorState): EditorState;
767
768 /**
769 * Make the top ContentState in the redo stack the new current content and
770 * push the current content onto the undo stack.
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 * While editing, the user may apply inline style commands with a collapsed
788 * cursor, intending to type text that adopts the specified style. In this
789 * case, we track the specified style as an "override" that takes precedence
790 * over the inline style of the text adjacent to the cursor.
791 *
792 * If null, there is no override in place.
793 */
794 getInlineStyleOverride(): DraftInlineStyle;
795
796 static setInlineStyleOverride(
797 editorState: EditorState,
798 inlineStyleOverride: DraftInlineStyle,
799 ): EditorState;
800
801 /**
802 * Get the appropriate inline style for the editor state. If an
803 * override is in place, use it. Otherwise, the current style is
804 * based on the location of the selection state.
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 * Execute a callback for every contiguous range of styles within the block.
829 */
830 findStyleRanges(
831 filterFn: (value: CharacterMetadata) => boolean,
832 callback: (start: number, end: number) => void,
833 ): void;
834
835 /**
836 * Execute a callback for every contiguous range of entities within the block.
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 * Return whether the specified range overlaps with an edge of the
903 * SelectionState.
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 * Use this function instead of the `CharacterMetadata` constructor.
920 * Since most content generally uses only a very small number of
921 * style/entity permutations, we can reuse these objects as often as
922 * possible.
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 * `DraftModifier` provides a set of convenience methods that apply
993 * modifications to a `ContentState` object based on a target `SelectionState`.
994 *
995 * Any change to a `ContentState` should be decomposable into a series of
996 * transaction functions that apply the required changes and return output
997 * `ContentState` objects.
998 *
999 * These functions encapsulate some of the most common transaction sequences.
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 * For collapsed selections at the start of styled blocks, backspace should
1086 * just remove the existing style.
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 * Toggle the specified inline style for the selection. If the
1099 * user's selection is collapsed, apply or remove the style for the
1100 * internal state. If it is not collapsed, apply the change directly
1101 * to the document state.
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 * When a collapsed cursor is at the start of an empty styled block, allow
1113 * certain key commands (newline, backspace) to simply change the
1114 * style of the block instead of the default behavior.
1115 */
1116 static tryToRemoveBlockStyle(editorState: EditorState): ContentState | null;
1117 }
1118 }
1119 }
1120}
1121
1122import Editor = Draft.Component.Base.DraftEditor;
1123import EditorProps = Draft.Component.Base.DraftEditorProps;
1124import EditorBlock = Draft.Component.Components.DraftEditorBlock;
1125import EditorState = Draft.Model.ImmutableData.EditorState;
1126import EditorChangeType = Draft.Model.ImmutableData.EditorChangeType;
1127import EditorCommand = Draft.Component.Base.EditorCommand;
1128
1129import DraftDecoratorType = Draft.Model.Decorators.DraftDecoratorType;
1130import DraftDecorator = Draft.Model.Decorators.DraftDecorator;
1131import CompositeDecorator = Draft.Model.Decorators.CompositeDraftDecorator;
1132import Entity = Draft.Model.Entity.DraftEntity;
1133import EntityInstance = Draft.Model.Entity.DraftEntityInstance;
1134
1135import BlockMapBuilder = Draft.Model.ImmutableData.BlockMapBuilder;
1136import CharacterMetadata = Draft.Model.ImmutableData.CharacterMetadata;
1137import ContentBlock = Draft.Model.ImmutableData.ContentBlock;
1138import ContentState = Draft.Model.ImmutableData.ContentState;
1139import SelectionState = Draft.Model.ImmutableData.SelectionState;
1140import DraftInlineStyle = Draft.Model.ImmutableData.DraftInlineStyle;
1141import BlockMap = Draft.Model.ImmutableData.BlockMap;
1142
1143import AtomicBlockUtils = Draft.Model.Modifier.AtomicBlockUtils;
1144import KeyBindingUtil = Draft.Component.Utils.KeyBindingUtil;
1145import Modifier = Draft.Model.Modifier.DraftModifier;
1146import RichUtils = Draft.Model.Modifier.RichTextEditorUtil;
1147
1148import DefaultDraftBlockRenderMap = Draft.Model.ImmutableData.DefaultDraftBlockRenderMap;
1149import DefaultDraftInlineStyle = Draft.Model.ImmutableData.DefaultDraftInlineStyle;
1150
1151import RawDraftInlineStyleRange = Draft.Model.Encoding.RawDraftInlineStyleRange;
1152import RawDraftEntityRange = Draft.Model.Encoding.RawDraftEntityRange;
1153import RawDraftEntity = Draft.Model.Encoding.RawDraftEntity;
1154import RawDraftContentBlock = Draft.Model.Encoding.RawDraftContentBlock;
1155import RawDraftContentState = Draft.Model.Encoding.RawDraftContentState;
1156import convertFromRaw = Draft.Model.Encoding.convertFromRawToDraftState;
1157import convertToRaw = Draft.Model.Encoding.convertFromDraftStateToRaw;
1158import convertFromHTML = Draft.Model.Encoding.convertFromHTMLtoContentBlocks;
1159
1160import genKey = Draft.Model.Keys.generateRandomKey;
1161import getDefaultKeyBinding = Draft.Component.Utils.getDefaultKeyBinding;
1162import getVisibleSelectionRect = Draft.Component.Selection.getVisibleSelectionRect;
1163
1164import DraftEditorCommand = Draft.Model.Constants.DraftEditorCommand;
1165import DraftDragType = Draft.Model.Constants.DraftDragType;
1166import DraftBlockType = Draft.Model.Constants.DraftBlockType;
1167import DraftBlockRenderConfig = Draft.Model.ImmutableData.DraftBlockRenderConfig;
1168import DraftBlockRenderMap = Draft.Component.Base.DraftBlockRenderMap;
1169import DraftInlineStyleType = Draft.Model.Constants.DraftInlineStyleType;
1170import DraftEntityMutability = Draft.Model.Constants.DraftEntityMutability;
1171import DraftEntityType = Draft.Model.Constants.DraftEntityType;
1172import DraftRemovalDirection = Draft.Model.Constants.DraftRemovalDirection;
1173import DraftHandleValue = Draft.Model.Constants.DraftHandleValue;
1174import DraftInsertionType = Draft.Model.Constants.DraftInsertionType;
1175import DraftStyleMap = Draft.Component.Base.DraftStyleMap;
1176
1177import DraftModel = Draft.Model;
1178import DraftComponent = Draft.Component;
1179
1180export {
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};