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

问题描述 投票:0回答:1

我使用以下代码在输入打开标签的“>”时自动关闭 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 [];
            },
        }); 
typescript monaco-editor
1个回答
0
投票

您可以调用

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 [];
},

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

© www.soinside.com 2019 - 2024. All rights reserved.