@nextcloud/vue/dist/chunks/index-9c621303.mjs.map

Nextcloud vue components

{"version":3,"file":"index-9c621303.mjs","sources":["../../src/components/NcRichContenteditable/NcMentionBubble.vue","../../src/mixins/richEditor/index.js"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\n\n<template>\n\t<span :class=\"{'mention-bubble--primary': primary}\"\n\t\tclass=\"mention-bubble\"\n\t\tcontenteditable=\"false\">\n\t\t<span class=\"mention-bubble__wrapper\">\n\t\t\t<span class=\"mention-bubble__content\">\n\t\t\t\t<!-- Avatar or icon -->\n\t\t\t\t<span :class=\"[icon, `mention-bubble__icon--${avatarUrl ? 'with-avatar' : ''}`]\"\n\t\t\t\t\t:style=\"avatarUrl ? { backgroundImage: `url(${avatarUrl})` } : null\"\n\t\t\t\t\tclass=\"mention-bubble__icon\" />\n\n\t\t\t\t<!-- Title -->\n\t\t\t\t<span role=\"heading\" class=\"mention-bubble__title\" :title=\"title\" />\n\t\t\t</span>\n\n\t\t\t<!-- Selectable text for copy/paste -->\n\t\t\t<span role=\"none\" class=\"mention-bubble__select\">{{ mentionText }}</span>\n\t\t</span>\n\t</span>\n</template>\n\n<script>\nimport { generateUrl } from '@nextcloud/router'\n\nexport default {\n\tname: 'NcMentionBubble',\n\n\tprops: {\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\ticonUrl: {\n\t\t\ttype: [String, null],\n\t\t\tdefault: null,\n\t\t},\n\t\tsource: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\tprimary: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\tcomputed: {\n\t\tavatarUrl() {\n\t\t\tif (this.iconUrl) {\n\t\t\t\treturn this.iconUrl\n\t\t\t}\n\n\t\t\treturn this.id && this.source === 'users'\n\t\t\t\t? this.getAvatarUrl(this.id, 44)\n\t\t\t\t: null\n\t\t},\n\t\tmentionText() {\n\t\t\treturn !this.id.includes(' ') && !this.id.includes('/')\n\t\t\t\t? `@${this.id}`\n\t\t\t\t: `@\"${this.id}\"`\n\t\t},\n\t},\n\n\tmethods: {\n\t\tgetAvatarUrl(user, size) {\n\t\t\treturn generateUrl('/avatar/{user}/{size}', {\n\t\t\t\tuser,\n\t\t\t\tsize,\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$bubble-height: 20px;\n$bubble-max-width: 150px;\n$bubble-padding: 2px;\n$bubble-avatar-size: $bubble-height - 2 * $bubble-padding;\n\n.mention-bubble {\n\t&--primary &__content {\n\t\tcolor: var(--color-primary-element-text);\n\t\tbackground-color: var(--color-primary-element);\n\t}\n\n\t&__wrapper {\n\t\tmax-width: $bubble-max-width;\n\t\t// Align with text\n\t\theight: $bubble-height - $bubble-padding;\n\t\tvertical-align: text-bottom;\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t}\n\n\t&__content {\n\t\tdisplay: inline-flex;\n\t\toverflow: hidden;\n\t\talign-items: center;\n\t\tmax-width: 100%;\n\t\theight: $bubble-height ;\n\t\t-webkit-user-select: none;\n\t\tuser-select: none;\n\t\tpadding-right: $bubble-padding * 3;\n\t\tpadding-left: $bubble-padding;\n\t\tborder-radius: math.div($bubble-height, 2);\n\t\tbackground-color: var(--color-background-dark);\n\t}\n\n\t&__icon {\n\t\tposition: relative;\n\t\twidth: $bubble-avatar-size;\n\t\theight: $bubble-avatar-size;\n\t\tborder-radius: math.div($bubble-avatar-size, 2);\n\t\tbackground-color: var(--color-background-darker);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: $bubble-avatar-size - 2 * $bubble-padding;\n\n\t\t&--with-avatar {\n\t\t\tcolor: inherit;\n\t\t\tbackground-size: cover;\n\t\t}\n\t}\n\n\t&__title {\n\t\toverflow: hidden;\n\t\tmargin-left: $bubble-padding;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\t// Put title in ::before so it is not selectable\n\t\t&::before {\n\t\t\tcontent: attr(title);\n\t\t}\n\t}\n\n\t// Hide the mention id so it is selectable\n\t&__select {\n\t\tposition: absolute;\n\t\tz-index: -1;\n\t\tleft: -1000px;\n\t}\n}\n\n</style>\n","/**\n * @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @author John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\n\nimport NcMentionBubble from '../../components/NcRichContenteditable/NcMentionBubble.vue'\nimport Linkify from '../../utils/Linkify.js'\n\nimport escapeHtml from 'escape-html'\nimport stripTags from 'striptags'\nimport Vue from 'vue'\n\n// Beginning or whitespace. Non-capturing group\nconst MENTION_START = '(?:^|\\\\s)'\n// Anything that is not text or end-of-line. Non-capturing group\nconst MENTION_END = '(?:[^a-z]|$)'\nexport const USERID_REGEX = new RegExp(`${MENTION_START}(@[a-zA-Z0-9_.@\\\\-']+)(${MENTION_END})`, 'gi')\nexport const USERID_REGEX_WITH_SPACE = new RegExp(`${MENTION_START}(@&quot;[a-zA-Z0-9 _.@\\\\-']+&quot;)(${MENTION_END})`, 'gi')\n\nexport default {\n\tprops: {\n\t\tuserData: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\tmethods: {\n\t\t/**\n\t\t * Convert the value string to html for the inner content\n\t\t *\n\t\t * @param {string} value the content without html\n\t\t * @return {string} rendered html\n\t\t */\n\t\trenderContent(value) {\n\t\t\t// Sanitize the value prop\n\t\t\tconst sanitizedValue = escapeHtml(value)\n\n\t\t\t// Extract all the userIds\n\t\t\tconst splitValue = sanitizedValue.split(USERID_REGEX)\n\t\t\t\t.map(part => part.split(USERID_REGEX_WITH_SPACE)).flat()\n\n\t\t\t// Replace userIds by html\n\t\t\treturn splitValue\n\t\t\t\t.map(part => {\n\t\t\t\t\t// When splitting, the string is always putting the userIds\n\t\t\t\t\t// on the the uneven indexes. We only want to generate the mentions html\n\t\t\t\t\tif (!part.startsWith('@')) {\n\t\t\t\t\t\t// This part doesn't contain a mention, let's make sure links are parsed\n\t\t\t\t\t\treturn Linkify(part)\n\t\t\t\t\t}\n\n\t\t\t\t\t// Extracting the id, nuking the leading @ and all \"\n\t\t\t\t\tconst id = part.slice(1).replace(/&quot;/gi, '')\n\t\t\t\t\t// Compiling template and prepend with the space we removed during the split\n\t\t\t\t\treturn ' ' + this.genSelectTemplate(id)\n\t\t\t\t})\n\t\t\t\t.join('')\n\t\t\t\t.replace(/\\n/gmi, '<br>')\n\t\t\t\t.replace(/&amp;/gmi, '&')\n\t\t},\n\n\t\t/**\n\t\t * Convert the innerHtml content to a string with mentions as text\n\t\t *\n\t\t * @param {string} content the content without html\n\t\t * @return {string}\n\t\t */\n\t\tparseContent(content) {\n\t\t\tlet text = content.replace(/<br>/gmi, '\\n')\n\t\t\ttext = text.replace(/&nbsp;/gmi, ' ')\n\t\t\ttext = text.replace(/&amp;/gmi, '&')\n\n\t\t\t// Convert the mentions to text only\n\t\t\t// first we replace divs with new lines\n\t\t\ttext = text.replace(/<\\/div>/gmi, '\\n')\n\t\t\t// then we remove all leftover html\n\t\t\ttext = stripTags(text, '<div>')\n\t\t\ttext = stripTags(text)\n\n\t\t\treturn text\n\t\t},\n\n\t\t/**\n\t\t * Generate an autocompletion popup entry template\n\t\t *\n\t\t * @param {string} value the value to match against the userData\n\t\t * @return {string}\n\t\t */\n\t\tgenSelectTemplate(value) {\n\t\t\t// The value returned by this function will replace the trigger '@'\n\t\t\t// and the search text, so when there is no match we simply return\n\t\t\t// '@' and the text.\n\t\t\tif (typeof value === 'undefined') {\n\t\t\t\treturn `${this.autocompleteTribute.current.collection.trigger}${this.autocompleteTribute.current.mentionText}`\n\t\t\t}\n\n\t\t\tconst data = this.userData[value]\n\n\t\t\t// Fallback to @mention in case no data matches\n\t\t\tif (!data) {\n\t\t\t\t// return `@${value}`\n\t\t\t\treturn !value.includes(' ') && !value.includes('/')\n\t\t\t\t\t? `@${value}`\n\t\t\t\t\t: `@\"${value}\"`\n\t\t\t}\n\n\t\t\t// Return template and make sure we strip of new lines and tabs\n\t\t\treturn this.renderComponentHtml(data, NcMentionBubble).replace(/[\\n\\t]/gmi, '')\n\t\t},\n\n\t\t/**\n\t\t * Render a component and return its html content\n\t\t *\n\t\t * @param {object} propsData the props to pass to the component\n\t\t * @param {object} component the component to render\n\t\t * @return {string} the rendered html\n\t\t */\n\t\trenderComponentHtml(propsData, component) {\n\t\t\tconst View = Vue.extend(component)\n\t\t\tconst Item = new View({\n\t\t\t\tpropsData,\n\t\t\t})\n\n\t\t\t// Prepare mountpoint\n\t\t\tconst wrapper = document.createElement('div')\n\t\t\tconst mount = document.createElement('div')\n\t\t\twrapper.style.display = 'none'\n\t\t\twrapper.appendChild(mount)\n\t\t\tdocument.body.appendChild(wrapper)\n\n\t\t\t// Mount and get raw html\n\t\t\tItem.$mount(mount)\n\t\t\tconst renderedHtml = wrapper.innerHTML\n\n\t\t\t// Destroy\n\t\t\tItem.$destroy()\n\t\t\twrapper.remove()\n\n\t\t\treturn renderedHtml\n\t\t},\n\t},\n}\n"],"names":["_sfc_main","user","size","generateUrl","MENTION_START","MENTION_END","USERID_REGEX","USERID_REGEX_WITH_SPACE","richEditor","value","escapeHtml","part","Linkify","id","content","text","stripTags","data","NcMentionBubble","propsData","component","View","Vue","Item","wrapper","mount","renderedHtml"],"mappings":"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"}