[elm-discuss] WYSIWYG functionality

[Michael Lebow]

I'm working on something that requires some WYSIWYG editor like
functionality.

The way I'm thinking about it is inspired by the Basecamp Trix editor and
the Medium editor. Capture input events, create an internal model
representing the content, and then re-render. (Avoiding execCommand and
the differences that can cause with different browsers)

ContentEditable seems to be the only way to accomplish this. A simple
input will not allow for some of the rich text features I plan to
implement.

I have started an implementation of this and get stuck with the problem of
needing to manually set the cursor position after text is typed and the
html re-renders. (Currently, it jumps to the front of the content editable
div after every keystroke) It looks like maybe at one point in time this
was a problem with simple text inputs in elm too??
(https://groups.google.com/forum/#!topic/elm-discuss/I2JleY8bD7c) I'm
curios if anyone can direct me to the history of that bug and what the
solution was.

This content editable cursor position issue is also brought up
here: https://github.com/elm-lang/virtual-dom/issues/23


From my reading on this, it seems other's have brought up the idea of
making an WYSIWYG editor with Elm, but get stuck with the inability to do
things like window.getSelection() or interact with that selection e.g.
Selection.addRange()
This is brought up here -
https://groups.google.com/forum/#!topic/elm-dev/169IJRJsW6Q - and seemingly
left unresolved.

If I'm willing to do the legwork, what's the best way to accomplish this in
Elm? If it's not currently possible with only Elm, what's the next best
thing? Is there a way I can build the APIs that Elm currently lacks for my
own use until the community determines the best way to incorporate them
into Elm? Should I be reaching for Ports?

Thanks in advance!

[Daniel Wehner]

It could be really interesting to also experiment with looking
at https://draftjs.org/ / providing a port or a in elm implementation of it.

https://github.com/thebritican/elm-editor seemed to have tried that, but
there seemed no progress on that in the meantime.

Post by Michael Lebow
I'm working on something that requires some WYSIWYG editor like
functionality.
The way I'm thinking about it is inspired by the Basecamp Trix editor and
the Medium editor. Capture input events, create an internal model
representing the content, and then re-render. (Avoiding execCommand and
the differences that can cause with different browsers)
ContentEditable seems to be the only way to accomplish this. A simple
input will not allow for some of the rich text features I plan to
implement.
I have started an implementation of this and get stuck with the problem of
needing to manually set the cursor position after text is typed and the
html re-renders. (Currently, it jumps to the front of the content editable
div after every keystroke) It looks like maybe at one point in time this
was a problem with simple text inputs in elm too?? (
https://groups.google.com/forum/#!topic/elm-discuss/I2JleY8bD7c) I'm
curios if anyone can direct me to the history of that bug and what the
solution was.
https://github.com/elm-lang/virtual-dom/issues/23
From my reading on this, it seems other's have brought up the idea of
making an WYSIWYG editor with Elm, but get stuck with the inability to do
things like window.getSelection() or interact with that selection e.g.
Selection.addRange()
This is brought up here -
https://groups.google.com/forum/#!topic/elm-dev/169IJRJsW6Q - and
seemingly left unresolved.
If I'm willing to do the legwork, what's the best way to accomplish this
in Elm? If it's not currently possible with only Elm, what's the next best
thing? Is there a way I can build the APIs that Elm currently lacks for my
own use until the community determines the best way to incorporate them
into Elm? Should I be reaching for Ports?
Thanks in advance!

[Simon]

If you haven't already seen

then it might be useful for you

It could be really interesting to also experiment with looking at
https://draftjs.org/ / providing a port or a in elm implementation of it.
https://github.com/thebritican/elm-editor seemed to have tried that, but
there seemed no progress on that in the meantime.

Post by Michael Lebow
I'm working on something that requires some WYSIWYG editor like
functionality.
The way I'm thinking about it is inspired by the Basecamp Trix editor and
the Medium editor. Capture input events, create an internal model
representing the content, and then re-render. (Avoiding execCommand and
the differences that can cause with different browsers)
ContentEditable seems to be the only way to accomplish this. A simple
input will not allow for some of the rich text features I plan to
implement.
I have started an implementation of this and get stuck with the problem
of needing to manually set the cursor position after text is typed and the
html re-renders. (Currently, it jumps to the front of the content editable
div after every keystroke) It looks like maybe at one point in time this
was a problem with simple text inputs in elm too?? (
https://groups.google.com/forum/#!topic/elm-discuss/I2JleY8bD7c) I'm
curios if anyone can direct me to the history of that bug and what the
solution was.
https://github.com/elm-lang/virtual-dom/issues/23
From my reading on this, it seems other's have brought up the idea of
making an WYSIWYG editor with Elm, but get stuck with the inability to do
things like window.getSelection() or interact with that selection e.g.
Selection.addRange()
This is brought up here -
https://groups.google.com/forum/#!topic/elm-dev/169IJRJsW6Q - and
seemingly left unresolved.
If I'm willing to do the legwork, what's the best way to accomplish this
in Elm? If it's not currently possible with only Elm, what's the next best
thing? Is there a way I can build the APIs that Elm currently lacks for my
own use until the community determines the best way to incorporate them
into Elm? Should I be reaching for Ports?
Thanks in advance!