yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Code editor modal: refactored to remove loadCodeEditor function

Browse Source
This commit is contained in:
leekelleher
2024-07-18 17:57:45 +01:00
committed by Jacob Overgaard
parent a14dd5b8b6
commit 302639d01c
1 changed files with 19 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts
View File

@@ -1,22 +1,17 @@
import { css, html, ifDefined, customElement, query } from '@umbraco-cms/backoffice/external/lit';
import { loadCodeEditor, type UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
import type { UmbCodeEditorModalData, UmbCodeEditorModalValue } from '@umbraco-cms/backoffice/modal';
import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
import type { UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
import type { UmbCodeEditorModalData, UmbCodeEditorModalValue } from '@umbraco-cms/backoffice/modal';
@customElement('umb-code-editor-modal')
import '@umbraco-cms/backoffice/code-editor';
const elementName = 'umb-code-editor-modal';
@customElement(elementName)
export class UmbCodeEditorModalElement extends UmbModalBaseElement<UmbCodeEditorModalData, UmbCodeEditorModalValue> {
#isCodeEditorReady = new UmbBooleanState(false);
isCodeEditorReady = this.#isCodeEditorReady.asObservable();
@query('umb-code-editor')
_codeEditor?: UmbCodeEditorElement;
constructor() {
super();
this.#loadCodeEditor();
}
#handleConfirm() {
this.value = { content: this._codeEditor?.editor?.monacoEditor?.getValue() ?? '' };
this.modalContext?.submit();
@@ -25,34 +20,15 @@ export class UmbCodeEditorModalElement extends UmbModalBaseElement<UmbCodeEditor
#handleCancel() {
this.modalContext?.reject();
}
async #loadCodeEditor() {
try {
await loadCodeEditor();
this.#isCodeEditorReady.setValue(true);
} catch (error) {
console.error(error);
}
}
#renderCodeEditor() {
return html`<umb-code-editor
language=${ifDefined(this.data?.language)}
.code=${this.data?.content ?? ''}></umb-code-editor>`;
}
#renderLoading() {
return html`<div id="loader-container">
<uui-loader></uui-loader>
</div>`;
}
override render() {
return html`
<umb-body-layout .headline=${this.data?.headline ?? 'Code Editor'}>
<div id="editor-box">${this.isCodeEditorReady ? this.#renderCodeEditor() : this.#renderLoading()}</div>
<div id="editor-box">${this.#renderCodeEditor()}</div>
<div slot="actions">
<uui-button id="cancel" label="Cancel" @click="${this.#handleCancel}">Cancel</uui-button>
<uui-button
id="cancel"
label=${this.localize.term('general_cancel')}
@click=${this.#handleCancel}></uui-button>
<uui-button
id="confirm"
color="${this.data?.color || 'positive'}"
@@ -64,6 +40,12 @@ export class UmbCodeEditorModalElement extends UmbModalBaseElement<UmbCodeEditor
`;
}
#renderCodeEditor() {
return html`
<umb-code-editor language=${ifDefined(this.data?.language)} .code=${this.data?.content ?? ''}></umb-code-editor>
`;
}
static override styles = [
css`
#editor-box {
@@ -83,6 +65,6 @@ export default UmbCodeEditorModalElement;
declare global {
interface HTMLElementTagNameMap {
'umb-code-editor-modal': UmbCodeEditorModalElement;
[elementName]: UmbCodeEditorModalElement;
}
}