monaco-editor 改成 esm 版本
This commit is contained in:
2betop
parent
a116cab6d8
commit
7ef5a9f810
1133
fis-conf.js
1133
fis-conf.js
File diff suppressed because it is too large
Load Diff
|
|
@ -119,6 +119,7 @@
|
||||||
"fis3-parser-typescript": "^1.3.0",
|
"fis3-parser-typescript": "^1.3.0",
|
||||||
"fis3-postpackager-loader": "^2.1.11",
|
"fis3-postpackager-loader": "^2.1.11",
|
||||||
"fis3-preprocessor-js-require-css": "^0.1.3",
|
"fis3-preprocessor-js-require-css": "^0.1.3",
|
||||||
|
"fis3-prepackager-stand-alone-pack": "^1.0.0",
|
||||||
"font-awesome": "4.7.0",
|
"font-awesome": "4.7.0",
|
||||||
"fs-walk": "0.0.2",
|
"fs-walk": "0.0.2",
|
||||||
"highlight.js": "^9.12.0",
|
"highlight.js": "^9.12.0",
|
||||||
|
|
|
||||||
|
|
@ -7,230 +7,28 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import cx from 'classnames';
|
import cx from 'classnames';
|
||||||
import {ClassNamesFn, themeable} from '../theme';
|
import {ClassNamesFn, themeable} from '../theme';
|
||||||
|
import {__uri} from '../utils/helper';
|
||||||
|
|
||||||
function noJsExt(raw: string) {
|
(window as any).MonacoEnvironment = {
|
||||||
return raw.replace(/\.js$/, '');
|
getWorkerUrl: function(moduleId: string, label: string) {
|
||||||
}
|
if (label === 'json') {
|
||||||
|
return '/pkg/json.worker.js';
|
||||||
const defaultConfig = {
|
} else if (label === 'css') {
|
||||||
'url': 'vs/loader.js',
|
return '/pkg/css.worker.js';
|
||||||
'vs/nls': {
|
} else if (label === 'html') {
|
||||||
availableLanguages: {
|
return '/pkg/html.worker.js';
|
||||||
'*': 'zh-cn'
|
} else if (label === 'typescript' || label === 'javascript') {
|
||||||
|
return '/pkg/ts.worker.js';
|
||||||
}
|
}
|
||||||
},
|
return '/pkg/editor.worker.js';
|
||||||
'paths': {}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
try {
|
export function monacoFactory(
|
||||||
// fis 编译的话，能正确赋值上，如果不是，那请通过外部参数传递。
|
containerElement: HTMLElement,
|
||||||
defaultConfig.url = __uri('monaco-editor/min/vs/loader.js');
|
monaco: any,
|
||||||
defaultConfig.paths = {
|
options: any
|
||||||
'vs': noJsExt(__uri('monaco-editor/min/vs/editor/editor.main.js')).replace(
|
) {
|
||||||
/\/vs\/.*$/,
|
|
||||||
''
|
|
||||||
),
|
|
||||||
'vs/base/worker/workerMain': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/base/worker/workerMain.js')
|
|
||||||
),
|
|
||||||
|
|
||||||
'vs/basic-languages/apex/apex': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/apex/apex')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/azcli/azcli': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/azcli/azcli')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/clojure/clojure': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/clojure/clojure')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/bat/bat': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/bat/bat')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/coffee/coffee': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/coffee/coffee')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/cpp/cpp': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/cpp/cpp')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/csharp/csharp': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/csharp/csharp')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/css/css': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/css/css')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/dockerfile/dockerfile': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/dockerfile/dockerfile')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/fsharp/fsharp': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/fsharp/fsharp')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/go/go': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/go/go')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/handlebars/handlebars': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/handlebars/handlebars')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/html/html': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/html/html')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/ini/ini': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/ini/ini')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/java/java': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/java/java')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/javascript/javascript': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/javascript/javascript')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/less/less': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/less/less')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/lua/lua': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/lua/lua')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/markdown/markdown': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/markdown/markdown')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/msdax/msdax': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/msdax/msdax')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/objective-c/objective-c': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/objective-c/objective-c')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/php/php': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/php/php')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/postiats/postiats': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/postiats/postiats')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/powershell/powershell': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/powershell/powershell')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/pug/pug': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/pug/pug')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/python/python': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/python/python')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/r/r': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/r/r')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/razor/razor': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/razor/razor')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/redis/redis': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/redis/redis')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/redshift/redshift': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/redshift/redshift')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/ruby/ruby': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/ruby/ruby')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/rust/rust': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/rust/rust')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/sb/sb': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/sb/sb')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/scheme/scheme': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/scheme/scheme')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/scss/scss': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/scss/scss')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/shell/shell': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/shell/shell')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/solidity/solidity': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/solidity/solidity')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/sql/sql': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/sql/sql')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/st/st': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/st/st')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/swift/swift': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/swift/swift')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/typescript/typescript': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/typescript/typescript')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/vb/vb': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/vb/vb')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/xml/xml': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/xml/xml')
|
|
||||||
),
|
|
||||||
'vs/basic-languages/yaml/yaml': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/basic-languages/yaml/yaml')
|
|
||||||
),
|
|
||||||
|
|
||||||
'vs/editor/editor.main': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/editor/editor.main.js')
|
|
||||||
),
|
|
||||||
'vs/editor/editor.main.css': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/editor/editor.main.css')
|
|
||||||
),
|
|
||||||
'vs/editor/editor.main.nls': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/editor/editor.main.nls.js')
|
|
||||||
),
|
|
||||||
'vs/editor/editor.main.nls.zh-cn': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/editor/editor.main.nls.zh-cn.js')
|
|
||||||
),
|
|
||||||
|
|
||||||
// 'vs/editor/contrib/suggest/media/String_16x.svg': noJsExt(__uri('monaco-editor/min/vs/editor/contrib/suggest/media/String_16x.svg')),
|
|
||||||
// 'vs/editor/contrib/suggest/media/String_inverse_16x.svg': noJsExt(__uri('monaco-editor/min/vs/editor/contrib/suggest/media/String_inverse_16x.svg')),
|
|
||||||
// 'vs/editor/standalone/browser/quickOpen/symbol-sprite.svg': noJsExt(__uri('monaco-editor/min/vs/editor/standalone/browser/quickOpen/symbol-sprite.svg')),
|
|
||||||
|
|
||||||
'vs/language/typescript/tsMode': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/language/typescript/tsMode.js')
|
|
||||||
),
|
|
||||||
// 'vs/language/typescript/lib/typescriptServices': noJsExt(__uri('monaco-editor/min/vs/language/typescript/lib/typescriptServices.js')),
|
|
||||||
'vs/language/typescript/tsWorker': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/language/typescript/tsWorker.js')
|
|
||||||
),
|
|
||||||
|
|
||||||
'vs/language/json/jsonMode': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/language/json/jsonMode.js')
|
|
||||||
),
|
|
||||||
'vs/language/json/jsonWorker': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/language/json/jsonWorker.js')
|
|
||||||
),
|
|
||||||
|
|
||||||
'vs/language/html/htmlMode': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/language/html/htmlMode.js')
|
|
||||||
),
|
|
||||||
'vs/language/html/htmlWorker': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/language/html/htmlWorker.js')
|
|
||||||
),
|
|
||||||
|
|
||||||
'vs/language/css/cssMode': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/language/css/cssMode.js')
|
|
||||||
),
|
|
||||||
'vs/language/css/cssWorker': noJsExt(
|
|
||||||
__uri('monaco-editor/min/vs/language/css/cssWorker.js')
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
||||||
// cdn 支持
|
|
||||||
/^(https?:)?\/\//.test(defaultConfig.paths.vs) &&
|
|
||||||
((window as any).MonacoEnvironment = {
|
|
||||||
getWorkerUrl: function() {
|
|
||||||
return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
|
|
||||||
self.MonacoEnvironment = {
|
|
||||||
baseUrl: '${defaultConfig.paths.vs}',
|
|
||||||
paths: ${JSON.stringify(defaultConfig.paths)}
|
|
||||||
};
|
|
||||||
importScripts('${__uri(
|
|
||||||
'monaco-editor/min/vs/base/worker/workerMain.js'
|
|
||||||
)}');`)}`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} catch (e) {}
|
|
||||||
|
|
||||||
export function monacoFactory(containerElement, monaco, options) {
|
|
||||||
return monaco.editor.create(containerElement, {
|
return monaco.editor.create(containerElement, {
|
||||||
autoIndent: true,
|
autoIndent: true,
|
||||||
formatOnType: true,
|
formatOnType: true,
|
||||||
|
|
@ -276,7 +74,6 @@ export interface EditorProps {
|
||||||
|
|
||||||
export class Editor extends React.Component<EditorProps, any> {
|
export class Editor extends React.Component<EditorProps, any> {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
requireConfig: defaultConfig,
|
|
||||||
language: 'javascript',
|
language: 'javascript',
|
||||||
editorTheme: 'vs',
|
editorTheme: 'vs',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
|
|
@ -352,69 +149,12 @@ export class Editor extends React.Component<EditorProps, any> {
|
||||||
}
|
}
|
||||||
|
|
||||||
loadMonaco() {
|
loadMonaco() {
|
||||||
const {requireConfig} = this.props;
|
(require as any)(['monaco-editor'], (monaco: any) => {
|
||||||
const loaderUrl = requireConfig.url || 'vs/loader.js';
|
this.initMonaco(monaco);
|
||||||
const context =
|
});
|
||||||
(window as any).monacaAmd ||
|
|
||||||
((window as any).monacaAmd = {
|
|
||||||
document: window.document
|
|
||||||
});
|
|
||||||
|
|
||||||
const onGotAmdLoader = () => {
|
|
||||||
if (context.__REACT_MONACO_EDITOR_LOADER_ISPENDING__) {
|
|
||||||
// Do not use webpack
|
|
||||||
if (requireConfig.paths && requireConfig.paths.vs) {
|
|
||||||
context.require.config(requireConfig);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Load monaco
|
|
||||||
context['require'](
|
|
||||||
['vs/editor/editor.main', 'vs/editor/editor.main.nls.zh-cn'],
|
|
||||||
() => {
|
|
||||||
this.initMonaco();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
// Call the delayed callbacks when AMD loader has been loaded
|
|
||||||
if (context.__REACT_MONACO_EDITOR_LOADER_ISPENDING__) {
|
|
||||||
context.__REACT_MONACO_EDITOR_LOADER_ISPENDING__ = false;
|
|
||||||
let loaderCallbacks = context.__REACT_MONACO_EDITOR_LOADER_CALLBACKS__;
|
|
||||||
if (loaderCallbacks && loaderCallbacks.length) {
|
|
||||||
let currentCallback = loaderCallbacks.shift();
|
|
||||||
while (currentCallback) {
|
|
||||||
currentCallback.fn.call(currentCallback.context);
|
|
||||||
currentCallback = loaderCallbacks.shift();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Load AMD loader if necessary
|
|
||||||
if (context.__REACT_MONACO_EDITOR_LOADER_ISPENDING__) {
|
|
||||||
// We need to avoid loading multiple loader.js when there are multiple editors loading concurrently
|
|
||||||
// delay to call callbacks except the first one
|
|
||||||
context.__REACT_MONACO_EDITOR_LOADER_CALLBACKS__ =
|
|
||||||
context.__REACT_MONACO_EDITOR_LOADER_CALLBACKS__ || [];
|
|
||||||
context.__REACT_MONACO_EDITOR_LOADER_CALLBACKS__.push({
|
|
||||||
context: this,
|
|
||||||
fn: onGotAmdLoader
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
if (typeof context.require === 'undefined') {
|
|
||||||
var loaderScript = context.document.createElement('script');
|
|
||||||
loaderScript.type = 'text/javascript';
|
|
||||||
loaderScript.src = loaderUrl;
|
|
||||||
loaderScript.addEventListener('load', onGotAmdLoader);
|
|
||||||
context.document.body.appendChild(loaderScript);
|
|
||||||
context.__REACT_MONACO_EDITOR_LOADER_ISPENDING__ = true;
|
|
||||||
} else {
|
|
||||||
onGotAmdLoader();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
initMonaco() {
|
initMonaco(monaco: any) {
|
||||||
let value =
|
let value =
|
||||||
this.props.value !== null ? this.props.value : this.props.defaultValue;
|
this.props.value !== null ? this.props.value : this.props.defaultValue;
|
||||||
const {language, editorTheme, options, editorFactory} = this.props;
|
const {language, editorTheme, options, editorFactory} = this.props;
|
||||||
|
|
@ -422,43 +162,40 @@ export class Editor extends React.Component<EditorProps, any> {
|
||||||
if (!containerElement) {
|
if (!containerElement) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const context = this.props.context || window;
|
|
||||||
const monaco = context.monaco || (window as any).monaco;
|
|
||||||
if (typeof monaco !== 'undefined') {
|
|
||||||
// Before initializing monaco editor
|
|
||||||
this.editorWillMount(monaco);
|
|
||||||
|
|
||||||
if (this.props.language === 'json') {
|
// Before initializing monaco editor
|
||||||
try {
|
this.editorWillMount(monaco);
|
||||||
value = JSON.stringify(
|
|
||||||
typeof value === 'string' ? JSON.parse(value) : value,
|
if (this.props.language === 'json') {
|
||||||
null,
|
try {
|
||||||
4
|
value = JSON.stringify(
|
||||||
);
|
typeof value === 'string' ? JSON.parse(value) : value,
|
||||||
} catch (e) {
|
null,
|
||||||
// ignore
|
4
|
||||||
}
|
);
|
||||||
|
} catch (e) {
|
||||||
|
// ignore
|
||||||
}
|
}
|
||||||
|
|
||||||
const factory = editorFactory || monacoFactory;
|
|
||||||
this.editor = factory(containerElement, monaco, {
|
|
||||||
...options,
|
|
||||||
automaticLayout: true,
|
|
||||||
value,
|
|
||||||
language,
|
|
||||||
editorTheme,
|
|
||||||
theme: editorTheme
|
|
||||||
});
|
|
||||||
|
|
||||||
// json 默认开启验证。
|
|
||||||
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
|
|
||||||
enableSchemaRequest: true,
|
|
||||||
validate: true
|
|
||||||
});
|
|
||||||
|
|
||||||
// After initializing monaco editor
|
|
||||||
this.editorDidMount(this.editor, monaco);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const factory = editorFactory || monacoFactory;
|
||||||
|
this.editor = factory(containerElement, monaco, {
|
||||||
|
...options,
|
||||||
|
automaticLayout: true,
|
||||||
|
value,
|
||||||
|
language,
|
||||||
|
editorTheme,
|
||||||
|
theme: editorTheme
|
||||||
|
});
|
||||||
|
|
||||||
|
// json 默认开启验证。
|
||||||
|
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
|
||||||
|
enableSchemaRequest: true,
|
||||||
|
validate: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// After initializing monaco editor
|
||||||
|
this.editorDidMount(this.editor, monaco);
|
||||||
}
|
}
|
||||||
|
|
||||||
editorWillMount(monaco: any) {
|
editorWillMount(monaco: any) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue