Merge remote-tracking branch 'origin/v15/feature/tiptap' into v15/feature/tiptap-media-upload

src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json

@@ -1141,6 +1141,10 @@
 			"file": "monitor.svg",
 			"legacy": true
 		},
+		{
+			"name": "icon-image-up",
+			"file": "image-up.svg"
+		},
 		{
 			"_name": "icon-inactive-line",
 			"____file": "inactive-line.svg"

src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts

@@ -923,6 +923,10 @@ name: "icon-imac",
 legacy: true,
 path: () => import("./icons/icon-imac.js"),
 },{
+name: "icon-image-up",
+
+path: () => import("./icons/icon-image-up.js"),
+},{
 name: "icon-inbox-full",
 legacy: true,
 path: () => import("./icons/icon-inbox-full.js"),

src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-image-up.ts

@@ -0,0 +1,17 @@
+export default `<!-- @license lucide-static v0.424.0 - ISC -->
+<svg
+  class="lucide lucide-image-up"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.75"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.814.014L6 21" />
+  <path d="m14 19.5 3-3 3 3" />
+  <path d="M17 22v-5.5" />
+  <circle cx="9" cy="9" r="2" />
+</svg>
+`;

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

@@ -43,6 +43,7 @@ export class UmbTiptapFixedMenuElement extends UmbLitElement {
 			color: var(--color-text);
 			display: grid;
 			grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
+			gap: 4px;
 			position: sticky;
 			top: -25px;
 			left: 0px;

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

@@ -1,5 +1,5 @@
-import type { ManifestTiptapExtensionButtonKind } from './tiptap-extension.js';
-import type { UmbTiptapToolbarElementApi } from './types.js';
+import type { ManifestTiptapExtensionButtonKind } from '../../extensions/tiptap-extension.js';
+import type { UmbTiptapToolbarElementApi } from '../../extensions/types.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 import { customElement, html, ifDefined, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/blockquote.extension.ts

@@ -1,22 +1,7 @@
 import { UmbTiptapToolbarElementApiBase } from '../types.js';
-import type { ManifestTiptapExtensionButtonKind } from '../tiptap-extension.js';
 import { Blockquote } from '@umbraco-cms/backoffice/external/tiptap';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
-export const manifest: ManifestTiptapExtensionButtonKind = {
-	type: 'tiptapExtension',
-	kind: 'button',
-	alias: 'Umb.Tiptap.Blockquote',
-	name: 'Blockquote Tiptap Extension',
-	api: () => import('./blockquote.extension.js'),
-	weight: 995,
-	meta: {
-		alias: 'blockquote',
-		icon: 'icon-blockquote',
-		label: 'Blockquote',
-	},
-};
-
 export default class UmbTiptapBlockquoteExtensionApi extends UmbTiptapToolbarElementApiBase {
 	getTiptapExtensions = () => [Blockquote];
 

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/bold.extension.ts

@@ -1,22 +1,7 @@
 import { UmbTiptapToolbarElementApiBase } from '../types.js';
-import type { ManifestTiptapExtensionButtonKind } from '../tiptap-extension.js';
 import { Bold } from '@umbraco-cms/backoffice/external/tiptap';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
-export const manifest: ManifestTiptapExtensionButtonKind = {
-	type: 'tiptapExtension',
-	kind: 'button',
-	alias: 'Umb.Tiptap.Bold',
-	name: 'Bold Tiptap Extension',
-	api: () => import('./bold.extension.js'),
-	weight: 999,
-	meta: {
-		alias: 'bold',
-		icon: 'icon-bold',
-		label: 'Bold',
-	},
-};
-
 export default class UmbTiptapBoldExtensionApi extends UmbTiptapToolbarElementApiBase {
 	getTiptapExtensions = () => [Bold];
 

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/bullet-list.extension.ts

@@ -1,22 +1,7 @@
 import { UmbTiptapToolbarElementApiBase } from '../types.js';
-import type { ManifestTiptapExtensionButtonKind } from '../tiptap-extension.js';
 import { BulletList, ListItem } from '@umbraco-cms/backoffice/external/tiptap';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
-export const manifest: ManifestTiptapExtensionButtonKind = {
-	type: 'tiptapExtension',
-	kind: 'button',
-	alias: 'Umb.Tiptap.BulletList',
-	name: 'Bullet List Tiptap Extension',
-	api: () => import('./bullet-list.extension.js'),
-	weight: 993,
-	meta: {
-		alias: 'bulletList',
-		icon: 'icon-bulleted-list',
-		label: 'Bullet List',
-	},
-};
-
 export default class UmbTiptapBulletListExtensionApi extends UmbTiptapToolbarElementApiBase {
 	getTiptapExtensions = () => [BulletList, ListItem];
 

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/code-block.extension.ts

@@ -1,22 +1,7 @@
 import { UmbTiptapToolbarElementApiBase } from '../types.js';
-import type { ManifestTiptapExtensionButtonKind } from '../tiptap-extension.js';
 import { Code, CodeBlock } from '@umbraco-cms/backoffice/external/tiptap';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
-export const manifest: ManifestTiptapExtensionButtonKind = {
-	type: 'tiptapExtension',
-	kind: 'button',
-	alias: 'Umb.Tiptap.CodeBlock',
-	name: 'Code Block Tiptap Extension',
-	api: () => import('./code-block.extension.js'),
-	weight: 994,
-	meta: {
-		alias: 'codeBlock',
-		icon: 'icon-code',
-		label: 'Code Block',
-	},
-};
-
 export default class UmbTiptapCodeBlockExtensionApi extends UmbTiptapToolbarElementApiBase {
 	getTiptapExtensions = () => [Code, CodeBlock];
 

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/heading1.extension.ts

@@ -1,22 +1,7 @@
 import { UmbTiptapToolbarElementApiBase } from '../types.js';
-import type { ManifestTiptapExtensionButtonKind } from '../tiptap-extension.js';
 import { Heading } from '@umbraco-cms/backoffice/external/tiptap';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
-export const manifest: ManifestTiptapExtensionButtonKind = {
-	type: 'tiptapExtension',
-	kind: 'button',
-	alias: 'Umb.Tiptap.Heading1',
-	name: 'Heading 1 Tiptap Extension',
-	api: () => import('./heading1.extension.js'),
-	weight: 949,
-	meta: {
-		alias: 'heading1',
-		icon: 'icon-heading-1',
-		label: 'Heading 1',
-	},
-};
-
 export default class UmbTiptapHeading1ExtensionApi extends UmbTiptapToolbarElementApiBase {
 	getTiptapExtensions = () => [Heading];
 

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/heading2.extension.ts

@@ -1,22 +1,7 @@
 import { UmbTiptapToolbarElementApiBase } from '../types.js';
-import type { ManifestTiptapExtensionButtonKind } from '../tiptap-extension.js';
 import { Heading } from '@umbraco-cms/backoffice/external/tiptap';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
-export const manifest: ManifestTiptapExtensionButtonKind = {
-	type: 'tiptapExtension',
-	kind: 'button',
-	alias: 'Umb.Tiptap.Heading2',
-	name: 'Heading 2 Tiptap Extension',
-	api: () => import('./heading2.extension.js'),
-	weight: 948,
-	meta: {
-		alias: 'heading2',
-		icon: 'icon-heading-2',
-		label: 'Heading 2',
-	},
-};
-
 export default class UmbTiptapHeading2ExtensionApi extends UmbTiptapToolbarElementApiBase {
 	getTiptapExtensions = () => [Heading];
 

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/heading3.extension.ts

@@ -1,22 +1,7 @@
 import { UmbTiptapToolbarElementApiBase } from '../types.js';
-import type { ManifestTiptapExtensionButtonKind } from '../tiptap-extension.js';
 import { Heading } from '@umbraco-cms/backoffice/external/tiptap';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
-export const manifest: ManifestTiptapExtensionButtonKind = {
-	type: 'tiptapExtension',
-	kind: 'button',
-	alias: 'Umb.Tiptap.Heading3',
-	name: 'Heading 3 Tiptap Extension',
-	api: () => import('./heading3.extension.js'),
-	weight: 947,
-	meta: {
-		alias: 'heading3',
-		icon: 'icon-heading-3',
-		label: 'Heading 3',
-	},
-};
-
 export default class UmbTiptapHeading3ExtensionApi extends UmbTiptapToolbarElementApiBase {
 	getTiptapExtensions = () => [Heading];
 

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/horizontal-rule.extension.ts

@@ -1,22 +1,7 @@
 import { UmbTiptapToolbarElementApiBase } from '../types.js';
-import type { ManifestTiptapExtensionButtonKind } from '../tiptap-extension.js';
 import { HorizontalRule } from '@umbraco-cms/backoffice/external/tiptap';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
-export const manifest: ManifestTiptapExtensionButtonKind = {
-	type: 'tiptapExtension',
-	kind: 'button',
-	alias: 'Umb.Tiptap.HorizontalRule',
-	name: 'Horizontal Rule Tiptap Extension',
-	api: () => import('./horizontal-rule.extension.js'),
-	weight: 991,
-	meta: {
-		alias: 'horizontalRule',
-		icon: 'icon-horizontal-rule',
-		label: 'Horizontal Rule',
-	},
-};
-
 export default class UmbTiptapHorizontalRuleExtensionApi extends UmbTiptapToolbarElementApiBase {
 	getTiptapExtensions = () => [HorizontalRule];
 

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

@@ -1,17 +1,6 @@
 import { UmbTiptapToolbarElementApiBase } from '../types.js';
-import type { ManifestTiptapExtension } from '../tiptap-extension.js';
 import { UmbImage } from '@umbraco-cms/backoffice/external/tiptap';
 
-export const manifest: ManifestTiptapExtension = {
-	type: 'tiptapExtension',
-	alias: 'Umb.Tiptap.Image',
-	name: 'Image Tiptap Extension',
-	api: () => import('./image.extension.js'),
-	meta: {
-		alias: 'image',
-	},
-};
-
 export default class UmbTiptapImageExtensionApi extends UmbTiptapToolbarElementApiBase {
 	getTiptapExtensions() {
 		return [UmbImage.configure({ inline: true })];

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/italic.extension.ts

@@ -1,22 +1,7 @@
 import { UmbTiptapToolbarElementApiBase } from '../types.js';
-import type { ManifestTiptapExtensionButtonKind } from '../tiptap-extension.js';
 import { Italic } from '@umbraco-cms/backoffice/external/tiptap';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
-export const manifest: ManifestTiptapExtensionButtonKind = {
-	type: 'tiptapExtension',
-	kind: 'button',
-	alias: 'Umb.Tiptap.Italic',
-	name: 'Italic Tiptap Extension',
-	api: () => import('./italic.extension.js'),
-	weight: 998,
-	meta: {
-		alias: 'italic',
-		icon: 'icon-italic',
-		label: 'Italic',
-	},
-};
-
 export default class UmbTiptapItalicExtensionApi extends UmbTiptapToolbarElementApiBase {
 	getTiptapExtensions = () => [Italic];
 

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

@@ -1,38 +1,221 @@
-import type { ManifestTiptapExtension } from '../tiptap-extension.js';
-import { manifest as blockquote } from './blockquote.extension.js';
-import { manifest as bold } from './bold.extension.js';
-import { manifest as bulletList } from './bullet-list.extension.js';
-import { manifest as codeBlock } from './code-block.extension.js';
-import { manifest as image } from './image.extension.js';
-import { manifest as italic } from './italic.extension.js';
-import { manifest as heading1 } from './heading1.extension.js';
-import { manifest as heading2 } from './heading2.extension.js';
-import { manifest as heading3 } from './heading3.extension.js';
-import { manifest as horizontalRule } from './horizontal-rule.extension.js';
-import { manifest as orderedList } from './ordered-list.extension.js';
-import { manifest as strike } from './strike.extension.js';
-import { manifest as textAlignLeft } from './text-align-left.extension.js';
-import { manifest as textAlignCenter } from './text-align-center.extension.js';
-import { manifest as textAlignRight } from './text-align-right.extension.js';
-import { manifest as textAlignJustify } from './text-align-justify.extension.js';
-import { manifest as underline } from './underline.extension.js';
+import type { ManifestTiptapExtension, ManifestTiptapExtensionButtonKind } from '../tiptap-extension.js';
 
-export const manifests: Array<ManifestTiptapExtension> = [
-	blockquote,
-	bold,
-	bulletList,
-	codeBlock,
-	image,
-	italic,
-	heading1,
-	heading2,
-	heading3,
-	horizontalRule,
-	orderedList,
-	strike,
-	textAlignLeft,
-	textAlignCenter,
-	textAlignRight,
-	textAlignJustify,
-	underline,
+export const manifests: Array<ManifestTiptapExtension | ManifestTiptapExtensionButtonKind> = [
+	{
+		type: 'tiptapExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Blockquote',
+		name: 'Blockquote Tiptap Extension',
+		api: () => import('./blockquote.extension.js'),
+		weight: 995,
+		meta: {
+			alias: 'blockquote',
+			icon: 'icon-blockquote',
+			label: 'Blockquote',
+		},
+	},
+	{
+		type: 'tiptapExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Bold',
+		name: 'Bold Tiptap Extension',
+		api: () => import('./bold.extension.js'),
+		weight: 999,
+		meta: {
+			alias: 'bold',
+			icon: 'icon-bold',
+			label: 'Bold',
+		},
+	},
+	{
+		type: 'tiptapExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.BulletList',
+		name: 'Bullet List Tiptap Extension',
+		api: () => import('./bullet-list.extension.js'),
+		weight: 993,
+		meta: {
+			alias: 'bulletList',
+			icon: 'icon-bulleted-list',
+			label: 'Bullet List',
+		},
+	},
+	{
+		type: 'tiptapExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.CodeBlock',
+		name: 'Code Block Tiptap Extension',
+		api: () => import('./code-block.extension.js'),
+		weight: 994,
+		meta: {
+			alias: 'codeBlock',
+			icon: 'icon-code',
+			label: 'Code Block',
+		},
+	},
+	{
+		type: 'tiptapExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Heading1',
+		name: 'Heading 1 Tiptap Extension',
+		api: () => import('./heading1.extension.js'),
+		weight: 949,
+		meta: {
+			alias: 'heading1',
+			icon: 'icon-heading-1',
+			label: 'Heading 1',
+		},
+	},
+	{
+		type: 'tiptapExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Heading2',
+		name: 'Heading 2 Tiptap Extension',
+		api: () => import('./heading2.extension.js'),
+		weight: 948,
+		meta: {
+			alias: 'heading2',
+			icon: 'icon-heading-2',
+			label: 'Heading 2',
+		},
+	},
+	{
+		type: 'tiptapExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Heading3',
+		name: 'Heading 3 Tiptap Extension',
+		api: () => import('./heading3.extension.js'),
+		weight: 947,
+		meta: {
+			alias: 'heading3',
+			icon: 'icon-heading-3',
+			label: 'Heading 3',
+		},
+	},
+	{
+		type: 'tiptapExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.HorizontalRule',
+		name: 'Horizontal Rule Tiptap Extension',
+		api: () => import('./horizontal-rule.extension.js'),
+		weight: 991,
+		meta: {
+			alias: 'horizontalRule',
+			icon: 'icon-horizontal-rule',
+			label: 'Horizontal Rule',
+		},
+	},
+	{
+		type: 'tiptapExtension',
+		alias: 'Umb.Tiptap.Image',
+		name: 'Image Tiptap Extension',
+		api: () => import('./image.extension.js'),
+		meta: {
+			alias: 'image',
+		},
+	},
+	{
+		type: 'tiptapExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Italic',
+		name: 'Italic Tiptap Extension',
+		api: () => import('./italic.extension.js'),
+		weight: 998,
+		meta: {
+			alias: 'italic',
+			icon: 'icon-italic',
+			label: 'Italic',
+		},
+	},
+	{
+		type: 'tiptapExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.OrderedList',
+		name: 'Ordered List Tiptap Extension',
+		api: () => import('./ordered-list.extension.js'),
+		weight: 992,
+		meta: {
+			alias: 'orderedList',
+			icon: 'icon-ordered-list',
+			label: 'Ordered List',
+		},
+	},
+	{
+		type: 'tiptapExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Strike',
+		name: 'Strike Tiptap Extension',
+		api: () => import('./strike.extension.js'),
+		weight: 996,
+		meta: {
+			alias: 'strike',
+			icon: 'icon-strikethrough',
+			label: 'Strike',
+		},
+	},
+	{
+		type: 'tiptapExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.TextAlignCenter',
+		name: 'Text Align Center Tiptap Extension',
+		api: () => import('./text-align-center.extension.js'),
+		weight: 918,
+		meta: {
+			alias: 'text-align-center',
+			icon: 'icon-text-align-center',
+			label: 'Text Align Center',
+		},
+	},
+	{
+		type: 'tiptapExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.TextAlignJustify',
+		name: 'Text Align Justify Tiptap Extension',
+		api: () => import('./text-align-justify.extension.js'),
+		weight: 916,
+		meta: {
+			alias: 'text-align-justify',
+			icon: 'icon-text-align-justify',
+			label: 'Text Align Justify',
+		},
+	},
+	{
+		type: 'tiptapExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.TextAlignLeft',
+		name: 'Text Align Left Tiptap Extension',
+		api: () => import('./text-align-left.extension.js'),
+		weight: 919,
+		meta: {
+			alias: 'text-align-left',
+			icon: 'icon-text-align-left',
+			label: 'Text Align Left',
+		},
+	},
+	{
+		type: 'tiptapExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.TextAlignRight',
+		name: 'Text Align Right Tiptap Extension',
+		api: () => import('./text-align-right.extension.js'),
+		weight: 917,
+		meta: {
+			alias: 'text-align-right',
+			icon: 'icon-text-align-right',
+			label: 'Text Align Right',
+		},
+	},
+	{
+		type: 'tiptapExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Underline',
+		name: 'Underline Tiptap Extension',
+		api: () => import('./underline.extension.js'),
+		weight: 997,
+		meta: {
+			alias: 'underline',
+			icon: 'icon-underline',
+			label: 'Underline',
+		},
+	},
 ];

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/ordered-list.extension.ts

@@ -1,22 +1,7 @@
 import { UmbTiptapToolbarElementApiBase } from '../types.js';
-import type { ManifestTiptapExtensionButtonKind } from '../tiptap-extension.js';
 import { OrderedList, ListItem } from '@umbraco-cms/backoffice/external/tiptap';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
-export const manifest: ManifestTiptapExtensionButtonKind = {
-	type: 'tiptapExtension',
-	kind: 'button',
-	alias: 'Umb.Tiptap.OrderedList',
-	name: 'Ordered List Tiptap Extension',
-	api: () => import('./ordered-list.extension.js'),
-	weight: 992,
-	meta: {
-		alias: 'orderedList',
-		icon: 'icon-ordered-list',
-		label: 'Ordered List',
-	},
-};
-
 export default class UmbTiptapOrderedListExtensionApi extends UmbTiptapToolbarElementApiBase {
 	getTiptapExtensions = () => [OrderedList, ListItem];
 

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/strike.extension.ts

@@ -1,22 +1,7 @@
 import { UmbTiptapToolbarElementApiBase } from '../types.js';
-import type { ManifestTiptapExtensionButtonKind } from '../tiptap-extension.js';
 import { Strike } from '@umbraco-cms/backoffice/external/tiptap';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
-export const manifest: ManifestTiptapExtensionButtonKind = {
-	type: 'tiptapExtension',
-	kind: 'button',
-	alias: 'Umb.Tiptap.Strike',
-	name: 'Strike Tiptap Extension',
-	api: () => import('./strike.extension.js'),
-	weight: 996,
-	meta: {
-		alias: 'strike',
-		icon: 'icon-strikethrough',
-		label: 'Strike',
-	},
-};
-
 export default class UmbTiptapStrikeExtensionApi extends UmbTiptapToolbarElementApiBase {
 	getTiptapExtensions = () => [Strike];
 

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/text-align-center.extension.ts

@@ -1,22 +1,7 @@
 import { UmbTiptapToolbarElementApiBase } from '../types.js';
-import type { ManifestTiptapExtensionButtonKind } from '../tiptap-extension.js';
 import { TextAlign } from '@umbraco-cms/backoffice/external/tiptap';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
-export const manifest: ManifestTiptapExtensionButtonKind = {
-	type: 'tiptapExtension',
-	kind: 'button',
-	alias: 'Umb.Tiptap.TextAlignCenter',
-	name: 'Text Align Center Tiptap Extension',
-	api: () => import('./text-align-center.extension.js'),
-	weight: 918,
-	meta: {
-		alias: 'text-align-center',
-		icon: 'icon-text-align-center',
-		label: 'Text Align Center',
-	},
-};
-
 export default class UmbTiptapTextAlignCenterExtensionApi extends UmbTiptapToolbarElementApiBase {
 	getTiptapExtensions = () => [
 		TextAlign.configure({

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/text-align-justify.extension.ts

@@ -1,22 +1,7 @@
 import { UmbTiptapToolbarElementApiBase } from '../types.js';
-import type { ManifestTiptapExtensionButtonKind } from '../tiptap-extension.js';
 import { TextAlign } from '@umbraco-cms/backoffice/external/tiptap';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
-export const manifest: ManifestTiptapExtensionButtonKind = {
-	type: 'tiptapExtension',
-	kind: 'button',
-	alias: 'Umb.Tiptap.TextAlignJustify',
-	name: 'Text Align Justify Tiptap Extension',
-	api: () => import('./text-align-justify.extension.js'),
-	weight: 916,
-	meta: {
-		alias: 'text-align-justify',
-		icon: 'icon-text-align-justify',
-		label: 'Text Align Justify',
-	},
-};
-
 export default class UmbTiptapTextAlignJustifyExtensionApi extends UmbTiptapToolbarElementApiBase {
 	getTiptapExtensions = () => [
 		TextAlign.configure({

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/text-align-left.extension.ts

@@ -1,22 +1,7 @@
 import { UmbTiptapToolbarElementApiBase } from '../types.js';
-import type { ManifestTiptapExtensionButtonKind } from '../tiptap-extension.js';
 import { TextAlign } from '@umbraco-cms/backoffice/external/tiptap';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
-export const manifest: ManifestTiptapExtensionButtonKind = {
-	type: 'tiptapExtension',
-	kind: 'button',
-	alias: 'Umb.Tiptap.TextAlignLeft',
-	name: 'Text Align Left Tiptap Extension',
-	api: () => import('./text-align-left.extension.js'),
-	weight: 919,
-	meta: {
-		alias: 'text-align-left',
-		icon: 'icon-text-align-left',
-		label: 'Text Align Left',
-	},
-};
-
 export default class UmbTiptapTextAlignLeftExtensionApi extends UmbTiptapToolbarElementApiBase {
 	getTiptapExtensions = () => [
 		TextAlign.configure({

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/text-align-right.extension.ts

@@ -1,22 +1,7 @@
 import { UmbTiptapToolbarElementApiBase } from '../types.js';
-import type { ManifestTiptapExtensionButtonKind } from '../tiptap-extension.js';
 import { TextAlign } from '@umbraco-cms/backoffice/external/tiptap';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
-export const manifest: ManifestTiptapExtensionButtonKind = {
-	type: 'tiptapExtension',
-	kind: 'button',
-	alias: 'Umb.Tiptap.TextAlignRight',
-	name: 'Text Align Right Tiptap Extension',
-	api: () => import('./text-align-right.extension.js'),
-	weight: 917,
-	meta: {
-		alias: 'text-align-right',
-		icon: 'icon-text-align-right',
-		label: 'Text Align Right',
-	},
-};
-
 export default class UmbTiptapTextAlignRightExtensionApi extends UmbTiptapToolbarElementApiBase {
 	getTiptapExtensions = () => [
 		TextAlign.configure({

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/underline.extension.ts

@@ -1,22 +1,7 @@
 import { UmbTiptapToolbarElementApiBase } from '../types.js';
-import type { ManifestTiptapExtensionButtonKind } from '../tiptap-extension.js';
 import { Underline } from '@umbraco-cms/backoffice/external/tiptap';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
-export const manifest: ManifestTiptapExtensionButtonKind = {
-	type: 'tiptapExtension',
-	kind: 'button',
-	alias: 'Umb.Tiptap.Underline',
-	name: 'Underline Tiptap Extension',
-	api: () => import('./underline.extension.js'),
-	weight: 997,
-	meta: {
-		alias: 'underline',
-		icon: 'icon-underline',
-		label: 'Underline',
-	},
-};
-
 export default class UmbTiptapUnderlineExtensionApi extends UmbTiptapToolbarElementApiBase {
 	getTiptapExtensions = () => [Underline];
 

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

@@ -1,25 +0,0 @@
-import { UmbTiptapToolbarElementApiBase } from './types.js';
-import type { ManifestTiptapExtensionButtonKind } from './tiptap-extension.js';
-import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
-
-export const manifest: ManifestTiptapExtensionButtonKind = {
-	type: 'tiptapExtension',
-	kind: 'button',
-	alias: 'Umb.Tiptap.Embed',
-	name: 'Embed Tiptap Extension',
-	api: () => import('./embed.extension.js'),
-	meta: {
-		alias: 'umb-embed',
-		icon: 'icon-embed',
-		label: 'Embed',
-	},
-};
-
-export default class UmbTiptapEmbedExtensionApi extends UmbTiptapToolbarElementApiBase {
-	getTiptapExtensions = () => [];
-
-	override async execute(editor?: Editor) {
-		console.log('umb-embed.execute', editor);
-		// Research: https://github.com/ueberdosis/tiptap/tree/main/packages/extension-youtube
-	}
-}

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

@@ -1,9 +1,5 @@
-import type { ManifestTiptapExtension } from './tiptap-extension.js';
+import type { ManifestTiptapExtension, ManifestTiptapExtensionButtonKind } from './tiptap-extension.js';
 import { manifests as core } from './core/manifests.js';
-import { manifest as codeEditor } from './code-editor.extension.js';
-import { manifest as embed } from './embed.extension.js';
-import { manifest as mediaPicker } from './mediapicker.extension.js';
-import { manifest as urlPicker } from './urlpicker.extension.js';
 import type { ManifestTypes, UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
 
 const kinds: Array<UmbExtensionManifestKind> = [
@@ -13,11 +9,75 @@ const kinds: Array<UmbExtensionManifestKind> = [
 		matchKind: 'button',
 		matchType: 'tiptapExtension',
 		manifest: {
-			element: () => import('./tiptap-toolbar-button.element.js'),
+			element: () => import('../components/toolbar/tiptap-toolbar-button.element.js'),
 		},
 	},
 ];
 
-const extensions: Array<ManifestTiptapExtension> = [...core, codeEditor, embed, mediaPicker, urlPicker];
+const umbExtensions: Array<ManifestTiptapExtension | ManifestTiptapExtensionButtonKind> = [
+	{
+		type: 'tiptapExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.CodeEditor',
+		name: 'Code Editor Tiptap Extension',
+		api: () => import('./umb/code-editor.extension.js'),
+		weight: 1000,
+		meta: {
+			alias: 'umb-code-editor',
+			icon: 'icon-code',
+			label: '#general_viewSourceCode',
+		},
+	},
+	{
+		type: 'tiptapExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Embed',
+		name: 'Embed Tiptap Extension',
+		api: () => import('./umb/embed.extension.js'),
+		meta: {
+			alias: 'umb-embed',
+			icon: 'icon-embed',
+			label: 'Embed',
+		},
+	},
+	{
+		type: 'tiptapExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.MediaPicker',
+		name: 'Media Picker Tiptap Extension',
+		api: () => import('./umb/mediapicker.extension.js'),
+		meta: {
+			alias: 'umb-media',
+			icon: 'icon-picture',
+			label: 'Media picker',
+		},
+	},
+	{
+		type: 'tiptapExtension',
+		alias: 'Umb.Tiptap.MediaUpload',
+		name: 'Media Upload Tiptap Extension',
+		weight: 900,
+		api: () => import('./umb/media-upload.extension.js'),
+		meta: {
+			alias: 'umb-media-upload',
+			icon: 'icon-image-up',
+			label: 'Media upload',
+		},
+	},
+	{
+		type: 'tiptapExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.UrlPicker',
+		name: 'URL Picker Tiptap Extension',
+		api: () => import('./umb/urlpicker.extension.js'),
+		meta: {
+			alias: 'umb-link',
+			icon: 'icon-link',
+			label: 'URL picker',
+		},
+	},
+];
+
+const extensions: Array<ManifestTiptapExtension> = [...core, ...umbExtensions];
 
 export const manifests: Array<ManifestTypes | UmbExtensionManifestKind> = [...kinds, ...extensions];

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/umb/code-editor.extension.ts

@@ -1,22 +1,7 @@
-import { UmbTiptapToolbarElementApiBase } from './types.js';
-import type { ManifestTiptapExtensionButtonKind } from './tiptap-extension.js';
+import { UmbTiptapToolbarElementApiBase } from '../types.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 import { UMB_CODE_EDITOR_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
 
-export const manifest: ManifestTiptapExtensionButtonKind = {
-	type: 'tiptapExtension',
-	kind: 'button',
-	alias: 'Umb.Tiptap.CodeEditor',
-	name: 'Code Editor Tiptap Extension',
-	api: () => import('./code-editor.extension.js'),
-	weight: 1000,
-	meta: {
-		alias: 'umb-code-editor',
-		icon: 'icon-code',
-		label: '#general_viewSourceCode',
-	},
-};
-
 export default class UmbTiptapCodeEditorExtensionApi extends UmbTiptapToolbarElementApiBase {
 	getTiptapExtensions = () => [];
 

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/umb/embed.extension.ts

@@ -0,0 +1,11 @@
+import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
+
+export default class UmbTiptapEmbedExtensionApi extends UmbTiptapToolbarElementApiBase {
+	getTiptapExtensions = () => [];
+
+	override async execute(editor?: Editor) {
+		console.log('umb-embed.execute', editor);
+		// Research: https://github.com/ueberdosis/tiptap/tree/main/packages/extension-youtube
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/umb/media-upload.extension.ts

@@ -1,4 +1,4 @@
-import { UmbTiptapExtensionApiBase, type UmbTiptapExtensionArgs } from './types.js';
+import { UmbTiptapExtensionApiBase, type UmbTiptapExtensionArgs } from '../types.js';
 import {
 	TemporaryFileStatus,
 	UmbTemporaryFileManager,

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/umb/mediapicker.extension.ts

@@ -1,23 +1,9 @@
-import { UmbTiptapToolbarElementApiBase } from './types.js';
-import type { ManifestTiptapExtensionButtonKind } from './tiptap-extension.js';
+import { UmbTiptapToolbarElementApiBase } from '../types.js';
 import { mergeAttributes, Node } from '@umbraco-cms/backoffice/external/tiptap';
 import { UMB_MEDIA_PICKER_MODAL } from '@umbraco-cms/backoffice/media';
 import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
-export const manifest: ManifestTiptapExtensionButtonKind = {
-	type: 'tiptapExtension',
-	kind: 'button',
-	alias: 'Umb.Tiptap.MediaPicker',
-	name: 'Media Picker Tiptap Extension',
-	api: () => import('./mediapicker.extension.js'),
-	meta: {
-		alias: 'umb-media',
-		icon: 'icon-picture',
-		label: 'Media picker',
-	},
-};
-
 export default class UmbTiptapMediaPickerExtensionApi extends UmbTiptapToolbarElementApiBase {
 	getTiptapExtensions() {
 		return [

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/umb/urlpicker.extension.ts

@@ -1,21 +1,7 @@
-import { UmbTiptapToolbarElementApiBase } from './types.js';
-import type { ManifestTiptapExtensionButtonKind } from './tiptap-extension.js';
+import { UmbTiptapToolbarElementApiBase } from '../types.js';
 import { Link } from '@umbraco-cms/backoffice/external/tiptap';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
-export const manifest: ManifestTiptapExtensionButtonKind = {
-	type: 'tiptapExtension',
-	kind: 'button',
-	alias: 'Umb.Tiptap.UrlPicker',
-	name: 'URL Picker Tiptap Extension',
-	api: () => import('./urlpicker.extension.js'),
-	meta: {
-		alias: 'umb-link',
-		icon: 'icon-link',
-		label: 'URL picker',
-	},
-};
-
 export default class UmbTiptapUrlPickerExtensionApi extends UmbTiptapToolbarElementApiBase {
 	getTiptapExtensions() {
 		return [Link.extend({ openOnClick: false })];