How to use the monaco-editor/esm/vs/editor/editor.api.editor function in monaco-editor

To help you get started, we’ve selected a few monaco-editor examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github microsoft / pai / src / webportal / src / app / marketplace / job-submit / sub-components / user-template.js View on Github external
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',
  });
};
github DonJayamanne / pythonVSCode / src / datascience-ui / interactive-common / mainStateController.ts View on Github external
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');
        }
    }
github DonJayamanne / pythonVSCode / src / datascience-ui / react-common / styleInjector.tsx View on Github external
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);
        }
    }
github exercism / website / app / javascript / components / editor / file-editor / themes.ts View on Github external
foreground: '4183c4',
        token: 'meta.link',
      },
    ],
    colors: {
      'editor.foreground': '#000000',
      'editor.background': '#FBFCFE',
      'editor.selectionBackground': '#B4D5FE',
      'editor.lineHighlightBackground': '#FFFEEB',
      'editorCursor.foreground': '#666666',
      'editorWhitespace.foreground': '#BBBBBB',
      'editorLineNumber.foreground': '#5C5589',
    },
  })

  monaco.editor.defineTheme(Themes.DARK, {
    base: 'vs-dark',
    inherit: true,
    rules: [],
    colors: {},
  })
}
github qlik-oss / nebula.js / commands / serve / web / components / PropertiesDialog.jsx View on Github external
const subscription = editor.onDidChangeModelDecorations(() => {
      const m = monaco.editor.getModelMarkers();
      setMonacoEditorMarkers(m);
    });
    editor.focus();
github react-monaco-editor / react-monaco-editor / src / diff.js View on Github external
initModels(value, original) {
    const { language } = this.props;
    const originalModel = monaco.editor.createModel(original, language);
    const modifiedModel = monaco.editor.createModel(value, language);
    this.editor.setModel({
      original: originalModel,
      modified: modifiedModel
    });
  }
github jackrobertscott / forge / packages / client / src / components / editors / Editor.tsx View on Github external
import React, { Component, RefObject } from 'react';
import styled from 'styled-components';
import { throttle } from 'throttle-debounce';
import Color from 'color';
import * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';
import 'monaco-editor/esm/vs/basic-languages/monaco.contribution';
import 'monaco-editor/esm/vs/editor/contrib/snippet/snippetController2';
import colors from '../../styles/colors';

const Container = styled('div')`
  flex-grow: 1;
`;

Monaco.editor.defineTheme('phantom', {
  base: 'vs-dark',
  inherit: false,
  rules: [
    { background: colors.night.replace('#', ''), token: '' },
    { foreground: colors.white.replace('#', ''), token: '' },
  ],
  colors: {
    'editor.foreground': colors.white,
    'editor.background': colors.night,
    'editor.lineHighlightBackground': Color(colors.night)
      .lighten(0.3)
      .hex(),
  },
});

export interface IEditorProps {
github Inventsable / ovid-editor / src / components / monaco-adobe / monaco.js View on Github external
language() {
      if (!this.editor) return;
      if (this.diffEditor) {
        //diff模式下更新language
        const { original, modified } = this.editor.getModel();
        monaco.editor.setModelLanguage(original, this.language);
        monaco.editor.setModelLanguage(modified, this.language);
      } else
        monaco.editor.setModelLanguage(this.editor.getModel(), this.language);
    },
github iodide-project / iodide / src / editor / components / iomd-editor / iomd-editor.jsx View on Github external
componentDidMount() {
    monaco.editor.defineTheme("iomdTheme", iomdTheme);

    this.editor = monaco.editor.create(this.containerDivRef.current, {
      value: this.props.content,
      language: "iomd",
      wordWrap: this.props.wordWrap,
      theme: "iomdTheme",
      autoIndent: true,
      autoSurround: true,
      formatOnType: true,
      wrappingIndent: "same",
      lineNumbersMinChars: 3,
      lineDecorationsWidth: 3,
      renderLineHighlight: "gutter",
      minimap: {
        enabled: false
      }
    });
    window.MONACO_EDITOR = this.editor;
github exercism / website / app / javascript / components / editor / file-editor / themes.ts View on Github external
export const setupThemes = (): void => {
  monaco.editor.defineTheme(Themes.LIGHT, {
    base: 'vs',
    inherit: true,
    rules: [
      {
        background: 'FBFCFE',
        token: '',
      },
      {
        foreground: '999988',
        fontStyle: 'italic',
        token: 'comment',
      },
      {
        foreground: '999999',
        fontStyle: 'bold',
        token: 'comment.block.preprocessor',