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 <pda...@gmail.com> 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 <gruen0aer...@gmail.com>
> 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" <pda...@gmail.com> 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 <vjou...@gmail.com>
>>> 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 elm-discuss+unsubscr...@googlegroups.com.
>>>> 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 elm-discuss+unsubscr...@googlegroups.com.
>>> 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 elm-discuss+unsubscr...@googlegroups.com.
>> 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 elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
