Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
 
 
 
 

162 řádky
5.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. *
  9. * @emails oncall+draft_js
  10. */
  11. 'use strict';
  12. var _assign = require("object-assign");
  13. function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
  14. function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
  15. function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
  16. var DraftEditorTextNode = require("./DraftEditorTextNode.react");
  17. var React = require("react");
  18. var invariant = require("fbjs/lib/invariant");
  19. var isHTMLBRElement = require("./isHTMLBRElement");
  20. var setDraftEditorSelection = require("./setDraftEditorSelection").setDraftEditorSelection;
  21. /**
  22. * All leaf nodes in the editor are spans with single text nodes. Leaf
  23. * elements are styled based on the merging of an optional custom style map
  24. * and a default style map.
  25. *
  26. * `DraftEditorLeaf` also provides a wrapper for calling into the imperative
  27. * DOM Selection API. In this way, top-level components can declaratively
  28. * maintain the selection state.
  29. */
  30. var DraftEditorLeaf =
  31. /*#__PURE__*/
  32. function (_React$Component) {
  33. _inheritsLoose(DraftEditorLeaf, _React$Component);
  34. function DraftEditorLeaf() {
  35. var _this;
  36. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  37. args[_key] = arguments[_key];
  38. }
  39. _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
  40. _defineProperty(_assertThisInitialized(_this), "leaf", void 0);
  41. return _this;
  42. }
  43. var _proto = DraftEditorLeaf.prototype;
  44. _proto._setSelection = function _setSelection() {
  45. var selection = this.props.selection; // If selection state is irrelevant to the parent block, no-op.
  46. if (selection == null || !selection.getHasFocus()) {
  47. return;
  48. }
  49. var _this$props = this.props,
  50. block = _this$props.block,
  51. start = _this$props.start,
  52. text = _this$props.text;
  53. var blockKey = block.getKey();
  54. var end = start + text.length;
  55. if (!selection.hasEdgeWithin(blockKey, start, end)) {
  56. return;
  57. } // Determine the appropriate target node for selection. If the child
  58. // is not a text node, it is a <br /> spacer. In this case, use the
  59. // <span> itself as the selection target.
  60. var node = this.leaf;
  61. !node ? process.env.NODE_ENV !== "production" ? invariant(false, 'Missing node') : invariant(false) : void 0;
  62. var child = node.firstChild;
  63. !child ? process.env.NODE_ENV !== "production" ? invariant(false, 'Missing child') : invariant(false) : void 0;
  64. var targetNode;
  65. if (child.nodeType === Node.TEXT_NODE) {
  66. targetNode = child;
  67. } else if (isHTMLBRElement(child)) {
  68. targetNode = node;
  69. } else {
  70. targetNode = child.firstChild;
  71. !targetNode ? process.env.NODE_ENV !== "production" ? invariant(false, 'Missing targetNode') : invariant(false) : void 0;
  72. }
  73. setDraftEditorSelection(selection, targetNode, blockKey, start, end);
  74. };
  75. _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
  76. var leafNode = this.leaf;
  77. !leafNode ? process.env.NODE_ENV !== "production" ? invariant(false, 'Missing leafNode') : invariant(false) : void 0;
  78. var shouldUpdate = leafNode.textContent !== nextProps.text || nextProps.styleSet !== this.props.styleSet || nextProps.forceSelection;
  79. return shouldUpdate;
  80. };
  81. _proto.componentDidUpdate = function componentDidUpdate() {
  82. this._setSelection();
  83. };
  84. _proto.componentDidMount = function componentDidMount() {
  85. this._setSelection();
  86. };
  87. _proto.render = function render() {
  88. var _this2 = this;
  89. var block = this.props.block;
  90. var text = this.props.text; // If the leaf is at the end of its block and ends in a soft newline, append
  91. // an extra line feed character. Browsers collapse trailing newline
  92. // characters, which leaves the cursor in the wrong place after a
  93. // shift+enter. The extra character repairs this.
  94. if (text.endsWith('\n') && this.props.isLast) {
  95. text += '\n';
  96. }
  97. var _this$props2 = this.props,
  98. customStyleMap = _this$props2.customStyleMap,
  99. customStyleFn = _this$props2.customStyleFn,
  100. offsetKey = _this$props2.offsetKey,
  101. styleSet = _this$props2.styleSet;
  102. var styleObj = styleSet.reduce(function (map, styleName) {
  103. var mergedStyles = {};
  104. var style = customStyleMap[styleName];
  105. if (style !== undefined && map.textDecoration !== style.textDecoration) {
  106. // .trim() is necessary for IE9/10/11 and Edge
  107. mergedStyles.textDecoration = [map.textDecoration, style.textDecoration].join(' ').trim();
  108. }
  109. return _assign(map, style, mergedStyles);
  110. }, {});
  111. if (customStyleFn) {
  112. var newStyles = customStyleFn(styleSet, block);
  113. styleObj = _assign(styleObj, newStyles);
  114. }
  115. return React.createElement("span", {
  116. "data-offset-key": offsetKey,
  117. ref: function ref(_ref) {
  118. return _this2.leaf = _ref;
  119. },
  120. style: styleObj
  121. }, React.createElement(DraftEditorTextNode, null, text));
  122. };
  123. return DraftEditorLeaf;
  124. }(React.Component);
  125. module.exports = DraftEditorLeaf;