diff --git a/examples/rtl/index.js b/examples/rtl/index.js index 6194a2617..b740d0080 100644 --- a/examples/rtl/index.js +++ b/examples/rtl/index.js @@ -42,6 +42,23 @@ class PlainText extends React.Component { this.setState({ state }) } + /** + * On key down, if it's add a soft break. + * + * @param {Event} e + * @param {Object} data + * @param {State} state + */ + + onKeyDown = (e, data, state) => { + if (data.key == 'enter' && data.isShift) { + return state + .transform() + .insertText('\n') + .apply() + } + } + /** * Render the editor. * @@ -53,6 +70,7 @@ class PlainText extends React.Component { diff --git a/lib/components/content.js b/lib/components/content.js index 6aed0ce16..132e84d3c 100644 --- a/lib/components/content.js +++ b/lib/components/content.js @@ -466,12 +466,15 @@ class Content extends React.Component { const { key, index, start, end } = point const ranges = this.getRanges(key) const range = ranges.get(index) + const isLast = index == ranges.size - 1 const { text, marks } = range let { textContent } = anchorNode + const lastChar = textContent.charAt(textContent.length - 1) - // COMPAT: If the DOM text ends in a new line, we will have added one to - // account for browsers collapsing a single one, so remove it. - if (textContent.charAt(textContent.length - 1) == '\n') { + // If we're dealing with the last leaf, and the DOM text ends in a new line, + // we will have added another new line in 's render method to account + // for browsers collapsing a single trailing new lines, so remove it. + if (isLast && lastChar == '\n') { textContent = textContent.slice(0, -1) } diff --git a/lib/components/leaf.js b/lib/components/leaf.js index 885ec74de..52c1dc399 100644 --- a/lib/components/leaf.js +++ b/lib/components/leaf.js @@ -187,16 +187,19 @@ class Leaf extends React.Component { } renderText() { - const { text, parent } = this.props + const { text, index, ranges } = this.props // If the text is empty, we need to render a
to get the block to have // the proper height. if (text == '') return
- // COMPAT: Browsers will collapse trailing new lines, so we need to add an - // extra trailing new lines to prevent that. - if (text.charAt(text.length - 1) == '\n') return `${text}\n` + // COMPAT: Browsers will collapse trailing new lines at the end of blocks, + // so we need to add an extra trailing new lines to prevent that. + const lastChar = text.charAt(text.length - 1) + const isLast = index == ranges.size - 1 + if (isLast && lastChar == '\n') return `${text}\n` + // Otherwise, just return the text. return text }