feat: convert CodeEditorController into a real umb controller

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -2604,4 +2604,7 @@ export default {
 		routeNotFoundTitle: 'Not found',
 		routeNotFoundDescription: 'The requested route could not be found. Please check the URL and try again.',
 	},
+	codeEditor: {
+		label: 'Code editor',
+	},
 } as UmbLocalizationDictionary;

src/Umbraco.Web.UI.Client/src/packages/code-editor/code-editor.controller.ts

@@ -12,6 +12,7 @@ import type {
 import { themes } from './themes/index.js';
 import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor';
 import { UmbChangeEvent, UmbInputEvent } from '@umbraco-cms/backoffice/event';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 
 //TODO - consider firing change event on blur
 
@@ -27,7 +28,7 @@ import { UmbChangeEvent, UmbInputEvent } from '@umbraco-cms/backoffice/event';
  * @export
  * @class UmbCodeEditor
  */
-export class UmbCodeEditorController {
+export class UmbCodeEditorController extends UmbControllerBase {
 	#host: UmbCodeEditorHost;
 	#editor?: monaco.editor.IStandaloneCodeEditor;
 	/**
@@ -119,6 +120,7 @@ export class UmbCodeEditorController {
 	 * @memberof UmbCodeEditor
 	 */
 	constructor(host: UmbCodeEditorHost, options?: CodeEditorConstructorOptions) {
+		super(host);
 		this.#options = { ...options };
 		this.#host = host;
 		this.#registerThemes();
@@ -138,11 +140,11 @@ export class UmbCodeEditorController {
 	#initiateEvents() {
 		this.#editor?.onDidChangeModelContent(() => {
 			this.#host.code = this.value ?? '';
-			this.#host.dispatchEvent(new UmbInputEvent());
+			this.dispatchEvent(new UmbInputEvent());
 		});
 
 		this.#editor?.onDidChangeModel(() => {
-			this.#host.dispatchEvent(new UmbChangeEvent());
+			this.dispatchEvent(new UmbChangeEvent());
 		});
 
 		this.#editor?.onDidChangeCursorPosition((e) => {
@@ -191,7 +193,7 @@ export class UmbCodeEditorController {
 			language: this.#host.language,
 			theme: this.#host.theme,
 			readOnly: this.#host.readonly,
-			ariaLabel: this.#host.label,
+			ariaLabel: this.#host.label ?? this.#host.localize.term('codeEditor_label'),
 		});
 
 		this.#initiateEvents();

src/Umbraco.Web.UI.Client/src/packages/code-editor/components/code-editor.element.ts

@@ -60,6 +60,7 @@ export class UmbCodeEditorElement extends UmbLitElement implements UmbCodeEditor
 	 */
 	@property()
 	theme: CodeEditorTheme = CodeEditorTheme.Light;
+
 	/**
 	 * Language of the editor. Default is javascript.
 	 *
@@ -68,13 +69,14 @@ export class UmbCodeEditorElement extends UmbLitElement implements UmbCodeEditor
 	 */
 	@property()
 	language: CodeEditorLanguage = 'javascript';
+
 	/**
 	 * Label of the editor. Default is 'Code Editor'.
 	 *
 	 * @memberof UmbCodeEditorElement
 	 */
 	@property()
-	label = 'Code Editor';
+	label?: string;
 
 	//TODO - this should be called a value
 	#code = '';

src/Umbraco.Web.UI.Client/src/packages/code-editor/models/code-editor.model.ts

@@ -1,3 +1,5 @@
+import type { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+
 export type CodeEditorLanguage =
 	| 'csharp'
 	| 'razor'
@@ -15,13 +17,13 @@ export enum CodeEditorTheme {
 	HighContrastDark = 'umb-hc-dark',
 }
 
-export interface UmbCodeEditorHost extends HTMLElement {
+export interface UmbCodeEditorHost extends UmbLitElement {
 	container: HTMLElement;
 	language: CodeEditorLanguage;
 	theme: CodeEditorTheme;
 	code: string;
 	readonly: boolean;
-	label: string;
+	label?: string;
 }
 
 export interface UmbCodeEditorCursorPosition {