I've tried a naive implementation in Elm but, for some reason, it doesn't work (events are not fired for divs that have content editable) 

import Html exposing (..)

import Html.Attributes exposing (..)

import Html.App exposing (beginnerProgram)

import Html.Events exposing (on)

import Json.Encode as JE

import Json.Decode as JD exposing ((:=))

main =

  beginnerProgram { model = "", view = view, update = update }

onContent tagger = 

  on "input" (JD.map tagger ("innerHTML" := JD.string))

view model =

  div []

    [ div [property "innerHTML" (JE.string model), onContent OnChange, contenteditable True][]

    ]

type Msg = OnChange String 

update msg model =

  case (Debug.log "msg:" msg) of

    OnChange str -> str

On Tue, Aug 30, 2016 at 12:03 PM, Vincent Jousse <vjo...@gmail.com> wrote:

Hello,

I'm writing an application where the user needs to edit some HTML content. When I first wrote this application in JS, I was using some contenteditable fields to do so.

How should I handle this with Elm? My problem is that if I set a div with contenteditable=true in elm, and that the content of this div depends on my model state, when an user edits the HTML, my model is now out of sync.
Maybe getting the innerHTML field when the user is changing the content of the div and set this to a field in my model? But how would I do to convert this string back to some Html.div/Html.span/whatever code in Elm?
The tricky part is that I need to handle events on spans that are in the div with contenteditable=true.

I tried to do it using Ports and Draft-js but the problem is that I now have 2 states in my application: one in Elm and one in JS/React. Then, all the beauty of "my application just depends on my Elm model state" is not true anymore, as I know need to sync the 2 states…

Not sure if I'm really clear, but thanks for reading this anyway ;-)

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

There is NO FATE, we are the creators.
blog: http://damoc.ro/