diff --git a/src/components/NcRichText/NcReferencePicker/NcCustomPickerElement.vue b/src/components/NcRichText/NcReferencePicker/NcCustomPickerElement.vue index 8ab50a81c8..6fdc350ef1 100644 --- a/src/components/NcRichText/NcReferencePicker/NcCustomPickerElement.vue +++ b/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) }) diff --git a/src/components/NcRichText/NcReferencePicker/NcProviderList.vue b/src/components/NcRichText/NcReferencePicker/NcProviderList.vue index 0ee86a7218..7f8a53c534 100644 --- a/src/components/NcRichText/NcReferencePicker/NcProviderList.vue +++ b/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) } diff --git a/src/components/NcRichText/NcReferencePicker/NcRawLinkInput.vue b/src/components/NcRichText/NcReferencePicker/NcRawLinkInput.vue index b9d4731b35..93d2eb96ac 100644 --- a/src/components/NcRichText/NcReferencePicker/NcRawLinkInput.vue +++ b/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 }) } }, diff --git a/src/components/NcRichText/NcReferencePicker/NcReferencePicker.vue b/src/components/NcRichText/NcReferencePicker/NcReferencePicker.vue index b975e77fcf..be8f87afec 100644 --- a/src/components/NcRichText/NcReferencePicker/NcReferencePicker.vue +++ b/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() }, diff --git a/src/components/NcRichText/index.ts b/src/components/NcRichText/index.ts index acf4294a7d..a97e87283b 100644 --- a/src/components/NcRichText/index.ts +++ b/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, diff --git a/src/functions/reference/index.ts b/src/functions/reference/index.ts index ae21a495b3..99bd54ed02 100644 --- a/src/functions/reference/index.ts +++ b/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, diff --git a/src/functions/reference/referencePickerModal.ts b/src/functions/reference/referencePickerModal.ts index 4d2b351c95..15b3e44a21 100644 --- a/src/functions/reference/referencePickerModal.ts +++ b/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 { + const modalId = 'referencePickerModal' + const modalElement = document.createElement('div') + modalElement.id = modalId + document.body.append(modalElement) + + const { promise, reject, resolve } = Promise.withResolvers() + 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)