I'm also trying to work with contenteditable. I have a basic system working with pure Elm, in that I can click on a field to edit it and then click elsewhere with blur causing an update of the model. But the challenge I face is detecting an enter key and using that save the updated value and blur the current field. I seem to be getting some virtual DOM issues.
Anyway I have an Ellie at https://ellie-app.com/tnXL92zwvka1/3 and if anyone can help, I'd love to know Simon On Tuesday, 27 September 2016 16:35:04 UTC+2, Girish Sonawane wrote: > > Instead of onChange, you can try using Events.on > http://package.elm-lang.org/packages/elm-lang/html/1.1.0/Html-Events#on > > > On Tuesday, August 30, 2016 at 3:16:12 PM UTC+5:30, Peter Damoc 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.
