fix(editor): add "link to page" as first link action in Text menubar

Fixes: #2332

Requires nextcloud/text#8368

Signed-off-by: Jonas <jonas@freesources.org>

Author: mejo-

playwright/e2e/page-content.spec.ts

@@ -25,4 +25,22 @@ test.describe('Page content', () => {
 
 		await runOcc(['app:disable', 'whiteboard'])
 	})
+
+	test('link to page from link menu', async ({ user, page, collective, editor }) => {
+		const sourcePage = await collective.createPage({ title: 'Source page', user, page })
+		const targetPage = await collective.createPage({ title: 'Target page', user, page })
+		await sourcePage.open(true)
+
+		editor.setMode(true)
+		await editor.clickMenu('Insert link', 'Link to page')
+		await editor.smartPickerSearch.pressSequentially('Target page')
+
+		await editor.smartPicker.locator('.search-result').filter({ hasText: 'Target page' }).click()
+
+		const pageWidget = editor.getContent().locator('.widget-custom a.collective-page')
+
+		await expect(pageWidget).toBeVisible()
+		const origin = new URL(page.url()).origin
+		await expect(pageWidget).toHaveAttribute('href', origin + targetPage.getPageUrl())
+	})
 })

playwright/support/sections/EditorSection.ts

@@ -11,11 +11,15 @@ export class EditorSection {
 	public isEdit: boolean
 	public readonly editor: Locator
 	public readonly reader: Locator
+	public readonly smartPicker: Locator
+	public readonly smartPickerSearch: Locator
 
 	constructor(public readonly page: Page) {
 		this.isEdit = false
 		this.editor = this.page.locator('[data-cy-collectives="editor"]')
 		this.reader = this.page.locator('[data-cy-collectives="reader"]')
+		this.smartPicker = this.page.getByRole('dialog')
+		this.smartPickerSearch = this.smartPicker.getByPlaceholder('Search', { exact: true })
 	}
 
 	public setMode(edit: boolean) {

src/composables/useEditor.js

@@ -3,8 +3,11 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { t } from '@nextcloud/l10n'
 import debounce from 'debounce'
-import { computed, markRaw, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, defineCustomElement, markRaw, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { getLinkWithPicker } from '@nextcloud/vue/components/NcRichText'
+import PageIcon from '../components/Icon/PageIcon.vue'
 import { useCollectivesStore } from '../stores/collectives.js'
 import { usePagesStore } from '../stores/pages.js'
 import { useRootStore } from '../stores/root.js'
@@ -81,13 +84,35 @@ export function useEditor(davContent) {
 			return
 		}
 
+		// Define PageIcon as custom web component
+		if (!window.customElements.get('page-icon')) {
+			const PageIconCE = defineCustomElement({
+				...PageIcon,
+				props: {
+					...PageIcon.props,
+					size: {
+						type: Number,
+						default: 20,
+					},
+				},
+			}, { shadowRoot: false })
+			customElements.define('page-icon', PageIconCE)
+		}
+
 		editorPromise = window.OCA.Text.createEditor({
 			el: editorEl.value,
 			fileId: page.id,
 			filePath: `/${pagesStore.pageFilePath(page)}`,
 			readOnly: false,
 			shareToken: rootStore.shareTokenParam || null,
 			autofocus: false,
+			menubarLinkCustomAction: {
+				label: t('collectives', 'Link to page'),
+				icon: 'page-icon',
+				action: () => {
+					return getLinkWithPicker('collectives-ref-pages', false)
+				},
+			},
 			onCreate: ({ markdown }) => {
 				updateEditorContentDebounced(markdown)
 			},