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..2f0eceedd4
--- /dev/null
+++ b/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 {
+ 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;
+ };
+ }
+}
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/mocks/data/document/document.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/document/document.data.ts
index 09ec5524e0..cbdce9da9f 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/document/document.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/document/document.data.ts
@@ -843,7 +843,7 @@ export const data: Array = [
Some value for the RTE with an external link and an internal link foo foo
-
+
End of test content
`,
@@ -861,7 +861,7 @@ export const data: Array = [
Macro alias: TestMacro
-
+
End of test content
`,
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 db57cba91e..db32b07231 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,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?
diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/manifests.ts
index 4de8b54d84..1d192608da 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/manifests.ts
+++ b/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 = [
+ {
+ 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'),
},
];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/tiptap-image.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/tiptap-image.extension.ts
new file mode 100644
index 0000000000..5e0f0f3b81
--- /dev/null
+++ b/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 [];
+ }
+}