|
- /**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- *
- * @emails oncall+draft_js
- */
- 'use strict';
-
- function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
- function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
- 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; }
-
- var React = require("react");
-
- var UserAgent = require("fbjs/lib/UserAgent");
-
- var invariant = require("fbjs/lib/invariant");
-
- var isElement = require("./isElement"); // In IE, spans with <br> tags render as two newlines. By rendering a span
- // with only a newline character, we can be sure to render a single line.
-
-
- var useNewlineChar = UserAgent.isBrowser('IE <= 11');
- /**
- * Check whether the node should be considered a newline.
- */
-
- function isNewline(node) {
- return useNewlineChar ? node.textContent === '\n' : node.tagName === 'BR';
- }
- /**
- * Placeholder elements for empty text content.
- *
- * What is this `data-text` attribute, anyway? It turns out that we need to
- * put an attribute on the lowest-level text node in order to preserve correct
- * spellcheck handling. If the <span> is naked, Chrome and Safari may do
- * bizarre things to do the DOM -- split text nodes, create extra spans, etc.
- * If the <span> has an attribute, this appears not to happen.
- * See http://jsfiddle.net/9khdavod/ for the failure case, and
- * http://jsfiddle.net/7pg143f7/ for the fixed case.
- */
-
-
- var NEWLINE_A = function NEWLINE_A(ref) {
- return useNewlineChar ? React.createElement("span", {
- key: "A",
- "data-text": "true",
- ref: ref
- }, '\n') : React.createElement("br", {
- key: "A",
- "data-text": "true",
- ref: ref
- });
- };
-
- var NEWLINE_B = function NEWLINE_B(ref) {
- return useNewlineChar ? React.createElement("span", {
- key: "B",
- "data-text": "true",
- ref: ref
- }, '\n') : React.createElement("br", {
- key: "B",
- "data-text": "true",
- ref: ref
- });
- };
-
- /**
- * The lowest-level component in a `DraftEditor`, the text node component
- * replaces the default React text node implementation. This allows us to
- * perform custom handling of newline behavior and avoid re-rendering text
- * nodes with DOM state that already matches the expectations of our immutable
- * editor state.
- */
- var DraftEditorTextNode =
- /*#__PURE__*/
- function (_React$Component) {
- _inheritsLoose(DraftEditorTextNode, _React$Component);
-
- function DraftEditorTextNode(props) {
- var _this;
-
- _this = _React$Component.call(this, props) || this; // By flipping this flag, we also keep flipping keys which forces
- // React to remount this node every time it rerenders.
-
- _defineProperty(_assertThisInitialized(_this), "_forceFlag", void 0);
-
- _defineProperty(_assertThisInitialized(_this), "_node", void 0);
-
- _this._forceFlag = false;
- return _this;
- }
-
- var _proto = DraftEditorTextNode.prototype;
-
- _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
- var node = this._node;
- var shouldBeNewline = nextProps.children === '';
- !isElement(node) ? process.env.NODE_ENV !== "production" ? invariant(false, 'node is not an Element') : invariant(false) : void 0;
- var elementNode = node;
-
- if (shouldBeNewline) {
- return !isNewline(elementNode);
- }
-
- return elementNode.textContent !== nextProps.children;
- };
-
- _proto.componentDidMount = function componentDidMount() {
- this._forceFlag = !this._forceFlag;
- };
-
- _proto.componentDidUpdate = function componentDidUpdate() {
- this._forceFlag = !this._forceFlag;
- };
-
- _proto.render = function render() {
- var _this2 = this;
-
- if (this.props.children === '') {
- return this._forceFlag ? NEWLINE_A(function (ref) {
- return _this2._node = ref;
- }) : NEWLINE_B(function (ref) {
- return _this2._node = ref;
- });
- }
-
- return React.createElement("span", {
- key: this._forceFlag ? 'A' : 'B',
- "data-text": "true",
- ref: function ref(_ref) {
- return _this2._node = _ref;
- }
- }, this.props.children);
- };
-
- return DraftEditorTextNode;
- }(React.Component);
-
- module.exports = DraftEditorTextNode;
|