4

I want to have a code editor widget, like CodeMirror or Ace, in my Elm webpage. Unfortunately, CodeMirror and Ace don't work with Elm as they modify the DOM (at least that's my understanding why they don't work).

I need something at least better than <textarea> for students to submit code. And for us to display code. Just automatic indenting and syntax highlighting for now.

at.
  • 50,922
  • 104
  • 292
  • 461
  • 1
    Ace supports syntax highlighting for Elm and you can integrate it with an Elm application through ports using techniques I have described [here](http://stackoverflow.com/questions/40544433/how-to-tell-elm-about-external-dom-changes/40580380#40580380). If you are looking for an editor written in pure Elm, there are none. – halfzebra Dec 13 '16 at 21:41
  • Your solution is to only create the containing `div` in Elm and let JavaScript, through ports, do the initialization? I've tried very similar approaches in other editors, but not Ace yet. The problem happens with us when Elm has to manipulate the DOM in the enclosing elements. I'll try Ace and your approach. – at. Dec 13 '16 at 23:51
  • I wonder if [try elm online](http://elm-lang.org/try) is written in elm. Source inspection shows that it uses CodeMirror. – lonelyelk Dec 14 '16 at 12:40
  • @lonelyelk It is: https://github.com/elm-lang/elm-lang.org – jmite Dec 20 '16 at 17:19
  • @jmite What I see is that only controls are done in elm. The editor itself is a CodeMirror textarea created in raw js. – lonelyelk Dec 21 '16 at 10:40

2 Answers2

1

I personally found elm-ace very useful.

It requires some native code, so you will not be able to install it with elm package install. Instead copy the relevant source tree to yours and change your elm-package.json to include "native-modules": true like this.

While using this library, make sure you have manually added ace.js to index.html.

Once you have that setup, you can get a code editor this way:

view : Model -> Html Msg
view model =
    div []
        [ Ace.toHtml
            [ Ace.onSourceChange UpdateSource
            , Ace.value model.source
            , Ace.mode "lua"
            , Ace.theme model.theme
            , Ace.enableBasicAutocompletion True
            , Ace.enableLiveAutocompletion True
            , Ace.enableSnippets True
            , Ace.tabSize 2
            , Ace.useSoftTabs False
            , Ace.extensions [ "language_tools" ]
            ]
            []
        ]
Agnishom Chattopadhyay
  • 1,971
  • 14
  • 32
0

I'm not sure if it's embeddable but I've heard a lot of good things about Ellie. Another consideration may to be the Monaco Editor which I believe was the basis for Microsoft's VSCode product as well as the code editor embedded into some parts of Microsoft Azure.

glennsl
  • 28,186
  • 12
  • 57
  • 75
jpierson
  • 16,435
  • 14
  • 105
  • 149