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]
> <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].
For more options, visit https://groups.google.com/d/optout.
