New feature request

[zomarg]

I would like to have the possibility of including custom mode, language and worker. One use case for this is e.g integration with ANTLR which is a common use case.

I will probably start to work on this soon but any help / idea is welcome.

[dfreeman]

You can already set a custom mode today by doing something like:

// app/controllers/some-route.js

import Ember from 'ember';
import { TextMode } from 'ember-ace';

class MyCustomMode extends TextMode {
  // ...
}

export default Ember.Controller.extend({
  init() {
    this._super(...arguments);
    this.set('mode', new MyCustomMode(/* ... */));
  }
});

{{! app/templates/some-route.hbs }}
{{ember-ace value=... update=... mode=mode}}

Ace has some piecemeal documentation that you can look at for writing custom modes, but it's kind of all over the place, and it doesn't account for any kind of modern syntax.

[zomarg]

@dfreeman great then i will try your solution this week and see if it is fitting my requirements. Thanks a lot👍 .

[bmaehr]

I tried to implement an own document type, but it is not working correctly (no highlighting):

import { TextMode, TextHighlightRules, Range } from 'ember-ace';
import Ember from 'ember';

class EdiHighlightRules extends TextHighlightRules {
    init() {
        let header = (
            'ISA'
        );

        let segment = (
            'ISA|IEA|'+
            'GS|GE|'+
            'ST|SE|'+
            'BAK|'+
            'N1|N2|N3|N4|'+
            'PO1|CTP|ACK|SCH|CTT'
        );

        let buildinConstants = (
            ''
        );

        let langClasses = (
            ''
        );

        let keywords = (
            'ISA|IEA'
        );

        let keywordMapper = this.createKeywordMapper({
            'variable.language': 'this',
            'keyword': keywords,
            'entity.name.segment': segment,
            'entity.name.header': header,
            'constant.language': buildinConstants,
            'support.function': langClasses,
        }, 'identifier');

        // regexp must not have capturing parentheses. Use (?:) instead.
        // regexps are ordered -> the first match is used

        this.$rules = {
            'start' : [
                {
                    token : 'punctuation.operator',
                    regex : '\\+.\\+',
                }, {
                    token : 'constant.language.boolean',
                    regex : '(?:true|false)\\b',
                }, {
                    token : keywordMapper,
                    regex : '[a-zA-Z_$][a-zA-Z0-9_$]*\\b',
                }, {
                    token : 'keyword.operator',
                    regex : '\\+',
                }, {
                    token : 'punctuation.operator',
                    regex : "\\:|'",
                },{
                    token : 'identifier',
                    regex : '\\:D\\:',
                },
            ],
        };

        this.normalizeRules();

        this.name = 'EdiHighlightRules';

        this.metaData = {
                fileTypes: [ '850', '855', '856', '810' ],
                keyEquivalent: '^~E',
                name: 'Edi',
                scopeName: 'source.edi',
        };
    }
}

class EdiMode extends TextMode {
    constructor() {
        super();
        this.$id = 'ace/mode/edi';
        let rules = new EdiHighlightRules();
        rules.init();
        this.$highlightRules = rules;
        this.HighlightRules = function EdiHighlightRules() {
            this.$rules = rules.getRules();
        };
        this.HighlightRules.metaData = rules.metaData;
    }
}

...

    init: function(...args) {
        this._super(args);
        let mode = new EdiMode();
        this.set('mode', mode);
    },

I'm sure it is just a small mistake, but I have no idea why it is not working.

[qpowell]

I tried to implement an own document type, but it is not working correctly (no highlighting):

import { TextMode, TextHighlightRules, Range } from 'ember-ace';
import Ember from 'ember';

class EdiHighlightRules extends TextHighlightRules {
    init() {
        let header = (
            'ISA'
        );

        let segment = (
            'ISA|IEA|'+
            'GS|GE|'+
            'ST|SE|'+
            'BAK|'+
            'N1|N2|N3|N4|'+
            'PO1|CTP|ACK|SCH|CTT'
        );

        let buildinConstants = (
            ''
        );

        let langClasses = (
            ''
        );

        let keywords = (
            'ISA|IEA'
        );

        let keywordMapper = this.createKeywordMapper({
            'variable.language': 'this',
            'keyword': keywords,
            'entity.name.segment': segment,
            'entity.name.header': header,
            'constant.language': buildinConstants,
            'support.function': langClasses,
        }, 'identifier');

        // regexp must not have capturing parentheses. Use (?:) instead.
        // regexps are ordered -> the first match is used

        this.$rules = {
            'start' : [
                {
                    token : 'punctuation.operator',
                    regex : '\\+.\\+',
                }, {
                    token : 'constant.language.boolean',
                    regex : '(?:true|false)\\b',
                }, {
                    token : keywordMapper,
                    regex : '[a-zA-Z_$][a-zA-Z0-9_$]*\\b',
                }, {
                    token : 'keyword.operator',
                    regex : '\\+',
                }, {
                    token : 'punctuation.operator',
                    regex : "\\:|'",
                },{
                    token : 'identifier',
                    regex : '\\:D\\:',
                },
            ],
        };

        this.normalizeRules();

        this.name = 'EdiHighlightRules';

        this.metaData = {
                fileTypes: [ '850', '855', '856', '810' ],
                keyEquivalent: '^~E',
                name: 'Edi',
                scopeName: 'source.edi',
        };
    }
}

class EdiMode extends TextMode {
    constructor() {
        super();
        this.$id = 'ace/mode/edi';
        let rules = new EdiHighlightRules();
        rules.init();
        this.$highlightRules = rules;
        this.HighlightRules = function EdiHighlightRules() {
            this.$rules = rules.getRules();
        };
        this.HighlightRules.metaData = rules.metaData;
    }
}

...

    init: function(...args) {
        this._super(args);
        let mode = new EdiMode();
        this.set('mode', mode);
    },

I'm sure it is just a small mistake, but I have no idea why it is not working.

Your EdiHighlightRules class is using init instead of constructor

[bmaehr]

In fact I was able to get it working some weeks ago with the support of an external java script expert. I post my working version as reference here - perhaps it helps others:

import { computed } from '@ember/object';
import Component from '@ember/component';
import { inject } from '@ember/service';
// import ace from 'ember-ace';
import {Range, TextMode, TextHighlightRules} from 'ember-ace';

// To extend EdiFactMode use this: const EdiFactMode = ace.require("ace/mode/edifact").Mode;
// To extend EdiFactHighlightRules use this: const EdiFactHighlightRules = ace.require("ace/mode/edifact_highlight_rules").EdifactHighlightRules;

class EdiHighlightRules extends TextHighlightRules {
    constructor() {
        super(...arguments);
        this.init();
    }

    init() {
        const segment = (
            'BAK|'+
            'N1|N2|N3|N4|'+
            'PO1|CTP|ACK|SCH|CTT'
        );

        const keywords = (
            ''
        );

        const keywordMapper = this.createKeywordMapper({
            'variable.language': 'this',
            'identifier.keyword': keywords,
            'identifier.keyword.interchange.header': 'ISA',
            'identifier.keyword.interchange.footer': 'IEA',
            'identifier.keyword.transaction.header': 'GS',
            'identifier.keyword.transaction.footer': 'GE',
            'identifier.keyword.segment.header': 'ST',
            'identifier.keyword.segment.footer': 'SE',
            'identifier.keyword.segment.begin': segment,
        }, 'identifier');

        // regexp must not have capturing parentheses. Use (?:) instead.
        // regexps are ordered -> the first match is used

        this.$rules = {
            'start' : [
                {
                    token : 'punctuation.operator',
                    regex : '\\+.\\+',
                }, {
                    token : 'constant.language.boolean',
                    regex : '(?:true|false)\\b',
                }, {
                    token : keywordMapper,
                    regex : '[a-zA-Z_$][a-zA-Z0-9_$]*\\b',
                }, {
                    token : 'keyword.operator',
                    regex : '\\+',
                }, {
                    token : 'punctuation.operator',
                    regex : "\\:|'",
                },{
                    token : 'identifier',
                    regex : '\\:D\\:',
                },
            ],
        };

        //this.normalizeRules();

        this.name = 'EdiHighlightRules';
/*
        this.metaData = {
                fileTypes: [ '850', '855', '856', '810' ],
                keyEquivalent: '^~E',
                name: 'Edi',
                scopeName: 'source.edi',
        };
        */
    }
}

class EdiMode extends TextMode {
    constructor() {
        super(...arguments);
        this.HighlightRules = EdiHighlightRules;
    }
}


...


    init: function(...args) {
        this._super(args);
        const mode = new EdiMode();
        this.set('mode', mode);
        this.set('theme', 'ace/theme/crimson_editor');
    },