Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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);
}
}
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: {},
})
}
const subscription = editor.onDidChangeModelDecorations(() => {
const m = monaco.editor.getModelMarkers();
setMonacoEditorMarkers(m);
});
editor.focus();
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
});
}
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 {
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);
},
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;
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',