From 2d6075fcce62215515576983f0786e531f45d764 Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Mon, 8 Jul 2024 11:38:08 +0200
Subject: [PATCH 1/2] fix(Editor): use setup function with useElementSize

Signed-off-by: Max <max@nextcloud.com>
---
 src/components/Editor.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 8fadb7cb891..019daa63839 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -22,6 +22,7 @@
 
 <template>
 	<div id="editor-container"
+		ref="el"
 		data-text-el="editor-container"
 		class="text-editor"
 		tabindex="-1"
@@ -81,7 +82,7 @@
 </template>
 
 <script>
-import Vue, { set } from 'vue'
+import Vue, { ref, set, watch } from 'vue'
 import { mapActions, mapState } from 'vuex'
 import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
@@ -89,6 +90,7 @@ import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { Collaboration } from '@tiptap/extension-collaboration'
 import Autofocus from '../extensions/Autofocus.js'
 import { Doc } from 'yjs'
+import { useElementSize } from '@vueuse/core'
 
 import {
 	EDITOR,
@@ -227,6 +229,17 @@ export default {
 			default: false,
 		},
 	},
+
+	setup() {
+		const el = ref(null)
+		const { width } = useElementSize(el)
+		watch(width, value => {
+			const maxWidth = Math.floor(value) - 36
+			el.value.style.setProperty('--widget-full-width', `${maxWidth}px`)
+		})
+		return { el, width }
+	},
+
 	data() {
 		return {
 			IDLE_TIMEOUT,

From d7b6d31f6783095aab803b3be7d601bae27fcc3b Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Mon, 8 Jul 2024 17:43:24 +0200
Subject: [PATCH 2/2] fix(menu): Compute width in `setup()` function

* Use `useElementSize` instead of `useResizeObserver`.

* These composables are meant to be used in composition API style.

Signed-off-by: Max <max@nextcloud.com>
---
 src/components/Menu/MenuBar.vue | 37 +++++++++++++++------------------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue
index a66b45cfddb..ef5746b051b 100644
--- a/src/components/Menu/MenuBar.vue
+++ b/src/components/Menu/MenuBar.vue
@@ -82,9 +82,10 @@
 </template>
 
 <script>
+import { ref } from 'vue'
 import { NcActionSeparator, NcActionButton } from '@nextcloud/vue'
 import { loadState } from '@nextcloud/initial-state'
-import { useResizeObserver } from '@vueuse/core'
+import { useElementSize } from '@vueuse/core'
 
 import ActionFormattingHelp from './ActionFormattingHelp.vue'
 import ActionList from './ActionList.vue'
@@ -140,6 +141,13 @@ export default {
 			default: false,
 		},
 	},
+
+	setup() {
+		const menubar = ref()
+		const { width } = useElementSize(menubar)
+		return { menubar, width }
+	},
+
 	data() {
 		return {
 			entries: [...actionsFullEntries],
@@ -149,7 +157,6 @@ export default {
 			isReady: false,
 			canTranslate: loadState('text', 'translation_languages', []).length > 0,
 			resize: null,
-			iconsLimit: 4,
 		}
 	},
 	computed: {
@@ -189,32 +196,22 @@ export default {
 				children: entries,
 			}
 		},
+		iconsLimit() {
+			// leave some buffer - this is necessary so the bar does not wrap during resizing
+			const spaceToFill = this.width - 4
+			const spacePerSlot = this.$isMobile ? 44 : 46
+			const slots = Math.floor(spaceToFill / spacePerSlot)
+			// Leave one slot empty for the three dot menu
+			return slots - 1
+		},
 	},
 	mounted() {
-		this.resize = useResizeObserver(this.$refs.menubar, this.onResize)
-
 		this.$nextTick(() => {
 			this.isReady = true
 			this.$emit('update:loaded', true)
 		})
 	},
-	beforeDestroy() {
-		this.resize?.stop()
-	},
 	methods: {
-		onResize(entries) {
-			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 one slot empty for the three dot menu
-			this.iconsLimit = slots - 1
-			this.isReady = true
-		},
 		showHelp() {
 			this.displayHelp = true
 		},