Monaco LinkEdit 功能是指同时修改同样的字符串，例如在编辑 Html 时，修改开始标签时会同时修改闭合标签。Monaco 支持自定义需要一起更新的字符串列表。最终效果如下：
首先，通过 registerLinkedEditingRangeProvider 注册 LinkEdit 处理函数
实现 provideLinkedEditingRanges 并返回位置信息
返回需要同步修改的位置信息
代码实现如下
export function linkedEditingRangeProvider(editor: monacoEditor.editor.IStandaloneCodeEditor, monaco: typeof monacoEditor){monaco.languages.registerLinkedEditingRangeProvider('javascript', {provideLinkedEditingRanges(model: monacoEditor.editor.ITextModel, position: monacoEditor.Position, token: monacoEditor.CancellationToken) {const word = model.getWordAtPosition(position);if (!word) {return { ranges: [] };}const ranges: monacoEditor.IRange[] = [];const regex = new RegExp(`\\b${word.word}\\b`, 'g');const lines = model.getLinesContent();lines.forEach((line, lineIndex) => {let match: RegExpExecArray | null;while ((match = regex.exec(line)) !== null) {const startColumn = match.index + 1;const endColumn = startColumn + word.word.length;ranges.push({startLineNumber: lineIndex + 1,startColumn: startColumn,endLineNumber: lineIndex + 1,endColumn: endColumn});}});return {ranges: ranges};}
});}
修改对应配置信息, linkEditing 默认为关闭状态，需要在配置中进行开启。
<div><Editorheight="90vh"defaultLanguage="javascript"defaultValue=""options={{ automaticLayout: true, 'semanticHighlighting.enabled': true, 'linkedEditing': true }}onMount={handleEditorDidMount}/><button onClick={showValue}>Show Value</button></div>
