不同的 Monaco 编辑器组件共享相同的架构

Question

描述错误

我有 2 个独立的组件，其中 Monaco 编辑器 React 具有

JSON

的价值。其中一个编辑器定义了模式验证，问题是另一个实例也使用相同的模式进行验证。该实例不应有任何验证/架构。

我在 stackblitz 上创建了一个演示

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

重现

重现该行为的步骤：

1. 检查编辑器 1 并将鼠标悬停以查看架构错误
2. 检查编辑器 2，它具有编辑器 1 的架构。问题是编辑器 2 正在使用其自己的值进行验证。

预期行为

编辑器 2 是模式字段，不应使用模式进行验证。它应该只显示价值。仅应验证编辑器 1

演示链接

示例演示

截图 编辑器 2 不应该对模式进行任何验证，找到下面的 SS

桌面（请填写以下信息）：

• 操作系统：[例如iOS] - Mac
• 浏览器[例如chrome、safari] - 任何

其他背景 我有一个功能要求，需要渲染 2 个编辑器实例。实例 1 具有 JSON 值，实例 2 具有第一个实例的 JSON 架构。

Answer 1

Monaco 编辑器并非设计为在具有不同设置的单个网页上多次出现，例如主题、提供程序或此处的验证方案。命令如下：

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

为编辑器控件的所有实例设置值。您拥有的唯一控制权是在网页上仅放置一个编辑器并在不同编辑器之间切换页面，您还可以在切换时更改全局设置。

Answer 2

我不知道你的具体用例，但我们遇到了同样的问题，并通过为每个编辑器生成一个唯一的ID（只需使用

useId

）并将其用作“假文件名”来区分它来解决它编辑：

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}
/>