Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

editOnKeyDown.js 5.8 KiB

il y a 3 ans
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  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. *
  9. * @emails oncall+draft_js
  10. */
  11. 'use strict';
  12. var DraftModifier = require("./DraftModifier");
  13. var EditorState = require("./EditorState");
  14. var KeyBindingUtil = require("./KeyBindingUtil");
  15. var Keys = require("fbjs/lib/Keys");
  16. var SecondaryClipboard = require("./SecondaryClipboard");
  17. var UserAgent = require("fbjs/lib/UserAgent");
  18. var isEventHandled = require("./isEventHandled");
  19. var keyCommandBackspaceToStartOfLine = require("./keyCommandBackspaceToStartOfLine");
  20. var keyCommandBackspaceWord = require("./keyCommandBackspaceWord");
  21. var keyCommandDeleteWord = require("./keyCommandDeleteWord");
  22. var keyCommandInsertNewline = require("./keyCommandInsertNewline");
  23. var keyCommandMoveSelectionToEndOfBlock = require("./keyCommandMoveSelectionToEndOfBlock");
  24. var keyCommandMoveSelectionToStartOfBlock = require("./keyCommandMoveSelectionToStartOfBlock");
  25. var keyCommandPlainBackspace = require("./keyCommandPlainBackspace");
  26. var keyCommandPlainDelete = require("./keyCommandPlainDelete");
  27. var keyCommandTransposeCharacters = require("./keyCommandTransposeCharacters");
  28. var keyCommandUndo = require("./keyCommandUndo");
  29. var isOptionKeyCommand = KeyBindingUtil.isOptionKeyCommand;
  30. var isChrome = UserAgent.isBrowser('Chrome');
  31. /**
  32. * Map a `DraftEditorCommand` command value to a corresponding function.
  33. */
  34. function onKeyCommand(command, editorState, e) {
  35. switch (command) {
  36. case 'redo':
  37. return EditorState.redo(editorState);
  38. case 'delete':
  39. return keyCommandPlainDelete(editorState);
  40. case 'delete-word':
  41. return keyCommandDeleteWord(editorState);
  42. case 'backspace':
  43. return keyCommandPlainBackspace(editorState);
  44. case 'backspace-word':
  45. return keyCommandBackspaceWord(editorState);
  46. case 'backspace-to-start-of-line':
  47. return keyCommandBackspaceToStartOfLine(editorState, e);
  48. case 'split-block':
  49. return keyCommandInsertNewline(editorState);
  50. case 'transpose-characters':
  51. return keyCommandTransposeCharacters(editorState);
  52. case 'move-selection-to-start-of-block':
  53. return keyCommandMoveSelectionToStartOfBlock(editorState);
  54. case 'move-selection-to-end-of-block':
  55. return keyCommandMoveSelectionToEndOfBlock(editorState);
  56. case 'secondary-cut':
  57. return SecondaryClipboard.cut(editorState);
  58. case 'secondary-paste':
  59. return SecondaryClipboard.paste(editorState);
  60. default:
  61. return editorState;
  62. }
  63. }
  64. /**
  65. * Intercept keydown behavior to handle keys and commands manually, if desired.
  66. *
  67. * Keydown combinations may be mapped to `DraftCommand` values, which may
  68. * correspond to command functions that modify the editor or its contents.
  69. *
  70. * See `getDefaultKeyBinding` for defaults. Alternatively, the top-level
  71. * component may provide a custom mapping via the `keyBindingFn` prop.
  72. */
  73. function editOnKeyDown(editor, e) {
  74. var keyCode = e.which;
  75. var editorState = editor._latestEditorState;
  76. function callDeprecatedHandler(handlerName) {
  77. var deprecatedHandler = editor.props[handlerName];
  78. if (deprecatedHandler) {
  79. deprecatedHandler(e);
  80. return true;
  81. } else {
  82. return false;
  83. }
  84. }
  85. switch (keyCode) {
  86. case Keys.RETURN:
  87. e.preventDefault(); // The top-level component may manually handle newline insertion. If
  88. // no special handling is performed, fall through to command handling.
  89. if (editor.props.handleReturn && isEventHandled(editor.props.handleReturn(e, editorState))) {
  90. return;
  91. }
  92. break;
  93. case Keys.ESC:
  94. e.preventDefault();
  95. if (callDeprecatedHandler('onEscape')) {
  96. return;
  97. }
  98. break;
  99. case Keys.TAB:
  100. if (callDeprecatedHandler('onTab')) {
  101. return;
  102. }
  103. break;
  104. case Keys.UP:
  105. if (callDeprecatedHandler('onUpArrow')) {
  106. return;
  107. }
  108. break;
  109. case Keys.RIGHT:
  110. if (callDeprecatedHandler('onRightArrow')) {
  111. return;
  112. }
  113. break;
  114. case Keys.DOWN:
  115. if (callDeprecatedHandler('onDownArrow')) {
  116. return;
  117. }
  118. break;
  119. case Keys.LEFT:
  120. if (callDeprecatedHandler('onLeftArrow')) {
  121. return;
  122. }
  123. break;
  124. case Keys.SPACE:
  125. // Prevent Chrome on OSX behavior where option + space scrolls.
  126. if (isChrome && isOptionKeyCommand(e)) {
  127. e.preventDefault();
  128. }
  129. }
  130. var command = editor.props.keyBindingFn(e); // If no command is specified, allow keydown event to continue.
  131. if (command == null || command === '') {
  132. if (keyCode === Keys.SPACE && isChrome && isOptionKeyCommand(e)) {
  133. // The default keydown event has already been prevented in order to stop
  134. // Chrome from scrolling. Insert a nbsp into the editor as OSX would for
  135. // other browsers.
  136. var contentState = DraftModifier.replaceText(editorState.getCurrentContent(), editorState.getSelection(), "\xA0");
  137. editor.update(EditorState.push(editorState, contentState, 'insert-characters'));
  138. }
  139. return;
  140. }
  141. if (command === 'undo') {
  142. // Since undo requires some special updating behavior to keep the editor
  143. // in sync, handle it separately.
  144. keyCommandUndo(e, editorState, editor.update);
  145. return;
  146. } // At this point, we know that we're handling a command of some kind, so
  147. // we don't want to insert a character following the keydown.
  148. e.preventDefault(); // Allow components higher up the tree to handle the command first.
  149. if (editor.props.handleKeyCommand && isEventHandled(editor.props.handleKeyCommand(command, editorState, e.timeStamp))) {
  150. return;
  151. }
  152. var newState = onKeyCommand(command, editorState, e);
  153. if (newState !== editorState) {
  154. editor.update(newState);
  155. }
  156. }
  157. module.exports = editOnKeyDown;