From 7290f47be9438377dcd7d5832d66a142fa602faf Mon Sep 17 00:00:00 2001
From: Nathan Woulfe <nathan@nathanw.com.au>
Date: Mon, 12 Jun 2023 20:40:43 +1000
Subject: [PATCH] update code editor modal to init editor correctly

---
 .../code-editor/code-editor-modal.element.ts  | 58 +++++++++++++------
 .../plugins/tiny-mce-code-editor.plugin.ts    |  4 +-
 .../code-editor/code-editor.element.ts        |  2 +
 3 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts
index 1a36ae30e5..83498c0147 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts
@@ -1,17 +1,24 @@
-import { customElement, query } from 'lit/decorators.js';
-import { css, html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
-import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
+import { css, html, ifDefined, customElement, query } from '@umbraco-cms/backoffice/external/lit';
+import { loadCodeEditor, type UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
+import { UUITextStyles, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbCodeEditorModalData, UmbCodeEditorModalResult } from '@umbraco-cms/backoffice/modal';
-import { UmbInputEvent } from '@umbraco-cms/backoffice/events';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
+import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
 
 @customElement('umb-code-editor-modal')
 export class UmbCodeEditorModalElement extends UmbModalBaseElement<UmbCodeEditorModalData, UmbCodeEditorModalResult> {
+	#isCodeEditorReady = new UmbBooleanState(false);
+	isCodeEditorReady = this.#isCodeEditorReady.asObservable();
+
 	@query('umb-code-editor')
 	_codeEditor?: UmbCodeEditorElement;
 
+	constructor() {
+		super();
+
+		this.#loadCodeEditor();
+	}
+
 	#handleConfirm() {
 		this.modalContext?.submit({ content: this.data?.content ?? '' });
 	}
@@ -20,25 +27,42 @@ export class UmbCodeEditorModalElement extends UmbModalBaseElement<UmbCodeEditor
 		this.modalContext?.reject();
 	}
 
+	async #loadCodeEditor() {
+		try {
+			await loadCodeEditor();
+			this.#isCodeEditorReady.next(true);
+		} catch (error) {
+			console.error(error);
+		}
+	}
+
 	// TODO => debounce?
-	#onCodeEditorInput(e: UmbInputEvent) {
+	#onCodeEditorInput(e: UUIInputEvent) {
 		e.preventDefault();
 		if (!this.data) {
 			return;
 		}
 
-		this.data.content = this._codeEditor?.code ?? '';		
+		this.data.content = this._codeEditor?.code ?? '';
+	}
+
+	#renderCodeEditor() {
+		return html`<umb-code-editor
+			language=${ifDefined(this.data?.language)}
+			.code=${this.data?.content ?? ''}
+			@input=${this.#onCodeEditorInput}></umb-code-editor>`;
+	}
+
+	#renderLoading() {
+		return html`<div id="loader-container">
+			<uui-loader></uui-loader>
+		</div>`;
 	}
 
 	render() {
 		return html`
 			<umb-body-layout .headline=${this.data?.headline ?? 'Code Editor'}>
-				<div id="editor-box">
-					<umb-code-editor
-						language=${ifDefined(this.data?.language)}
-						.code=${this.data?.content ?? ''}
-						@input=${this.#onCodeEditorInput}></umb-code-editor>
-				</div>
+				<div id="editor-box">${this.isCodeEditorReady ? this.#renderCodeEditor() : this.#renderLoading()}</div>
 				<div slot="actions">
 					<uui-button id="cancel" label="Cancel" @click="${this.#handleCancel}">Cancel</uui-button>
 					<uui-button
@@ -57,12 +81,12 @@ export class UmbCodeEditorModalElement extends UmbModalBaseElement<UmbCodeEditor
 		css`
 			#editor-box {
 				padding: var(--uui-box-default-padding, var(--uui-size-space-5, 18px));
-				height:100%;
-				display:flex;
+				height: 100%;
+				display: flex;
 			}
 
 			umb-code-editor {
-				width:100%;
+				width: 100%;
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/tiny-mce/plugins/tiny-mce-code-editor.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/tiny-mce/plugins/tiny-mce-code-editor.plugin.ts
index a7c68ae74c..35e14f57c5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/tiny-mce/plugins/tiny-mce-code-editor.plugin.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/tiny-mce/plugins/tiny-mce-code-editor.plugin.ts
@@ -1,3 +1,4 @@
+import { loadCodeEditor } from '@umbraco-cms/backoffice/code-editor';
 import { TinyMcePluginArguments, UmbTinyMcePluginBase } from '@umbraco-cms/backoffice/extension-registry';
 import {
 	UmbCodeEditorModalData,
@@ -6,10 +7,11 @@ import {
 	UmbModalManagerContext,
 	UMB_MODAL_MANAGER_CONTEXT_TOKEN,
 } from '@umbraco-cms/backoffice/modal';
+import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
 
 export default class UmbTinyMceCodeEditorPlugin extends UmbTinyMcePluginBase {
 	#modalContext?: UmbModalManagerContext;
-
+	
 	constructor(args: TinyMcePluginArguments) {		
 		super(args);
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/code-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/code-editor.element.ts
index d74d7fa607..6dc5f02010 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/code-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/code-editor.element.ts
@@ -103,10 +103,12 @@ export class UmbCodeEditorElement extends UmbLitElement implements UmbCodeEditor
 				this.theme = themeAlias ? this.#translateTheme(themeAlias) : CodeEditorTheme.Light;
 			});
 		});
+		debugger;
 	}
 
 	firstUpdated() {
 		this.#editor = new UmbCodeEditorController(this);
+		debugger;
 	}
 
 	protected updated(_changedProperties: PropertyValues<this>): void {