Merge pull request #2311 from umbraco/v15/feature/tiptap-image

Feature: Add images to Tiptap

src/Umbraco.Web.UI.Client/src/external/tiptap/extensions/tiptap-umb-image.extension.ts

@@ -0,0 +1,49 @@
+import Image 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,
+			},
+		};
+	},
+});
+
+declare module '@tiptap/core' {
+	interface Commands<ReturnType> {
+		umbImage: {
+			/**
+			 * Add an image
+			 * @param options The image attributes
+			 * @example
+			 * editor
+			 *   .commands
+			 *   .setImage({ src: 'https://tiptap.dev/logo.png', alt: 'tiptap', title: 'tiptap logo' })
+			 */
+			setImage: (options: {
+				src: string;
+				alt?: string;
+				title?: string;
+				width?: string;
+				height?: string;
+				loading?: string;
+				srcset?: string;
+				sizes?: string;
+			}) => ReturnType;
+		};
+	}
+}

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/mocks/data/document/document.data.ts

@@ -843,7 +843,7 @@ export const data: Array<UmbMockDocumentModel> = [
 							Some value for the RTE with an <a href="https://google.com">external link</a> and an <a type="document" href="/{localLink:c05da24d-7740-447b-9cdc-bd8ce2172e38}">internal link</a> foo foo
 						</p>
 						<p>
-							<img width="500" alt="Jason" src="/umbraco/backoffice/assets/login.jpg" />
+							<img width="500" height="332" loading="lazy" alt="Jason" src="/umbraco/backoffice/assets/login.jpg" />
 						</p>
 						<p>End of test content</p>
 					`,
@@ -861,7 +861,7 @@ export const data: Array<UmbMockDocumentModel> = [
 						</p>
 						<div class="umb-macro-holder TestMacro umb-macro-mce_1 mceNonEditable"><!-- <?UMBRACO_MACRO macroAlias="TestMacro" /> --><ins>Macro alias: <strong>TestMacro</strong></ins></div>
 						<p>
-							<img width="500" alt="Jason" src="/umbraco/backoffice/assets/login.jpg" />
+							<img width="500" height="332" loading="lazy" alt="Jason" src="/umbraco/backoffice/assets/login.jpg" />
 						</p>
 						<p>End of test content</p>
 					`,

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts

@@ -15,7 +15,6 @@ import {
 	HardBreak,
 	History,
 	HorizontalRule,
-	Image,
 	Italic,
 	Link,
 	ListItem,
@@ -101,7 +100,6 @@ export class UmbInputTiptapElement extends UmbFormControlMixin(UmbLitElement, un
 				Code,
 				CodeBlock,
 				HorizontalRule,
-				Image.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?

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/manifests.ts

@@ -1,10 +1,18 @@
 import type { ManifestTiptapExtension } from './tiptap-extension.js';
 
 export const manifests: Array<ManifestTiptapExtension> = [
+	{
+		type: 'tiptapExtension',
+		alias: 'Umb.Tiptap.Image',
+		name: 'Image Tiptap Extension',
+		weight: 1000,
+		api: () => import('./tiptap-image.extension.js'),
+	},
 	{
 		type: 'tiptapExtension',
 		alias: 'Umb.Tiptap.MediaPicker',
 		name: 'Media Picker Tiptap Extension',
+		weight: 900,
 		api: () => import('./tiptap-mediapicker.extension.js'),
 	},
 ];

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/tiptap-image.extension.ts

@@ -0,0 +1,12 @@
+import { UmbTiptapExtensionBase } from './types.js';
+import { UmbImage } from '@umbraco-cms/backoffice/external/tiptap';
+
+export default class UmbTiptapImageExtension extends UmbTiptapExtensionBase {
+	getExtensions() {
+		return [UmbImage.configure({ inline: true })];
+	}
+
+	getToolbarButtons() {
+		return [];
+	}
+}