Peter, I'd guess the decoder in your onChange is failing, causing the event not to send a Msg. The decoder is going to get an event object, not a DOM node, which is probably why decoding an "innerHTML" property is failing. (Did your comment mean that your event handler does work for non-contentEditable divs?)
On Aug 30, 2016 2:46 AM, "Peter Damoc" <[email protected]> wrote: > 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 <[email protected]> > 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 [email protected]. >> For more options, visit https://groups.google.com/d/optout. >> > > > > -- > There is NO FATE, we are the creators. > blog: http://damoc.ro/ > > -- > 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 [email protected]. > For more options, visit https://groups.google.com/d/optout. > -- 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 [email protected]. For more options, visit https://groups.google.com/d/optout.
