1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-14 19:24:09 +02:00

fix to only double new lines on last leaf

This commit is contained in:
Ian Storm Taylor
2016-08-01 15:18:37 -07:00
parent 5e34e2f46d
commit 39aaa916ec
3 changed files with 31 additions and 7 deletions

View File

@@ -42,6 +42,23 @@ class PlainText extends React.Component {
this.setState({ state }) this.setState({ state })
} }
/**
* On key down, if it's <shift-enter> 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. * Render the editor.
* *
@@ -53,6 +70,7 @@ class PlainText extends React.Component {
<Editor <Editor
placeholder={'Enter some plain text...'} placeholder={'Enter some plain text...'}
onChange={this.onChange} onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode} renderNode={this.renderNode}
state={this.state.state} state={this.state.state}
/> />

View File

@@ -466,12 +466,15 @@ class Content extends React.Component {
const { key, index, start, end } = point const { key, index, start, end } = point
const ranges = this.getRanges(key) const ranges = this.getRanges(key)
const range = ranges.get(index) const range = ranges.get(index)
const isLast = index == ranges.size - 1
const { text, marks } = range const { text, marks } = range
let { textContent } = anchorNode 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 // If we're dealing with the last leaf, and the DOM text ends in a new line,
// account for browsers collapsing a single one, so remove it. // we will have added another new line in <Leaf>'s render method to account
if (textContent.charAt(textContent.length - 1) == '\n') { // for browsers collapsing a single trailing new lines, so remove it.
if (isLast && lastChar == '\n') {
textContent = textContent.slice(0, -1) textContent = textContent.slice(0, -1)
} }

View File

@@ -187,16 +187,19 @@ class Leaf extends React.Component {
} }
renderText() { renderText() {
const { text, parent } = this.props const { text, index, ranges } = this.props
// If the text is empty, we need to render a <br/> to get the block to have // If the text is empty, we need to render a <br/> to get the block to have
// the proper height. // the proper height.
if (text == '') return <br /> if (text == '') return <br />
// COMPAT: Browsers will collapse trailing new lines, so we need to add an // COMPAT: Browsers will collapse trailing new lines at the end of blocks,
// extra trailing new lines to prevent that. // so we need to add an extra trailing new lines to prevent that.
if (text.charAt(text.length - 1) == '\n') return `${text}\n` 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 return text
} }