I’m struggling with figuring out the best way to incorporate something like CodeMirror, VSCode’s Monaco, or Ace into an Elm app. I’m using the juicy-ace-editor web component to accomplish this at the moment but I’m having some issues with it, and I was wondering if anyone had any example projects where they’d successfully incorporated one of those editors into an Elm app in some way?
3 Likes
Ellie uses CodeMirror.
@luke did a talk (with a transcript) about integrating it:
with an example repository:
3 Likes
I show how to incorporate Ace into an Elm app in my book. I also wrote an introduction to custom elements which might help clarify the mechanics of custom elements for you.
2 Likes
We are using Monaco Editor through ports here at getmimo.com.
A few months back they added a webpack plugin which makes the integration much easier now. Works perfectly fine so far.
2 Likes
We’re using juicy too. A bit clunky perhaps but basically working. What are the issues you have?
I’ve managed to resolve most of the blocking ones, thankfully, but it’s been various miscellaneous things.
Restyling scrollbars and getting them to behave was super weird. They’re mostly behaved now.
One thing I still haven’t figured out (fortunately not a huge blocker at the moment) is getting the syntax-checking web workers to import properly (I get a Cannot resolve dependency 'ace/lib/es5-shim' on a line with require("ace/lib/es5-shim") in the relevant worker file when I try to import it like this: import 'node_modules/ace-builds/src-noconflict/worker-html.js'). I’m using the ace-builds npm package to import ace.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.