From 8b8deb86ed2d734f54c9076bb5283a3b344aa17c Mon Sep 17 00:00:00 2001 From: Aviral Dasgupta Date: Wed, 15 Jun 2016 20:24:37 +0530 Subject: [PATCH 1/2] Fix RTE escaping, HTML output with breaks --- src/RichText.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/RichText.js b/src/RichText.js index 4ad9369711..450e31e6b9 100644 --- a/src/RichText.js +++ b/src/RichText.js @@ -10,7 +10,7 @@ import { import * as sdk from './index'; const BLOCK_RENDER_MAP = DefaultDraftBlockRenderMap.set('unstyled', { - element: 'p' // draft uses
by default which we don't really like, so we're using

+ element: 'span' // draft uses

by default which we don't really like, so we're using

}); const STYLES = { @@ -43,11 +43,21 @@ export function contentStateToHTML(contentState: ContentState): string { let open = tags.map(tag => `<${tag}>`).join(''); let close = tags.map(tag => ``).reverse().join(''); // and get the HTML representation of this styled range (this .substring() should never fail) - content.push(`${open}${block.getText().substring(start, end)}${close}`); + let text = block.getText().substring(start, end); + // http://shebang.brandonmintern.com/foolproof-html-escaping-in-javascript/ + let div = document.createElement('div'); + div.appendChild(document.createTextNode(text)); + let safeText = div.innerHTML; + content.push(`${open}${safeText}${close}`); } ); - return (`<${elem}>${content.join('')}`); + let result = `<${elem}>${content.join('')}`; + + // dirty hack because we don't want block level tags by default, but breaks + if(elem === 'span') + result += '
'; + return result; }).join(''); } From 56ac1ed0c0e23478c41958b2479cb0d974c075c9 Mon Sep 17 00:00:00 2001 From: Aviral Dasgupta Date: Wed, 15 Jun 2016 20:34:37 +0530 Subject: [PATCH 2/2] update comment --- src/RichText.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/RichText.js b/src/RichText.js index 450e31e6b9..7e749bc24a 100644 --- a/src/RichText.js +++ b/src/RichText.js @@ -10,7 +10,12 @@ import { import * as sdk from './index'; const BLOCK_RENDER_MAP = DefaultDraftBlockRenderMap.set('unstyled', { - element: 'span' // draft uses

by default which we don't really like, so we're using

+ element: 'span' + /* + draft uses

by default which we don't really like, so we're using + this is probably not a good idea since is not a block level element but + we're trying to fix things in contentStateToHTML below + */ }); const STYLES = {