@monaco-editor/react 编辑器光标未定位在正确的位置

Question

我的摩纳哥编辑器光标始终位于当前字符之前

例如，如果我输入策略光标应放置在最后一个字符“y”之后，但它放置在“o”之后

基本上，它是在输入实际内容之前创建两个空白空间

import React, { useState, useEffect, Dispatch, SetStateAction } from "react";
import { default as MonacoEditor, EditorProps } from "@monaco-editor/react";
import * as monaco from "monaco-editor";
type Dispatcher<S> = Dispatch<SetStateAction<S>>;


const MONACO_OPTIONS: monaco.editor.IEditorConstructionOptions = {
   autoIndent: "full",
   automaticLayout: true,
   contextmenu: true,
   fontFamily: "monospace",
   fontSize: 13,
   lineHeight: 24,
   hideCursorInOverviewRuler: true,
   matchBrackets: "always",
   minimap: {
     enabled: false,
   },
   readOnly: false,
   scrollbar: {
     horizontalSliderSize: 4,
     verticalSliderSize: 18,
   },
 };

 interface propsDo{
   regoCode: string | undefined,
   setRegoCode: Dispatcher<string | undefined>

 }
 export const Editor = ({regoCode, setRegoCode}:propsDo) => {
    const [fileName, setFileName] = useState("script.js");

   const handleEditorChange = (
     value?: string,
     event?: monaco.editor.IModelContentChangedEvent
   ) => {
     setRegoCode(value);
     console.log(regoCode);
   };

   return (
     <>
       <MonacoEditor
         height="70vh"
         width="70vw"
         theme="vs-dark"
         path={file.name}
         defaultLanguage={file.language}
         options={MONACO_OPTIONS}
         onChange={handleEditorChange}
       />
    </>
   );
};

Answer 1

我正在解决同样的问题，就我而言，我将

zoom: 90%

设置为 body 并且它产生了问题。

设置

zoom: 111%

（因为

100/90

％是111.1111...）到编辑器元素修复了它。

Answer 2

@monaco-editor/react 有很多不便。但有一种方法可以克服这一切。

我建议你参观这个摩纳哥官方游乐场。并探索不同的选项和示例。您将了解如何配置编辑器。

https://microsoft.github.io/monaco-editor/playground.html?source=v0.45.0#example-creating-the-editor-hello-world

谢谢你。