Merge pull request #7417 from nextcloud-libraries/backport/6969/stable8

[stable8] refactor: migrate reference widget related function to Typescript

Author: susnux

src/components/NcRichText/NcReferencePicker/NcCustomPickerElement.vue

@@ -8,7 +8,11 @@
 </template>
 
 <script>
-import { renderCustomPickerElement, isCustomPickerElementRegistered, destroyCustomPickerElement } from './../../../functions/reference/customPickerElements.js'
+import {
+	renderCustomPickerElement,
+	isCustomPickerElementRegistered,
+	destroyCustomPickerElement,
+} from '../../../functions/reference/customPickerElements.ts'
 
 export default {
 	name: 'NcCustomPickerElement',

src/components/NcRichText/NcReferencePicker/NcProviderList.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import { searchProvider } from './../../../functions/reference/providerHelper.js'
+import { searchProvider } from '../../../functions/reference/providerHelper.ts'
 import { isUrl } from './utils.js'
 import NcEmptyContent from '../../NcEmptyContent/index.js'
 import NcHighlight from '../../NcHighlight/index.js'

src/components/NcRichText/NcReferencePicker/NcReferencePicker.vue

@@ -38,8 +38,8 @@ import NcCustomPickerElement from './NcCustomPickerElement.vue'
 import NcProviderList from './NcProviderList.vue'
 import NcRawLinkInput from './NcRawLinkInput.vue'
 import NcSearch from './NcSearch.vue'
-import { isCustomPickerElementRegistered } from './../../../functions/reference/customPickerElements.js'
-import { touchProvider } from './../../../functions/reference/providerHelper.js'
+import { isCustomPickerElementRegistered } from '../../../functions/reference/customPickerElements.ts'
+import { touchProvider } from '../../../functions/reference/providerHelper.ts'
 
 const MODES = {
 	providerList: 1,

src/components/NcRichText/NcReferencePicker/NcReferencePickerModal.vue

@@ -44,7 +44,7 @@
 
 <script>
 import NcReferencePicker from './NcReferencePicker.vue'
-import { getCustomPickerElementSize, isCustomPickerElementRegistered } from './../../../functions/reference/customPickerElements.js'
+import { getCustomPickerElementSize, isCustomPickerElementRegistered } from '../../../functions/reference/customPickerElements.ts'
 import NcButton from '../../NcButton/index.js'
 import NcModal from '../../NcModal/index.js'
 import { t } from '../../../l10n.js'

src/components/NcRichText/index.js

@@ -11,20 +11,20 @@ import NcReferenceWidget from './NcReferenceWidget.vue'
 import NcReferencePicker from './NcReferencePicker/NcReferencePicker.vue'
 import NcReferencePickerModal from './NcReferencePicker/NcReferencePickerModal.vue'
 import NcSearch from './NcReferencePicker/NcSearch.vue'
-import { getLinkWithPicker } from './../../functions/reference/referencePickerModal.js'
+import { getLinkWithPicker } from '../../functions/reference/referencePickerModal.ts'
 import {
 	getProvider,
 	getProviders,
 	sortProviders,
 	searchProvider,
 	anyLinkProviderId,
-} from '../../functions/reference/providerHelper.js'
+} from '../../functions/reference/providerHelper.ts'
 import {
 	registerCustomPickerElement,
 	renderCustomPickerElement,
 	isCustomPickerElementRegistered,
 	NcCustomPickerRenderResult,
-} from '../../functions/reference/customPickerElements.js'
+} from '../../functions/reference/customPickerElements.ts'
 
 export default NcRichText
 

src/functions/reference/customPickerElements.js

@@ -0,0 +1,117 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { logger } from '../../utils/logger.ts'
+
+window._vue_richtext_custom_picker_elements ??= {}
+window._registerCustomPickerElement ??= registerCustomPickerElement
+
+/**
+ * Representation of the render callback result
+ * It contains a dom element and an object (Vue instance or other fancy things)
+ */
+export class NcCustomPickerRenderResult {
+
+	public element: HTMLElement
+	public object: object
+
+	/**
+	 * @param element - The HTML element
+	 * @param object - The object
+	 */
+	constructor(element: HTMLElement, object: object) {
+		this.element = element
+		this.object = object
+	}
+
+}
+
+interface CustomPickerElementProps {
+	providerId: number
+	accessible: boolean
+}
+
+type CustomPickerElementRegistrationCallback = (el: HTMLElement, options: CustomPickerElementProps) => void
+type CustomPickerElementDestroyCallback = (el: HTMLElement, result: NcCustomPickerRenderResult) => void
+
+export interface CustomPickerElement {
+	id: string
+	size: 'small' | 'normal' | 'large' | 'full'
+
+	callback: CustomPickerElementRegistrationCallback
+	onDestroy: CustomPickerElementDestroyCallback
+}
+
+/**
+ * @param id - Id of the element to check
+ */
+export function isCustomPickerElementRegistered(id: string): boolean {
+	return !!window._vue_richtext_custom_picker_elements[id]
+}
+
+/**
+ * @param id - Id of the element to get
+ */
+export function getCustomPickerElementSize(id: string): 'small' | 'normal' | 'large' | 'full' | null {
+	const size = window._vue_richtext_custom_picker_elements[id]?.size
+	if (['small', 'normal', 'large', 'full'].includes(size)) {
+		return size
+	}
+	return null
+}
+
+/**
+ * @param id - Id of element to register
+ * @param callback - Render callback
+ * @param onDestroy - Cleanup callback
+ * @param size - Size of the element
+ */
+export function registerCustomPickerElement(
+	id: string,
+	callback: CustomPickerElementRegistrationCallback,
+	onDestroy: CustomPickerElementDestroyCallback = () => {},
+	size: CustomPickerElement['size'] = 'large',
+) {
+	if (window._vue_richtext_custom_picker_elements[id]) {
+		logger.error(`Custom reference picker element for id ${id} already registered`)
+		return
+	}
+
+	window._vue_richtext_custom_picker_elements[id] = {
+		id,
+		callback,
+		onDestroy,
+		size,
+	}
+}
+
+/**
+ * @param el - element to render to
+ * @param options - Element options
+ */
+export function renderCustomPickerElement(el: HTMLElement, options: CustomPickerElementProps) {
+	const { providerId, accessible } = options
+	if (!window._vue_richtext_custom_picker_elements[providerId]) {
+		logger.error(`Custom reference picker element for reference provider ID ${providerId} not registered`)
+		return
+	}
+
+	return window._vue_richtext_custom_picker_elements[providerId]
+		.callback(el, { providerId, accessible })
+}
+
+/**
+ * @param providerId - Provider id of element to destroy
+ * @param el - The element to destroy element from
+ * @param renderResult - The render result
+ */
+export function destroyCustomPickerElement(providerId: string, el: HTMLElement, renderResult: NcCustomPickerRenderResult) {
+	if (!window._vue_richtext_custom_picker_elements[providerId]) {
+		return
+	}
+
+	window._vue_richtext_custom_picker_elements[providerId]
+		.onDestroy(el, renderResult)
+}

src/functions/reference/customPickerElements.ts

@@ -0,0 +1,34 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export {
+	type ReferenceWidgetProps,
+	type ReferenceWidgetRenderProperties,
+
+	registerWidget,
+	renderWidget,
+	isWidgetRegistered,
+	hasInteractiveView,
+} from './widgets.ts'
+
+export { getLinkWithPicker } from './referencePickerModal.ts'
+
+export {
+	type ReferenceProvider,
+
+	getProvider,
+	getProviders,
+	sortProviders,
+	searchProvider,
+	anyLinkProviderId,
+} from './providerHelper.ts'
+
+export {
+	type CustomPickerElement,
+	registerCustomPickerElement,
+	renderCustomPickerElement,
+	isCustomPickerElementRegistered,
+	NcCustomPickerRenderResult,
+} from './customPickerElements.ts'