Difficult to add modes

[wardy484]

I have now successfully added a new "mode".

However it proved very difficult to setup and debug. It would be great if it was possible to add a mode without having to fork the package.

[thlorenz]

I'm not sure if that isn't an issue for the ace editor repo from which this one is derived.

[Seraf]

The problem is about having to fork the library to include the language file in the modes. Else, ACE will try to load it through http, but I personally wanted to be able to inject it through a require/import or something like that without exposing it through a http request

[bgrayburn]

I'm struggling with this too, here's my next try, copying into the node_modules/brace/modes folder at build/run time. That way the language file lives in your repo. In so many ways this is gross, but looks like it really is a limitation of ace.

[thlorenz]

OK so from that info seems like an ACE issue. Please file there and we can close it here ...

[JackuB]

You can definitely add Modes without forking the package or doing something with node_modules.

The ace.define syntax is available even if you are using Webpack. Your custom Mode in a module should look like this: https://gist.github.com/JackuB/3d589bd64dc96c1b18486baaaf58d910 Just be sure to also require() it.

Shameless plug: wrote a few tips for writing custom Modes after struggling with it myself

[komali2]

@JackuB if require() it, webpack can't find it, and complains.

[JackuB]

@komali2 got a code sample?

[komali2]

Yup one sec

[komali2]

https://gist.github.com/komali2/4bb2ac77e3456cc9bb212d07f613094f -> Adds behavior to our custom mode, which is:

https://gist.github.com/komali2/b046a23497afbb7aec869fcd1c576f43 the custom highlight rules, etc. (our mode)

https://gist.github.com/komali2/d20e41cf1dc01afb404381f3a106b86e The editor itself (kinda)

Stripped out a ton of the code to hopefully make it easier to read, let me know if I butchered understanding that way.

[komali2]

What we've tried so far is

1. Directly copying in the mode code from ace into our lib folder and requiring, which caused a bunch of "cannot read property 'prototype' of undefined" errors because we did it stupidly.

2. Nothing, which causes requests to fire off to unknown (to our app) urls

3. The above code, which causes "acequire is not defined" errors.

Apologies for the messy code, we're basically pulling levers at this point to see if the transition to webpack is even worth it.

EDIT: Forgot to mention 4., which is simply changing require ('ace/mode/whatever') to require('brace/mode/whatever') which obviously didn't work because those aren't included with brace lol. Things like cstyle

[JackuB]

@komali2 So the define you are using is a requirejs? I don't think Brace creates global define and you should use ace.define - ace being brace Eg. like here: https://gist.github.com/JackuB/3d589bd64dc96c1b18486baaaf58d910#file-custom-mode-base-js-L2

afaik you have to ace.define a mode with a string identifier (like ace/mode/custom) to your brace instance, then you can acerequire/set it as a Mode for your editor.

[komali2]

@JackuB unsure, we swapped from brace to ace, and following the steps in the linked issue, got it working