UNPKG

53.5 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](https://draftjs.org/docs/advanced-topics-custom-block-render-map#draft-default-block-render-map),
381 * according to the [`DefaultDraftBlockRenderMap`](https://github.com/facebook/draft-js/blob/main/src/model/immutable/DefaultDraftBlockRenderMap.js)
382 */
383 type CoreDraftBlockType =
384 | 'header-one'
385 | 'header-two'
386 | 'header-three'
387 | 'header-four'
388 | 'header-five'
389 | 'header-six'
390 | 'section'
391 | 'article'
392 | 'unordered-list-item'
393 | 'ordered-list-item'
394 | 'blockquote'
395 | 'atomic'
396 | 'code-block'
397 | 'unstyled';
398
399 type CustomBlockType = string;
400
401 type DraftBlockType = CoreDraftBlockType | CustomBlockType;
402
403 /**
404 * A type that allows us to avoid passing boolean arguments
405 * around to indicate whether a deletion is forward or backward.
406 */
407 type DraftRemovalDirection = 'backward' | 'forward';
408
409 /**
410 * A type that allows us to avoid returning boolean values
411 * to indicate whether an event was handled or not.
412 */
413 type DraftHandleValue = 'handled' | 'not-handled';
414
415 /**
416 * A type that defines if an fragment shall be inserted before or after
417 * another fragment or if the selected fragment shall be replaced
418 */
419 type DraftInsertionType = 'replace' | 'before' | 'after';
420
421 /**
422 * Valid inline styles.
423 */
424 type DraftInlineStyleType = 'BOLD' | 'CODE' | 'ITALIC' | 'STRIKETHROUGH' | 'UNDERLINE';
425
426 /**
427 * Possible entity types, like 'LINK', 'IMAGE', or custom ones.
428 */
429 type DraftEntityType = string;
430
431 /**
432 * Possible "mutability" options for an entity. This refers to the behavior
433 * that should occur when inserting or removing characters in a text range
434 * with an entity applied to it.
435 *
436 * `MUTABLE`:
437 * The text range can be modified freely. Generally used in cases where
438 * the text content and the entity do not necessarily have a direct
439 * relationship. For instance, the text and URI for a link may be completely
440 * different. The user is allowed to edit the text as needed, and the entity
441 * is preserved and applied to any characters added within the range.
442 *
443 * `IMMUTABLE`:
444 * Not to be confused with immutable data structures used to represent the
445 * state of the editor. Immutable entity ranges cannot be modified in any
446 * way. Adding characters within the range will remove the entity from the
447 * entire range. Deleting characters will delete the entire range. Example:
448 * Facebook Page mentions.
449 *
450 * `SEGMENTED`:
451 * Segmented entities allow the removal of partial ranges of text, as
452 * separated by a delimiter. Adding characters wihin the range will remove
453 * the entity from the entire range. Deleting characters within a segmented
454 * entity will delete only the segments affected by the deletion. Example:
455 * Facebook User mentions.
456 */
457 type DraftEntityMutability = 'MUTABLE' | 'IMMUTABLE' | 'SEGMENTED';
458 }
459
460 namespace Decorators {
461 import ContentBlock = Draft.Model.ImmutableData.ContentBlock;
462
463 /**
464 * An interface for document decorator classes, allowing the creation of
465 * custom decorator classes.
466 *
467 * See `CompositeDraftDecorator` for the most common use case.
468 */
469 interface DraftDecoratorType {
470 /**
471 * Given a `ContentBlock`, return an immutable List of decorator keys.
472 */
473 getDecorations(block: ContentBlock, contentState: ContentState): Immutable.List<string>;
474
475 /**
476 * Given a decorator key, return the component to use when rendering
477 * this decorated range.
478 */
479 getComponentForKey(key: string): Function;
480
481 /**
482 * Given a decorator key, optionally return the props to use when rendering
483 * this decorated range.
484 */
485 getPropsForKey(key: string): any;
486 }
487
488 /**
489 * A DraftDecorator is a strategy-component pair intended for use when
490 * rendering content.
491 *
492 * - A "strategy": A function that accepts a ContentBlock object and
493 * continuously executes a callback with start/end values corresponding to
494 * relevant matches in the document text. For example, getHashtagMatches
495 * uses a hashtag regex to find hashtag strings in the block, and
496 * for each hashtag match, executes the callback with start/end pairs.
497 *
498 * - A "component": A React component that will be used to render the
499 * "decorated" section of text.
500 *
501 * - "props": Props to be passed into the React component that will be used.
502 */
503 interface DraftDecorator {
504 strategy: (
505 block: ContentBlock,
506 callback: (start: number, end: number) => void,
507 contentState: ContentState,
508 ) => void;
509 component: Function;
510 props?: object | undefined;
511 }
512
513 /**
514 * A CompositeDraftDecorator traverses through a list of DraftDecorator
515 * instances to identify sections of a ContentBlock that should be rendered
516 * in a "decorated" manner. For example, hashtags, mentions, and links may
517 * be intended to stand out visually, be rendered as anchors, etc.
518 *
519 * The list of decorators supplied to the constructor will be used in the
520 * order they are provided. This allows the caller to specify a priority for
521 * string matching, in case of match collisions among decorators.
522 *
523 * For instance, I may have a link with a `#` in its text. Though this section
524 * of text may match our hashtag decorator, it should not be treated as a
525 * hashtag. I should therefore list my link DraftDecorator
526 * before my hashtag DraftDecorator when constructing this composite
527 * decorator instance.
528 *
529 * Thus, when a collision like this is encountered, the earlier match is
530 * preserved and the new match is discarded.
531 */
532 class CompositeDraftDecorator {
533 constructor(decorators: Array<DraftDecorator>);
534
535 getDecorations(block: ContentBlock, contentState: ContentState): Immutable.List<string>;
536 getComponentForKey(key: string): Function;
537 getPropsForKey(key: string): Object;
538 }
539 }
540
541 namespace Encoding {
542 import DraftInlineStyleType = Draft.Model.Constants.DraftInlineStyleType;
543 import DraftBlockType = Draft.Model.Constants.DraftBlockType;
544 import DraftEntityMutability = Draft.Model.Constants.DraftEntityMutability;
545 import DraftEntityType = Draft.Model.Constants.DraftEntityType;
546
547 import ContentBlock = Draft.Model.ImmutableData.ContentBlock;
548 import ContentState = Draft.Model.ImmutableData.ContentState;
549
550 import DraftBlockRenderMap = Draft.Component.Base.DraftBlockRenderMap;
551
552 /**
553 * A plain object representation of an inline style range.
554 */
555 interface RawDraftInlineStyleRange {
556 style: DraftInlineStyleType;
557 offset: number;
558 length: number;
559 }
560
561 /**
562 * A plain object representation of an entity attribution.
563 *
564 * The `key` value corresponds to the key of the entity in the `entityMap` of
565 * a `ComposedText` object, not for use with `DraftEntity.get()`.
566 */
567 interface RawDraftEntityRange {
568 key: number;
569 offset: number;
570 length: number;
571 }
572
573 /**
574 * A plain object representation of an EntityInstance.
575 */
576 interface RawDraftEntity<T = { [key: string]: any }> {
577 type: DraftEntityType;
578 mutability: DraftEntityMutability;
579 data: T;
580 }
581
582 /**
583 * A plain object representation of a ContentBlock, with all style and entity
584 * attribution repackaged as range objects.
585 */
586 interface RawDraftContentBlock {
587 key: string;
588 type: DraftBlockType;
589 text: string;
590 depth: number;
591 inlineStyleRanges: Array<RawDraftInlineStyleRange>;
592 entityRanges: Array<RawDraftEntityRange>;
593 data?: { [key: string]: any } | undefined;
594 }
595
596 /**
597 * A type that represents a composed document as vanilla JavaScript objects,
598 * with all styles and entities represented as ranges. Corresponding entity
599 * objects are packaged as objects as well.
600 *
601 * This object is especially useful when sending the document state to the
602 * server for storage, as its representation is more concise than our
603 * immutable objects.
604 */
605 interface RawDraftContentState {
606 blocks: Array<RawDraftContentBlock>;
607 entityMap: { [key: string]: RawDraftEntity };
608 }
609
610 function convertFromHTMLtoContentBlocks(
611 html: string,
612 DOMBuilder?: Function,
613 blockRenderMap?: DraftBlockRenderMap,
614 ): { contentBlocks: Array<ContentBlock>; entityMap: any };
615 function convertFromRawToDraftState(rawState: RawDraftContentState): ContentState;
616 function convertFromDraftStateToRaw(contentState: ContentState): RawDraftContentState;
617 }
618
619 namespace Entity {
620 import DraftEntityMutability = Draft.Model.Constants.DraftEntityMutability;
621 import DraftEntityType = Draft.Model.Constants.DraftEntityType;
622
623 /**
624 * A "document entity" is an object containing metadata associated with a
625 * piece of text in a ContentBlock.
626 *
627 * For example, a `link` entity might include a `uri` property. When a
628 * ContentBlock is rendered in the browser, text that refers to that link
629 * entity may be rendered as an anchor, with the `uri` as the href value.
630 *
631 * In a ContentBlock, every position in the text may correspond to zero
632 * or one entities. This correspondence is tracked using a key string,
633 * generated via DraftEntity.create() and used to obtain entity metadata
634 * via DraftEntity.get().
635 */
636 class DraftEntity {
637 /**
638 * Create a DraftEntityInstance and store it for later retrieval.
639 *
640 * A random key string will be generated and returned. This key may
641 * be used to track the entity's usage in a ContentBlock, and for
642 * retrieving data about the entity at render time.
643 */
644 static create(type: DraftEntityType, mutability: DraftEntityMutability, data?: Object): string;
645
646 /**
647 * Add an existing DraftEntityInstance to the DraftEntity map. This is
648 * useful when restoring instances from the server.
649 */
650 static add(instance: DraftEntityInstance): string;
651
652 /**
653 * Retrieve the entity corresponding to the supplied key string.
654 */
655 static get(key: string): DraftEntityInstance;
656
657 /**
658 * Entity instances are immutable. If you need to update the data for an
659 * instance, this method will merge your data updates and return a new
660 * instance.
661 */
662 static mergeData(key: string, toMerge: { [key: string]: any }): DraftEntityInstance;
663
664 /**
665 * Completely replace the data for a given instance.
666 */
667 static replaceData(key: string, newData: { [key: string]: any }): DraftEntityInstance;
668 }
669
670 /**
671 * An instance of a document entity, consisting of a `type` and relevant
672 * `data`, metadata about the entity.
673 *
674 * For instance, a "link" entity might provide a URI, and a "mention"
675 * entity might provide the mentioned user's ID. These pieces of data
676 * may be used when rendering the entity as part of a ContentBlock DOM
677 * representation. For a link, the data would be used as an href for
678 * the rendered anchor. For a mention, the ID could be used to retrieve
679 * a hovercard.
680 */
681 interface DraftEntityInstance {
682 getType(): DraftEntityType;
683 getMutability(): DraftEntityMutability;
684 getData(): any;
685 }
686 }
687
688 namespace ImmutableData {
689 import DraftBlockType = Draft.Model.Constants.DraftBlockType;
690 import DraftEntityMutability = Draft.Model.Constants.DraftEntityMutability;
691 import DraftEntityType = Draft.Model.Constants.DraftEntityType;
692 import DraftEntityInstance = Draft.Model.Entity.DraftEntityInstance;
693
694 import DraftDecoratorType = Draft.Model.Decorators.DraftDecoratorType;
695
696 type DraftInlineStyle = Immutable.OrderedSet<string>;
697 type BlockMap = Immutable.OrderedMap<string, Draft.Model.ImmutableData.ContentBlock>;
698
699 var Record: Immutable.Record.Class;
700
701 interface DraftBlockRenderConfig {
702 element: string;
703 wrapper?: React.ReactNode | undefined;
704 }
705
706 class EditorState extends Record {
707 static createEmpty(decorator?: DraftDecoratorType): EditorState;
708 static createWithContent(contentState: ContentState, decorator?: DraftDecoratorType): EditorState;
709 static create(config: Object): EditorState;
710 static set(editorState: EditorState, put: Object): EditorState;
711
712 /**
713 * Incorporate native DOM selection changes into the EditorState. This
714 * method can be used when we simply want to accept whatever the DOM
715 * has given us to represent selection, and we do not need to re-render
716 * the editor.
717 *
718 * To forcibly move the DOM selection, see `EditorState.forceSelection`.
719 */
720 static acceptSelection(editorState: EditorState, selection: SelectionState): EditorState;
721
722 /**
723 * At times, we need to force the DOM selection to be where we
724 * need it to be. This can occur when the anchor or focus nodes
725 * are non-text nodes, for instance. In this case, we want to trigger
726 * a re-render of the editor, which in turn forces selection into
727 * the correct place in the DOM. The `forceSelection` method
728 * accomplishes this.
729 *
730 * This method should be used in cases where you need to explicitly
731 * move the DOM selection from one place to another without a change
732 * in ContentState.
733 */
734 static forceSelection(editorState: EditorState, selection: SelectionState): EditorState;
735
736 /**
737 * Move selection to the end of the editor without forcing focus.
738 */
739 static moveSelectionToEnd(editorState: EditorState): EditorState;
740
741 /**
742 * Force focus to the end of the editor. This is useful in scenarios
743 * where we want to programmatically focus the input and it makes sense
744 * to allow the user to continue working seamlessly.
745 */
746 static moveFocusToEnd(editorState: EditorState): EditorState;
747
748 /**
749 * Push the current ContentState onto the undo stack if it should be
750 * considered a boundary state, and set the provided ContentState as the
751 * new current content.
752 */
753 static push(
754 editorState: EditorState,
755 contentState: ContentState,
756 changeType: EditorChangeType,
757 ): EditorState;
758
759 /**
760 * Make the top ContentState in the undo stack the new current content and
761 * push the current content onto the redo stack.
762 */
763 static undo(editorState: EditorState): EditorState;
764
765 /**
766 * Make the top ContentState in the redo stack the new current content and
767 * push the current content onto the undo stack.
768 */
769 static redo(editorState: EditorState): EditorState;
770
771 toJS(): Object;
772 getAllowUndo(): boolean;
773 getCurrentContent(): ContentState;
774 getUndoStack(): Immutable.Stack<ContentState>;
775 getRedoStack(): Immutable.Stack<ContentState>;
776 getSelection(): SelectionState;
777 getDecorator(): DraftDecoratorType;
778 isInCompositionMode(): boolean;
779 mustForceSelection(): boolean;
780 getNativelyRenderedContent(): ContentState;
781 getLastChangeType(): EditorChangeType;
782
783 /**
784 * While editing, the user may apply inline style commands with a collapsed
785 * cursor, intending to type text that adopts the specified style. In this
786 * case, we track the specified style as an "override" that takes precedence
787 * over the inline style of the text adjacent to the cursor.
788 *
789 * If null, there is no override in place.
790 */
791 getInlineStyleOverride(): DraftInlineStyle;
792
793 static setInlineStyleOverride(
794 editorState: EditorState,
795 inlineStyleOverride: DraftInlineStyle,
796 ): EditorState;
797
798 /**
799 * Get the appropriate inline style for the editor state. If an
800 * override is in place, use it. Otherwise, the current style is
801 * based on the location of the selection state.
802 */
803 getCurrentInlineStyle(): DraftInlineStyle;
804
805 getBlockTree(blockKey: string): Immutable.List<any>;
806 isSelectionAtStartOfContent(): boolean;
807 isSelectionAtEndOfContent(): boolean;
808 getDirectionMap(): Immutable.OrderedMap<any, any>;
809 }
810
811 class ContentBlock extends Record {
812 getKey(): string;
813
814 getType(): DraftBlockType;
815
816 getText(): string;
817 getCharacterList(): Immutable.List<CharacterMetadata>;
818 getLength(): number;
819 getDepth(): number;
820 getData(): Immutable.Map<any, any>;
821 getInlineStyleAt(offset: number): DraftInlineStyle;
822 getEntityAt(offset: number): string;
823
824 /**
825 * Execute a callback for every contiguous range of styles within the block.
826 */
827 findStyleRanges(
828 filterFn: (value: CharacterMetadata) => boolean,
829 callback: (start: number, end: number) => void,
830 ): void;
831
832 /**
833 * Execute a callback for every contiguous range of entities within the block.
834 */
835 findEntityRanges(
836 filterFn: (value: CharacterMetadata) => boolean,
837 callback: (start: number, end: number) => void,
838 ): void;
839 }
840
841 class ContentState extends Record {
842 static createFromBlockArray(blocks: Array<ContentBlock>, entityMap?: any): ContentState;
843 static createFromText(text: string, delimiter?: string): ContentState;
844
845 createEntity(type: DraftEntityType, mutability: DraftEntityMutability, data?: Object): ContentState;
846 getEntity(key: string): EntityInstance;
847 getEntityMap(): any;
848 getAllEntities(): Immutable.OrderedMap<string, DraftEntityInstance>;
849 getLastCreatedEntityKey(): string;
850 mergeEntityData(key: string, toMerge: { [key: string]: any }): ContentState;
851 replaceEntityData(key: string, toMerge: { [key: string]: any }): ContentState;
852 addEntity(instance: DraftEntityInstance): ContentState;
853
854 getBlockMap(): BlockMap;
855 getSelectionBefore(): SelectionState;
856 getSelectionAfter(): SelectionState;
857 getBlockForKey(key: string): ContentBlock;
858
859 getKeyBefore(key: string): string;
860 getKeyAfter(key: string): string;
861 getBlockAfter(key: string): ContentBlock | undefined;
862 getBlockBefore(key: string): ContentBlock | undefined;
863
864 getBlocksAsArray(): Array<ContentBlock>;
865 getFirstBlock(): ContentBlock;
866 getLastBlock(): ContentBlock;
867 getPlainText(delimiter?: string): string;
868 hasText(): boolean;
869 }
870
871 interface SelectionStateProperties {
872 anchorKey: string;
873 anchorOffset: number;
874 focusKey: string;
875 focusOffset: number;
876 isBackward: boolean;
877 hasFocus: boolean;
878 }
879
880 class SelectionState extends Record {
881 static createEmpty(key: string): SelectionState;
882
883 merge(
884 ...iterables: Immutable.Iterable<
885 keyof SelectionStateProperties,
886 SelectionStateProperties[keyof SelectionStateProperties]
887 >[]
888 ): SelectionState;
889 merge(...iterables: Partial<SelectionStateProperties>[]): SelectionState;
890
891 serialize(): string;
892 getAnchorKey(): string;
893 getAnchorOffset(): number;
894 getFocusKey(): string;
895 getFocusOffset(): number;
896 getIsBackward(): boolean;
897 getHasFocus(): boolean;
898 /**
899 * Return whether the specified range overlaps with an edge of the
900 * SelectionState.
901 */
902 hasEdgeWithin(blockKey: string, start: number, end: number): boolean;
903 isCollapsed(): boolean;
904 getStartKey(): string;
905 getStartOffset(): number;
906 getEndKey(): string;
907 getEndOffset(): number;
908 }
909
910 class CharacterMetadata {
911 static applyStyle(record: CharacterMetadata, style: string): CharacterMetadata;
912 static removeStyle(record: CharacterMetadata, style: string): CharacterMetadata;
913 static applyEntity(record: CharacterMetadata, entityKey: string | null): CharacterMetadata;
914 static applyEntity(record: CharacterMetadata): CharacterMetadata;
915 /**
916 * Use this function instead of the `CharacterMetadata` constructor.
917 * Since most content generally uses only a very small number of
918 * style/entity permutations, we can reuse these objects as often as
919 * possible.
920 */
921 static create(config?: CharacterMetadataConfig): CharacterMetadata;
922 static create(): CharacterMetadata;
923
924 getStyle(): DraftInlineStyle;
925 getEntity(): string;
926 hasStyle(style: string): boolean;
927 }
928
929 interface CharacterMetadataConfig {
930 style?: DraftInlineStyle | undefined;
931 entity?: string | undefined;
932 }
933
934 type EditorChangeType =
935 | 'adjust-depth'
936 | 'apply-entity'
937 | 'backspace-character'
938 | 'change-block-data'
939 | 'change-block-type'
940 | 'change-inline-style'
941 | 'move-block'
942 | 'delete-character'
943 | 'insert-characters'
944 | 'insert-fragment'
945 | 'redo'
946 | 'remove-range'
947 | 'spellcheck-change'
948 | 'split-block'
949 | 'undo';
950
951 class BlockMapBuilder {
952 static createFromArray(blocks: Array<ContentBlock>): BlockMap;
953 }
954
955 const DefaultDraftBlockRenderMap: Immutable.Map<any, any>;
956 const DefaultDraftInlineStyle: Immutable.Map<any, any>;
957 }
958
959 namespace Keys {
960 function generateRandomKey(): string;
961 }
962
963 namespace Modifier {
964 import EditorState = Draft.Model.ImmutableData.EditorState;
965 import ContentState = Draft.Model.ImmutableData.ContentState;
966 import SelectionState = Draft.Model.ImmutableData.SelectionState;
967
968 import BlockMap = Draft.Model.ImmutableData.BlockMap;
969 import DraftInlineStyle = Draft.Model.ImmutableData.DraftInlineStyle;
970
971 import DraftRemovalDirection = Draft.Model.Constants.DraftRemovalDirection;
972 import DraftBlockType = Draft.Model.Constants.DraftBlockType;
973
974 import DraftEditorCommand = Draft.Model.Constants.DraftEditorCommand;
975
976 type URI = any;
977
978 class AtomicBlockUtils {
979 static insertAtomicBlock(editorState: EditorState, entityKey: string, character: string): EditorState;
980 static moveAtomicBlock(
981 editorState: EditorState,
982 atomicBlock: ContentBlock,
983 targetRange: SelectionState,
984 insertionMode?: DraftInsertionType,
985 ): EditorState;
986 }
987
988 /**
989 * `DraftModifier` provides a set of convenience methods that apply
990 * modifications to a `ContentState` object based on a target `SelectionState`.
991 *
992 * Any change to a `ContentState` should be decomposable into a series of
993 * transaction functions that apply the required changes and return output
994 * `ContentState` objects.
995 *
996 * These functions encapsulate some of the most common transaction sequences.
997 */
998 class DraftModifier {
999 static replaceText(
1000 contentState: ContentState,
1001 rangeToReplace: SelectionState,
1002 text: string,
1003 inlineStyle?: DraftInlineStyle,
1004 entityKey?: string,
1005 ): ContentState;
1006 static insertText(
1007 contentState: ContentState,
1008 targetRange: SelectionState,
1009 text: string,
1010 inlineStyle?: DraftInlineStyle,
1011 entityKey?: string,
1012 ): ContentState;
1013 static moveText(
1014 contentState: ContentState,
1015 removalRange: SelectionState,
1016 targetRange: SelectionState,
1017 ): ContentState;
1018 static replaceWithFragment(
1019 contentState: ContentState,
1020 targetRange: SelectionState,
1021 fragment: BlockMap,
1022 ): ContentState;
1023
1024 static removeRange(
1025 contentState: ContentState,
1026 rangeToRemove: SelectionState,
1027 removalDirection: DraftRemovalDirection,
1028 ): ContentState;
1029
1030 static splitBlock(contentState: ContentState, selectionState: SelectionState): ContentState;
1031 static applyInlineStyle(
1032 contentState: ContentState,
1033 selectionState: SelectionState,
1034 inlineStyle: string,
1035 ): ContentState;
1036 static removeInlineStyle(
1037 contentState: ContentState,
1038 selectionState: SelectionState,
1039 inlineStyle: string,
1040 ): ContentState;
1041
1042 static setBlockType(
1043 contentState: ContentState,
1044 selectionState: SelectionState,
1045 blockType: DraftBlockType,
1046 ): ContentState;
1047 static setBlockType(
1048 contentState: ContentState,
1049 selectionState: SelectionState,
1050 blockType: string,
1051 ): ContentState;
1052
1053 static setBlockData(
1054 contentState: ContentState,
1055 selectionState: SelectionState,
1056 blockData: Immutable.Map<any, any>,
1057 ): ContentState;
1058 static mergeBlockData(
1059 contentState: ContentState,
1060 selectionState: SelectionState,
1061 blockData: Immutable.Map<any, any>,
1062 ): ContentState;
1063 static applyEntity(
1064 contentState: ContentState,
1065 selectionState: SelectionState,
1066 entityKey: string | null,
1067 ): ContentState;
1068 }
1069
1070 class RichTextEditorUtil {
1071 static currentBlockContainsLink(editorState: EditorState): boolean;
1072 static getCurrentBlockType(editorState: EditorState): DraftBlockType;
1073 static getCurrentBlockType(editorState: EditorState): string;
1074 static getDataObjectForLinkURL(uri: URI): Object;
1075
1076 static handleKeyCommand(editorState: EditorState, command: DraftEditorCommand): EditorState | null;
1077 static handleKeyCommand(editorState: EditorState, command: string): null;
1078
1079 static insertSoftNewline(editorState: EditorState): EditorState;
1080
1081 /**
1082 * For collapsed selections at the start of styled blocks, backspace should
1083 * just remove the existing style.
1084 */
1085 static onBackspace(editorState: EditorState): EditorState | null;
1086 static onDelete(editorState: EditorState): EditorState | null;
1087 static onTab(event: SyntheticKeyboardEvent, editorState: EditorState, maxDepth: number): EditorState;
1088
1089 static toggleBlockType(editorState: EditorState, blockType: DraftBlockType): EditorState;
1090 static toggleBlockType(editorState: EditorState, blockType: string): EditorState;
1091
1092 static toggleCode(editorState: EditorState): EditorState;
1093
1094 /**
1095 * Toggle the specified inline style for the selection. If the
1096 * user's selection is collapsed, apply or remove the style for the
1097 * internal state. If it is not collapsed, apply the change directly
1098 * to the document state.
1099 */
1100 static toggleInlineStyle(editorState: EditorState, inlineStyle: string): EditorState;
1101
1102 static toggleLink(
1103 editorState: EditorState,
1104 targetSelection: SelectionState,
1105 entityKey: string | null,
1106 ): EditorState;
1107
1108 /**
1109 * When a collapsed cursor is at the start of an empty styled block, allow
1110 * certain key commands (newline, backspace) to simply change the
1111 * style of the block instead of the default behavior.
1112 */
1113 static tryToRemoveBlockStyle(editorState: EditorState): ContentState | null;
1114 }
1115 }
1116 }
1117}
1118
1119import Editor = Draft.Component.Base.DraftEditor;
1120import EditorProps = Draft.Component.Base.DraftEditorProps;
1121import EditorBlock = Draft.Component.Components.DraftEditorBlock;
1122import EditorState = Draft.Model.ImmutableData.EditorState;
1123import EditorChangeType = Draft.Model.ImmutableData.EditorChangeType;
1124import EditorCommand = Draft.Component.Base.EditorCommand;
1125
1126import DraftDecoratorType = Draft.Model.Decorators.DraftDecoratorType;
1127import DraftDecorator = Draft.Model.Decorators.DraftDecorator;
1128import CompositeDecorator = Draft.Model.Decorators.CompositeDraftDecorator;
1129import Entity = Draft.Model.Entity.DraftEntity;
1130import EntityInstance = Draft.Model.Entity.DraftEntityInstance;
1131
1132import BlockMapBuilder = Draft.Model.ImmutableData.BlockMapBuilder;
1133import CharacterMetadata = Draft.Model.ImmutableData.CharacterMetadata;
1134import ContentBlock = Draft.Model.ImmutableData.ContentBlock;
1135import ContentState = Draft.Model.ImmutableData.ContentState;
1136import SelectionState = Draft.Model.ImmutableData.SelectionState;
1137import DraftInlineStyle = Draft.Model.ImmutableData.DraftInlineStyle;
1138import BlockMap = Draft.Model.ImmutableData.BlockMap;
1139
1140import AtomicBlockUtils = Draft.Model.Modifier.AtomicBlockUtils;
1141import KeyBindingUtil = Draft.Component.Utils.KeyBindingUtil;
1142import Modifier = Draft.Model.Modifier.DraftModifier;
1143import RichUtils = Draft.Model.Modifier.RichTextEditorUtil;
1144
1145import DefaultDraftBlockRenderMap = Draft.Model.ImmutableData.DefaultDraftBlockRenderMap;
1146import DefaultDraftInlineStyle = Draft.Model.ImmutableData.DefaultDraftInlineStyle;
1147
1148import RawDraftInlineStyleRange = Draft.Model.Encoding.RawDraftInlineStyleRange;
1149import RawDraftEntityRange = Draft.Model.Encoding.RawDraftEntityRange;
1150import RawDraftEntity = Draft.Model.Encoding.RawDraftEntity;
1151import RawDraftContentBlock = Draft.Model.Encoding.RawDraftContentBlock;
1152import RawDraftContentState = Draft.Model.Encoding.RawDraftContentState;
1153import convertFromRaw = Draft.Model.Encoding.convertFromRawToDraftState;
1154import convertToRaw = Draft.Model.Encoding.convertFromDraftStateToRaw;
1155import convertFromHTML = Draft.Model.Encoding.convertFromHTMLtoContentBlocks;
1156
1157import genKey = Draft.Model.Keys.generateRandomKey;
1158import getDefaultKeyBinding = Draft.Component.Utils.getDefaultKeyBinding;
1159import getVisibleSelectionRect = Draft.Component.Selection.getVisibleSelectionRect;
1160
1161import DraftEditorCommand = Draft.Model.Constants.DraftEditorCommand;
1162import DraftDragType = Draft.Model.Constants.DraftDragType;
1163import DraftBlockType = Draft.Model.Constants.DraftBlockType;
1164import DraftBlockRenderConfig = Draft.Model.ImmutableData.DraftBlockRenderConfig;
1165import DraftBlockRenderMap = Draft.Component.Base.DraftBlockRenderMap;
1166import DraftInlineStyleType = Draft.Model.Constants.DraftInlineStyleType;
1167import DraftEntityMutability = Draft.Model.Constants.DraftEntityMutability;
1168import DraftEntityType = Draft.Model.Constants.DraftEntityType;
1169import DraftRemovalDirection = Draft.Model.Constants.DraftRemovalDirection;
1170import DraftHandleValue = Draft.Model.Constants.DraftHandleValue;
1171import DraftInsertionType = Draft.Model.Constants.DraftInsertionType;
1172import DraftStyleMap = Draft.Component.Base.DraftStyleMap;
1173
1174import DraftModel = Draft.Model;
1175import DraftComponent = Draft.Component;
1176
1177export {
1178 Editor,
1179 EditorProps,
1180 EditorBlock,
1181 EditorState,
1182 EditorChangeType,
1183 EditorCommand,
1184 DraftDecoratorType,
1185 DraftDecorator,
1186 CompositeDecorator,
1187 Entity,
1188 EntityInstance,
1189 BlockMapBuilder,
1190 CharacterMetadata,
1191 ContentBlock,
1192 ContentState,
1193 SelectionState,
1194 DraftInlineStyle,
1195 BlockMap,
1196 AtomicBlockUtils,
1197 KeyBindingUtil,
1198 Modifier,
1199 RichUtils,
1200 DefaultDraftBlockRenderMap,
1201 DefaultDraftInlineStyle,
1202 RawDraftInlineStyleRange,
1203 RawDraftEntityRange,
1204 RawDraftEntity,
1205 RawDraftContentBlock,
1206 RawDraftContentState,
1207 convertFromRaw,
1208 convertToRaw,
1209 convertFromHTML,
1210 genKey,
1211 getDefaultKeyBinding,
1212 getVisibleSelectionRect,
1213 DraftEditorCommand,
1214 DraftDragType,
1215 DraftBlockType,
1216 DraftBlockRenderConfig,
1217 DraftBlockRenderMap,
1218 DraftInlineStyleType,
1219 DraftEntityType,
1220 DraftEntityMutability,
1221 DraftRemovalDirection,
1222 DraftHandleValue,
1223 DraftInsertionType,
1224 DraftStyleMap,
1225 DraftModel,
1226 DraftComponent
1227};
1228
\No newline at end of file