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

@@ -0,0 +1,5 @@
+---
+"@directus/app": patch
+---
+
+Introduced option to control lazy loading attribute for images in WYSIWYG interface

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

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();

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