Embedding text editor in Elm

[Wade McReynolds]

So I noticed that the code for Elm's online editor here uses plain JavaScript. How difficult would it be to embed CodeMirror or Ace using just Elm using an approach like this one here? I'm asking because I'm interested in making a specialized text editor with functionality that would be messy and difficult for me to implement using those editors' language-mode facilities, but would like also to avail myself of CodeMirror's (or Ace's) vi emulation. I'd consider going with ordinary text boxes, though, should embedding an editor prove too complicated for a novice like me. Or maybe there's a better possibility that I haven't considered? Thanks for any suggestions.

[Jeff Smits]

Embedding something mutable like CodeMirror or Ace inside Elm would be tricky. But you can embed Elm in a page where the JS implemented editor also lives. The communication between such an editor and Elm can be done with ports. See also the interop page on elm-lang.org.

On Fri, Aug 7, 2015 at 7:52 PM, Wade McReynolds <wjmcre...@gmail.com> wrote:

So I noticed that the code for Elm's online editor here uses plain JavaScript. How difficult would it be to embed CodeMirror or Ace using just Elm using an approach like this one here? I'm asking because I'm interested in making a specialized text editor with functionality that would be messy and difficult for me to implement using those editors' language-mode facilities, but would like also to avail myself of CodeMirror's (or Ace's) vi emulation. I'd consider going with ordinary text boxes, though, should embedding an editor prove too complicated for a novice like me. Or maybe there's a better possibility that I haven't considered? Thanks for any suggestions.

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

​

[Wade McReynolds]

Thanks. Sounds like I'm probably better off using plain text boxes and incorporating another editor only later, if at all.

[Jeff Smits]

I don't know what you have in mind exactly. But if you can use a plain textarea for now, I guess that would be easiest. 

[Wade McReynolds]

The thing I wanted to make, and have wanted to make for a long time, is an editor for writing formal poetry--like sonnets, villanelles, pantoums--that would use things like autocomplete and highlighting to help with the rhymes and other repetitive structures of a given form. For example, a pantoum "mode" would automatically fill in the repeated lines in the poem as you type the original. Using pen and paper, that kind of writing can sometimes feel like doing long division, and make your hand sore besides. Scanning verses and suggesting rhymes would be more difficult, but probably would be worth attempting at some point.

Originally I thought of doing it with Ace or CodeMirror, using multiple cursors and other features of those editors. (As well as vi key bindings, which I miss whenever I'm using something else.) Reading that blog post about Om gave me the idea of using a functional-reactive approach instead of attempting some kind of super-elaborate CodeMirror "poetry mode," which I'm hardly qualified to do anyway.

[Janis Voigtländer]

Have you seen https://github.com/rtfeldman/dreamwriter ?

​

[Wade McReynolds]

Yeah, I was going to mention Dreamwriter. I was looking at the source of that the other day. I should study it more closely.

[Ryan Rempel]

Ultimately, we're going to need some way to embed "foreign" mutating DOM + JS -- I get that embedding Elm and using ports is an alternative, but then the Elm code doesn't control the placement of the "foreign" widget etc.

The whole "web component" idea and things like Polymer may be helpful here. For instance, here's a wrapper around the Ace editor which would make it easier to work with using Virtual DOM:

https://github.com/Juicy/juicy-ace-editor

The idea here is that you can embed the Ace editor by constructing DOM, and modify its settings by modifying DOM -- which, of course, are things we can do.

Now, I haven't actually tried it -- just googled for something like it (which seemed as though it must exist).

I suppose to complete the circle, it would need to expose events (for instance, so we know that the text has been updated) -- I haven't looked to see whether it does. But that doesn't seem hard, and we know how to listen to events.

But my point is that generally speaking, this seems like the right way to go -- that is: 

• Wrap desirable widget so that it responds to the kind of DOM manipulating we can do, and exposes the kind of events we can listen for.
  

And, as the juicy-ace-editor example illustrates, we're not alone in wanting something along these lines.

[Wade McReynolds]

This blog post about creating an editor app in Aurelia might be of interest to somebody. I'd never heard of Aurelia. Or Polymer, for that matter--the number of these projects reminds me of the joke about how a to-do list app is the most complicated thing you can make with a given JS framework before a newer, fancier one comes out.

[Pete Vilter]

I have been thinking about this problem as well. (more generally, how do we embed javascript components inside of Elm). The VirtualDom library used by elm-html has the concept of a Widget (docs), which is a subtree which updates itself outside of the normal virtual dom diffing algorithm. Maybe elm-html could expose an API which makes use of this. Something like:

type Widget model message = Widget
-- opaque; you construct this in JS

widget: Signal.Address msg -> Widget model msg -> model -> Html

And then in JS:

• define an `init` function which initializes the widget and sets up a listener which sends messages to a given address (so you can be notified of relevant updates e.g. the contents changing)
• define a render function which updates the widget given a new model (i.e. some state you need to track on the Elm side)

In a perfect world someone would reimplement things like Ace in Elm, but I'm not holding my breath; an API like this would be nice.

[Daniele Zannotti]

Uhm... not sure if resurrecting this thread.

Is there a way to date, to integrate codemirror (or any other JS that require/modify dom as children of elm-html elements?

Thanks

Daniele

[Ronen Narkis]

Would love to find out an answer as well, id like to embed Ace in an application

[thisredone]

Sure you can.

Just a have an "out" port, send a textarea or div id, (in javascript) subscribe to that port and initialize codemirror on that element.

If you need some things back from the editor prepare an "in" port and forward it back to the component.

I think that solution is mostly satisfactory.

[Zeljko Nesic]

I am plugging Highcharts into Elm application with two ported Signal.Mailboxes, one for creating, other for updating charts. 

Same thing could be used for other JS stuff u want Elm to control.

Then, when Elm model is updated, I send message to the mailbox, map that into Effect so I can handle effect through rest of the Elm App. 

When I get the CreateChart signal from JS I just init Highcharts it in given DOM Element ID. 

I could hook events into the incomming ports, but I handle events inside of Elm. In your case you could listen to text edit event, and pass given serialized value to elm app to handle it further. 

The hard part about it is that you have do design the interaction carefully, you can't just go wild and hook stuff as you can riff in JS. 

Hope this helps, 

cheers

[Gabriel Grinberg]

Hey guys, 

After reading San Gillis's message here regarding virtual-dom hooks I managed to integrate CodeMirror from inside Elm -  https://github.com/GabiGrin/elm-codemirror. 

For simple usages, until someone is brave enough to properly port to Elm, I think it can work. My example is fairly simple and has a fairly small subset of the configuration exposed, and only a signal hook to get informed about changes inside the code. Extending it to support more event might prove challenging.

[abhinav gupta]

Is this process still applicable with the release of elm 0.18.0? I want to use collaborative features of prosemirror, with changing as little code as possible. I have it implemented inside react.js, without changing much code. As I am learning elm and thinking of re-implementing that app with elm. Should I completely replace my react + redux stack or just replace redux part of it? So that it will be easy to integrate this editor.