Search code examples
monaco-editorazure-devops-extensions

Adding monaco editor in devops work items extension

we try to use monaco editor (diff editor) in order to compare devops work items version in 2 different history point in time (with REST API asOf parameter).

we have a proof of concept working on laptop and standalone html page but we would like to embded it as an devops extension.

I can't find guidance (I'm new to devops extension) on how to achieve this, especially that monaco editor is already available.

I found references to VSS/Features/Monaco, tried to use it without luck.

    VSS.init();

    VSS.require(["VSS/Features/Monaco"], function (monaco) {
        var diffEditor = monaco.editor.createDiffEditor(document.getElementById('editor'), {
                    enableSplitViewResizing: false
                });   
    });

enter image description here

Solution

  • There is no reference VSS/Features/Monaco in DevOps. Since monaco provide api, you may call the monaco api in the js:

    https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html#creatediffeditor

    enter image description here