contentEditable: fix new lines by using invisible character hack

This commit is contained in:
Peter Cai 2020-02-18 11:05:33 +08:00
parent 54510ddf32
commit 916502b56c
No known key found for this signature in database
GPG key ID: 71F5FB4E4F3FD54F

View file

@ -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/>