Re: [elm-discuss] Elm and contenteditable
For what I needed to do (convert an enter into a 'finished editing' action
i found quite a nice solution
https://stackoverflow.com/questions/42390708/elm-conditional-preventdefault-with-contenteditable
In brief, I catch the keydown event but convert anything other than an
enter in to json decode fail, so that it does not reach the update loop. An
enter is caught, with preventDefault applied, and is passed to update as a
finished editing action, which I pass to Dom.blur and then catch the blur
event and use that to cause the model to updated.
Simon
On Sunday, 26 February 2017 09:11:51 UTC+1, Vincent Jousse wrote:
>
> The best workaround I've found is to use a webcomponent wrapper (only
> compatible with chrome):
> https://github.com/vjousse/the-transcriber/blob/webcomponents/src/static/js/custom-text-editor-element.js
>
> I'm using a custom attribute called "content" that is mapped to my Elm
> Model. With this solution I've got the best of both worlds: Elm is managing
> the DOM of my contenteditable element while being able to write custom
> behavior in javascript for it.
>
> It is based on this talk by Richard Feldman:
> https://www.youtube.com/watch?v=ar3TakwE8o0
>
> 2017-02-25 11:41 GMT+01:00 Witold Szczerba >:
>
>> One trick I have learned when integrating date range picker is that you
>> can push data from component to Elm using custom HTML events instead of
>> sending data through a port(s).
>> I have described it shortly here:
>>
>> https://www.reddit.com/r/elm/comments/5uqa13/those_fancy_date_pickers_in_elm_watch_this_no/
>>
>> input [ class "form-control date-range" , value <| formatMaybeDuration
>> item.duration , onDateRangePicker DurationChanged *-- see demo for
>> details* ] []
>>
>> Regards,
>> Witold Szczerba
>>
>> On Fri, Feb 24, 2017 at 4:30 PM, Josh Szmajda > > wrote:
>>
>>> I'm working with http://github.com/Voog/wysihtml, integration has been
>>> pretty alright.. Still very much in the figuring things out stage for my
>>> app but here are some key snippets:
>>>
>>> Ports:
>>> ```
>>> port startEditor : (String, String, String) -> Cmd msg
>>> port stopEditor : String -> Cmd msg
>>> port editorChanges : (String -> msg) -> Sub msg
>>> port selectionChange : (Selection -> msg) -> Sub msg
>>> ```
>>>
>>> Selection:
>>> ```
>>> type alias Selection =
>>> { text : String
>>> , t : Float
>>> , r : Float
>>> , b : Float
>>> , l : Float
>>> }
>>> ```
>>>
>>> WYSIHtml View:
>>> ```
>>> module Wysihtml.View exposing (wysiToolbar, wysiEditor)
>>>
>>> import Html exposing (..)
>>> import Html.Attributes exposing (id, attribute, class)
>>>
>>> wysiToolbar : a -> Html a
>>> wysiToolbar msg =
>>> div [ id "wysi-toolbar" ]
>>> [ a [ class "bold", command msg "bold" ] [ text "B" ]
>>> , a [ class "italic", command msg "italic" ] [ text "I" ]
>>> , a [ class "h1", command msg "formatBlock", commandValue msg "h1" ]
>>> [ text "H1" ]
>>> , a [ class "p", command msg "formatBlock", commandValue msg "p" ] [
>>> text "P" ]
>>> , a [ class "ul", command msg "inserUnorderedList" ] [ text "list" ]
>>> ]
>>>
>>> wysiEditor : a -> Html a
>>> wysiEditor msg =
>>> div [ id "wysi-editor", dataPlaceholder msg "Start editing" ] []
>>>
>>>
>>> dataPlaceholder : a -> String -> Attribute a
>>> dataPlaceholder msg data =
>>> attribute "data-placeholder" data
>>>
>>> command : a -> String -> Attribute a
>>> command msg command =
>>> attribute "data-wysihtml5-command" command
>>>
>>> commandValue : a -> String -> Attribute a
>>> commandValue msg value =
>>> attribute "data-wysihtml5-command-value" value
>>> ```
>>>
>>> index.html wiring:
>>> ```
>>> app.ports.startEditor.subscribe(function(){
>>> var editor = arguments[0][0];
>>> var toolbar = arguments[0][1];
>>> var initialText = arguments[0][2];
>>> // todo change setTimeout to MutationObserver
>>> setTimeout(function(){
>>> console.log('start editor');
>>> window.x_editor = new wysihtml5.Editor(editor, {
>>> toolbar: toolbar,
>>> parserRules: wysihtml5ParserRules
>>> });
>>> window.x_editor.setValue(initialText, true);
>>> window.x_editor.on('interaction', function(){
>>> app.ports.editorChanges.send(x_editor.getValue());
>>> });
>>> }, 60);
>>> });
>>> document.addEventListener("selectionchange", function(){
>>> console.log("selection changed, sending to elm");
>>> selection = window.getSelection();
>>> if(!selection.isCollapsed){
>>> for(var i = 0; i < selection.rangeCount; i++) {
>>> range = selection.getRangeAt(i);
>>> rect = range.getBoundingClientRect();
>>> app.ports.selectionChange.send({ text: selection.toString(), t:
>>> rect.top, r: rect.right, b: rect.bottom, l: rect.left });
>>> }
>>> }
>>> });
>>> ```
>>>
>>> I think that's the meat. Happy to chat more.
>>>
>>>
>>> On Friday, February 24, 2017 at 3:38:33 AM UTC-5, Simon wrote:
I'm also trying to work with contenteditable. I have a basic syste
Re: [elm-discuss] Elm and contenteditable
The best workaround I've found is to use a webcomponent wrapper (only
compatible with chrome):
https://github.com/vjousse/the-transcriber/blob/webcomponents/src/static/js/custom-text-editor-element.js
I'm using a custom attribute called "content" that is mapped to my Elm
Model. With this solution I've got the best of both worlds: Elm is managing
the DOM of my contenteditable element while being able to write custom
behavior in javascript for it.
It is based on this talk by Richard Feldman:
https://www.youtube.com/watch?v=ar3TakwE8o0
2017-02-25 11:41 GMT+01:00 Witold Szczerba :
> One trick I have learned when integrating date range picker is that you
> can push data from component to Elm using custom HTML events instead of
> sending data through a port(s).
> I have described it shortly here:
> https://www.reddit.com/r/elm/comments/5uqa13/those_fancy_
> date_pickers_in_elm_watch_this_no/
>
> input [ class "form-control date-range" , value <| formatMaybeDuration
> item.duration , onDateRangePicker DurationChanged *-- see demo for
> details* ] []
>
> Regards,
> Witold Szczerba
>
> On Fri, Feb 24, 2017 at 4:30 PM, Josh Szmajda wrote:
>
>> I'm working with http://github.com/Voog/wysihtml, integration has been
>> pretty alright.. Still very much in the figuring things out stage for my
>> app but here are some key snippets:
>>
>> Ports:
>> ```
>> port startEditor : (String, String, String) -> Cmd msg
>> port stopEditor : String -> Cmd msg
>> port editorChanges : (String -> msg) -> Sub msg
>> port selectionChange : (Selection -> msg) -> Sub msg
>> ```
>>
>> Selection:
>> ```
>> type alias Selection =
>> { text : String
>> , t : Float
>> , r : Float
>> , b : Float
>> , l : Float
>> }
>> ```
>>
>> WYSIHtml View:
>> ```
>> module Wysihtml.View exposing (wysiToolbar, wysiEditor)
>>
>> import Html exposing (..)
>> import Html.Attributes exposing (id, attribute, class)
>>
>> wysiToolbar : a -> Html a
>> wysiToolbar msg =
>> div [ id "wysi-toolbar" ]
>> [ a [ class "bold", command msg "bold" ] [ text "B" ]
>> , a [ class "italic", command msg "italic" ] [ text "I" ]
>> , a [ class "h1", command msg "formatBlock", commandValue msg "h1" ]
>> [ text "H1" ]
>> , a [ class "p", command msg "formatBlock", commandValue msg "p" ] [
>> text "P" ]
>> , a [ class "ul", command msg "inserUnorderedList" ] [ text "list" ]
>> ]
>>
>> wysiEditor : a -> Html a
>> wysiEditor msg =
>> div [ id "wysi-editor", dataPlaceholder msg "Start editing" ] []
>>
>>
>> dataPlaceholder : a -> String -> Attribute a
>> dataPlaceholder msg data =
>> attribute "data-placeholder" data
>>
>> command : a -> String -> Attribute a
>> command msg command =
>> attribute "data-wysihtml5-command" command
>>
>> commandValue : a -> String -> Attribute a
>> commandValue msg value =
>> attribute "data-wysihtml5-command-value" value
>> ```
>>
>> index.html wiring:
>> ```
>> app.ports.startEditor.subscribe(function(){
>> var editor = arguments[0][0];
>> var toolbar = arguments[0][1];
>> var initialText = arguments[0][2];
>> // todo change setTimeout to MutationObserver
>> setTimeout(function(){
>> console.log('start editor');
>> window.x_editor = new wysihtml5.Editor(editor, {
>> toolbar: toolbar,
>> parserRules: wysihtml5ParserRules
>> });
>> window.x_editor.setValue(initialText, true);
>> window.x_editor.on('interaction', function(){
>> app.ports.editorChanges.send(x_editor.getValue());
>> });
>> }, 60);
>> });
>> document.addEventListener("selectionchange", function(){
>> console.log("selection changed, sending to elm");
>> selection = window.getSelection();
>> if(!selection.isCollapsed){
>> for(var i = 0; i < selection.rangeCount; i++) {
>> range = selection.getRangeAt(i);
>> rect = range.getBoundingClientRect();
>> app.ports.selectionChange.send({ text: selection.toString(), t:
>> rect.top, r: rect.right, b: rect.bottom, l: rect.left });
>> }
>> }
>> });
>> ```
>>
>> I think that's the meat. Happy to chat more.
>>
>>
>> On Friday, February 24, 2017 at 3:38:33 AM UTC-5, Simon wrote:
>>>
>>> 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-l
ang.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 i
Re: [elm-discuss] Elm and contenteditable
One trick I have learned when integrating date range picker is that you can
push data from component to Elm using custom HTML events instead of sending
data through a port(s).
I have described it shortly here:
https://www.reddit.com/r/elm/comments/5uqa13/those_fancy_date_pickers_in_elm_watch_this_no/
input [ class "form-control date-range" , value <| formatMaybeDuration
item.duration , onDateRangePicker DurationChanged *-- see demo for details*
] []
Regards,
Witold Szczerba
On Fri, Feb 24, 2017 at 4:30 PM, Josh Szmajda wrote:
> I'm working with http://github.com/Voog/wysihtml, integration has been
> pretty alright.. Still very much in the figuring things out stage for my
> app but here are some key snippets:
>
> Ports:
> ```
> port startEditor : (String, String, String) -> Cmd msg
> port stopEditor : String -> Cmd msg
> port editorChanges : (String -> msg) -> Sub msg
> port selectionChange : (Selection -> msg) -> Sub msg
> ```
>
> Selection:
> ```
> type alias Selection =
> { text : String
> , t : Float
> , r : Float
> , b : Float
> , l : Float
> }
> ```
>
> WYSIHtml View:
> ```
> module Wysihtml.View exposing (wysiToolbar, wysiEditor)
>
> import Html exposing (..)
> import Html.Attributes exposing (id, attribute, class)
>
> wysiToolbar : a -> Html a
> wysiToolbar msg =
> div [ id "wysi-toolbar" ]
> [ a [ class "bold", command msg "bold" ] [ text "B" ]
> , a [ class "italic", command msg "italic" ] [ text "I" ]
> , a [ class "h1", command msg "formatBlock", commandValue msg "h1" ] [
> text "H1" ]
> , a [ class "p", command msg "formatBlock", commandValue msg "p" ] [
> text "P" ]
> , a [ class "ul", command msg "inserUnorderedList" ] [ text "list" ]
> ]
>
> wysiEditor : a -> Html a
> wysiEditor msg =
> div [ id "wysi-editor", dataPlaceholder msg "Start editing" ] []
>
>
> dataPlaceholder : a -> String -> Attribute a
> dataPlaceholder msg data =
> attribute "data-placeholder" data
>
> command : a -> String -> Attribute a
> command msg command =
> attribute "data-wysihtml5-command" command
>
> commandValue : a -> String -> Attribute a
> commandValue msg value =
> attribute "data-wysihtml5-command-value" value
> ```
>
> index.html wiring:
> ```
> app.ports.startEditor.subscribe(function(){
> var editor = arguments[0][0];
> var toolbar = arguments[0][1];
> var initialText = arguments[0][2];
> // todo change setTimeout to MutationObserver
> setTimeout(function(){
> console.log('start editor');
> window.x_editor = new wysihtml5.Editor(editor, {
> toolbar: toolbar,
> parserRules: wysihtml5ParserRules
> });
> window.x_editor.setValue(initialText, true);
> window.x_editor.on('interaction', function(){
> app.ports.editorChanges.send(x_editor.getValue());
> });
> }, 60);
> });
> document.addEventListener("selectionchange", function(){
> console.log("selection changed, sending to elm");
> selection = window.getSelection();
> if(!selection.isCollapsed){
> for(var i = 0; i < selection.rangeCount; i++) {
> range = selection.getRangeAt(i);
> rect = range.getBoundingClientRect();
> app.ports.selectionChange.send({ text: selection.toString(), t:
> rect.top, r: rect.right, b: rect.bottom, l: rect.left });
> }
> }
> });
> ```
>
> I think that's the meat. Happy to chat more.
>
>
> On Friday, February 24, 2017 at 3:38:33 AM UTC-5, Simon wrote:
>>
>> 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-l
>>> ang.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
>>
Re: [elm-discuss] Elm and contenteditable
I'm working with http://github.com/Voog/wysihtml, integration has been
pretty alright.. Still very much in the figuring things out stage for my
app but here are some key snippets:
Ports:
```
port startEditor : (String, String, String) -> Cmd msg
port stopEditor : String -> Cmd msg
port editorChanges : (String -> msg) -> Sub msg
port selectionChange : (Selection -> msg) -> Sub msg
```
Selection:
```
type alias Selection =
{ text : String
, t : Float
, r : Float
, b : Float
, l : Float
}
```
WYSIHtml View:
```
module Wysihtml.View exposing (wysiToolbar, wysiEditor)
import Html exposing (..)
import Html.Attributes exposing (id, attribute, class)
wysiToolbar : a -> Html a
wysiToolbar msg =
div [ id "wysi-toolbar" ]
[ a [ class "bold", command msg "bold" ] [ text "B" ]
, a [ class "italic", command msg "italic" ] [ text "I" ]
, a [ class "h1", command msg "formatBlock", commandValue msg "h1" ] [
text "H1" ]
, a [ class "p", command msg "formatBlock", commandValue msg "p" ] [
text "P" ]
, a [ class "ul", command msg "inserUnorderedList" ] [ text "list" ]
]
wysiEditor : a -> Html a
wysiEditor msg =
div [ id "wysi-editor", dataPlaceholder msg "Start editing" ] []
dataPlaceholder : a -> String -> Attribute a
dataPlaceholder msg data =
attribute "data-placeholder" data
command : a -> String -> Attribute a
command msg command =
attribute "data-wysihtml5-command" command
commandValue : a -> String -> Attribute a
commandValue msg value =
attribute "data-wysihtml5-command-value" value
```
index.html wiring:
```
app.ports.startEditor.subscribe(function(){
var editor = arguments[0][0];
var toolbar = arguments[0][1];
var initialText = arguments[0][2];
// todo change setTimeout to MutationObserver
setTimeout(function(){
console.log('start editor');
window.x_editor = new wysihtml5.Editor(editor, {
toolbar: toolbar,
parserRules: wysihtml5ParserRules
});
window.x_editor.setValue(initialText, true);
window.x_editor.on('interaction', function(){
app.ports.editorChanges.send(x_editor.getValue());
});
}, 60);
});
document.addEventListener("selectionchange", function(){
console.log("selection changed, sending to elm");
selection = window.getSelection();
if(!selection.isCollapsed){
for(var i = 0; i < selection.rangeCount; i++) {
range = selection.getRangeAt(i);
rect = range.getBoundingClientRect();
app.ports.selectionChange.send({ text: selection.toString(), t:
rect.top, r: rect.right, b: rect.bottom, l: rect.left });
}
}
});
```
I think that's the meat. Happy to chat more.
On Friday, February 24, 2017 at 3:38:33 AM UTC-5, Simon wrote:
>
> 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
>>> 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 f
Re: [elm-discuss] Elm and contenteditable
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
>> 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...@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.
Re: [elm-discuss] Elm and contenteditable
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 > 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...@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.
Re: [elm-discuss] Elm and contenteditable
Define convenient? :) CKEditor API is ok to work with Elm. Le mardi 27 septembre 2016 13:36:22 UTC+2, Steve Jones a écrit : > > Does CKeditor provide a convenient api for working with elm? > > On Tuesday, September 27, 2016 at 6:12:37 AM UTC-4, Steve Jones wrote: >> >> Yes, that seems to have been the missing piece of the puzzle for me. >> 'arrive.js' (which is based on Mutation Observers) has been recommended to >> me, though your solution may be preferable, depending on the the browser >> support that I'm being held to. >> >> Thanks >> >> On Tuesday, September 27, 2016 at 4:56:48 AM UTC-4, Vincent Jousse wrote: >>> >>> The main "hack" I had to do was to wait on the Javascript side for the >>> DOM element to be rendered by ELM. >>> >>> A setTimeout recursively checking if the element exists (and so if I can >>> attach a CKEditor to it) did the trick. >>> >>> Le mardi 27 septembre 2016 01:26:45 UTC+2, Steve Jones a écrit : Well, I'm not sure yet. But I think it was to do do with dom lifecycle and timing (I haven't tried CKeditor yet though. So far, I've tried tinymce and quill). Things that work with static HTML do not with HTML generated with elm. I've not found a lot of people doing this sort of thing successfully, so I'm mostly trying to determine what's been done. Quill gives me "Invalid Quill container". And tinymce just silently fails to do anything. On Monday, September 26, 2016 at 7:01:16 PM UTC-4, Vincent Jousse wrote: > > Yes it works for me. > > What's your problem exactly? > > Le lundi 26 septembre 2016 23:54:49 UTC+2, Steve Jones a écrit : >> >> Vincent, >> >> So, you've had some success with CKeditor? I'm having some difficulty >> getting any of these rich text editors to work within my app. I have >> tried >> CKeditor yet though. >> >> On Friday, September 2, 2016 at 9:34:19 AM UTC-4, Vincent Jousse >> wrote: >>> >>> Nice trick :D >>> >>> I think I'll stay with my CKeditor solution for the moment, but >>> thanks a lot anyway. >>> >>> Le mercredi 31 août 2016 16:02:30 UTC+2, Damir Batinović a écrit : I had to use contenteditable in my project. The true way to handling cursor position was to hard (I don't remeber what it was but I thing it involves window.selection) so I went with a dirty hack. Added another field to my model (tmpInput), saving input events into that field until Blur event was fired. Upon blur event tmpInput is copied to real input. So model and view are out of sync until blur happens. It's not nice but there where no problems with implementation so far. Dana utorak, 30. kolovoza 2016. u 17:18:37 UTC+2, korisnik Vincent Jousse napisao je: > > I didn't but it's a very good idea :-) > > Do you see a way to overcome the cursor position problem with that > approach? > > Le mardi 30 août 2016 17:16:21 UTC+2, Peter Damoc a écrit : >> >> It makes perfect sense. >> >> Have you thought about putting contenteditable on each individual >> span? >> This should allow for single word editing and for individual >> double clicks. >> >> >> On Tue, Aug 30, 2016 at 5:43 PM, Vincent Jousse > > wrote: >> >>> I mainly need double click events. I'm doing a transcription >>> editor: I'm using a Speech To Text tool to generate words with >>> their >>> timestamps. >>> >>> I'm putting the words in a contenteditable div so that people >>> can correct the transcription, and each word is surrounded by a >>> span >>> containing the timestamp info in some data- attribute. >>> When people double click on the span, I want the audio player to >>> play the file starting at this timestamp. And when the audio is >>> playing, I >>> want the «current word» to be highlighted in the contenteditable >>> div. >>> >>> Does it make sense? >>> >>> Le mardi 30 août 2016 16:36:10 UTC+2, Peter Damoc a écrit : Well, it was a naive approach. ^_^ As for events inside the contenteditable div, I have no idea but what kind of events do you want to handle in this kind of a scenario? On Tue, Aug 30, 2016 at 5:11 PM, Vincent Jousse < vjo...@gmail.com> wrote: > 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 f
Re: [elm-discuss] Elm and contenteditable
Does CKeditor provide a convenient api for working with elm? On Tuesday, September 27, 2016 at 6:12:37 AM UTC-4, Steve Jones wrote: > > Yes, that seems to have been the missing piece of the puzzle for me. > 'arrive.js' (which is based on Mutation Observers) has been recommended to > me, though your solution may be preferable, depending on the the browser > support that I'm being held to. > > Thanks > > On Tuesday, September 27, 2016 at 4:56:48 AM UTC-4, Vincent Jousse wrote: >> >> The main "hack" I had to do was to wait on the Javascript side for the >> DOM element to be rendered by ELM. >> >> A setTimeout recursively checking if the element exists (and so if I can >> attach a CKEditor to it) did the trick. >> >> Le mardi 27 septembre 2016 01:26:45 UTC+2, Steve Jones a écrit : >>> >>> Well, I'm not sure yet. But I think it was to do do with dom lifecycle >>> and timing (I haven't tried CKeditor yet though. So far, I've tried tinymce >>> and quill). Things that work with static HTML do not with HTML generated >>> with elm. I've not found a lot of people doing this sort of thing >>> successfully, so I'm mostly trying to determine what's been done. >>> >>> Quill gives me "Invalid Quill container". And tinymce just silently >>> fails to do anything. >>> >>> >>> On Monday, September 26, 2016 at 7:01:16 PM UTC-4, Vincent Jousse wrote: Yes it works for me. What's your problem exactly? Le lundi 26 septembre 2016 23:54:49 UTC+2, Steve Jones a écrit : > > Vincent, > > So, you've had some success with CKeditor? I'm having some difficulty > getting any of these rich text editors to work within my app. I have > tried > CKeditor yet though. > > On Friday, September 2, 2016 at 9:34:19 AM UTC-4, Vincent Jousse wrote: >> >> Nice trick :D >> >> I think I'll stay with my CKeditor solution for the moment, but >> thanks a lot anyway. >> >> Le mercredi 31 août 2016 16:02:30 UTC+2, Damir Batinović a écrit : >>> >>> I had to use contenteditable in my project. The true way to handling >>> cursor position was to hard (I don't remeber what it was but I thing it >>> involves window.selection) so I went with a dirty hack. Added another >>> field to my model (tmpInput), saving input events into that field until >>> Blur event was fired. Upon blur event tmpInput is copied to real input. >>> So >>> model and view are out of sync until blur happens. It's not nice but >>> there >>> where no problems with implementation so far. >>> >>> Dana utorak, 30. kolovoza 2016. u 17:18:37 UTC+2, korisnik Vincent >>> Jousse napisao je: I didn't but it's a very good idea :-) Do you see a way to overcome the cursor position problem with that approach? Le mardi 30 août 2016 17:16:21 UTC+2, Peter Damoc a écrit : > > It makes perfect sense. > > Have you thought about putting contenteditable on each individual > span? > This should allow for single word editing and for individual > double clicks. > > > On Tue, Aug 30, 2016 at 5:43 PM, Vincent Jousse > wrote: > >> I mainly need double click events. I'm doing a transcription >> editor: I'm using a Speech To Text tool to generate words with their >> timestamps. >> >> I'm putting the words in a contenteditable div so that people can >> correct the transcription, and each word is surrounded by a span >> containing >> the timestamp info in some data- attribute. >> When people double click on the span, I want the audio player to >> play the file starting at this timestamp. And when the audio is >> playing, I >> want the «current word» to be highlighted in the contenteditable div. >> >> Does it make sense? >> >> Le mardi 30 août 2016 16:36:10 UTC+2, Peter Damoc a écrit : >>> >>> Well, it was a naive approach. ^_^ >>> >>> As for events inside the contenteditable div, I have no idea but >>> what kind of events do you want to handle in this kind of a >>> scenario? >>> >>> >>> >>> On Tue, Aug 30, 2016 at 5:11 PM, Vincent Jousse < >>> vjo...@gmail.com> wrote: >>> 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? >>
Re: [elm-discuss] Elm and contenteditable
Yes, that seems to have been the missing piece of the puzzle for me. 'arrive.js' (which is based on Mutation Observers) has been recommended to me, though your solution may be preferable, depending on the the browser support that I'm being held to. Thanks On Tuesday, September 27, 2016 at 4:56:48 AM UTC-4, Vincent Jousse wrote: > > The main "hack" I had to do was to wait on the Javascript side for the DOM > element to be rendered by ELM. > > A setTimeout recursively checking if the element exists (and so if I can > attach a CKEditor to it) did the trick. > > Le mardi 27 septembre 2016 01:26:45 UTC+2, Steve Jones a écrit : >> >> Well, I'm not sure yet. But I think it was to do do with dom lifecycle >> and timing (I haven't tried CKeditor yet though. So far, I've tried tinymce >> and quill). Things that work with static HTML do not with HTML generated >> with elm. I've not found a lot of people doing this sort of thing >> successfully, so I'm mostly trying to determine what's been done. >> >> Quill gives me "Invalid Quill container". And tinymce just silently fails >> to do anything. >> >> >> On Monday, September 26, 2016 at 7:01:16 PM UTC-4, Vincent Jousse wrote: >>> >>> Yes it works for me. >>> >>> What's your problem exactly? >>> >>> Le lundi 26 septembre 2016 23:54:49 UTC+2, Steve Jones a écrit : Vincent, So, you've had some success with CKeditor? I'm having some difficulty getting any of these rich text editors to work within my app. I have tried CKeditor yet though. On Friday, September 2, 2016 at 9:34:19 AM UTC-4, Vincent Jousse wrote: > > Nice trick :D > > I think I'll stay with my CKeditor solution for the moment, but thanks > a lot anyway. > > Le mercredi 31 août 2016 16:02:30 UTC+2, Damir Batinović a écrit : >> >> I had to use contenteditable in my project. The true way to handling >> cursor position was to hard (I don't remeber what it was but I thing it >> involves window.selection) so I went with a dirty hack. Added another >> field to my model (tmpInput), saving input events into that field until >> Blur event was fired. Upon blur event tmpInput is copied to real input. >> So >> model and view are out of sync until blur happens. It's not nice but >> there >> where no problems with implementation so far. >> >> Dana utorak, 30. kolovoza 2016. u 17:18:37 UTC+2, korisnik Vincent >> Jousse napisao je: >>> >>> I didn't but it's a very good idea :-) >>> >>> Do you see a way to overcome the cursor position problem with that >>> approach? >>> >>> Le mardi 30 août 2016 17:16:21 UTC+2, Peter Damoc a écrit : It makes perfect sense. Have you thought about putting contenteditable on each individual span? This should allow for single word editing and for individual double clicks. On Tue, Aug 30, 2016 at 5:43 PM, Vincent Jousse wrote: > I mainly need double click events. I'm doing a transcription > editor: I'm using a Speech To Text tool to generate words with their > timestamps. > > I'm putting the words in a contenteditable div so that people can > correct the transcription, and each word is surrounded by a span > containing > the timestamp info in some data- attribute. > When people double click on the span, I want the audio player to > play the file starting at this timestamp. And when the audio is > playing, I > want the «current word» to be highlighted in the contenteditable div. > > Does it make sense? > > Le mardi 30 août 2016 16:36:10 UTC+2, Peter Damoc a écrit : >> >> Well, it was a naive approach. ^_^ >> >> As for events inside the contenteditable div, I have no idea but >> what kind of events do you want to handle in this kind of a scenario? >> >> >> >> On Tue, Aug 30, 2016 at 5:11 PM, Vincent Jousse > > wrote: >> >>> 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? >>> >>> >> -- >> 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
Re: [elm-discuss] Elm and contenteditable
The main "hack" I had to do was to wait on the Javascript side for the DOM element to be rendered by ELM. A setTimeout recursively checking if the element exists (and so if I can attach a CKEditor to it) did the trick. Le mardi 27 septembre 2016 01:26:45 UTC+2, Steve Jones a écrit : > > Well, I'm not sure yet. But I think it was to do do with dom lifecycle and > timing (I haven't tried CKeditor yet though. So far, I've tried tinymce and > quill). Things that work with static HTML do not with HTML generated with > elm. I've not found a lot of people doing this sort of thing successfully, > so I'm mostly trying to determine what's been done. > > Quill gives me "Invalid Quill container". And tinymce just silently fails > to do anything. > > > On Monday, September 26, 2016 at 7:01:16 PM UTC-4, Vincent Jousse wrote: >> >> Yes it works for me. >> >> What's your problem exactly? >> >> Le lundi 26 septembre 2016 23:54:49 UTC+2, Steve Jones a écrit : >>> >>> Vincent, >>> >>> So, you've had some success with CKeditor? I'm having some difficulty >>> getting any of these rich text editors to work within my app. I have tried >>> CKeditor yet though. >>> >>> On Friday, September 2, 2016 at 9:34:19 AM UTC-4, Vincent Jousse wrote: Nice trick :D I think I'll stay with my CKeditor solution for the moment, but thanks a lot anyway. Le mercredi 31 août 2016 16:02:30 UTC+2, Damir Batinović a écrit : > > I had to use contenteditable in my project. The true way to handling > cursor position was to hard (I don't remeber what it was but I thing it > involves window.selection) so I went with a dirty hack. Added another > field to my model (tmpInput), saving input events into that field until > Blur event was fired. Upon blur event tmpInput is copied to real input. > So > model and view are out of sync until blur happens. It's not nice but > there > where no problems with implementation so far. > > Dana utorak, 30. kolovoza 2016. u 17:18:37 UTC+2, korisnik Vincent > Jousse napisao je: >> >> I didn't but it's a very good idea :-) >> >> Do you see a way to overcome the cursor position problem with that >> approach? >> >> Le mardi 30 août 2016 17:16:21 UTC+2, Peter Damoc a écrit : >>> >>> It makes perfect sense. >>> >>> Have you thought about putting contenteditable on each individual >>> span? >>> This should allow for single word editing and for individual double >>> clicks. >>> >>> >>> On Tue, Aug 30, 2016 at 5:43 PM, Vincent Jousse >>> wrote: >>> I mainly need double click events. I'm doing a transcription editor: I'm using a Speech To Text tool to generate words with their timestamps. I'm putting the words in a contenteditable div so that people can correct the transcription, and each word is surrounded by a span containing the timestamp info in some data- attribute. When people double click on the span, I want the audio player to play the file starting at this timestamp. And when the audio is playing, I want the «current word» to be highlighted in the contenteditable div. Does it make sense? Le mardi 30 août 2016 16:36:10 UTC+2, Peter Damoc a écrit : > > Well, it was a naive approach. ^_^ > > As for events inside the contenteditable div, I have no idea but > what kind of events do you want to handle in this kind of a scenario? > > > > On Tue, Aug 30, 2016 at 5:11 PM, Vincent Jousse > wrote: > >> 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? >> >> > -- > 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...@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
Re: [elm-discuss] Elm and contenteditable
Well, I'm not sure yet. But I think it was to do do with dom lifecycle and timing (I haven't tried CKeditor yet though. So far, I've tried tinymce and quill). Things that work with static HTML do not with HTML generated with elm. I've not found a lot of people doing this sort of thing successfully, so I'm mostly trying to determine what's been done. Quill gives me "Invalid Quill container". And tinymce just silently fails to do anything. On Monday, September 26, 2016 at 7:01:16 PM UTC-4, Vincent Jousse wrote: > > Yes it works for me. > > What's your problem exactly? > > Le lundi 26 septembre 2016 23:54:49 UTC+2, Steve Jones a écrit : >> >> Vincent, >> >> So, you've had some success with CKeditor? I'm having some difficulty >> getting any of these rich text editors to work within my app. I have tried >> CKeditor yet though. >> >> On Friday, September 2, 2016 at 9:34:19 AM UTC-4, Vincent Jousse wrote: >>> >>> Nice trick :D >>> >>> I think I'll stay with my CKeditor solution for the moment, but thanks a >>> lot anyway. >>> >>> Le mercredi 31 août 2016 16:02:30 UTC+2, Damir Batinović a écrit : I had to use contenteditable in my project. The true way to handling cursor position was to hard (I don't remeber what it was but I thing it involves window.selection) so I went with a dirty hack. Added another field to my model (tmpInput), saving input events into that field until Blur event was fired. Upon blur event tmpInput is copied to real input. So model and view are out of sync until blur happens. It's not nice but there where no problems with implementation so far. Dana utorak, 30. kolovoza 2016. u 17:18:37 UTC+2, korisnik Vincent Jousse napisao je: > > I didn't but it's a very good idea :-) > > Do you see a way to overcome the cursor position problem with that > approach? > > Le mardi 30 août 2016 17:16:21 UTC+2, Peter Damoc a écrit : >> >> It makes perfect sense. >> >> Have you thought about putting contenteditable on each individual >> span? >> This should allow for single word editing and for individual double >> clicks. >> >> >> On Tue, Aug 30, 2016 at 5:43 PM, Vincent Jousse >> wrote: >> >>> I mainly need double click events. I'm doing a transcription editor: >>> I'm using a Speech To Text tool to generate words with their timestamps. >>> >>> I'm putting the words in a contenteditable div so that people can >>> correct the transcription, and each word is surrounded by a span >>> containing >>> the timestamp info in some data- attribute. >>> When people double click on the span, I want the audio player to >>> play the file starting at this timestamp. And when the audio is >>> playing, I >>> want the «current word» to be highlighted in the contenteditable div. >>> >>> Does it make sense? >>> >>> Le mardi 30 août 2016 16:36:10 UTC+2, Peter Damoc a écrit : Well, it was a naive approach. ^_^ As for events inside the contenteditable div, I have no idea but what kind of events do you want to handle in this kind of a scenario? On Tue, Aug 30, 2016 at 5:11 PM, Vincent Jousse wrote: > 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? > > -- 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...@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.
Re: [elm-discuss] Elm and contenteditable
Yes it works for me. What's your problem exactly? Le lundi 26 septembre 2016 23:54:49 UTC+2, Steve Jones a écrit : > > Vincent, > > So, you've had some success with CKeditor? I'm having some difficulty > getting any of these rich text editors to work within my app. I have tried > CKeditor yet though. > > On Friday, September 2, 2016 at 9:34:19 AM UTC-4, Vincent Jousse wrote: >> >> Nice trick :D >> >> I think I'll stay with my CKeditor solution for the moment, but thanks a >> lot anyway. >> >> Le mercredi 31 août 2016 16:02:30 UTC+2, Damir Batinović a écrit : >>> >>> I had to use contenteditable in my project. The true way to handling >>> cursor position was to hard (I don't remeber what it was but I thing it >>> involves window.selection) so I went with a dirty hack. Added another >>> field to my model (tmpInput), saving input events into that field until >>> Blur event was fired. Upon blur event tmpInput is copied to real input. So >>> model and view are out of sync until blur happens. It's not nice but there >>> where no problems with implementation so far. >>> >>> Dana utorak, 30. kolovoza 2016. u 17:18:37 UTC+2, korisnik Vincent >>> Jousse napisao je: I didn't but it's a very good idea :-) Do you see a way to overcome the cursor position problem with that approach? Le mardi 30 août 2016 17:16:21 UTC+2, Peter Damoc a écrit : > > It makes perfect sense. > > Have you thought about putting contenteditable on each individual > span? > This should allow for single word editing and for individual double > clicks. > > > On Tue, Aug 30, 2016 at 5:43 PM, Vincent Jousse > wrote: > >> I mainly need double click events. I'm doing a transcription editor: >> I'm using a Speech To Text tool to generate words with their timestamps. >> >> I'm putting the words in a contenteditable div so that people can >> correct the transcription, and each word is surrounded by a span >> containing >> the timestamp info in some data- attribute. >> When people double click on the span, I want the audio player to play >> the file starting at this timestamp. And when the audio is playing, I >> want >> the «current word» to be highlighted in the contenteditable div. >> >> Does it make sense? >> >> Le mardi 30 août 2016 16:36:10 UTC+2, Peter Damoc a écrit : >>> >>> Well, it was a naive approach. ^_^ >>> >>> As for events inside the contenteditable div, I have no idea but >>> what kind of events do you want to handle in this kind of a scenario? >>> >>> >>> >>> On Tue, Aug 30, 2016 at 5:11 PM, Vincent Jousse >>> wrote: >>> 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? >>> -- >>> 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...@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.
Re: [elm-discuss] Elm and contenteditable
Vincent, So, you've had some success with CKeditor? I'm having some difficulty getting any of these rich text editors to work within my app. I have tried CKeditor yet though. On Friday, September 2, 2016 at 9:34:19 AM UTC-4, Vincent Jousse wrote: > > Nice trick :D > > I think I'll stay with my CKeditor solution for the moment, but thanks a > lot anyway. > > Le mercredi 31 août 2016 16:02:30 UTC+2, Damir Batinović a écrit : >> >> I had to use contenteditable in my project. The true way to handling >> cursor position was to hard (I don't remeber what it was but I thing it >> involves window.selection) so I went with a dirty hack. Added another >> field to my model (tmpInput), saving input events into that field until >> Blur event was fired. Upon blur event tmpInput is copied to real input. So >> model and view are out of sync until blur happens. It's not nice but there >> where no problems with implementation so far. >> >> Dana utorak, 30. kolovoza 2016. u 17:18:37 UTC+2, korisnik Vincent Jousse >> napisao je: >>> >>> I didn't but it's a very good idea :-) >>> >>> Do you see a way to overcome the cursor position problem with that >>> approach? >>> >>> Le mardi 30 août 2016 17:16:21 UTC+2, Peter Damoc a écrit : It makes perfect sense. Have you thought about putting contenteditable on each individual span? This should allow for single word editing and for individual double clicks. On Tue, Aug 30, 2016 at 5:43 PM, Vincent Jousse wrote: > I mainly need double click events. I'm doing a transcription editor: > I'm using a Speech To Text tool to generate words with their timestamps. > > I'm putting the words in a contenteditable div so that people can > correct the transcription, and each word is surrounded by a span > containing > the timestamp info in some data- attribute. > When people double click on the span, I want the audio player to play > the file starting at this timestamp. And when the audio is playing, I > want > the «current word» to be highlighted in the contenteditable div. > > Does it make sense? > > Le mardi 30 août 2016 16:36:10 UTC+2, Peter Damoc a écrit : >> >> Well, it was a naive approach. ^_^ >> >> As for events inside the contenteditable div, I have no idea but what >> kind of events do you want to handle in this kind of a scenario? >> >> >> >> On Tue, Aug 30, 2016 at 5:11 PM, Vincent Jousse >> wrote: >> >>> 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? >>> >>> >> -- >> 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...@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.
Re: [elm-discuss] Elm and contenteditable
Nice trick :D I think I'll stay with my CKeditor solution for the moment, but thanks a lot anyway. Le mercredi 31 août 2016 16:02:30 UTC+2, Damir Batinović a écrit : > > I had to use contenteditable in my project. The true way to handling > cursor position was to hard (I don't remeber what it was but I thing it > involves window.selection) so I went with a dirty hack. Added another > field to my model (tmpInput), saving input events into that field until > Blur event was fired. Upon blur event tmpInput is copied to real input. So > model and view are out of sync until blur happens. It's not nice but there > where no problems with implementation so far. > > Dana utorak, 30. kolovoza 2016. u 17:18:37 UTC+2, korisnik Vincent Jousse > napisao je: >> >> I didn't but it's a very good idea :-) >> >> Do you see a way to overcome the cursor position problem with that >> approach? >> >> Le mardi 30 août 2016 17:16:21 UTC+2, Peter Damoc a écrit : >>> >>> It makes perfect sense. >>> >>> Have you thought about putting contenteditable on each individual span? >>> This should allow for single word editing and for individual double >>> clicks. >>> >>> >>> On Tue, Aug 30, 2016 at 5:43 PM, Vincent Jousse >>> wrote: >>> I mainly need double click events. I'm doing a transcription editor: I'm using a Speech To Text tool to generate words with their timestamps. I'm putting the words in a contenteditable div so that people can correct the transcription, and each word is surrounded by a span containing the timestamp info in some data- attribute. When people double click on the span, I want the audio player to play the file starting at this timestamp. And when the audio is playing, I want the «current word» to be highlighted in the contenteditable div. Does it make sense? Le mardi 30 août 2016 16:36:10 UTC+2, Peter Damoc a écrit : > > Well, it was a naive approach. ^_^ > > As for events inside the contenteditable div, I have no idea but what > kind of events do you want to handle in this kind of a scenario? > > > > On Tue, Aug 30, 2016 at 5:11 PM, Vincent Jousse > wrote: > >> 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? >> >> > -- > 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...@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.
Re: [elm-discuss] Elm and contenteditable
I had to use contenteditable in my project. The true way to handling cursor position was to hard (I don't remeber what it was but I thing it involves window.selection) so I went with a dirty hack. Added another field to my model (tmpInput), saving input events into that field until Blur event was fired. Upon blur event tmpInput is copied to real input. So model and view are out of sync until blur happens. It's not nice but there where no problems with implementation so far. Dana utorak, 30. kolovoza 2016. u 17:18:37 UTC+2, korisnik Vincent Jousse napisao je: > > I didn't but it's a very good idea :-) > > Do you see a way to overcome the cursor position problem with that > approach? > > Le mardi 30 août 2016 17:16:21 UTC+2, Peter Damoc a écrit : >> >> It makes perfect sense. >> >> Have you thought about putting contenteditable on each individual span? >> This should allow for single word editing and for individual double >> clicks. >> >> >> On Tue, Aug 30, 2016 at 5:43 PM, Vincent Jousse wrote: >> >>> I mainly need double click events. I'm doing a transcription editor: I'm >>> using a Speech To Text tool to generate words with their timestamps. >>> >>> I'm putting the words in a contenteditable div so that people can >>> correct the transcription, and each word is surrounded by a span containing >>> the timestamp info in some data- attribute. >>> When people double click on the span, I want the audio player to play >>> the file starting at this timestamp. And when the audio is playing, I want >>> the «current word» to be highlighted in the contenteditable div. >>> >>> Does it make sense? >>> >>> Le mardi 30 août 2016 16:36:10 UTC+2, Peter Damoc a écrit : Well, it was a naive approach. ^_^ As for events inside the contenteditable div, I have no idea but what kind of events do you want to handle in this kind of a scenario? On Tue, Aug 30, 2016 at 5:11 PM, Vincent Jousse wrote: > 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? > > -- 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...@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.
Re: [elm-discuss] Elm and contenteditable
I didn't but it's a very good idea :-) Do you see a way to overcome the cursor position problem with that approach? Le mardi 30 août 2016 17:16:21 UTC+2, Peter Damoc a écrit : > > It makes perfect sense. > > Have you thought about putting contenteditable on each individual span? > This should allow for single word editing and for individual double > clicks. > > > On Tue, Aug 30, 2016 at 5:43 PM, Vincent Jousse > wrote: > >> I mainly need double click events. I'm doing a transcription editor: I'm >> using a Speech To Text tool to generate words with their timestamps. >> >> I'm putting the words in a contenteditable div so that people can correct >> the transcription, and each word is surrounded by a span containing the >> timestamp info in some data- attribute. >> When people double click on the span, I want the audio player to play the >> file starting at this timestamp. And when the audio is playing, I want the >> «current word» to be highlighted in the contenteditable div. >> >> Does it make sense? >> >> Le mardi 30 août 2016 16:36:10 UTC+2, Peter Damoc a écrit : >>> >>> Well, it was a naive approach. ^_^ >>> >>> As for events inside the contenteditable div, I have no idea but what >>> kind of events do you want to handle in this kind of a scenario? >>> >>> >>> >>> On Tue, Aug 30, 2016 at 5:11 PM, Vincent Jousse >>> wrote: >>> 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? >>> -- >>> 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...@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.
Re: [elm-discuss] Elm and contenteditable
It makes perfect sense. Have you thought about putting contenteditable on each individual span? This should allow for single word editing and for individual double clicks. On Tue, Aug 30, 2016 at 5:43 PM, Vincent Jousse wrote: > I mainly need double click events. I'm doing a transcription editor: I'm > using a Speech To Text tool to generate words with their timestamps. > > I'm putting the words in a contenteditable div so that people can correct > the transcription, and each word is surrounded by a span containing the > timestamp info in some data- attribute. > When people double click on the span, I want the audio player to play the > file starting at this timestamp. And when the audio is playing, I want the > «current word» to be highlighted in the contenteditable div. > > Does it make sense? > > Le mardi 30 août 2016 16:36:10 UTC+2, Peter Damoc a écrit : >> >> Well, it was a naive approach. ^_^ >> >> As for events inside the contenteditable div, I have no idea but what >> kind of events do you want to handle in this kind of a scenario? >> >> >> >> On Tue, Aug 30, 2016 at 5:11 PM, Vincent Jousse wrote: >> >>> 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/vi >>> rtual-dom/issues/23 >>> >>> And with this approach (storing a string), how could I trigger events on >>> the HTML inside the contenteditable div? >>> >>> >> -- >> 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. > -- 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.
Re: [elm-discuss] Elm and contenteditable
I mainly need double click events. I'm doing a transcription editor: I'm using a Speech To Text tool to generate words with their timestamps. I'm putting the words in a contenteditable div so that people can correct the transcription, and each word is surrounded by a span containing the timestamp info in some data- attribute. When people double click on the span, I want the audio player to play the file starting at this timestamp. And when the audio is playing, I want the «current word» to be highlighted in the contenteditable div. Does it make sense? Le mardi 30 août 2016 16:36:10 UTC+2, Peter Damoc a écrit : > > Well, it was a naive approach. ^_^ > > As for events inside the contenteditable div, I have no idea but what kind > of events do you want to handle in this kind of a scenario? > > > > On Tue, Aug 30, 2016 at 5:11 PM, Vincent Jousse > wrote: > >> 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? >> >> > -- > 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.
Re: [elm-discuss] Elm and contenteditable
Well, it was a naive approach. ^_^ As for events inside the contenteditable div, I have no idea but what kind of events do you want to handle in this kind of a scenario? On Tue, Aug 30, 2016 at 5:11 PM, Vincent Jousse wrote: > 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? > > -- 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.
Re: [elm-discuss] Elm and contenteditable
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 > 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 > > 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" >
>>> 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 >>> > 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...@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...@googlegroups.com .
For more options, visit https://groups.google.com/d/optout.
>>> --
>>> You received this message because you
Re: [elm-discuss] Elm and contenteditable
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 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
> 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" 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
>>> 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
Re: [elm-discuss] Elm and contenteditable
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
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" 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
>> 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/
--
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.
Re: [elm-discuss] Elm and contenteditable
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" 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
> 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.
Re: [elm-discuss] Elm and contenteditable
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 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.
[elm-discuss] Elm and contenteditable
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.
