diff --git a/css/At.css b/css/At.css
deleted file mode 100644
index 33577071ef7..00000000000
--- a/css/At.css
+++ /dev/null
@@ -1,147 +0,0 @@
-/* Copied from vue-at (https://github.com/fritx/vue-at/blob/d16d5eefdae8987c0bffe2d9c3867b7da12c808f/src/At.scss)
- * and wrapped to affect only the panel for candidate mentions. */
-
-/* atwho.css https://github.com/ichord/At.js */
-.talk.candidate-mentions .atwho-view {
-	/* position:absolute; */
-	/* top: 0; */
-	/* left: 0; */
-	/* display: none; */
-	/* margin-top: 18px; */
-	/* background: white; */
-	/* color: black; */
-	/* border: 1px solid #DDD; */
-	/* border-radius: 3px; */
-	/* box-shadow: 0 0 5px rgba(0,0,0,0.1); */
-	/* min-width: 120px; */
-	z-index: 11110 !important;
-
-	/* added 1 */
-	/* font-size: 14px; */
-	/* min-width: 140px; */
-	/* max-width: 180px; */
-	border-radius: 6px;
-	/* overflow: hidden; */
-	/* box-shadow: 0 0 10px 0 rgba(101, 111, 122, .5); */
-	position: absolute;
-	bottom: 0;
-	left: -0.8em; /* 抵消左边距 */
-	cursor: default;
-	/* background-color: rgba(255,255,255,.94); */
-	/* min-width: 140px; */
-	/* max-width: 180px; */
-	/* max-height: 200px; */
-	overflow-y: auto;
-
-	/* Override "max-width: 180px", as that makes the autocompletion panel too
-	 * narrow. */
-	max-width: 300px;
-	min-width: 250px;
-	/* mention height: 48 * visible mentions: 4.5 */
-	max-height: 216px;
-
-	/* Override all colors with our theming and dark mode */
-	background: var(--color-main-background);
-	color: var(--color-main-text);
-	box-shadow: 0 0 5px var(--color-box-shadow);
-
-	/* Override conflicting rules from the comments tab. */
-	top: unset;
-	display: unset;
-}
-
-.talk.candidate-mentions .atwho-ul {
-	/* width: 100px; */
-	list-style:none;
-	/* padding:0; */
-	/* margin:auto; */
-	/* max-height: 200px; */
-	/* overflow-y: auto; */
-	/* max-height: 135px; */
-	padding: 0;
-	margin: 0;
-
-	/* Override max height to show 4.5 mentions to make clear you can scroll for more options */
-	/* (padding top: 4 + avatar height: 48 + padding bottom: 4) * visible mentions: 4.5 */
-	max-height: unset;
-}
-
-.talk.candidate-mentions .atwho-li {
-	/* display: block; */
-	/* padding: 5px 10px; */
-	/* border-bottom: 1px solid #DDD; */
-	/* cursor: pointer; */
-	/* border-top: 1px solid #C8C8C8; */
-	box-sizing: border-box;
-	/* height: 27px; */
-	/* padding: 0 12px; */
-	white-space: nowrap;
-	display: flex;
-	align-items: center;
-
-	/* Override autocompletion panel items height, as they are too short
-	 * for the avatars and also need some padding. */
-	height: 64px;
-	padding: 4px 12px;
-}
-
-.talk.candidate-mentions .atwho-li span {
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.talk.candidate-mentions .atwho-cur {
-	/* background: #44a8f2; */
-	background: #5BB8FF;
-	color: white;
-}
-
-/* added 2 */
-.talk.candidate-mentions .atwho-wrap {
-	position: relative;
-}
-
-.talk.candidate-mentions.atwho-panel {
-	position: absolute;
-}
-
-.talk.candidate-mentions .atwho-inner {
-	position: relative;
-}
-
-.talk.candidate-mentions .atwho-view::-webkit-scrollbar {
-	width: 11px;
-	height: 11px;
-}
-
-.talk.candidate-mentions .atwho-view::-webkit-scrollbar-track {
-	/* background-color: rgba(127, 127, 127, .1); */
-	/* background-color: #F5F5F5; */
-	background-color: var(--color-background-dark);
-}
-
-.talk.candidate-mentions .atwho-view::-webkit-scrollbar-thumb {
-	min-height: 36px;
-	border: 2px solid transparent;
-	border-top: 3px solid transparent;
-	border-bottom: 3px solid transparent;
-	background-clip: padding-box;
-	border-radius: 7px;
-	/* background-color: rgba(0, 0, 0, 0.2); */
-	/* background-color: #C4C4C4; */
-	background-color: var(--color-background-darker);
-}
-
-
-/* Although the height of its wrapper is 32px the height of the icon
- * is the default 16px. This is a temporary fix until it is fixed
- * in the avatar component.  */
-.talk.candidate-mentions .atwho-li .icon-group-forced-white {
-	width: 44px;
-	height: 44px;
-}
-
-.talk.candidate-mentions .atwho-view .atwho-cur {
-	background: var(--color-primary-light);
-	color: var(--color-main-text);
-}
diff --git a/css/icons.css b/css/icons.css
index 64cf1b8e84d..68cc2cb1a96 100644
--- a/css/icons.css
+++ b/css/icons.css
@@ -67,14 +67,18 @@
 	background-image: url(../img/changelog.svg);
 }
 
-/* The atwho panel is a direct child of the body, so it is not affected by
+/* The tribute panel is a direct child of the body, so it is not affected by
  * .app-Talk rules above.
  * "forced-white" needs to be included in the class name as the Avatar does
  * not accept several classes. */
-.talk.candidate-mentions.atwho-panel .icon-group-forced-white {
+.tribute-container .icon-group-forced-white {
 	background-image: url(../img/icon-contacts-white.svg);
 }
 
+.tribute-container .icon-user-forced-white {
+	background-image: url(../img/icon-user-white.svg)
+}
+
 /* Needed to use white color also in dark mode. */
 .app-files .app-sidebar__close.forced-white {
 	color: #ffffff;
diff --git a/package-lock.json b/package-lock.json
index 977ff82fe28..73c75f8a71d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,7 +42,6 @@
 				"url-parse": "^1.5.10",
 				"util": "^0.12.5",
 				"vue": "^2.7.14",
-				"vue-at": "^2.5.1",
 				"vue-frag": "^1.4.2",
 				"vue-material-design-icons": "^5.2.0",
 				"vue-observe-visibility": "^1.0.0",
@@ -18538,17 +18537,6 @@
 				"csstype": "^3.1.0"
 			}
 		},
-		"node_modules/vue-at": {
-			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/vue-at/-/vue-at-2.5.1.tgz",
-			"integrity": "sha512-c17Rn8vVTXp/rvWV76jNB2PVx534eqIAP5/Tv1twCt0ebtRPIgNaJJwSaoRVISQ6vM6m3+owmtpAG1qr5g9fyQ==",
-			"engines": {
-				"node": ">= 14.x"
-			},
-			"peerDependencies": {
-				"vue": "2.x"
-			}
-		},
 		"node_modules/vue-color": {
 			"version": "2.8.1",
 			"resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.8.1.tgz",
@@ -34167,12 +34155,6 @@
 				"csstype": "^3.1.0"
 			}
 		},
-		"vue-at": {
-			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/vue-at/-/vue-at-2.5.1.tgz",
-			"integrity": "sha512-c17Rn8vVTXp/rvWV76jNB2PVx534eqIAP5/Tv1twCt0ebtRPIgNaJJwSaoRVISQ6vM6m3+owmtpAG1qr5g9fyQ==",
-			"requires": {}
-		},
 		"vue-color": {
 			"version": "2.8.1",
 			"resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.8.1.tgz",
diff --git a/package.json b/package.json
index 29e83834b1d..8ddef696e22 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,6 @@
 		"url-parse": "^1.5.10",
 		"util": "^0.12.5",
 		"vue": "^2.7.14",
-		"vue-at": "^2.5.1",
 		"vue-frag": "^1.4.2",
 		"vue-material-design-icons": "^5.2.0",
 		"vue-observe-visibility": "^1.0.0",
diff --git a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
deleted file mode 100644
index 18a0cf2b10f..00000000000
--- a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
+++ /dev/null
@@ -1,482 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com>
-  -
-  - @author Marco Ambrosini <marcoambrosini@icloud.com>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-	<At ref="at"
-		v-model="text"
-		class="atwho-wrapper"
-		name-key="label"
-		:members="autoCompleteMentionCandidates"
-		:filter-match="atFilter"
-		:tab-select="true"
-		:allow-spaces="false"
-		@at="handleAtEvent">
-		<template #item="scope">
-			<NcAvatar v-if="isMentionToAll(scope.item.id)"
-				:size="44"
-				:icon-class="'icon-group-forced-white'"
-				:disable-tooltip="true"
-				:disable-menu="true"
-				:is-no-user="true" />
-			<div v-else-if="isMentionToGuest(scope.item.id)"
-				class="avatar guest"
-				:style="getGuestAvatarStyle()">
-				{{ getFirstLetterOfGuestName(scope.item.label) }}
-			</div>
-			<NcAvatar v-else
-				:key="scope.item.source + '#' + scope.item.id"
-				:size="44"
-				:user="atRemoveQuotesFromUserIdForAvatars(scope.item.id)"
-				:show-user-status-compact="false"
-				:display-name="scope.item.label"
-				:disable-tooltip="true"
-				:disable-menu="true" />
-			&nbsp;
-
-			<span class="mention-suggestion">
-				<span>{{ scope.item.label }}</span>
-				<em v-if="getStatusMessage(scope.item)"
-					class="user-status">
-					{{ getStatusMessage(scope.item) }}
-				</em>
-			</span>
-		</template>
-		<template #embeddedItem="scope">
-			<!-- The root element itself is ignored, only its contents are taken
-			     into account. -->
-			<span>
-				<!-- vue-at seems to try to create an embedded item at some
-				     strange times in which no item is selected and thus there
-				     is no data, so do not use the Mention component in those
-				     cases. -->
-				<Mention v-if="scope.current.id"
-					:id="scope.current.id"
-					:type="getTypeForMentionComponent(scope.current)"
-					:name="scope.current.label"
-					:data-mention-id="scope.current.id" />
-			</span>
-		</template>
-		<div ref="contentEditable"
-			v-shortkey.once="disableKeyboardShortcuts ? null : ['c']"
-			:contenteditable="activeInput"
-			:placeHolder="placeholderText"
-			role="textbox"
-			:aria-label="ariaLabel"
-			aria-multiline="true"
-			class="new-message-form__advancedinput"
-			@shortkey="focusInput"
-			@keydown.enter="handleKeydownEnter"
-			@keydown.esc.prevent="handleKeydownEsc"
-			@focus="onFocus"
-			@blur="onBlur"
-			@paste="onPaste" />
-	</At>
-</template>
-
-<script>
-import At from 'vue-at'
-import UserStatus from '../../../mixins/userStatus.js'
-import VueAtReparenter from '../../../mixins/vueAtReparenter.js'
-import { EventBus } from '../../../services/EventBus.js'
-import { searchPossibleMentions } from '../../../services/mentionsService.js'
-import { fetchClipboardContent } from '../../../utils/clipboard.js'
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-import Mention from '../../MessagesList/MessagesGroup/Message/MessagePart/Mention.vue'
-import escapeHtml from 'escape-html'
-import debounce from 'debounce'
-
-/**
- * Checks whether the given style sheet is the default style sheet from the
- * vue-at component or not.
- *
- * @param {CSSStyleSheet} sheet the style sheet to check.
- * @return {boolean} True if it is the style sheet from vue-at, false
- *          otherwise.
- */
-function isDefaultAtWhoStyleSheet(sheet) {
-	try {
-		// cssRules may not be defined in Chromium if the stylesheet is loaded
-		// from a different domain.
-		if (!sheet.cssRules) {
-			return false
-		}
-
-		if (sheet.cssRules.length !== 15) {
-			return false
-		}
-
-		for (const cssRule of sheet.cssRules) {
-			// The only way to identify the style sheet is by looking to its
-			// rules. Moreover, a rather complex rule is needed so the style
-			// sheet is not mismatched with a different atwho stylesheet, for
-			// example, the one added by the Comments app.
-			if (cssRule.cssText === '.atwho-view { color: rgb(0, 0, 0); border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px; min-width: 120px; z-index: 11110 !important; }') {
-				return true
-			}
-		}
-	} catch (exception) {
-		// Accessing cssRules may throw a SecurityError in Firefox if the style
-		// sheet is loaded from a different domain.
-		if (exception.name !== 'SecurityError') {
-			throw exception
-		}
-	}
-
-	return false
-}
-
-/**
- * Removes the default atwho style sheet added by the vue-at component.
- *
- * The rules in that style sheet are too broad and affect other elements
- * besides those from the vue-at panel.
- */
-function removeDefaultAtWhoStyleSheet() {
-	const styleElements = document.querySelectorAll('style')
-	for (let i = 0; i < styleElements.length; i++) {
-		if (isDefaultAtWhoStyleSheet(styleElements[i].sheet)) {
-			styleElements[i].remove()
-
-			return
-		}
-	}
-}
-
-removeDefaultAtWhoStyleSheet()
-
-export default {
-	name: 'AdvancedInput',
-	components: {
-		At,
-		NcAvatar,
-		Mention,
-	},
-	mixins: [
-		VueAtReparenter,
-		UserStatus,
-	],
-	props: {
-		/**
-		 * The placeholder for the input field
-		 */
-		placeholderText: {
-			type: String,
-			default: '',
-		},
-
-		ariaLabel: {
-			type: String,
-			default: '',
-		},
-
-		/**
-		 * Determines if the input is active
-		 */
-		activeInput: {
-			type: Boolean,
-			default: true,
-		},
-
-		value: {
-			type: String,
-			required: true,
-		},
-
-		/**
-		 * The token of the conversation to get candidate mentions for.
-		 */
-		token: {
-			type: String,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			text: '',
-			autoCompleteMentionCandidates: [],
-			blurTimer: null,
-		}
-	},
-
-	computed: {
-		disableKeyboardShortcuts() {
-			return OCP.Accessibility.disableKeyboardShortcuts()
-		},
-	},
-	watch: {
-		text(text) {
-			this.$nextTick(() => {
-				this.$emit('update:contentEditable', this.$refs.contentEditable.cloneNode(true))
-			})
-
-			this.$emit('update:value', text)
-			this.$emit('input', text)
-			this.$emit('change', text)
-		},
-		value(value) {
-			this.text = value
-		},
-		atwho(atwho) {
-			if (!atwho) {
-				// Clear mention candidates when closing the panel. Otherwise
-				// they would be shown when the panel is opened again until the
-				// new ones are received.
-				this.autoCompleteMentionCandidates = []
-			}
-		},
-	},
-
-	mounted() {
-		/**
-		 * Listen to routeChange global events and focus on the
-		 */
-		EventBus.$on('focus-chat-input', this.focusInput)
-
-		this.atWhoPanelExtraClasses = 'talk candidate-mentions'
-	},
-
-	beforeDestroy() {
-		EventBus.$off('focus-chat-input', this.focusInput)
-	},
-
-	methods: {
-		onBlur() {
-			// requires a short delay to avoid blocking click event handlers
-			// from vue-at which also have some delay in place...
-			// a setTimeout was recommended by the library author here:
-			// https://github.com/fritx/vue-at/issues/114#issuecomment-565777450
-			this.blurTimer = setTimeout(() => {
-				if (this.$refs.at) {
-					this.$refs.at.closePanel()
-				}
-			}, 200)
-		},
-
-		onFocus() {
-			clearTimeout(this.blurTimer)
-		},
-
-		onPaste(e) {
-			e.preventDefault()
-
-			const content = fetchClipboardContent(e)
-
-			if (content.kind === 'file') {
-				this.$emit('files-pasted', content.files)
-			} else if (content.kind === 'text') {
-				const text = content.text
-				const div = document.createElement('div').innerText = escapeHtml(text)
-				document.execCommand('insertHtml', false, div)
-
-				this.focusInput()
-			}
-		},
-
-		/**
-		 * The vue-at library only searches in the display name by default.
-		 * But luckily our server responds already only with matching items,
-		 * so we just filter none and show them all.
-		 *
-		 * @return {boolean} True as we never filter anything out
-		 */
-		atFilter() {
-			return true
-		},
-
-		atRemoveQuotesFromUserIdForAvatars(userId) {
-			if (userId.startsWith('"')) {
-				return userId.substring(1, userId.length - 1)
-			}
-			return userId
-		},
-
-		/**
-		 * Focuses the contenteditable div input
-		 */
-		focusInput() {
-			if (this.isMobile) {
-				return
-			}
-			if (!this.$route || this.$route.name === 'conversation') {
-				const contentEditable = this.$refs.contentEditable
-				// This is a hack but it's the only way I've found to focus a contenteditable div
-				setTimeout(function() {
-					contentEditable.focus()
-				}, 0)
-			}
-		},
-
-		/**
-		 * Emits the submit event when enter is pressed (look
-		 * at the v-on in the template) unless shift is pressed:
-		 * in this case a new line will be created.
-		 *
-		 * @param {object} event the event object;
-		 */
-		handleKeydownEnter(event) {
-			// Prevent submit event when vue-at panel is open, as that should
-			// just select the mention from the panel.
-			if (this.atwho) {
-				return
-			}
-
-			// If the user is stil composing by an input method,
-			// we should not submit the message
-			if (event.isComposing) {
-				return
-			}
-
-			// TODO: add support for CTRL+ENTER new line
-			if (!(event.shiftKey)) {
-				event.preventDefault()
-				this.$emit('submit', event)
-			}
-		},
-
-		/**
-		 * Loose focus of the chat so shortcuts can be used
-		 *
-		 * @param {object} event the event object;
-		 */
-		handleKeydownEsc(event) {
-			document.activeElement.blur()
-		},
-
-		/**
-		 * Sets the autocomplete mention candidates based on the matched text
-		 * after the "@".
-		 *
-		 * @param {string} chunk the matched text to look candidate mentions for.
-		 */
-		handleAtEvent: debounce(function(chunk) {
-			this.queryPossibleMentions(chunk)
-		}, 400),
-
-		async queryPossibleMentions(chunk) {
-			const response = await searchPossibleMentions(this.token, chunk)
-			const possibleMentions = response.data.ocs.data
-
-			// Wrap mention ids with spaces in quotes.
-			possibleMentions.forEach(possibleMention => {
-				if (possibleMention.id.indexOf(' ') !== -1
-					|| possibleMention.id.indexOf('guest/') === 0) {
-					possibleMention.id = '"' + possibleMention.id + '"'
-				}
-			})
-
-			this.autoCompleteMentionCandidates = possibleMentions
-		},
-
-		isMentionToAll(mentionId) {
-			return mentionId === 'all'
-		},
-
-		isMentionToGuest(mentionId) {
-			// Guest ids, like ids of users with spaces, are wrapped in quotes.
-			return mentionId.startsWith('"guest/')
-		},
-
-		getGuestAvatarStyle() {
-			return {
-				width: '44px',
-				height: '44px',
-				'line-height': '44px',
-				'background-color': '#b9b9b9',
-				'text-align': 'center',
-			}
-		},
-
-		getFirstLetterOfGuestName(displayName) {
-			const customName = displayName !== t('spreed', 'Guest') ? displayName : '?'
-			return customName.charAt(0)
-		},
-
-		getTypeForMentionComponent(candidate) {
-			if (this.isMentionToAll(candidate.id)) {
-				return 'call'
-			} else if (this.isMentionToGuest(candidate.id)) {
-				return 'guest'
-			}
-
-			return 'user'
-		},
-
-		isMobile() {
-			return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent)
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../../assets/variables';
-
-.atwho-wrapper {
-	display: flex;
-}
-
-.new-message-form__advancedinput {
-	overflow: visible;
-	width: 100%;
-	border:none;
-	margin: 0 4px !important;
-	word-break: break-word;
-	white-space: pre-wrap;
-	padding: 8px 16px 8px 48px;
-}
-
-// Support for the placeholder text in the div contenteditable
-div[contenteditable] {
-	font-size: $chat-font-size;
-	line-height: $chat-line-height;
-	min-height: $clickable-area;
-	border-radius: calc($clickable-area / 2);
-	border: 1px solid var(--color-border-dark);
-	max-height: 180px;
-	overflow-y: auto;
-	&:hover,
-	&:focus,
-	&:active {
-		border: 1px solid var(--color-primary-element) !important;
-	}
-}
-
-// Support for the placeholder text in the div contenteditable
-[contenteditable]:empty:before{
-	content: attr(placeholder);
-	display: block;
-	color: var(--color-text-maxcontrast);
-}
-
-.mention-suggestion {
-	max-width: 250px;
-	padding-left: 8px;
-
-	.user-status {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		display: block;
-		margin-top: 2px;
-	}
-}
-
-</style>
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index 32b0d67f45c..8d4293cbddc 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -113,15 +113,19 @@
 							:parent-id="messageToBeReplied.id"
 							v-bind="messageToBeReplied" />
 					</div>
-					<AdvancedInput ref="advancedInput"
-						v-model="text"
-						:token="token"
-						:active-input="!disabled"
-						:placeholder-text="placeholderText"
+					<NcRichContenteditable ref="richContenteditable"
+						v-shortkey.once="$options.disableKeyboardShortcuts ? null : ['c']"
+						class="new-message-form__richContenteditable"
+						:value.sync="text"
+						:auto-complete="autoComplete"
+						:disabled="disabled"
+						:user-data="userData"
+						:placeholder="placeholderText"
 						:aria-label="placeholderText"
-						@update:contentEditable="contentEditableToParsed"
-						@submit="handleSubmit({ silent: false })"
-						@files-pasted="handlePastedFiles" />
+						@shortkey="focusInput"
+						@keydown.esc.prevent="blurInput"
+						@paste="handlePastedFiles"
+						@submit="handleSubmit({ silent: false })" />
 				</div>
 
 				<AudioRecorder v-if="showAudioRecorder"
@@ -214,14 +218,15 @@
 </template>
 
 <script>
-import AdvancedInput from './AdvancedInput/AdvancedInput.vue'
 import { getFilePickerBuilder, showError } from '@nextcloud/dialogs'
 import { getCapabilities } from '@nextcloud/capabilities'
+import { searchPossibleMentions } from '../../services/mentionsService.js'
 import Quote from '../Quote.vue'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
+import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js'
 import { EventBus } from '../../services/EventBus.js'
 import { shareFile, createTextFile } from '../../services/filesSharingServices.js'
 import { CONVERSATION, PARTICIPANT } from '../../constants.js'
@@ -237,6 +242,7 @@ import Folder from 'vue-material-design-icons/Folder.vue'
 import Upload from 'vue-material-design-icons/Upload.vue'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import TemplatePreview from './TemplatePreview.vue'
+import { fetchClipboardContent } from '../../utils/clipboard.js'
 
 const picker = getFilePickerBuilder(t('spreed', 'File to share'))
 	.setMultiSelect(false)
@@ -249,18 +255,21 @@ const border = 2
 const margin = 8
 const width = margin * 20
 
-export default {
+const disableKeyboardShortcuts = OCP.Accessibility.disableKeyboardShortcuts()
 
+export default {
 	name: 'NewMessageForm',
 
+	disableKeyboardShortcuts,
+
 	components: {
-		AdvancedInput,
 		Quote,
 		NcActions,
 		NcActionButton,
 		NcButton,
 		Paperclip,
 		NcEmojiPicker,
+		NcRichContenteditable,
 		EmoticonOutline,
 		Send,
 		AudioRecorder,
@@ -309,7 +318,6 @@ export default {
 	data() {
 		return {
 			text: '',
-			parsedText: '',
 			conversationIsFirstInList: false,
 			// True when the audiorecorder component is recording
 			isRecordingAudio: false,
@@ -320,6 +328,7 @@ export default {
 
 			// Check empty template by default
 			checked: -1,
+			userData: {},
 		}
 	},
 
@@ -386,7 +395,7 @@ export default {
 		},
 
 		hasText() {
-			return this.parsedText !== ''
+			return this.text !== ''
 		},
 
 		container() {
@@ -457,7 +466,7 @@ export default {
 
 	watch: {
 		currentConversationIsJoined() {
-			this.$refs.advancedInput.focusInput()
+			this.focusInput()
 		},
 
 		text(newValue) {
@@ -503,54 +512,7 @@ export default {
 		handleUploadStart() {
 			// refocus on upload start as the user might want to type again
 			// while the upload is running
-			this.$refs.advancedInput.focusInput()
-		},
-
-		contentEditableToParsed(contentEditable) {
-			const mentions = contentEditable.querySelectorAll('span[data-at-embedded]')
-			mentions.forEach(mention => {
-				// FIXME Adding a space after the mention should be improved to
-				// do it or not based on the next element instead of always
-				// adding it.
-				mention.replaceWith(' @' + mention.firstElementChild.attributes['data-mention-id'].value + ' ')
-			})
-
-			this.parsedText = this.rawToParsed(contentEditable.innerHTML)
-		},
-		/**
-		 * Returns a parsed version of the given raw text of the content
-		 * editable div.
-		 *
-		 * The given raw text contains a plain text representation of HTML
-		 * content (like "first&nbsp;line<br>second&nbsp;line"). The returned
-		 * parsed text replaces the (known) HTML content with the format
-		 * expected by the server (like "first line\nsecond line").
-		 *
-		 * The parsed text is also trimmed.
-		 *
-		 * @param {string} text the raw text
-		 * @return {string} the parsed text
-		 */
-		rawToParsed(text) {
-			text = text.replace(/<br>/g, '\n')
-			text = text.replace(/<div>/g, '\n')
-			text = text.replace(/<\/div>/g, '')
-			text = text.replace(/&nbsp;/g, ' ')
-
-			// Since we used innerHTML to get the content of the div.contenteditable
-			// it is escaped. With this little trick from https://stackoverflow.com/a/7394787
-			// We unescape the code again, so if you write `<strong>` we can display
-			// it again instead of `&lt;strong&gt;`
-			const temp = document.createElement('textarea')
-			temp.innerHTML = text
-			text = temp.value
-
-			// Although the text is fully trimmed, at the very least the last
-			// "\n" occurrence should be always removed, as browsers add a
-			// "<br>" element as soon as some rich text is written in a content
-			// editable div (for example, if a new line is added the div content
-			// will be "<br><br>").
-			return text.trim()
+			this.focusInput()
 		},
 
 		/**
@@ -559,9 +521,9 @@ export default {
 		 * @param {object} options the submit options
 		 */
 		async handleSubmit(options) {
-			if (OC.debug && this.parsedText.startsWith('/spam ')) {
+			if (OC.debug && this.text.startsWith('/spam ')) {
 				const pattern = /^\/spam (\d+) messages$/i
-				const match = pattern.exec(this.parsedText)
+				const match = pattern.exec(this.text)
 				// Escape HTML
 				if (match) {
 					await this.handleSubmitSpam(match[1])
@@ -569,20 +531,16 @@ export default {
 				}
 			}
 
-			if (this.parsedText !== '') {
-				const temporaryMessage = await this.$store.dispatch('createTemporaryMessage', { text: this.parsedText, token: this.token })
+			if (this.text !== '') {
+				const temporaryMessage = await this.$store.dispatch('createTemporaryMessage', { text: this.text, token: this.token })
 				// FIXME: move "addTemporaryMessage" into "postNewMessage" as it's a pre-requisite anyway ?
 				if (!this.broadcast) {
 					await this.$store.dispatch('addTemporaryMessage', temporaryMessage)
 				}
 				this.text = ''
-				this.parsedText = ''
-
-				if (!this.breakoutRoom) {
-					// Scrolls the message list to the last added message
-					EventBus.$emit('smooth-scroll-chat-to-bottom')
-				}
-
+				this.userData = {}
+				// Scrolls the message list to the last added message
+				EventBus.$emit('smooth-scroll-chat-to-bottom')
 				// Also remove the message to be replied for this conversation
 				await this.$store.dispatch('removeMessageToBeReplied', this.token)
 
@@ -620,7 +578,7 @@ export default {
 				await this.sleep(randomNumber)
 
 				const loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\nDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.'
-				this.parsedText = loremIpsum.slice(0, 25 + randomNumber)
+				this.text = loremIpsum.slice(0, 25 + randomNumber)
 				await this.handleSubmit()
 			}
 		},
@@ -630,11 +588,10 @@ export default {
 		},
 
 		handleRetryMessage(temporaryMessageId) {
-			if (this.parsedText === '') {
+			if (this.text === '') {
 				const temporaryMessage = this.$store.getters.message(this.token, temporaryMessageId)
 				if (temporaryMessage) {
 					this.text = temporaryMessage.message || this.text
-					this.parsedText = temporaryMessage.message || this.parsedText
 
 					// Restore the parent/quote message
 					if (temporaryMessage.parent) {
@@ -660,15 +617,15 @@ export default {
 			}
 		},
 
-		async handleFileShare() {
+		handleFileShare() {
 			picker.pick()
-				.then(async (path) => {
+				.then((path) => {
 					console.debug(`path ${path} selected for sharing`)
 					if (!path.startsWith('/')) {
 						throw new Error(t('files', 'Invalid path selected'))
 					}
-					await shareFile(path, this.token)
-					this.$refs.advancedInput.focusInput()
+					this.focusInput()
+					return shareFile(path, this.token)
 				})
 
 			// FIXME Remove this hack once it is possible to set the parent
@@ -706,10 +663,14 @@ export default {
 		/**
 		 * Handles files pasting event
 		 *
-		 * @param {File[] | FileList} files pasted files list
+		 * @param {ClipboardEvent} e native paste event
 		 */
-		async handlePastedFiles(files) {
-			await this.handleFiles(files, true)
+		async handlePastedFiles(e) {
+			e.preventDefault()
+			const content = fetchClipboardContent(e)
+			if (content.kind === 'file') {
+				this.handleFiles(content.files, true)
+			}
 		},
 
 		/**
@@ -739,7 +700,7 @@ export default {
 		addEmoji(emoji) {
 			const selection = document.getSelection()
 
-			const contentEditable = this.$refs.advancedInput.$refs.contentEditable
+			const contentEditable = this.$refs.richContenteditable.$refs.contenteditable
 
 			// There is no select, or current selection does not start in the
 			// content editable element, so just append the emoji at the end.
@@ -865,7 +826,60 @@ export default {
 		focusTextDialogInput() {
 			// this.$refs.textFileTitleInput.$refs.inputField.$refs.input.focus()
 			this.$refs.textFileTitleInput.$refs.inputField.$refs.input.select()
+		},
+
+		async autoComplete(search, callback) {
+			const response = await searchPossibleMentions(this.token, search)
+			if (!response) {
+				// It was not possible to get the candidate mentions, so just
+				// keep the previous ones.
+				return
+			}
+
+			const possibleMentions = response.data.ocs.data
 
+			possibleMentions.forEach(possibleMention => {
+				// Wrap mention ids with spaces in quotes.
+				if (possibleMention.id.indexOf(' ') !== -1
+					|| possibleMention.id.indexOf('/') !== -1) {
+					possibleMention.id = '"' + possibleMention.id + '"'
+				}
+
+				// Set icon for candidate mentions that are not for users.
+				if (possibleMention.source === 'calls') {
+					possibleMention.icon = 'icon-group-forced-white'
+				} else if (possibleMention.source === 'guests') {
+					possibleMention.icon = 'icon-user-forced-white'
+				} else {
+					// The avatar is automatically shown for users, but an icon
+					// is nevertheless required as fallback.
+					possibleMention.icon = 'icon-user-forced-white'
+				}
+
+				// Convert status properties to an object.
+				if (possibleMention.status) {
+					const status = {
+						status: possibleMention.status,
+						icon: possibleMention.statusIcon,
+					}
+					possibleMention.status = status
+					possibleMention.subline = possibleMention.statusMessage
+				}
+				// Caching the user id data for each possible mention
+				this.userData[possibleMention.id] = possibleMention
+			})
+
+			callback(possibleMentions)
+		},
+
+		focusInput() {
+			this.$nextTick().then(() => {
+				this.$refs.richContenteditable.$refs.contenteditable.focus()
+			})
+		},
+
+		blurInput() {
+			document.activeElement.blur()
 		},
 	},
 }
@@ -897,7 +911,6 @@ export default {
 		margin: 0 4px;
 		&__emoji-picker {
 			position: absolute;
-			left: 5px;
 			bottom: 1px;
 			z-index: 1;
 		}
@@ -906,8 +919,20 @@ export default {
 			flex-grow: 1;
 			overflow: hidden;
 			position: relative;
-			padding: 2px;
 		}
+
+		&__richContenteditable {
+			border: 1px solid var(--color-border-dark);
+			border-radius: calc($clickable-area / 2);
+			padding: 8px 16px 8px 44px;
+			max-height: 180px;
+			&:hover,
+			&:focus,
+			&:active {
+				border: 1px solid var(--color-primary-element);
+			}
+		}
+
 		&__quote {
 			margin: 0 16px 12px 24px;
 			background-color: var(--color-background-hover);
diff --git a/src/mixins/vueAtReparenter.js b/src/mixins/vueAtReparenter.js
deleted file mode 100644
index b6a8dbaf0a4..00000000000
--- a/src/mixins/vueAtReparenter.js
+++ /dev/null
@@ -1,145 +0,0 @@
-/**
- *
- * @copyright Copyright (c) 2020, Daniel Calviño Sánchez <danxuliu@gmail.com>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-import Vue from 'vue'
-
-/**
- * Mixin to reparent the panel of the vue-at component to a specific element.
- *
- * By default the panel of the vue-at component is a child of the root element
- * of the component. In some cases this may not be desirable (for example, if
- * a parent element uses "overflow: hidden" and causes the panel to be
- * partially hidden), so this mixin reparents the panel to a specific element
- * when it is shown.
- *
- * Components using this mixin require a reference called "at" to the vue-at
- * component. The desired parent element can be specified using the
- * "atWhoPanelParentSelector" property.
- */
-export default {
-
-	data() {
-		return {
-			/**
-			 * The selector for the HTML element to reparent the vue-at panel to.
-			 */
-			atWhoPanelParentSelector: 'body',
-			/**
-			 * Extra CSS classes to be set in the vue-at panel.
-			 */
-			atWhoPanelExtraClasses: '',
-			at: null,
-			atWhoPanelElement: null,
-			originalWrapElement: null,
-		}
-	},
-
-	computed: {
-		/**
-		 * Returns the "atwho" property of the vue-at component.
-		 *
-		 * The "atwho" property is an object when the panel is open and null
-		 * when the panel is closed.
-		 *
-		 * @return {object} the "atwho" property of the vue-at component.
-		 */
-		atwho() {
-			if (!this.at) {
-				return null
-			}
-
-			return this.at.atwho
-		},
-
-		/**
-		 * Returns a list of CSS clases from the space separated string
-		 * "atWhoPanelExtraClasses".
-		 *
-		 * @return {Array} the list of CSS classes
-		 */
-		atWhoPanelExtraClassesList() {
-			return this.atWhoPanelExtraClasses.split(' ').filter(cssClass => cssClass !== '')
-		},
-	},
-
-	watch: {
-		/**
-		 * Reparents the panel of the vue-at component when shown.
-		 *
-		 * Besides reparenting the panel its position needs to be adjusted to
-		 * the new parent. The panel is initially a child of the "wrap" element
-		 * of vue-at and vue-at calculates the position of the panel based on
-		 * that element. Fortunately the reference to that element is not used
-		 * for anything else, so it can be modified while the panel is open to
-		 * point to the new parent.
-		 *
-		 * @param {object} atwho current value of atwho
-		 * @param {object} atwhoOld previous value of atwho
-		 */
-		atwho(atwho, atwhoOld) {
-			// Only check whether the object existed or not; its properties are
-			// not relevant.
-			if ((atwho && atwhoOld) || (!atwho && !atwhoOld)) {
-				return
-			}
-
-			if (atwho) {
-				// Panel will be opened in next tick; defer moving it to the
-				// proper parent until that happens
-				Vue.nextTick(function() {
-					this.atWhoPanelElement = this.at.$refs.wrap.querySelector('.atwho-panel')
-
-					if (this.atWhoPanelExtraClassesList.length > 0) {
-						this.atWhoPanelElement.classList.add(...this.atWhoPanelExtraClassesList)
-					}
-
-					this.originalWrapElement = this.at.$refs.wrap
-					this.at.$refs.wrap = window.document.querySelector(this.atWhoPanelParentSelector)
-
-					const atWhoPanelParentSelector = window.document.querySelector(this.atWhoPanelParentSelector)
-					atWhoPanelParentSelector.appendChild(this.atWhoPanelElement)
-
-					// The position of the panel will be automatically adjusted
-					// due to the reactivity, but that will happen in next tick.
-					// To prevent a flicker due to the change of the panel
-					// position the style is explicitly adjusted now.
-					const { top, left } = this.at._computedWatchers.style.get()
-					this.atWhoPanelElement.style.top = top
-					this.atWhoPanelElement.style.left = left
-				}.bind(this))
-			} else {
-				this.at.$refs.wrap = this.originalWrapElement
-				this.originalWrapElement = null
-
-				// Panel will be closed in next tick; move it back to the
-				// expected parent before that happens.
-				this.at.$refs.wrap.appendChild(this.atWhoPanelElement)
-			}
-		},
-	},
-
-	mounted() {
-		// $refs is not reactive and its contents are set after the initial
-		// render.
-		this.at = this.$refs.at
-	},
-
-}
diff --git a/src/test-setup.js b/src/test-setup.js
index dfec2c4f98b..b7f19b1a991 100644
--- a/src/test-setup.js
+++ b/src/test-setup.js
@@ -72,6 +72,11 @@ global.OCA = {
 	Talk: {
 	},
 }
+global.OCP = {
+	Accessibility: {
+		disableKeyboardShortcuts: () => false,
+	},
+}
 
 // Work around missing "URL.createObjectURL" (which is used in the code but not
 // relevant for the tests) in jsdom: