From 91d88013db1da19743f4274483106928e49db788 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Mon, 22 Jul 2024 15:08:56 +0200
Subject: [PATCH] feat: add properties for common monaco options

---
 .../components/code-editor.element.ts         | 62 ++++++++++++++++---
 .../components/code-editor.stories.ts         |  2 +-
 2 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/code-editor/components/code-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/components/code-editor.element.ts
index 26dbf496f4..95060f1785 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/code-editor/components/code-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/code-editor/components/code-editor.element.ts
@@ -1,5 +1,6 @@
 import type { UmbCodeEditorController } from '../code-editor.controller.js';
 import {
+	type CodeEditorConstructorOptions,
 	CodeEditorTheme,
 	UmbCodeEditorLoadedEvent,
 	type CodeEditorLanguage,
@@ -80,6 +81,7 @@ export class UmbCodeEditorElement extends UmbLitElement implements UmbCodeEditor
 
 	//TODO - this should be called a value
 	#code = '';
+
 	/**
 	 * Value of the editor. Default is empty string.
 	 *
@@ -99,14 +101,39 @@ export class UmbCodeEditorElement extends UmbLitElement implements UmbCodeEditor
 		}
 		this.requestUpdate('code', oldValue);
 	}
+
 	/**
-	 * Whether the editor is readonly. Default is false.
+	 * Whether the editor is readonly.
 	 *
 	 * @memberof UmbCodeEditorElement
 	 */
 	@property({ type: Boolean, attribute: 'readonly' })
 	readonly = false;
 
+	/**
+	 * Whether to show line numbers.
+	 *
+	 * @memberof UmbCodeEditorElement
+	 */
+	@property({ type: Boolean, attribute: 'disable-line-numbers' })
+	disableLineNumbers = false;
+
+	/**
+	 * Whether to show minimap.
+	 *
+	 * @memberof UmbCodeEditorElement
+	 */
+	@property({ type: Boolean, attribute: 'disable-minimap' })
+	disableMinimap = false;
+
+	/**
+	 * Whether to enable word wrap. Default is false.
+	 *
+	 * @memberof UmbCodeEditorElement
+	 */
+	@property({ type: Boolean, attribute: 'word-wrap' })
+	wordWrap = false;
+
 	@state()
 	private _loading = true;
 
@@ -132,21 +159,42 @@ export class UmbCodeEditorElement extends UmbLitElement implements UmbCodeEditor
 		this._styles = styles;
 
 		const { UmbCodeEditorController } = await import('../code-editor.controller.js');
-		this.#editor = new UmbCodeEditorController(this);
+
+		// Options
+		this.#editor = new UmbCodeEditorController(this, this.#constructorOptions());
 
 		this._loading = false;
 		this.dispatchEvent(new UmbCodeEditorLoadedEvent());
 	}
 
 	protected override updated(_changedProperties: PropertyValues<this>): void {
-		if (_changedProperties.has('theme') || _changedProperties.has('language')) {
-			this.#editor?.updateOptions({
-				theme: this.theme,
-				language: this.language,
-			});
+		if (
+			_changedProperties.has('theme') ||
+			_changedProperties.has('language') ||
+			_changedProperties.has('disableLineNumbers') ||
+			_changedProperties.has('disableMinimap') ||
+			_changedProperties.has('wordWrap') ||
+			_changedProperties.has('readonly') ||
+			_changedProperties.has('code') ||
+			_changedProperties.has('label')
+		) {
+			this.#editor?.updateOptions(this.#constructorOptions());
 		}
 	}
 
+	#constructorOptions(): CodeEditorConstructorOptions {
+		return {
+			language: this.language,
+			theme: this.theme,
+			ariaLabel: this.label ?? this.localize.term('codeEditor_label'),
+			lineNumbers: !this.disableLineNumbers,
+			minimap: !this.disableMinimap,
+			wordWrap: this.wordWrap ? 'on' : 'off',
+			readOnly: this.readonly,
+			value: this.code,
+		};
+	}
+
 	#translateTheme(theme: string) {
 		switch (theme) {
 			case 'umb-light-theme':
diff --git a/src/Umbraco.Web.UI.Client/src/packages/code-editor/components/code-editor.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/components/code-editor.stories.ts
index ac7b5ba5bb..f9f096bf96 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/code-editor/components/code-editor.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/code-editor/components/code-editor.stories.ts
@@ -9,7 +9,7 @@ import './code-editor.element.js';
 const meta: Meta<UmbCodeEditorElement> = {
 	title: 'Components/Code Editor',
 	component: 'umb-code-editor',
-	decorators: [(story) => html`<div style="--editor-height: 800px">${story()}</div>`],
+	decorators: [(story) => html`<div style="--editor-height: 400px">${story()}</div>`],
 	parameters: { layout: 'fullscreen' },
 	argTypes: {
 		theme: {