contentEditable: fix new lines by using invisible character hack
This commit is contained in:
parent
54510ddf32
commit
916502b56c
|
@ -9,7 +9,13 @@ class ContentEditable extends React.Component
|
||||||
super props
|
super props
|
||||||
|
|
||||||
getText: ->
|
getText: ->
|
||||||
if @props.plainText then @domNode.innerText else @domNode.innerHTML
|
console.log @domNode.innerHTML
|
||||||
|
do =>
|
||||||
|
if @props.plainText
|
||||||
|
@domNode.innerText
|
||||||
|
else
|
||||||
|
@domNode.innerHTML
|
||||||
|
.replace /\u200C/g, ''
|
||||||
|
|
||||||
setText: (text) ->
|
setText: (text) ->
|
||||||
if @props.plainText
|
if @props.plainText
|
||||||
|
@ -63,12 +69,19 @@ class ContentEditable extends React.Component
|
||||||
.insertNode document.createTextNode paste
|
.insertNode document.createTextNode paste
|
||||||
ev.preventDefault()
|
ev.preventDefault()
|
||||||
|
|
||||||
|
onKeyDown: (ev) =>
|
||||||
|
if ev.keyCode == 13
|
||||||
|
# Without U+200C, the new line will not work properly
|
||||||
|
document.execCommand 'insertHTML', false, '<br>\u200C'
|
||||||
|
ev.preventDefault()
|
||||||
|
|
||||||
render: ->
|
render: ->
|
||||||
<div
|
<div
|
||||||
className={"#{@props.className} editable"}
|
className={"#{@props.className} editable"}
|
||||||
onInput={@emitUpdate}
|
onInput={@emitUpdate}
|
||||||
onBlur={@onBlur}
|
onBlur={@onBlur}
|
||||||
onPaste={@onPaste}
|
onPaste={@onPaste}
|
||||||
|
onKeyDown={@onKeyDown}
|
||||||
spellCheck={false}
|
spellCheck={false}
|
||||||
contentEditable/>
|
contentEditable/>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue