Aaron, You are right, of course. I somehow expected that to work due to mixing in my mind the event object with the source of the event. My bad. :)
On Tue, Aug 30, 2016 at 4:42 PM, Aaron VonderHaar <[email protected]> wrote: > 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. > -- 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.
