require('../assets/NcMentionBubble-BL05HUeF.css'); "use strict"; const getAvatarUrl = require("./getAvatarUrl-6z9qRNH-.cjs"); ;/* empty css */ const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs"); const escapeHtml = require("escape-html"); const stripTags = require("striptags"); const Vue = require("vue"); const _interopDefault = (e) => e && e.__esModule ? e : { default: e }; const escapeHtml__default = /* @__PURE__ */ _interopDefault(escapeHtml); const stripTags__default = /* @__PURE__ */ _interopDefault(stripTags); const Vue__default = /* @__PURE__ */ _interopDefault(Vue); const _sfc_main = { name: "NcMentionBubble", props: { id: { type: String, required: true }, /** * @deprecated Use `label` instead */ title: { type: String, required: false, default: null }, label: { type: String, required: false, default: null }, icon: { type: String, required: true }, iconUrl: { type: [String, null], default: null }, source: { type: String, required: true }, primary: { type: Boolean, default: false } }, computed: { avatarUrl() { if (this.iconUrl) { return this.iconUrl; } return this.id && this.source === "users" ? this.getAvatarUrl(this.id, 44) : null; }, mentionText() { return !this.id.includes(" ") && !this.id.includes("/") ? `@${this.id}` : `@"${this.id}"`; }, // Fallback to title for compatibility labelWithFallback() { return this.label || this.title; } }, methods: { getAvatarUrl: getAvatarUrl.getAvatarUrl } }; var _sfc_render = function render() { var _vm = this, _c = _vm._self._c; return _c("span", { staticClass: "mention-bubble", class: { "mention-bubble--primary": _vm.primary }, attrs: { "contenteditable": "false" } }, [_c("span", { staticClass: "mention-bubble__wrapper" }, [_c("span", { staticClass: "mention-bubble__content" }, [_c("span", { staticClass: "mention-bubble__icon", class: [_vm.icon, `mention-bubble__icon--${_vm.avatarUrl ? "with-avatar" : ""}`], style: _vm.avatarUrl ? { backgroundImage: `url(${_vm.avatarUrl})` } : null }), _c("span", { staticClass: "mention-bubble__title", attrs: { "role": "heading", "title": _vm.labelWithFallback } })]), _c("span", { staticClass: "mention-bubble__select", attrs: { "role": "none" } }, [_vm._v(_vm._s(_vm.mentionText))])])]); }; var _sfc_staticRenderFns = []; var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent( _sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "6c8d0da9" ); const NcMentionBubble = __component__.exports; const MENTION_START = /(?=[a-z0-9_\-@.'])\B/.source; const MENTION_SIMPLE = /(@[a-z0-9_\-@.']+)/.source; const MENTION_GUEST = /@"(?:guest|email){1}\/[a-f0-9]+"/.source; const MENTION_PREFIXED = /@"(?:federated_)?(?:group|team|user){1}\/[a-z0-9_\-@.' /:]+"/.source; const MENTION_WITH_SPACE = /@"[a-z0-9_\-@.' ]+"/.source; const MENTION_COMPLEX = `(${MENTION_GUEST}|${MENTION_PREFIXED}|${MENTION_WITH_SPACE})`; const USERID_REGEX = new RegExp(`${MENTION_START}${MENTION_SIMPLE}`, "gi"); const USERID_REGEX_WITH_SPACE = new RegExp(`${MENTION_START}${MENTION_COMPLEX}`, "gi"); const richEditor = { props: { userData: { type: Object, default: () => ({}) } }, methods: { /** * Convert the value string to html for the inner content * * @param {string} value the content without html * @return {string} rendered html */ renderContent(value) { const sanitizedValue = escapeHtml__default.default(value); const splitValue = sanitizedValue.split(USERID_REGEX).map((part) => part.split(USERID_REGEX_WITH_SPACE)).flat(); return splitValue.map((part) => { if (!part.startsWith("@")) { return part; } const id = part.slice(1).replace(/"/gi, ""); return this.genSelectTemplate(id); }).join("").replace(/\n/gmi, "
").replace(/&/gmi, "&"); }, /** * Convert the innerHtml content to a string with mentions as text * * @param {string} content the content without html * @return {string} */ parseContent(content) { let text = content; text = text.replace(/
/gmi, "\n"); text = text.replace(/ /gmi, " "); text = text.replace(/&/gmi, "&"); text = text.replace(/<\/div>/gmi, "\n"); text = stripTags__default.default(text, "
"); text = stripTags__default.default(text); return text; }, /** * Generate an autocompletion popup entry template * * @param {string} value the value to match against the userData * @return {string} */ genSelectTemplate(value) { if (typeof value === "undefined") { return `${this.autocompleteTribute.current.collection.trigger}${this.autocompleteTribute.current.mentionText}`; } const data = this.userData[value]; if (!data) { return [" ", "/", ":"].every((char) => !value.includes(char)) ? `@${value}` : `@"${value}"`; } return this.renderComponentHtml(data, NcMentionBubble).replace(/[\n\t]/gmi, "").replace(/>\s+<"); }, /** * Render a component and return its html content * * @param {object} propsData the props to pass to the component * @param {object} component the component to render * @return {string} the rendered html */ renderComponentHtml(propsData, component) { const View = Vue__default.default.extend(component); const Item = new View({ propsData }); const wrapper = document.createElement("div"); const mount = document.createElement("div"); wrapper.style.display = "none"; wrapper.appendChild(mount); document.body.appendChild(wrapper); Item.$mount(mount); const renderedHtml = wrapper.innerHTML; Item.$destroy(); wrapper.remove(); return renderedHtml; } } }; exports.NcMentionBubble = NcMentionBubble; exports.USERID_REGEX = USERID_REGEX; exports.USERID_REGEX_WITH_SPACE = USERID_REGEX_WITH_SPACE; exports.richEditor = richEditor;