diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json index f8dd3ed1b4..2ea36b53ed 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json +++ b/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" diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts index acc2b0e7c6..c7c47d23d6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts +++ b/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"), diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-image-up.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-image-up.ts new file mode 100644 index 0000000000..a5b72f09f4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-image-up.ts @@ -0,0 +1,17 @@ +export default ` + + + + + + +`; \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/tiptap-fixed-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/tiptap-fixed-menu.element.ts index 88f211e458..5b879b5c4a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/tiptap-fixed-menu.element.ts +++ b/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; diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/tiptap-toolbar-button.element.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/toolbar/tiptap-toolbar-button.element.ts similarity index 91% rename from src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/tiptap-toolbar-button.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/toolbar/tiptap-toolbar-button.element.ts index 17a418e613..fc3c7219bd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/tiptap-toolbar-button.element.ts +++ b/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'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/blockquote.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/blockquote.extension.ts index 22c2144b4e..d1ecfdfe19 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/blockquote.extension.ts +++ b/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]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/bold.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/bold.extension.ts index c0d2d8485f..e65d167551 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/bold.extension.ts +++ b/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]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/bullet-list.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/bullet-list.extension.ts index b73532a98c..8dd956279c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/bullet-list.extension.ts +++ b/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]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/code-block.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/code-block.extension.ts index 722c6c1c83..7cfa5861b2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/code-block.extension.ts +++ b/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]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/heading1.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/heading1.extension.ts index 5872321e07..7543e321fb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/heading1.extension.ts +++ b/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]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/heading2.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/heading2.extension.ts index 22ca614266..3edcf7b57a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/heading2.extension.ts +++ b/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]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/heading3.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/heading3.extension.ts index 5662dd9636..9def84dc2c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/heading3.extension.ts +++ b/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]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/horizontal-rule.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/horizontal-rule.extension.ts index e796db3b8e..0219f45673 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/horizontal-rule.extension.ts +++ b/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]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/image.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/image.extension.ts index f71f01ebd2..bf8b9956e9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/image.extension.ts +++ b/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 })]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/italic.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/italic.extension.ts index 04de717a74..ff122f81e4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/italic.extension.ts +++ b/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]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/manifests.ts index f45ce80e1b..9ef58cd081 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/manifests.ts +++ b/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 = [ - blockquote, - bold, - bulletList, - codeBlock, - image, - italic, - heading1, - heading2, - heading3, - horizontalRule, - orderedList, - strike, - textAlignLeft, - textAlignCenter, - textAlignRight, - textAlignJustify, - underline, +export const manifests: Array = [ + { + 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', + }, + }, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/ordered-list.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/ordered-list.extension.ts index afa3433551..471d794e1c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/ordered-list.extension.ts +++ b/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]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/strike.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/strike.extension.ts index b00939b028..b073c12dd9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/strike.extension.ts +++ b/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]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/text-align-center.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/text-align-center.extension.ts index c495cd77fd..fa9c90855c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/text-align-center.extension.ts +++ b/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({ diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/text-align-justify.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/text-align-justify.extension.ts index d9818b16c0..03e197654f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/text-align-justify.extension.ts +++ b/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({ diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/text-align-left.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/text-align-left.extension.ts index 584a4dd5f4..2f35da46d2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/text-align-left.extension.ts +++ b/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({ diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/text-align-right.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/text-align-right.extension.ts index 1fddf39ae0..62de9a54f9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/text-align-right.extension.ts +++ b/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({ diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/underline.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/underline.extension.ts index 6b40dc881a..4e1bac6d6a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/underline.extension.ts +++ b/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]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/embed.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/embed.extension.ts deleted file mode 100644 index d3aca48d5b..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/embed.extension.ts +++ /dev/null @@ -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 - } -} 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 d6fca8368f..cb135c4773 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,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 = [ @@ -13,11 +9,75 @@ const kinds: Array = [ matchKind: 'button', matchType: 'tiptapExtension', manifest: { - element: () => import('./tiptap-toolbar-button.element.js'), + element: () => import('../components/toolbar/tiptap-toolbar-button.element.js'), }, }, ]; -const extensions: Array = [...core, codeEditor, embed, mediaPicker, urlPicker]; +const umbExtensions: Array = [ + { + 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 = [...core, ...umbExtensions]; export const manifests: Array = [...kinds, ...extensions]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/code-editor.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/umb/code-editor.extension.ts similarity index 63% rename from src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/code-editor.extension.ts rename to src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/umb/code-editor.extension.ts index 92ed2a4022..be55c65dbe 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/code-editor.extension.ts +++ b/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 = () => []; diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/umb/embed.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/umb/embed.extension.ts new file mode 100644 index 0000000000..f09ecfd084 --- /dev/null +++ b/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 + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/tiptap-media-upload.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/umb/media-upload.extension.ts similarity index 99% rename from src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/tiptap-media-upload.extension.ts rename to src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/umb/media-upload.extension.ts index a27f019fb6..57d02b8ccf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/tiptap-media-upload.extension.ts +++ b/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, diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/mediapicker.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/umb/mediapicker.extension.ts similarity index 80% rename from src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/mediapicker.extension.ts rename to src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/umb/mediapicker.extension.ts index 1c649a472a..6947d772b8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/mediapicker.extension.ts +++ b/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 [ diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/urlpicker.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/umb/urlpicker.extension.ts similarity index 62% rename from src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/urlpicker.extension.ts rename to src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/umb/urlpicker.extension.ts index 2781a41f1d..7bedab735b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/urlpicker.extension.ts +++ b/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 })];