Different Monaco editor components sharing same schema

Question

Describe the bug

I have 2 separate components with Monaco editor react of value JSON. One of the editor has a schema validation defined, problem is another instance also validating with same schema. That instance should not have any validation/schema.

I have created a demo on stackblitz here

// code showing schema validation
  useEffect(() => {
    if (schema) {
      const editorSchema = createEditorSchema(schema);
      monaco?.languages?.json?.jsonDefaults?.setDiagnosticsOptions({
        validate: true,
        schemas: [editorSchema],
      });
    }
  }, [schema]);

To Reproduce

Steps to reproduce the behavior:

1. Check editor 1 and hover to see the schema error
2. Check editor 2 which has the schema of editor 1. Problem is editor 2 is validating with its own value.

Expected behavior

Editor 2 which is schema field should not be validated with a schema. It should only show value. Only editor 1 should be validated

Demo Link

Sample demo

Screenshots The editor 2 should not have any validations on schema, find SS below

Desktop (please complete the following information):

• OS: [e.g. iOS] - mac
• Browser [e.g. chrome, safari] - any

Additional context I have a feature requirement where I render 2 editor instances. Instances one has value of JSON, instance 2 has JSON schema for first instance.

Answer 1

The Monaco editor is not designed to appear multiple times on a single web page with different settings, like themes, providers or here, the validation scheme. Commands like:

      monaco?.languages?.json?.jsonDefaults?.setDiagnosticsOptions({
        validate: true,
        schemas: [editorSchema],
      });

set values for all instances of the editor control. The only control you have is to place only one editor on a web page and switch pages between different editors, where you can also change the global settings while switching.

Answer 2

I don't know your specific use-case, but we had the same problem and solved it by generating a unique id for each editor (simply by using useId) and used it as a "fake filename" to differentiate between the editors:

const editorId = useId()

const onMount: OnMount = (editorInstance, monaco) => {
  monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
    validate: true,
    schemas: [{
      uri: 'http://json-schema.org/draft-04/schema#',
      fileMatch: [`${id}.json`],
      schema: editorSchema
    }]
  })
}

return <Editor
  language="json"
  path={`${editorId}.json`}
  onMount={onMount}
/>