From 1efdc3d98af58979a0da8a63da985d253214172c Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Wed, 18 Sep 2024 12:55:24 +0200
Subject: [PATCH] feat: creates and uses an extension of Image that allows more
 attributes

---
 .../extensions/tiptap-umb-image.extension.ts  | 25 +++++++++++++++++++
 .../src/external/tiptap/index.ts              |  2 ++
 .../input-tiptap/input-tiptap.element.ts      |  4 +--
 3 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/external/tiptap/extensions/tiptap-umb-image.extension.ts

diff --git a/src/Umbraco.Web.UI.Client/src/external/tiptap/extensions/tiptap-umb-image.extension.ts b/src/Umbraco.Web.UI.Client/src/external/tiptap/extensions/tiptap-umb-image.extension.ts
new file mode 100644
index 0000000000..899c775895
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/external/tiptap/extensions/tiptap-umb-image.extension.ts
@@ -0,0 +1,25 @@
+import { nodeInputRule } from '@tiptap/core';
+import Image, { inputRegex } from '@tiptap/extension-image';
+
+export const UmbImage = Image.extend({
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			width: {
+				default: '100%',
+			},
+			height: {
+				default: null,
+			},
+			loading: {
+				default: null,
+			},
+			srcset: {
+				default: null,
+			},
+			sizes: {
+				default: null,
+			},
+		};
+	},
+});
diff --git a/src/Umbraco.Web.UI.Client/src/external/tiptap/index.ts b/src/Umbraco.Web.UI.Client/src/external/tiptap/index.ts
index e050542465..5c6fabf333 100644
--- a/src/Umbraco.Web.UI.Client/src/external/tiptap/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/external/tiptap/index.ts
@@ -23,3 +23,5 @@ export { Strike } from '@tiptap/extension-strike';
 export { TextAlign } from '@tiptap/extension-text-align';
 export { Underline } from '@tiptap/extension-underline';
 export { Image } from '@tiptap/extension-image';
+// CUSTOM EXTENSIONS
+export * from './extensions/tiptap-umb-image.extension.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts
index 07d0542e0c..57d42f1cbe 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts
@@ -15,7 +15,7 @@ import {
 	HardBreak,
 	History,
 	HorizontalRule,
-	Image,
+	UmbImage,
 	Italic,
 	Link,
 	ListItem,
@@ -94,7 +94,7 @@ export class UmbInputTiptapElement extends UmbFormControlMixin(UmbLitElement, ''
 				Code,
 				CodeBlock,
 				HorizontalRule,
-				Image.configure({ inline: true }),
+				UmbImage.configure({ inline: true }),
 				Italic,
 				Link.configure({ openOnClick: false }),
 				ListItem, // This is needed for BulletList and OrderedList. When moving to an umbraco-extension, how should we handle shared extensions?