Angular ngx-monaco-editor

[cnrishiraj]

I am trying to use this plugin for my editor based project using ngx-monaco-editor, i want to grey out the blocked json/code with a color so that user can know they cant edit that particular block, need ideas and help, below is the sample code.

<ngx-monaco-editor class="textarea" [options]="Options" id="editor" (onInit)="EditorInit($event)" [(ngModel)]="Title"></ngx-monaco-editor>

DataEditorInit(monacoInstance: any): void {
    const monacoModel = monacoInstance.getModel();
    const jsonString = this.processedDataTitle;
    const objectToFind = 'segments';
    const offset = jsonString.indexOf(objectToFind);
    if (offset != -1) {
      const position = monacoModel.getPositionAt(offset);
      const startLineNumber = position.lineNumber;
      const segmentJsonString = jsonString.substring(offset);
      const endLineNumber = this.getEndLineNumber(
        startLineNumber,
        segmentJsonString
      );
      const constrainedInstance = constrainedEditor.constrainedEditor(
        window['monaco']
      );
      constrainedInstance.initializeIn(monacoInstance);
      const restrictions = [
        {
          range: [startLineNumber, 1, endLineNumber, 1],
          label: 'segments',
          allowMultiline: false,
        },
      ];
      constrainedInstance.addRestrictionsTo(monacoModel, restrictions);
      monacoModel.toggleHighlightOfEditableAreas();
    }
  }

[Pranomvignesh]

Hi @cnrishiraj

Currently, the Constrained Editor Plugin does not support this feature. However, since you already have the restricted ranges, you can leverage Monaco Editor’s native capabilities to apply a custom class and style the content accordingly to simulate a disabled state.

Here’s an example from the Monaco Editor Playground demonstrating how certain content can be grayed out - Link