摩納哥編輯器：只顯示文件的一部分

Question

有沒有辦法只顯示文檔的一部分，或者在 model 的摩納哥案例中，同時仍然獲得整個文檔的智能感知？

我只希望用戶編輯文檔的一部分，但用戶應該能夠獲得正確的上下文智能感知。

我的用例最好隱藏不可編輯的部分，但停用它們也可以。

如果這是不可能的，是否有任何嵌入式編輯器可以做到這一點，或者這可以通過修改語言服務器來實現嗎？

Answer 1

Monaco 編輯器將每一行作為容器加載到 class 名稱為“view-lines”的部分下。 加載編輯器內容后，將“display: none”設置為要隱藏的每一行的相應容器。

實施： https://jsfiddle.net/renatodc/s6fxedo2/

let value = `function capitalizeFirstLetter(string) {
\treturn string.charAt(0).toUpperCase() + string.slice(1);
}

$(function() {
\tlet word = "script";
\tlet result = capitalizeFirstLetter(word);
\tconsole.log(result);
});
`
let linesToDisable = [1,2,3];
let editor = monaco.editor.create(document.getElementById('container'), {
    value,
    language: 'javascript',
    theme: 'vs-dark',
    scrollbar: {
      vertical: "hidden",
      handleMouseWheel: false
    },
    scrollBeyondLastLine: false
});

// onLoad event for Monaco Editor: https://github.com/Microsoft/monaco-editor/issues/115
let didScrollChangeDisposable = editor.onDidScrollChange(function() {
    didScrollChangeDisposable.dispose();
    setTimeout(function() {
      $(".monaco-editor .view-lines > div").each(function(i) {
        if(linesToDisable.includes(i+1)) {
          $(this).css("display","none");
          $(this).css("pointer-events","none");
        }
      });
    },1000);
 }); 

從 Monaco 滾動將再次呈現這些行並中斷實現。 為防止這種情況，請在 Monaco 中禁用滾動功能，為編輯器容器設置固定高度，然后使用瀏覽器或父容器進行滾動。

如果您使用箭頭鍵“向上”或“向下”導航到隱藏內容，cursor 仍然可以工作，並且鍵入會破壞執行。 您也許可以使用編輯器的 onKeyDown 事件來防止這種情況。

如果您正在尋找一個防破解的實現，我建議您只加載您希望編輯的文檔部分的 Monaco 編輯器。 然后擴展完成提供程序（Intellisense），如下例所示： https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-completion-provider-example

monaco.languages.registerCompletionItemProvider('javascript', {
    provideCompletionItems: function(model, position) {
        return {
            suggestions: [
                {
                    label: "capitalizeFirstLetter",
                    kind: monaco.languages.CompletionItemKind.Method,
                    documentation: "Capitalize the first letter of a word",
                    insertText: "capitalizeFirstLetter("
                }
            ]
        };
    }
});

monaco.editor.create(document.getElementById("container"), {
    value: `$(function() {
\tlet word = "script";
\tlet result = capitalizeFirstLetter(word);
\tconsole.log(result);
});
  `,
    language: "javascript"
});

使用像 Esprima 這樣的 AST 解析器從源文檔中獲取標識符，並將它們插入到建議數組中。