feat(referencePicker): introduce getReferenceWithPicker()

src/components/NcRichText/NcReferencePicker/NcCustomPickerElement.vue

@@ -65,7 +65,9 @@ export default {
 					this.renderResult.object.$on('cancel', this.onCancel)
 				}
 				this.renderResult.element.addEventListener('submit', (e) => {
-					this.onSubmit(e.detail)
+					const detail = e.detail
+					const result = typeof detail === 'string' ? { link: detail } : detail
+					this.onSubmit(result)
 				})
 				this.renderResult.element.addEventListener('cancel', this.onCancel)
 			})

src/components/NcRichText/NcReferencePicker/NcProviderList.vue

@@ -101,7 +101,7 @@ export default {
 		onProviderSelected(p) {
 			if (p !== null) {
 				if (p.isLink) {
-					this.$emit('submit', p.title)
+					this.$emit('submit', { link: p.title })
 				} else {
 					this.$emit('selectProvider', p)
 				}

src/components/NcRichText/NcReferencePicker/NcRawLinkInput.vue

@@ -101,7 +101,7 @@ export default {
 		onSubmit(e) {
 			const value = e.target.value
 			if (this.isLinkValid) {
-				this.$emit('submit', value)
+				this.$emit('submit', { link: value })
 			}
 		},
 

src/components/NcRichText/NcReferencePicker/NcReferencePicker.vue

@@ -173,11 +173,11 @@ export default {
 			this.$emit('cancel')
 		},
 
-		submitLink(link) {
+		submitLink(result) {
 			if (this.selectedProvider !== null) {
 				touchProvider(this.selectedProvider.id)
 			}
-			this.$emit('submit', link)
+			this.$emit('submit', result)
 			this.deselectProvider()
 		},
 

src/components/NcRichText/index.ts

@@ -22,7 +22,7 @@ import {
 	searchProvider,
 	sortProviders,
 } from '../../functions/reference/providerHelper.ts'
-import { getLinkWithPicker } from '../../functions/reference/referencePickerModal.ts'
+import { getLinkWithPicker, getReferenceWithPicker } from '../../functions/reference/referencePickerModal.ts'
 import { isWidgetRegistered, registerWidget, renderWidget } from './../../functions/reference/widgets.ts'
 
 export default NcRichText
@@ -32,6 +32,7 @@ export {
 	getLinkWithPicker,
 	getProvider,
 	getProviders,
+	getReferenceWithPicker,
 	isCustomPickerElementRegistered,
 	isWidgetRegistered,
 	NcCustomPickerRenderResult,

src/functions/reference/index.ts

@@ -13,7 +13,10 @@ export {
 	renderWidget,
 } from './widgets.ts'
 
-export { getLinkWithPicker } from './referencePickerModal.ts'
+export {
+	getLinkWithPicker,
+	getReferenceWithPicker,
+} from './referencePickerModal.ts'
 
 export {
 	type ReferenceProvider,

src/functions/reference/referencePickerModal.ts

@@ -7,8 +7,13 @@ import { createApp } from 'vue'
 import NcReferencePickerModal from './../../components/NcRichText/NcReferencePicker/NcReferencePickerModal.vue'
 import { getProvider } from './providerHelper.js'
 
+type PickerSubmitResult = {
+	link: string
+	title?: string
+}
+
 /**
- * Creates a reference picker modal and return a promise which provides the result
+ * Creates a reference picker modal and return a promise which provides the link URL
  *
  * @param providerId - Optional ID of initial selected provider
  * @param isInsideViewer - Should be true if this function is called while the Viewer is displayed
@@ -28,9 +33,40 @@ export async function getLinkWithPicker(providerId?: string, isInsideViewer?: bo
 			view.unmount()
 			reject(new Error('User cancellation'))
 		},
-		onSubmit(link: string) {
+		onSubmit(result: string | PickerSubmitResult) {
+			view.unmount()
+			resolve(typeof result === 'string' ? result : result.link)
+		},
+	})
+	view.mount(modalElement)
+
+	return promise
+}
+
+/**
+ * Creates a reference picker modal and return a promise which provides the reference object
+ *
+ * @param providerId - Optional ID of initial selected provider
+ * @param isInsideViewer - Should be true if this function is called while the Viewer is displayed
+ */
+export async function getReferenceWithPicker(providerId?: string, isInsideViewer?: boolean): Promise<PickerSubmitResult> {
+	const modalId = 'referencePickerModal'
+	const modalElement = document.createElement('div')
+	modalElement.id = modalId
+	document.body.append(modalElement)
+
+	const { promise, reject, resolve } = Promise.withResolvers<PickerSubmitResult>()
+	const initialProvider = (providerId && getProvider(providerId)) || null
+	const view = createApp(NcReferencePickerModal, {
+		initialProvider,
+		isInsideViewer,
+		onCancel() {
+			view.unmount()
+			reject(new Error('User cancellation'))
+		},
+		onSubmit(result: string | PickerSubmitResult) {
 			view.unmount()
-			resolve(link)
+			resolve(typeof result === 'string' ? { link: result } : result)
 		},
 	})
 	view.mount(modalElement)