CODEWITHSUNDEEP
javascriptangulartypescriptngx-monaco-editor
s d
s d

Reputation: 203

How to configure monacoeditor custom theme in angular project?

Thanks for the support,based on docs provided by monaco-editor, I am able to acheive my 1st milestone i.e. adding hyperlink to text inside monaco-editor using defineTheme(). Here is the link to what I have till now

custome theme to show paths as clickable link

However, When I try to use this code in my angular project and I am unable to see the style on link. Can someone please assist to integrate this code in angular?

https://stackblitz.com/edit/ngx-monaco-editor-example-t5sbtn?file=app/app.module.ts

Upvotes: 0

Views: 415

Answers (1)

Wandrille
Wandrille

Reputation: 6821

It would be possible but complex.

First, for the design, you need to create a custom template. You can be inspired by the example Token and Colors from the Monaco editor playground. Keep in mind, that the mouse will not have easily the pointer cursor.

Then, you need to listen for the click on your editor

For the .html:

<ngx-monaco-editor ... (onInit)="onInit($event)"></ngx-monaco-editor>

and in your .ts

onInit(editor:any):void {
  editor.onMouseUp((event:any)=>{
      const {endColumn,endLineNumber,startColumn,startLineNumber} = event.target.range;
      const lines = editor.getModel().getLinesContent();

      // Check if the click is on the path (with a regex for example) 
      // and do what you want with that
  })
}

Upvotes: 1

Related Questions