CODEWITHSUNDEEP
javascriptrequirejsace-editor
samst
samst

Reputation: 556

extend ace editor, how to import custom files

Java Script and I aren't friends.

Ace is a code ide in javascript that one can write custom modes for, add custom snippets to a mode, write custom autocompleters. I know how to write the code that does something what I don't understand is how to integrate this stuff in JavaScript.

There is this define("mode/blabla",["exports","modules,..],(exports,modules) -> {} which looks very similar to how angular load modules but when I just add the scripts in html it does not know the define method. Do I need to build the whole thing to get it to work. As in put the files in the ace folders and build it. I would really rather like to just use bower import angular-ace-ui and then feed it my little mode, highlight, completer files myself. So I can keep my own stuff easily accessible, editable and separate from full ace which I have in bower-components/ace-builds/ right now.

Can somebody explain to me or point me to a good learning material that teaches me how dependency, imports, integration of functions work in java script projects like ace. I understand Java but java script is just weird and difficult to traverse code to see where things come from and go.

I tried this but that does not work because it is outside the build process and I don't know where to look for the hooks.

< script src = "../src-noconflict/ace.js" > < /script>
<!-- load ace language tools -->
<script src="../src - noconflict / ext - language_tools.js "></script>
<script src=".. / .. / .. / app / scripts / editor / mode / myql.js "></script>
<script src=".. / .. / .. / app / scripts / editor / snippets / myql.js "></script>
<script>
    // trigger extension
    var langtools = ace.require("
ace / ext / language_tools ");
    var editor = ace.edit("
editor ");
    editor.session.setMode("
ace / mode / myql ");
    editor.setTheme("
ace / theme / chrome ");

    // enable autocompletion and snippets
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    });
</script>

I would like to get something like this to work 'autocomplete/completer' 'ace/mode/myql' being modules I would like to integrate. I got the down and dirty code but not the way to make it accessible. The files are in the form like modes are here see sql.js and sql_highlight_rules.js https://github.com/ajaxorg/ace/tree/master/lib/ace/mode

 <div ui-ace="{
            useWrapMode : true,
            showGutter: false,
            theme:'chrome',
            mode: 'mysql',
            require: ['ace/ext/language_tools','autocomplete/mycompleter','ace/mode/myql'],
            advanced: {
                enableSnippets: true,
                enableBasicAutocompletion: true,
                enableLiveAutocompletion: true
            }
          }"></div>

Upvotes: 0

Views: 2227

Answers (1)

samst
samst

Reputation: 556

I think I found the right way to go about things. forget angular-ace-ui it only complicates things.

bower install ace

place custom_mode.js, custom_highlight_rules.js, custom_snippets.js, customer_snippets.txt, custom_completer.js somewhere in your source folder. set them up exactly like the similar files in

bower_components/ace/lib.ace/
    ./mode
    ./snippets
    ./autocomplete

set up a grunt or gulp or whatever build task to copy the files form your working directory to the bower_components folders mentioned above. then run the ace build node ./Makefile.dryice.js

now import the working files via bower overrides that you need

"overrides": {
    "ace": {
      "main": [
        "build/src-min-noconflict/ace.js",
        "build/src-min-noconflict/ext-language_tools.js",
        "build/src-min-noconflict/theme-monokai.js",
        "build/src-min-noconflict/custom_mode.js",
        "build/src-min-noconflict/snippets/custom_mode.js"
      ]
    }

usually the the ace build should be only required when you change things and does not need to slow down the default app build. I have not tried it yet but in theory I see no reason why it should not work. I think that is the easiest way to set things up to work comfortably with the custom editions while leaving the external ace files untouched.

I toyed with the idea to use the ace-ui angular controller to set everything up in onload but mode need to be referenced by the mode name. It works for the completer because that just requires calling the langTools.addCompleter(newcompleter) method and passing in an object with the getCompletions function parameter. The mode however needs to be somehow registered as in defined and I don't know how to do that outside the ace build pipeline. Ergo my solution looks the way it does.

Upvotes: 0

Related Questions