Tiptap Link: Configured overlay size

umbraco · Sep 30, 2024 · 9ba3ea5 · 9ba3ea5
1 parent 6dbbe0b
commit 9ba3ea5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/packages/rte/tiptap/extensions/umb/link.extension.ts b/src/packages/rte/tiptap/extensions/umb/link.extension.ts
@@ -4,6 +4,7 @@ import { UMB_LINK_PICKER_MODAL } from '@umbraco-cms/backoffice/multi-url-picker'
 import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 import type { UmbLinkPickerLink } from '@umbraco-cms/backoffice/multi-url-picker';
+import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
 
 export default class UmbTiptapLinkExtensionApi extends UmbTiptapToolbarElementApiBase {
 	override async execute(editor?: Editor) {
@@ -12,8 +13,10 @@ export default class UmbTiptapLinkExtensionApi extends UmbTiptapToolbarElementAp
 		const data = { config: {}, index: null };
 		const value = { link };
 
+		const overlaySize = this.configuration?.getValueByAlias<UUIModalSidebarSize>('overlaySize') ?? 'small';
+
 		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
-		const modalHandler = modalManager.open(this, UMB_LINK_PICKER_MODAL, { data, value });
+		const modalHandler = modalManager.open(this, UMB_LINK_PICKER_MODAL, { data, value, modal: { size: overlaySize } });
 
 		if (!modalHandler) return;
 

diff --git a/src/packages/rte/tiptap/property-editors/tiptap/manifests.ts b/src/packages/rte/tiptap/property-editors/tiptap/manifests.ts
@@ -49,8 +49,17 @@ export const manifests: Array<ManifestPropertyEditorUi> = [
 						weight: 40,
 						config: [{ alias: 'min', value: 0 }],
 					},
+					{
+						alias: 'overlaySize',
+						label: 'Overlay Size',
+						description: 'Select the width of the overlay (link picker)',
+						propertyEditorUiAlias: 'Umb.PropertyEditorUi.OverlaySize',
+						weight: 50,
+					},
+				],
+				defaultData: [
+					{ alias: 'overlaySize', value: 'medium' },
 				],
-				defaultData: [],
 			},
 		},
 	},