@nextcloud/vue

Version:

Nextcloud vue components

github.com/nextcloud-libraries/nextcloud-vue

1 lines • 66.1 kB

Source Map (JSON)

{"version":3,"file":"NcRichContenteditable-0w6dbJeG.mjs","sources":["../../src/components/NcRichContenteditable/NcMentionBubble.vue","../../src/mixins/richEditor/index.js","../../src/components/NcRichContenteditable/NcAutoCompleteResult.vue","../../src/components/NcRichContenteditable/NcRichContenteditable.vue"],"sourcesContent":["\n\n<template>\n\t<span\n\t\tclass=\"mention-bubble\"\n\t\t:class=\"{ 'mention-bubble--primary': primary }\"\n\t\tcontenteditable=\"false\">\n\t\t<span class=\"mention-bubble__wrapper\">\n\t\t\t<span class=\"mention-bubble__content\">\n\t\t\t\t\n\t\t\t\t<span\n\t\t\t\t\t:class=\"[icon, `mention-bubble__icon--${avatarUrl ? 'with-avatar' : ''}`]\"\n\t\t\t\t\t:style=\"avatarUrl ? { backgroundImage: `url(${avatarUrl})` } : null\"\n\t\t\t\t\tclass=\"mention-bubble__icon\" />\n\n\t\t\t\t\n\t\t\t\t<span role=\"heading\" class=\"mention-bubble__title\" :title=\"label\" />\n\t\t\t</span>\n\n\t\t\t\n\t\t\t<span role=\"none\" class=\"mention-bubble__select\">{{ mentionText }}</span>\n\t\t</span>\n\t</span>\n</template>\n\n<script>\nimport { useIsDarkTheme } from '../../composables/useIsDarkTheme/index.ts'\nimport { getAvatarUrl } from '../../utils/getAvatarUrl.ts'\n\nexport default {\n\tname: 'NcMentionBubble',\n\n\t/* eslint vue/require-prop-comment: warn -- TODO: Add a proper doc block about what this props do */\n\tprops: {\n\t\t/**\n\t\t * Id of the bubble\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The main text\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Icon to be applied\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * URL of the icon\n\t\t */\n\t\ticonUrl: {\n\t\t\ttype: [String, null],\n\t\t\tdefault: null,\n\t\t},\n\n\t\tsource: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Is the bubble shown as primary\n\t\t */\n\t\tprimary: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tsetup() {\n\t\tconst isDarkTheme = useIsDarkTheme()\n\n\t\treturn {\n\t\t\tisDarkTheme,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tavatarUrl() {\n\t\t\tif (this.iconUrl) {\n\t\t\t\treturn this.iconUrl\n\t\t\t}\n\n\t\t\treturn this.id && this.source === 'users'\n\t\t\t\t? getAvatarUrl(this.id, { isDarkTheme: this.isDarkTheme })\n\t\t\t\t: null\n\t\t},\n\n\t\tmentionText() {\n\t\t\treturn !this.id.includes(' ') && !this.id.includes('/')\n\t\t\t\t? `@${this.id}`\n\t\t\t\t: `@\"${this.id}\"`\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$bubble-height: 20px;\n$bubble-max-width: 150px;\n$bubble-padding: 2px;\n$bubble-avatar-size: $bubble-height - 2 * $bubble-padding;\n\n.mention-bubble {\n\t&--primary &__content {\n\t\tcolor: var(--color-primary-element-text);\n\t\tbackground-color: var(--color-primary-element);\n\t}\n\n\t&__wrapper {\n\t\tposition: relative;\n\t\tmax-width: $bubble-max-width;\n\t\t// Align with text\n\t\theight: $bubble-height - $bubble-padding;\n\t\tvertical-align: text-bottom;\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t}\n\n\t&__content {\n\t\tdisplay: inline-flex;\n\t\toverflow: hidden;\n\t\talign-items: center;\n\t\tmax-width: 100%;\n\t\theight: $bubble-height;\n\t\t-webkit-user-select: none;\n\t\tuser-select: none;\n\t\tpadding-inline: $bubble-padding $bubble-padding * 3;\n\t\tborder-radius: math.div($bubble-height, 2);\n\t\tbackground-color: var(--color-background-dark);\n\t}\n\n\t&__icon {\n\t\tposition: relative;\n\t\twidth: $bubble-avatar-size;\n\t\theight: $bubble-avatar-size;\n\t\tborder-radius: math.div($bubble-avatar-size, 2);\n\t\tbackground-color: var(--color-background-darker);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: $bubble-avatar-size - 2 * $bubble-padding;\n\n\t\t&--with-avatar {\n\t\t\tcolor: inherit;\n\t\t\tbackground-size: cover;\n\t\t}\n\t}\n\n\t&__title {\n\t\toverflow: hidden;\n\t\tmargin-inline-start: $bubble-padding;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\t// Put title in ::before so it is not selectable\n\t\t&::before {\n\t\t\tcontent: attr(title);\n\t\t}\n\t}\n\n\t// Hide the mention id so it is selectable\n\t&__select {\n\t\tposition: absolute;\n\t\tz-index: -1;\n\t\tinset-inline-start: -100vw;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t}\n}\n\n</style>\n","/**\n * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport escapeHtml from 'escape-html'\nimport stripTags from 'striptags'\nimport { createApp } from 'vue'\nimport NcMentionBubble from '../../components/NcRichContenteditable/NcMentionBubble.vue'\n\n// Referenced from public function getMentions(): https://github.com/nextcloud/server/blob/master/lib/private/Comments/Comment.php\n// Beginning or whitespace. Uses positive lookahead (to work on MobileSafari <16.4)\nconst MENTION_START = /(?=[a-z0-9_\\-@.'])\\B/.source\n// Capturing groups like: @user-id, @\"guest/abc16def\", @\"federated_user/user-id\", @\"user-id with space\"\nconst MENTION_SIMPLE = /(@[a-z0-9_\\-@.']+)/.source\nconst MENTION_GUEST = /@"(?:guest|email){1}\\/[a-f0-9]+"/.source\nconst MENTION_PREFIXED = /@"(?:federated_)?(?:group|team|user){1}\\/[a-z0-9_\\-@.' /:]+"/.source\nconst MENTION_WITH_SPACE = /@"[a-z0-9_\\-@.' ]+"/.source\nconst MENTION_COMPLEX = `(${MENTION_GUEST}|${MENTION_PREFIXED}|${MENTION_WITH_SPACE})`\n// Concatenated regular expressions\nexport const USERID_REGEX = new RegExp(`${MENTION_START}${MENTION_SIMPLE}`, 'gi')\nexport const USERID_REGEX_WITH_SPACE = new RegExp(`${MENTION_START}${MENTION_COMPLEX}`, 'gi')\n\nexport default {\n\tprops: {\n\t\tuserData: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\tmethods: {\n\t\t/**\n\t\t * Convert the value string to html for the inner content\n\t\t *\n\t\t * @param {string} value the content without html\n\t\t * @return {string} rendered html\n\t\t */\n\t\trenderContent(value) {\n\t\t\t// Sanitize the value prop\n\t\t\tconst sanitizedValue = escapeHtml(value)\n\n\t\t\t// Extract all the userIds\n\t\t\tconst splitValue = sanitizedValue.split(USERID_REGEX)\n\t\t\t\t.map((part) => part.split(USERID_REGEX_WITH_SPACE)).flat()\n\n\t\t\t// Replace userIds by html\n\t\t\treturn splitValue\n\t\t\t\t.map((part) => {\n\t\t\t\t\t// When splitting, the string is always putting the userIds\n\t\t\t\t\t// on the uneven indexes. We only want to generate the mentions html\n\t\t\t\t\tif (!part.startsWith('@')) {\n\t\t\t\t\t\treturn part\n\t\t\t\t\t}\n\n\t\t\t\t\t// Extracting the id, nuking the leading @ and all \"\n\t\t\t\t\tconst id = part.slice(1).replace(/"/gi, '')\n\t\t\t\t\t// Compiling template and prepend with the space we removed during the split\n\t\t\t\t\treturn this.genSelectTemplate(id)\n\t\t\t\t})\n\t\t\t\t.join('')\n\t\t\t\t.replace(/\\n/gmi, '<br>')\n\t\t\t\t.replace(/&/gmi, '&')\n\t\t},\n\n\t\t/**\n\t\t * Convert the innerHtml content to a string with mentions as text\n\t\t *\n\t\t * @param {string} content the content without html\n\t\t * @return {string}\n\t\t */\n\t\tparseContent(content) {\n\t\t\tlet text = content\n\t\t\t// Replace break lines with new lines\n\t\t\ttext = text.replace(/<br>/gmi, '\\n')\n\t\t\t// Replace some html special characters\n\t\t\ttext = text.replace(/ /gmi, ' ')\n\t\t\ttext = text.replace(/&/gmi, '&')\n\n\t\t\t// Convert the mentions to text only\n\t\t\t// first we replace divs with new lines\n\t\t\ttext = text.replace(/<\\/div>/gmi, '\\n')\n\t\t\t// then we remove all leftover html\n\t\t\ttext = stripTags(text, '<div>')\n\t\t\ttext = stripTags(text)\n\n\t\t\treturn text\n\t\t},\n\n\t\t/**\n\t\t * Generate an autocompletion popup entry template\n\t\t *\n\t\t * @param {string} value the value to match against the userData\n\t\t * @return {string}\n\t\t */\n\t\tgenSelectTemplate(value) {\n\t\t\t// The value returned by this function will replace the trigger '@'\n\t\t\t// and the search text, so when there is no match we simply return\n\t\t\t// '@' and the text.\n\t\t\tif (typeof value === 'undefined') {\n\t\t\t\treturn `${this.autocompleteTribute.current.collection.trigger}${this.autocompleteTribute.current.mentionText}`\n\t\t\t}\n\n\t\t\tconst data = this.userData[value]\n\n\t\t\t// Fallback to @mention in case no data matches\n\t\t\tif (!data) {\n\t\t\t\t// return @value if matches MENTION_SIMPLE, @\"value\" otherwise\n\t\t\t\treturn [' ', '/', ':'].every((char) => !value.includes(char))\n\t\t\t\t\t? `@${value}`\n\t\t\t\t\t: `@\"${value}\"`\n\t\t\t}\n\n\t\t\t// Return template and make sure we strip off new lines, tabs and consecutive whitespaces\n\t\t\treturn this.renderComponentHtml(data, NcMentionBubble)\n\t\t\t\t.replace(/[\\n\\t]/gmi, '')\n\t\t\t\t.replace(/>\\s+</g, '><')\n\t\t},\n\n\t\t/**\n\t\t * Render a component and return its html content\n\t\t *\n\t\t * @param {object} props the props to pass to the component\n\t\t * @param {object} component the component to render\n\t\t * @return {string} the rendered html\n\t\t */\n\t\trenderComponentHtml(props, component) {\n\t\t\tconst Item = createApp(component, {\n\t\t\t\t...props,\n\t\t\t})\n\n\t\t\t// Prepare mountpoint\n\t\t\tconst mount = document.createElement('div')\n\t\t\tmount.style.display = 'none'\n\t\t\tdocument.body.appendChild(mount)\n\n\t\t\t// Mount and get raw html\n\t\t\tItem.mount(mount)\n\t\t\tconst renderedHtml = mount.innerHTML\n\n\t\t\t// Destroy\n\t\t\tItem.unmount()\n\t\t\tmount.remove()\n\n\t\t\treturn renderedHtml\n\t\t},\n\t},\n}\n","\n\n<template>\n\t<div class=\"autocomplete-result\">\n\t\t\n\t\t<div\n\t\t\t:class=\"[icon, `autocomplete-result__icon--${avatarUrl ? 'with-avatar' : ''}`]\"\n\t\t\t:style=\"avatarUrl ? { backgroundImage: `url(${avatarUrl})` } : null \"\n\t\t\tclass=\"autocomplete-result__icon\">\n\t\t\t<span\n\t\t\t\tv-if=\"status.icon\"\n\t\t\t\tclass=\"autocomplete-result__status autocomplete-result__status--icon\">\n\t\t\t\t{{ status && status.icon || '' }}\n\t\t\t</span>\n\t\t\t<NcUserStatusIcon\n\t\t\t\tv-else-if=\"status.status && status.status !== 'offline'\"\n\t\t\t\tclass=\"autocomplete-result__status\"\n\t\t\t\t:status=\"status.status\" />\n\t\t</div>\n\n\t\t\n\t\t<span class=\"autocomplete-result__content\">\n\t\t\t<span class=\"autocomplete-result__title\" :title=\"label\">\n\t\t\t\t{{ label }}\n\t\t\t</span>\n\t\t\t<span v-if=\"subline\" class=\"autocomplete-result__subline\">\n\t\t\t\t{{ subline }}\n\t\t\t</span>\n\t\t</span>\n\t</div>\n</template>\n\n<script>\nimport { useIsDarkTheme } from '../../composables/useIsDarkTheme/index.ts'\nimport { getAvatarUrl } from '../../utils/getAvatarUrl.ts'\nimport NcUserStatusIcon from '../NcUserStatusIcon/index.js'\n\nexport default {\n\tname: 'NcAutoCompleteResult',\n\n\tcomponents: {\n\t\tNcUserStatusIcon,\n\t},\n\n\t/* eslint vue/require-prop-comment: warn -- TODO: Add a proper doc block about what this props do */\n\tprops: {\n\t\t/**\n\t\t * The label text\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The secondary line of text if any\n\t\t */\n\t\tsubline: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Unique id\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The icon class\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Icon as external URL\n\t\t */\n\t\ticonUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\tsource: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\tstatus: {\n\t\t\ttype: [Object, Array],\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\n\tsetup() {\n\t\tconst isDarkTheme = useIsDarkTheme()\n\t\treturn {\n\t\t\tisDarkTheme,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tavatarUrl() {\n\t\t\tif (this.iconUrl) {\n\t\t\t\treturn this.iconUrl\n\t\t\t}\n\n\t\t\treturn this.id && this.source === 'users'\n\t\t\t\t? getAvatarUrl(this.id, { isDarkTheme: this.isDarkTheme })\n\t\t\t\t: null\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.autocomplete-result {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--default-grid-baseline);\n\tline-height: 1.2;\n\t--auto-complete-result-avatar-size: var(--default-clickable-area);\n\n\t&__icon {\n\t\tposition: relative;\n\t\tflex: 0 0 var(--default-clickable-area);\n\t\twidth: var(--default-clickable-area);\n\t\tmin-width: var(--default-clickable-area);\n\t\theight: var(--default-clickable-area);\n\t\tborder-radius: var(--default-clickable-area);\n\t\tbackground-color: var(--color-background-darker);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: contain;\n\t\t&--with-avatar {\n\t\t\tcolor: inherit;\n\t\t\tbackground-size: cover;\n\t\t}\n\t}\n\n\t&__status {\n\t\t--auto-complete-result-status-icon-size: clamp(14px, var(--auto-complete-result-avatar-size) * 0.4, 18px);\n\t\t// Avatar Radius * (1 - 1 / sqrt(2)) - Status Icon Radius / 2\n\t\t--auto-complete-result-status-icon-position: calc(var(--auto-complete-result-avatar-size) / 2 * (1 - 1 / sqrt(2)) - var(--auto-complete-result-status-icon-size) / 2);\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tinset-inline-end: var(--auto-complete-result-status-icon-position);\n\t\tbottom: var(--auto-complete-result-status-icon-position);\n\t\theight: var(--auto-complete-result-status-icon-size);\n\t\twidth: var(--auto-complete-result-status-icon-size);\n\t\tborder: 2px solid var(--color-main-background);\n\t\tborder-radius: 50%;\n\t\tbackground-color: var(--color-main-background);\n\t\tfont-size: calc(var(--auto-complete-result-status-icon-size) / 1.2);\n\t\tline-height: 1.2;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: var(--auto-complete-result-status-icon-size);\n\t\tbackground-position: center;\n\n\t\t&--icon {\n\t\t\tborder: none;\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t&__content {\n\t\tdisplay: flex;\n\t\tflex: 1 1 100%;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-width: 0;\n\t}\n\n\t&__title,\n\t&__subline {\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t&__subline {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n}\n\n</style>\n","\n\n<docs>\n\n### General description\n\nThis component displays contenteditable div with automated `@` [at] autocompletion and `:` [colon] emoji autocompletion.\n\n### Examples\n\nTry mentioning user @Test01 or inserting emoji :smile\n\n```vue\n<template>\n\t<div>\n\t\t<NcRichContenteditable\n\t\t\tlabel=\"Write a comment\"\n\t\t\tv-model=\"message\"\n\t\t\t:auto-complete=\"autoComplete\"\n\t\t\t:maxlength=\"100\"\n\t\t\t:user-data=\"userData\"\n\t\t\t@submit=\"onSubmit\" />\n\t\t<br>\n\n\t\t<NcRichContenteditable\n\t\t\tv-model=\"message\"\n\t\t\t:auto-complete=\"autoComplete\"\n\t\t\t:maxlength=\"400\"\n\t\t\t:multiline=\"true\"\n\t\t\t:user-data=\"userData\"\n\t\t\t@submit=\"onSubmit\" />\n\n\t\t<h5>Output - raw</h5>\n\t\t{{ JSON.stringify(message) }}\n\n\t\t<h5>Output - preformatted</h5>\n\t\t<p class=\"pre-line\">{{ message }}</p>\n\n\t\t<h5>Output - in NcRichText with markdown support</h5>\n\t\t<NcRichText :text=\"text\" :arguments=\"userMentions\" autolink use-markdown />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tmessage: '**Lorem ipsum** dolor sit amet.',\n\t\t\t// You need to provide this for the inline mention to understand what to display or not.\n\t\t\t// Key should be a string with leading '@', like @Test02 or @\"Test Offline\"\n\t\t\tuserData: {\n\t\t\t\tTest01: {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test01',\n\t\t\t\t\tlabel: 'Test01',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tprimary: true,\n\t\t\t\t},\n\t\t\t\tTest02: {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test02',\n\t\t\t\t\tlabel: 'Test02',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\tmessage: 'Visiting London',\n\t\t\t\t\t\tstatus: 'away',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t},\n\t\t\t\t'Test@User': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test@User',\n\t\t\t\t\tlabel: 'Test 03',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\tmessage: 'Having space in my name',\n\t\t\t\t\t\tstatus: 'online',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t},\n\t\t\t\t'Test Offline': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test Offline',\n\t\t\t\t\tlabel: 'Test Offline',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\tmessage: null,\n\t\t\t\t\t\tstatus: 'offline',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: null,\n\t\t\t\t},\n\t\t\t\t'Test DND': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test DND',\n\t\t\t\t\tlabel: 'Test DND',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\tmessage: 'Out sick',\n\t\t\t\t\t\tstatus: 'dnd',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Out sick',\n\t\t\t\t},\n\t\t\t},\n\t\t\t// To display user bubbles in NcRichText, special format of data should be provided:\n\t\t\t// Key should be in curly brackets without '@' and ' ' symbols, like {user-2}\n\t\t\tuserMentions: {\n\t\t\t\t'user-1': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test01',\n\t\t\t\t\t\tuser: 'Test01',\n\t\t\t\t\t\tprimary: true,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-2': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test02',\n\t\t\t\t\t\tuser: 'Test02',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-3': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test 03',\n\t\t\t\t\t\tuser: 'Test@User',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-4': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test Offline',\n\t\t\t\t\t\tuser: 'Test Offline',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-5': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test DND',\n\t\t\t\t\t\tuser: 'Test DND',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t}\n\t},\n\tcomputed: {\n\t\ttext() {\n\t\t\treturn this.message\n\t\t\t\t\t.replace('@Test01', '{user-1}')\n\t\t\t\t\t.replace('@Test02', '{user-2}')\n\t\t\t\t\t.replace('@Test@User', '{user-3}')\n\t\t\t\t\t.replace('@\"Test Offline\"', '{user-4}')\n\t\t\t\t\t.replace('@\"Test DND\"', '{user-5}')\n\t\t},\n\t},\n\tmethods: {\n\t\t/**\n\t\t* Do your own query to the autocompletion api.\n\t\t* The returned data bellow is a fake data example.\n\t\t* The callback expects the same format returned by the core/autocomplete/get ocs api endpoint!\n\t\t* @see userData example above\n\t\t*\n\t\t* @param {string} search the query\n\t\t* @param {Function} callback the callback to process the results with\n\t\t*/\n\t\tautoComplete(search, callback) {\n\t\t\tcallback(Object.values(this.userData))\n\t\t},\n\t\tonSubmit() {\n\t\t\talert(this.message)\n\t\t}\n\t}\n}\n</script>\n<style lang=\"scss\" scoped>\n\th5 {\n\t\tfont-weight: bold;\n\t\tmargin: 40px 0 20px;\n\t}\n\n\t.pre-line {\n\t\twhite-space: pre-line;\n\t}\n</style>\n```\n\n### Using public methods\n\n```vue\n<template>\n\t<div>\n\t\t<div class=\"buttons-wrapper\">\n\t\t\t<NcButton class=\"show-slash-button\" @click=\"showSlashCommands\">Slash commands</NcButton>\n\t\t\t<NcButton class=\"focus-button\" @click=\"focus\">Focus on input</NcButton>\n\t\t</div>\n\t\t<NcRichContenteditable\n\t\t\tref=\"contenteditable\"\n\t\t\tv-model=\"message\"\n\t\t\tlabel=\"Write a comment\"\n\t\t\t:maxlength=\"100\"/>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tmessage: '**Lorem ipsum** dolor sit amet. ',\n\t\t}\n\t},\n\tmethods: {\n\t\tshowSlashCommands() {\n\t\t\tthis.$refs.contenteditable.showTribute('/')\n\t\t},\n\t\tfocus() {\n\t\t\tthis.$refs.contenteditable.focus()\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n\t.buttons-wrapper {\n\t\tdisplay: flex;\n\t\tgap: 10px;\n\t\tmargin-bottom: 20px;\n\t}\n</style>\n```\n\n</docs>\n\n<template>\n\t<div class=\"rich-contenteditable\" :class=\"$props.class\">\n\t\t<div\n\t\t\t:id=\"id\"\n\t\t\tref=\"contenteditable\"\n\t\t\t:class=\"{\n\t\t\t\t'rich-contenteditable__input--empty': isEmptyValue,\n\t\t\t\t'rich-contenteditable__input--multiline': multiline,\n\t\t\t\t'rich-contenteditable__input--has-label': label,\n\t\t\t\t'rich-contenteditable__input--overflow': isOverMaxlength,\n\t\t\t\t'rich-contenteditable__input--disabled': disabled,\n\t\t\t}\"\n\t\t\t:contenteditable=\"canEdit\"\n\t\t\t:aria-labelledby=\"label ? labelId : undefined\"\n\t\t\t:aria-placeholder=\"placeholder\"\n\t\t\taria-multiline=\"true\"\n\t\t\tclass=\"rich-contenteditable__input\"\n\t\t\trole=\"textbox\"\n\t\t\taria-haspopup=\"listbox\"\n\t\t\taria-autocomplete=\"inline\"\n\t\t\t:aria-controls=\"tributeId\"\n\t\t\t:aria-expanded=\"isAutocompleteOpen ? 'true' : 'false'\"\n\t\t\t:aria-activedescendant=\"autocompleteActiveId\"\n\t\t\t:title=\"tooltipString\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@focus=\"moveCursorToEnd\"\n\t\t\t@input=\"onInput\"\n\t\t\t@compositionstart=\"isComposing = true\"\n\t\t\t@compositionend=\"isComposing = false\"\n\t\t\t@keydown.esc.capture=\"onKeyEsc\"\n\t\t\t@keydown.enter.exact=\"onEnter\"\n\t\t\t@keydown.ctrl.enter.exact.stop.prevent=\"onCtrlEnter\"\n\t\t\t@paste=\"onPaste\"\n\t\t\t@keyup.stop.prevent.capture=\"onKeyUp\"\n\t\t\t@keydown.up.exact.stop=\"onTributeArrowKeyDown\"\n\t\t\t@keydown.down.exact.stop=\"onTributeArrowKeyDown\"\n\t\t\t@tribute-active-true=\"onTributeActive(true)\"\n\t\t\t@tribute-active-false=\"onTributeActive(false)\" />\n\t\t<div\n\t\t\tv-if=\"label\"\n\t\t\t:id=\"labelId\"\n\t\t\tclass=\"rich-contenteditable__label\">\n\t\t\t{{ label }}\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport debounce from 'debounce'\nimport Tribute from 'tributejs/dist/tribute.esm.js'\nimport NcAutoCompleteResult from './NcAutoCompleteResult.vue'\nimport { emojiAddRecent, emojiSearch } from '../../functions/emoji/index.ts'\nimport { n, t } from '../../l10n.ts'\nimport richEditor from '../../mixins/richEditor/index.js'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { logger } from '../../utils/logger.ts'\nimport { getLinkWithPicker, searchProvider } from '../NcRichText/index.js'\n\n/**\n * Populate the list of text smiles we want to offer via Tribute.\n * We add the colon `:)` and colon-dash `:-)` version for each of them.\n */\nconst smilesCharacters = ['d', 'D', 'p', 'P', 's', 'S', 'x', 'X', ')', '(', '|', '/']\nconst textSmiles = []\nsmilesCharacters.forEach((char) => {\n\ttextSmiles.push(':' + char)\n\ttextSmiles.push(':-' + char)\n})\n\nexport default {\n\tname: 'NcRichContenteditable',\n\n\tmixins: [richEditor],\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The ID attribute of the content editable\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => createElementId(),\n\t\t},\n\n\t\t/**\n\t\t * Visual label of the contenteditable\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * The text content\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Placeholder to be shown if empty\n\t\t */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Write a message …'),\n\t\t},\n\n\t\t/**\n\t\t * Auto complete function\n\t\t */\n\t\tautoComplete: {\n\t\t\ttype: Function,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/**\n\t\t * The containing element for the menu popover\n\t\t */\n\t\tmenuContainer: {\n\t\t\ttype: Element,\n\t\t\tdefault: () => document.body,\n\t\t},\n\n\t\t/**\n\t\t * Make the contenteditable looks like a textarea or not.\n\t\t * Default looks like a single-line input.\n\t\t * This also handle the default enter/shift+enter behaviour.\n\t\t * if multiline, enter = newline; otherwise enter = submit\n\t\t * shift+enter always add a new line. ctrl+enter always submits\n\t\t */\n\t\tmultiline: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Is the content editable ?\n\t\t */\n\t\tcontenteditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Disable the editing and show specific disabled design\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Max allowed length\n\t\t */\n\t\tmaxlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Enable or disable emoji autocompletion\n\t\t */\n\t\temojiAutocomplete: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Enable or disable link autocompletion\n\t\t */\n\t\tlinkAutocomplete: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * CSS class to apply to the root element.\n\t\t */\n\t\tclass: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'paste',\n\t\t'update:modelValue',\n\t\t'smartPickerSubmit',\n\t\t'submit',\n\t],\n\n\tsetup() {\n\t\tconst segmenter = new Intl.Segmenter()\n\n\t\treturn {\n\t\t\t// Constants\n\t\t\tlabelId: createElementId(),\n\t\t\ttributeId: createElementId(),\n\n\t\t\tsegmenter,\n\n\t\t\t/**\n\t\t\t * Non-reactive property to store Tribute instance\n\t\t\t *\n\t\t\t * @type {import('tributejs').default | null}\n\t\t\t */\n\t\t\ttribute: null,\n\t\t\ttributeStyleMutationObserver: null,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\t// Represent the raw untrimmed text of the contenteditable\n\t\t\t// serves no other purpose than to check whether the\n\t\t\t// content is empty or not\n\t\t\tlocalValue: this.modelValue,\n\n\t\t\t// Is in text composition session in IME\n\t\t\tisComposing: false,\n\n\t\t\t// Tribute autocomplete\n\t\t\tisAutocompleteOpen: false,\n\t\t\tautocompleteActiveId: undefined,\n\t\t\tisTributeIntegrationDone: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Is the current trimmed value empty?\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisEmptyValue() {\n\t\t\treturn !this.localValue || this.localValue.trim() === ''\n\t\t},\n\n\t\t/**\n\t\t * Is the current value over maxlength?\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisOverMaxlength() {\n\t\t\tif (this.isEmptyValue || !this.maxlength) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tconst length = [...this.segmenter.segment(this.localValue)].length\n\t\t\treturn length > this.maxlength\n\t\t},\n\n\t\t/**\n\t\t * Tooltip to show if characters count is over limit\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\ttooltipString() {\n\t\t\tif (!this.isOverMaxlength) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn n('Message limit of %n character reached', 'Message limit of %n characters reached', this.maxlength)\n\t\t},\n\n\t\t/**\n\t\t * Edit is only allowed when contenteditableis true and disabled is false\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tcanEdit() {\n\t\t\treturn this.contenteditable && !this.disabled\n\t\t},\n\n\t\t/**\n\t\t * Compute debounce function for the autocomplete function\n\t\t */\n\t\tdebouncedAutoComplete() {\n\t\t\treturn debounce(async (search, callback) => {\n\t\t\t\tthis.autoComplete(search, callback)\n\t\t\t}, 100)\n\t\t},\n\t},\n\n\twatch: {\n\t\t/**\n\t\t * If the parent value change, we compare the plain text rendering\n\t\t * If it's different, we render everything and update the main content\n\t\t */\n\t\tmodelValue() {\n\t\t\tconst html = this.$refs.contenteditable.innerHTML\n\t\t\t// Compare trimmed versions to be safe\n\t\t\tif (this.modelValue.trim() !== this.parseContent(html).trim()) {\n\t\t\t\tthis.updateContent(this.modelValue)\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.initializeTribute()\n\n\t\t// Update default value\n\t\tthis.updateContent(this.modelValue)\n\n\t\t// Removes the contenteditable attribute at first load if the prop is\n\t\t// set to false.\n\t\tthis.$refs.contenteditable.contentEditable = this.canEdit\n\t},\n\n\tbeforeUnmount() {\n\t\tif (this.tribute) {\n\t\t\tthis.tribute.detach(this.$refs.contenteditable)\n\t\t}\n\n\t\tif (this.tributeStyleMutationObserver) {\n\t\t\tthis.tributeStyleMutationObserver.disconnect()\n\t\t}\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the richContenteditable\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.contenteditable.focus()\n\t\t},\n\n\t\tinitializeTribute() {\n\t\t\tconst renderMenuItem = (content) => `<div id=\"${createElementId()}\" class=\"${this.$style['tribute-item']}\" role=\"option\">${content}</div>`\n\n\t\t\tconst tributesCollection = []\n\t\t\ttributesCollection.push({\n\t\t\t\tfillAttr: 'id',\n\t\t\t\t// Search against id and label (display name) (fallback to title for v8.0.0..8.6.1 compatibility)\n\t\t\t\tlookup: (result) => `${result.id} ${result.label ?? result.title}`,\n\t\t\t\trequireLeadingSpace: true,\n\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\tmenuItemTemplate: (item) => renderMenuItem(this.renderComponentHtml(item.original, NcAutoCompleteResult)),\n\t\t\t\t// Hide if no results\n\t\t\t\tnoMatchTemplate: () => '<span class=\"hidden\"></span>',\n\t\t\t\t// Inner display of mentions\n\t\t\t\tselectTemplate: (item) => this.genSelectTemplate(item?.original?.id),\n\t\t\t\t// Autocompletion results\n\t\t\t\tvalues: this.debouncedAutoComplete,\n\t\t\t\t// Class added to the menu container\n\t\t\t\tcontainerClass: `${this.$style['tribute-container']} ${this.$style['tribute-container-autocomplete']}`,\n\t\t\t\t// Class added to each list item\n\t\t\t\titemClass: this.$style['tribute-container__item'],\n\n\t\t\t})\n\n\t\t\tif (this.emojiAutocomplete) {\n\t\t\t\ttributesCollection.push({\n\t\t\t\t\ttrigger: ':',\n\t\t\t\t\t// Don't use the tribute search function at all\n\t\t\t\t\t// We pass search results as values (see below)\n\t\t\t\t\tlookup: (result, query) => query,\n\t\t\t\t\trequireLeadingSpace: true,\n\t\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\t\tmenuItemTemplate: (item) => {\n\t\t\t\t\t\tif (textSmiles.includes(item.original)) {\n\t\t\t\t\t\t\t// Display the raw text string for :), :-D, … for non emoji results,\n\t\t\t\t\t\t\t// instead of trying to show an image and their name.\n\t\t\t\t\t\t\treturn item.original\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn renderMenuItem(`<span class=\"${this.$style['tribute-item__emoji']}\">${item.original.native}</span> :${item.original.short_name}`)\n\t\t\t\t\t},\n\t\t\t\t\t// Hide if no results\n\t\t\t\t\tnoMatchTemplate: () => t('No emoji found'),\n\t\t\t\t\t// Display raw emoji along with its name\n\t\t\t\t\tselectTemplate: (item) => {\n\t\t\t\t\t\tif (textSmiles.includes(item.original)) {\n\t\t\t\t\t\t\t// Replace the selection with the raw text string for :), :-D, … for non emoji results\n\t\t\t\t\t\t\treturn item.original\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\temojiAddRecent(item.original)\n\t\t\t\t\t\treturn item.original.native\n\t\t\t\t\t},\n\t\t\t\t\t// Pass the search results as values\n\t\t\t\t\tvalues: (text, cb) => {\n\t\t\t\t\t\tconst emojiResults = emojiSearch(text)\n\t\t\t\t\t\tif (textSmiles.includes(':' + text)) {\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Prepend text smiles to the search results so that Tribute\n\t\t\t\t\t\t\t * is not interfering with normal writing, aka. \"Cocos Island Meme\".\n\t\t\t\t\t\t\t * E.g. `:)` and `:-)` got replaced by the flag of Cocos Island,\n\t\t\t\t\t\t\t * when submitting the input with Enter after writing them\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\temojiResults.unshift(':' + text)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcb(emojiResults)\n\t\t\t\t\t},\n\t\t\t\t\t// Class added to the menu container\n\t\t\t\t\tcontainerClass: `${this.$style['tribute-container']} ${this.$style['tribute-container-emoji']}`,\n\t\t\t\t\t// Class added to each list item\n\t\t\t\t\titemClass: this.$style['tribute-container__item'],\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tif (this.linkAutocomplete) {\n\t\t\t\ttributesCollection.push({\n\t\t\t\t\ttrigger: '/',\n\t\t\t\t\t// Don't use the tribute search function at all\n\t\t\t\t\t// We pass search results as values (see below)\n\t\t\t\t\tlookup: (result, query) => query,\n\t\t\t\t\trequireLeadingSpace: true,\n\t\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\t\tmenuItemTemplate: (item) => renderMenuItem(`<img class=\"${this.$style['tribute-item__icon']}\" src=\"${item.original.icon_url}\"> <span class=\"${this.$style['tribute-item__title']}\">${item.original.title}</span>`),\n\t\t\t\t\t// Hide if no results\n\t\t\t\t\tnoMatchTemplate: () => t('No link provider found'),\n\t\t\t\t\tselectTemplate: this.getLink,\n\t\t\t\t\t// Pass the search results as values\n\t\t\t\t\tvalues: (text, cb) => cb(searchProvider(text)),\n\t\t\t\t\t// Class added to the menu container\n\t\t\t\t\tcontainerClass: `${this.$style['tribute-container']} ${this.$style['tribute-container-link']}`,\n\t\t\t\t\t// Class added to each list item\n\t\t\t\t\titemClass: this.$style['tribute-container__item'],\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tthis.tribute = new Tribute({\n\t\t\t\tcollection: tributesCollection,\n\t\t\t\t// FIXME: tributejs doesn't support allowSpaces as a collection option, only as a global one\n\t\t\t\t// Requires to fork a library to allow spaces only in the middle of mentions ('@' trigger)\n\t\t\t\tallowSpaces: false,\n\t\t\t\t// Where to inject the menu popup\n\t\t\t\tmenuContainer: this.menuContainer,\n\t\t\t})\n\t\t\tthis.tribute.attach(this.$refs.contenteditable)\n\t\t},\n\n\t\tgetLink(item) {\n\t\t\t// there is no way to get a tribute result asynchronously\n\t\t\t// so we immediately insert a node and replace it when the result comes\n\t\t\tgetLinkWithPicker(item.original.id)\n\t\t\t\t.then((result) => {\n\t\t\t\t\t// replace dummy temp element by a text node which contains the picker result\n\t\t\t\t\tconst tmpElem = document.getElementById('tmp-smart-picker-result-node')\n\t\t\t\t\tconst eventData = {\n\t\t\t\t\t\tresult,\n\t\t\t\t\t\tinsertText: true,\n\t\t\t\t\t}\n\t\t\t\t\tthis.$emit('smartPickerSubmit', eventData)\n\t\t\t\t\tif (eventData.insertText) {\n\t\t\t\t\t\tconst newElem = document.createTextNode(result)\n\t\t\t\t\t\ttmpElem.replaceWith(newElem)\n\t\t\t\t\t\tthis.setCursorAfter(newElem)\n\t\t\t\t\t\tthis.updateValue(this.$refs.contenteditable.innerHTML)\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttmpElem.remove()\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t.catch((error) => {\n\t\t\t\t\tlogger.debug('[NcRichContenteditable] Smart picker promise rejected:', { error })\n\t\t\t\t\tconst tmpElem = document.getElementById('tmp-smart-picker-result-node')\n\t\t\t\t\tthis.setCursorAfter(tmpElem)\n\t\t\t\t\ttmpElem.remove()\n\t\t\t\t})\n\t\t\treturn '<span id=\"tmp-smart-picker-result-node\"></span>'\n\t\t},\n\n\t\tsetCursorAfter(element) {\n\t\t\tconst range = document.createRange()\n\t\t\trange.setEndAfter(element)\n\t\t\trange.collapse()\n\t\t\tconst selection = window.getSelection()\n\t\t\tselection.removeAllRanges()\n\t\t\tselection.addRange(range)\n\t\t},\n\n\t\tmoveCursorToEnd() {\n\t\t\tif (!document.createRange) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (window.getSelection().rangeCount > 0\n\t\t\t\t&& this.$refs.contenteditable.contains(window.getSelection().getRangeAt(0).commonAncestorContainer)) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst range = document.createRange()\n\t\t\trange.selectNodeContents(this.$refs.contenteditable)\n\t\t\trange.collapse(false)\n\t\t\tconst selection = window.getSelection()\n\t\t\tselection.removeAllRanges()\n\t\t\tselection.addRange(range)\n\t\t},\n\n\t\t/**\n\t\t * Re-emit the input event to the parent\n\t\t *\n\t\t * @param {Event} event the input event\n\t\t */\n\t\tonInput(event) {\n\t\t\tthis.updateValue(event.target.innerHTML)\n\t\t},\n\n\t\t/**\n\t\t * When pasting, sanitize the content, extract text\n\t\t * and render it again\n\t\t *\n\t\t * @param {Event} event the paste event\n\t\t * @fires Event paste the original paste event\n\t\t */\n\t\tonPaste(event) {\n\t\t\t// Either disabled or edit deactivated\n\t\t\tif (!this.canEdit) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tevent.preventDefault()\n\t\t\tconst clipboardData = event.clipboardData\n\n\t\t\t/** The original paste event */\n\t\t\tthis.$emit('paste', event)\n\n\t\t\t// If we have a file or if we don't have any text, ignore\n\t\t\tif (clipboardData.files.length !== 0\n\t\t\t\t|| !Object.values(clipboardData.items).find((item) => item?.type.startsWith('text'))) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst text = clipboardData.getData('text')\n\t\t\tconst selection = window.getSelection()\n\n\t\t\t// Generate text and insert\n\t\t\tconst range = selection.getRangeAt(0)\n\t\t\trange.deleteContents()\n\t\t\trange.insertNode(document.createTextNode(text))\n\n\t\t\t// Collapse the range to the end position\n\t\t\trange.collapse(false)\n\n\t\t\t// Propagate data\n\t\t\tthis.updateValue(this.$refs.contenteditable.innerHTML)\n\t\t},\n\n\t\t/**\n\t\t * Update the value text from the provided html\n\t\t *\n\t\t * @param {string} htmlOrText the html content (or raw text with @mentions)\n\t\t */\n\t\tupdateValue(htmlOrText) {\n\t\t\t// Browsers keep <br> after erasing contenteditable\n\t\t\tconst text = this.parseContent(htmlOrText).replace(/^\\n$/, '')\n\t\t\tthis.localValue = text\n\t\t\tthis.$emit('update:modelValue', text)\n\t\t},\n\n\t\t/**\n\t\t * Update content and local value\n\t\t *\n\t\t * @param {string} value the message value\n\t\t */\n\t\tupdateContent(value) {\n\t\t\tconst renderedContent = this.renderContent(value)\n\t\t\tthis.$refs.contenteditable.innerHTML = renderedContent\n\t\t\tthis.localValue = value\n\t\t},\n\n\t\t/**\n\t\t * Enter key pressed. Submits if not multiline\n\t\t *\n\t\t * @param {Event} event the keydown event\n\t\t */\n\t\tonEnter(event) {\n\t\t\t// Prevent submitting if multiline\n\t\t\t// or length is over maxlength\n\t\t\t// or autocompletion menu is opened\n\t\t\t// or in a text composition session with IME\n\t\t\tif (this.multiline\n\t\t\t\t|| this.isOverMaxlength\n\t\t\t\t|| this.tribute.isActive\n\t\t\t\t|| this.isComposing) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tthis.$emit('submit', event)\n\t\t},\n\n\t\t/**\n\t\t * Ctrl + Enter key pressed is used to submit\n\t\t *\n\t\t * @param {Event} event the keydown event\n\t\t */\n\t\tonCtrlEnter(event) {\n\t\t\tif (this.isOverMaxlength) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.$emit('submit', event)\n\t\t},\n\n\t\tonKeyUp(event) {\n\t\t\t// prevent tribute from opening on keyup\n\t\t\tevent.stopImmediatePropagation()\n\t\t},\n\n\t\tonKeyEsc(event) {\n\t\t\t// prevent event from bubbling when tribute is open\n\t\t\tif (this.tribute && this.isAutocompleteOpen) {\n\t\t\t\tevent.stopImmediatePropagation()\n\t\t\t\tthis.tribute.hideMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Get HTML element with Tribute.js container\n\t\t *\n\t\t * @return {HTMLElement}\n\t\t */\n\t\tgetTributeContainer() {\n\t\t\treturn this.tribute.menu\n\t\t},\n\n\t\t/**\n\t\t * Get the currently selected item element id in Tribute.js container\n\t\t *\n\t\t * @return {HTMLElement}\n\t\t */\n\t\tgetTributeSelectedItem() {\n\t\t\t// Tribute does not provide a way to get the active item, only the data index\n\t\t\t// So we have to find it manually by select class\n\t\t\treturn this.getTributeContainer().querySelector('.highlight [id^=\"nc-rich-contenteditable-tribute-item-\"]')\n\t\t},\n\n\t\t/**\n\t\t * Handle Tribute activation\n\t\t *\n\t\t * @param {boolean} isActive - is active\n\t\t */\n\t\tonTributeActive(isActive) {\n\t\t\tthis.isAutocompleteOpen = isActive\n\n\t\t\tif (isActive) {\n\t\t\t\t// Tribute.js doesn't support containerClass update when new collection is open\n\t\t\t\t// The first opened collection's containerClass stays forever\n\t\t\t\t// https://github.com/zurb/tribute/issues/595\n\t\t\t\t// https://github.com/zurb/tribute/issues/627\n\t\t\t\t// So we have to manually update the class\n\t\t\t\t// The default class is \"tribute-container\"\n\t\t\t\tthis.getTributeContainer().setAttribute('class', this.tribute.current.collection.containerClass || this.$style['tribute-container'])\n\n\t\t\t\tthis.setupTributeIntegration()\n\t\t\t\t// Remove the event handler if any\n\t\t\t\tdocument.removeEventListener('click', this.hideTribute, true)\n\t\t\t} else {\n\t\t\t\t// Cancel loading data for autocomplete\n\t\t\t\t// Otherwise it could be received when another autocomplete is already opened\n\t\t\t\tthis.debouncedAutoComplete.clear()\n\n\t\t\t\t// Reset active item\n\t\t\t\tthis.autocompleteActiveId = undefined\n\n\t\t\t\tthis.setTributeFocusVisible(false)\n\t\t\t}\n\t\t},\n\n\t\tonTributeArrowKeyDown() {\n\t\t\tif (!this.isAutocompleteOpen) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.setTributeFocusVisible(true)\n\t\t\tthis.onTributeSelectedItemWillChange()\n\t\t},\n\n\t\tonTributeSelectedItemWillChange() {\n\t\t\t// Wait until tribute has updated the selected item\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tthis.autocompleteActiveId = this.getTributeSelectedItem()?.id\n\t\t\t})\n\t\t},\n\n\t\tsetupTributeIntegration() {\n\t\t\t// Setup integration only once on the first open\n\t\t\tif (this.isTributeIntegrationDone) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.isTributeIntegrationDone = true\n\n\t\t\tconst tributeContainer = this.getTributeContainer()\n\n\t\t\t// For aria-controls\n\t\t\ttributeContainer.id = this.tributeId\n\n\t\t\t// Container with options must be a listbox\n\t\t\ttributeContainer.setAttribute('role', 'listbox')\n\t\t\t// Reset list+listitem role from ul+li\n\t\t\tconst ul = tributeContainer.children[0]\n\t\t\tul.setAttribute('role', 'presentation')\n\n\t\t\t// Tribute.js does not provide a way to react on show/hide\n\t\t\t// tribute-active-true/false events are fired on initial activation, which is too early with async autoComplete function\n\t\t\tthis.tributeStyleMutationObserver = new MutationObserver(([{ target }]) => {\n\t\t\t\tif (target.style.display !== 'none') {\n\t\t\t\t\t// Tribute is visible - there will be selected item\n\t\t\t\t\tthis.onTributeSelectedItemWillChange()\n\t\t\t\t}\n\t\t\t}).observe(tributeContainer, {\n\t\t\t\tattributes: true,\n\t\t\t\tattributeFilter: ['style'],\n\t\t\t})\n\n\t\t\t// Handle selecting new item on mouse selection\n\t\t\ttributeContainer.addEventListener('mousemove', () => {\n\t\t\t\tthis.setTributeFocusVisible(false)\n\t\t\t\tthis.onTributeSelectedItemWillChange()\n\t\t\t}, { passive: true })\n\t\t},\n\n\t\t/**\n\t\t * Set tribute-container--focus-visible class on the Tribute container when the user navigates the listbox via keyboard.\n\t\t *\n\t\t * Because the real focus is kept on the textbox, we cannot use the :focus-visible pseudo-class\n\t\t * to style selected options in the autocomplete listbox.\n\t\t *\n\t\t * @param {boolean} withFocusVisible - should the focus-visible class be added\n\t\t */\n\t\tsetTributeFocusVisible(withFocusVisible) {\n\t\t\tif (withFocusVisible) {\n\t\t\t\tthis.getTributeContainer().classList.add(this.$style['tribute-container--focus-visible'])\n\t\t\t} else {\n\t\t\t\tthis.getTributeContainer().classList.remove(this.$style['tribute-container--focus-visible'])\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Show tribute menu programmatically.\n\t\t *\n\t\t * @param {string} trigger - trigger character, can be '/', '@', or ':'\n\t\t *\n\t\t * @public\n\t\t */\n\t\tshowTribute(trigger) {\n\t\t\tthis.focus()\n\t\t\tconst index = this.tribute.collection.findIndex((collection) => collection.trigger === trigger)\n\t\t\tthis.tribute.showMenuForCollection(this.$refs.contenteditable, index)\n\t\t\tthis.updateValue(this.$refs.contenteditable.innerHTML)\n\t\t\tdocument.addEventListener('click', this.hideTribute, true)\n\t\t},\n\n\t\t/**\n\t\t * Hide tribute menu programmatically\n\t\t *\n\t\t */\n\t\thideTribute() {\n\t\t\tthis.tribute.hideMenu()\n\t\t\tdocument.removeEventListener('click', this.hideTribute, true)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// Standalone styling, independent from server\n.rich-contenteditable {\n\t--contenteditable-block-offset: calc(2 * var(--default-grid-baseline));\n\t--contenteditable-inline-start-offset: calc(2 * var(--default-grid-baseline));\n\t--contenteditable-inline-end-offset: calc(2 * var(--default-grid-baseline));\n\tposition: relative;\n\twidth: auto;\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 14px;\n\t\tmax-width: fit-content;\n\t\tinset-block-start: 11px;\n\t\tinset-inline: 0;\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(&__input--empty) + &__label {\n\t\tinset-block-start: -10px;\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tfont-weight: 500;\n\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: 5px;\n\t\tmargin-inline: 9px;\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t}\n\n\t&__input {\n\t\toverflow-y: auto;\n\t\twidth: auto;\n\t\tmargin: 0;\n\t\tpadding-block: var(--contenteditable-block-offset);\n\t\tpadding-inline: var(--contenteditable-inline-start-offset) var(--contenteditable-inline-end-offset);\n\t\tcursor: text;\n\t\twhite-space: pre-wrap;\n\t\toverflow-wrap: break-word;\n\t\tcolor: var(--color-main-text);\n\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--border-radius-element);\n\t\toutline: none;\n\t\tbackground-color: var(--color-main-background);\n\t\tfont-family: var(--font-face);\n\t\tfont-size: inherit;\n\t\ttab-size: 4;\n\t\tmin-height: var(--default-clickable-area);\n\t\tmax-height: calc(var(--default-clickable-area) * 5.5);\n\n\t\t&--has-label {\n\t\t\tmargin-top: 10px;\n\t\t}\n\n\t\t// Cannot use :empty because of firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=1513303\n\t\t&--empty:focus:before,\n\t\t&--empty:not(&--has-label):before {\n\t\t\tcontent: attr(aria-placeholder);\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tposition: absolute;\n\t\t\twidth: calc(100% - var(--contenteditable-inline-start-offset) - var(--contenteditable-inline-end-offset));\n\t\t\theight: calc(100% - 2 * var(--contenteditable-block-offset));\n\t\t\toverflow: hidden;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\n\t\t&[contenteditable='false']:not(&--disabled) {\n\t\t\tcursor: default;\n\t\t\tbackground-color: transparent;\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-color: transparent;\n\t\t\topacity: 1;\n\t\t\tborder-radius: 0;\n\t\t}\n\n\t\t&--multiline {\n\t\t\tmin-height: calc(var(--default-clickable-area) * 3);\n\t\t\t// No max for mutiline\n\t\t\tmax-height: none;\n\t\t}\n\n\t\t&--disabled {\n\t\t\topacity: $opacity_disabled;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tborder: 2px solid var(--color-background-darker);\n\t\t\tborder-radius: var(--border-radius-small);\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t}\n\n\t\t&--overflow,\n\t\t&--overflow:hover {\n\t\t\t// we need important to override server styles\n\t\t\tborder-color: var(--color-border-error, var(--color-error)) !important;\n\t\t}\n\t}\n}\n\n</style>\n\n<style lang=\"scss\" module>\n.tribute-container {\n\tz-index: 9000;\n\toverflow: auto;\n\t// Hide container root element while initializing\n\tposition: absolute;\n\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\tleft: -100vw;\n\t// Space it out a bit from the text\n\tmargin: var(--default-grid-baseline) 0;\n\tpadding: var(--default-grid-baseline);\n\tcolor: var(--color-text-maxcontrast);\n\tborder-radius: var(--border-radius-element);\n\tbackground: var(--color-main-background);\n\tbox-shadow: 0 1px 5px var(--color-box-shadow);\n\n\t&,\n\t& * {\n\t\tbox-sizing: border-box;\n\t}\n\n\tul {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--default-grid-baseline);\n\t}\n\n\t.tribute-container__item {\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tborder-radius: var(--border-radius-small);\n\t\tpadding: var(--default-grid-baseline);\n\t\tcursor: pointer;\n\t\tmin-height: var(--clickable-area-small, auto);\n\n\t\t&:global(.highlight) {\n\t\t\tcolor: var(--color-main-text);\n\t\t\tbackground: var(--color-background-hover);\n\n\t\t\t&, * {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.tribute-container--focus-visible {\n\t\t:global(.highlight).tribute-container__item {\n\t\t\toutline: 2px solid var(--color-main-text) !important;\n\t\t}\n\t}\n}\n\n.tribute-container-autocomplete {\n\tmin-width: 250px;\n\tmax-width: 300px;\n\t// Show maximum 4 entries and a half to show scroll\n\t// Autocomplete height\n\t// + 2 paddings inside autocomplete\n\t// + 1 padding gap\n\t// And 1.5 paddings - container's padding without the last gap\n\tmax-height: calc((var(--default-clickable-area) + 3 * var(--defaul