javascript - monaco-editor的diffEditor在使用时无法正常展示我所编辑的内容?

Question

monaco-editor【0.31.1】在使用diffEditor时其行为与官网demo有些不符，具体细节如下：

原demo ———— https://microsoft.github.io/monaco-editor/playground.html?sou...

完全一样的例子我却没有右侧的 minimap 差别以及 diff 阴影，大佬们有没有碰到过类似的情况呢

代码如下

import React, { useEffect, useRef } from 'react';import * as monaco from 'monaco-editor';import styles from './index.less';export default () => {  const editorRef = useRef();  useEffect(() => {    const originalModel = monaco.editor.createModel(      "This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text",      "text/plain"    );    const modifiedModel = monaco.editor.createModel(      "just some text\nabcz\nzzzzefgh\nSome more text.\nThis line is removed on the left.",      "text/plain"    );    const diffEditor = monaco.editor.createDiffEditor(      editorRef.current,      {        // You can optionally disable the resizing        enableSplitViewResizing: false,      }    );    diffEditor.setModel({      original: originalModel,      modified: modifiedModel,    });  }, []);  return (    <div      className={styles.monacoEditor}      ref={editorRef}    />  );}

Answer 1

前段时间，项目有用到这个编辑器，代码我直接贴出来，我是直接用的 DiffEditor 这个组件，没有你说的看不到minimap的情况，建议尝试一下, 我使用的版本是
"@monaco-editor/react": "^4.4.6",

import React, { useEffect, useState } from 'react';import { DiffEditor } from '@monaco-editor/react';import { loader } from '@monaco-editor/react';loader.config({  paths: {    vs: 'https://cdn.bootcdn.net/ajax/libs/monaco-editor/0.33.0/min/vs/',  },});const YamlDiff = ({ original, modified }: any) => {  return (    <>      <DiffEditor        height="70vh"        language="yaml"        original={original}        modified={modified}        // onMount={handleEditorDidMount}      />    </>  );};export default YamlDiff;