diff --git a/package-lock.json b/package-lock.json
index 04a6d1fc99..891bf63b1d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7329,6 +7329,23 @@
 				}
 			}
 		},
+		"babel-loader-exclude-node-modules-except": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/babel-loader-exclude-node-modules-except/-/babel-loader-exclude-node-modules-except-1.0.3.tgz",
+			"integrity": "sha512-UEHoSzivswrRu3bb7UIVpY0g1kBnZvuU/2oXrRBhggjQOqW2HBCp6FsvuNc8ZupBUh+zClKxw8jxwuqZTSapwQ==",
+			"dev": true,
+			"requires": {
+				"escape-string-regexp": "2.0.0"
+			},
+			"dependencies": {
+				"escape-string-regexp": {
+					"version": "2.0.0",
+					"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+					"integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+					"dev": true
+				}
+			}
+		},
 		"babel-messages": {
 			"version": "6.23.0",
 			"resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz",
@@ -27323,6 +27340,11 @@
 			"integrity": "sha512-1CxDIZmCQ3vA0GGnkdMQqxUXVm3xXAFmglPYRS1hr37LzSg22TC7QAWOT38OmdUvMEs/rqcnkFoAsqvzdiluDg==",
 			"dev": true
 		},
+		"tributejs": {
+			"version": "5.1.3",
+			"resolved": "https://registry.npmjs.org/tributejs/-/tributejs-5.1.3.tgz",
+			"integrity": "sha512-B5CXihaVzXw+1UHhNFyAwUTMDk1EfoLP5Tj1VhD9yybZ1I8DZJEv8tZ1l0RJo0t0tk9ZhR8eG5tEsaCvRigmdQ=="
+		},
 		"trim": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
@@ -28233,6 +28255,22 @@
 				}
 			}
 		},
+		"vue-input-contenteditable": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/vue-input-contenteditable/-/vue-input-contenteditable-1.0.1.tgz",
+			"integrity": "sha512-qjJ9xZOyO6eQm0z7kwermcfGQcxAaSqf60PTQ2p5G+AZY32/wQRlu8WAHLnW3VMmTA5Y5TdT+liOW09Mg1RcHA==",
+			"requires": {
+				"core-js": "^2.6.11",
+				"vue": "^2.6.12"
+			},
+			"dependencies": {
+				"core-js": {
+					"version": "2.6.11",
+					"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
+					"integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
+				}
+			}
+		},
 		"vue-jest": {
 			"version": "3.0.7",
 			"resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-3.0.7.tgz",
diff --git a/package.json b/package.json
index e8e10d276d..4db7f06957 100644
--- a/package.json
+++ b/package.json
@@ -50,10 +50,12 @@
 		"linkifyjs": "~2.1.9",
 		"md5": "^2.2.1",
 		"regenerator-runtime": "^0.13.5",
+		"tributejs": "^5.1.3",
 		"v-click-outside": "^3.0.1",
 		"v-tooltip": "^2.0.3",
 		"vue": "^2.6.11",
 		"vue-color": "^2.7.1",
+		"vue-input-contenteditable": "^1.0.1",
 		"vue-multiselect": "^2.1.6",
 		"vue-visible": "^1.0.2",
 		"vue2-datepicker": "^3.6.2"
@@ -72,6 +74,7 @@
 		"babel-eslint": "^10.1.0",
 		"babel-jest": "^26.3.0",
 		"babel-loader": "^8.1.0",
+		"babel-loader-exclude-node-modules-except": "^1.0.3",
 		"css-loader": "^3.5.2",
 		"cypress": "^5.0.0",
 		"cypress-visual-regression": "^1.5.0",
diff --git a/src/components/RichContenteditable/RichContenteditable.vue b/src/components/RichContenteditable/RichContenteditable.vue
new file mode 100644
index 0000000000..2a4171d3b9
--- /dev/null
+++ b/src/components/RichContenteditable/RichContenteditable.vue
@@ -0,0 +1,301 @@
+<!--
+  - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @author John Molakvoæ <skjnldsv@protonmail.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/>.
+-->
+
+<docs>
+
+### General description
+
+This component displays contenteditable div with automated @ autocompletion [at].
+
+### Examples
+
+```vue
+<template>
+	<div>
+		<RichContenteditable
+			v-model="message"
+			:auto-complete="autoComplete"
+			placeholder="Try mentioning the user Test01"
+			style="width: 350px;height: 100px;" />
+		{{ message }}
+	</div>
+</template>
+<script>
+export default {
+	data() {
+		return {
+			message: '',
+		}
+	},
+	methods: {
+		/**
+		* Do your own query to the autocompletion api.
+		* The returned data bellow is a fake data example.
+		* The callback expects the same format returned by the core/autocomplete/get ocs api endpoint!
+		* @param {string} search the query
+		* @param {Function} callback the callback to process the results with
+		*/
+		autoComplete(search, callback) {
+			return callback([{
+				icon: 'icon-user',
+				id: 'Test01',
+				label: 'Test01',
+				source: 'users',
+			}])
+		}
+	}
+}
+</script>
+```
+
+</docs>
+
+<template>
+	<InputContenteditable
+		_is="div"
+		:value="value"
+		:placeholder="placeholder"
+		class="rich-contenteditable__input"
+		@input="onInput" />
+</template>
+
+<script>
+import InputContenteditable from 'vue-input-contenteditable'
+
+import Tribute from 'tributejs/dist/tribute.esm'
+import debounce from 'debounce'
+import { generateUrl } from '@nextcloud/router'
+
+import { t } from '../../l10n.js'
+
+export default {
+	name: 'RichContenteditable',
+
+	components: {
+		InputContenteditable,
+	},
+
+	props: {
+		value: {
+			type: String,
+			required: true,
+		},
+		placeholder: {
+			type: String,
+			default: t('Write message, @ to mention someone …'),
+		},
+		autoComplete: {
+			type: Function,
+			required: true,
+		},
+		menuContainer: {
+			type: Element,
+			default: () => document.body,
+		},
+	},
+
+	data() {
+		return {
+			tribute: null,
+			options: {
+				fillAttr: 'id',
+				// Search against id and label (display name)
+				lookup: result => `${result.id} ${result.label}`,
+				menuContainer: this.menuContainer,
+				menuItemTemplate: this.genTemplate,
+				noMatchTemplate: () => '<span class="hidden"></span>',
+				selectTemplate: item => `@${item.original.id}`,
+				values: this.debouncedAutoComplete,
+			},
+		}
+	},
+
+	mounted() {
+		this.tribute = new Tribute(this.options)
+		this.tribute.attach(this.$el)
+	},
+	beforeDestroy() {
+		if (this.tribute) {
+			this.tribute.detach(this.$el)
+		}
+	},
+
+	methods: {
+		/**
+		 * Re-emit the input event to the parent
+		 * @param {string} text the message
+		 */
+		onInput(text) {
+			this.$emit('input', text)
+			this.$emit('update:value', text)
+		},
+
+		/**
+		 * Debounce the autocomplete function
+		 */
+		debouncedAutoComplete: debounce(async function(search, callback) {
+			this.autoComplete(search, callback)
+		}, 200),
+
+		genTemplate({ original }) {
+			const avatarUrl = original.source === 'users'
+				? this.getAvatarUrl(original.id)
+				: null
+
+			const haveStatus = original.status?.icon || original.status?.status
+
+			return `<div class="autocomplete-result" data-v-${SCOPE_VERSION}>
+				<!-- Avatar or icon -->
+				<div class="autocomplete-result__icon ${original.icon} autocomplete-result__avatar--${avatarUrl ? 'with-avatar' : ''}" style="background-image: ${avatarUrl}">
+					<div class="autocomplete-result__status autocomplete-result__status--${original.status?.icon ? 'icon' : original.status?.status}"
+						style="${haveStatus ? '' : 'display:none'}">${original.status?.icon || ''}</div>
+				</div>
+
+				<!-- Title and subtitle -->
+				<span class="autocomplete-result__content">
+					<span class="autocomplete-result__title">
+						${original.label}
+					</span>
+					<span class="autocomplete-result__subline" style="${original.subline ? '' : 'display:none'}">
+						${original.subline}
+					</span>
+				</span>
+			</div>`
+		},
+
+		getAvatarUrl(user) {
+			return generateUrl('/avatar/{user}/{size}', {
+				user,
+				size: 44,
+			})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.rich-contenteditable__input {
+	width: auto;
+	cursor: text;
+
+	&:empty:before {
+		content: attr(placeholder);
+		color: var(--color-text-maxcontrast);
+	}
+}
+</style>
+
+<style lang="scss">
+@import '../../fonts/scss/iconfont-vue';
+
+.tribute-container {
+	z-index: 9000;
+	overflow: auto;
+	min-width: 250px;
+	max-width: 300px;
+	// Show maximum 4 entries and a half to show scroll
+	max-height: $clickable-area * 4.5;
+	// Space it out a bit from the text
+	margin: 5px 0;
+	color: var(--color-main-text);
+	border-radius: var(--border-radius);
+	background: var(--color-main-background);
+	box-shadow: 0 0 5px var(--color-box-shadow);
+}
+
+$padding: 10px;
+
+.autocomplete-result[data-v-#{$scope_version}] {
+	display: flex;
+	height: $clickable-area;
+	padding: $padding;
+
+	.highlight & {
+		color: var(--color-main-text);
+		background: var(--color-primary-light);
+		&, * {
+			cursor: pointer;
+		}
+	}
+
+	.autocomplete-result__icon {
+		position: relative;
+		width: $clickable-area;
+		height: $clickable-area;
+		border-radius: $clickable-area;
+		background-color: var(--color-background-darker);
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: $clickable-area - 2 * $padding;
+		&--with-avatar {
+			color: inherit;
+			background-size: cover;
+		}
+	}
+
+	.autocomplete-result__status {
+		position: absolute;
+		right: -4px;
+		bottom: -4px;
+		box-sizing: border-box;
+		width: 18px;
+		height: 18px;
+		border: 2px solid var(--color-main-background);
+		border-radius: 50%;
+		background-color: var(--color-main-background);
+		font-size: 14px;
+		line-height: 14px;
+		&--online {
+			color: #49b382;
+
+			@include iconfont('user-status-online');
+		}
+		&--dnd {
+			color: #ed484c;
+			background-color: #fff;
+
+			@include iconfont('user-status-dnd');
+		}
+		&--away {
+			color: #f4a331;
+
+			@include iconfont('user-status-away');
+		}
+		&--icon {
+			border: none;
+			background-color: transparent;
+		}
+	}
+
+	.autocomplete-result__content {
+		display: flex;
+		flex: 1 1;
+		flex-direction: column;
+		justify-content: center;
+		padding-left: $padding;
+	}
+
+	.autocomplete-result__subline {
+		color: var(--color-text-lighter);
+	}
+}
+
+</style>
diff --git a/src/components/RichContenteditable/index.js b/src/components/RichContenteditable/index.js
new file mode 100644
index 0000000000..5b3e36ebae
--- /dev/null
+++ b/src/components/RichContenteditable/index.js
@@ -0,0 +1,25 @@
+/**
+ * @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.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/>.
+ *
+ */
+
+import RichContenteditable from './RichContenteditable'
+
+export default RichContenteditable
diff --git a/src/components/index.js b/src/components/index.js
index 6f9fed7d92..0ecaa1d763 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -56,6 +56,7 @@ import Multiselect from './Multiselect'
 import MultiselectTags from './MultiselectTags'
 import Popover from './Popover'
 import PopoverMenu from './PopoverMenu'
+import RichContenteditable from './RichContenteditable'
 import SettingsSection from './SettingsSection'
 import UserBubble from './UserBubble'
 
@@ -95,6 +96,7 @@ export {
 	MultiselectTags,
 	Popover,
 	PopoverMenu,
+	RichContenteditable,
 	SettingsSection,
 	UserBubble,
 }
diff --git a/webpack.common.js b/webpack.common.js
index 611ebf04e6..51668b2d11 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -3,14 +3,13 @@ const gettextParser = require('gettext-parser')
 const glob = require('glob')
 const md5 = require('md5')
 const path = require('path')
-const StyleLintPlugin = require('stylelint-webpack-plugin')
-const { VueLoaderPlugin } = require('vue-loader')
-
-const IconfontPlugin = require('iconfont-plugin-webpack')
 
 const { DefinePlugin } = require('webpack')
-
+const { VueLoaderPlugin } = require('vue-loader')
+const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
+const IconfontPlugin = require('iconfont-plugin-webpack')
 const nodeExternals = require('webpack-node-externals')
+const StyleLintPlugin = require('stylelint-webpack-plugin')
 
 // scope variable
 // fallback for cypress testing
@@ -121,7 +120,9 @@ module.exports = {
 			{
 				test: /\.js$/,
 				loader: 'babel-loader',
-				exclude: /node_modules/,
+				exclude: BabelLoaderExcludeNodeModulesExcept([
+					'tributejs',
+				]),
 			},
 			{
 				test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/i,