摩纳哥编辑器 deltaDecorations 更改整个文本的样式，而不仅仅是给定范围

Question

我正在使用带有 React. I want to change the background color of a specific range in a line. I am following this tutorial 的 Monaco 编辑器，它来自官方文档。

代码如下所示。

const editorDidMount = (editor, monaco) => {
    const r = new monaco.Range(1, 3, 1, 10);
    editor.deltaDecorations(
        [],
        [
            {
                range: r,
                options: {
                    inlineClassName: "myInlineDecoration",
                },
            },
        ]
    );
};

这就是我创建编辑器元素的方式。没什么特别的。

<MonacoEditor
    width={800}
    height={400}
    language="java"
    value={value}
    onChange={onValueChange}
    editorDidMount={editorDidMount}
/>

和css

.myInlineDecoration {
    background: lightgreen;
}

问题在于，这会将整个文本的背景颜色更改为 lightgreen，而不仅仅是给定的范围。

看起来像这样。但我只想要一个特定的范围，而不是所有的。

我尝试了 here 中的不同选项，但其中 none 有任何不同。

如果需要更多信息，请告诉我。

Answer 1

正如您在评论中提到的，问题似乎是该值开始时为空白，然后选择在更改时自动扩展为整个文本。

如果您想在文本更改时保留装饰，您可以将 monaco 对象存储在 ref 中，并在每次值更改时执行的 useEffect 挂钩中使用它们。

...
  const monacoObjects = useRef(null);

  const editorDidMount = (editor, monaco) => {
    monacoObjects.current = {
      editor,
      monaco,
    };
  };

  useEffect(() => {
    if (!monacoObjects.current) return;
    const { monaco, editor } = monacoObjects.current;
    const r = new monaco.Range(1, 3, 1, 10);
    editor.deltaDecorations(
      [],
      [
        {
          range: r,
          options: {
            inlineClassName: "myInlineDecoration",
          },
        },
      ]
    );
  }, [value]);

  return (
    <MonacoEditor
      width={800}
      height={400}
      language="java"
      value={value}
      onChange={onValueChange}
      editorDidMount={editorDidMount}
    />
  );
...

摩纳哥编辑器 deltaDecorations 更改整个文本的样式，而不仅仅是给定范围

Monaco editor deltaDecorations changes the style of the whole text instead of just the given range

reactjs

monaco-editor