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;