Merge pull request #6017 from nextcloud/backport/stable29/use-setup-f…

…unction

[stable29] Fix: use composables in setup function

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,15 +82,15 @@
 </template>
 
 <script>
-import Vue, { set } from 'vue'
+import Vue, { ref, set, watch } from 'vue'
 import { mapState } from 'vuex'
 import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
 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 { useResizeObserver } from '@vueuse/core'
+import { useElementSize } from '@vueuse/core'
 
 import {
 	EDITOR,
@@ -229,6 +230,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,
@@ -332,14 +344,6 @@ export default {
 		subscribe('text:image-node:add', this.onAddImageNode)
 		subscribe('text:image-node:delete', this.onDeleteImageNode)
 		this.emit('update:loaded', true)
-		useResizeObserver(this.$el, (entries) => {
-			window.requestAnimationFrame(() => {
-				const entry = entries[0]
-				const { width } = entry.contentRect
-				const maxWidth = width - 36
-				this.$el.style.setProperty('--widget-full-width', `${maxWidth}px`)
-			})
-		})
 	},
 	created() {
 		this.$ydoc = new Doc()

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,33 +196,23 @@ 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) {
-			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 one slot empty for the three dot menu
-				this.iconsLimit = slots - 1
-			})
-		},
 		showHelp() {
 			this.displayHelp = true
 		},