refactor: migrate reference widget related function to Typescript

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

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.ts

@@ -3,42 +3,79 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-if (!window._vue_richtext_custom_picker_elements) {
-	window._vue_richtext_custom_picker_elements = {}
-}
+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)
  */
-class NcCustomPickerRenderResult {
+export class NcCustomPickerRenderResult {
+
+	public element: HTMLElement
+	public object: object
 
 	/**
-	 * @param {HTMLElement} element The HTML element
-	 * @param {object} object The object
+	 * @param element - The HTML element
+	 * @param object - The object
 	 */
-	constructor(element, object) {
+	constructor(element: HTMLElement, object: object) {
 		this.element = element
 		this.object = object
 	}
 
 }
 
-const isCustomPickerElementRegistered = (id) => {
+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]
 }
 
-const getCustomPickerElementSize = (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
 }
 
-const registerCustomPickerElement = (id, callback, onDestroy = (el) => {}, size = 'large') => {
+/**
+ * @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]) {
-		console.error('Custom reference picker element for id ' + id + ' already registered')
+		logger.error(`Custom reference picker element for id ${id} already registered`)
 		return
 	}
 
@@ -50,30 +87,31 @@ const registerCustomPickerElement = (id, callback, onDestroy = (el) => {}, size
 	}
 }
 
-const renderCustomPickerElement = (el, { providerId, accessible }) => {
+/**
+ * @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]) {
-		console.error('Custom reference picker element for reference provider ID ' + providerId + ' not registered')
+		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 })
+	return window._vue_richtext_custom_picker_elements[providerId]
+		.callback(el, { providerId, accessible })
 }
 
-const destroyCustomPickerElement = (providerId, el, renderResult) => {
+/**
+ * @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)
-}
-
-window._registerCustomPickerElement = registerCustomPickerElement
-
-export {
-	NcCustomPickerRenderResult,
-	registerCustomPickerElement,
-	renderCustomPickerElement,
-	destroyCustomPickerElement,
-	isCustomPickerElementRegistered,
-	getCustomPickerElementSize,
+	window._vue_richtext_custom_picker_elements[providerId]
+		.onDestroy(el, renderResult)
 }

src/functions/reference/index.ts

@@ -3,36 +3,32 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { registerWidget, renderWidget, isWidgetRegistered, hasInteractiveView } from './widgets.ts'
-import { getLinkWithPicker } from './referencePickerModal.js'
-import {
-	getProvider,
-	getProviders,
-	sortProviders,
-	searchProvider,
-	anyLinkProviderId,
-} from './providerHelper.js'
-import {
-	registerCustomPickerElement,
-	renderCustomPickerElement,
-	isCustomPickerElementRegistered,
-	NcCustomPickerRenderResult,
-} from './customPickerElements.js'
-
 export {
+	type ReferenceWidgetProps,
+	type ReferenceWidgetRenderProperties,
+
 	registerWidget,
 	renderWidget,
 	isWidgetRegistered,
 	hasInteractiveView,
+} from './widgets.ts'
+
+export { getLinkWithPicker } from './referencePickerModal.ts'
+
+export {
+	type ReferenceProvider,
 
-	NcCustomPickerRenderResult,
-	registerCustomPickerElement,
-	renderCustomPickerElement,
-	isCustomPickerElementRegistered,
-	getLinkWithPicker,
-	anyLinkProviderId,
 	getProvider,
 	getProviders,
 	sortProviders,
 	searchProvider,
-}
+	anyLinkProviderId,
+} from './providerHelper.ts'
+
+export {
+	type CustomPickerElement,
+	registerCustomPickerElement,
+	renderCustomPickerElement,
+	isCustomPickerElementRegistered,
+	NcCustomPickerRenderResult,
+} from './customPickerElements.ts'