Monaco-editor: Markers are not shown in readonly models

[ikarienator]

monaco-editor npm version: 0.7.0
Browser: All
OS: All

monaco.editor.setModelMarkers does not have an effect if the module is readonly.

[alexdima]

This is by design, because seeing errors on read only editors is not helpful to end users (i.e. there is no way to "fix" them since the editor is read only). You could try to workaround this using model.setEditableRange(new monaco.Range(1,1,1,1))

[ikarienator]

You have not considered the case where the source code is generated. The user would want to check the generated code with error markers shown, which, I suspect, could be one of the main use cases of a readonly model in the first place, if not the only one.

If the user would just want to have something shown to them, they can use colorize.

[ikarienator]

Also, the workaround doesn't work because:

1. I can still type in to the editor if the caret is at the beginning of the file, and
2. arrow keys will not work to navigate.

I even tried to set the editable region to new monaco.Range(1, 1, 0, 0) and that does not work either.

[olafurpg]

Being able to display markers (info/warning) in read-only mode would be helpful. Our application is a read-only code browser for Scala and it would be really nice to be able display markers such as compiler warnings or info messages reported by libraries (for example, http://getquill.io/ reports compile-time generated SQL queries).

[mysticatea]

I want this feature in https://mysticatea.github.io/vue-eslint-demo/

My use case is:

• The right pane is read-only and shows auto-fixed code.
• But some errors remain on the auto-fixed code, so I want to show the remaining errors.

[tsiq-bertram]

Are there any updates on this issue or useable workarounds?
Sharing similar concerns, we would like to display syntax errors to the users in a read-only mode

[pimterry]

I need this feature too! I'm using Monaco as a read-only view for JSON content. The user can't edit the content in this editor instance, but they're still the source of the content, and seeing validation errors is still very important. This seems like an unnecessary and fairly arbitrary restriction to me.

[pimterry]

A little background on what it'd take to change this:

• codeEditorWidget.ts#L1022 - readOnly is used as the value of filterOutValidation, which hides error tooltips.
• viewModelDecorations.ts#L105 - readOnly is used as the value of filterOutValidation, which hides squiggly validation warning underlines.

Testing locally, replacing the readOnly option in both of those cases with false seems to work nicely for me, and I immediately see the behaviour I'm expecting. I'm sure there'll be other places that need changing too on closer inspection, but overall it looks like it should be very easy to remove this restriction.

My one concern is that VS Code (and other users) likely depend on this behaviour as their way of hiding validation errors in cases where users really don't want to see them. We could solve that with a new Monaco option (readOnlyValidation: true, or perhaps forceValidation) to force validation on read only content, so that this new behaviour is opt-in.

What do you think?

(In the meantime, I'd love other suggestions for workarounds! This is a major problem for my application, as showing nice validation errors is one of the main reasons I'm using Monaco)

[tsiq-bertram]

Current workaround that I'm using is to reset the model in custom read-only mode. Below example is specific to ReactJS, but would work similarly in any other framework. Drawback is that the cursor still moves when typing (can probably be prevented by storing and resetting cursor position as well), and you'll have to provide a custom "read-only" message elsewhere in your application.

const editor = monaco.editor.create(...)
const model = editor.getModel()
model.onDidChangeContent(() => {
      if (this.props.readOnly && model.getValue() !== this.props.value) {
        model.setValue(this.props.value)
      }
      this.props.onChange(model.getValue(), model)
    })

[pimterry]

Nice, thanks @tsiq-bertram! I've tested that out but, as you mentioned, it does have some awkward side effects. I think I've found a side-effect free workaround:

function enableMarkers(model) {
    if (!model) return;

    [
        ['getLineDecorations', 2],
        ['getLinesDecorations', 3],
        ['getDecorationsInRange', 2],
        ['getOverviewRulerDecorations', 1],
        ['getAllDecorations', 1],
    ].forEach(([functionName, maxArgs]) => {
        const originalMethod = model[functionName];
        model[functionName] = function() {
            return originalMethod.apply(this, Array.from(arguments).slice(0, maxArgs));
        };
    });
}

That code takes every method on the model for the line decorations which takes a filterOutValidation parameter, and wraps it in a function that drops that parameter (i.e. never disables validation).

To make it work, you just need to call this function on the model any time it changes. I'm doing that with:

enableMarkers(editor.getModel());
editor.onDidChangeModel(() => enableMarkers(editor.getModel()));

Seems to work perfectly. All other readonly behaviour works as before, but now decorations appear as well.

This is decidedly fragile in the face of future changes to the model of course, but at a glance I wouldn't expect these methods to be changing drastically any time soon, so that's acceptable for my case.

[ikarienator]

The workaround we got is this:

  onDidChangeContentGuard = 0;
  ...
  onDidChangeContent = e => {
    let model = this._editor.getModel();
    if (this.props.readOnly) {
      if (this.onDidChangeContentGuard === 0) {
        this.onDidChangeContentGuard++;
        try {
          const viewStates = this._editor.saveViewState();
          model.setValue(this.props.binding.value);
          this._editor.restoreViewState(viewStates);
        } finally {
          this.onDidChangeContentGuard--;
        }
      }
      return;
    }
    ...
  };

I think this is less intrusive.

[alexdima]

https://github.com/microsoft/vscode/commit/c7cc30ca5aa4f64c1f7d85343594a7801029e8d4 adds a new editor option, renderValidationDecorations that can be set to on and in this case, the editor will render squiggles even if it is read only.

[alexdima]

This will be verified via https://github.com/microsoft/vscode/issues/89057