fix: use file picker component directly

cypress/e2e/integration.spec.js

@@ -121,11 +121,49 @@ describe('Nextcloud integration', function() {
 		cy.get('.modal-container__content').should('be.visible')
 	})
 
-	it('Smart picker', function() {
-		cy.get('@loleafletframe').within(() => {
-			cy.get('#Insert-tab-label').click()
-			cy.get('#insert-insert-remote-link-button').click()
+	describe('Smart picker', function() {
+		describe('Link to office document section', function() {
+			beforeEach(function() {
+				// Proc the smart picker from Collabora
+				cy.get('@loleafletframe').within(() => {
+					cy.get('#Insert-tab-label').click()
+					cy.get('#insert-insert-remote-link-button').click()
+				})
+
+				// Wait for the reference picker to show
+				cy.get('.reference-picker-modal--content')
+					.should('be.visible')
+					.as('referencePickerContent')
+
+				// Select "Link to office document section"
+				cy.get('@referencePickerContent')
+					.find('input[id="provider-select-input"]')
+					.as('smartPickerDropdown')
+				cy.get('@smartPickerDropdown').click()
+				cy.get('@referencePickerContent')
+					.find('ul[aria-label="Options"]')
+					.should('be.visible')
+					.contains('Link to office document section')
+					.click()
+
+				// Pick the fixture document
+				cy.pickFile('document.odt')
+			})
+
+			it('Can link to heading', function() {
+				cy.get('[data-cy-section-label="Headings"]').children().first().click()
+				cy.get('[data-cy-link-to-section=""]').click()
+			})
+
+			it('Can link to section', function() {
+				cy.get('[data-cy-section-label="Sections"]').children().first().click()
+				cy.get('[data-cy-link-to-section=""]').click()
+			})
+
+			it('Can link to image', function() {
+				cy.get('[data-cy-section-label="Images"]').children().first().click()
+				cy.get('[data-cy-link-to-section=""]').click()
+			})
 		})
-		cy.get('.reference-picker-modal--content').should('be.visible')
 	})
 })

cypress/support/commands.js

@@ -368,3 +368,12 @@ Cypress.Commands.add('verifyTemplateFields', (fields, fileId) => {
 		})
 	})
 })
+
+Cypress.Commands.add('pickFile', (filename) => {
+  cy.get('.office-target-picker')
+    .find(`tr[data-filename="${filename}"]`)
+    .click()
+  cy.get('.office-target-picker')
+    .find('button[aria-label="Select file"]')
+    .click()
+})

lib/Listener/LoadViewerListener.php

@@ -14,7 +14,9 @@
 use OCA\Richdocuments\PermissionManager;
 use OCA\Richdocuments\Service\InitialStateService;
 use OCA\Viewer\Event\LoadViewer;
+use OCP\Collaboration\Reference\RenderReferenceEvent;
 use OCP\EventDispatcher\Event;
+use OCP\EventDispatcher\IEventDispatcher;
 use OCP\EventDispatcher\IEventListener;
 use OCP\Util;
 
@@ -23,6 +25,7 @@ class LoadViewerListener implements IEventListener {
 	public function __construct(
 		private PermissionManager $permissionManager,
 		private InitialStateService $initialStateService,
+		private IEventDispatcher $eventDispatcher,
 		private ?string $userId,
 	) {
 	}
@@ -34,6 +37,7 @@ public function handle(Event $event): void {
 		if ($this->permissionManager->isEnabledForUser() && $this->userId !== null) {
 			$this->initialStateService->provideCapabilities();
 			Util::addScript('richdocuments', 'richdocuments-viewer', 'viewer');
+			$this->eventDispatcher->dispatchTyped(new RenderReferenceEvent());
 		}
 	}
 }

src/view/DocumentTargetPicker.vue

@@ -5,7 +5,12 @@
 
 <template>
 	<div v-if="filePath === null" class="office-target-picker">
-		<div ref="picker" class="reference-file-picker" />
+		<FilePicker :name="t('files', 'Select file or folder to link to')"
+			:buttons="filePickerButtons"
+			:allow-pick-directory="false"
+			:multiselect="false"
+			:mimetype-filter="validMimetypes"
+			container=".office-target-picker" />
 	</div>
 	<div v-else class="office-target-picker">
 		<h2>{{ t('richdocuments', 'Link to office document section') }}</h2>
@@ -19,7 +24,7 @@
 			<template v-else>
 				<div v-for="section in sections" :key="section.label">
 					<h3>{{ section.label }}</h3>
-					<ul>
+					<ul :data-cy-section-label="section.label">
 						<NcListItem v-for="entry in section.entries"
 							:key="entry.id"
 							:name="entry.name"
@@ -33,7 +38,10 @@
 				</div>
 			</template>
 			<div v-if="sections.length !== 0" class="office-target-picker__buttons">
-				<NcButton type="primary" :disabled="!target" @click="submit()">
+				<NcButton data-cy-link-to-section=""
+					type="primary"
+					:disabled="!target"
+					@click="submit()">
 					{{ t('richdocuments', 'Link to office document section') }}
 				</NcButton>
 			</div>
@@ -42,7 +50,7 @@
 </template>
 
 <script>
-import { getFilePickerBuilder } from '@nextcloud/dialogs'
+import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
 import { generateUrl, generateOcsUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -59,6 +67,7 @@ export default {
 		NcEmptyContent,
 		NcListItem,
 		NcLoadingIcon,
+		FilePicker,
 		TableOfContentsIcon,
 	},
 	props: {
@@ -77,37 +86,45 @@ export default {
 			filePath: null,
 			target: null,
 			sections: null,
+			filePickerButtons: [
+				{
+					label: t('richdocuments', 'Cancel'),
+					callback: () => {
+						this.$emit('cancel')
+					},
+					type: 'secondary',
+				},
+				{
+					label: t('richdocuments', 'Select file'),
+					callback: (files) => {
+						const file = files[0]
+						this.fileId = file.fileid
+						this.filePath = file.path
+						this.fetchReferences()
+					},
+					type: 'primary',
+				},
+			],
 		}
 	},
+	computed: {
+		validMimetypes() {
+			return getCapabilities().mimetypes
+		},
+	},
 	mounted() {
-		this.openFilePicker()
 		window.addEventListener('click', this.onWindowClick)
 	},
 	beforeDestroy() {
 		window.removeEventListener('click', this.onWindowClick)
 	},
 	methods: {
+		t,
 		onWindowClick(e) {
 			if (e.target.tagName === 'A' && e.target.classList.contains('oc-dialog-close')) {
 				this.$emit('cancel')
 			}
 		},
-		async openFilePicker() {
-			await getFilePickerBuilder(t('files', 'Select file or folder to link to'))
-				.setMimeTypeFilter(getCapabilities().mimetypes)
-				.addButton({
-					label: t('richdocuments', 'Insert image'),
-					callback: (files) => {
-						const file = files[0]
-						this.fileId = file.fileid
-						this.filePath = file.path
-						this.fetchReferences()
-					},
-				})
-				.setContainer(this.$refs.picker)
-				.build()
-				.pick()
-		},
 		setTarget(entry) {
 			this.target = entry.id
 		},
@@ -129,34 +146,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.reference-file-picker {
-	flex-grow: 1;
-
-	&:deep(.oc-dialog) {
-		transform: none !important;
-		box-shadow: none !important;
-		flex-grow: 1 !important;
-		position: static !important;
-		width: 100% !important;
-		height: auto !important;
-		padding: 0 !important;
-		max-width: initial;
-
-		.oc-dialog-close {
-			display: none;
-		}
-
-		.oc-dialog-buttonrow.onebutton.aside {
-			position: absolute;
-			padding: 12px 32px;
-		}
-
-		.oc-dialog-content {
-			max-width: 100% !important;
-		}
-	}
-}
-
 .office-target-picker {
 	margin: calc(var(--default-grid-baseline) * 4);
 	flex-grow: 1;