From 84ecefabf943b1e2e6faba40b3137f290ccc61b2 Mon Sep 17 00:00:00 2001
From: Nitwel <mail@nitwel.de>
Date: Sun, 6 Aug 2023 04:02:10 +0200
Subject: [PATCH] Add option for lazy loading image (#19353)

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
Co-authored-by: ian <licitdev@gmail.com>
---
 .changeset/clever-goats-relate.md                           | 5 +++++
 .../input-rich-text-html/input-rich-text-html.vue           | 4 ++++
 app/src/interfaces/input-rich-text-html/useImage.ts         | 6 +++++-
 app/src/lang/translations/en-US.yaml                        | 2 ++
 4 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/clever-goats-relate.md

diff --git a/.changeset/clever-goats-relate.md b/.changeset/clever-goats-relate.md
new file mode 100644
index 0000000000..7d674e2855
--- /dev/null
+++ b/.changeset/clever-goats-relate.md
@@ -0,0 +1,5 @@
+---
+"@directus/app": patch
+---
+
+Introduced option to control lazy loading attribute for images in WYSIWYG interface
diff --git a/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue b/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue
index a463780b40..188c1f3e31 100644
--- a/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue
+++ b/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue
@@ -96,6 +96,10 @@
 								<v-input v-model="imageSelection.height" :disabled="!!imageSelection.transformationKey" />
 							</div>
 						</template>
+						<div class="field half">
+							<div class="type-label">{{ t('wysiwyg_options.lazy_loading') }}</div>
+							<v-checkbox v-model="imageSelection.lazy" block :label="t('wysiwyg_options.lazy_loading_label')" />
+						</div>
 						<div v-if="storageAssetTransform !== 'none' && storageAssetPresets.length > 0" class="field half">
 							<div class="type-label">{{ t('transformation_preset_key') }}</div>
 							<v-select
diff --git a/app/src/interfaces/input-rich-text-html/useImage.ts b/app/src/interfaces/input-rich-text-html/useImage.ts
index b42235e5f0..4a158c8b71 100644
--- a/app/src/interfaces/input-rich-text-html/useImage.ts
+++ b/app/src/interfaces/input-rich-text-html/useImage.ts
@@ -8,6 +8,7 @@ import { SettingsStorageAssetPreset } from '@directus/types';
 type ImageSelection = {
 	imageUrl: string;
 	alt: string;
+	lazy?: boolean;
 	width?: number;
 	height?: number;
 	transformationKey?: string | null;
@@ -67,6 +68,7 @@ export default function useImage(
 				const imageUrl = node.getAttribute('src');
 				const imageUrlParams = imageUrl ? new URL(imageUrl).searchParams : undefined;
 				const alt = node.getAttribute('alt');
+				const lazy = node.getAttribute('loading') === 'lazy';
 				const width = Number(imageUrlParams?.get('width') || undefined) || undefined;
 				const height = Number(imageUrlParams?.get('height') || undefined) || undefined;
 				const transformationKey = imageUrlParams?.get('key') || undefined;
@@ -84,6 +86,7 @@ export default function useImage(
 				imageSelection.value = {
 					imageUrl,
 					alt,
+					lazy,
 					width: selectedPreset.value ? selectedPreset.value.width ?? undefined : width,
 					height: selectedPreset.value ? selectedPreset.value.height ?? undefined : height,
 					transformationKey,
@@ -119,6 +122,7 @@ export default function useImage(
 		imageSelection.value = {
 			imageUrl: replaceUrlAccessToken(assetUrl, imageToken.value),
 			alt: image.title,
+			lazy: false,
 			width: image.width,
 			height: image.height,
 			previewUrl: replaceUrlAccessToken(assetUrl, imageToken.value ?? getToken()),
@@ -152,7 +156,7 @@ export default function useImage(
 		}
 
 		const resizedImageUrl = addQueryToPath(newURL.toString(), queries);
-		const imageHtml = `<img src="${resizedImageUrl}" alt="${img.alt}" />`;
+		const imageHtml = `<img src="${resizedImageUrl}" alt="${img.alt}" ${img.lazy ? 'loading="lazy" ' : ''}/>`;
 		editor.value.selection.setContent(imageHtml);
 		editor.value.undoManager.add();
 		closeImageDrawer();
diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index 2aa294c88c..7a3f3a4496 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -961,6 +961,8 @@ wysiwyg_options:
   source_code: Edit Source Code
   fullscreen: Full Screen
   directionality: Directionality
+  lazy_loading: Lazy Load Image
+  lazy_loading_label: Enable Lazy Loading
 dropdown: Dropdown
 choices: Choices
 choices_option_configured_incorrectly: Choices configured incorrectly