Scripts workspace: refactored to remove loadCodeEditor function

src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/script-workspace-editor.element.ts

@@ -1,9 +1,10 @@
 import { UMB_SCRIPT_WORKSPACE_CONTEXT } from './script-workspace.context-token.js';
-import type { UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
-import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit';
-import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
+import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import type { UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
+import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
+
+import '@umbraco-cms/backoffice/code-editor';
 
 @customElement('umb-script-workspace-editor')
 export class UmbScriptWorkspaceEditorElement extends UmbLitElement {
@@ -13,9 +14,6 @@ export class UmbScriptWorkspaceEditorElement extends UmbLitElement {
 	@state()
 	private _content?: string | null = '';
 
-	@state()
-	private _ready?: boolean = false;
-
 	@state()
 	private _isNew?: boolean;
 
@@ -35,10 +33,6 @@ export class UmbScriptWorkspaceEditorElement extends UmbLitElement {
 				this._content = content;
 			});
 
-			this.observe(this.#context.isCodeEditorReady, (isReady) => {
-				this._ready = isReady;
-			});
-
 			this.observe(this.#context.isNew, (isNew) => {
 				this._isNew = isNew;
 			});
@@ -57,53 +51,46 @@ export class UmbScriptWorkspaceEditorElement extends UmbLitElement {
 		this.#context?.setContent(value);
 	}
 
-	#renderCodeEditor() {
-		return html`<umb-code-editor
-			language="javascript"
-			id="content"
-			.code=${this._content ?? ''}
-			@input=${this.#onCodeEditorInput}></umb-code-editor>`;
+	override render() {
+		if (this._isNew === undefined) return;
+		return html`
+			<umb-workspace-editor alias="Umb.Workspace.Script">
+				<div id="workspace-header" slot="header">
+					<uui-input
+						placeholder="Enter name..."
+						.value=${this._name}
+						@input=${this.#onNameInput}
+						label="Script name"
+						?readonly=${this._isNew === false}
+						${umbFocus()}>
+					</uui-input>
+				</div>
+				<uui-box>
+					<!-- the div below in the header is to make the box display nicely with code editor -->
+					<div slot="header"></div>
+					${this.#renderCodeEditor()}
+				</uui-box>
+			</umb-workspace-editor>
+		`;
 	}
 
-	override render() {
-		return this._isNew !== undefined
-			? html`<umb-workspace-editor alias="Umb.Workspace.Script">
-					<div id="workspace-header" slot="header">
-						<uui-input
-							placeholder="Enter name..."
-							.value=${this._name}
-							@input=${this.#onNameInput}
-							label="Script name"
-							?readonly=${this._isNew === false}
-							${umbFocus()}></uui-input>
-					</div>
-					<uui-box>
-						<!-- the div below in the header is to make the box display nicely with code editor -->
-						<div slot="header"></div>
-						${this._ready
-							? this.#renderCodeEditor()
-							: html`<div id="loader-container">
-									<uui-loader></uui-loader>
-								</div>`}
-					</uui-box>
-				</umb-workspace-editor>`
-			: nothing;
+	#renderCodeEditor() {
+		return html`
+			<umb-code-editor
+				id="content"
+				language="javascript"
+				.code=${this._content ?? ''}
+				@input=${this.#onCodeEditorInput}></umb-code-editor>
+		`;
 	}
 
 	static override styles = [
-		UmbTextStyles,
 		css`
 			:host {
 				display: block;
 				width: 100%;
 			}
 
-			#loader-container {
-				display: grid;
-				place-items: center;
-				min-height: calc(100dvh - 260px);
-			}
-
 			umb-code-editor {
 				--editor-height: calc(100dvh - 260px);
 			}

src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/script-workspace.context.ts

@@ -3,7 +3,7 @@ import type { UmbScriptDetailModel } from '../types.js';
 import { UMB_SCRIPT_ENTITY_TYPE } from '../entity.js';
 import { UMB_SCRIPT_WORKSPACE_ALIAS } from './manifests.js';
 import { UmbScriptWorkspaceEditorElement } from './script-workspace-editor.element.js';
-import { UmbBooleanState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import {
 	UmbSubmittableWorkspaceContextBase,
@@ -11,7 +11,6 @@ import {
 	type UmbSubmittableWorkspaceContext,
 	UmbWorkspaceIsNewRedirectController,
 } from '@umbraco-cms/backoffice/workspace';
-import { loadCodeEditor } from '@umbraco-cms/backoffice/code-editor';
 import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
 import {
 	UmbRequestReloadChildrenOfEntityEvent,
@@ -37,12 +36,8 @@ export class UmbScriptWorkspaceContext
 	readonly name = this.#data.asObservablePart((data) => data?.name);
 	readonly content = this.#data.asObservablePart((data) => data?.content);
 
-	#isCodeEditorReady = new UmbBooleanState(false);
-	readonly isCodeEditorReady = this.#isCodeEditorReady.asObservable();
-
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_SCRIPT_WORKSPACE_ALIAS);
-		this.#loadCodeEditor();
 
 		this.routes.setRoutes([
 			{
@@ -76,15 +71,6 @@ export class UmbScriptWorkspaceContext
 		this.#data.setValue(undefined);
 	}
 
-	async #loadCodeEditor() {
-		try {
-			await loadCodeEditor();
-			this.#isCodeEditorReady.setValue(true);
-		} catch (error) {
-			console.error(error);
-		}
-	}
-
 	getEntityType(): string {
 		return UMB_SCRIPT_ENTITY_TYPE;
 	}