@nextcloud/vue/dist/Components/NcRichContenteditable.mjs

Nextcloud vue components

import "../assets/index57.css";
import { r as c } from "../chunks/index-9c621303.mjs";
import { N as ut } from "../chunks/index-9c621303.mjs";
import { generateUrl as p } from "@nextcloud/router";
import { n as u } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
import { t as a } from "../chunks/l10n-9a5a6afc.mjs";
import "../Directives/Tooltip.mjs";
import { emojiAddRecent as m, emojiSearch as d } from "../Functions/emoji.mjs";
import { n as h, j as f } from "../chunks/referencePickerModal-2b16b319.mjs";
import "@nextcloud/axios";
import "unist-util-visit";
import "unist-builder";
import "unified";
import "remark-parse";
import "remark-breaks";
import "remark-rehype";
import "rehype-react";
import "rehype-external-links";
import "./NcEmptyContent.mjs";
import "./NcSelect.mjs";
import "vue-material-design-icons/LinkVariant.vue";
import "./NcLoadingIcon.mjs";
import "./NcTextField.mjs";
import "vue-material-design-icons/DotsHorizontal.vue";
import "./NcButton.mjs";
import "./NcModal.mjs";
import "@nextcloud/event-bus";
import "vue-material-design-icons/ArrowLeft.vue";
import "vue-material-design-icons/Close.vue";
import r from "tributejs/dist/tribute.esm.js";
import g from "debounce";
import b from "string-length";
import { VTooltip as v } from "floating-vue";
const y = { name: "NcAutoCompleteResult", props: { title: { type: String, required: !0 }, 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;
}, haveStatus() {
  var t, e, i;
  return ((t = this.status) == null ? void 0 : t.icon) || ((e = this.status) == null ? void 0 : e.status) && ((i = this.status) == null ? void 0 : i.status) !== "offline";
} }, methods: { getAvatarUrl(t, e) {
  return p("/avatar/{user}/{size}", { user: t, size: e });
} } };
var _ = function() {
  var t = this, e = t._self._c;
  return e("div", { staticClass: "autocomplete-result" }, [e("div", { staticClass: "autocomplete-result__icon", class: [t.icon, `autocomplete-result__icon--${t.avatarUrl ? "with-avatar" : ""}`], style: t.avatarUrl ? { backgroundImage: `url(${t.avatarUrl})` } : null }, [t.haveStatus ? e("div", { staticClass: "autocomplete-result__status", class: [`autocomplete-result__status--${t.status && t.status.icon ? "icon" : t.status.status}`] }, [t._v(" " + t._s(t.status && t.status.icon || "") + " ")]) : t._e()]), e("span", { staticClass: "autocomplete-result__content" }, [e("span", { staticClass: "autocomplete-result__title", attrs: { title: t.title } }, [t._v(" " + t._s(t.title) + " ")]), t.subline ? e("span", { staticClass: "autocomplete-result__subline" }, [t._v(" " + t._s(t.subline) + " ")]) : t._e()])]);
}, C = [], k = u(y, _, C, !1, null, "25cf09d8", null, null);
const T = k.exports;
const x = { name: "NcRichContenteditable", directives: { tooltip: v }, mixins: [c], props: { value: { type: String, default: "", required: !0 }, placeholder: { type: String, default: a("Write a message …") }, autoComplete: { type: Function, default: () => [] }, menuContainer: { type: Element, default: () => document.body }, multiline: { type: Boolean, default: !1 }, contenteditable: { type: Boolean, default: !0 }, disabled: { type: Boolean, default: !1 }, maxlength: { type: Number, default: null }, emojiAutocomplete: { type: Boolean, default: !0 }, linkAutocomplete: { type: Boolean, default: !0 } }, emits: ["submit", "paste", "update:value"], data() {
  return { textSmiles: [], tribute: null, autocompleteOptions: { allowSpaces: !0, fillAttr: "id", lookup: (t) => `${t.id} ${t.title}`, menuContainer: this.menuContainer, menuItemTemplate: (t) => this.renderComponentHtml(t.original, T), noMatchTemplate: () => '<span class="hidden"></span>', selectTemplate: (t) => {
    var e;
    return this.genSelectTemplate((e = t == null ? void 0 : t.original) == null ? void 0 : e.id);
  }, values: this.debouncedAutoComplete }, emojiOptions: { trigger: ":", lookup: (t, e) => e, menuContainer: this.menuContainer, menuItemTemplate: (t) => this.textSmiles.includes(t.original) ? t.original : `<span class="tribute-container-emoji__item__emoji">${t.original.native}</span> :${t.original.short_name}`, noMatchTemplate: () => a("No emoji found"), selectTemplate: (t) => this.textSmiles.includes(t.original) ? t.original : (m(t.original), t.original.native), values: (t, e) => {
    const i = d(t);
    this.textSmiles.includes(":" + t) && i.unshift(":" + t), e(i);
  }, containerClass: "tribute-container-emoji", itemClass: "tribute-container-emoji__item" }, linkOptions: { trigger: "/", lookup: (t, e) => e, menuContainer: this.menuContainer, 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>`, noMatchTemplate: () => a("No link provider found"), selectTemplate: this.getLink, values: (t, e) => e(h(t)), containerClass: "tribute-container-link", itemClass: "tribute-container-link__item" }, localValue: this.value, isComposing: !1 };
}, computed: { isEmptyValue() {
  return !this.localValue || this.localValue && this.localValue.trim() === "";
}, isFF() {
  return !!navigator.userAgent.match(/firefox/i);
}, isOverMaxlength() {
  return this.isEmptyValue || !this.maxlength ? !1 : b(this.localValue) > this.maxlength;
}, tooltipString() {
  return this.isOverMaxlength ? { content: a("Message limit of {count} characters reached", { count: this.maxlength }), shown: !0, trigger: "manual" } : null;
}, canEdit() {
  return this.contenteditable && !this.disabled;
}, listeners() {
  const t = { ...this.$listeners };
  return delete t.paste, t;
} }, watch: { value() {
  const t = this.$refs.contenteditable.innerHTML;
  this.value.trim() !== this.parseContent(t).trim() && this.updateContent(this.value);
} }, 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 r(this.autocompleteOptions), this.autocompleteTribute.attach(this.$el), this.emojiAutocomplete && (this.emojiTribute = new r(this.emojiOptions), this.emojiTribute.attach(this.$el)), this.linkAutocomplete && (this.linkTribute = new r(this.linkOptions), this.linkTribute.attach(this.$el)), this.updateContent(this.value), this.$refs.contenteditable.contentEditable = this.canEdit;
}, beforeDestroy() {
  this.autocompleteTribute && this.autocompleteTribute.detach(this.$el), this.emojiTribute && this.emojiTribute.detach(this.$el), this.linkTribute && this.linkTribute.detach(this.$el);
}, methods: { focus() {
  this.$refs.contenteditable.focus();
}, getLink(t) {
  return f(t.original.id).then((e) => {
    const i = document.getElementById("tmp-link-result-node"), n = document.createTextNode(e);
    i.replaceWith(n), this.setCursorAfter(n), this.updateValue(this.$refs.contenteditable.innerHTML);
  }).catch((e) => {
    console.debug("Smart picker promise rejected:", e);
    const i = document.getElementById("tmp-link-result-node");
    this.setCursorAfter(i), i.remove();
  }), '<span id="tmp-link-result-node"></span>';
}, setCursorAfter(t) {
  const e = document.createRange();
  e.setEndAfter(t), e.collapse();
  const i = window.getSelection();
  i.removeAllRanges(), i.addRange(e);
}, onInput(t) {
  this.updateValue(t.target.innerHTML);
}, onPaste(t) {
  if (!this.canEdit)
    return;
  t.preventDefault();
  const e = t.clipboardData;
  if (this.$emit("paste", t), e.files.length !== 0 || !Object.values(e.items).find((l) => l == null ? void 0 : l.type.startsWith("text")))
    return;
  const i = e.getData("text"), n = window.getSelection();
  if (!n.rangeCount) {
    this.updateValue(i);
    return;
  }
  const o = n.getRangeAt(0);
  n.deleteFromDocument(), o.insertNode(document.createTextNode(i));
  const s = document.createRange();
  s.setStart(t.target, o.endOffset), s.collapse(!0), n.removeAllRanges(), n.addRange(s), this.updateValue(this.$refs.contenteditable.innerHTML);
}, updateValue(t) {
  const e = this.parseContent(t);
  this.localValue = e, this.$emit("update:value", e);
}, updateContent(t) {
  const e = this.renderContent(t);
  this.$refs.contenteditable.innerHTML = e, this.localValue = t;
}, onDelete(t) {
  if (!this.isFF || !window.getSelection || !this.canEdit)
    return;
  const e = window.getSelection(), i = t.target;
  if (!e.isCollapsed || !e.rangeCount)
    return;
  const n = e.getRangeAt(e.rangeCount - 1);
  if (n.commonAncestorContainer.nodeType === 3 && n.startOffset > 0)
    return;
  const o = document.createRange();
  if (e.anchorNode !== i)
    o.selectNodeContents(i), o.setEndBefore(e.anchorNode);
  else if (e.anchorOffset > 0)
    o.setEnd(i, e.anchorOffset);
  else
    return;
  o.setStart(i, o.endOffset - 1);
  const s = o.cloneContents().lastChild;
  s && s.contentEditable === "false" && (o.deleteContents(), t.preventDefault());
}, 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));
}, onCtrlEnter(t) {
  this.isOverMaxlength || this.$emit("submit", t);
}, debouncedAutoComplete: g(async function(t, e) {
  this.autoComplete(t, e);
}, 100), onKeyUp(t) {
  t.stopImmediatePropagation();
} } };
var S = function() {
  var t = this, e = t._self._c;
  return e("div", t._g({ 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--overflow": t.isOverMaxlength, "rich-contenteditable__input--disabled": t.disabled }, attrs: { contenteditable: t.canEdit, placeholder: t.placeholder, "aria-placeholder": t.placeholder, "aria-multiline": "true", role: "textbox" }, on: { input: t.onInput, compositionstart: function(i) {
    t.isComposing = !0;
  }, compositionend: function(i) {
    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);
  } } }, t.listeners));
}, A = [], $ = u(x, S, A, !1, null, "b7f5e546", null, null);
const at = $.exports;
export {
  T as NcAutoCompleteResult,
  ut as NcMentionBubble,
  at as default
};