Elm：如何在Enter按下Chrome时在内容可编辑的div中添加br标签？

Question

Chrome seems to add a div when enter key is pressed in a contenteditable . I'd like a br to always be used. There are plenty of js examples on SO (and the interwebs) but I'm new to Elm and there isn't that much information on how to do this.

I have come across this code on github:

onKeyPress : (Int -> msg) -> Attribute msg
onKeyPress tagger =
    on "keypress" (Decode.map tagger keyCode)

but am not grokking how to use the function. My view would look something like this:

view : Model -> Html Message
view model = div [ contentEditable True, onKeyPress SomeMessage] []

Message type would look like this:

type Message
= None
| SomeMessage Int

And the update would be something like:

update : Message -> Model -> ( Model, Cmd Message )
update message model =
    case message of
        SomeMessage (Ok isThisTheKeyCode) ->
            ( model, Cmd.none )

        SomeMessage (Err err) ->
            ( model, Cmd.none )

There are examples with input fields but I think those are different.

Any advice or pointing me in the right direction or filling in the gaps would be greatly appreciated. Thank you

Update: To be clear, I can see how this is done with JavaScript. I'm asking for assistance or direction for the Elm implementation. Thank you

Update 2: I think I'm in the right direction. My implementation actually had a div with another contentEditable inside it. The inner div was the one I was trying to get to update.

div [ contentEditable True][
  div [contentEditable True]
  []
]

I removed the inner contentEditable so now looks like

div [ contentEditable True][
  div [] []
]

Still trying to figure out how to substitute br for div in Chrome

Answer 1

You can change default paragraph separator by by referring this . But what you are trying to achieve is possible with Shift + Enter combination.