Inconsistent behavior upon inserting soft newlines with RichUtils

[wcjohnson]

This issue is a result from following the advice of @hellendag in #92 regarding handleReturn(). It appears to be unrelated to #92 so I am creating a new issue.

I am trying to use Draft to reproduce the behavior of a Twitter input box, where it will highlight characters beyond 140 in red. The following minimal example is based on the advice from #92 and the original tweet sample code:

overflowStrategy = (contentBlock, callback) ->
    text = contentBlock.getText()
    if text.length > 140
        callback(140, text.length)

OverflowSpan = React.createClass {
    displayName: 'OverflowSpan'
    render: -> <span {...@props} className="overflow">{@props.children}</span>
}

PostEditor = React.createClass {
    displayName: 'PostComponent.Editor'

    getInitialState: -> {}
    logState: -> console.log @state.editorState.toJS()

    componentWillMount: ->
        decorator = new CompositeDecorator [
            { strategy: overflowStrategy, component: OverflowSpan }
            # { strategy: hashtagStrategy, component: HashtagSpan }
        ]
        @setState { editorState: EditorState.createEmpty(decorator) }

    handleChange: (editorState) ->
        console.log { editorState: editorState.toJS() }
        @setState { editorState }

    handleReturn: (ev) ->
        console.log "handleReturn"
        @setState { editorState: RichUtils.insertSoftNewline(@state.editorState) }
        true

    render: ->
        <div className="post-editor">
            <div className="inner-container" onClick={=> @refs?.editor?.focus()}>
                <Editor ref="editor" editorState={@state.editorState} onChange={@handleChange}
                    handleReturn={@handleReturn}
                    placeholder="Enter content..." spellCheck stripPastedStyles
                />
            </div>
            <input onClick={@logState} type="button" value="Log State" />
        </div>
}

This test case exhibits two issues:

• Push Return once in the Editor, and a new line is inserted. Push it a second time, and it's not. A third time inserts two newlines. Fourth time, nothing. Et cetera. Push return n times in an empty box and at the nth press, when n%2=1, you get two newlines and when n%2=0 you get none.
• The point of the handleReturn() was to prevent the creation of additional blocks, and it works, but when the user pastes content into the editor from outside, the default paste behavior creates additional blocks anyway. I can't find an extension point to override this behavior.

[hellendag]

Ahh, I forgot about that double newline bug. I would like to solve that.

For pasting, I think I have a solution for that. I'm on mobile now but will look around for it when I'm back at my laptop.

I think you could also probably allow the multiple blocks and define a decorator that is aware of character counts. Can try to gist something later.

[johanneslumpe]

#255 attempts solve the double newline bug

[johanneslumpe]

@wcjohnson Is still still an issue with the latest version?

[sophiebits]

Closing; let me know if it's not fixed and we'll reopen.

[asterikx]

Hi @hellendag, I would love to hear from your idea on how to prevent draft from creating additional blocks when pasting text (containing newlines)? ;) Like the OP, I'm trying to highlight overlength text.

Is there a simple solution on preventing draft from creating multiple blocks at all? I feel like having the text split up over several blocks only adds overhead and makes text manipulation less flexible in a scenario like the present.

Thanks a lot!