Thanks, but I would not say that it's "working" as it seems that the cursor position is reset after each event, causing the text to be written from right to left :-)
It's seems related to this issue: https://github.com/elm-lang/virtual-dom/issues/23 And with this approach (storing a string), how could I trigger events on the HTML inside the contenteditable div? Le mardi 30 août 2016 16:05:34 UTC+2, Peter Damoc a écrit : > > For the record, the working version looks like this: > > 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 ((:=), Decoder) > > > main = > beginnerProgram { model = "", view = view, update = update } > > > onContent tagger = > on "input" (JD.map tagger targetInnerHtml) > > targetInnerHtml : Decoder String > targetInnerHtml = > JD.at ["target", "innerHTML"] JD.string > > view model = > div [] > [ div [property "innerHTML" (JE.string model), onContent OnChange, > contenteditable True][] > , hr [][] > , div [property "innerHTML" (JE.string model)][] > ] > > > type Msg = OnChange String > > > update msg model = > case (Debug.log "msg:" msg) of > OnChange str -> str > > On Tue, Aug 30, 2016 at 4:57 PM, Peter Damoc <[email protected] > <javascript:>> wrote: > >> 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] >> <javascript:>> 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] <javascript:>> >>> 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] >>>> <javascript:>> 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] <javascript:>. >>>>> 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] <javascript:>. >>>> 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] <javascript:>. >>> For more options, visit https://groups.google.com/d/optout. >>> >> >> >> >> -- >> There is NO FATE, we are the creators. >> blog: http://damoc.ro/ >> > > > > -- > 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.
