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.
 
 
 
 

173 lignes
6.6 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. *
  9. * @emails oncall+draft_js
  10. *
  11. * This file is a fork of DraftEditorContents.react.js for tree nodes
  12. *
  13. * This is unstable and not part of the public API and should not be used by
  14. * production systems. This file may be update/removed without notice.
  15. */
  16. 'use strict';
  17. var _assign = require("object-assign");
  18. function _extends() { _extends = _assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  19. function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
  20. var DraftEditorBlockNode = require("./DraftEditorBlockNode.react");
  21. var DraftOffsetKey = require("./DraftOffsetKey");
  22. var React = require("react");
  23. var nullthrows = require("fbjs/lib/nullthrows");
  24. /**
  25. * `DraftEditorContents` is the container component for all block components
  26. * rendered for a `DraftEditor`. It is optimized to aggressively avoid
  27. * re-rendering blocks whenever possible.
  28. *
  29. * This component is separate from `DraftEditor` because certain props
  30. * (for instance, ARIA props) must be allowed to update without affecting
  31. * the contents of the editor.
  32. */
  33. var DraftEditorContentsExperimental =
  34. /*#__PURE__*/
  35. function (_React$Component) {
  36. _inheritsLoose(DraftEditorContentsExperimental, _React$Component);
  37. function DraftEditorContentsExperimental() {
  38. return _React$Component.apply(this, arguments) || this;
  39. }
  40. var _proto = DraftEditorContentsExperimental.prototype;
  41. _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
  42. var prevEditorState = this.props.editorState;
  43. var nextEditorState = nextProps.editorState;
  44. var prevDirectionMap = prevEditorState.getDirectionMap();
  45. var nextDirectionMap = nextEditorState.getDirectionMap(); // Text direction has changed for one or more blocks. We must re-render.
  46. if (prevDirectionMap !== nextDirectionMap) {
  47. return true;
  48. }
  49. var didHaveFocus = prevEditorState.getSelection().getHasFocus();
  50. var nowHasFocus = nextEditorState.getSelection().getHasFocus();
  51. if (didHaveFocus !== nowHasFocus) {
  52. return true;
  53. }
  54. var nextNativeContent = nextEditorState.getNativelyRenderedContent();
  55. var wasComposing = prevEditorState.isInCompositionMode();
  56. var nowComposing = nextEditorState.isInCompositionMode(); // If the state is unchanged or we're currently rendering a natively
  57. // rendered state, there's nothing new to be done.
  58. if (prevEditorState === nextEditorState || nextNativeContent !== null && nextEditorState.getCurrentContent() === nextNativeContent || wasComposing && nowComposing) {
  59. return false;
  60. }
  61. var prevContent = prevEditorState.getCurrentContent();
  62. var nextContent = nextEditorState.getCurrentContent();
  63. var prevDecorator = prevEditorState.getDecorator();
  64. var nextDecorator = nextEditorState.getDecorator();
  65. return wasComposing !== nowComposing || prevContent !== nextContent || prevDecorator !== nextDecorator || nextEditorState.mustForceSelection();
  66. };
  67. _proto.render = function render() {
  68. var _this$props = this.props,
  69. blockRenderMap = _this$props.blockRenderMap,
  70. blockRendererFn = _this$props.blockRendererFn,
  71. blockStyleFn = _this$props.blockStyleFn,
  72. customStyleMap = _this$props.customStyleMap,
  73. customStyleFn = _this$props.customStyleFn,
  74. editorState = _this$props.editorState,
  75. editorKey = _this$props.editorKey,
  76. textDirectionality = _this$props.textDirectionality;
  77. var content = editorState.getCurrentContent();
  78. var selection = editorState.getSelection();
  79. var forceSelection = editorState.mustForceSelection();
  80. var decorator = editorState.getDecorator();
  81. var directionMap = nullthrows(editorState.getDirectionMap());
  82. var blocksAsArray = content.getBlocksAsArray();
  83. var rootBlock = blocksAsArray[0];
  84. var processedBlocks = [];
  85. var nodeBlock = rootBlock;
  86. while (nodeBlock) {
  87. var blockKey = nodeBlock.getKey();
  88. var blockProps = {
  89. blockRenderMap: blockRenderMap,
  90. blockRendererFn: blockRendererFn,
  91. blockStyleFn: blockStyleFn,
  92. contentState: content,
  93. customStyleFn: customStyleFn,
  94. customStyleMap: customStyleMap,
  95. decorator: decorator,
  96. editorKey: editorKey,
  97. editorState: editorState,
  98. forceSelection: forceSelection,
  99. selection: selection,
  100. block: nodeBlock,
  101. direction: textDirectionality ? textDirectionality : directionMap.get(blockKey),
  102. tree: editorState.getBlockTree(blockKey)
  103. };
  104. var configForType = blockRenderMap.get(nodeBlock.getType()) || blockRenderMap.get('unstyled');
  105. var wrapperTemplate = configForType.wrapper;
  106. processedBlocks.push({
  107. /* $FlowFixMe(>=0.112.0 site=www,mobile) This comment suppresses an
  108. * error found when Flow v0.112 was deployed. To see the error delete
  109. * this comment and run Flow. */
  110. block: React.createElement(DraftEditorBlockNode, _extends({
  111. key: blockKey
  112. }, blockProps)),
  113. wrapperTemplate: wrapperTemplate,
  114. key: blockKey,
  115. offsetKey: DraftOffsetKey.encode(blockKey, 0, 0)
  116. });
  117. var nextBlockKey = nodeBlock.getNextSiblingKey();
  118. nodeBlock = nextBlockKey ? content.getBlockForKey(nextBlockKey) : null;
  119. } // Group contiguous runs of blocks that have the same wrapperTemplate
  120. var outputBlocks = [];
  121. for (var ii = 0; ii < processedBlocks.length;) {
  122. var info = processedBlocks[ii];
  123. if (info.wrapperTemplate) {
  124. var blocks = [];
  125. do {
  126. blocks.push(processedBlocks[ii].block);
  127. ii++;
  128. } while (ii < processedBlocks.length && processedBlocks[ii].wrapperTemplate === info.wrapperTemplate);
  129. var wrapperElement = React.cloneElement(info.wrapperTemplate, {
  130. key: info.key + '-wrap',
  131. 'data-offset-key': info.offsetKey
  132. }, blocks);
  133. outputBlocks.push(wrapperElement);
  134. } else {
  135. outputBlocks.push(info.block);
  136. ii++;
  137. }
  138. }
  139. return React.createElement("div", {
  140. "data-contents": "true"
  141. }, outputBlocks);
  142. };
  143. return DraftEditorContentsExperimental;
  144. }(React.Component);
  145. module.exports = DraftEditorContentsExperimental;