How to use monaco-editor - 10 common examples

Ir.prototype.initEditorActions = function () {
    this.irEditor.addAction({
        id: 'viewsource',
        label: 'Scroll to source',
        keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10],
        keybindingContext: null,
        contextMenuGroupId: 'navigation',
        contextMenuOrder: 1.5,
        run: _.bind(function (ed) {
            var desiredLine = ed.getPosition().lineNumber - 1;
            var source = this.irCode[desiredLine].source;
            if (source !== null && source.file === null) {
                // a null file means it was the user's source
                this.eventHub.emit('editorLinkLine', this._editorid, source.line, -1, true);
            }
        }, this)
    });
};

//       readOnly: false,
//       theme: "vs-dark"
//     }
//   );
//
//   var editor2 = monaco.editor.create(document.getElementById('editor2'), {
//     value: [
//       '\tconsole.log("MaxiLib Output");'
//     ].join('\n'),
//     language: 'javascript'
//   });

  var myCondition1 = editor1.createContextKey(/*key name*/'myCondition1', /*default value*/false);
  var myCondition2 = editor1.createContextKey(/*key name*/'myCondition2', /*default value*/false);

  editor1.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Enter, function() {
      // services available in `ctx`

      var text = editor1.getValue();

      var selection = editor1.getSelection(); //[2,1 -> 2,34]
      var valueInSelection = editor1.getModel().getValueInRange(selection); //[2,1 -> 2,34]

      // const parser = new nearley.Parser(nearley.Grammar.fromCompiled(processor));
      //
      // parser.feed(input);
      //
      //


      alert("Text: " + text + '\n\n'
            + "Selection: " + selection +  '\n\n'

var widgets = _.compact(_.map(output, function (obj) {
        if (!obj.tag) return;
        var severity = 3; // error
        if (obj.tag.text.match(/^warning/)) severity = 2;
        if (obj.tag.text.match(/^note/)) severity = 1;
        return {
            severity: severity,
            message: obj.tag.text,
            source: compiler.name + ' #' + compilerId,
            startLineNumber: obj.tag.line,
            startColumn: obj.tag.column || 0,
            endLineNumber: obj.tag.line,
            endColumn: obj.tag.column ? -1 : Infinity
        };
    }, this));
    monaco.editor.setModelMarkers(this.editor.getModel(), compilerId, widgets);
    this.decorations.tags = _.map(widgets, function (tag) {
        return {
            range: new monaco.Range(tag.startLineNumber, tag.startColumn, tag.startLineNumber + 1, 1),
            options: {
                isWholeLine: false,
                inlineClassName: "error-code"
            }
        };
    }, this);
    this.updateDecorations();
    this.asmByCompiler[compilerId] = result.asm;
    this.numberUsedLines();
};

export function useDirectory(uri: Monaco.Uri) {
  // Make sure the URI always ends with a trailing slash
  const prefix = uri.toString(true).replace(/\/?$/, '/');
  const sortEntries = (models: (DirectoryEntry)[]) => {
    return [...models].sort((a, b) => (a.uri.fsPath > b.uri.fsPath ? 1 : -1));
  };

  const initialEntries = sortEntries(
    Monaco.editor.getModels().reduce(
      (entries, model) => {
        const modelUri = model.uri.toString(true);

        if (modelUri.startsWith(prefix)) {
          const nestedPath = modelUri.slice(prefix.length);
          const nextDirIdx = nestedPath.indexOf('/');

          if (nextDirIdx === 0) {
            throw new Error('Invariant error: WAT?');
          }

          if (nextDirIdx > 0) {
            // This is an intermediate directory
            const uri = Monaco.Uri.parse(`${prefix}${nestedPath.slice(0, nextDirIdx + 1)}`);

            entries.push({

const initEditor = () => {
      if (!initDone) {
        // for now, try to disable the built-in Javascript-specific completion helper thingies
        monaco.languages.typescript.javascriptDefaults.setCompilerOptions({ noLib: true, allowNonTsExtensions: true })

        // install any custom languages we might have
        languages(monaco).forEach(({ language, provider }) => {
          monaco.languages.registerCompletionItemProvider(language, provider)
        })

        initDone = true
      }

      // here we instantiate an editor widget
      editorWrapper['baseFontSize'] = 14.4
      editor = monaco.editor.create(editorWrapper, Object.assign({
        automaticLayout: false, // respond to window layout changes
        minimap: {
          enabled: false
        },

const initPage = () => {
  let initJob = {
    name: 'Job Name',
    description: 'Please add job description.',
  };
  addNewJsonEditor(initJob, 1, 'job'); // init a job jsonEditor

  yamleditor = monaco.editor.create(document.getElementById('yaml-editor-holder'), {
    value: 'test:\n  - 1\n',
    language: 'yaml',
    automaticLayout: true,
    theme: 'vs-dark',
  });
};

private handleMonacoThemeResponse(payload?: any) {
        const response = payload as IGetMonacoThemeResponse;
        if (response && response.theme) {

            // Tell monaco we have a new theme. THis is like a state update for monaco
            monacoEditor.editor.defineTheme('interactiveWindow', response.theme);
            this.monacoThemeChanged('interactiveWindow');
        }
    }

private handleMonacoThemeResponse(payload?: any) {
        const response = payload as IGetMonacoThemeResponse;
        if (response && response.theme) {

            // Tell monaco we have a new theme. THis is like a state update for monaco
            monacoEditor.editor.defineTheme(Identifiers.GeneratedThemeName, response.theme);
        }
    }

Compiler.prototype.initEditorActions = function () {
    this.isLabelCtxKey = this.outputEditor.createContextKey('isLabel', true);

    this.outputEditor.addAction({
        id: 'jumptolabel',
        label: 'Jump to label',
        keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
        precondition: 'isLabel',
        contextMenuGroupId: 'navigation',
        contextMenuOrder: 1.5,
        run: _.bind(function (ed) {
            this.jumpToLabel(ed.getPosition());
        }, this)
    });

    // Hiding the 'Jump to label' context menu option if no label can be found
    // in the clicked position.
    var contextmenu = this.outputEditor.getContribution('editor.contrib.contextmenu');
    var realMethod = contextmenu._onContextMenu;
    contextmenu._onContextMenu = _.bind(function (e) {
        if (this.isLabelCtxKey && e.target.position) {
            var label = this.getLabelAtPosition(e.target.position);
            this.isLabelCtxKey.set(label);

}
    });

    // replace schema:
    // Press Chord Ctrl-K, Ctrl-R => the action will run if it is enabled

    editor.addAction({
      // An unique identifier of the contributed action.
      id: 'replace-meta-schema',

      // A label of the action that will be presented to the user.
      label: 'Replace Meta Schema',

      // An optional array of keybindings for the action.
      keybindings: [
        monaco.KeyMod.chord(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_K, monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_R)
      ],

      // A precondition for this action.
      precondition: null,

      // A rule to evaluate on top of the precondition in order to dispatch the keybindings.
      keybindingContext: null,

      contextMenuGroupId: 'navigation',

      contextMenuOrder: 1.5,

      // Method that will be executed when the action is triggered.
      // @param editor The editor instance is passed in as a convinience
      run: (ed) => {
        const result = window.prompt("Paste schema to replace current meta schema", "{}");