Newlines handled incorrectly in innerText in IE8
Andreas Svensson committed
Jul 18, 2014 at 11:38 UTC
c371709d23557831c3779914a9773bbc471b228c
2 files changed
+50
-42
src/browser/ui/dom/DOMChildrenOperations.js
+3
-42
@@ -15,17 +15,9 @@
15
var Danger = require('Danger');
16
var ReactMultiChildUpdateTypes = require('ReactMultiChildUpdateTypes');
17
18
-var getTextContentAccessor = require('getTextContentAccessor');
18
+var setTextContent = require('setTextContent');
19
var invariant = require('invariant');
20
21
-/**
22
- * The DOM property to use when setting text content.
23
- *
24
- * @type {string}
25
- * @private
26
- */
27
-var textContentAccessor = getTextContentAccessor();
28
-
21
/**
22
* Inserts `childNode` as a child of `parentNode` at the `index`.
23
*
@@ -45,37 +37,6 @@ function insertChildAt(parentNode, childNode, index) {
37
);
38
}
39
48
-var updateTextContent;
49
-if (textContentAccessor === 'textContent') {
50
- /**
51
- * Sets the text content of `node` to `text`.
52
- *
53
- * @param {DOMElement} node Node to change
54
- * @param {string} text New text content
55
- */
56
- updateTextContent = function(node, text) {
57
- node.textContent = text;
58
- };
59
-} else {
60
- /**
61
- * Sets the text content of `node` to `text`.
62
- *
63
- * @param {DOMElement} node Node to change
64
- * @param {string} text New text content
65
- */
66
- updateTextContent = function(node, text) {
67
- // In order to preserve newlines correctly, we can't use .innerText to set
68
- // the contents (see #1080), so we empty the element then append a text node
69
- while (node.firstChild) {
70
- node.removeChild(node.firstChild);
71
- }
72
- if (text) {
73
- var doc = node.ownerDocument || document;
74
- node.appendChild(doc.createTextNode(text));
75
- }
76
- };
77
-}
78
-
40
/**
41
* Operations for updating with DOM children.
42
*/
@@ -83,7 +44,7 @@ var DOMChildrenOperations = {
44
45
dangerouslyReplaceNodeWithMarkup: Danger.dangerouslyReplaceNodeWithMarkup,
46
86
- updateTextContent: updateTextContent,
47
+ updateTextContent: setTextContent,
48
49
/**
50
* Updates a component's children by processing a series of updates. The
@@ -156,7 +117,7 @@ var DOMChildrenOperations = {
117
);
118
break;
119
case ReactMultiChildUpdateTypes.TEXT_CONTENT:
159
- updateTextContent(
120
+ setTextContent(
121
update.parentNode,
122
update.textContent
123
);
src/browser/ui/dom/setTextContent.js
new
+47
@@ -0,0 +1,47 @@
1
+/**
2
+ * Copyright 2013-2014 Facebook, Inc.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ * http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ *
16
+ * @providesModule setTextContent
17
+ */
18
+
19
+"use strict";
20
+
21
+var ExecutionEnvironment = require('ExecutionEnvironment');
22
+var escapeTextForBrowser = require('escapeTextForBrowser');
23
+var setInnerHTML = require('setInnerHTML');
24
+
25
+/**
26
+ * Set the textContent property of a node, ensuring that whitespace is preserved
27
+ * even in IE8. innerText is a poor substitute for textContent and, among many
28
+ * issues, inserts <br> instead of the literal newline chars. innerHTML behaves
29
+ * as it should.
30
+ *
31
+ * @param {DOMElement} node
32
+ * @param {string} text
33
+ * @internal
34
+ */
35
+var setTextContent = function(node, text) {
36
+ node.textContent = text;
37
+};
38
+
39
+if (ExecutionEnvironment.canUseDOM) {
40
+ if (!('textContent' in document.documentElement)) {
41
+ setTextContent = function(node, text) {
42
+ setInnerHTML(node, escapeTextForBrowser(text));
43
+ };
44
+ }
45
+}
46
+
47
+module.exports = setTextContent;