@nextcloud/vue 8.6.1 → 8.7.0

package/dist/chunks/NcRichContenteditable-eG8Fyo-M.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcRichContenteditable-eG8Fyo-M.mjs","sources":["../../src/components/NcRichContenteditable/NcAutoCompleteResult.vue","../../src/components/NcRichContenteditable/NcRichContenteditable.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\n\n<template>\n\t<div class=\"autocomplete-result\">\n\t\t<!-- Avatar or icon -->\n\t\t<div :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 v-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 v-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<!-- Label and subline -->\n\t\t<span class=\"autocomplete-result__content\">\n\t\t\t<span class=\"autocomplete-result__title\" :title=\"labelWithFallback\">\n\t\t\t\t{{ labelWithFallback }}\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 { generateUrl } from '@nextcloud/router'\n\nimport NcUserStatusIcon from '../NcUserStatusIcon/index.js'\n\nexport default {\n\tname: 'NcAutoCompleteResult',\n\n\tcomponents: {\n\t\tNcUserStatusIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * @deprecated Use `label` instead\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: null,\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\t\tsubline: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\ticonUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\tsource: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\tstatus: {\n\t\t\ttype: [Object, Array],\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\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? this.getAvatarUrl(this.id, 44)\n\t\t\t\t: null\n\t\t},\n\t\t// For backwards compatibility\n\t\tlabelWithFallback() {\n\t\t\treturn this.label || this.title\n\t\t},\n\t},\n\n\tmethods: {\n\t\tgetAvatarUrl(user, size) {\n\t\t\treturn generateUrl('/avatar/{user}/{size}', {\n\t\t\t\tuser,\n\t\t\t\tsize,\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.autocomplete-result {\n\tdisplay: flex;\n\theight: var(--default-clickable-area);\n\tpadding: var(--default-grid-baseline) 0;\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\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tright: -4px;\n\t\tbottom: -4px;\n\t\tmin-width: 18px;\n\t\tmin-height: 18px;\n\t\twidth: 18px;\n\t\theight: 18px;\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: var(--default-font-size);\n\t\tline-height: 15px;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: 16px;\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\tpadding-left: calc(var(--default-grid-baseline) * 2);\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  - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\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\t:value.sync=\"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\t:value.sync=\"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 0;\n\t}\n\n\t.pre-line {\n\t\twhite-space: pre-line;\n\t}\n</style>\n```\n\n</docs>\n\n<template>\n\t<div class=\"rich-contenteditable\">\n\t\t<div :id=\"id\"\n\t\t\tref=\"contenteditable\"\n\t\t\tv-tooltip=\"tooltipString\"\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\tv-bind=\"$attrs\"\n\t\t\tv-on=\"listeners\"\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.delete=\"onDelete\"\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 v-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 { t } from '../../l10n.js'\nimport NcAutoCompleteResult from './NcAutoCompleteResult.vue'\nimport richEditor from '../../mixins/richEditor/index.js'\nimport Tooltip from '../../directives/Tooltip/index.js'\nimport { emojiSearch, emojiAddRecent } from '../../functions/emoji/index.ts'\nimport { searchProvider, getLinkWithPicker } from '../NcRichText/index.js'\n\nimport Tribute from 'tributejs/dist/tribute.esm.js'\nimport debounce from 'debounce'\nimport stringLength from 'string-length'\nimport GenRandomId from '../../utils/GenRandomId.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\tdirectives: {\n\t\ttooltip: Tooltip,\n\t},\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: () => GenRandomId(7),\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\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\trequired: true,\n\t\t},\n\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Write a message …'),\n\t\t},\n\n\t\tautoComplete: {\n\t\t\ttype: Function,\n\t\t\tdefault: () => [],\n\t\t},\n\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\t},\n\n\temits: [\n\t\t'submit',\n\t\t'paste',\n\t\t'update:value',\n\t\t'smart-picker-submit',\n\t],\n\n\tsetup() {\n\t\tconst uid = GenRandomId(5)\n\t\treturn {\n\t\t\t// Constants\n\t\t\tlabelId: `nc-rich-contenteditable-${uid}-label`,\n\t\t\ttributeId: `nc-rich-contenteditable-${uid}-tribute`,\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.value,\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 this Firefox? 🙄\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisFF() {\n\t\t\treturn !!navigator.userAgent.match(/firefox/i)\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\treturn stringLength(this.localValue) > 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\t\t\t\tcontent: t('Message limit of {count} characters reached', { count: this.maxlength }),\n\t\t\t\tshown: true,\n\t\t\t\ttrigger: 'manual',\n\t\t\t}\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 * Proxied native event handlers without custom event handlers\n\t\t *\n\t\t * @return {Record<string, Function>}\n\t\t */\n\t\tlisteners() {\n\t\t\t/**\n\t\t\t * All component's event handlers are set as native event handlers with by v-on directive.\n\t\t\t * The component also raised custom events manually by $emit for corresponding events.\n\t\t\t * As a result, it triggers handlers twice.\n\t\t\t * The v-on=\"listeners\" directive should only set proxied native events handler without custom events\n\t\t\t */\n\t\t\tconst listeners = { ...this.$listeners }\n\t\t\tdelete listeners.paste\n\t\t\treturn listeners\n\t\t},\n\n\t\t/**\n\t\t * Compute debounce function for the autocomplete function\n\t\t */\n\t\t debouncedAutoComplete() {\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\tvalue() {\n\t\t\tconst html = this.$refs.contenteditable.innerHTML\n\t\t\t// Compare trimmed versions to be safe\n\t\t\tif (this.value.trim() !== this.parseContent(html).trim()) {\n\t\t\t\tthis.updateContent(this.value)\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.value)\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\tbeforeDestroy() {\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=\"nc-rich-contenteditable-tribute-item-${GenRandomId(5)}\" class=\"${this.$style['tribute-item']}\" role=\"option\">${content}</div>`\n\n\t\t\tconst tributesCollection = []\n\t\t\ttributesCollection.push({\n\t\t\t\t// Allow spaces in the middle of mentions\n\t\t\t\tallowSpaces: true,\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\t// Where to inject the menu popup\n\t\t\t\tmenuContainer: this.menuContainer,\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\t// Where to inject the menu popup\n\t\t\t\t\tmenuContainer: this.menuContainer,\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\t// Where to inject the menu popup\n\t\t\t\t\tmenuContainer: this.menuContainer,\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({ collection: tributesCollection })\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('smart-picker-submit', 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\tconsole.debug('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\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\t\tmoveCursorToEnd() {\n\t\t\tif (!document.createRange) {\n\t\t\t\treturn\n\t\t\t}\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\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// If no selection, replace the whole data\n\t\t\tif (!selection.rangeCount) {\n\t\t\t\tthis.updateValue(text)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Generate text and insert\n\t\t\tconst range = selection.getRangeAt(0)\n\t\t\tselection.deleteFromDocument()\n\t\t\trange.insertNode(document.createTextNode(text))\n\n\t\t\t// Put cursor at the end of the selection\n\t\t\tconst newRange = document.createRange()\n\t\t\tnewRange.setStart(event.target, range.endOffset)\n\t\t\tnewRange.collapse(true)\n\t\t\tselection.removeAllRanges()\n\t\t\tselection.addRange(newRange)\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\tconst text = this.parseContent(htmlOrText)\n\t\t\tthis.localValue = text\n\t\t\tthis.$emit('update:value', 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 * Because FF have a decade old bug preventing contenteditable=false\n\t\t * to properly be deleted on backspace, we have to hack 👀\n\t\t * https://stackoverflow.com/a/59383394/3885878\n\t\t * https://stackoverflow.com/a/30574622\n\t\t *\n\t\t * @param {Event} event the delete keydown event\n\t\t */\n\t\tonDelete(event) {\n\t\t\tif (!this.isFF || !window.getSelection) {\n\t\t\t\treturn\n\t\t\t}\n\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\t// fix backspace bug in FF\n\t\t\t// https://bugzilla.mozilla.org/show_bug.cgi?id=685445\n\t\t\t// https://bugzilla.mozilla.org/show_bug.cgi?id=1665167\n\t\t\tconst selection = window.getSelection()\n\t\t\tconst node = event.target\n\t\t\tif (!selection.isCollapsed || !selection.rangeCount) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst curRange = selection.getRangeAt(selection.rangeCount - 1)\n\t\t\tif (curRange.commonAncestorContainer.nodeType === 3 && curRange.startOffset > 0) {\n\t\t\t\t// we are in child selection. The characters of the text node is being deleted\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst range = document.createRange()\n\t\t\tif (selection.anchorNode !== node) {\n\t\t\t\t// selection is in character mode. expand it to the whole editable field\n\t\t\t\trange.selectNodeContents(node)\n\t\t\t\trange.setEndBefore(selection.anchorNode)\n\t\t\t} else if (selection.anchorOffset > 0) {\n\t\t\t\trange.setEnd(node, selection.anchorOffset)\n\t\t\t} else {\n\t\t\t\t// reached the beginning of editable field\n\t\t\t\treturn\n\t\t\t}\n\t\t\trange.setStart(node, range.endOffset - 1)\n\n\t\t\tconst previousNode = range.cloneContents().lastChild\n\t\t\tif (previousNode && previousNode.contentEditable === 'false') {\n\t\t\t\t// this is some rich content, e.g. smile. We should help the user to delete it\n\t\t\t\trange.deleteContents()\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\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\t/**\n\t\t * Get HTML element with Tribute.js container\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 * @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 * @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} 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\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// Standalone styling, independent from server\n.rich-contenteditable {\n\tposition: relative;\n\twidth: auto;\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 14px 0;\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-start: 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: 8px;\n\t\tcursor: text;\n\t\twhite-space: pre-wrap;\n\t\tword-break: 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-large);\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\tmin-height: $clickable-area;\n\t\tmax-height: $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}\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: $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);\n\t\t\tbackground-color: var(--color-background-dark);\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// 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);\n\tbackground: var(--color-main-background);\n\tbox-shadow: 0 1px 5px var(--color-box-shadow);\n\n\t.tribute-container__item {\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tborder-radius: var(--border-radius);\n\t\tpadding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline));\n\t\tmargin-bottom: var(--default-grid-baseline);\n\t\tcursor: pointer;\n\n\t\t&:last-child {\n\t\t\tmargin-bottom: 0;\n\t\t}\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 around autocomplete\n\t// + 2 paddings arouind tribute item\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) + 5 * var(--default-grid-baseline)) * 4.5 - 1.5 * var(--default-grid-baseline));\n}\n\n.tribute-container-emoji,\n.tribute-container-link {\n\tmin-width: 200px;\n\tmax-width: 200px;\n\t// Show maximum 5 entries and a half to show scroll\n\t// Item height\n\t// + 2 paddings around autocomplete\n\t// + 2 paddings arouind tribute item\n\t// + 1 padding gap\n\t// And 1.5 paddings - container's padding without the last gap\n\tmax-height: calc((24px + 3 * var(--default-grid-baseline)) * 5.5 - 1.5 * var(--default-grid-baseline));\n\n\t.tribute-item {\n\t\t// Take care of long names\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\n\t\t&__emoji {\n\t\t\tpadding-right: calc(var(--default-grid-baseline) * 2);\n\t\t}\n\t}\n}\n\n.tribute-container-link {\n\tmin-width: 200px;\n\tmax-width: 300px;\n\t.tribute-item {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t&__title {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t&__icon {\n\t\t\tmargin: auto 0;\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t\tobject-fit: contain;\n\t\t\tpadding-right: calc(var(--default-grid-baseline) * 2);\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","NcUserStatusIcon","user","size","generateUrl","smilesCharacters","textSmiles","char","Tooltip","richEditor","GenRandomId","t","uid","stringLength","listeners","debounce","search","callback","html","renderMenuItem","content","tributesCollection","result","item","NcAutoCompleteResult","query","emojiAddRecent","text","cb","emojiResults","emojiSearch","searchProvider","Tribute","getLinkWithPicker","tmpElem","eventData","newElem","error","element","range","selection","event","clipboardData","newRange","htmlOrText","value","renderedContent","node","curRange","previousNode","isActive","tributeContainer","target","withFocusVisible"],"mappings":"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"}

package/dist/chunks/{NcRichContenteditable-WxSgSNot.cjs → NcRichContenteditable-jReu2l-M.cjs}

@@ -1,14 +1,19 @@
-require('../assets/NcRichContenteditable-j9edXOEH.css');
+require('../assets/NcRichText-kDp48Nji.css');
+require('../assets/NcRichContenteditable-N1TxeACO.css');
 "use strict";
-const s = require("./_l10n-Od-4xzJA.cjs"), f = require("@nextcloud/router"), g = require("./NcUserStatusIcon-79RsINrv.cjs"), p = require("./_plugin-vue2_normalizer-DCfUPqga.cjs"), _ = require("./index-U21dQVa7.cjs");
+const s = require("./_l10n-Od-4xzJA.cjs"), f = require("@nextcloud/router"), _ = require("./NcUserStatusIcon-79RsINrv.cjs"), p = require("./_plugin-vue2_normalizer-DCfUPqga.cjs"), g = require("./index-5TyVc_TT.cjs");
 require("../Directives/Tooltip.cjs");
-const u = require("./emoji-mJIuLpNR.cjs"), c = require("./referencePickerModal-GXRJ351Q.cjs");
+const c = require("./emoji-mJIuLpNR.cjs");
+require("unist-util-visit");
+require("unist-builder");
+require("../Functions/registerReference.cjs");
+require("@vueuse/core");
+const d = require("./referencePickerModal-cPBjsn4r.cjs");
 require("@nextcloud/axios");
+;/* empty css                                                                      */
 require("../Components/NcLoadingIcon.cjs");
 require("./NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_2603be83_lang-kOW4T17e.cjs");
-const d = require("./GenRandomId-ULxaMkkr.cjs");
-require("unist-util-visit");
-require("unist-builder");
+const l = require("./GenRandomId-ULxaMkkr.cjs");
 require("unified");
 require("remark-parse");
 require("remark-gfm");
@@ -17,20 +22,29 @@ require("remark-rehype");
 require("rehype-react");
 require("rehype-external-links");
 require("../Components/NcEmptyContent.cjs");
-require("./NcSelect-rMSul72R.cjs");
+require("./NcSelect-U9LJcdIo.cjs");
 require("./NcTextField-eclRKl_B.cjs");
 require("../Components/NcButton.cjs");
 require("../Components/NcModal.cjs");
 require("@nextcloud/event-bus");
-const b = require("tributejs/dist/tribute.esm.js"), C = require("debounce"), y = require("string-length"), v = require("floating-vue"), o = (t) => t && t.__esModule ? t : { default: t }, l = /* @__PURE__ */ o(b), k = /* @__PURE__ */ o(C), T = /* @__PURE__ */ o(y), S = {
+const y = require("tributejs/dist/tribute.esm.js"), C = require("debounce"), v = require("string-length"), T = require("floating-vue"), u = (t) => t && t.__esModule ? t : { default: t }, A = /* @__PURE__ */ u(y), k = /* @__PURE__ */ u(C), w = /* @__PURE__ */ u(v), S = {
   name: "NcAutoCompleteResult",
   components: {
-    NcUserStatusIcon: g.NcUserStatusIcon
+    NcUserStatusIcon: _.NcUserStatusIcon
   },
   props: {
+    /**
+     * @deprecated Use `label` instead
+     */
     title: {
       type: String,
-      required: !0
+      required: !1,
+      default: null
+    },
+    label: {
+      type: String,
+      required: !1,
+      default: null
     },
     subline: {
       type: String,
@@ -60,6 +74,10 @@ const b = require("tributejs/dist/tribute.esm.js"), C = require("debounce"), y =
   computed: {
     avatarUrl() {
       return this.iconUrl ? this.iconUrl : this.id && this.source === "users" ? this.getAvatarUrl(this.id, 44) : null;
+    },
+    // For backwards compatibility
+    labelWithFallback() {
+      return this.label || this.title;
     }
   },
   methods: {
@@ -73,25 +91,41 @@ const b = require("tributejs/dist/tribute.esm.js"), C = require("debounce"), y =
 };
 var q = function() {
   var e = this, n = e._self._c;
-  return n("div", { staticClass: "autocomplete-result" }, [n("div", { staticClass: "autocomplete-result__icon", class: [e.icon, `autocomplete-result__icon--${e.avatarUrl ? "with-avatar" : ""}`], style: e.avatarUrl ? { backgroundImage: `url(${e.avatarUrl})` } : null }, [e.status.icon ? n("span", { staticClass: "autocomplete-result__status autocomplete-result__status--icon" }, [e._v(" " + e._s(e.status && e.status.icon || "") + " ")]) : e.status.status && e.status.status !== "offline" ? n("NcUserStatusIcon", { staticClass: "autocomplete-result__status", attrs: { status: e.status.status } }) : e._e()], 1), n("span", { staticClass: "autocomplete-result__content" }, [n("span", { staticClass: "autocomplete-result__title", attrs: { title: e.title } }, [e._v(" " + e._s(e.title) + " ")]), e.subline ? n("span", { staticClass: "autocomplete-result__subline" }, [e._v(" " + e._s(e.subline) + " ")]) : e._e()])]);
-}, x = [], E = /* @__PURE__ */ p.normalizeComponent(
+  return n("div", { staticClass: "autocomplete-result" }, [n("div", { staticClass: "autocomplete-result__icon", class: [e.icon, `autocomplete-result__icon--${e.avatarUrl ? "with-avatar" : ""}`], style: e.avatarUrl ? { backgroundImage: `url(${e.avatarUrl})` } : null }, [e.status.icon ? n("span", { staticClass: "autocomplete-result__status autocomplete-result__status--icon" }, [e._v(" " + e._s(e.status && e.status.icon || "") + " ")]) : e.status.status && e.status.status !== "offline" ? n("NcUserStatusIcon", { staticClass: "autocomplete-result__status", attrs: { status: e.status.status } }) : e._e()], 1), n("span", { staticClass: "autocomplete-result__content" }, [n("span", { staticClass: "autocomplete-result__title", attrs: { title: e.labelWithFallback } }, [e._v(" " + e._s(e.labelWithFallback) + " ")]), e.subline ? n("span", { staticClass: "autocomplete-result__subline" }, [e._v(" " + e._s(e.subline) + " ")]) : e._e()])]);
+}, I = [], x = /* @__PURE__ */ p.normalizeComponent(
   S,
   q,
-  x,
+  I,
   !1,
   null,
-  "b6d7cce6",
+  "9cff39ed",
   null,
   null
 );
-const m = E.exports;
+const h = x.exports;
 s.register(s.t27, s.t30);
-const A = {
+const $ = {
+  "material-design-icon": "_material-design-icon_6omw8_26",
+  "tribute-container": "_tribute-container_6omw8_34",
+  "tribute-container__item": "_tribute-container__item_6omw8_44",
+  "tribute-container--focus-visible": "_tribute-container--focus-visible_6omw8_61",
+  "tribute-container-autocomplete": "_tribute-container-autocomplete_6omw8_65",
+  "tribute-container-emoji": "_tribute-container-emoji_6omw8_71",
+  "tribute-container-link": "_tribute-container-link_6omw8_72",
+  "tribute-item": "_tribute-item_6omw8_77",
+  "tribute-item__emoji": "_tribute-item__emoji_6omw8_83",
+  "tribute-item__title": "_tribute-item__title_6omw8_96",
+  "tribute-item__icon": "_tribute-item__icon_6omw8_101"
+}, E = ["d", "D", "p", "P", "s", "S", "x", "X", ")", "(", "|", "/"], a = [];
+E.forEach((t) => {
+  a.push(":" + t), a.push(":-" + t);
+});
+const R = {
   name: "NcRichContenteditable",
   directives: {
-    tooltip: v.VTooltip
+    tooltip: T.VTooltip
   },
-  mixins: [_.richEditor],
+  mixins: [g.richEditor],
   inheritAttrs: !1,
   props: {
     /**
@@ -99,7 +133,7 @@ const A = {
      */
     id: {
       type: String,
-      default: () => d.GenRandomId(7)
+      default: () => l.GenRandomId(7)
     },
     /**
      * Visual label of the contenteditable
@@ -178,76 +212,33 @@ const A = {
     "update:value",
     "smart-picker-submit"
   ],
-  data() {
+  setup() {
+    const t = l.GenRandomId(5);
     return {
-      labelId: `rich-label-${d.GenRandomId(5)}`,
-      textSmiles: [],
+      // Constants
+      labelId: `nc-rich-contenteditable-${t}-label`,
+      tributeId: `nc-rich-contenteditable-${t}-tribute`,
+      /**
+       * Non-reactive property to store Tribute instance
+       *
+       * @type {import('tributejs').default | null}
+       */
       tribute: null,
-      autocompleteOptions: {
-        // Allow spaces in the middle of mentions
-        allowSpaces: !0,
-        fillAttr: "id",
-        // Search against id and title (display name)
-        lookup: (t) => `${t.id} ${t.title}`,
-        // Where to inject the menu popup
-        menuContainer: this.menuContainer,
-        // Popup mention autocompletion templates
-        menuItemTemplate: (t) => this.renderComponentHtml(t.original, m),
-        // Hide if no results
-        noMatchTemplate: () => '<span class="hidden"></span>',
-        // Inner display of mentions
-        selectTemplate: (t) => this.genSelectTemplate(t?.original?.id),
-        // Autocompletion results
-        values: this.debouncedAutoComplete
-      },
-      emojiOptions: {
-        trigger: ":",
-        // Don't use the tribute search function at all
-        // We pass search results as values (see below)
-        lookup: (t, e) => e,
-        // Where to inject the menu popup
-        menuContainer: this.menuContainer,
-        // Popup mention autocompletion templates
-        menuItemTemplate: (t) => this.textSmiles.includes(t.original) ? t.original : `<span class="tribute-container-emoji__item__emoji">${t.original.native}</span> :${t.original.short_name}`,
-        // Hide if no results
-        noMatchTemplate: () => s.t("No emoji found"),
-        // Display raw emoji along with its name
-        selectTemplate: (t) => this.textSmiles.includes(t.original) ? t.original : (u.emojiAddRecent(t.original), t.original.native),
-        // Pass the search results as values
-        values: (t, e) => {
-          const n = u.emojiSearch(t);
-          this.textSmiles.includes(":" + t) && n.unshift(":" + t), e(n);
-        },
-        // Class added to the menu container
-        containerClass: "tribute-container-emoji",
-        // Class added to each list item
-        itemClass: "tribute-container-emoji__item"
-      },
-      linkOptions: {
-        trigger: "/",
-        // Don't use the tribute search function at all
-        // We pass search results as values (see below)
-        lookup: (t, e) => e,
-        // Where to inject the menu popup
-        menuContainer: this.menuContainer,
-        // Popup mention autocompletion templates
-        menuItemTemplate: (t) => `<img class="tribute-container-link__item__icon" src="${t.original.icon_url}"> <span class="tribute-container-link__item__title">${t.original.title}</span>`,
-        // Hide if no results
-        noMatchTemplate: () => s.t("No link provider found"),
-        selectTemplate: this.getLink,
-        // Pass the search results as values
-        values: (t, e) => e(c.searchProvider(t)),
-        // Class added to the menu container
-        containerClass: "tribute-container-link",
-        // Class added to each list item
-        itemClass: "tribute-container-link__item"
-      },
+      tributeStyleMutationObserver: null
+    };
+  },
+  data() {
+    return {
       // Represent the raw untrimmed text of the contenteditable
       // serves no other purpose than to check whether the
       // content is empty or not
       localValue: this.value,
       // Is in text composition session in IME
-      isComposing: !1
+      isComposing: !1,
+      // Tribute autocomplete
+      isAutocompleteOpen: !1,
+      autocompleteActiveId: void 0,
+      isTributeIntegrationDone: !1
     };
   },
   computed: {
@@ -273,7 +264,7 @@ const A = {
      * @return {boolean}
      */
     isOverMaxlength() {
-      return this.isEmptyValue || !this.maxlength ? !1 : T.default(this.localValue) > this.maxlength;
+      return this.isEmptyValue || !this.maxlength ? !1 : w.default(this.localValue) > this.maxlength;
     },
     /**
      * Tooltip to show if characters count is over limit
@@ -303,6 +294,14 @@ const A = {
     listeners() {
       const t = { ...this.$listeners };
       return delete t.paste, t;
+    },
+    /**
+     * Compute debounce function for the autocomplete function
+     */
+    debouncedAutoComplete() {
+      return k.default(async (t, e) => {
+        this.autoComplete(t, e);
+      }, 100);
     }
   },
   watch: {
@@ -316,13 +315,10 @@ const A = {
     }
   },
   mounted() {
-    const t = ["d", "D", "p", "P", "s", "S", "x", "X", ")", "(", "|", "/"];
-    this.textSmiles = [], t.forEach((e) => {
-      this.textSmiles.push(":" + e), this.textSmiles.push(":-" + e);
-    }), this.autocompleteTribute = new l.default(this.autocompleteOptions), this.autocompleteTribute.attach(this.$refs.contenteditable), this.emojiAutocomplete && (this.emojiTribute = new l.default(this.emojiOptions), this.emojiTribute.attach(this.$refs.contenteditable)), this.linkAutocomplete && (this.linkTribute = new l.default(this.linkOptions), this.linkTribute.attach(this.$refs.contenteditable)), this.updateContent(this.value), this.$refs.contenteditable.contentEditable = this.canEdit;
+    this.initializeTribute(), this.updateContent(this.value), this.$refs.contenteditable.contentEditable = this.canEdit;
   },
   beforeDestroy() {
-    this.autocompleteTribute && this.autocompleteTribute.detach(this.$refs.contenteditable), this.emojiTribute && this.emojiTribute.detach(this.$refs.contenteditable), this.linkTribute && this.linkTribute.detach(this.$refs.contenteditable);
+    this.tribute && this.tribute.detach(this.$refs.contenteditable), this.tributeStyleMutationObserver && this.tributeStyleMutationObserver.disconnect();
   },
   methods: {
     /**
@@ -333,8 +329,72 @@ const A = {
     focus() {
       this.$refs.contenteditable.focus();
     },
+    initializeTribute() {
+      const t = (n) => `<div id="nc-rich-contenteditable-tribute-item-${l.GenRandomId(5)}" class="${this.$style["tribute-item"]}" role="option">${n}</div>`, e = [];
+      e.push({
+        // Allow spaces in the middle of mentions
+        allowSpaces: !0,
+        fillAttr: "id",
+        // Search against id and label (display name) (fallback to title for v8.0.0..8.6.1 compatibility)
+        lookup: (n) => `${n.id} ${n.label ?? n.title}`,
+        // Where to inject the menu popup
+        menuContainer: this.menuContainer,
+        // Popup mention autocompletion templates
+        menuItemTemplate: (n) => t(this.renderComponentHtml(n.original, h)),
+        // Hide if no results
+        noMatchTemplate: () => '<span class="hidden"></span>',
+        // Inner display of mentions
+        selectTemplate: (n) => this.genSelectTemplate(n?.original?.id),
+        // Autocompletion results
+        values: this.debouncedAutoComplete,
+        // Class added to the menu container
+        containerClass: `${this.$style["tribute-container"]} ${this.$style["tribute-container-autocomplete"]}`,
+        // Class added to each list item
+        itemClass: this.$style["tribute-container__item"]
+      }), this.emojiAutocomplete && e.push({
+        trigger: ":",
+        // Don't use the tribute search function at all
+        // We pass search results as values (see below)
+        lookup: (n, i) => i,
+        // Where to inject the menu popup
+        menuContainer: this.menuContainer,
+        // Popup mention autocompletion templates
+        menuItemTemplate: (n) => a.includes(n.original) ? n.original : t(`<span class="${this.$style["tribute-item__emoji"]}">${n.original.native}</span> :${n.original.short_name}`),
+        // Hide if no results
+        noMatchTemplate: () => s.t("No emoji found"),
+        // Display raw emoji along with its name
+        selectTemplate: (n) => a.includes(n.original) ? n.original : (c.emojiAddRecent(n.original), n.original.native),
+        // Pass the search results as values
+        values: (n, i) => {
+          const r = c.emojiSearch(n);
+          a.includes(":" + n) && r.unshift(":" + n), i(r);
+        },
+        // Class added to the menu container
+        containerClass: `${this.$style["tribute-container"]} ${this.$style["tribute-container-emoji"]}`,
+        // Class added to each list item
+        itemClass: this.$style["tribute-container__item"]
+      }), this.linkAutocomplete && e.push({
+        trigger: "/",
+        // Don't use the tribute search function at all
+        // We pass search results as values (see below)
+        lookup: (n, i) => i,
+        // Where to inject the menu popup
+        menuContainer: this.menuContainer,
+        // Popup mention autocompletion templates
+        menuItemTemplate: (n) => t(`<img class="${this.$style["tribute-item__icon"]}" src="${n.original.icon_url}"> <span class="${this.$style["tribute-item__title"]}">${n.original.title}</span>`),
+        // Hide if no results
+        noMatchTemplate: () => s.t("No link provider found"),
+        selectTemplate: this.getLink,
+        // Pass the search results as values
+        values: (n, i) => i(d.searchProvider(n)),
+        // Class added to the menu container
+        containerClass: `${this.$style["tribute-container"]} ${this.$style["tribute-container-link"]}`,
+        // Class added to each list item
+        itemClass: this.$style["tribute-container__item"]
+      }), this.tribute = new A.default({ collection: e }), this.tribute.attach(this.$refs.contenteditable);
+    },
     getLink(t) {
-      return c.getLinkWithPicker(t.original.id).then((e) => {
+      return d.getLinkWithPicker(t.original.id).then((e) => {
         const n = document.getElementById("tmp-smart-picker-result-node"), i = {
           result: e,
           insertText: !0
@@ -384,7 +444,7 @@ const A = {
         return;
       t.preventDefault();
       const e = t.clipboardData;
-      if (this.$emit("paste", t), e.files.length !== 0 || !Object.values(e.items).find((h) => h?.type.startsWith("text")))
+      if (this.$emit("paste", t), e.files.length !== 0 || !Object.values(e.items).find((b) => b?.type.startsWith("text")))
         return;
       const n = e.getData("text"), i = window.getSelection();
       if (!i.rangeCount) {
@@ -393,8 +453,8 @@ const A = {
       }
       const r = i.getRangeAt(0);
       i.deleteFromDocument(), r.insertNode(document.createTextNode(n));
-      const a = document.createRange();
-      a.setStart(t.target, r.endOffset), a.collapse(!0), i.removeAllRanges(), i.addRange(a), this.updateValue(this.$refs.contenteditable.innerHTML);
+      const o = document.createRange();
+      o.setStart(t.target, r.endOffset), o.collapse(!0), i.removeAllRanges(), i.addRange(o), this.updateValue(this.$refs.contenteditable.innerHTML);
     },
     /**
      * Update the value text from the provided html
@@ -439,8 +499,8 @@ const A = {
       else
         return;
       r.setStart(n, r.endOffset - 1);
-      const a = r.cloneContents().lastChild;
-      a && a.contentEditable === "false" && (r.deleteContents(), t.preventDefault());
+      const o = r.cloneContents().lastChild;
+      o && o.contentEditable === "false" && (r.deleteContents(), t.preventDefault());
     },
     /**
      * Enter key pressed. Submits if not multiline
@@ -448,7 +508,7 @@ const A = {
      * @param {Event} event the keydown event
      */
     onEnter(t) {
-      this.multiline || this.isOverMaxlength || this.autocompleteTribute.isActive || this.emojiTribute.isActive || this.linkTribute.isActive || this.isComposing || (t.preventDefault(), t.stopPropagation(), this.$emit("submit", t));
+      this.multiline || this.isOverMaxlength || this.tribute.isActive || this.isComposing || (t.preventDefault(), t.stopPropagation(), this.$emit("submit", t));
     },
     /**
      * Ctrl + Enter key pressed is used to submit
@@ -458,18 +518,66 @@ const A = {
     onCtrlEnter(t) {
       this.isOverMaxlength || this.$emit("submit", t);
     },
-    /**
-     * Debounce the autocomplete function
-     */
-    debouncedAutoComplete: k.default(async function(t, e) {
-      this.autoComplete(t, e);
-    }, 100),
     onKeyUp(t) {
       t.stopImmediatePropagation();
+    },
+    /**
+     * Get HTML element with Tribute.js container
+     * @return {HTMLElement}
+     */
+    getTributeContainer() {
+      return this.tribute.menu;
+    },
+    /**
+     * Get the currently selected item element id in Tribute.js container
+     * @return {HTMLElement}
+     */
+    getTributeSelectedItem() {
+      return this.getTributeContainer().querySelector('.highlight [id^="nc-rich-contenteditable-tribute-item-"]');
+    },
+    /**
+     * Handle Tribute activation
+     * @param {boolean} isActive - is active
+     */
+    onTributeActive(t) {
+      this.isAutocompleteOpen = t, t ? (this.getTributeContainer().setAttribute("class", this.tribute.current.collection.containerClass || this.$style["tribute-container"]), this.setupTributeIntegration()) : (this.debouncedAutoComplete.clear(), this.autocompleteActiveId = void 0, this.setTributeFocusVisible(!1));
+    },
+    onTributeArrowKeyDown() {
+      this.isAutocompleteOpen && (this.setTributeFocusVisible(!0), this.onTributeSelectedItemWillChange());
+    },
+    onTributeSelectedItemWillChange() {
+      requestAnimationFrame(() => {
+        this.autocompleteActiveId = this.getTributeSelectedItem()?.id;
+      });
+    },
+    setupTributeIntegration() {
+      if (this.isTributeIntegrationDone)
+        return;
+      this.isTributeIntegrationDone = !0;
+      const t = this.getTributeContainer();
+      t.id = this.tributeId, t.setAttribute("role", "listbox"), t.children[0].setAttribute("role", "presentation"), this.tributeStyleMutationObserver = new MutationObserver(([{ target: n }]) => {
+        n.style.display !== "none" && this.onTributeSelectedItemWillChange();
+      }).observe(t, {
+        attributes: !0,
+        attributeFilter: ["style"]
+      }), t.addEventListener("mousemove", () => {
+        this.setTributeFocusVisible(!1), this.onTributeSelectedItemWillChange();
+      }, { passive: !0 });
+    },
+    /**
+     * Set tribute-container--focus-visible class on the Tribute container when the user navigates the listbox via keyboard.
+     *
+     * Because the real focus is kept on the textbox, we cannot use the :focus-visible pseudo-class
+     * to style selected options in the autocomplete listbox.
+     *
+     * @param {boolean} withFocusVisible - should the focus-visible class be added
+     */
+    setTributeFocusVisible(t) {
+      t ? this.getTributeContainer().classList.add(this.$style["tribute-container--focus-visible"]) : this.getTributeContainer().classList.remove(this.$style["tribute-container--focus-visible"]);
     }
   }
 };
-var R = function() {
+var O = function() {
   var e = this, n = e._self._c;
   return n("div", { staticClass: "rich-contenteditable" }, [n("div", e._g(e._b({ directives: [{ name: "tooltip", rawName: "v-tooltip", value: e.tooltipString, expression: "tooltipString" }], ref: "contenteditable", staticClass: "rich-contenteditable__input", class: {
     "rich-contenteditable__input--empty": e.isEmptyValue,
@@ -477,7 +585,7 @@ var R = function() {
     "rich-contenteditable__input--has-label": e.label,
     "rich-contenteditable__input--overflow": e.isOverMaxlength,
     "rich-contenteditable__input--disabled": e.disabled
-  }, attrs: { id: e.id, contenteditable: e.canEdit, "aria-labelledby": e.label ? e.labelId : void 0, "aria-placeholder": e.placeholder, "aria-multiline": "true", role: "textbox" }, on: { focus: e.moveCursorToEnd, input: e.onInput, compositionstart: function(i) {
+  }, attrs: { id: e.id, contenteditable: e.canEdit, "aria-labelledby": e.label ? e.labelId : void 0, "aria-placeholder": e.placeholder, "aria-multiline": "true", role: "textbox", "aria-haspopup": "listbox", "aria-autocomplete": "inline", "aria-controls": e.tributeId, "aria-expanded": e.isAutocompleteOpen ? "true" : "false", "aria-activedescendant": e.autocompleteActiveId }, on: { focus: e.moveCursorToEnd, input: e.onInput, compositionstart: function(i) {
     e.isComposing = !0;
   }, compositionend: function(i) {
     e.isComposing = !1;
@@ -487,19 +595,35 @@ var R = function() {
     return !i.type.indexOf("key") && e._k(i.keyCode, "enter", 13, i.key, "Enter") || i.ctrlKey || i.shiftKey || i.altKey || i.metaKey ? null : e.onEnter.apply(null, arguments);
   }, function(i) {
     return !i.type.indexOf("key") && e._k(i.keyCode, "enter", 13, i.key, "Enter") || !i.ctrlKey || i.shiftKey || i.altKey || i.metaKey ? null : (i.stopPropagation(), i.preventDefault(), e.onCtrlEnter.apply(null, arguments));
+  }, function(i) {
+    return !i.type.indexOf("key") && e._k(i.keyCode, "up", 38, i.key, ["Up", "ArrowUp"]) || i.ctrlKey || i.shiftKey || i.altKey || i.metaKey ? null : (i.stopPropagation(), e.onTributeArrowKeyDown.apply(null, arguments));
+  }, function(i) {
+    return !i.type.indexOf("key") && e._k(i.keyCode, "down", 40, i.key, ["Down", "ArrowDown"]) || i.ctrlKey || i.shiftKey || i.altKey || i.metaKey ? null : (i.stopPropagation(), e.onTributeArrowKeyDown.apply(null, arguments));
   }], paste: e.onPaste, "!keyup": function(i) {
     return i.stopPropagation(), i.preventDefault(), e.onKeyUp.apply(null, arguments);
+  }, "tribute-active-true": function(i) {
+    return e.onTributeActive(!0);
+  }, "tribute-active-false": function(i) {
+    return e.onTributeActive(!1);
   } } }, "div", e.$attrs, !1), e.listeners)), e.label ? n("div", { staticClass: "rich-contenteditable__label", attrs: { id: e.labelId } }, [e._v(" " + e._s(e.label) + " ")]) : e._e()]);
-}, w = [], N = /* @__PURE__ */ p.normalizeComponent(
-  A,
+}, D = [];
+const m = {
+  $style: $
+};
+function M(t) {
+  for (var e in m)
+    this[e] = m[e];
+}
+var N = /* @__PURE__ */ p.normalizeComponent(
   R,
-  w,
+  O,
+  D,
   !1,
-  null,
-  "eb9c34f9",
+  M,
+  "0c65f921",
   null,
   null
 );
-const j = N.exports;
-exports.NcAutoCompleteResult = m;
-exports.NcRichContenteditable = j;
+const K = N.exports;
+exports.NcAutoCompleteResult = h;
+exports.NcRichContenteditable = K;