@ribajs/monaco-editor
Version:
Monaco-editor module for Riba.js
179 lines • 13 kB
JavaScript
import { Component } from "@ribajs/core";
import MonacoLoader from "@monaco-editor/loader";
import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
import pugTemplate from "./monaco-editor.component.pug";
export class MonacoEditorComponent extends Component {
static tagName = "monaco-editor";
autobind = true;
_debug = false;
editor;
static get observedAttributes() {
return [
"data-value",
"language",
"theme",
"read-only",
"automatic-layout",
"minimap-enabled",
"format-document",
"html-format-tabSize",
"html-format-wrapLineLength",
"html-format-unformatted",
"html-format-contentUnformatted",
"html-format-extraLiners",
"html-format-preserveNewLines",
"html-format-maxPreserveNewLines",
"html-format-endWithNewline",
"html-format-indentInnerHtml",
"html-format-wrapAttributes",
];
}
scope = {
dataValue: "{}",
language: undefined,
theme: "vs-dark",
readOnly: true,
automaticLayout: false,
minimapEnabled: false,
formatDocument: false,
htmlFormatTabSize: 4,
htmlFormatInsertSpaces: true,
htmlFormatIndentHandlebars: true,
htmlFormatWrapLineLength: 0,
htmlFormatUnformatted: "inline",
htmlFormatContentUnformatted: "pre",
htmlFormatExtraLiners: "head,body,/html",
htmlFormatPreserveNewLines: true,
htmlFormatMaxPreserveNewLines: 20,
htmlFormatEndWithNewline: true,
htmlFormatIndentInnerHtml: true,
htmlFormatWrapAttributes: "force-aligned",
};
constructor() {
super();
}
connectedCallback() {
super.connectedCallback();
this.init(MonacoEditorComponent.observedAttributes);
}
async beforeBind() {
await super.beforeBind();
}
async afterBind() {
await this.createEditor(this.scope.dataValue);
await super.afterBind();
}
async createEditor(value) {
if (typeof value === "object") {
value = JSON.stringify(value, null, 4);
}
else if (typeof value !== "string") {
value = String(value);
}
if (this.editor) {
return;
}
const monaco = await MonacoLoader.init();
monaco.editor.onDidCreateEditor(() => {
this.debug("onDidCreateEditor");
setTimeout(() => {
this.formatDocument();
}, 2000);
});
monaco.languages.html.htmlDefaults.setOptions({
format: {
tabSize: this.scope.htmlFormatTabSize,
insertSpaces: this.scope.htmlFormatInsertSpaces,
indentHandlebars: this.scope.htmlFormatIndentHandlebars,
wrapLineLength: this.scope.htmlFormatWrapLineLength,
unformatted: this.scope.htmlFormatUnformatted,
contentUnformatted: this.scope.htmlFormatContentUnformatted,
extraLiners: this.scope.htmlFormatExtraLiners,
preserveNewLines: this.scope.htmlFormatPreserveNewLines,
maxPreserveNewLines: this.scope.htmlFormatMaxPreserveNewLines,
endWithNewline: this.scope.htmlFormatEndWithNewline,
indentInnerHtml: this.scope.htmlFormatIndentInnerHtml,
wrapAttributes: this.scope.htmlFormatWrapAttributes,
},
});
this.editor = monaco.editor.create(this, {
value: value,
language: this.scope.language,
theme: this.scope.theme,
readOnly: this.scope.readOnly,
automaticLayout: this.scope.automaticLayout,
formatOnType: true,
formatOnPaste: true,
minimap: {
enabled: this.scope.minimapEnabled,
},
});
this.editor?.onDidChangeModelContent(() => {
if (this.editor) {
this.scope.dataValue = this.editor.getValue();
if (this.scope.dataValue) {
this.dispatchEvent(new CustomEvent("change", {
detail: this.scope.dataValue,
}));
}
}
});
}
formatDocument() {
if (this.editor && this.scope.formatDocument && this.scope.dataValue) {
this.debug("Format document");
this.editor
.getAction("editor.action.formatDocument")
?.run()
.then(() => {
this.debug("Document formatted");
})
.catch((error) => {
console.error(error);
});
}
}
setValue(value) {
if (typeof value === "object") {
value = JSON.stringify(value, null, 4);
}
else if (typeof value !== "string") {
value = String(value);
}
this.debug("setValue");
if (this.editor) {
this.editor.setValue(value);
this.formatDocument();
}
}
requiredAttributes() {
return ["language", "dataValue"];
}
parsedAttributeChangedCallback(attributeName, oldValue, newValue, namespace) {
super.parsedAttributeChangedCallback(attributeName, oldValue, newValue, namespace);
this.debug("attributeName", attributeName);
if (attributeName === "dataValue") {
if (this.editor) {
this.setValue(this.scope.dataValue);
}
}
}
disconnectedCallback() {
if (this.editor) {
this.editor.dispose();
}
super.disconnectedCallback();
}
template() {
let template = null;
if (this && hasChildNodesTrim(this)) {
return null;
}
else {
template = pugTemplate(this.scope);
this.debug("Use template", template);
return template;
}
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9uYWNvLWVkaXRvci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9tb25hY28tZWRpdG9yL21vbmFjby1lZGl0b3IuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQStCLE1BQU0sY0FBYyxDQUFDO0FBQ3RFLE9BQU8sWUFBWSxNQUFNLHVCQUF1QixDQUFDO0FBQ2pELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQzdELE9BQU8sV0FBVyxNQUFNLCtCQUErQixDQUFDO0FBK0R4RCxNQUFNLE9BQU8scUJBQXNCLFNBQVEsU0FBUztJQUMzQyxNQUFNLENBQUMsT0FBTyxHQUFHLGVBQWUsQ0FBQztJQUU5QixRQUFRLEdBQUcsSUFBSSxDQUFDO0lBRW5CLE1BQU0sR0FBRyxLQUFLLENBQUM7SUFFWixNQUFNLENBQWdDO0lBRWhELE1BQU0sS0FBSyxrQkFBa0I7UUFDM0IsT0FBTztZQUNMLFlBQVk7WUFDWixVQUFVO1lBQ1YsT0FBTztZQUNQLFdBQVc7WUFDWCxrQkFBa0I7WUFDbEIsaUJBQWlCO1lBQ2pCLGlCQUFpQjtZQUNqQixxQkFBcUI7WUFDckIsNEJBQTRCO1lBQzVCLHlCQUF5QjtZQUN6QixnQ0FBZ0M7WUFDaEMseUJBQXlCO1lBQ3pCLDhCQUE4QjtZQUM5QixpQ0FBaUM7WUFDakMsNEJBQTRCO1lBQzVCLDZCQUE2QjtZQUM3Qiw0QkFBNEI7U0FDN0IsQ0FBQztJQUNKLENBQUM7SUFFTSxLQUFLLEdBQVU7UUFDcEIsU0FBUyxFQUFFLElBQUk7UUFNZixRQUFRLEVBQUUsU0FBUztRQUNuQixLQUFLLEVBQUUsU0FBUztRQUNoQixRQUFRLEVBQUUsSUFBSTtRQUNkLGVBQWUsRUFBRSxLQUFLO1FBQ3RCLGNBQWMsRUFBRSxLQUFLO1FBQ3JCLGNBQWMsRUFBRSxLQUFLO1FBQ3JCLGlCQUFpQixFQUFFLENB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