@nextcloud/vue 8.6.1 → 8.7.0

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

@@ -0,0 +1,638 @@
+import '../assets/NcRichText-kDp48Nji.css';
+import '../assets/NcRichContenteditable-N1TxeACO.css';
+import { r as p, v as d, B as h, a } from "./_l10n-FmsZpnE4.mjs";
+import { generateUrl as b } from "@nextcloud/router";
+import { N as f } from "./NcUserStatusIcon-pRUzQidI.mjs";
+import { n as c } from "./_plugin-vue2_normalizer-u6G_3nkj.mjs";
+import { r as _ } from "./index-xnq0-IMW.mjs";
+import "../Directives/Tooltip.mjs";
+import { a as g, e as y } from "./emoji-tllD0Rvt.mjs";
+import "unist-util-visit";
+import "unist-builder";
+import "../Functions/registerReference.mjs";
+import "@vueuse/core";
+import { d as C, g as v } from "./referencePickerModal-gDBkGfNV.mjs";
+import "@nextcloud/axios";
+/* empty css                                                                     */
+import "../Components/NcLoadingIcon.mjs";
+import "./NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_2603be83_lang-rJ3UZLGm.mjs";
+import { G as l } from "./GenRandomId-VodkdWbp.mjs";
+import "unified";
+import "remark-parse";
+import "remark-gfm";
+import "remark-breaks";
+import "remark-rehype";
+import "rehype-react";
+import "rehype-external-links";
+import "../Components/NcEmptyContent.mjs";
+import "./NcSelect-b2H-YQsK.mjs";
+import "./NcTextField-NnW31cA4.mjs";
+import "../Components/NcButton.mjs";
+import "../Components/NcModal.mjs";
+import "@nextcloud/event-bus";
+import T from "tributejs/dist/tribute.esm.js";
+import A from "debounce";
+import k from "string-length";
+import { VTooltip as w } from "floating-vue";
+const S = {
+  name: "NcAutoCompleteResult",
+  components: {
+    NcUserStatusIcon: f
+  },
+  props: {
+    /**
+     * @deprecated Use `label` instead
+     */
+    title: {
+      type: String,
+      required: !1,
+      default: null
+    },
+    label: {
+      type: String,
+      required: !1,
+      default: null
+    },
+    subline: {
+      type: String,
+      default: null
+    },
+    id: {
+      type: String,
+      default: null
+    },
+    icon: {
+      type: String,
+      required: !0
+    },
+    iconUrl: {
+      type: String,
+      default: null
+    },
+    source: {
+      type: String,
+      required: !0
+    },
+    status: {
+      type: [Object, Array],
+      default: () => ({})
+    }
+  },
+  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(i, t) {
+      return b("/avatar/{user}/{size}", {
+        user: i,
+        size: t
+      });
+    }
+  }
+};
+var x = 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.labelWithFallback } }, [t._v(" " + t._s(t.labelWithFallback) + " ")]), t.subline ? n("span", { staticClass: "autocomplete-result__subline" }, [t._v(" " + t._s(t.subline) + " ")]) : t._e()])]);
+}, I = [], $ = /* @__PURE__ */ c(
+  S,
+  x,
+  I,
+  !1,
+  null,
+  "9cff39ed",
+  null,
+  null
+);
+const E = $.exports;
+p(h, d);
+const O = {
+  "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"
+}, D = ["d", "D", "p", "P", "s", "S", "x", "X", ")", "(", "|", "/"], o = [];
+D.forEach((i) => {
+  o.push(":" + i), o.push(":-" + i);
+});
+const R = {
+  name: "NcRichContenteditable",
+  directives: {
+    tooltip: w
+  },
+  mixins: [_],
+  inheritAttrs: !1,
+  props: {
+    /**
+     * The ID attribute of the content editable
+     */
+    id: {
+      type: String,
+      default: () => l(7)
+    },
+    /**
+     * Visual label of the contenteditable
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    value: {
+      type: String,
+      default: "",
+      required: !0
+    },
+    placeholder: {
+      type: String,
+      default: a("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: !1
+    },
+    /**
+     * Is the content editable ?
+     */
+    contenteditable: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Disable the editing and show specific disabled design
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Max allowed length
+     */
+    maxlength: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Enable or disable emoji autocompletion
+     */
+    emojiAutocomplete: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Enable or disable link autocompletion
+     */
+    linkAutocomplete: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: [
+    "submit",
+    "paste",
+    "update:value",
+    "smart-picker-submit"
+  ],
+  setup() {
+    const i = l(5);
+    return {
+      // 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,
+      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,
+      // Tribute autocomplete
+      isAutocompleteOpen: !1,
+      autocompleteActiveId: void 0,
+      isTributeIntegrationDone: !1
+    };
+  },
+  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() {
+      return this.isEmptyValue || !this.maxlength ? !1 : k(this.localValue) > this.maxlength;
+    },
+    /**
+     * Tooltip to show if characters count is over limit
+     *
+     * @return {string}
+     */
+    tooltipString() {
+      return this.isOverMaxlength ? {
+        content: a("Message limit of {count} characters reached", { count: this.maxlength }),
+        shown: !0,
+        trigger: "manual"
+      } : null;
+    },
+    /**
+     * Edit is only allowed when contenteditableis true and disabled is false
+     *
+     * @return {boolean}
+     */
+    canEdit() {
+      return this.contenteditable && !this.disabled;
+    },
+    /**
+     * Proxied native event handlers without custom event handlers
+     *
+     * @return {Record<string, Function>}
+     */
+    listeners() {
+      const i = { ...this.$listeners };
+      return delete i.paste, i;
+    },
+    /**
+     * Compute debounce function for the autocomplete function
+     */
+    debouncedAutoComplete() {
+      return A(async (i, t) => {
+        this.autoComplete(i, t);
+      }, 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
+     */
+    value() {
+      const i = this.$refs.contenteditable.innerHTML;
+      this.value.trim() !== this.parseContent(i).trim() && this.updateContent(this.value);
+    }
+  },
+  mounted() {
+    this.initializeTribute(), this.updateContent(this.value), this.$refs.contenteditable.contentEditable = this.canEdit;
+  },
+  beforeDestroy() {
+    this.tribute && this.tribute.detach(this.$refs.contenteditable), this.tributeStyleMutationObserver && this.tributeStyleMutationObserver.disconnect();
+  },
+  methods: {
+    /**
+     * Focus the richContenteditable
+     *
+     * @public
+     */
+    focus() {
+      this.$refs.contenteditable.focus();
+    },
+    initializeTribute() {
+      const i = (n) => `<div id="nc-rich-contenteditable-tribute-item-${l(5)}" class="${this.$style["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: `${this.$style["tribute-container"]} ${this.$style["tribute-container-autocomplete"]}`,
+        // Class added to each list item
+        itemClass: this.$style["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) => o.includes(n.original) ? n.original : i(`<span class="${this.$style["tribute-item__emoji"]}">${n.original.native}</span> :${n.original.short_name}`),
+        // Hide if no results
+        noMatchTemplate: () => a("No emoji found"),
+        // Display raw emoji along with its name
+        selectTemplate: (n) => o.includes(n.original) ? n.original : (g(n.original), n.original.native),
+        // Pass the search results as values
+        values: (n, e) => {
+          const r = y(n);
+          o.includes(":" + n) && r.unshift(":" + n), e(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 && 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="${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: () => a("No link provider found"),
+        selectTemplate: this.getLink,
+        // Pass the search results as values
+        values: (n, e) => e(C(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 T({ collection: t }), this.tribute.attach(this.$refs.contenteditable);
+    },
+    getLink(i) {
+      return v(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", 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) => {
+        console.debug("Smart picker promise rejected:", t);
+        const n = document.getElementById("tmp-smart-picker-result-node");
+        this.setCursorAfter(n), n.remove();
+      }), '<span id="tmp-smart-picker-result-node"></span>';
+    },
+    setCursorAfter(i) {
+      const t = document.createRange();
+      t.setEndAfter(i), t.collapse();
+      const n = window.getSelection();
+      n.removeAllRanges(), n.addRange(t);
+    },
+    moveCursorToEnd() {
+      if (!document.createRange)
+        return;
+      const i = document.createRange();
+      i.selectNodeContents(this.$refs.contenteditable), i.collapse(!1);
+      const t = window.getSelection();
+      t.removeAllRanges(), t.addRange(i);
+    },
+    /**
+     * Re-emit the input event to the parent
+     *
+     * @param {Event} event the input event
+     */
+    onInput(i) {
+      this.updateValue(i.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(i) {
+      if (!this.canEdit)
+        return;
+      i.preventDefault();
+      const t = i.clipboardData;
+      if (this.$emit("paste", i), t.files.length !== 0 || !Object.values(t.items).find((m) => m?.type.startsWith("text")))
+        return;
+      const n = t.getData("text"), e = window.getSelection();
+      if (!e.rangeCount) {
+        this.updateValue(n);
+        return;
+      }
+      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(i) {
+      const t = this.parseContent(i);
+      this.localValue = t, this.$emit("update:value", t);
+    },
+    /**
+     * Update content and local value
+     *
+     * @param {string} value the message value
+     */
+    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
+     * 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(i) {
+      if (!this.isFF || !window.getSelection || !this.canEdit)
+        return;
+      const t = window.getSelection(), n = i.target;
+      if (!t.isCollapsed || !t.rangeCount)
+        return;
+      const e = t.getRangeAt(t.rangeCount - 1);
+      if (e.commonAncestorContainer.nodeType === 3 && e.startOffset > 0)
+        return;
+      const r = document.createRange();
+      if (t.anchorNode !== n)
+        r.selectNodeContents(n), r.setEndBefore(t.anchorNode);
+      else if (t.anchorOffset > 0)
+        r.setEnd(n, t.anchorOffset);
+      else
+        return;
+      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(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(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;
+    },
+    /**
+     * 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 || 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 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
+     */
+    setTributeFocusVisible(i) {
+      i ? this.getTributeContainer().classList.add(this.$style["tribute-container--focus-visible"]) : this.getTributeContainer().classList.remove(this.$style["tribute-container--focus-visible"]);
+    }
+  }
+};
+var K = 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,
+    "rich-contenteditable__input--multiline": t.multiline,
+    "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", "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(e) {
+    t.isComposing = !1;
+  }, 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()]);
+}, M = [];
+const u = {
+  $style: O
+};
+function N(i) {
+  for (var t in u)
+    this[t] = u[t];
+}
+var V = /* @__PURE__ */ c(
+  R,
+  K,
+  M,
+  !1,
+  N,
+  "0c65f921",
+  null,
+  null
+);
+const gt = V.exports;
+export {
+  E as N,
+  gt as a
+};