monaco-editor

How to edit the Read-Only tooltip of Monaco editor?

How can I edit the tooltip that shows up when trying to edit code in the Monaco editor with read-only set on true?

Picture of the tooltip I am talking about

On another note what is the function of the domReadOnly option in comparison to the readOnly option?

Should the textarea used for input use the DOM readonly attribute. Defaults to false.

I checked the behavior of setting the readOnly and domReadOnly options on true where latter seemingly sets the editor on readOnly without rendering the tooltip. However I couldn't find any info on changing style and content of the tooltip.

Solution

  • Just use domReadOnly: true

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

    lineNumbers: 'off',
    roundedSelection: false,
    scrollBeyondLastLine: false,
    readOnly: true,
    domReadOnly: true,
    theme: 'vs-dark',
    onDidAttemptReadOnlyEdit: () => false
});