From f2e70c8f63d28d1abb141c9a34c8422240b7329e Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Wed, 18 Sep 2024 12:55:06 +0200 Subject: [PATCH 1/5] chore: add more attributes to mock image data --- .../src/mocks/data/document/document.data.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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

- Jason + Jason

End of test content

`, @@ -861,7 +861,7 @@ export const data: Array = [

Macro alias: TestMacro

- Jason + Jason

End of test content

`, 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 2/5] 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? From eab3232374d83f9fe267566c88c17bbea721e716 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Wed, 18 Sep 2024 13:06:14 +0200 Subject: [PATCH 3/5] chore: cleanup imports --- .../external/tiptap/extensions/tiptap-umb-image.extension.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 index 899c775895..e2f1e7f630 100644 --- 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 @@ -1,5 +1,4 @@ -import { nodeInputRule } from '@tiptap/core'; -import Image, { inputRegex } from '@tiptap/extension-image'; +import Image from '@tiptap/extension-image'; export const UmbImage = Image.extend({ addAttributes() { From e61f4af84c3e98ca840b71df6f69f2aad5441905 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Wed, 18 Sep 2024 13:06:32 +0200 Subject: [PATCH 4/5] feat: register UmbImage as an extension --- .../components/input-tiptap/input-tiptap.element.ts | 2 -- .../src/packages/rte/tiptap/extensions/manifests.ts | 8 ++++++++ .../rte/tiptap/extensions/tiptap-image.extension.ts | 12 ++++++++++++ 3 files changed, 20 insertions(+), 2 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/tiptap-image.extension.ts 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 57d42f1cbe..897355b90d 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, - UmbImage, Italic, Link, ListItem, @@ -94,7 +93,6 @@ export class UmbInputTiptapElement extends UmbFormControlMixin(UmbLitElement, '' Code, CodeBlock, HorizontalRule, - 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? 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 []; + } +} From df78ab6d7ac3a6c5b0567352f020e50927007a74 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Wed, 18 Sep 2024 14:25:04 +0200 Subject: [PATCH 5/5] feat: declare module for updated setImage function --- .../extensions/tiptap-umb-image.extension.ts | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) 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 index e2f1e7f630..2f0eceedd4 100644 --- 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 @@ -22,3 +22,28 @@ export const UmbImage = Image.extend({ }; }, }); + +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; + }; + } +}