@nextcloud/vue/dist/chunks/index-CC4ahXvG.cjs

Nextcloud vue components

require('../assets/NcMentionBubble-C6t8od-_.css');
"use strict";
const getAvatarUrl = require("./getAvatarUrl-6z9qRNH-.cjs");
;/* empty css                                                                           */
const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
const Linkify = require("./Linkify-yeOn5L6T.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("/") ? "@".concat(this.id) : '@"'.concat(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--".concat(_vm.avatarUrl ? "with-avatar" : "")], style: _vm.avatarUrl ? { backgroundImage: "url(".concat(_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,
  "a519576f"
);
const NcMentionBubble = __component__.exports;
const MENTION_START = /(?=[a-z0-9_\-@.'])\B/.source;
const MENTION_SIMPLE = /(@[a-z0-9_\-@.']+)/.source;
const MENTION_GUEST = /@"guest\/[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 = "(".concat(MENTION_GUEST, "|").concat(MENTION_PREFIXED, "|").concat(MENTION_WITH_SPACE, ")");
const USERID_REGEX = new RegExp("".concat(MENTION_START).concat(MENTION_SIMPLE), "gi");
const USERID_REGEX_WITH_SPACE = new RegExp("".concat(MENTION_START).concat(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 Linkify.Linkify(part);
        }
        const id = part.slice(1).replace(/"/gi, "");
        return this.genSelectTemplate(id);
      }).join("").replace(/\n/gmi, "<br>").replace(/&amp;/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(/>\s+</g, "><");
      text = text.replace(/<br>/gmi, "\n");
      text = text.replace(/&nbsp;/gmi, " ");
      text = text.replace(/&amp;/gmi, "&");
      text = text.replace(/<\/div>/gmi, "\n");
      text = stripTags__default.default(text, "<div>");
      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 "".concat(this.autocompleteTribute.current.collection.trigger).concat(this.autocompleteTribute.current.mentionText);
      }
      const data = this.userData[value];
      if (!data) {
        return [" ", "/", ":"].every((char) => !value.includes(char)) ? "@".concat(value) : '@"'.concat(value, '"');
      }
      return this.renderComponentHtml(data, NcMentionBubble).replace(/[\n\t]/gmi, "");
    },
    /**
     * 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;