是否可以将标题部分添加到 Monaco Editor 的 diff 编辑器面板？

Question

Monaco Diff Editor UX 允许用户使用两个窗格中间的调整器来调整原始窗格和修改后的窗格的大小。

• 是否可以在这些窗格的顶部添加标头（包含任何 HTML 元素的块元素），如下所示？它们应该包含在相应窗格的范围内，以便它们也可以调整大小。
• 如果无法添加标题，是否可以以编程方式读取各个窗格的宽度，以便伪造所需的行为？

Answer 1

onDidLayoutChange您可以通过挂钩的 事件来伪造该行为originalEditor（这是显示 时的左侧编辑器DiffEditor）。此事件处理程序将侦听布局的任何更改（例如，用户拖动调整大小手柄）并更新左侧标题的大小以与编辑器保持同步：

diffEditor._originalEditor.onDidLayoutChange(function(layout) {
    document.getElementById('left-header').style.width = layout.width + 'px';
});

假设您具有以下 HTML 结构：

<!-- Fake header -->
<div style="display: flex">
    <div id="left-header" style="width: calc(50% - 14px)">Left Header</div>
    <div>Right Header</div>
</div>
<!-- container for Monaco editor -->
<div id="container" style="height: 100%"></div>

这里，左侧标题的初始宽度设置50% - 14px为14px摩纳哥调整大小栏的宽度。

如果将以下 HTML 和 CSS 粘贴到Monaco Playground中，您将看到它正在运行：

超文本标记语言

<div style="display: flex">
    <div id="left-header" style="width: calc(50% - 14px)">Left Header</div>
    <div>Right Header</div>
</div>
<div id="container" style="height: 100%"></div>

JavaScript

// The diff editor offers a navigator to jump between changes. Once the diff is computed the <em>next()</em> and <em>previous()</em> method allow navigation. By default setting the selection in the editor manually resets the navigation state.
var originalModel = monaco.editor.createModel(
    'just some text\n\nHello World\n\nSome more text',
    'text/plain'
);
var modifiedModel = monaco.editor.createModel(
    'just some Text\n\nHello World\n\nSome more changes',
    'text/plain'
);

var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'));
diffEditor.setModel({
    original: originalModel,
    modified: modifiedModel
});

var navi = monaco.editor.createDiffNavigator(diffEditor, {
    followsCaret: true, // resets the navigator state when the user selects something in the editor
    ignoreCharChanges: true // jump from line to line
});

window.setInterval(function () {
    navi.next();
}, 2000);

diffEditor._originalEditor.onDidLayoutChange(function(layout) {
    document.getElementById('left-header').style.width = layout.width + 'px';
});