Link picker

cypress/e2e/nodes/Mentions.spec.js

@@ -50,7 +50,7 @@ describe('Test mentioning users', () => {
 
 		return cy.wait(`@${requestAlias}`)
 			.then(() => {
-				cy.get('.tippy-box .items').children().should(($children) => {
+				cy.get('.tippy-box .suggestion-list').children().should(($children) => {
 					const users = $children.map((i, el) => el.innerText).get()
 					expect(users.length).to.be.greaterThan(0)
 					expect(mention).to.be.oneOf(users)
@@ -78,7 +78,7 @@ describe('Test mentioning users', () => {
 
 		return cy.wait(`@${autocompleteReauestAlias}`)
 			.then(() => {
-				cy.get('.tippy-box .items').contains(mention).click()
+				cy.get('.tippy-box .suggestion-list').contains(mention).click()
 				cy.get('span.mention').contains(mention).should('be.visible')
 			})
 	})

package.json

@@ -46,7 +46,7 @@
     "@nextcloud/moment": "^1.2.1",
     "@nextcloud/router": "^2.0.1",
     "@nextcloud/vue": "^7.5.0",
-    "@nextcloud/vue-richtext": "^2.0.4",
+    "@nextcloud/vue-richtext": "^2.1.0-beta.1",
     "@quartzy/markdown-it-mentions": "^0.2.0",
     "@tiptap/core": "^2.0.0-beta.209",
     "@tiptap/extension-blockquote": "^2.0.0-beta.209",

src/EditorFactory.js

@@ -26,17 +26,14 @@ import Placeholder from '@tiptap/extension-placeholder'
 /* eslint-enable import/no-named-as-default */
 
 import TrailingNode from './nodes/TrailingNode.js'
-import EmojiListWrapper from './components/EmojiListWrapper.vue'
 import EditableTable from './nodes/EditableTable.js'
-import MentionSuggestion from './components/Mention/suggestion.js'
+import MentionSuggestion from './components/Suggestion/Mention/suggestions.js'
+import EmojiSuggestion from './components/Suggestion/Emoji/suggestions.js'
 
-import tippy from 'tippy.js'
 import 'proxy-polyfill'
 
 import { Editor } from '@tiptap/core'
-import { VueRenderer } from '@tiptap/vue-2'
 import { translate as t } from '@nextcloud/l10n'
-import { emojiSearch } from '@nextcloud/vue'
 import { lowlight } from 'lowlight/lib/core.js'
 import hljs from 'highlight.js'
 
@@ -79,55 +76,7 @@ const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditi
 				],
 			}),
 			Emoji.configure({
-				suggestion: {
-					items: ({ query }) => {
-						return emojiSearch(query)
-					},
-					render: () => {
-						let component
-						let popup
-
-						return {
-							onStart: props => {
-								component = new VueRenderer(EmojiListWrapper, {
-									parent: this,
-									propsData: props,
-								})
-
-								popup = tippy('body', {
-									getReferenceClientRect: props.clientRect,
-									appendTo: () => document.body,
-									content: component.element,
-									showOnCreate: true,
-									interactive: true,
-									trigger: 'manual',
-									placement: 'bottom-start',
-								})
-							},
-
-							onUpdate(props) {
-								component.updateProps(props)
-								popup[0].setProps({
-									getReferenceClientRect: props.clientRect,
-								})
-							},
-
-							onKeyDown(props) {
-								if (props.event.key === 'Escape') {
-									component.destroy()
-									popup[0].destroy()
-									return true
-								}
-								return component.ref?.onKeyDown(props)
-							},
-
-							onExit() {
-								popup[0].destroy()
-								component.destroy()
-							},
-						}
-					},
-				},
+				suggestion: EmojiSuggestion(),
 			}),
 			Placeholder.configure({
 				emptyNodeClass: 'is-empty',

src/components/Menu/ActionInsertLink.vue

@@ -67,16 +67,24 @@
 			</template>
 			{{ state.active ? t('text', 'Update link') : t('text', 'Link to website') }}
 		</NcActionButton>
+		<NcActionButton :data-text-action-entry="`${actionEntry.key}-picker`"
+			@click="linkPicker">
+			<template #icon>
+				<LinkVariantPlus />
+			</template>
+			{{ t('text', 'Open link picker') }}
+		</NcActionButton>
 	</NcActions>
 </template>
 
 <script>
 import { NcActions, NcActionButton, NcActionInput } from '@nextcloud/vue'
+import { getLinkWithPicker } from '@nextcloud/vue-richtext'
 import { FilePicker, FilePickerType } from '@nextcloud/dialogs'
 
 import { getMarkAttributes, isActive } from '@tiptap/core'
 
-import { Document, Loading, LinkOff, Web } from '../icons.js'
+import { Document, Loading, LinkOff, Web, LinkVariantPlus } from '../icons.js'
 import { BaseActionEntry } from './BaseActionEntry.js'
 import { optimalPath } from '../../helpers/files.js'
 import { useFileMixin } from '../Editor.provider.js'
@@ -92,6 +100,7 @@ export default {
 		Loading,
 		LinkOff,
 		Web,
+		LinkVariantPlus,
 	},
 	extends: BaseActionEntry,
 	mixins: [
@@ -214,6 +223,19 @@ export default {
 		removeLink() {
 			this.$editor.chain().unsetLink().focus().run()
 		},
+		linkPicker() {
+			getLinkWithPicker()
+				.then(link => {
+					this.$editor
+						.chain()
+						.focus()
+						.insertContent(link + ' ')
+						.run()
+				})
+				.catch(error => {
+					console.error('Link picker promise rejected:', error)
+				})
+		},
 	},
 }
 </script>

src/components/Suggestion/Emoji/suggestions.js

@@ -0,0 +1,38 @@
+/*
+ * @copyright Copyright (c) 2022 Julius Härtl <[email protected]>
+ *
+ * @author Julius Härtl <[email protected]>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { emojiSearch } from '@nextcloud/vue'
+import createSuggestions from '../suggestions.js'
+import EmojiList from './EmojiList.vue'
+
+export default () => createSuggestions({
+	listComponent: EmojiList,
+	items: ({ query }) => {
+		return emojiSearch(query)
+	},
+	command: ({ editor, range, props }) => {
+		editor
+			.chain()
+			.focus()
+			.insertContentAt(range, props.native + ' ')
+			.run()
+	},
+})