feat: creates and uses an extension of Image that allows more attributes

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,
+			},
+		};
+	},
+});

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';

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?