@nextcloud/vue 8.6.0 → 8.6.2

package/dist/chunks/{NcRichContenteditable-_Ac_ZEfF.mjs → NcRichContenteditable-glkLWE43.mjs}

@@ -1,15 +1,15 @@
-import '../assets/NcRichContenteditable-j9edXOEH.css';
-import { r as m, v as p, B as d, a } from "./_l10n--bDJ_Qyj.mjs";
+import '../assets/NcRichContenteditable-WQVknpPy.css';
+import { r as d, v as p, B as m, a as o } from "./_l10n-FmsZpnE4.mjs";
 import { generateUrl as h } from "@nextcloud/router";
-import { N as f } from "./NcUserStatusIcon-Wwtp8zH3.mjs";
+import { N as f } from "./NcUserStatusIcon-pRUzQidI.mjs";
 import { n as u } from "./_plugin-vue2_normalizer-u6G_3nkj.mjs";
-import { r as g } from "./index-n2q3iT69.mjs";
+import { r as b } from "./index-xnq0-IMW.mjs";
 import "../Directives/Tooltip.mjs";
-import { a as b, e as _ } from "./emoji-tllD0Rvt.mjs";
-import { n as C, j as y } from "./referencePickerModal-oI8JiWDV.mjs";
+import { a as g, e as _ } from "./emoji-tllD0Rvt.mjs";
+import { n as y, j as C } from "./referencePickerModal-wDsYQHxX.mjs";
 import "@nextcloud/axios";
 import "../Components/NcLoadingIcon.mjs";
-import "./NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_2603be83_lang-l6e0b34w.mjs";
+import "./NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_2603be83_lang-rJ3UZLGm.mjs";
 import { G as l } from "./GenRandomId-VodkdWbp.mjs";
 import "unist-util-visit";
 import "unist-builder";
@@ -21,24 +21,33 @@ import "remark-rehype";
 import "rehype-react";
 import "rehype-external-links";
 import "../Components/NcEmptyContent.mjs";
-import "./NcSelect-DzZqm1fn.mjs";
-import "./NcTextField-RnMWfagW.mjs";
+import "./NcSelect-2ClmJ8jJ.mjs";
+import "./NcTextField-NnW31cA4.mjs";
 import "../Components/NcButton.mjs";
 import "../Components/NcModal.mjs";
 import "@nextcloud/event-bus";
-import o from "tributejs/dist/tribute.esm.js";
-import v from "debounce";
+import v from "tributejs/dist/tribute.esm.js";
+import T from "debounce";
 import k from "string-length";
-import { VTooltip as T } from "floating-vue";
-const x = {
+import { VTooltip as A } from "floating-vue";
+const S = {
   name: "NcAutoCompleteResult",
   components: {
     NcUserStatusIcon: f
   },
   props: {
+    /**
+     * @deprecated Use `label` instead
+     */
     title: {
       type: String,
-      required: !0
+      required: !1,
+      default: null
+    },
+    label: {
+      type: String,
+      required: !1,
+      default: null
     },
     subline: {
       type: String,
@@ -68,38 +77,46 @@ const x = {
   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: {
-    getAvatarUrl(e, t) {
+    getAvatarUrl(i, t) {
       return h("/avatar/{user}/{size}", {
-        user: e,
+        user: i,
         size: t
       });
     }
   }
 };
-var S = function() {
+var I = function() {
   var t = this, n = t._self._c;
-  return n("div", { staticClass: "autocomplete-result" }, [n("div", { staticClass: "autocomplete-result__icon", class: [t.icon, `autocomplete-result__icon--${t.avatarUrl ? "with-avatar" : ""}`], style: t.avatarUrl ? { backgroundImage: `url(${t.avatarUrl})` } : null }, [t.status.icon ? n("span", { staticClass: "autocomplete-result__status autocomplete-result__status--icon" }, [t._v(" " + t._s(t.status && t.status.icon || "") + " ")]) : t.status.status && t.status.status !== "offline" ? n("NcUserStatusIcon", { staticClass: "autocomplete-result__status", attrs: { status: t.status.status } }) : t._e()], 1), n("span", { staticClass: "autocomplete-result__content" }, [n("span", { staticClass: "autocomplete-result__title", attrs: { title: t.title } }, [t._v(" " + t._s(t.title) + " ")]), t.subline ? n("span", { staticClass: "autocomplete-result__subline" }, [t._v(" " + t._s(t.subline) + " ")]) : t._e()])]);
-}, E = [], A = /* @__PURE__ */ u(
-  x,
+  return n("div", { staticClass: "autocomplete-result" }, [n("div", { staticClass: "autocomplete-result__icon", class: [t.icon, `autocomplete-result__icon--${t.avatarUrl ? "with-avatar" : ""}`], style: t.avatarUrl ? { backgroundImage: `url(${t.avatarUrl})` } : null }, [t.status.icon ? n("span", { staticClass: "autocomplete-result__status autocomplete-result__status--icon" }, [t._v(" " + t._s(t.status && t.status.icon || "") + " ")]) : t.status.status && t.status.status !== "offline" ? n("NcUserStatusIcon", { staticClass: "autocomplete-result__status", attrs: { status: t.status.status } }) : t._e()], 1), n("span", { staticClass: "autocomplete-result__content" }, [n("span", { staticClass: "autocomplete-result__title", attrs: { title: t.labelWithFallback } }, [t._v(" " + t._s(t.labelWithFallback) + " ")]), t.subline ? n("span", { staticClass: "autocomplete-result__subline" }, [t._v(" " + t._s(t.subline) + " ")]) : t._e()])]);
+}, x = [], w = /* @__PURE__ */ u(
   S,
-  E,
+  I,
+  x,
   !1,
   null,
-  "b6d7cce6",
+  "9cff39ed",
   null,
   null
 );
-const R = A.exports;
-m(d, p);
-const w = {
+const E = w.exports;
+d(m, p);
+const O = ["d", "D", "p", "P", "s", "S", "x", "X", ")", "(", "|", "/"], a = [];
+O.forEach((i) => {
+  a.push(":" + i), a.push(":-" + i);
+});
+const D = {
   name: "NcRichContenteditable",
   directives: {
-    tooltip: T
+    tooltip: A
   },
-  mixins: [g],
+  mixins: [b],
   inheritAttrs: !1,
   props: {
     /**
@@ -123,7 +140,7 @@ const w = {
     },
     placeholder: {
       type: String,
-      default: a("Write a message …")
+      default: o("Write a message …")
     },
     autoComplete: {
       type: Function,
@@ -186,76 +203,33 @@ const w = {
     "update:value",
     "smart-picker-submit"
   ],
-  data() {
+  setup() {
+    const i = l(5);
     return {
-      labelId: `rich-label-${l(5)}`,
-      textSmiles: [],
+      // Constants
+      labelId: `nc-rich-contenteditable-${i}-label`,
+      tributeId: `nc-rich-contenteditable-${i}-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: (e) => `${e.id} ${e.title}`,
-        // Where to inject the menu popup
-        menuContainer: this.menuContainer,
-        // Popup mention autocompletion templates
-        menuItemTemplate: (e) => this.renderComponentHtml(e.original, R),
-        // Hide if no results
-        noMatchTemplate: () => '<span class="hidden"></span>',
-        // Inner display of mentions
-        selectTemplate: (e) => this.genSelectTemplate(e?.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: (e, t) => t,
-        // Where to inject the menu popup
-        menuContainer: this.menuContainer,
-        // Popup mention autocompletion templates
-        menuItemTemplate: (e) => this.textSmiles.includes(e.original) ? e.original : `<span class="tribute-container-emoji__item__emoji">${e.original.native}</span> :${e.original.short_name}`,
-        // Hide if no results
-        noMatchTemplate: () => a("No emoji found"),
-        // Display raw emoji along with its name
-        selectTemplate: (e) => this.textSmiles.includes(e.original) ? e.original : (b(e.original), e.original.native),
-        // Pass the search results as values
-        values: (e, t) => {
-          const n = _(e);
-          this.textSmiles.includes(":" + e) && n.unshift(":" + e), t(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: (e, t) => t,
-        // Where to inject the menu popup
-        menuContainer: this.menuContainer,
-        // Popup mention autocompletion templates
-        menuItemTemplate: (e) => `<img class="tribute-container-link__item__icon" src="${e.original.icon_url}"> <span class="tribute-container-link__item__title">${e.original.title}</span>`,
-        // Hide if no results
-        noMatchTemplate: () => a("No link provider found"),
-        selectTemplate: this.getLink,
-        // Pass the search results as values
-        values: (e, t) => t(C(e)),
-        // 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: {
@@ -290,7 +264,7 @@ const w = {
      */
     tooltipString() {
       return this.isOverMaxlength ? {
-        content: a("Message limit of {count} characters reached", { count: this.maxlength }),
+        content: o("Message limit of {count} characters reached", { count: this.maxlength }),
         shown: !0,
         trigger: "manual"
       } : null;
@@ -309,8 +283,16 @@ const w = {
      * @return {Record<string, Function>}
      */
     listeners() {
-      const e = { ...this.$listeners };
-      return delete e.paste, e;
+      const i = { ...this.$listeners };
+      return delete i.paste, i;
+    },
+    /**
+     * Compute debounce function for the autocomplete function
+     */
+    debouncedAutoComplete() {
+      return T(async (i, t) => {
+        this.autoComplete(i, t);
+      }, 100);
     }
   },
   watch: {
@@ -319,18 +301,15 @@ const w = {
      * If it's different, we render everything and update the main content
      */
     value() {
-      const e = this.$refs.contenteditable.innerHTML;
-      this.value.trim() !== this.parseContent(e).trim() && this.updateContent(this.value);
+      const i = this.$refs.contenteditable.innerHTML;
+      this.value.trim() !== this.parseContent(i).trim() && this.updateContent(this.value);
     }
   },
   mounted() {
-    const e = ["d", "D", "p", "P", "s", "S", "x", "X", ")", "(", "|", "/"];
-    this.textSmiles = [], e.forEach((t) => {
-      this.textSmiles.push(":" + t), this.textSmiles.push(":-" + t);
-    }), this.autocompleteTribute = new o(this.autocompleteOptions), this.autocompleteTribute.attach(this.$refs.contenteditable), this.emojiAutocomplete && (this.emojiTribute = new o(this.emojiOptions), this.emojiTribute.attach(this.$refs.contenteditable)), this.linkAutocomplete && (this.linkTribute = new o(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: {
     /**
@@ -341,15 +320,79 @@ const w = {
     focus() {
       this.$refs.contenteditable.focus();
     },
-    getLink(e) {
-      return y(e.original.id).then((t) => {
-        const n = document.getElementById("tmp-smart-picker-result-node"), i = {
+    initializeTribute() {
+      const i = (n) => `<div id="nc-rich-contenteditable-tribute-item-${l(5)}" class="tribute-item" role="option">${n}</div>`, t = [];
+      t.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) => i(this.renderComponentHtml(n.original, E)),
+        // 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: "tribute-container tribute-container-autocomplete",
+        // Class added to each list item
+        itemClass: "tribute-container__item"
+      }), this.emojiAutocomplete && t.push({
+        trigger: ":",
+        // Don't use the tribute search function at all
+        // We pass search results as values (see below)
+        lookup: (n, e) => e,
+        // Where to inject the menu popup
+        menuContainer: this.menuContainer,
+        // Popup mention autocompletion templates
+        menuItemTemplate: (n) => a.includes(n.original) ? n.original : i(`<span class="tribute-container-emoji__item__emoji">${n.original.native}</span> :${n.original.short_name}`),
+        // Hide if no results
+        noMatchTemplate: () => o("No emoji found"),
+        // Display raw emoji along with its name
+        selectTemplate: (n) => a.includes(n.original) ? n.original : (g(n.original), n.original.native),
+        // Pass the search results as values
+        values: (n, e) => {
+          const r = _(n);
+          a.includes(":" + n) && r.unshift(":" + n), e(r);
+        },
+        // Class added to the menu container
+        containerClass: "tribute-container tribute-container-emoji",
+        // Class added to each list item
+        itemClass: "tribute-container__item tribute-container-emoji__item"
+      }), this.linkAutocomplete && t.push({
+        trigger: "/",
+        // Don't use the tribute search function at all
+        // We pass search results as values (see below)
+        lookup: (n, e) => e,
+        // Where to inject the menu popup
+        menuContainer: this.menuContainer,
+        // Popup mention autocompletion templates
+        menuItemTemplate: (n) => i(`<img class="tribute-container-link__item__icon" src="${n.original.icon_url}"> <span class="tribute-container-link__item__title">${n.original.title}</span>`),
+        // Hide if no results
+        noMatchTemplate: () => o("No link provider found"),
+        selectTemplate: this.getLink,
+        // Pass the search results as values
+        values: (n, e) => e(y(n)),
+        // Class added to the menu container
+        containerClass: "tribute-container tribute-container-link",
+        // Class added to each list item
+        itemClass: "tribute-container__item tribute-container-link__item"
+      }), this.tribute = new v({ collection: t }), this.tribute.attach(this.$refs.contenteditable);
+    },
+    getLink(i) {
+      return C(i.original.id).then((t) => {
+        const n = document.getElementById("tmp-smart-picker-result-node"), e = {
           result: t,
           insertText: !0
         };
-        if (this.$emit("smart-picker-submit", i), i.insertText) {
-          const s = document.createTextNode(t);
-          n.replaceWith(s), this.setCursorAfter(s), this.updateValue(this.$refs.contenteditable.innerHTML);
+        if (this.$emit("smart-picker-submit", e), e.insertText) {
+          const r = document.createTextNode(t);
+          n.replaceWith(r), this.setCursorAfter(r), this.updateValue(this.$refs.contenteditable.innerHTML);
         } else
           n.remove();
       }).catch((t) => {
@@ -358,27 +401,27 @@ const w = {
         this.setCursorAfter(n), n.remove();
       }), '<span id="tmp-smart-picker-result-node"></span>';
     },
-    setCursorAfter(e) {
+    setCursorAfter(i) {
       const t = document.createRange();
-      t.setEndAfter(e), t.collapse();
+      t.setEndAfter(i), t.collapse();
       const n = window.getSelection();
       n.removeAllRanges(), n.addRange(t);
     },
     moveCursorToEnd() {
       if (!document.createRange)
         return;
-      const e = document.createRange();
-      e.selectNodeContents(this.$refs.contenteditable), e.collapse(!1);
+      const i = document.createRange();
+      i.selectNodeContents(this.$refs.contenteditable), i.collapse(!1);
       const t = window.getSelection();
-      t.removeAllRanges(), t.addRange(e);
+      t.removeAllRanges(), t.addRange(i);
     },
     /**
      * Re-emit the input event to the parent
      *
      * @param {Event} event the input event
      */
-    onInput(e) {
-      this.updateValue(e.target.innerHTML);
+    onInput(i) {
+      this.updateValue(i.target.innerHTML);
     },
     /**
      * When pasting, sanitize the content, extract text
@@ -387,30 +430,30 @@ const w = {
      * @param {Event} event the paste event
      * @fires Event paste the original paste event
      */
-    onPaste(e) {
+    onPaste(i) {
       if (!this.canEdit)
         return;
-      e.preventDefault();
-      const t = e.clipboardData;
-      if (this.$emit("paste", e), t.files.length !== 0 || !Object.values(t.items).find((c) => c?.type.startsWith("text")))
+      i.preventDefault();
+      const t = i.clipboardData;
+      if (this.$emit("paste", i), t.files.length !== 0 || !Object.values(t.items).find((c) => c?.type.startsWith("text")))
         return;
-      const n = t.getData("text"), i = window.getSelection();
-      if (!i.rangeCount) {
+      const n = t.getData("text"), e = window.getSelection();
+      if (!e.rangeCount) {
         this.updateValue(n);
         return;
       }
-      const s = i.getRangeAt(0);
-      i.deleteFromDocument(), s.insertNode(document.createTextNode(n));
-      const r = document.createRange();
-      r.setStart(e.target, s.endOffset), r.collapse(!0), i.removeAllRanges(), i.addRange(r), this.updateValue(this.$refs.contenteditable.innerHTML);
+      const r = e.getRangeAt(0);
+      e.deleteFromDocument(), r.insertNode(document.createTextNode(n));
+      const s = document.createRange();
+      s.setStart(i.target, r.endOffset), s.collapse(!0), e.removeAllRanges(), e.addRange(s), this.updateValue(this.$refs.contenteditable.innerHTML);
     },
     /**
      * Update the value text from the provided html
      *
      * @param {string} htmlOrText the html content (or raw text with @mentions)
      */
-    updateValue(e) {
-      const t = this.parseContent(e);
+    updateValue(i) {
+      const t = this.parseContent(i);
       this.localValue = t, this.$emit("update:value", t);
     },
     /**
@@ -418,9 +461,9 @@ const w = {
      *
      * @param {string} value the message value
      */
-    updateContent(e) {
-      const t = this.renderContent(e);
-      this.$refs.contenteditable.innerHTML = t, this.localValue = e;
+    updateContent(i) {
+      const t = this.renderContent(i);
+      this.$refs.contenteditable.innerHTML = t, this.localValue = i;
     },
     /**
      * Because FF have a decade old bug preventing contenteditable=false
@@ -430,54 +473,102 @@ const w = {
      *
      * @param {Event} event the delete keydown event
      */
-    onDelete(e) {
+    onDelete(i) {
       if (!this.isFF || !window.getSelection || !this.canEdit)
         return;
-      const t = window.getSelection(), n = e.target;
+      const t = window.getSelection(), n = i.target;
       if (!t.isCollapsed || !t.rangeCount)
         return;
-      const i = t.getRangeAt(t.rangeCount - 1);
-      if (i.commonAncestorContainer.nodeType === 3 && i.startOffset > 0)
+      const e = t.getRangeAt(t.rangeCount - 1);
+      if (e.commonAncestorContainer.nodeType === 3 && e.startOffset > 0)
         return;
-      const s = document.createRange();
+      const r = document.createRange();
       if (t.anchorNode !== n)
-        s.selectNodeContents(n), s.setEndBefore(t.anchorNode);
+        r.selectNodeContents(n), r.setEndBefore(t.anchorNode);
       else if (t.anchorOffset > 0)
-        s.setEnd(n, t.anchorOffset);
+        r.setEnd(n, t.anchorOffset);
       else
         return;
-      s.setStart(n, s.endOffset - 1);
-      const r = s.cloneContents().lastChild;
-      r && r.contentEditable === "false" && (s.deleteContents(), e.preventDefault());
+      r.setStart(n, r.endOffset - 1);
+      const s = r.cloneContents().lastChild;
+      s && s.contentEditable === "false" && (r.deleteContents(), i.preventDefault());
     },
     /**
      * Enter key pressed. Submits if not multiline
      *
      * @param {Event} event the keydown event
      */
-    onEnter(e) {
-      this.multiline || this.isOverMaxlength || this.autocompleteTribute.isActive || this.emojiTribute.isActive || this.linkTribute.isActive || this.isComposing || (e.preventDefault(), e.stopPropagation(), this.$emit("submit", e));
+    onEnter(i) {
+      this.multiline || this.isOverMaxlength || this.tribute.isActive || this.isComposing || (i.preventDefault(), i.stopPropagation(), this.$emit("submit", i));
     },
     /**
      * Ctrl + Enter key pressed is used to submit
      *
      * @param {Event} event the keydown event
      */
-    onCtrlEnter(e) {
-      this.isOverMaxlength || this.$emit("submit", e);
+    onCtrlEnter(i) {
+      this.isOverMaxlength || this.$emit("submit", i);
+    },
+    onKeyUp(i) {
+      i.stopImmediatePropagation();
+    },
+    /**
+     * Get HTML element with Tribute.js container
+     * @return {HTMLElement}
+     */
+    getTributeContainer() {
+      return this.tribute.menu;
     },
     /**
-     * Debounce the autocomplete function
+     * 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(i) {
+      this.isAutocompleteOpen = i, i ? (this.getTributeContainer().setAttribute("class", this.tribute.current.collection.containerClass || "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 i = this.getTributeContainer();
+      i.id = this.tributeId, i.setAttribute("role", "listbox"), i.children[0].setAttribute("role", "presentation"), this.tributeStyleMutationObserver = new MutationObserver(([{ target: n }]) => {
+        n.style.display !== "none" && this.onTributeSelectedItemWillChange();
+      }).observe(i, {
+        attributes: !0,
+        attributeFilter: ["style"]
+      }), i.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
      */
-    debouncedAutoComplete: v(async function(e, t) {
-      this.autoComplete(e, t);
-    }, 100),
-    onKeyUp(e) {
-      e.stopImmediatePropagation();
+    setTributeFocusVisible(i) {
+      i ? this.getTributeContainer().classList.add("tribute-container--focus-visible") : this.getTributeContainer().classList.remove("tribute-container--focus-visible");
     }
   }
 };
-var j = function() {
+var R = function() {
   var t = this, n = t._self._c;
   return n("div", { staticClass: "rich-contenteditable" }, [n("div", t._g(t._b({ directives: [{ name: "tooltip", rawName: "v-tooltip", value: t.tooltipString, expression: "tooltipString" }], ref: "contenteditable", staticClass: "rich-contenteditable__input", class: {
     "rich-contenteditable__input--empty": t.isEmptyValue,
@@ -485,31 +576,39 @@ var j = function() {
     "rich-contenteditable__input--has-label": t.label,
     "rich-contenteditable__input--overflow": t.isOverMaxlength,
     "rich-contenteditable__input--disabled": t.disabled
-  }, attrs: { id: t.id, contenteditable: t.canEdit, "aria-labelledby": t.label ? t.labelId : void 0, "aria-placeholder": t.placeholder, "aria-multiline": "true", role: "textbox" }, on: { focus: t.moveCursorToEnd, input: t.onInput, compositionstart: function(i) {
+  }, attrs: { id: t.id, contenteditable: t.canEdit, "aria-labelledby": t.label ? t.labelId : void 0, "aria-placeholder": t.placeholder, "aria-multiline": "true", role: "textbox", "aria-haspopup": "listbox", "aria-autocomplete": "inline", "aria-controls": t.tributeId, "aria-expanded": t.isAutocompleteOpen ? "true" : "false", "aria-activedescendant": t.autocompleteActiveId }, on: { focus: t.moveCursorToEnd, input: t.onInput, compositionstart: function(e) {
     t.isComposing = !0;
-  }, compositionend: function(i) {
+  }, compositionend: function(e) {
     t.isComposing = !1;
-  }, keydown: [function(i) {
-    return !i.type.indexOf("key") && t._k(i.keyCode, "delete", [8, 46], i.key, ["Backspace", "Delete", "Del"]) ? null : t.onDelete.apply(null, arguments);
-  }, function(i) {
-    return !i.type.indexOf("key") && t._k(i.keyCode, "enter", 13, i.key, "Enter") || i.ctrlKey || i.shiftKey || i.altKey || i.metaKey ? null : t.onEnter.apply(null, arguments);
-  }, function(i) {
-    return !i.type.indexOf("key") && t._k(i.keyCode, "enter", 13, i.key, "Enter") || !i.ctrlKey || i.shiftKey || i.altKey || i.metaKey ? null : (i.stopPropagation(), i.preventDefault(), t.onCtrlEnter.apply(null, arguments));
-  }], paste: t.onPaste, "!keyup": function(i) {
-    return i.stopPropagation(), i.preventDefault(), t.onKeyUp.apply(null, arguments);
+  }, keydown: [function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "delete", [8, 46], e.key, ["Backspace", "Delete", "Del"]) ? null : t.onDelete.apply(null, arguments);
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "enter", 13, e.key, "Enter") || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey ? null : t.onEnter.apply(null, arguments);
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "enter", 13, e.key, "Enter") || !e.ctrlKey || e.shiftKey || e.altKey || e.metaKey ? null : (e.stopPropagation(), e.preventDefault(), t.onCtrlEnter.apply(null, arguments));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "up", 38, e.key, ["Up", "ArrowUp"]) || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey ? null : (e.stopPropagation(), t.onTributeArrowKeyDown.apply(null, arguments));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "down", 40, e.key, ["Down", "ArrowDown"]) || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey ? null : (e.stopPropagation(), t.onTributeArrowKeyDown.apply(null, arguments));
+  }], paste: t.onPaste, "!keyup": function(e) {
+    return e.stopPropagation(), e.preventDefault(), t.onKeyUp.apply(null, arguments);
+  }, "tribute-active-true": function(e) {
+    return t.onTributeActive(!0);
+  }, "tribute-active-false": function(e) {
+    return t.onTributeActive(!1);
   } } }, "div", t.$attrs, !1), t.listeners)), t.label ? n("div", { staticClass: "rich-contenteditable__label", attrs: { id: t.labelId } }, [t._v(" " + t._s(t.label) + " ")]) : t._e()]);
-}, O = [], N = /* @__PURE__ */ u(
-  w,
-  j,
-  O,
+}, K = [], M = /* @__PURE__ */ u(
+  D,
+  R,
+  K,
   !1,
   null,
-  "eb9c34f9",
+  "04a9f8cd",
   null,
   null
 );
-const ct = N.exports;
+const pt = M.exports;
 export {
-  R as N,
-  ct as a
+  E as N,
+  pt as a
 };