@nextcloud/vue 9.0.0-alpha.2 → 9.0.0-alpha.3

package/dist/chunks/NcRichContenteditable-P06ORHyg.mjs

@@ -0,0 +1,784 @@
+import '../assets/NcRichText-Cc65tYYs.css';
+import '../assets/NcRichContenteditable-C9Sikuur.css';
+import { r as register, v as t31, B as t28, a as t } from "./_l10n-ipRV_dfs.mjs";
+import { g as getAvatarUrl } from "./getAvatarUrl-BBvqBOJD.mjs";
+import { N as NcUserStatusIcon } from "./NcUserStatusIcon-DXxHWiO9.mjs";
+import { resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, toDisplayString, createBlock, createCommentVNode, resolveDirective, withDirectives, mergeProps, withKeys, withModifiers } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { r as richEditor } from "./index-5AsHlmYO.mjs";
+import "../Directives/Tooltip.mjs";
+import { a as emojiAddRecent, e as emojiSearch } from "./emoji-BjUFGMrw.mjs";
+import "@vueuse/core";
+import { d as searchProvider, g as getLinkWithPicker } from "./referencePickerModal-Tr-vmVPW.mjs";
+import "./autolink-CuPhRJIL.mjs";
+import "./index-CtoB4eIp.mjs";
+import "./NcButton-B27fpd1m.mjs";
+import "@nextcloud/axios";
+import "@nextcloud/router";
+/* empty css                                                                     */
+import "./NcLoadingIcon-DwbO7gAy.mjs";
+import "./NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_9bdeea42_lang-C9ptCbXx.mjs";
+import { G as GenRandomId } from "./GenRandomId-CXkjMlAT.mjs";
+import "unist-builder";
+import "unist-util-visit";
+import "unified";
+import "remark-parse";
+import "remark-gfm";
+import "remark-breaks";
+import "remark-rehype";
+import "rehype-react";
+import "rehype-external-links";
+import "./NcEmptyContent-CdgacgQe.mjs";
+import "./NcSelect-Dt3JJc9b.mjs";
+import "./NcTextField-5CbWAUlw.mjs";
+import "../Components/NcModal.mjs";
+import "@nextcloud/event-bus";
+import Tribute from "tributejs/dist/tribute.esm.js";
+import debounce from "debounce";
+import stringLength from "string-length";
+import { VTooltip } from "floating-vue";
+const _sfc_main$1 = {
+  name: "NcAutoCompleteResult",
+  components: {
+    NcUserStatusIcon
+  },
+  props: {
+    /**
+     * @deprecated Use `label` instead
+     */
+    title: {
+      type: String,
+      required: false,
+      default: null
+    },
+    label: {
+      type: String,
+      required: false,
+      default: null
+    },
+    subline: {
+      type: String,
+      default: null
+    },
+    id: {
+      type: String,
+      default: null
+    },
+    icon: {
+      type: String,
+      required: true
+    },
+    iconUrl: {
+      type: String,
+      default: null
+    },
+    source: {
+      type: String,
+      required: true
+    },
+    status: {
+      type: [Object, Array],
+      default: () => ({})
+    }
+  },
+  computed: {
+    avatarUrl() {
+      if (this.iconUrl) {
+        return this.iconUrl;
+      }
+      return this.id && this.source === "users" ? this.getAvatarUrl(this.id, 44) : null;
+    },
+    // For backwards compatibility
+    labelWithFallback() {
+      return this.label || this.title;
+    }
+  },
+  methods: {
+    getAvatarUrl
+  }
+};
+const _hoisted_1$1 = { class: "autocomplete-result" };
+const _hoisted_2$1 = {
+  key: 0,
+  class: "autocomplete-result__status autocomplete-result__status--icon"
+};
+const _hoisted_3 = { class: "autocomplete-result__content" };
+const _hoisted_4 = ["title"];
+const _hoisted_5 = {
+  key: 0,
+  class: "autocomplete-result__subline"
+};
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcUserStatusIcon = resolveComponent("NcUserStatusIcon");
+  return openBlock(), createElementBlock("div", _hoisted_1$1, [
+    createElementVNode("div", {
+      class: normalizeClass([[$props.icon, `autocomplete-result__icon--${$options.avatarUrl ? "with-avatar" : ""}`], "autocomplete-result__icon"]),
+      style: normalizeStyle($options.avatarUrl ? { backgroundImage: `url(${$options.avatarUrl})` } : null)
+    }, [
+      $props.status.icon ? (openBlock(), createElementBlock("span", _hoisted_2$1, toDisplayString($props.status && $props.status.icon || ""), 1)) : $props.status.status && $props.status.status !== "offline" ? (openBlock(), createBlock(_component_NcUserStatusIcon, {
+        key: 1,
+        class: "autocomplete-result__status",
+        status: $props.status.status
+      }, null, 8, ["status"])) : createCommentVNode("", true)
+    ], 6),
+    createElementVNode("span", _hoisted_3, [
+      createElementVNode("span", {
+        class: "autocomplete-result__title",
+        title: $options.labelWithFallback
+      }, toDisplayString($options.labelWithFallback), 9, _hoisted_4),
+      $props.subline ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString($props.subline), 1)) : createCommentVNode("", true)
+    ])
+  ]);
+}
+const NcAutoCompleteResult = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-41703e53"]]);
+register(t28, t31);
+const style1 = {
+  "material-design-icon": "_material-design-icon_pq0s6_26",
+  "tribute-container": "_tribute-container_pq0s6_34",
+  "tribute-container__item": "_tribute-container__item_pq0s6_46",
+  "tribute-container--focus-visible": "_tribute-container--focus-visible_pq0s6_63",
+  "tribute-container-autocomplete": "_tribute-container-autocomplete_pq0s6_67",
+  "tribute-container-emoji": "_tribute-container-emoji_pq0s6_73",
+  "tribute-container-link": "_tribute-container-link_pq0s6_74",
+  "tribute-item": "_tribute-item_pq0s6_79",
+  "tribute-item__emoji": "_tribute-item__emoji_pq0s6_85",
+  "tribute-item__title": "_tribute-item__title_pq0s6_98",
+  "tribute-item__icon": "_tribute-item__icon_pq0s6_103"
+};
+const smilesCharacters = ["d", "D", "p", "P", "s", "S", "x", "X", ")", "(", "|", "/"];
+const textSmiles = [];
+smilesCharacters.forEach((char) => {
+  textSmiles.push(":" + char);
+  textSmiles.push(":-" + char);
+});
+const _sfc_main = {
+  name: "NcRichContenteditable",
+  directives: {
+    tooltip: VTooltip
+  },
+  mixins: [richEditor],
+  inheritAttrs: false,
+  props: {
+    /**
+     * The ID attribute of the content editable
+     */
+    id: {
+      type: String,
+      default: () => GenRandomId(7)
+    },
+    /**
+     * Visual label of the contenteditable
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    modelValue: {
+      type: String,
+      default: "",
+      required: true
+    },
+    placeholder: {
+      type: String,
+      default: t("Write a message …")
+    },
+    autoComplete: {
+      type: Function,
+      default: () => []
+    },
+    menuContainer: {
+      type: Element,
+      default: () => document.body
+    },
+    /**
+     * Make the contenteditable looks like a textarea or not.
+     * Default looks like a single-line input.
+     * This also handle the default enter/shift+enter behaviour.
+     * if multiline, enter = newline; otherwise enter = submit
+     * shift+enter always add a new line. ctrl+enter always submits
+     */
+    multiline: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Is the content editable ?
+     */
+    contenteditable: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Disable the editing and show specific disabled design
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Max allowed length
+     */
+    maxlength: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Enable or disable emoji autocompletion
+     */
+    emojiAutocomplete: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Enable or disable link autocompletion
+     */
+    linkAutocomplete: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * CSS class to apply to the root element.
+     */
+    class: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  },
+  emits: [
+    "submit",
+    "paste",
+    "update:modelValue",
+    "smart-picker-submit"
+  ],
+  setup() {
+    const uid = GenRandomId(5);
+    return {
+      // Constants
+      labelId: `nc-rich-contenteditable-${uid}-label`,
+      tributeId: `nc-rich-contenteditable-${uid}-tribute`,
+      /**
+       * Non-reactive property to store Tribute instance
+       *
+       * @type {import('tributejs').default | null}
+       */
+      tribute: null,
+      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.modelValue,
+      // Is in text composition session in IME
+      isComposing: false,
+      // Tribute autocomplete
+      isAutocompleteOpen: false,
+      autocompleteActiveId: void 0,
+      isTributeIntegrationDone: false
+    };
+  },
+  computed: {
+    /**
+     * Is the current trimmed value empty?
+     *
+     * @return {boolean}
+     */
+    isEmptyValue() {
+      return !this.localValue || this.localValue.trim() === "";
+    },
+    /**
+     * Is this Firefox? 🙄
+     *
+     * @return {boolean}
+     */
+    isFF() {
+      return !!navigator.userAgent.match(/firefox/i);
+    },
+    /**
+     * Is the current value over maxlength?
+     *
+     * @return {boolean}
+     */
+    isOverMaxlength() {
+      if (this.isEmptyValue || !this.maxlength) {
+        return false;
+      }
+      return stringLength(this.localValue) > this.maxlength;
+    },
+    /**
+     * Tooltip to show if characters count is over limit
+     *
+     * @return {string}
+     */
+    tooltipString() {
+      if (!this.isOverMaxlength) {
+        return null;
+      }
+      return {
+        content: t("Message limit of {count} characters reached", { count: this.maxlength }),
+        shown: true,
+        trigger: "manual"
+      };
+    },
+    /**
+     * Edit is only allowed when contenteditableis true and disabled is false
+     *
+     * @return {boolean}
+     */
+    canEdit() {
+      return this.contenteditable && !this.disabled;
+    },
+    /**
+     * Compute debounce function for the autocomplete function
+     */
+    debouncedAutoComplete() {
+      return debounce(async (search, callback) => {
+        this.autoComplete(search, callback);
+      }, 100);
+    }
+  },
+  watch: {
+    /**
+     * If the parent value change, we compare the plain text rendering
+     * If it's different, we render everything and update the main content
+     */
+    modelValue() {
+      const html = this.$refs.contenteditable.innerHTML;
+      if (this.modelValue.trim() !== this.parseContent(html).trim()) {
+        this.updateContent(this.modelValue);
+      }
+    }
+  },
+  mounted() {
+    this.initializeTribute();
+    this.updateContent(this.modelValue);
+    this.$refs.contenteditable.contentEditable = this.canEdit;
+  },
+  beforeUnmount() {
+    if (this.tribute) {
+      this.tribute.detach(this.$refs.contenteditable);
+    }
+    if (this.tributeStyleMutationObserver) {
+      this.tributeStyleMutationObserver.disconnect();
+    }
+  },
+  methods: {
+    /**
+     * Focus the richContenteditable
+     *
+     * @public
+     */
+    focus() {
+      this.$refs.contenteditable.focus();
+    },
+    initializeTribute() {
+      const renderMenuItem = (content) => `<div id="nc-rich-contenteditable-tribute-item-${GenRandomId(5)}" class="${this.$style["tribute-item"]}" role="option">${content}</div>`;
+      const tributesCollection = [];
+      tributesCollection.push({
+        fillAttr: "id",
+        // Search against id and label (display name) (fallback to title for v8.0.0..8.6.1 compatibility)
+        lookup: (result) => `${result.id} ${result.label ?? result.title}`,
+        requireLeadingSpace: true,
+        // Popup mention autocompletion templates
+        menuItemTemplate: (item) => renderMenuItem(this.renderComponentHtml(item.original, NcAutoCompleteResult)),
+        // Hide if no results
+        noMatchTemplate: () => '<span class="hidden"></span>',
+        // Inner display of mentions
+        selectTemplate: (item) => this.genSelectTemplate(item?.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"]
+      });
+      if (this.emojiAutocomplete) {
+        tributesCollection.push({
+          trigger: ":",
+          // Don't use the tribute search function at all
+          // We pass search results as values (see below)
+          lookup: (result, query) => query,
+          requireLeadingSpace: true,
+          // Popup mention autocompletion templates
+          menuItemTemplate: (item) => {
+            if (textSmiles.includes(item.original)) {
+              return item.original;
+            }
+            return renderMenuItem(`<span class="${this.$style["tribute-item__emoji"]}">${item.original.native}</span> :${item.original.short_name}`);
+          },
+          // Hide if no results
+          noMatchTemplate: () => t("No emoji found"),
+          // Display raw emoji along with its name
+          selectTemplate: (item) => {
+            if (textSmiles.includes(item.original)) {
+              return item.original;
+            }
+            emojiAddRecent(item.original);
+            return item.original.native;
+          },
+          // Pass the search results as values
+          values: (text, cb) => {
+            const emojiResults = emojiSearch(text);
+            if (textSmiles.includes(":" + text)) {
+              emojiResults.unshift(":" + text);
+            }
+            cb(emojiResults);
+          },
+          // 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"]
+        });
+      }
+      if (this.linkAutocomplete) {
+        tributesCollection.push({
+          trigger: "/",
+          // Don't use the tribute search function at all
+          // We pass search results as values (see below)
+          lookup: (result, query) => query,
+          requireLeadingSpace: true,
+          // Popup mention autocompletion templates
+          menuItemTemplate: (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>`),
+          // Hide if no results
+          noMatchTemplate: () => t("No link provider found"),
+          selectTemplate: this.getLink,
+          // Pass the search results as values
+          values: (text, cb) => cb(searchProvider(text)),
+          // 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 Tribute({
+        collection: tributesCollection,
+        // FIXME: tributejs doesn't support allowSpaces as a collection option, only as a global one
+        // Requires to fork a library to allow spaces only in the middle of mentions ('@' trigger)
+        allowSpaces: false,
+        // Where to inject the menu popup
+        menuContainer: this.menuContainer
+      });
+      this.tribute.attach(this.$refs.contenteditable);
+    },
+    getLink(item) {
+      getLinkWithPicker(item.original.id).then((result) => {
+        const tmpElem = document.getElementById("tmp-smart-picker-result-node");
+        const eventData = {
+          result,
+          insertText: true
+        };
+        this.$emit("smart-picker-submit", eventData);
+        if (eventData.insertText) {
+          const newElem = document.createTextNode(result);
+          tmpElem.replaceWith(newElem);
+          this.setCursorAfter(newElem);
+          this.updateValue(this.$refs.contenteditable.innerHTML);
+        } else {
+          tmpElem.remove();
+        }
+      }).catch((error) => {
+        console.debug("Smart picker promise rejected:", error);
+        const tmpElem = document.getElementById("tmp-smart-picker-result-node");
+        this.setCursorAfter(tmpElem);
+        tmpElem.remove();
+      });
+      return '<span id="tmp-smart-picker-result-node"></span>';
+    },
+    setCursorAfter(element) {
+      const range = document.createRange();
+      range.setEndAfter(element);
+      range.collapse();
+      const selection = window.getSelection();
+      selection.removeAllRanges();
+      selection.addRange(range);
+    },
+    moveCursorToEnd() {
+      if (!document.createRange) {
+        return;
+      }
+      const range = document.createRange();
+      range.selectNodeContents(this.$refs.contenteditable);
+      range.collapse(false);
+      const selection = window.getSelection();
+      selection.removeAllRanges();
+      selection.addRange(range);
+    },
+    /**
+     * Re-emit the input event to the parent
+     *
+     * @param {Event} event the input event
+     */
+    onInput(event) {
+      this.updateValue(event.target.innerHTML);
+    },
+    /**
+     * When pasting, sanitize the content, extract text
+     * and render it again
+     *
+     * @param {Event} event the paste event
+     * @fires Event paste the original paste event
+     */
+    onPaste(event) {
+      if (!this.canEdit) {
+        return;
+      }
+      event.preventDefault();
+      const clipboardData = event.clipboardData;
+      this.$emit("paste", event);
+      if (clipboardData.files.length !== 0 || !Object.values(clipboardData.items).find((item) => item?.type.startsWith("text"))) {
+        return;
+      }
+      const text = clipboardData.getData("text");
+      const selection = window.getSelection();
+      if (!selection.rangeCount) {
+        this.updateValue(text);
+        return;
+      }
+      const range = selection.getRangeAt(0);
+      selection.deleteFromDocument();
+      range.insertNode(document.createTextNode(text));
+      const newRange = document.createRange();
+      newRange.setStart(event.target, range.endOffset);
+      newRange.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(newRange);
+      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(htmlOrText) {
+      const text = this.parseContent(htmlOrText);
+      this.localValue = text;
+      this.$emit("update:modelValue", text);
+    },
+    /**
+     * Update content and local value
+     *
+     * @param {string} value the message value
+     */
+    updateContent(value) {
+      const renderedContent = this.renderContent(value);
+      this.$refs.contenteditable.innerHTML = renderedContent;
+      this.localValue = value;
+    },
+    /**
+     * Because FF have a decade old bug preventing contenteditable=false
+     * to properly be deleted on backspace, we have to hack 👀
+     * https://stackoverflow.com/a/59383394/3885878
+     * https://stackoverflow.com/a/30574622
+     *
+     * @param {Event} event the delete keydown event
+     */
+    onDelete(event) {
+      if (!this.isFF || !window.getSelection) {
+        return;
+      }
+      if (!this.canEdit) {
+        return;
+      }
+      const selection = window.getSelection();
+      const node = event.target;
+      if (!selection.isCollapsed || !selection.rangeCount) {
+        return;
+      }
+      const curRange = selection.getRangeAt(selection.rangeCount - 1);
+      if (curRange.commonAncestorContainer.nodeType === 3 && curRange.startOffset > 0) {
+        return;
+      }
+      const range = document.createRange();
+      if (selection.anchorNode !== node) {
+        range.selectNodeContents(node);
+        range.setEndBefore(selection.anchorNode);
+      } else if (selection.anchorOffset > 0) {
+        range.setEnd(node, selection.anchorOffset);
+      } else {
+        return;
+      }
+      range.setStart(node, range.endOffset - 1);
+      const previousNode = range.cloneContents().lastChild;
+      if (previousNode && previousNode.contentEditable === "false") {
+        range.deleteContents();
+        event.preventDefault();
+      }
+    },
+    /**
+     * Enter key pressed. Submits if not multiline
+     *
+     * @param {Event} event the keydown event
+     */
+    onEnter(event) {
+      if (this.multiline || this.isOverMaxlength || this.tribute.isActive || this.isComposing) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      this.$emit("submit", event);
+    },
+    /**
+     * Ctrl + Enter key pressed is used to submit
+     *
+     * @param {Event} event the keydown event
+     */
+    onCtrlEnter(event) {
+      if (this.isOverMaxlength) {
+        return;
+      }
+      this.$emit("submit", event);
+    },
+    onKeyUp(event) {
+      event.stopImmediatePropagation();
+    },
+    onKeyEsc(event) {
+      if (this.tribute && this.isAutocompleteOpen) {
+        event.stopImmediatePropagation();
+        this.tribute.hideMenu();
+      }
+    },
+    /**
+     * 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(isActive) {
+      this.isAutocompleteOpen = isActive;
+      if (isActive) {
+        this.getTributeContainer().setAttribute("class", this.tribute.current.collection.containerClass || this.$style["tribute-container"]);
+        this.setupTributeIntegration();
+      } else {
+        this.debouncedAutoComplete.clear();
+        this.autocompleteActiveId = void 0;
+        this.setTributeFocusVisible(false);
+      }
+    },
+    onTributeArrowKeyDown() {
+      if (!this.isAutocompleteOpen) {
+        return;
+      }
+      this.setTributeFocusVisible(true);
+      this.onTributeSelectedItemWillChange();
+    },
+    onTributeSelectedItemWillChange() {
+      requestAnimationFrame(() => {
+        this.autocompleteActiveId = this.getTributeSelectedItem()?.id;
+      });
+    },
+    setupTributeIntegration() {
+      if (this.isTributeIntegrationDone) {
+        return;
+      }
+      this.isTributeIntegrationDone = true;
+      const tributeContainer = this.getTributeContainer();
+      tributeContainer.id = this.tributeId;
+      tributeContainer.setAttribute("role", "listbox");
+      const ul = tributeContainer.children[0];
+      ul.setAttribute("role", "presentation");
+      this.tributeStyleMutationObserver = new MutationObserver(([{ target }]) => {
+        if (target.style.display !== "none") {
+          this.onTributeSelectedItemWillChange();
+        }
+      }).observe(tributeContainer, {
+        attributes: true,
+        attributeFilter: ["style"]
+      });
+      tributeContainer.addEventListener("mousemove", () => {
+        this.setTributeFocusVisible(false);
+        this.onTributeSelectedItemWillChange();
+      }, { passive: true });
+    },
+    /**
+     * 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(withFocusVisible) {
+      if (withFocusVisible) {
+        this.getTributeContainer().classList.add(this.$style["tribute-container--focus-visible"]);
+      } else {
+        this.getTributeContainer().classList.remove(this.$style["tribute-container--focus-visible"]);
+      }
+    }
+  }
+};
+const _hoisted_1 = ["id", "contenteditable", "aria-labelledby", "aria-placeholder", "aria-controls", "aria-expanded", "aria-activedescendant"];
+const _hoisted_2 = ["id"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _directive_tooltip = resolveDirective("tooltip");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["rich-contenteditable", _ctx.$props.class])
+  }, [
+    withDirectives(createElementVNode("div", mergeProps({
+      id: $props.id,
+      ref: "contenteditable",
+      class: [{
+        "rich-contenteditable__input--empty": $options.isEmptyValue,
+        "rich-contenteditable__input--multiline": $props.multiline,
+        "rich-contenteditable__input--has-label": $props.label,
+        "rich-contenteditable__input--overflow": $options.isOverMaxlength,
+        "rich-contenteditable__input--disabled": $props.disabled
+      }, "rich-contenteditable__input"],
+      contenteditable: $options.canEdit,
+      "aria-labelledby": $props.label ? $setup.labelId : void 0,
+      "aria-placeholder": $props.placeholder,
+      "aria-multiline": "true",
+      role: "textbox",
+      "aria-haspopup": "listbox",
+      "aria-autocomplete": "inline",
+      "aria-controls": $setup.tributeId,
+      "aria-expanded": $data.isAutocompleteOpen ? "true" : "false",
+      "aria-activedescendant": $data.autocompleteActiveId
+    }, _ctx.$attrs, {
+      onFocus: _cache[0] || (_cache[0] = (...args) => $options.moveCursorToEnd && $options.moveCursorToEnd(...args)),
+      onInput: _cache[1] || (_cache[1] = (...args) => $options.onInput && $options.onInput(...args)),
+      onCompositionstart: _cache[2] || (_cache[2] = ($event) => $data.isComposing = true),
+      onCompositionend: _cache[3] || (_cache[3] = ($event) => $data.isComposing = false),
+      onKeydown: [
+        _cache[4] || (_cache[4] = withKeys((...args) => $options.onDelete && $options.onDelete(...args), ["delete"])),
+        _cache[6] || (_cache[6] = withKeys(withModifiers((...args) => $options.onEnter && $options.onEnter(...args), ["exact"]), ["enter"])),
+        _cache[7] || (_cache[7] = withKeys(withModifiers((...args) => $options.onCtrlEnter && $options.onCtrlEnter(...args), ["ctrl", "exact", "stop", "prevent"]), ["enter"])),
+        _cache[10] || (_cache[10] = withKeys(withModifiers((...args) => $options.onTributeArrowKeyDown && $options.onTributeArrowKeyDown(...args), ["exact", "stop"]), ["up"])),
+        _cache[11] || (_cache[11] = withKeys(withModifiers((...args) => $options.onTributeArrowKeyDown && $options.onTributeArrowKeyDown(...args), ["exact", "stop"]), ["down"]))
+      ],
+      onKeydownCapture: _cache[5] || (_cache[5] = withKeys((...args) => $options.onKeyEsc && $options.onKeyEsc(...args), ["esc"])),
+      onPaste: _cache[8] || (_cache[8] = (...args) => $options.onPaste && $options.onPaste(...args)),
+      onKeyupCapture: _cache[9] || (_cache[9] = withModifiers((...args) => $options.onKeyUp && $options.onKeyUp(...args), ["stop", "prevent"])),
+      onTributeActiveTrue: _cache[12] || (_cache[12] = ($event) => $options.onTributeActive(true)),
+      onTributeActiveFalse: _cache[13] || (_cache[13] = ($event) => $options.onTributeActive(false))
+    }), null, 16, _hoisted_1), [
+      [_directive_tooltip, $options.tooltipString]
+    ]),
+    $props.label ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      id: $setup.labelId,
+      class: "rich-contenteditable__label"
+    }, toDisplayString($props.label), 9, _hoisted_2)) : createCommentVNode("", true)
+  ], 2);
+}
+const cssModules = {
+  "$style": style1
+};
+const NcRichContenteditable = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__cssModules", cssModules], ["__scopeId", "data-v-93e89ae3"]]);
+export {
+  NcAutoCompleteResult as N,
+  NcRichContenteditable as a
+};