4

I am trying to get use of all monaco-eaditor features, so I will combine the monaco-diff editor with monaco-yaml plugin.

I was able to build the monaco-diff editor following this https://microsoft.github.io/monaco-editor/playground.html#creating-the-diffeditor-hello-diff-world.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/loader.js"></script>

<script>
  require.config({ paths: {'vs': 'https://unpkg.com/monaco-editor@0.20.0/min/vs'}});

  window.MonacoEnvironment = { getWorkerUrl: () => proxy }
    let proxy = URL.createObjectURL(new Blob([`
      self.MonacoEnvironment = {
        baseUrl: 'https://unpkg.com/monaco-editor@0.20.0/min/'
      };
      importScripts('https://unpkg.com/monaco-editor@0.20.0/min/vs/base/worker/workerMain.js');
    `], { type: 'yaml' }));

    require([
      'vs/editor/editor.main'
    ], function () {
    var lhsModel = monaco.editor.createModel(value, 'yaml');
    var rhsModel = monaco.editor.createModel(value, 'yaml');

    diffEditor = monaco.editor.createDiffEditor(document.getElementById('diff-editor'), {
      enableSplitViewResizing: false,
    });

    diffEditor.setModel({
      original: lhsModel,
      modified: rhsModel
    });
 </script>

However I am not able to find a tutorial to add the monaco-yaml, can someone provide me with a link,tutorial or any useful steps ?

eftikhar
  • 119
  • 9
  • I did not found a solution for this case, instead I used https://github.com/nodeca/js-yaml , where simply I show the error on submitting the value or after stop writing for 1 sec using this listener ```var timer; rhsModel.onDidChangeContent(function(e) {clearTimeout(timer);timer = setTimeout(parse, 1000);}); function parse() { var value = rhsModel.getModel().modified.getValue(); try { var doc = jsyaml.load(value); } catch (e) { # show error }} ``` – eftikhar Feb 13 '20 at 13:38

0 Answers0