monaco-editor-comp
Version:
Lit Component for Monaco-Editor and Monaco Languageclient Wrapper
353 lines • 13 kB
JavaScript
var MonacoEditorWebComponent_1;
import { __decorate } from "tslib";
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { createRef, ref } from 'lit/directives/ref.js';
import { getMonacoCss } from 'monaco-editor-wrapper/monaco-css';
import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
let MonacoEditorWebComponent = MonacoEditorWebComponent_1 = class MonacoEditorWebComponent extends LitElement {
constructor() {
super(...arguments);
this.container = createRef();
this.monacoWrapper = new MonacoEditorLanguageClientWrapper(this.id);
this.monacoEditorOptions = {
readOnly: false
};
this.monacoDiffEditorOptions = {
readOnly: false
};
this.languageDef = undefined;
this.themeData = undefined;
this.code = '';
this.languageId = 'javascript';
this.modifiedCode = '';
this.modifiedLanguageId = 'javascript';
this.theme = 'vs-light';
this.automaticLayout = true;
this.enableInlineConfig = false;
this.useDiffEditor = false;
this.useLanguageClient = false;
this.useWebSocket = true;
this.wsSecured = false;
this.wsHost = 'localhost';
this.wsPort = 8080;
this.wsPath = '';
this.workerURL = '';
this.useModuleWorker = false;
this.workerName = '';
}
static { this.styles = css `
:host {
--editor-width: 100%;
--editor-height: 100%;
}
main {
width: var(--editor-width);
height: var(--editor-height);
}
`; }
render() {
return html `
<style>${getMonacoCss()}</style>
<style>${MonacoEditorWebComponent_1.styles}</style>
<main ${ref(this.container)} id="monacoContainer${this.id}" class="main"></main>
`;
}
setCode(code) {
this.code = code;
}
setLanguageId(languageId) {
this.languageId = languageId;
}
setModifiedCode(modifiedCode) {
this.modifiedCode = modifiedCode;
}
setModifiedLanguageId(modifiedLanguageId) {
this.modifiedLanguageId = modifiedLanguageId;
}
setTheme(theme) {
this.theme = theme;
}
setAutomaticLayout(automaticLayout) {
this.automaticLayout = automaticLayout;
}
setUseLanguageClient(useLanguageClient) {
this.useLanguageClient = useLanguageClient;
}
setUseWebSocket(useWebSocket) {
this.useWebSocket = useWebSocket;
}
setWsSecured(wsSecured) {
this.wsSecured = wsSecured;
}
setWsHost(wsHost) {
this.wsHost = wsHost;
}
setWsPort(wsPort) {
this.wsPort = wsPort;
}
setWsPath(wsPath) {
this.wsPath = wsPath;
}
setWorkerURL(workerURL) {
this.workerURL = workerURL;
}
setUseModuleWorker(useModuleWorker) {
this.useModuleWorker = useModuleWorker;
}
setWorkerName(workerName) {
this.workerName = workerName;
}
setLanguageDef(languageDef) {
this.languageDef = languageDef;
}
setThemeData(themeData) {
this.themeData = themeData;
}
setUseDiffEditor(useDiffEditor) {
this.useDiffEditor = useDiffEditor;
}
startEditor(reloadInlineConfig) {
this.syncPropertiesAndEditorConfig(reloadInlineConfig);
this.monacoWrapper.startEditor(this.container.value);
this.registerListeners();
}
updateDiffEditorContent(code, languageId, modifiedCode, modifiedLanguageId) {
this.setCode(code);
this.setLanguageId(languageId);
this.setModifiedCode(modifiedCode);
this.setModifiedLanguageId(modifiedLanguageId);
}
loadInlineConfig() {
if (this.isEnableInlineConfig()) {
this.retrieveMonacoEditorOptions();
this.retrieveMonacoDiffEditorOptions();
this.retrieveLanguageClientOptions();
}
}
updateLayout() {
this.monacoWrapper.updateLayout();
}
syncPropertiesAndEditorConfig(reloadInlineConfig) {
if (reloadInlineConfig) {
this.loadInlineConfig();
}
const wrapperConfig = this.monacoWrapper.getEditorConfig();
wrapperConfig.setMainLanguageId(this.languageId);
wrapperConfig.setMainCode(this.code);
if (this.modifiedCode) {
wrapperConfig.setDiffCode(this.modifiedCode);
}
if (this.modifiedLanguageId) {
wrapperConfig.setDiffLanguageId(this.modifiedLanguageId);
}
wrapperConfig.setTheme(this.theme);
wrapperConfig.setAutomaticLayout(this.automaticLayout);
wrapperConfig.setMonacoEditorOptions(this.monacoEditorOptions);
wrapperConfig.setUseLanguageClient(this.useLanguageClient === true);
wrapperConfig.setUseWebSocket(this.useWebSocket === true);
let lcConfigOptions;
if (wrapperConfig.isUseWebSocket()) {
lcConfigOptions = wrapperConfig.getDefaultWebSocketConfig();
lcConfigOptions.wsSecured = this.wsSecured === true;
lcConfigOptions.wsHost = this.wsHost;
lcConfigOptions.wsPort = this.wsPort;
lcConfigOptions.wsPath = this.wsPath;
}
else {
lcConfigOptions = wrapperConfig.getDefaultWorkerConfig();
if (this.workerURL) {
lcConfigOptions.workerURL = this.workerURL;
}
lcConfigOptions.workerType = this.useModuleWorker ? 'module' : 'classic';
if (this.workerName) {
lcConfigOptions.workerName = this.workerName;
}
}
wrapperConfig.setLanguageClientConfigOptions(lcConfigOptions);
wrapperConfig.setUseDiffEditor(this.useDiffEditor || false);
if (wrapperConfig.isUseDiffEditor()) {
wrapperConfig.setMonacoDiffEditorOptions(this.monacoDiffEditorOptions);
}
if (this.languageDef) {
wrapperConfig.setMonarchTokensProvider(this.languageDef);
}
if (this.themeData) {
wrapperConfig.setEditorThemeData(this.themeData);
}
}
buildAndCallConfigFunction(basename, loggingName) {
const winRec = window;
const funcName = basename;
const funcNamePlusId = `${funcName}${this.id}`;
if (Object.prototype.hasOwnProperty.call(window, funcName) && typeof winRec[funcName] === 'function') {
console.log(`Using config supplied by ${funcName} for ${loggingName}.`);
return winRec[funcName]();
}
else if (Object.prototype.hasOwnProperty.call(winRec, funcNamePlusId) && typeof winRec[funcNamePlusId] === 'function') {
console.log(`Using config supplied by ${funcNamePlusId} for ${loggingName}.`);
return winRec[funcNamePlusId]();
}
else {
return undefined;
}
}
retrieveMonacoEditorOptions() {
if (!this.isEnableInlineConfig())
return;
const options = this.buildAndCallConfigFunction('getMonacoEditorOptions', 'editor');
this.setMonacoEditorOptions(options);
}
setMonacoEditorOptions(options) {
if (!options)
return;
if (options.code) {
this.setCode(options.code);
}
if (options.languageId) {
this.setLanguageId(options.languageId);
}
if (options.theme) {
this.setTheme(options.theme);
// ensure theme is removed from global config object and kept separate
options.theme = undefined;
}
for (const [k, v] of Object.entries(options)) {
this.monacoEditorOptions[k] = v;
}
}
retrieveMonacoDiffEditorOptions() {
if (!this.isEnableInlineConfig())
return;
const options = this.buildAndCallConfigFunction('getMonacoDiffEditorOptions', 'diff editor');
this.setMonacoDiffEditorOptions(options);
}
setMonacoDiffEditorOptions(options) {
if (!options)
return;
if (options.code) {
this.setCode(options.code);
}
if (options.languageId) {
this.setLanguageId(options.languageId);
}
if (options.modifiedCode) {
this.setModifiedCode(options.modifiedCode);
}
if (options.modifiedLanguageId) {
this.setModifiedLanguageId(options.modifiedLanguageId);
}
if (options.theme) {
this.setTheme(options.theme);
}
for (const [k, v] of Object.entries(options)) {
this.monacoDiffEditorOptions[k] = v;
}
}
retrieveLanguageClientOptions() {
if (!this.isEnableInlineConfig())
return;
const options = this.buildAndCallConfigFunction('getLanguageClientOptions', 'language server connection');
this.setLanguageClientOptions(options);
}
setLanguageClientOptions(options) {
if (!options)
return;
if (this.useWebSocket) {
const input = options;
this.setWsSecured(input.wsSecured === true);
if (input.wsHost) {
this.setWsHost(input.wsHost);
}
if (input.wsPort) {
this.setWsPort(input.wsPort);
}
if (input.wsPath) {
this.setWsPath(input.wsPath);
}
}
else {
const input = options;
if (input.workerURL) {
this.setWorkerURL(input.workerURL);
}
if (input.workerType) {
this.setUseModuleWorker(input.workerType === 'module');
}
if (input.workerName) {
this.setWorkerName(input.workerName);
}
}
}
isEnableInlineConfig() {
const content = this.children.length === 1 ? this.children[0] : undefined;
return content instanceof HTMLScriptElement && this.enableInlineConfig;
}
firstUpdated() {
this.startEditor(true);
}
registerListeners() {
window
.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', (e) => {
this.setTheme(e.matches ? 'vs-dark' : 'vs-light');
this.monacoWrapper.updateTheme();
});
}
};
__decorate([
property({ reflect: true })
], MonacoEditorWebComponent.prototype, "code", void 0);
__decorate([
property({ reflect: true })
], MonacoEditorWebComponent.prototype, "languageId", void 0);
__decorate([
property({ reflect: true })
], MonacoEditorWebComponent.prototype, "modifiedCode", void 0);
__decorate([
property({ reflect: true })
], MonacoEditorWebComponent.prototype, "modifiedLanguageId", void 0);
__decorate([
property({ reflect: true })
], MonacoEditorWebComponent.prototype, "theme", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], MonacoEditorWebComponent.prototype, "automaticLayout", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], MonacoEditorWebComponent.prototype, "enableInlineConfig", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], MonacoEditorWebComponent.prototype, "useDiffEditor", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], MonacoEditorWebComponent.prototype, "useLanguageClient", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], MonacoEditorWebComponent.prototype, "useWebSocket", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], MonacoEditorWebComponent.prototype, "wsSecured", void 0);
__decorate([
property({ reflect: true })
], MonacoEditorWebComponent.prototype, "wsHost", void 0);
__decorate([
property({ type: Number, reflect: true })
], MonacoEditorWebComponent.prototype, "wsPort", void 0);
__decorate([
property({ reflect: true })
], MonacoEditorWebComponent.prototype, "wsPath", void 0);
__decorate([
property({ type: String, reflect: true })
], MonacoEditorWebComponent.prototype, "workerURL", void 0);
__decorate([
property({ type: String, reflect: true })
], MonacoEditorWebComponent.prototype, "useModuleWorker", void 0);
__decorate([
property({ type: String, reflect: true })
], MonacoEditorWebComponent.prototype, "workerName", void 0);
MonacoEditorWebComponent = MonacoEditorWebComponent_1 = __decorate([
customElement('monaco-editor-comp')
], MonacoEditorWebComponent);
export { MonacoEditorWebComponent };
//# sourceMappingURL=index.js.map