You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

163 lines
7.5 KiB

  1. /**
  2. * Copyright (c) Facebook, Inc. and its affiliates.
  3. *
  4. * This source code is licensed under the MIT license found in the
  5. * LICENSE file in the root directory of this source tree.
  6. *
  7. * @format
  8. * @flow
  9. * @emails oncall+draft_js
  10. */
  11. 'use strict';
  12. var Promise = require("fbjs/lib/Promise");
  13. import type { BlockNodeRecord } from "./BlockNodeRecord";
  14. import type { DraftBlockRenderMap } from "./DraftBlockRenderMap";
  15. import type { DraftDragType } from "./DraftDragType";
  16. import type DraftEditor from "./DraftEditor.react";
  17. import type { DraftEditorCommand } from "./DraftEditorCommand";
  18. import type { DraftHandleValue } from "./DraftHandleValue";
  19. import type { DraftInlineStyle } from "./DraftInlineStyle";
  20. import type { DraftTextAlignment } from "./DraftTextAlignment";
  21. import type EditorState from "./EditorState";
  22. import type SelectionState from "./SelectionState";
  23. import type { BidiDirection } from "fbjs/lib/UnicodeBidiDirection";
  24. export type DraftEditorProps = {
  25. /**
  26. * The two most critical props are `editorState` and `onChange`.
  27. *
  28. * The `editorState` prop defines the entire state of the editor, while the
  29. * `onChange` prop is the method in which all state changes are propagated
  30. * upward to higher-level components.
  31. *
  32. * These props are analogous to `value` and `onChange` in controlled React
  33. * text inputs.
  34. */
  35. editorState: EditorState,
  36. onChange: (editorState: EditorState) => void,
  37. // specify editorKey when rendering serverside. If you do not set this prop
  38. // react will complain that there is a server/client mismatch because Draft
  39. // will generate a random editorKey when rendering in each context. The key
  40. // is used to figure out if content is being pasted within a draft block to
  41. // better apply formatting and styles. If two editors share the same key &
  42. // `stripPastedStyles` is false, draft will assume both editors share their
  43. // styling and formatting when re-applying styles.
  44. editorKey?: string,
  45. placeholder?: string,
  46. // Specify whether text alignment should be forced in a direction
  47. // regardless of input characters.
  48. textAlignment?: DraftTextAlignment,
  49. // Specify whether text directionality should be forced in a direction
  50. // regardless of input characters.
  51. textDirectionality?: BidiDirection,
  52. // For a given `ContentBlock` object, return an object that specifies
  53. // a custom block component and/or props. If no object is returned,
  54. // the default `DraftEditorBlock` is used.
  55. blockRendererFn: (block: BlockNodeRecord) => ?Object,
  56. // Function that returns a cx map corresponding to block-level styles.
  57. blockStyleFn: (block: BlockNodeRecord) => string,
  58. // If supplied, a ref which will be passed to the contenteditable.
  59. // Currently, only object refs are supported.
  60. editorRef?: ?({|
  61. current: null | HTMLElement
  62. |} | ((HTMLElement | null) => void)),
  63. // A function that accepts a synthetic key event and returns
  64. // the matching DraftEditorCommand constant, or a custom string,
  65. // or null if no command should be invoked.
  66. keyBindingFn: (e: SyntheticKeyboardEvent<>) => ?string,
  67. // Set whether the editor should prevent scrolling into view on mount
  68. // if it happens offscreen. By default, `false` to match the native behavior.
  69. preventScroll?: boolean,
  70. // Set whether the `DraftEditor` component should be editable. Useful for
  71. // temporarily disabling edit behavior or allowing `DraftEditor` rendering
  72. // to be used for consumption purposes.
  73. readOnly: boolean,
  74. // Note: spellcheck is always disabled for IE. If enabled in Safari, OSX
  75. // autocorrect is enabled as well.
  76. spellCheck: boolean,
  77. // Set whether to remove all style information from pasted content. If your
  78. // use case should not have any block or inline styles, it is recommended
  79. // that you set this to `true`.
  80. stripPastedStyles: boolean,
  81. tabIndex?: number,
  82. // exposed especially to help improve mobile web behaviors
  83. autoCapitalize?: string,
  84. autoComplete?: string,
  85. autoCorrect?: string,
  86. ariaActiveDescendantID?: string,
  87. ariaAutoComplete?: string,
  88. ariaControls?: string,
  89. ariaDescribedBy?: string,
  90. ariaExpanded?: boolean,
  91. ariaLabel?: string,
  92. ariaLabelledBy?: string,
  93. ariaMultiline?: boolean,
  94. ariaOwneeID?: string,
  95. webDriverTestID?: string,
  96. /**
  97. * Cancelable event handlers, handled from the top level down. A handler
  98. * that returns `handled` will be the last handler to execute for that event.
  99. */
  100. // Useful for managing special behavior for pressing the `Return` key. E.g.
  101. // removing the style from an empty list item.
  102. handleReturn?: (e: SyntheticKeyboardEvent<>, editorState: EditorState) => DraftHandleValue,
  103. // Map a key command string provided by your key binding function to a
  104. // specified behavior.
  105. handleKeyCommand?: (command: DraftEditorCommand | string, editorState: EditorState, eventTimeStamp: number) => DraftHandleValue,
  106. // Handle intended text insertion before the insertion occurs. This may be
  107. // useful in cases where the user has entered characters that you would like
  108. // to trigger some special behavior. E.g. immediately converting `:)` to an
  109. // emoji Unicode character, or replacing ASCII quote characters with smart
  110. // quotes.
  111. handleBeforeInput?: (chars: string, editorState: EditorState, eventTimeStamp: number) => DraftHandleValue,
  112. handlePastedText?: (text: string, html?: string, editorState: EditorState) => DraftHandleValue,
  113. handlePastedFiles?: (files: Array<Blob>) => DraftHandleValue,
  114. // Handle dropped files
  115. handleDroppedFiles?: (selection: SelectionState, files: Array<Blob>) => DraftHandleValue,
  116. // Handle other drops to prevent default text movement/insertion behaviour
  117. handleDrop?: (selection: SelectionState, dataTransfer: Object, isInternal: DraftDragType) => DraftHandleValue,
  118. /**
  119. * Deprecated event triggers.
  120. */
  121. onEscape?: (e: SyntheticKeyboardEvent<>) => void,
  122. onTab?: (e: SyntheticKeyboardEvent<>) => void,
  123. onUpArrow?: (e: SyntheticKeyboardEvent<>) => void,
  124. onRightArrow?: (e: SyntheticKeyboardEvent<>) => void,
  125. onDownArrow?: (e: SyntheticKeyboardEvent<>) => void,
  126. onLeftArrow?: (e: SyntheticKeyboardEvent<>) => void,
  127. onBlur?: (e: SyntheticEvent<>) => void,
  128. onFocus?: (e: SyntheticEvent<>) => void,
  129. // Provide a map of inline style names corresponding to CSS style objects
  130. // that will be rendered for matching ranges.
  131. customStyleMap?: Object,
  132. // Provide a function that will construct CSS style objects given inline
  133. // style names.
  134. customStyleFn?: (style: DraftInlineStyle, block: BlockNodeRecord) => ?Object,
  135. // Provide a map of block rendering configurations. Each block type maps to
  136. // an element tag and an optional react element wrapper. This configuration
  137. // is used for both rendering and paste processing.
  138. blockRenderMap: DraftBlockRenderMap,
  139. // When the Editor loses focus (blurs) text selections are cleared
  140. // by default to mimic <textarea> behaviour, however in some situations
  141. // users may wish to preserve native behaviour.
  142. preserveSelectionOnBlur?: boolean,
  143. // Overrides for cut, copy & paste, which can be used to implement custom
  144. // behavior like entity cut/copy/paste (see PR #1784)."
  145. onPaste?: (DraftEditor, SyntheticClipboardEvent<>) => void | Promise<void>,
  146. onCut?: (DraftEditor, SyntheticClipboardEvent<>) => void,
  147. onCopy?: (DraftEditor, SyntheticClipboardEvent<>) => void,
  148. ...
  149. };
  150. export type DraftEditorDefaultProps = {
  151. blockRenderMap: DraftBlockRenderMap,
  152. blockRendererFn: (block: BlockNodeRecord) => ?Object,
  153. blockStyleFn: (block: BlockNodeRecord) => string,
  154. keyBindingFn: (e: SyntheticKeyboardEvent<>) => ?string,
  155. readOnly: boolean,
  156. spellCheck: boolean,
  157. stripPastedStyles: boolean,
  158. ...
  159. };