Tiptap RTE: Text Direction extension

src/Umbraco.Web.UI.Client/src/external/tiptap/extensions/tiptap-text-direction-extension.ts

@@ -0,0 +1,58 @@
+import { Extension } from '@tiptap/core';
+
+export interface TextDirectionOptions {
+	directions: Array<'auto' | 'ltr' | 'rtl'>;
+	types: Array<string>;
+}
+
+export const TextDirection = Extension.create<TextDirectionOptions>({
+	name: 'textDirection',
+
+	addOptions() {
+		return {
+			directions: ['ltr', 'rtl', 'auto'],
+			types: ['heading', 'paragraph'],
+		};
+	},
+
+	addGlobalAttributes() {
+		return [
+			{
+				types: this.options.types,
+				attributes: {
+					textDirection: {
+						parseHTML: (element) => element.dir,
+						renderHTML: (attributes) =>
+							this.options.directions.includes(attributes.textDirection) ? { dir: attributes.textDirection } : null,
+					},
+				},
+			},
+		];
+	},
+
+	addCommands() {
+		return {
+			setTextDirection:
+				(direction) =>
+				({ commands }) => {
+					return this.options.directions.includes(direction)
+						? this.options.types.every((type) => commands.updateAttributes(type, { textDirection: direction }))
+						: false;
+				},
+			unsetTextDirection:
+				() =>
+				({ commands }) => {
+					return this.options.types.every((type) => commands.resetAttributes(type, 'textDirection'));
+				},
+		};
+	},
+});
+
+declare module '@tiptap/core' {
+	interface Commands<ReturnType> {
+		textDirection: {
+			setTextDirection: (direction: 'auto' | 'ltr' | 'rtl') => ReturnType;
+			unsetTextDirection: () => ReturnType;
+		};
+	}
+}

src/Umbraco.Web.UI.Client/src/external/tiptap/index.ts

@@ -33,6 +33,7 @@ export * from './extensions/tiptap-figcaption.extension.js';
 export * from './extensions/tiptap-figure.extension.js';
 export * from './extensions/tiptap-span.extension.js';
 export * from './extensions/tiptap-html-global-attributes.extension.js';
+export * from './extensions/tiptap-text-direction-extension.js';
 export * from './extensions/tiptap-trailing-node.extension.js';
 export * from './extensions/tiptap-umb-embedded-media.extension.js';
 export * from './extensions/tiptap-umb-image.extension.js';

src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts

@@ -1036,6 +1036,7 @@ export const data: Array<UmbMockDataTypeModel> = [
 					'Umb.Tiptap.Superscript',
 					'Umb.Tiptap.Table',
 					'Umb.Tiptap.TextAlign',
+					'Umb.Tiptap.TextDirection',
 					'Umb.Tiptap.Underline',
 				],
 			},
@@ -1056,6 +1057,8 @@ export const data: Array<UmbMockDataTypeModel> = [
 							'Umb.Tiptap.Toolbar.TextAlignLeft',
 							'Umb.Tiptap.Toolbar.TextAlignCenter',
 							'Umb.Tiptap.Toolbar.TextAlignRight',
+							'Umb.Tiptap.Toolbar.TextDirectionRtl',
+							'Umb.Tiptap.Toolbar.TextDirectionLtr',
 							'Umb.Tiptap.Toolbar.BulletList',
 							'Umb.Tiptap.Toolbar.OrderedList',
 							'Umb.Tiptap.Toolbar.Blockquote',

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

@@ -2077,6 +2077,14 @@
 			"name": "icon-text-align-right",
 			"file": "align-right.svg"
 		},
+		{
+			"name": "icon-text-direction-ltr",
+			"file": "pilcrow-right.svg"
+		},
+		{
+			"name": "icon-text-direction-rtl",
+			"file": "pilcrow-left.svg"
+		},
 		{
 			"name": "icon-theater",
 			"file": "drama.svg"

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

@@ -1693,6 +1693,12 @@ path: () => import("./icons/icon-text-align-left.js"),
 name: "icon-text-align-right",
 path: () => import("./icons/icon-text-align-right.js"),
 },{
+name: "icon-text-direction-ltr",
+path: () => import("./icons/icon-text-direction-ltr.js"),
+},{
+name: "icon-text-direction-rtl",
+path: () => import("./icons/icon-text-direction-rtl.js"),
+},{
 name: "icon-theater",
 path: () => import("./icons/icon-theater.js"),
 },{

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

@@ -0,0 +1 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" class="lucide lucide-pilcrow-right" viewBox="0 0 24 24"><path d="M10 3v11M10 9H7a1 1 0 0 1 0-6h8M14 3v11M18 14l4 4H2M22 18l-4 4"/></svg>`;

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

@@ -0,0 +1 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" class="lucide lucide-pilcrow-left" viewBox="0 0 24 24"><path d="M14 3v11M14 9h-3a3 3 0 0 1 0-6h9M18 3v11M22 18H2l4-4M6 22l-4-4"/></svg>`;

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/text-direction.tiptap-api.ts

@@ -0,0 +1,10 @@
+import { UmbTiptapExtensionApiBase } from '../base.js';
+import { TextDirection } from '@umbraco-cms/backoffice/external/tiptap';
+
+export default class UmbTiptapTextDirectionExtensionApi extends UmbTiptapExtensionApiBase {
+	getTiptapExtensions = () => [
+		TextDirection.configure({
+			types: ['heading', 'paragraph', 'blockquote', 'orderedList', 'bulletList'],
+		}),
+	];
+}

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

@@ -122,6 +122,17 @@ const coreExtensions: Array<ManifestTiptapExtension> = [
 			group: '#tiptap_extGroup_formatting',
 		},
 	},
+	{
+		type: 'tiptapExtension',
+		alias: 'Umb.Tiptap.TextDirection',
+		name: 'Text Direction Tiptap Extension',
+		api: () => import('./core/text-direction.tiptap-api.js'),
+		meta: {
+			icon: 'icon-text-direction-ltr',
+			label: 'Text Direction',
+			group: '#tiptap_extGroup_formatting',
+		},
+	},
 	{
 		type: 'tiptapExtension',
 		alias: 'Umb.Tiptap.MediaUpload',
@@ -261,6 +272,32 @@ const toolbarExtensions: Array<ManifestTiptapToolbarExtension> = [
 			label: 'Text Align Justify',
 		},
 	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.TextDirectionRtl',
+		name: 'Text Direction RTL Tiptap Extension',
+		api: () => import('./toolbar/text-direction-rtl.tiptap-toolbar-api.js'),
+		forExtensions: ['Umb.Tiptap.TextAlign'],
+		meta: {
+			alias: 'text-direction-rtl',
+			icon: 'icon-text-direction-rtl',
+			label: 'Right to left',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.TextDirectionLtr',
+		name: 'Text Direction LTR Tiptap Extension',
+		api: () => import('./toolbar/text-direction-ltr.tiptap-toolbar-api.js'),
+		forExtensions: ['Umb.Tiptap.TextAlign'],
+		meta: {
+			alias: 'text-direction-ltr',
+			icon: 'icon-text-direction-ltr',
+			label: 'Left to right',
+		},
+	},
 	{
 		type: 'tiptapToolbarExtension',
 		kind: 'button',

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/text-direction-ltr.tiptap-toolbar-api.ts

@@ -0,0 +1,15 @@
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
+import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
+
+export default class UmbTiptapToolbarTextDirectionLtrExtensionApi extends UmbTiptapToolbarElementApiBase {
+	override isActive = (editor?: Editor) =>
+		editor?.isActive({ textDirection: 'ltr' }) === true || editor?.isActive({ textDirection: 'auto' }) === true;
+
+	override execute(editor?: Editor) {
+		if (!this.isActive(editor)) {
+			editor?.chain().focus().setTextDirection('ltr').run();
+		} else {
+			editor?.chain().focus().unsetTextDirection().run();
+		}
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/text-direction-rtl.tiptap-toolbar-api.ts

@@ -0,0 +1,14 @@
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
+import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
+
+export default class UmbTiptapToolbarTextDirectionRtlExtensionApi extends UmbTiptapToolbarElementApiBase {
+	override isActive = (editor?: Editor) => editor?.isActive({ textDirection: 'rtl' }) === true;
+
+	override execute(editor?: Editor) {
+		if (!this.isActive(editor)) {
+			editor?.chain().focus().setTextDirection('rtl').run();
+		} else {
+			editor?.chain().focus().unsetTextDirection().run();
+		}
+	}
+}