mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-07-31 12:30:11 +02:00
got insertion working!
This commit is contained in:
@@ -90,6 +90,27 @@ class Content extends React.Component {
|
|||||||
this.onChange(state)
|
this.onChange(state)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On before input, add the character to the state.
|
||||||
|
*
|
||||||
|
* @param {Event} e
|
||||||
|
*/
|
||||||
|
|
||||||
|
onBeforeInput(e) {
|
||||||
|
let { state } = this.props
|
||||||
|
const { data } = e
|
||||||
|
|
||||||
|
// If there is no data to input, there's nothing to do.
|
||||||
|
if (!data) return
|
||||||
|
e.preventDefault()
|
||||||
|
|
||||||
|
// If the state is expanded, we will have to re-render.
|
||||||
|
if (state.isExpanded) state = state.delete()
|
||||||
|
|
||||||
|
state = state.insert(data)
|
||||||
|
this.onChange(state)
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Render the editor content.
|
* Render the editor content.
|
||||||
*
|
*
|
||||||
@@ -113,8 +134,9 @@ class Content extends React.Component {
|
|||||||
suppressContentEditableWarning
|
suppressContentEditableWarning
|
||||||
spellCheck={false}
|
spellCheck={false}
|
||||||
data-type='content'
|
data-type='content'
|
||||||
onKeyDown={(e) => this.onKeyDown(e)}
|
onKeyDown={e => this.onKeyDown(e)}
|
||||||
onSelect={(e) => this.onSelect(e)}
|
onSelect={e => this.onSelect(e)}
|
||||||
|
onBeforeInput={e => this.onBeforeInput(e)}
|
||||||
style={style}
|
style={style}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
@@ -2,6 +2,7 @@
|
|||||||
import Selection from './selection'
|
import Selection from './selection'
|
||||||
import Node from './node'
|
import Node from './node'
|
||||||
import Text from './text'
|
import Text from './text'
|
||||||
|
import convertRangesToCharacters from '../utils/convert-ranges-to-characters'
|
||||||
import toCamel from 'to-camel-case'
|
import toCamel from 'to-camel-case'
|
||||||
import { OrderedMap, Record } from 'immutable'
|
import { OrderedMap, Record } from 'immutable'
|
||||||
|
|
||||||
@@ -281,6 +282,41 @@ class State extends StateRecord {
|
|||||||
const { startOffset } = state
|
const { startOffset } = state
|
||||||
const endOffset = startOffset + 1
|
const endOffset = startOffset + 1
|
||||||
state = state.removeCharacters(startNode.key, startOffset, endOffset)
|
state = state.removeCharacters(startNode.key, startOffset, endOffset)
|
||||||
|
|
||||||
|
return state
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Insert a `text` string at the current cursor position.
|
||||||
|
*
|
||||||
|
* @param {String} text
|
||||||
|
* @return {State} state
|
||||||
|
*/
|
||||||
|
|
||||||
|
insert(text) {
|
||||||
|
let state = this
|
||||||
|
|
||||||
|
// When still expanded, remove the current range first.
|
||||||
|
if (state.isExpanded) {
|
||||||
|
state = state.delete()
|
||||||
|
}
|
||||||
|
|
||||||
|
// Insert text at the current cursor.
|
||||||
|
const ranges = [{ text }]
|
||||||
|
let { startNode, startOffset } = state
|
||||||
|
let { characters } = startNode
|
||||||
|
let newCharacters = convertRangesToCharacters(ranges)
|
||||||
|
const { size } = newCharacters
|
||||||
|
|
||||||
|
// Splice in the new characters.
|
||||||
|
characters = characters.slice(0, startOffset)
|
||||||
|
.concat(newCharacters)
|
||||||
|
.concat(characters.slice(startOffset + size - 1, Infinity))
|
||||||
|
|
||||||
|
// Update the existing text node and the selection.
|
||||||
|
startNode = startNode.merge({ characters })
|
||||||
|
state = state.updateNode(startNode)
|
||||||
|
state = state.moveForward(size)
|
||||||
return state
|
return state
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user