Implement reference picker

package.json

@@ -38,9 +38,12 @@
 	],
 	"dependencies": {
 		"@nextcloud/axios": "^2.0.0",
+		"@nextcloud/initial-state": "^2.0.0",
 		"@nextcloud/router": "^2.0.0",
+		"@nextcloud/vue": "^7.5.0",
 		"clone": "^2.1.2",
-		"vue": "^2.7.8"
+		"vue": "^2.7.8",
+		"vue-material-design-icons": "^5.1.2"
 	},
 	"devDependencies": {
 		"@babel/eslint-parser": "^7.18.9",

src/package.js

@@ -2,15 +2,34 @@ import RichText from './RichText.vue'
 import { registerWidget, renderWidget, isWidgetRegistered } from './widgets'
 import ReferenceList from './ReferenceList.vue'
 import ReferenceWidget from './ReferenceWidget.vue'
+import ReferencePicker from './referencePicker/ReferencePicker.vue'
+import ReferencePickerModal from './referencePicker/ReferencePickerModal.vue'
+import Search from './referencePicker/Search.vue'
+import { getLinkWithPicker } from './referencePicker/referencePickerModal.js'
+import { getProvider, getProviders, sortProviders, searchProvider } from './referencePicker/providerHelper.js'
+import { registerCustomPickerElement, renderCustomPickerElement, isCustomPickerElementRegistered, CustomPickerRenderResult } from './referencePicker/customPickerElements'
 
 export default RichText
 
 export {
 	RichText,
 	ReferenceList,
 	ReferenceWidget,
+	ReferencePicker,
+	ReferencePickerModal,
+	Search,
 
 	registerWidget,
 	renderWidget,
-	isWidgetRegistered
+	isWidgetRegistered,
+
+	CustomPickerRenderResult,
+	registerCustomPickerElement,
+	renderCustomPickerElement,
+	isCustomPickerElementRegistered,
+	getLinkWithPicker,
+	getProvider,
+	getProviders,
+	sortProviders,
+	searchProvider,
 }

src/referencePicker/CustomPickerElement.vue

@@ -0,0 +1,63 @@
+<template>
+	<div ref="domElement" />
+</template>
+
+<script>
+import { renderCustomPickerElement, isCustomPickerElementRegistered, destroyCustomPickerElement } from './customPickerElements.js'
+
+export default {
+	name: 'CustomPickerElement',
+	props: {
+		/**
+		 * The reference provider
+		 */
+		provider: {
+			type: Object,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			isRegistered: isCustomPickerElementRegistered(this.provider.id),
+			renderResult: null,
+		}
+	},
+	mounted() {
+		if (this.isRegistered) {
+			this.renderElement()
+		}
+	},
+	beforeDestroy() {
+		if (this.isRegistered) {
+			destroyCustomPickerElement(this.provider.id, this.$el, this.renderResult)
+		}
+	},
+	methods: {
+		renderElement() {
+			if (this.$refs.domElement) {
+				this.$refs.domElement.innerHTML = ''
+			}
+
+			this.renderResult = renderCustomPickerElement(this.$refs.domElement, { providerId: this.provider.id, accessible: false })
+			if (this.renderResult.object?._isVue && this.renderResult.object?.$on) {
+				this.renderResult.object.$on('submit', this.onSubmit)
+				this.renderResult.object.$on('cancel', this.onCancel)
+			}
+			this.renderResult.element.addEventListener('submit', (e) => {
+				this.onSubmit(e.detail)
+			})
+			this.renderResult.element.addEventListener('cancel', this.onCancel)
+		},
+		onSubmit(value) {
+			this.$emit('submit', value)
+		},
+		onCancel() {
+			this.$emit('cancel')
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+// nothing yet
+</style>

src/referencePicker/ProviderList.vue

@@ -0,0 +1,144 @@
+<template>
+	<div class="provider-list">
+		<NcMultiselect
+			ref="provider-select"
+			v-model="selectedProvider"
+			class="provider-list--select"
+			track-by="id"
+			label="title"
+			:placeholder="multiselectPlaceholder"
+			:options="options"
+			:internal-search="false"
+			:clear-on-select="true"
+			:preserve-search="true"
+			:option-height="44"
+			@search-change="query = $event"
+			@input="onProviderSelected">
+			<template #option="{option}">
+				<div v-if="option.isLink" class="provider">
+					<LinkVariantIcon class="link-icon" :size="20" />
+					<span>{{ option.title }}</span>
+				</div>
+				<div v-else class="provider">
+					<img class="provider-icon"
+						:src="option.icon_url">
+					<NcHighlight class="option-text"
+						:search="query"
+						:text="option.title" />
+				</div>
+			</template>
+		</NcMultiselect>
+		<NcEmptyContent
+			class="provider-list--empty-content">
+			<template #icon>
+				<LinkVariantIcon />
+			</template>
+		</NcEmptyContent>
+	</div>
+</template>
+
+<script>
+import LinkVariantIcon from 'vue-material-design-icons/LinkVariant.vue'
+
+import { NcMultiselect, NcEmptyContent } from '@nextcloud/vue'
+import NcHighlight from '@nextcloud/vue/dist/Components/NcHighlight.js'
+
+import { searchProvider } from './providerHelper.js'
+import { isUrl } from './utils.js'
+
+export default {
+	name: 'ProviderList',
+	components: {
+		NcMultiselect,
+		NcHighlight,
+		NcEmptyContent,
+		LinkVariantIcon,
+	},
+	data() {
+		return {
+			selectedProvider: null,
+			query: '',
+			// TODO translate?
+			multiselectPlaceholder: 'Select a link provider',
+		}
+	},
+	computed: {
+		options() {
+			const result = []
+			if (this.query !== '' && isUrl(this.query)) {
+				result.push({
+					id: this.query,
+					title: this.query,
+					isLink: true,
+				})
+			}
+			result.push(...searchProvider(this.query))
+			return result
+		},
+	},
+	methods: {
+		focus() {
+			this.$nextTick(() => {
+				this.$refs['provider-select']?.$el?.focus()
+			})
+		},
+		onProviderSelected(p) {
+			if (p !== null) {
+				if (p.isLink) {
+					this.$emit('submit', p.title)
+				} else {
+					this.$emit('select-provider', p)
+				}
+				this.selectedProvider = null
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.provider-list {
+	width: 100%;
+	min-height: 350px;
+	// multiselect dropdown is wider than the select input
+	// this avoids overflow
+	padding-right: 2px;
+	display: flex;
+	flex-direction: column;
+
+	&--empty-content {
+		margin-top: auto !important;
+		margin-bottom: auto !important;
+	}
+
+	&--select {
+		width: 100%;
+
+		.provider {
+			display: flex;
+			align-items: center;
+			height: 28px;
+			overflow: hidden;
+
+			.link-icon {
+				margin-right: 8px;
+			}
+
+			.provider-icon {
+				width: 20px;
+				height: 20px;
+				object-fit: contain;
+				margin-right: 8px;
+				filter: var(--background-invert-if-dark);
+			}
+
+			.option-text {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+		}
+	}
+}
+</style>