Insert content to cursor position?

[susonwaiba]

https://stackoverflow.com/questions/41642649/how-do-i-insert-text-into-a-monaco-editor could anyone help me to gain this.?

[atu1kr]

@susonwaiba you can use executeEdits API as suggested in the answer. In case you want to use the same API or some other API with angular 2 then i can expose editor instance that will be available to parent component.

[susonwaiba]

var editor = monaco.editor.create(document.getElementById("container"), {
    value: "// First line\nfunction hello() {\n\talert('Hello world!');\n}\n// Last line",
    language: "javascript",

    lineNumbers: false,
    roundedSelection: false,
    scrollBeyondLastLine: false,
    readOnly: false,
    theme: "vs-dark",
});

// below code will insert text "FOO"
var line = editor.getPosition();
var range = new monaco.Range(line.lineNumber, 1, line.lineNumber, 1);
var id = { major: 1, minor: 1 };
var text = "FOO";
var op = {identifier: id, range: range, text: text, forceMoveMarkers: true};
editor.executeEdits("my-source", [op]);

In above code variable editor is used for api. But i don't see a variable to expose api in doc.? There is only editor options. and I tried using editor options variable but it shows error!

[atu1kr]

Yes there is no editor variable exposed. if you need one i will try to do that by this weekend. If you have some other solution please raise a pull request i will merge that.

[susonwaiba]

I have send pull request. Below will solve my request.

Insert Content at Cursor position

import MonacoEditor and also supply at providers (eg: on app.module.ts):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { MonacoEditorModule, MonacoEditor } from 'ngx-monaco-editor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MonacoEditorModule
  ],
  providers: [MonacoEditor],
  bootstrap: [AppComponent]
})
export class AppModule {
}

import MonacoEditor and define at constructor (eg: on app.component.ts):

import { Component } from '@angular/core';
import { MonacoEditor } from 'ngx-monaco-editor';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  editorOptions = {theme: 'vs-dark', language: 'javascript'};
  code: string= 'function x() {\nconsole.log("Hello world!");\n}';

  onInsertContentClick() {
    this.monacoEditor.insert('<p>This is the default content</p>');
  }

  constructor(
    private monacoEditor: MonacoEditor
  ) { }
}

[atu1kr]

I have exposed editor instance. you can check in latest documentation for using that.

[ubaid1122]

@atu1kr how to use this editor instance in a typescript file. for example, I want editor.trigger when the user clicks on some button.

[faisalmukhtar98]

I am developing a new feature where I want to paste some text at the current cursor position in the editor. I am using ngx-monaco-editor v8.1.1 in my Angular v13.3 project. Can someone help ?

[ubaid1122]

@faisalmukhtar98 you can use this line // place the suggestion where cursor is pointing this.editorInstance.trigger('keyboard', 'type', { text: suggestionText });

[faisalmukhtar98]

@ubaid1122 I don't want a suggestion as in tooltip that pops up. My use case is -> I have a chat section on my left container and my editor on my right container. I am trying to paste the content from my chat section to the current cursor position in my editor by click an icon in my chat area. I am using the global namespace "monaco" so I get access to the editor instance. I tried your solution this.editorInstance.trigger('keyboard', 'type', { text: suggestionText }); but I get an error "Property 'trigger' does not exist on type 'typeof editor'." I also tried with monaco.editor.onDidCreateEditor((editor) => { console.log("Column Position = ",editor.getPosition().column); console.log("Row Position = ",editor.getPosition().lineNumber); }); but no luck.

[ubaid1122]

suggestionText is to be replace with actual text you want in editor. and initialize this.editorInstance like this public onMonacoEditorInit(event) { this.editorInstance = event; }

and call this method from HTML <ngx-monaco-editor [options]="editorOptions" (onInit)="onMonacoEditorInit($event)">

[faisalmukhtar98]

thanks @ubaid1122 your solution worked.

Cheers!