Monaco-editor: Removing the tooltip on the read-only editor that says 'cannot edit in read-only editor'

[rakhtar92]

Hi,
I tried to remove the tooltip that says 'cannot edit in a read-only editor using CSS. But, it seems that the CSS although applied is not working.

Given below is the screenshot of the issue that I am facing:

Below given is the editor options that I am setting

value: this.configOriginal, language: 'json', theme: this.theme, scrollBeyondLastLine: false, contextmenu: false, readOnly: true, cursorWidth: 0,

And given below is the CSS that I am trying to use to hide the tooltip:
.monaco-alert { display: none !important; visibility: hidden !important; }

Can anyone please help me solve this? I have been struggling with this since a long time.

Thank you so much.

[kubocob]

It would be nice, if the message tooltip could be customisable. This could be used for explanation of the "custom" reason, why the editor is in read-only state:

• "You need to save the file locally before editing"
• "Text is locked for editing"
• "You are previewing the previous version of the file"

[brijeshb42]

@kubocob Here is something that I tried and should work for your use case.

const editor = /* your editor instance */;
const messageContribution = editor.getContribution('editor.contrib.messageController');
const diposable = editor.onDidAttemptReadOnlyEdit(() => {
  messageContribution.showMessage('Your reason to not allow editing.', editor.getPosition());
});

This code will immediately override the default Cannot edit read-only editor with your custom message.

[brijeshb42]

@rakhtar92 for your requirement, you can do this -

const editor = /* your editor instance */;
const messageContribution = editor.getContribution('editor.contrib.messageController');
const diposable = editor.onDidAttemptReadOnlyEdit(() => {
  messageContribution.closeMessage();
});

This will hide the tootltip immediately. There isn't even a flicker for a moment when closing the tooltip.

[rakhtar92]

@kubocob & @brijeshb42 thanks for the help but it did not work out.
The editorr.getContribution() returns of type IEditorContribution and I checked the d.ts file for monaco-editor there is no such method closeMessage() for IEditorContribution

This did not work out. I am still getting the tooltip.
Thanks. :)

[kubocob]

@rakhtar92 Yeah, typings are not complete also in my project ("monaco-editor": "^0.18.1", - could be fixed in 0.20.0). Therefore I'm ignoring it for now, and retyping toany.

(editor as any).onDidAttemptReadOnlyEdit(() => {
      (messageContribution as any).showMessage('Reason for blocked edit',  editor.getPosition());
});