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:
@@ -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}
|
||||||
/>
|
/>
|
||||||
|
@@ -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)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user