microsoft / monaco-editor

A browser based code editor
https://microsoft.github.io/monaco-editor/
MIT License
40.05k stars 3.57k forks source link

bracketPairColorization: { enabled: false } does not work #3829

Open hediet opened 1 year ago

hediet commented 1 year ago

bracketPairColorization.enabled does not work:

monaco.editor.create(document.getElementById('container'), {
    value: '(((()))){{{{}}}}[[[[]]]]',
    language: 'csharp',
    bracketPairColorization: {
        enabled: false
    }
});

https://microsoft.github.io/monaco-editor/playground.html?source=v0.36.1#XQAAAAL9AAAAAAAAAABBqQkHQ5NjdMjwa-jY7SIQ9S7DNlzs5W-mwj0fe1ZCDRFc9ws9XQE0SJE1jc2VKxhaLFIw9vEWSxW3yscoyOBTfVOOo4AuRGzYGy8DBvknaaXft9rWb1w8nFlXgKvv6gQ-8WWRoaJxf4YK1BpWeTgWlwgQ6ptrf92RgJkcqUajbS4XqzFrCLmx5_4QNJ_DBYNOj-yKrNBpQncSILkuwvv_ShU7Ckbk0xmZkfvpI28LzEsC634vuMIi_K1lRocBCleP79lIPgCzn_7CNEA

image


However, this works:

monaco.editor.create(document.getElementById('container'), {
    value: '(((()))){{{{}}}}[[[[]]]]',
    language: 'csharp',
    "bracketPairColorization.enabled": false
});

https://microsoft.github.io/monaco-editor/playground.html?source=v0.36.1#XQAAAALuAAAAAAAAAABBqQkHQ5NjdMjwa-jY7SIQ9S7DNlzs5W-mwj0fe1ZCDRFc9ws9XQE0SJE1jc2VKxhaLFIw9vEWSxW3yscoNMFBs56Rs0T-CmDQe0mMu0knaaXft9rWb1w8nFlXgKvv6gQ-8WWRoaJxf4YK1BpWeTgWlwgQ6ptrf92RgJkcqUajbS4XqzFrCLmx5_4QNJ_DBYNOj-yKq_35RqKKWmZ21JFxPibI-uuQXM3OavhbnFuHNNIcHLLBCuaVZ8aVbYP12v6R___0xTAA

jonathanawesome commented 1 year ago

Just ran into this with 0.36.1.

Additionally, bracketPairColorization seems to be enabled by default...which is opposite what the docs state.

KirAmp commented 1 year ago

Still reproduce at 0.38.0 and 0.39.0.

Flag bracketPairColorization.enabled is broken.

artola commented 1 year ago

Still reproduce at 0.40.0

pizberg commented 1 year ago

Still reproduce at 0.40.1

artola commented 1 year ago

Even latest 0.41.0 published on August 3 fails.

venusvavadiya commented 11 months ago

Still reproduce at 0.44.0

convertcompany commented 7 months ago

Its still reproducible, but i think i've found a quick fix, you could use :

{
      "bracketPairColorization.enabled": false,
}

in the editor constructor options. Seems to work as expected then

mattmundell commented 4 months ago

This is happening because isEditorConfigurationKey in editorConfigurationSchema.ts is only catering for "single level" options.

Here's how I've patched the JS to fix:

--- vs/editor/standalone/browser/standaloneServices.js  2024-05-18 04:14:29.185996233 +0200
+++ vs/editor/standalone/browser/standaloneServices.js  2024-05-18 04:20:55.381960889 +0200
@@ -516,9 +521,22 @@
     }
     const toUpdate = [];
     Object.keys(source).forEach((key) => {
-        if (isEditorConfigurationKey(key)) {
+        let type
+
+        type = isEditorConfigurationKey(key);
+        if (type == 1) {
+            // This is a single schema contribution
             toUpdate.push([`editor.${key}`, source[key]]);
         }
+        else if (type == 2) {
+            let subsource;
+            subsource = source[key];
+            for (const subkey in subsource) {
+                if (isEditorConfigurationKey(`${key}.${subkey}`))
+                    toUpdate.push([`editor.${key}.${subkey}`, subsource[subkey]]);
+            }
+        }
+
         if (isDiffEditor && isDiffEditorConfigurationKey(key)) {
             toUpdate.push([`diffEditor.${key}`, source[key]]);
         }

--- vs/editor/common/config/editorConfigurationSchema.js    2024-05-18 04:14:29.245996953 +0200
+++ vs/editor/common/config/editorConfigurationSchema.js    2024-05-18 04:17:49.440197608 +0200
@@ -250,6 +250,7 @@
 function isConfigurationPropertySchema(x) {
     return (typeof x.type !== 'undefined' || typeof x.anyOf !== 'undefined');
 }
+let multiProperties = {}
 // Add properties from the Editor Option Registry
 for (const editorOption of editorOptionsRegistry) {
     const schema = editorOption.schema;
@@ -259,6 +260,7 @@
             editorConfiguration.properties[`editor.${editorOption.name}`] = schema;
         }
         else {
+            multiProperties[`editor.${editorOption.name}`] = 1
             for (const key in schema) {
                 if (Object.hasOwnProperty.call(schema, key)) {
                     editorConfiguration.properties[key] = schema[key];
@@ -272,18 +274,21 @@
     if (cachedEditorConfigurationKeys === null) {
         cachedEditorConfigurationKeys = Object.create(null);
         Object.keys(editorConfiguration.properties).forEach((prop) => {
-            cachedEditorConfigurationKeys[prop] = true;
+            cachedEditorConfigurationKeys[prop] = 1;
+        });
+        Object.keys(multiProperties).forEach((prop) => {
+            cachedEditorConfigurationKeys[prop] = 2;
         });
     }
     return cachedEditorConfigurationKeys;
 }
 export function isEditorConfigurationKey(key) {
     const editorConfigurationKeys = getEditorConfigurationKeys();
-    return (editorConfigurationKeys[`editor.${key}`] || false);
+    return (editorConfigurationKeys[`editor.${key}`] || 0);
 }
 export function isDiffEditorConfigurationKey(key) {
     const editorConfigurationKeys = getEditorConfigurationKeys();
-    return (editorConfigurationKeys[`diffEditor.${key}`] || false);
+    return (editorConfigurationKeys[`diffEditor.${key}`] || 0);
 }
 const configurationRegistry = Registry.as(Extensions.Configuration);
 configurationRegistry.registerConfiguration(editorConfiguration);

I'm sure there's a better way, but let me know if you'd like a PR.

To be clear, here's how I create the editor:

  opts = { ...
           bracketPairColorization: { enabled: false },
           ... }

  ed = Mon.editor.create(edW, opts)