From 6b1d80cedea6fda3822e60527adf4ef740aa4e91 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Thu, 26 Sep 2024 13:58:47 +0200
Subject: [PATCH] feat: add support for providing preconfigured altText and
 caption to media-caption modal

---
 .../media-caption-alt-text-modal.element.ts   | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-caption-alt-text/media-caption-alt-text-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-caption-alt-text/media-caption-alt-text-modal.element.ts
index adb87d2e7d..40581dd0a5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-caption-alt-text/media-caption-alt-text-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-caption-alt-text/media-caption-alt-text-modal.element.ts
@@ -27,7 +27,7 @@ export class UmbMediaCaptionAltTextModalElement extends UmbModalBaseElement<
 		const { data } = await this.#mediaDetailRepository.requestByUnique(this.#mediaUnique);
 		if (!data) return;
 
-		this.value = { altText: data.variants[0].name, caption: undefined, url: data.urls[0]?.url ?? '' };
+		this.value = { ...this.value, altText: this.value.altText ?? data.variants[0].name, url: data.urls[0]?.url ?? '' };
 	}
 
 	override render() {
@@ -46,11 +46,14 @@ export class UmbMediaCaptionAltTextModalElement extends UmbModalBaseElement<
 					<uui-input
 						id="caption"
 						label="caption"
+						.value=${this.value?.caption ?? ''}
 						@input=${(e: UUIInputEvent) =>
 							(this.value = { ...this.value, caption: e.target.value as string })}></uui-input>
 
-					<img src=${this.value?.url ?? ''} alt=${this.value?.altText ?? ''} />
-					${this.value?.caption ?? ''}
+					<figure id="mainobject">
+						<img src=${this.value?.url ?? ''} alt=${this.value?.altText ?? ''} />
+						<figcaption>${this.value?.caption ?? ''}</figcaption>
+					</figure>
 				</div>
 				<div slot="actions">
 					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
@@ -64,7 +67,7 @@ export class UmbMediaCaptionAltTextModalElement extends UmbModalBaseElement<
 		`;
 	}
 
-	static override styles = [
+	static override readonly styles = [
 		css`
 			uui-input {
 				margin-bottom: var(--uui-size-layout-1);
@@ -74,6 +77,17 @@ export class UmbMediaCaptionAltTextModalElement extends UmbModalBaseElement<
 				display: flex;
 				flex-direction: column;
 			}
+
+			#mainobject {
+				display: flex;
+				flex-direction: column;
+				max-width: 100%;
+
+				img {
+					max-width: 100%;
+					height: auto;
+				}
+			}
 		`,
 	];
 }