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]> 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]>
> 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/
>
--
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.
