enh(useElementSize): track the size of an element

cypress/component/composables/useElementSize.cy.ts

@@ -0,0 +1,58 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Max <[email protected]>
+ * SPDX-License-Identifier: @license AGPL-3.0-or-later
+ *
+ * This is a cypress test because useElementSize needs a proper browser.
+ * The size of elements cannot be measured in environments like jsdom
+ * as they only stub geometry related functions such as resizeObserver.
+ */
+
+
+import { computed, isRef, ref } from 'vue'
+import { useElementSize } from '../../../src/composables/useElementSize/index.ts'
+
+const StyleableComponent = {
+	props: { style: Object },
+	setup() {
+		const widgetRoot = ref()
+		const { width, height } = useElementSize(widgetRoot)
+		return { widgetRoot, width, height }
+	},
+	template: '<div class="test" :style="style" ref="widgetRoot" />',
+}
+
+describe('useElementSize', () => {
+	it('returns refs', () => {
+		const { width, height } = useElementSize()
+		expect(isRef(width)).to.be.true
+		expect(isRef(height)).to.be.true
+	})
+
+	it('defaults to 0', () => {
+		const { width, height } = useElementSize()
+		expect(width.value).to.be.equal(0)
+		expect(height.value).to.be.equal(0)
+	})
+
+	it('measures the size', () => {
+		const style = { width: '100px', height: '200px' }
+		cy.mount(StyleableComponent, { propsData: { style } })
+			.its('component').as('component')
+		cy.get('@component').its('width').should('equal', 100)
+		cy.get('@component').its('height').should('equal', 200)
+	})
+
+	it('updates the size', () => {
+		const style = ref({ width: '123px', height: '200px' })
+		cy.mount(StyleableComponent, { propsData: { style } })
+			.its('component').as('component')
+		cy.get('@component').its('width').should('equal', 123)
+		cy.get('@component').its('height').should('equal', 200)
+		cy.then(() => style.value.width = '246px')
+		cy.then(() => style.value.height = '400px')
+		cy.get('@component').its('width').should('equal', 246)
+		cy.get('@component').its('height').should('equal', 400)
+	})
+
+})
+

src/components/NcRichText/NcReferenceWidget.vue

@@ -29,13 +29,14 @@
 	</div>
 </template>
 <script>
-import { useIntersectionObserver, useResizeObserver } from '@vueuse/core'
+import { useIntersectionObserver } from '@vueuse/core'
 import { nextTick, ref } from 'vue'
 import { RouterLink } from 'vue-router'
 
 import { t } from '../../l10n.js'
 import { getRoute } from './autolink.js'
 import { renderWidget, isWidgetRegistered, destroyWidget, hasInteractiveView, hasFullWidth } from './../../functions/reference/widgets.ts'
+import { useElementSize } from '../../composables/useElementSize/index.ts'
 
 import NcButton from '../../components/NcButton/index.js'
 
@@ -62,33 +63,17 @@ export default {
 	},
 
 	setup() {
-		const width = ref(0)
 		const isVisible = ref(false)
 		// This is the widget root node
 		const widgetRoot = ref()
+		const { width } = useElementSize(widgetRoot)
 
 		useIntersectionObserver(widgetRoot, () => {
 			nextTick(() => {
 				isVisible.value = widgetRoot.value?.isIntersecting ?? false
 			})
 		})
 
-		/**
-		 * Measure the width of the widgetRoot after a resize
-		 */
-		useResizeObserver(widgetRoot, () => {
-			/**
-			 * Wait till the next tick to allow the resize to finish first
-			 * and avoid triggering content updates during the resize.
-			 *
-			 * Without the nextTick we were seeing crashing browsers
-			 * in cypress tests.
-			 */
-			nextTick(() => {
-				width.value = widgetRoot.value?.contentRect.width ?? 0
-			})
-		})
-
 		return {
 			width,
 			isVisible,

src/composables/index.js

@@ -23,3 +23,4 @@
 export * from './useIsFullscreen/index.js'
 export * from './useIsMobile/index.js'
 export * from './useFormatDateTime.ts'
+export * from './useElementSize/index.ts'

src/composables/useElementSize/index.ts

@@ -0,0 +1,42 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Max <[email protected]>
+ * SPDX-License-Identifier: @license AGPL-3.0-or-later
+ *
+ */
+
+import { nextTick, readonly, ref } from 'vue'
+import { unrefElement, useResizeObserver } from '@vueuse/core'
+import type { MaybeComputedElementRef } from '@vueuse/core'
+import type { Ref } from 'vue'
+
+export interface ElementSize {
+  readonly width: Ref<number>
+  readonly height: Ref<number>
+}
+
+/**
+ * Track the size of the given element.
+ */
+export function useElementSize(target: MaybeComputedElementRef): ElementSize {
+	const width = ref(0)
+	const height = ref(0)
+
+	/**
+	 * Measure the width of the element after a resize
+	 */
+	useResizeObserver(target, ([entry]) => {
+		/**
+		 * Wait till the next tick to allow the resize to finish first
+		 * and avoid triggering content updates during the resize.
+		 *
+		 * Without the nextTick we were seeing crashing browsers
+		 * in cypress tests.
+		 */
+		nextTick(() => {
+			width.value = entry?.contentRect.width ?? 0
+			height.value = entry?.contentRect.height ?? 0
+		})
+	})
+
+	return { width: readonly(width), height: readonly(height) }
+}