Monaco Editor：在 ProvideOnTypeFormattingEdits 中设置光标位置

Question

我使用以下代码在输入打开标签的“>”时自动关闭 xml 标签。

到目前为止一切正常。但我想将光标设置在标签之间。相反，光标将位于结束标记的末尾。

<myTag>[cursor should be here]</myTag> [cursor is here]

        monaco.languages.registerOnTypeFormattingEditProvider('xml', {
            autoFormatTriggerCharacters: ['>'],
            provideOnTypeFormattingEdits: (model: any, position: any, ch: any) => {
                if (ch === '>') {
                    const codePre = model.getValueInRange({
                        startLineNumber: position.lineNumber,
                        startColumn: 1,
                        endLineNumber: position.lineNumber,
                        endColumn: position.column,
                    });

                    const match = codePre.match(/.*<(\w+)>$/);
                    if (match) {
                        const tag = match[1];
                        const closingTag = `</${tag}>`;
                        const edit = {
                            range: {
                                startLineNumber: position.lineNumber,
                                startColumn: position.column,
                                endLineNumber: position.lineNumber,
                                endColumn: position.column,
                            },
                            text: `${closingTag}`,
                        };

                        return [edit];
                    }
                }

                return [];
            },
        }); 

Answer 1

您可以调用

editor.executeEdits

，而不是从 provideOnTypeFormattingEdits 返回编辑。此函数允许传递一个可选参数

endCursorState

，其中包含您希望光标结束的详细信息（以 Selection 数组的形式）。

由于您只想将光标置于两个标签之间，因此您可以在

editor.getSelection()

函数中获取光标位置 (

provideOnTypeFormattingEdits

)，并将其传递给

editor.executeEdits

:

// Get the current selection (used to set the cursor position after inserting the closing tag)
const sel = editor.getSelection();
// Call executeEdits rather than returning the edits
// This allows us to pass a Selection[] which updates the cursor position afterwards
editor.executeEdits('', [edit], [sel]);

完整的

provideOnTypeFormattingEdits

功能变为：

provideOnTypeFormattingEdits: (model, position, ch) => {
    if (ch === '>') {
        const codePre = model.getValueInRange({
            startLineNumber: position.lineNumber,
            startColumn: 1,
            endLineNumber: position.lineNumber,
            endColumn: position.column,
        });

        const match = codePre.match(/.*<(\w+)>$/);
        if (match) {
            const tag = match[1];
            const closingTag = `</${tag}>`;
            const edit = {
                range: {
                    startLineNumber: position.lineNumber,
                    startColumn: position.column,
                    endLineNumber: position.lineNumber,
                    endColumn: position.column,
                },
                text: `${closingTag}`,
            };

            // Get the current selection (used to set the cursor position after inserting the closing tag)
            const sel = editor.getSelection();
            // Call executeEdits rather than returning the edits
            // This allows us to pass a Selection[] which updates the cursor position afterwards
            editor.executeEdits('', [edit], [sel]);
        }
    }

    return [];
},

摩纳哥游乐场这里有一个工作演示。