From 5b53cf76f2cf3e85e982ac5b3ec538b5ddb5667e Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Sat, 4 May 2024 08:35:18 +0200
Subject: [PATCH] fix(editor): requestAnimationFrame in onResize callbacks

This fixes a crash in cypress with new Chromium versions.

It also prevents warnings like:
`ResizeObserver loop completed with undelivered notifications`.

Signed-off-by: Max <max@nextcloud.com>
---
 src/components/Editor.vue               | 10 ++++++----
 src/components/Editor/EditorOutline.vue | 21 +++++++++------------
 src/components/Menu/MenuBar.vue         | 19 ++++++++++---------
 3 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index da46735e71a..d6a3482cc18 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -342,10 +342,12 @@ export default {
 		subscribe('text:image-node:delete', this.onDeleteImageNode)
 		this.emit('update:loaded', true)
 		useResizeObserver(this.$el, (entries) => {
-			const entry = entries[0]
-			const { width } = entry.contentRect
-			const maxWidth = width - 36
-			this.$el.style.setProperty('--widget-full-width', `${maxWidth}px`)
+			window.requestAnimationFrame(() => {
+				const entry = entries[0]
+				const { width } = entry.contentRect
+				const maxWidth = width - 36
+				this.$el.style.setProperty('--widget-full-width', `${maxWidth}px`)
+			})
 		})
 		subscribe('text:translate-modal:show', this.showTranslateModal)
 	},
diff --git a/src/components/Editor/EditorOutline.vue b/src/components/Editor/EditorOutline.vue
index ac91067228b..d41e3739f1e 100644
--- a/src/components/Editor/EditorOutline.vue
+++ b/src/components/Editor/EditorOutline.vue
@@ -16,17 +16,12 @@
 </template>
 
 <script>
-import debounce from 'debounce'
 import { NcButton } from '@nextcloud/vue'
 import TableOfContents from './TableOfContents.vue'
 import { useOutlineStateMixin, useOutlineActions } from './Wrapper.provider.js'
 import { Close } from './../icons.js'
 import useStore from '../../mixins/store.js'
 
-const onResize = debounce((context) => {
-	context.mobile = context.$el.parentElement.clientWidth < 320
-}, 10)
-
 export default {
 	name: 'EditorOutline',
 	components: {
@@ -39,20 +34,22 @@ export default {
 		mobile: false,
 	}),
 	mounted() {
-		this.$onResize = () => {
-			onResize(this)
-		}
-
-		this.$resizeObserver = new ResizeObserver(this.$onResize)
+		this.$resizeObserver = new ResizeObserver(this.onResize)
 		this.$resizeObserver.observe(this.$el.parentElement)
-
-		this.$onResize()
+		this.onResize()
 	},
 	beforeDestroy() {
 		this.$resizeObserver.unobserve(this.$el.parentElement)
 		this.$resizeObserver = null
 		this.$onResize = null
 	},
+	methods: {
+		onResize([el]) {
+			window.requestAnimationFrame(() => {
+				this.mobile = el.clientWidth < 320
+			})
+		},
+	},
 }
 </script>
 
diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue
index a6c3486f690..3417662dbdf 100644
--- a/src/components/Menu/MenuBar.vue
+++ b/src/components/Menu/MenuBar.vue
@@ -197,17 +197,18 @@ export default {
 	},
 	methods: {
 		onResize(entries) {
-			const entry = entries[0]
-			const { width } = entry.contentRect
+			window.requestAnimationFrame(() => {
+				const entry = entries[0]
+				const { width } = entry.contentRect
 
-			// leave some buffer - this is necessary so the bar does not wrap during resizing
-			const spaceToFill = width - 4
-			const spacePerSlot = this.$isMobile ? 44 : 46
-			const slots = Math.floor(spaceToFill / spacePerSlot)
+				// leave some buffer - this is necessary so the bar does not wrap during resizing
+				const spaceToFill = width - 4
+				const spacePerSlot = this.$isMobile ? 44 : 46
+				const slots = Math.floor(spaceToFill / spacePerSlot)
 
-			// Leave one slot empty for the three dot menu
-			this.iconsLimit = slots - 1
-			this.isReady = true
+				// Leave one slot empty for the three dot menu
+				this.iconsLimit = slots - 1
+			})
 		},
 		showHelp() {
 			this.displayHelp = true