fix(NewMessage): migrate to new container prop

- to merged after upstream bump

[skip ci]

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

Author: Antreesy

src/components/BreakoutRoomsEditor/SendMessageDialog.vue

@@ -5,6 +5,7 @@
 
 <template>
 	<NcDialog
+		:id="dialogMaskId"
 		ref="dialog"
 		:name="dialogTitle"
 		closeOnClickOutside
@@ -25,6 +26,7 @@
 
 <script>
 import { t } from '@nextcloud/l10n'
+import { useId } from 'vue'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NewMessage from '../NewMessage/NewMessage.vue'
 
@@ -66,15 +68,17 @@ export default {
 
 	emits: ['close', 'submit'],
 
-	data() {
+	setup() {
+		const dialogMaskId = `new-message-upload-${useId()}`
+		const modalContainerId = '#' + dialogMaskId
+
 		return {
-			modalContainerId: null,
+			dialogMaskId,
+			modalContainerId,
 		}
 	},
 
 	mounted() {
-		// Postpone render of NewMessage until modal container is mounted
-		this.modalContainerId = '#' + this.$refs.dialog.$el.querySelector('.modal-container')?.id
 		this.$nextTick(() => {
 			this.$refs.newMessage.focusInput()
 		})

src/components/NewMessage/NewMessage.vue

@@ -126,14 +126,13 @@
 
 				<NcRichContenteditable
 					ref="richContenteditable"
-					:key="container"
 					v-model="text"
 					:class="{ 'new-message-form__input-rich--required': errorMessage }"
 					:title="errorMessage"
 					:autoComplete="autoComplete"
 					:disabled="disabled"
 					:userData="userData"
-					:menuContainer="containerElement"
+					:menuContainer="container"
 					:placeholder="placeholderText"
 					:aria-label="placeholderText"
 					:dir="text ? 'auto' : undefined"
@@ -646,10 +645,6 @@ export default {
 			return this.text.trim() !== ''
 		},
 
-		containerElement() {
-			return document.querySelector(this.container)
-		},
-
 		isOneToOne() {
 			return this.conversation.type === CONVERSATION.TYPE.ONE_TO_ONE
 				|| this.conversation.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER

src/components/NewMessage/NewMessageUploadEditor.vue

@@ -112,10 +112,10 @@ export default {
 	},
 
 	setup() {
-		const modalContainerId = ref(null)
 		const isDraggingOver = ref(false)
 		const dialogMaskId = `new-message-upload-${useId()}`
 		const dialogHeaderId = `new-message-upload-header-${useId()}`
+		const modalContainerId = '#' + dialogMaskId
 
 		return {
 			modalContainerId,
@@ -178,7 +178,6 @@ export default {
 			if (show) {
 				// Wait for modal content to be rendered
 				await this.$nextTick()
-				this.modalContainerId = `#${this.dialogMaskId}`
 				if (this.supportMediaCaption) {
 					this.$refs.newMessage.focusInput()
 				} else {