skip to Main Content

I’m trying to highlight a couple of keywords that are present in this.$rules . However I’m not able to get the final output . Can you please tell me what I’m missing here?

This is what I have tried inside an Angular component

Stackblitz

import {
 AfterViewInit,
 Component,
 ElementRef,
 OnInit,
 ViewChild,
} from '@angular/core';
import * as ace from 'ace-builds';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, AfterViewInit {
 @ViewChild('editor') private editor: ElementRef;

 constructor() {}

 ngAfterViewInit() {
   ace.config.set('fontSize', '14px');
   const editor = ace.edit(this.editor.nativeElement);
   const oop = ace.require('ace/lib/oop');
   const TextMode = ace.require('ace/mode/text').Mode;
   const TextHighlightRules = ace.require(
     'ace/mode/text_highlight_rules'
   ).TextHighlightRules;

   const customHighlightRules = function () {
     this.$rules = {
       start: [
         {
           regex: /b(keyword1|keyword2)b/,
           token: 'keyword',
         },
       ],
     };
   };

   oop.inherits(customHighlightRules, TextHighlightRules);

   const Mode = function () {
     this.HighlightRules = customHighlightRules;
   };

   oop.inherits(Mode, TextMode);

   (function () {
     this.$id = 'ace/mode/custom';
   }.call(Mode.prototype));

   // Set here
   editor.getSession().setMode(new (ace.require('ace/mode/custom').Mode)());
   
   editor.setValue('keyword1 some text keyword2', 1);
 }

 ngOnInit() {}
}

2

Answers


  1. Try this one, and make sure that keyword are listed

    import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
    
    declare var ace: any; // Import ace library (make sure it's installed and available)
    
    @Component({
      selector: 'app-ace-builds-editor',
      templateUrl: './ace-builds-editor.component.html',
      styleUrls: ['./ace-builds-editor.component.css']
    })
    export class AceBuildsEditorComponent implements OnInit, AfterViewInit {
      @ViewChild("editor") private editor: ElementRef<HTMLElement>;
    
      ngAfterViewInit(): void {
        ace.config.set("fontSize", "14px");
    
        // custom highlighting rules
        const customHighlightRules = function () {
          this.$rules = {
            start: [
              {
                regex: /b(sometext|othertext)b/,
                token: 'keyword',
              },
            ],
          };
        };
        const oop = ace.require('ace/lib/oop');
        const TextHighlightRules = ace.require('ace/mode/text_highlight_rules').TextHighlightRules;
        oop.inherits(customHighlightRules, TextHighlightRules);
    
        const Mode = function () {
          this.HighlightRules = customHighlightRules;
        };
        oop.inherits(Mode, ace.require('ace/mode/text').Mode);
    
        ace.define('ace/mode/custom', [], function (require, exports, module) {
          exports.Mode = Mode;
        });
    
        const editor = ace.edit(this.editor.nativeElement);
        editor.getSession().setMode('ace/mode/custom');
      }
    }
    
    Login or Signup to reply.
  2. When setting mode simply do

    editor.session.setMode(new Mode());
    

    instead of .setMode(new (ace.require('ace/mode/custom').Mode)()).

    ace.require is not needed if you did not define the module with ace.define, and you have the object at hand anyway.

    https://stackblitz.com/edit/base-angular-12-app-krfkzr?file=src%2Fapp%2Fapp.component.ts

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search