fix: move to typescript

Signed-off-by: Julius Härtl <[email protected]>

l10n/messages.pot

@@ -124,6 +124,9 @@ msgstr ""
 msgid "Emoji picker"
 msgstr ""
 
+msgid "Enable interactive view"
+msgstr ""
+
 msgid "Enter link"
 msgstr ""
 

src/components/NcRichText/NcReferenceList.vue

@@ -36,7 +36,7 @@ export default {
 		},
 		interactive: {
 			type: Boolean,
-			default: false,
+			default: true,
 		},
 		interactiveOptIn: {
 			type: Boolean,

src/components/NcRichText/NcReferenceWidget.vue

@@ -21,17 +21,18 @@
 			</div>
 		</component>
 		<NcButton v-if="hasInteractiveView && !isInteractive" class="toggle-interactive--button" @click="enableInteractive">
-			Enable interative mode
+			{{ enableLabel }}
 		</NcButton>
 	</div>
 </template>
 <script>
 import { RouterLink } from 'vue-router'
 
 import { getRoute } from './autolink.js'
-import { renderWidget, isWidgetRegistered, destroyWidget, hasInteractiveView } from './../../functions/reference/widgets.js'
-import { useElementVisibility, useResizeObserver } from '@vueuse/core'
+import { renderWidget, isWidgetRegistered, destroyWidget, hasInteractiveView } from './../../functions/reference/widgets.ts'
+import { useIntersectionObserver, useResizeObserver } from '@vueuse/core'
 import NcButton from '../../components/NcButton/index.js'
+import { t } from '../../l10n.js'
 
 export default {
 	name: 'NcReferenceWidget',
@@ -45,7 +46,7 @@ export default {
 		},
 		interactive: {
 			type: Boolean,
-			default: false,
+			default: true,
 		},
 		interactiveOptIn: {
 			type: Boolean,
@@ -55,9 +56,10 @@ export default {
 	data() {
 		return {
 			compact: 3,
-			isVisible: false,
 			showInteractive: false,
+			isVisible: false,
 			rendered: false,
+			enableLabel: t('Enable interactive view'),
 		}
 	},
 	computed: {
@@ -113,15 +115,21 @@ export default {
 		},
 	},
 	watch: {
-		isVisible(val) {
-			if (!val || this.rendered) {
-				return
-			}
-			this.renderWidget()
+		isVisible: {
+			handler(val) {
+				if (!val) {
+					this.destroyWidget()
+					return
+				}
+				this.renderWidget()
+			},
+			immediate: true,
 		},
 	},
 	mounted() {
-		this.isVisible = useElementVisibility(this.$el)
+		useIntersectionObserver(this.$el, entries => {
+			this.isVisible = entries[0]?.isIntersecting ?? false
+		})
 		useResizeObserver(this.$el, entries => {
 			if (entries[0].contentRect.width < 450) {
 				this.compact = 0
@@ -136,7 +144,7 @@ export default {
 		})
 	},
 	beforeDestroy() {
-		destroyWidget(this.reference.richObjectType, this.$el)
+		this.destroyWidget()
 	},
 	methods: {
 		enableInteractive() {
@@ -162,6 +170,12 @@ export default {
 				this.rendered = true
 			})
 		},
+		destroyWidget() {
+			if (this.rendered) {
+				destroyWidget(this.reference.richObjectType, this.$el)
+				this.rendered = false
+			}
+		},
 	},
 }
 </script>

src/components/NcRichText/index.js

@@ -22,7 +22,7 @@
 
 import NcRichText from './NcRichText.vue'
 
-import { registerWidget, renderWidget, isWidgetRegistered } from './../../functions/reference/widgets.js'
+import { registerWidget, renderWidget, isWidgetRegistered } from './../../functions/reference/widgets.ts'
 import NcReferenceList from './NcReferenceList.vue'
 import NcReferenceWidget from './NcReferenceWidget.vue'
 import NcReferencePicker from './NcReferencePicker/NcReferencePicker.vue'

src/functions/reference/index.js

@@ -1,4 +1,4 @@
-import { registerWidget, renderWidget, isWidgetRegistered, hasInteractiveView } from './widgets.js'
+import { registerWidget, renderWidget, isWidgetRegistered, hasInteractiveView } from './widgets.ts'
 import { getLinkWithPicker } from './referencePickerModal.js'
 import {
 	getProvider,

src/functions/reference/widgets.ts

@@ -0,0 +1,96 @@
+interface WidgetRenderProperties {
+	richObjectType: string;
+	richObject: object;
+	accessible: boolean;
+	interactive: boolean;
+}
+
+type widgetRenderCallback = (el: HTMLElement, properties: WidgetRenderProperties) => void;
+type widgetDestroyCallback = (el: HTMLElement) => void;
+
+interface WidgetProps {
+	id: string;
+	hasInteractiveView: boolean;
+	callback: widgetRenderCallback;
+	onDestroy: widgetDestroyCallback;
+}
+
+interface WidgetPropsOptional {
+	hasInteractiveView?: boolean;
+}
+
+declare global {
+	interface Window {
+		_vue_richtext_widgets: Record<string, WidgetProps>;
+		_registerWidget: (id: string, callback: widgetRenderCallback, onDestroy: widgetDestroyCallback, props: WidgetPropsOptional) => void;
+	}
+}
+
+if (!window._vue_richtext_widgets) {
+	window._vue_richtext_widgets = {}
+}
+
+const isWidgetRegistered = (id: string) => {
+	return !!window._vue_richtext_widgets[id]
+}
+
+const hasInteractiveView = (id: string) => {
+	return !!window._vue_richtext_widgets[id]?.hasInteractiveView
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const registerWidget = (id: string, callback: widgetRenderCallback, onDestroy = (el: HTMLElement) => {}, props: WidgetPropsOptional) => {
+	const propsWithDefaults = {
+		hasInteractiveView: true,
+		...props,
+	}
+
+	if (window._vue_richtext_widgets[id]) {
+		console.error('Widget for id ' + id + ' already registered')
+		return
+	}
+
+	window._vue_richtext_widgets[id] = {
+		id,
+		callback,
+		onDestroy,
+		...propsWithDefaults,
+	}
+}
+
+const renderWidget = (el: HTMLElement, { richObjectType, richObject, accessible, interactive }) => {
+	if (richObjectType === 'open-graph') {
+		return
+	}
+
+	if (!window._vue_richtext_widgets[richObjectType]) {
+		console.error('Widget for rich object type ' + richObjectType + ' not registered')
+		return
+	}
+
+	window._vue_richtext_widgets[richObjectType].callback(el, { richObjectType, richObject, accessible, interactive })
+}
+
+const destroyWidget = (richObjectType: string, el: HTMLElement) => {
+	if (richObjectType === 'open-graph') {
+		return
+	}
+
+	if (!window._vue_richtext_widgets[richObjectType]) {
+		return
+	}
+
+	window._vue_richtext_widgets[richObjectType].onDestroy(el)
+}
+
+window._registerWidget = (id: string, callback: widgetRenderCallback, onDestroy: widgetDestroyCallback, props: WidgetPropsOptional) => {
+	registerWidget(id, callback, onDestroy, props)
+}
+
+export {
+	registerWidget,
+	renderWidget,
+	destroyWidget,
+	isWidgetRegistered,
+	hasInteractiveView,
+}

src/functions/registerReference/index.js

@@ -3,7 +3,7 @@ export {
 	renderWidget,
 	destroyWidget,
 	isWidgetRegistered,
-} from './../reference/widgets.js'
+} from './../reference/widgets.ts'
 export {
 	NcCustomPickerRenderResult,
 	registerCustomPickerElement,