Use a Polyglot HTML-safe method of escaping leading newline in rawtext elements
Austin Wright committed
Jan 12, 2015 at 18:10 UTC
e913e85e1ad82c5251492602afbc8186c1389f13
1 file changed
+21
-14
src/browser/ui/ReactDOMComponent.js
+21
-14
@@ -276,40 +276,47 @@ ReactDOMComponent.Mixin = {
276
* @return {string} Content markup.
277
*/
278
_createContentMarkup: function(transaction, context) {
279
- var prefix = '';
280
- if (this._tag === 'listing' ||
281
- this._tag === 'pre' ||
282
- this._tag === 'textarea') {
283
- // Add an initial newline because browsers ignore the first newline in
284
- // a <listing>, <pre>, or <textarea> as an "authoring convenience" -- see
285
- // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody.
286
- prefix = '\n';
287
- }
288
-
279
+ var ret = '';
280
var props = this._currentElement.props;
281
282
// Intentional use of != to avoid catching zero/false.
283
var innerHTML = props.dangerouslySetInnerHTML;
284
if (innerHTML != null) {
285
if (innerHTML.__html != null) {
295
- return prefix + innerHTML.__html;
286
+ ret = innerHTML.__html;
287
}
288
} else {
289
var contentToUse =
290
CONTENT_TYPES[typeof props.children] ? props.children : null;
291
var childrenToUse = contentToUse != null ? null : props.children;
292
if (contentToUse != null) {
302
- return prefix + escapeTextContentForBrowser(contentToUse);
293
+ ret = escapeTextContentForBrowser(contentToUse);
294
} else if (childrenToUse != null) {
295
var mountImages = this.mountChildren(
296
childrenToUse,
297
transaction,
298
context
299
);
309
- return prefix + mountImages.join('');
300
+ ret = mountImages.join('');
301
}
302
}
312
- return prefix;
303
+ if (
304
+ (this._tag === 'listing'
305
+ || this._tag === 'pre'
306
+ || this._tag === 'textarea')
307
+ && ret.charAt(0) === '\n'
308
+ ) {
309
+ // Add an invisible node that's not a newline, because the HTML syntax
310
+ // ignores the first character in these tags if it's a newline
311
+ // See: <http://www.w3.org/TR/html-polyglot/#newlines-in-textarea-and-pre>
312
+ // See: <http://www.w3.org/TR/html5/syntax.html#element-restrictions>
313
+ // See: <http://www.w3.org/TR/html5/syntax.html#newlines>
314
+ // See: Parsing of "textarea" "listing" and "pre" elements
315
+ // from <http://www.w3.org/TR/html5/syntax.html#parsing-main-inbody>
316
+ return '<!---->' + ret;
317
+ } else {
318
+ return ret;
319
+ }
320
},
321
322
receiveComponent: function(nextElement, transaction, context) {