@nextcloud/vue 9.0.0-alpha.0 → 9.0.0-alpha.1

package/dist/chunks/{NcRichContenteditable-0x4AmYZf.cjs → NcRichContenteditable-L8aEJNGb.cjs}

@@ -1,10 +1,10 @@
-var O = require("../assets/NcRichContenteditable-nUZdQSMZ.css");
-const a = require("./_l10n-wK0o0jNS.cjs"), b = require("@nextcloud/router"), _ = require("./NcUserStatusIcon-swCHU0tl.cjs"), i = require("vue"), f = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), C = require("./index-NP8hZQhr.cjs");
+var O = require("../assets/NcRichContenteditable--bkjerM1.css");
+const u = require("./_l10n-Fl7RzbcZ.cjs"), b = require("@nextcloud/router"), _ = require("./NcUserStatusIcon-b0xt-g7X.cjs"), i = require("vue"), f = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), C = require("./index-6mzaBTml.cjs");
 require("../Directives/Tooltip.cjs");
-const m = require("./emoji-mJIuLpNR.cjs"), h = require("./referencePickerModal-gCkuVbeM.cjs");
+const m = require("./emoji-NrWIXNZ4.cjs"), h = require("./referencePickerModal-JVKOIVTG.cjs");
 require("@nextcloud/axios");
 require("./NcLoadingIcon-Fwid-wWE.cjs");
-require("./NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_c3135eb8_lang-RYt-H2PA.cjs");
+require("./NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_48c28b96_lang-togIrFzp.cjs");
 const p = require("./GenRandomId-ULxaMkkr.cjs");
 require("unist-util-visit");
 require("unist-builder");
@@ -16,9 +16,9 @@ require("remark-rehype");
 require("rehype-react");
 require("rehype-external-links");
 require("./NcEmptyContent-M3ClqFZe.cjs");
-require("./NcSelect-9cM-OGdn.cjs");
-require("./NcTextField-bz_keSKF.cjs");
-require("./NcButton-Uxh-oARg.cjs");
+require("./NcSelect-P2FpWJBr.cjs");
+require("./NcTextField-zi19KqEm.cjs");
+require("./NcButton-7UKtzkX5.cjs");
 require("../Components/NcModal.cjs");
 require("@nextcloud/event-bus");
 const y = require("tributejs/dist/tribute.esm.js"), v = require("debounce"), k = require("string-length"), S = require("floating-vue"), d = (e) => e && e.__esModule ? e : { default: e }, c = /* @__PURE__ */ d(y), T = /* @__PURE__ */ d(v), E = /* @__PURE__ */ d(k), q = {
@@ -77,13 +77,13 @@ const y = require("tributejs/dist/tribute.esm.js"), v = require("debounce"), k =
   class: "autocomplete-result__subline"
 };
 function R(e, t, n, l, o, r) {
-  const u = i.resolveComponent("NcUserStatusIcon");
+  const a = i.resolveComponent("NcUserStatusIcon");
   return i.openBlock(), i.createElementBlock("div", x, [
     i.createElementVNode("div", {
-      class: i.normalizeClass([[n.icon, `autocomplete-result__icon--${r.avatarUrl ? "with-avatar" : ""}`], "autocomplete-result__icon"]),
-      style: i.normalizeStyle(r.avatarUrl ? { backgroundImage: `url(${r.avatarUrl})` } : null)
+      class: i.normalizeClass([[n.icon, "autocomplete-result__icon--".concat(r.avatarUrl ? "with-avatar" : "")], "autocomplete-result__icon"]),
+      style: i.normalizeStyle(r.avatarUrl ? { backgroundImage: "url(".concat(r.avatarUrl, ")") } : null)
     }, [
-      n.status.icon ? (i.openBlock(), i.createElementBlock("span", V, i.toDisplayString(n.status && n.status.icon || ""), 1)) : n.status.status && n.status.status !== "offline" ? (i.openBlock(), i.createBlock(u, {
+      n.status.icon ? (i.openBlock(), i.createElementBlock("span", V, i.toDisplayString(n.status && n.status.icon || ""), 1)) : n.status.status && n.status.status !== "offline" ? (i.openBlock(), i.createBlock(a, {
         key: 1,
         class: "autocomplete-result__status",
         status: n.status.status
@@ -99,7 +99,7 @@ function R(e, t, n, l, o, r) {
   ]);
 }
 const g = /* @__PURE__ */ f._export_sfc(q, [["render", R], ["__scopeId", "data-v-b6d7cce6"]]);
-a.register(a.t27, a.t30);
+u.register(u.t27, u.t30);
 const I = {
   name: "NcRichContenteditable",
   directives: {
@@ -129,7 +129,7 @@ const I = {
     },
     placeholder: {
       type: String,
-      default: a.t("Write a message …")
+      default: u.t("Write a message …")
     },
     autoComplete: {
       type: Function,
@@ -201,7 +201,7 @@ const I = {
   ],
   data() {
     return {
-      labelId: `rich-label-${p.GenRandomId(5)}`,
+      labelId: "rich-label-".concat(p.GenRandomId(5)),
       textSmiles: [],
       tribute: null,
       autocompleteOptions: {
@@ -209,7 +209,7 @@ const I = {
         allowSpaces: !0,
         fillAttr: "id",
         // Search against id and title (display name)
-        lookup: (e) => `${e.id} ${e.title}`,
+        lookup: (e) => "".concat(e.id, " ").concat(e.title),
         // Where to inject the menu popup
         menuContainer: this.menuContainer,
         // Popup mention autocompletion templates
@@ -217,7 +217,10 @@ const I = {
         // Hide if no results
         noMatchTemplate: () => '<span class="hidden"></span>',
         // Inner display of mentions
-        selectTemplate: (e) => this.genSelectTemplate(e?.original?.id),
+        selectTemplate: (e) => {
+          var t;
+          return this.genSelectTemplate((t = e == null ? void 0 : e.original) == null ? void 0 : t.id);
+        },
         // Autocompletion results
         values: this.debouncedAutoComplete
       },
@@ -229,9 +232,9 @@ const I = {
         // Where to inject the menu popup
         menuContainer: this.menuContainer,
         // Popup mention autocompletion templates
-        menuItemTemplate: (e) => this.textSmiles.includes(e.original) ? e.original : `<span class="tribute-container-emoji__item__emoji">${e.original.native}</span> :${e.original.short_name}`,
+        menuItemTemplate: (e) => this.textSmiles.includes(e.original) ? e.original : '<span class="tribute-container-emoji__item__emoji">'.concat(e.original.native, "</span> :").concat(e.original.short_name),
         // Hide if no results
-        noMatchTemplate: () => a.t("No emoji found"),
+        noMatchTemplate: () => u.t("No emoji found"),
         // Display raw emoji along with its name
         selectTemplate: (e) => this.textSmiles.includes(e.original) ? e.original : (m.emojiAddRecent(e.original), e.original.native),
         // Pass the search results as values
@@ -252,9 +255,9 @@ const I = {
         // Where to inject the menu popup
         menuContainer: this.menuContainer,
         // Popup mention autocompletion templates
-        menuItemTemplate: (e) => `<img class="tribute-container-link__item__icon" src="${e.original.icon_url}"> <span class="tribute-container-link__item__title">${e.original.title}</span>`,
+        menuItemTemplate: (e) => '<img class="tribute-container-link__item__icon" src="'.concat(e.original.icon_url, '"> <span class="tribute-container-link__item__title">').concat(e.original.title, "</span>"),
         // Hide if no results
-        noMatchTemplate: () => a.t("No link provider found"),
+        noMatchTemplate: () => u.t("No link provider found"),
         selectTemplate: this.getLink,
         // Pass the search results as values
         values: (e, t) => t(h.searchProvider(e)),
@@ -303,7 +306,7 @@ const I = {
      */
     tooltipString() {
       return this.isOverMaxlength ? {
-        content: a.t("Message limit of {count} characters reached", { count: this.maxlength }),
+        content: u.t("Message limit of {count} characters reached", { count: this.maxlength }),
         shown: !0,
         trigger: "manual"
       } : null;
@@ -396,7 +399,7 @@ const I = {
         return;
       e.preventDefault();
       const t = e.clipboardData;
-      if (this.$emit("paste", e), t.files.length !== 0 || !Object.values(t.items).find((u) => u?.type.startsWith("text")))
+      if (this.$emit("paste", e), t.files.length !== 0 || !Object.values(t.items).find((a) => a == null ? void 0 : a.type.startsWith("text")))
         return;
       const n = t.getData("text"), l = window.getSelection();
       if (!l.rangeCount) {
@@ -482,7 +485,7 @@ const I = {
   }
 }, j = ["id", "contenteditable", "aria-labelledby", "aria-placeholder"], B = ["id"];
 function M(e, t, n, l, o, r) {
-  const u = i.resolveDirective("tooltip");
+  const a = i.resolveDirective("tooltip");
   return i.openBlock(), i.createElementBlock("div", {
     class: i.normalizeClass(["rich-contenteditable", e.$props.class])
   }, [
@@ -514,7 +517,7 @@ function M(e, t, n, l, o, r) {
       onPaste: t[7] || (t[7] = (...s) => r.onPaste && r.onPaste(...s)),
       onKeyupCapture: t[8] || (t[8] = i.withModifiers((...s) => r.onKeyUp && r.onKeyUp(...s), ["stop", "prevent"]))
     }), null, 16, j), [
-      [u, r.tooltipString]
+      [a, r.tooltipString]
     ]),
     n.label ? (i.openBlock(), i.createElementBlock("div", {
       key: 0,
@@ -523,6 +526,6 @@ function M(e, t, n, l, o, r) {
     }, i.toDisplayString(n.label), 9, B)) : i.createCommentVNode("", !0)
   ], 2);
 }
-const D = /* @__PURE__ */ f._export_sfc(I, [["render", M], ["__scopeId", "data-v-cc6795a5"]]);
+const D = /* @__PURE__ */ f._export_sfc(I, [["render", M], ["__scopeId", "data-v-96d03e3d"]]);
 exports.NcAutoCompleteResult = g;
 exports.NcRichContenteditable = D;

package/dist/chunks/{NcRichContenteditable-rSquEMs2.mjs.map → NcRichContenteditable-L8aEJNGb.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcRichContenteditable-rSquEMs2.mjs","sources":["../../src/components/NcRichContenteditable/NcAutoCompleteResult.vue","../../src/components/NcRichContenteditable/NcRichContenteditable.vue"],"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<div class=\"autocomplete-result\">\n\t\t<!-- Avatar or icon -->\n\t\t<div :class=\"[icon, `autocomplete-result__icon--${avatarUrl ? 'with-avatar' : ''}`]\"\n\t\t\t:style=\"avatarUrl ? { backgroundImage: `url(${avatarUrl})` } : null \"\n\t\t\tclass=\"autocomplete-result__icon\">\n\t\t\t<span v-if=\"status.icon\"\n\t\t\t\tclass=\"autocomplete-result__status autocomplete-result__status--icon\">\n\t\t\t\t{{ status && status.icon || '' }}\n\t\t\t</span>\n\t\t\t<NcUserStatusIcon v-else-if=\"status.status && status.status !== 'offline'\"\n\t\t\t\tclass=\"autocomplete-result__status\"\n\t\t\t\t:status=\"status.status\" />\n\t\t</div>\n\n\t\t<!-- Title and subline -->\n\t\t<span class=\"autocomplete-result__content\">\n\t\t\t<span class=\"autocomplete-result__title\" :title=\"title\">\n\t\t\t\t{{ title }}\n\t\t\t</span>\n\t\t\t<span v-if=\"subline\" class=\"autocomplete-result__subline\">\n\t\t\t\t{{ subline }}\n\t\t\t</span>\n\t\t</span>\n\t</div>\n</template>\n\n<script>\nimport { generateUrl } from '@nextcloud/router'\n\nimport NcUserStatusIcon from '../NcUserStatusIcon/index.js'\n\nexport default {\n\tname: 'NcAutoCompleteResult',\n\n\tcomponents: {\n\t\tNcUserStatusIcon,\n\t},\n\n\tprops: {\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\tsubline: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\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,\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\tstatus: {\n\t\t\ttype: [Object, Array],\n\t\t\tdefault: () => ({}),\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},\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$autocomplete-padding: 10px;\n\n.autocomplete-result {\n\tdisplay: flex;\n\theight: $clickable-area;\n\tpadding: $autocomplete-padding;\n\n\t.highlight & {\n\t\tcolor: var(--color-primary-element-light-text);\n\t\tbackground: var(--color-primary-element-light);\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t&__icon {\n\t\tposition: relative;\n\t\tflex: 0 0 $clickable-area;\n\t\twidth: $clickable-area;\n\t\tmin-width: $clickable-area;\n\t\theight: $clickable-area;\n\t\tborder-radius: $clickable-area;\n\t\tbackground-color: var(--color-background-darker);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: $clickable-area - 2 * $autocomplete-padding;\n\t\t&--with-avatar {\n\t\t\tcolor: inherit;\n\t\t\tbackground-size: cover;\n\t\t}\n\t}\n\n\t&__status {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tright: -4px;\n\t\tbottom: -4px;\n\t\tmin-width: 18px;\n\t\tmin-height: 18px;\n\t\twidth: 18px;\n\t\theight: 18px;\n\t\tborder: 2px solid var(--color-main-background);\n\t\tborder-radius: 50%;\n\t\tbackground-color: var(--color-main-background);\n\t\tfont-size: var(--default-font-size);\n\t\tline-height: 15px;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: 16px;\n\t\tbackground-position: center;\n\n\t\t&--icon {\n\t\t\tborder: none;\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t&__content {\n\t\tdisplay: flex;\n\t\tflex: 1 1 100%;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-width: 0;\n\t\tpadding-left: $autocomplete-padding;\n\t}\n\n\t&__title,\n\t&__subline {\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t&__subline {\n\t\tcolor: var(--color-text-maxcontrast);\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 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<docs>\n\n### General description\n\nThis component displays contenteditable div with automated `@` [at] autocompletion and `:` [colon] emoji autocompletion.\n\n### Examples\n\nTry mentioning user @Test01 or inserting emoji :smile\n\n```vue\n<template>\n\t<div>\n\t\t<NcRichContenteditable\n\t\t\tlabel=\"Write a comment\"\n\t\t\tv-model=\"message\"\n\t\t\t:auto-complete=\"autoComplete\"\n\t\t\t:maxlength=\"100\"\n\t\t\t:user-data=\"userData\"\n\t\t\t@submit=\"onSubmit\" />\n\t\t<br>\n\n\t\t<NcRichContenteditable\n\t\t\tv-model=\"message\"\n\t\t\t:auto-complete=\"autoComplete\"\n\t\t\t:maxlength=\"400\"\n\t\t\t:multiline=\"true\"\n\t\t\t:user-data=\"userData\"\n\t\t\t@submit=\"onSubmit\" />\n\n\t\t<h5>Output - raw</h5>\n\t\t{{ JSON.stringify(message) }}\n\n\t\t<h5>Output - preformatted</h5>\n\t\t<p class=\"pre-line\">{{ message }}</p>\n\n\t\t<h5>Output - in NcRichText with markdown support</h5>\n\t\t<NcRichText :text=\"text\" :arguments=\"userMentions\" autolink use-markdown />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tmessage: '**Lorem ipsum** dolor sit amet.',\n\t\t\t// You need to provide this for the inline mention to understand what to display or not.\n\t\t\t// Key should be a string with leading '@', like @Test02 or @\"Test Offline\"\n\t\t\tuserData: {\n\t\t\t\tTest01: {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test01',\n\t\t\t\t\ttitle: 'Test01',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tprimary: true,\n\t\t\t\t},\n\t\t\t\tTest02: {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test02',\n\t\t\t\t\ttitle: 'Test02',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\tmessage: 'Visiting London',\n\t\t\t\t\t\tstatus: 'away',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t},\n\t\t\t\t'Test@User': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test@User',\n\t\t\t\t\ttitle: 'Test 03',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\tmessage: 'Having space in my name',\n\t\t\t\t\t\tstatus: 'online',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t},\n\t\t\t\t'Test Offline': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test Offline',\n\t\t\t\t\ttitle: 'Test Offline',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\tmessage: null,\n\t\t\t\t\t\tstatus: 'offline',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: null,\n\t\t\t\t},\n\t\t\t\t'Test DND': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test DND',\n\t\t\t\t\ttitle: 'Test DND',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\tmessage: 'Out sick',\n\t\t\t\t\t\tstatus: 'dnd',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Out sick',\n\t\t\t\t},\n\t\t\t},\n\t\t\t// To display user bubbles in NcRichText, special format of data should be provided:\n\t\t\t// Key should be in curly brackets without '@' and ' ' symbols, like {user-2}\n\t\t\tuserMentions: {\n\t\t\t\t'user-1': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test01',\n\t\t\t\t\t\tuser: 'Test01',\n\t\t\t\t\t\tprimary: true,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-2': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test02',\n\t\t\t\t\t\tuser: 'Test02',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-3': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test 03',\n\t\t\t\t\t\tuser: 'Test@User',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-4': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test Offline',\n\t\t\t\t\t\tuser: 'Test Offline',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-5': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test DND',\n\t\t\t\t\t\tuser: 'Test DND',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t}\n\t},\n\tcomputed: {\n\t\ttext() {\n\t\t\treturn this.message\n\t\t\t\t\t.replace('@Test01', '{user-1}')\n\t\t\t\t\t.replace('@Test02', '{user-2}')\n\t\t\t\t\t.replace('@Test@User', '{user-3}')\n\t\t\t\t\t.replace('@\"Test Offline\"', '{user-4}')\n\t\t\t\t\t.replace('@\"Test DND\"', '{user-5}')\n\t\t},\n\t},\n\tmethods: {\n\t\t/**\n\t\t* Do your own query to the autocompletion api.\n\t\t* The returned data bellow is a fake data example.\n\t\t* The callback expects the same format returned by the core/autocomplete/get ocs api endpoint!\n\t\t* @see userData example above\n\t\t*\n\t\t* @param {string} search the query\n\t\t* @param {Function} callback the callback to process the results with\n\t\t*/\n\t\tautoComplete(search, callback) {\n\t\t\tcallback(Object.values(this.userData))\n\t\t},\n\t\tonSubmit() {\n\t\t\talert(this.message)\n\t\t}\n\t}\n}\n</script>\n<style lang=\"scss\" scoped>\n\th5 {\n\t\tfont-weight: bold;\n\t\tmargin: 40px 0 20px 0;\n\t}\n\n\t.pre-line {\n\t\twhite-space: pre-line;\n\t}\n</style>\n```\n\n</docs>\n\n<template>\n\t<div class=\"rich-contenteditable\" :class=\"$props.class\">\n\t\t<div :id=\"id\"\n\t\t\tref=\"contenteditable\"\n\t\t\tv-tooltip=\"tooltipString\"\n\t\t\t:class=\"{\n\t\t\t\t'rich-contenteditable__input--empty': isEmptyValue,\n\t\t\t\t'rich-contenteditable__input--multiline': multiline,\n\t\t\t\t'rich-contenteditable__input--has-label': label,\n\t\t\t\t'rich-contenteditable__input--overflow': isOverMaxlength,\n\t\t\t\t'rich-contenteditable__input--disabled': disabled,\n\t\t\t}\"\n\t\t\t:contenteditable=\"canEdit\"\n\t\t\t:aria-labelledby=\"label ? labelId : undefined\"\n\t\t\t:aria-placeholder=\"placeholder\"\n\t\t\taria-multiline=\"true\"\n\t\t\tclass=\"rich-contenteditable__input\"\n\t\t\trole=\"textbox\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@focus=\"moveCursorToEnd\"\n\t\t\t@input=\"onInput\"\n\t\t\t@compositionstart=\"isComposing = true\"\n\t\t\t@compositionend=\"isComposing = false\"\n\t\t\t@keydown.delete=\"onDelete\"\n\t\t\t@keydown.enter.exact=\"onEnter\"\n\t\t\t@keydown.ctrl.enter.exact.stop.prevent=\"onCtrlEnter\"\n\t\t\t@paste=\"onPaste\"\n\t\t\t@keyup.stop.prevent.capture=\"onKeyUp\" />\n\t\t<div v-if=\"label\"\n\t\t\t:id=\"labelId\"\n\t\t\tclass=\"rich-contenteditable__label\">\n\t\t\t{{ label }}\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { t } from '../../l10n.js'\nimport NcAutoCompleteResult from './NcAutoCompleteResult.vue'\nimport richEditor from '../../mixins/richEditor/index.js'\nimport Tooltip from '../../directives/Tooltip/index.js'\nimport { emojiSearch, emojiAddRecent } from '../../functions/emoji/index.ts'\nimport { searchProvider, getLinkWithPicker } from '../NcRichText/index.js'\n\nimport Tribute from 'tributejs/dist/tribute.esm.js'\nimport debounce from 'debounce'\nimport stringLength from 'string-length'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcRichContenteditable',\n\n\tdirectives: {\n\t\ttooltip: Tooltip,\n\t},\n\n\tmixins: [richEditor],\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The ID attribute of the content editable\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => GenRandomId(7),\n\t\t},\n\n\t\t/**\n\t\t * Visual label of the contenteditable\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\trequired: true,\n\t\t},\n\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Write a message …'),\n\t\t},\n\n\t\tautoComplete: {\n\t\t\ttype: Function,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\tmenuContainer: {\n\t\t\ttype: Element,\n\t\t\tdefault: () => document.body,\n\t\t},\n\n\t\t/**\n\t\t * Make the contenteditable looks like a textarea or not.\n\t\t * Default looks like a single-line input.\n\t\t * This also handle the default enter/shift+enter behaviour.\n\t\t * if multiline, enter = newline; otherwise enter = submit\n\t\t * shift+enter always add a new line. ctrl+enter always submits\n\t\t */\n\t\tmultiline: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Is the content editable ?\n\t\t */\n\t\tcontenteditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Disable the editing and show specific disabled design\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Max allowed length\n\t\t */\n\t\tmaxlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Enable or disable emoji autocompletion\n\t\t */\n\t\temojiAutocomplete: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Enable or disable link autocompletion\n\t\t */\n\t\tlinkAutocomplete: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * CSS class to apply to the root element.\n\t\t */\n\t\tclass: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'submit',\n\t\t'paste',\n\t\t'update:modelValue',\n\t\t'smart-picker-submit',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tlabelId: `rich-label-${GenRandomId(5)}`,\n\t\t\ttextSmiles: [],\n\t\t\ttribute: null,\n\t\t\tautocompleteOptions: {\n\t\t\t\t// Allow spaces in the middle of mentions\n\t\t\t\tallowSpaces: true,\n\t\t\t\tfillAttr: 'id',\n\t\t\t\t// Search against id and title (display name)\n\t\t\t\tlookup: result => `${result.id} ${result.title}`,\n\t\t\t\t// Where to inject the menu popup\n\t\t\t\tmenuContainer: this.menuContainer,\n\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\tmenuItemTemplate: item => this.renderComponentHtml(item.original, NcAutoCompleteResult),\n\t\t\t\t// Hide if no results\n\t\t\t\tnoMatchTemplate: () => '<span class=\"hidden\"></span>',\n\t\t\t\t// Inner display of mentions\n\t\t\t\tselectTemplate: item => this.genSelectTemplate(item?.original?.id),\n\t\t\t\t// Autocompletion results\n\t\t\t\tvalues: this.debouncedAutoComplete,\n\t\t\t},\n\t\t\temojiOptions: {\n\t\t\t\ttrigger: ':',\n\t\t\t\t// Don't use the tribute search function at all\n\t\t\t\t// We pass search results as values (see below)\n\t\t\t\tlookup: (result, query) => query,\n\t\t\t\t// Where to inject the menu popup\n\t\t\t\tmenuContainer: this.menuContainer,\n\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\tmenuItemTemplate: item => {\n\t\t\t\t\tif (this.textSmiles.includes(item.original)) {\n\t\t\t\t\t\t// Display the raw text string for :), :-D, … for non emoji results,\n\t\t\t\t\t\t// instead of trying to show an image and their name.\n\t\t\t\t\t\treturn item.original\n\t\t\t\t\t}\n\n\t\t\t\t\treturn `<span class=\"tribute-container-emoji__item__emoji\">${item.original.native}</span> :${item.original.short_name}`\n\t\t\t\t},\n\t\t\t\t// Hide if no results\n\t\t\t\tnoMatchTemplate: () => t('No emoji found'),\n\t\t\t\t// Display raw emoji along with its name\n\t\t\t\tselectTemplate: (item) => {\n\t\t\t\t\tif (this.textSmiles.includes(item.original)) {\n\t\t\t\t\t\t// Replace the selection with the raw text string for :), :-D, … for non emoji results\n\t\t\t\t\t\treturn item.original\n\t\t\t\t\t}\n\n\t\t\t\t\temojiAddRecent(item.original)\n\t\t\t\t\treturn item.original.native\n\t\t\t\t},\n\t\t\t\t// Pass the search results as values\n\t\t\t\tvalues: (text, cb) => {\n\t\t\t\t\tconst emojiResults = emojiSearch(text)\n\t\t\t\t\tif (this.textSmiles.includes(':' + text)) {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Prepend text smiles to the search results so that Tribute\n\t\t\t\t\t\t * is not interfering with normal writing, aka. \"Cocos Island Meme\".\n\t\t\t\t\t\t * E.g. `:)` and `:-)` got replaced by the flag of Cocos Island,\n\t\t\t\t\t\t * when submitting the input with Enter after writing them\n\t\t\t\t\t\t */\n\t\t\t\t\t\temojiResults.unshift(':' + text)\n\t\t\t\t\t}\n\t\t\t\t\tcb(emojiResults)\n\t\t\t\t},\n\t\t\t\t// Class added to the menu container\n\t\t\t\tcontainerClass: 'tribute-container-emoji',\n\t\t\t\t// Class added to each list item\n\t\t\t\titemClass: 'tribute-container-emoji__item',\n\t\t\t},\n\t\t\tlinkOptions: {\n\t\t\t\ttrigger: '/',\n\t\t\t\t// Don't use the tribute search function at all\n\t\t\t\t// We pass search results as values (see below)\n\t\t\t\tlookup: (result, query) => query,\n\t\t\t\t// Where to inject the menu popup\n\t\t\t\tmenuContainer: this.menuContainer,\n\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\tmenuItemTemplate: item => `<img class=\"tribute-container-link__item__icon\" src=\"${item.original.icon_url}\"> <span class=\"tribute-container-link__item__title\">${item.original.title}</span>`,\n\t\t\t\t// Hide if no results\n\t\t\t\tnoMatchTemplate: () => t('No link provider found'),\n\t\t\t\tselectTemplate: this.getLink,\n\t\t\t\t// Pass the search results as values\n\t\t\t\tvalues: (text, cb) => cb(searchProvider(text)),\n\t\t\t\t// Class added to the menu container\n\t\t\t\tcontainerClass: 'tribute-container-link',\n\t\t\t\t// Class added to each list item\n\t\t\t\titemClass: 'tribute-container-link__item',\n\t\t\t},\n\n\t\t\t// Represent the raw untrimmed text of the contenteditable\n\t\t\t// serves no other purpose than to check whether the\n\t\t\t// content is empty or not\n\t\t\tlocalValue: this.modelValue,\n\n\t\t\t// Is in text composition session in IME\n\t\t\tisComposing: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Is the current trimmed value empty?\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisEmptyValue() {\n\t\t\treturn !this.localValue || this.localValue.trim() === ''\n\t\t},\n\n\t\t/**\n\t\t * Is this Firefox? 🙄\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisFF() {\n\t\t\treturn !!navigator.userAgent.match(/firefox/i)\n\t\t},\n\n\t\t/**\n\t\t * Is the current value over maxlength?\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisOverMaxlength() {\n\t\t\tif (this.isEmptyValue || !this.maxlength) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn stringLength(this.localValue) > this.maxlength\n\t\t},\n\n\t\t/**\n\t\t * Tooltip to show if characters count is over limit\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\ttooltipString() {\n\t\t\tif (!this.isOverMaxlength) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tcontent: t('Message limit of {count} characters reached', { count: this.maxlength }),\n\t\t\t\tshown: true,\n\t\t\t\ttrigger: 'manual',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Edit is only allowed when contenteditableis true and disabled is false\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tcanEdit() {\n\t\t\treturn this.contenteditable && !this.disabled\n\t\t},\n\t},\n\n\twatch: {\n\t\t/**\n\t\t * If the parent value change, we compare the plain text rendering\n\t\t * If it's different, we render everything and update the main content\n\t\t */\n\t\tmodelValue() {\n\t\t\tconst html = this.$refs.contenteditable.innerHTML\n\t\t\t// Compare trimmed versions to be safe\n\t\t\tif (this.modelValue.trim() !== this.parseContent(html).trim()) {\n\t\t\t\tthis.updateContent(this.modelValue)\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\t/**\n\t\t * Populate the list of text smiles we want to offer via Tribute.\n\t\t * We add the colon `:)` and colon-dash `:-)` version for each of them.\n\t\t */\n\t\tconst smilesCharacters = ['d', 'D', 'p', 'P', 's', 'S', 'x', 'X', ')', '(', '|', '/']\n\t\tthis.textSmiles = []\n\t\tsmilesCharacters.forEach((char) => {\n\t\t\tthis.textSmiles.push(':' + char)\n\t\t\tthis.textSmiles.push(':-' + char)\n\t\t})\n\n\t\tthis.autocompleteTribute = new Tribute(this.autocompleteOptions)\n\t\tthis.autocompleteTribute.attach(this.$refs.contenteditable)\n\n\t\tif (this.emojiAutocomplete) {\n\t\t\tthis.emojiTribute = new Tribute(this.emojiOptions)\n\t\t\tthis.emojiTribute.attach(this.$refs.contenteditable)\n\t\t}\n\n\t\tif (this.linkAutocomplete) {\n\t\t\tthis.linkTribute = new Tribute(this.linkOptions)\n\t\t\tthis.linkTribute.attach(this.$refs.contenteditable)\n\t\t}\n\n\t\t// Update default value\n\t\tthis.updateContent(this.modelValue)\n\n\t\t// Removes the contenteditable attribute at first load if the prop is\n\t\t// set to false.\n\t\tthis.$refs.contenteditable.contentEditable = this.canEdit\n\t},\n\tbeforeUnmount() {\n\t\tif (this.autocompleteTribute) {\n\t\t\tthis.autocompleteTribute.detach(this.$refs.contenteditable)\n\t\t}\n\t\tif (this.emojiTribute) {\n\t\t\tthis.emojiTribute.detach(this.$refs.contenteditable)\n\t\t}\n\t\tif (this.linkTribute) {\n\t\t\tthis.linkTribute.detach(this.$refs.contenteditable)\n\t\t}\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the richContenteditable\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.contenteditable.focus()\n\t\t},\n\n\t\tgetLink(item) {\n\t\t\t// there is no way to get a tribute result asynchronously\n\t\t\t// so we immediately insert a node and replace it when the result comes\n\t\t\tgetLinkWithPicker(item.original.id)\n\t\t\t\t.then(result => {\n\t\t\t\t\t// replace dummy temp element by a text node which contains the picker result\n\t\t\t\t\tconst tmpElem = document.getElementById('tmp-smart-picker-result-node')\n\t\t\t\t\tconst eventData = {\n\t\t\t\t\t\tresult,\n\t\t\t\t\t\tinsertText: true,\n\t\t\t\t\t}\n\t\t\t\t\tthis.$emit('smart-picker-submit', eventData)\n\t\t\t\t\tif (eventData.insertText) {\n\t\t\t\t\t\tconst newElem = document.createTextNode(result)\n\t\t\t\t\t\ttmpElem.replaceWith(newElem)\n\t\t\t\t\t\tthis.setCursorAfter(newElem)\n\t\t\t\t\t\tthis.updateValue(this.$refs.contenteditable.innerHTML)\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttmpElem.remove()\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t.catch((error) => {\n\t\t\t\t\tconsole.debug('Smart picker promise rejected:', error)\n\t\t\t\t\tconst tmpElem = document.getElementById('tmp-smart-picker-result-node')\n\t\t\t\t\tthis.setCursorAfter(tmpElem)\n\t\t\t\t\ttmpElem.remove()\n\t\t\t\t})\n\t\t\treturn '<span id=\"tmp-smart-picker-result-node\"></span>'\n\t\t},\n\t\tsetCursorAfter(element) {\n\t\t\tconst range = document.createRange()\n\t\t\trange.setEndAfter(element)\n\t\t\trange.collapse()\n\t\t\tconst selection = window.getSelection()\n\t\t\tselection.removeAllRanges()\n\t\t\tselection.addRange(range)\n\t\t},\n\t\tmoveCursorToEnd() {\n\t\t\tif (!document.createRange) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst range = document.createRange()\n\t\t\trange.selectNodeContents(this.$refs.contenteditable)\n\t\t\trange.collapse(false)\n\t\t\tconst selection = window.getSelection()\n\t\t\tselection.removeAllRanges()\n\t\t\tselection.addRange(range)\n\t\t},\n\t\t/**\n\t\t * Re-emit the input event to the parent\n\t\t *\n\t\t * @param {Event} event the input event\n\t\t */\n\t\tonInput(event) {\n\t\t\tthis.updateValue(event.target.innerHTML)\n\t\t},\n\n\t\t/**\n\t\t * When pasting, sanitize the content, extract text\n\t\t * and render it again\n\t\t *\n\t\t * @param {Event} event the paste event\n\t\t * @fires Event paste the original paste event\n\t\t */\n\t\tonPaste(event) {\n\t\t\t// Either disabled or edit deactivated\n\t\t\tif (!this.canEdit) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tevent.preventDefault()\n\t\t\tconst clipboardData = event.clipboardData\n\n\t\t\t/** The original paste event */\n\t\t\tthis.$emit('paste', event)\n\n\t\t\t// If we have a file or if we don't have any text, ignore\n\t\t\tif (clipboardData.files.length !== 0\n\t\t\t\t|| !Object.values(clipboardData.items).find(item => item?.type.startsWith('text'))) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst text = clipboardData.getData('text')\n\t\t\tconst selection = window.getSelection()\n\n\t\t\t// If no selection, replace the whole data\n\t\t\tif (!selection.rangeCount) {\n\t\t\t\tthis.updateValue(text)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Generate text and insert\n\t\t\tconst range = selection.getRangeAt(0)\n\t\t\tselection.deleteFromDocument()\n\t\t\trange.insertNode(document.createTextNode(text))\n\n\t\t\t// Put cursor at the end of the selection\n\t\t\tconst newRange = document.createRange()\n\t\t\tnewRange.setStart(event.target, range.endOffset)\n\t\t\tnewRange.collapse(true)\n\t\t\tselection.removeAllRanges()\n\t\t\tselection.addRange(newRange)\n\n\t\t\t// Propagate data\n\t\t\tthis.updateValue(this.$refs.contenteditable.innerHTML)\n\t\t},\n\n\t\t/**\n\t\t * Update the value text from the provided html\n\t\t *\n\t\t * @param {string} htmlOrText the html content (or raw text with @mentions)\n\t\t */\n\t\tupdateValue(htmlOrText) {\n\t\t\tconst text = this.parseContent(htmlOrText)\n\t\t\tthis.localValue = text\n\t\t\tthis.$emit('update:modelValue', text)\n\t\t},\n\n\t\t/**\n\t\t * Update content and local value\n\t\t *\n\t\t * @param {string} value the message value\n\t\t */\n\t\tupdateContent(value) {\n\t\t\tconst renderedContent = this.renderContent(value)\n\t\t\tthis.$refs.contenteditable.innerHTML = renderedContent\n\t\t\tthis.localValue = value\n\t\t},\n\n\t\t/**\n\t\t * Because FF have a decade old bug preventing contenteditable=false\n\t\t * to properly be deleted on backspace, we have to hack 👀\n\t\t * https://stackoverflow.com/a/59383394/3885878\n\t\t * https://stackoverflow.com/a/30574622\n\t\t *\n\t\t * @param {Event} event the delete keydown event\n\t\t */\n\t\tonDelete(event) {\n\t\t\tif (!this.isFF || !window.getSelection) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Either disabled or edit deactivated\n\t\t\tif (!this.canEdit) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// fix backspace bug in FF\n\t\t\t// https://bugzilla.mozilla.org/show_bug.cgi?id=685445\n\t\t\t// https://bugzilla.mozilla.org/show_bug.cgi?id=1665167\n\t\t\tconst selection = window.getSelection()\n\t\t\tconst node = event.target\n\t\t\tif (!selection.isCollapsed || !selection.rangeCount) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst curRange = selection.getRangeAt(selection.rangeCount - 1)\n\t\t\tif (curRange.commonAncestorContainer.nodeType === 3 && curRange.startOffset > 0) {\n\t\t\t\t// we are in child selection. The characters of the text node is being deleted\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst range = document.createRange()\n\t\t\tif (selection.anchorNode !== node) {\n\t\t\t\t// selection is in character mode. expand it to the whole editable field\n\t\t\t\trange.selectNodeContents(node)\n\t\t\t\trange.setEndBefore(selection.anchorNode)\n\t\t\t} else if (selection.anchorOffset > 0) {\n\t\t\t\trange.setEnd(node, selection.anchorOffset)\n\t\t\t} else {\n\t\t\t\t// reached the beginning of editable field\n\t\t\t\treturn\n\t\t\t}\n\t\t\trange.setStart(node, range.endOffset - 1)\n\n\t\t\tconst previousNode = range.cloneContents().lastChild\n\t\t\tif (previousNode && previousNode.contentEditable === 'false') {\n\t\t\t\t// this is some rich content, e.g. smile. We should help the user to delete it\n\t\t\t\trange.deleteContents()\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Enter key pressed. Submits if not multiline\n\t\t *\n\t\t * @param {Event} event the keydown event\n\t\t */\n\t\tonEnter(event) {\n\t\t\t// Prevent submitting if multiline\n\t\t\t// or length is over maxlength\n\t\t\t// or autocompletion menu is opened\n\t\t\t// or in a text composition session with IME\n\t\t\tif (this.multiline\n\t\t\t\t|| this.isOverMaxlength\n\t\t\t\t|| this.autocompleteTribute.isActive || this.emojiTribute.isActive || this.linkTribute.isActive\n\t\t\t\t|| this.isComposing) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tthis.$emit('submit', event)\n\t\t},\n\n\t\t/**\n\t\t * Ctrl + Enter key pressed is used to submit\n\t\t *\n\t\t * @param {Event} event the keydown event\n\t\t */\n\t\tonCtrlEnter(event) {\n\t\t\tif (this.isOverMaxlength) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.$emit('submit', event)\n\t\t},\n\n\t\t/**\n\t\t * Debounce the autocomplete function\n\t\t */\n\t\tdebouncedAutoComplete: debounce(async function(search, callback) {\n\t\t\tthis.autoComplete(search, callback)\n\t\t}, 100),\n\n\t\tonKeyUp(event) {\n\t\t\t// prevent tribute from opening on keyup\n\t\t\tevent.stopImmediatePropagation()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// Standalone styling, independent from server\n.rich-contenteditable {\n\tposition: relative;\n\twidth: auto;\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 14px 0;\n\t\tmax-width: fit-content;\n\t\tinset-block-start: 11px;\n\t\tinset-inline: 0;\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(&__input--empty) + &__label {\n\t\tinset-block-start: -10px;\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tfont-weight: 500;\n\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: 5px;\n\t\tmargin-inline-start: 9px;\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t}\n\n\t&__input {\n\t\toverflow-y: auto;\n\t\twidth: auto;\n\t\tmargin: 0;\n\t\tpadding: 8px;\n\t\tcursor: text;\n\t\twhite-space: pre-wrap;\n\t\tword-break: break-word;\n\t\tcolor: var(--color-main-text);\n\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--border-radius-large);\n\t\toutline: none;\n\t\tbackground-color: var(--color-main-background);\n\t\tfont-family: var(--font-face);\n\t\tfont-size: inherit;\n\t\tmin-height: $clickable-area;\n\t\tmax-height: $clickable-area * 5.5;\n\n\t\t&--has-label {\n\t\t\tmargin-top: 10px;\n\t\t}\n\n\t\t// Cannot use :empty because of firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=1513303\n\t\t&--empty:focus:before,\n\t\t&--empty:not(&--has-label):before {\n\t\t\tcontent: attr(aria-placeholder);\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tposition: absolute;\n\t\t}\n\n\t\t&[contenteditable='false']:not(&--disabled) {\n\t\t\tcursor: default;\n\t\t\tbackground-color: transparent;\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-color: transparent;\n\t\t\topacity: 1;\n\t\t\tborder-radius: 0;\n\t\t}\n\n\t\t&--multiline {\n\t\t\tmin-height: $clickable-area * 3;\n\t\t\t// No max for mutiline\n\t\t\tmax-height: none;\n\t\t}\n\n\t\t&--disabled {\n\t\t\topacity: $opacity_disabled;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tborder: 2px solid var(--color-background-darker);\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t}\n\t}\n}\n\n</style>\n\n<style lang=\"scss\">\n.tribute-container, .tribute-container-emoji, .tribute-container-link {\n\tz-index: 9000;\n\toverflow: auto;\n\tmin-width: 250px;\n\tmax-width: 300px;\n\t// Show maximum 4 entries and a half to show scroll\n\t// 44px + 10px padding\n\tmax-height: ($clickable-area + 20px) * 4.5;\n\t// Space it out a bit from the text\n\tmargin: 5px 0;\n\tcolor: var(--color-main-text);\n\tborder-radius: var(--border-radius);\n\tbackground: var(--color-main-background);\n\tbox-shadow: 0 1px 5px var(--color-box-shadow);\n}\n\n.tribute-container-emoji, .tribute-container-link {\n\tmin-width: 200px;\n\tmax-width: 200px;\n\tpadding: 4px;\n\t// Show maximum 5 entries and a half to show scroll\n\tmax-height: 35px * 5 + math.div(35px, 2) !important;\n\n\t&__item {\n\t\tborder-radius: 8px;\n\t\tpadding: 4px 8px;\n\t\tmargin-bottom: 4px;\n\t\topacity: 0.8;\n\t\tcursor: pointer;\n\n\t\t// Take care of long names\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\n\t\t&:last-child {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\n\t\t&__emoji {\n\t\t\tpadding-right: 8px;\n\t\t}\n\t}\n\n\t.highlight {\n\t\topacity: 1;\n\t\tcolor: var(--color-primary-element-light-text);\n\t\tbackground: var(--color-primary-element-light);\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n.tribute-container-link {\n\tmin-width: 200px;\n\tmax-width: 300px;\n\t&__item {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t&__title {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t&__icon {\n\t\t\tmargin: auto 0;\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t\tobject-fit: contain;\n\t\t\tpadding-right: 8px;\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main$1","NcUserStatusIcon","generateUrl","_hoisted_1$1","_hoisted_3","_hoisted_4","openBlock","createElementBlock","normalizeClass","$props","$options","normalizeStyle","_hoisted_2$1","toDisplayString","createCommentVNode","createElementVNode","_sfc_main","VTooltip","richEditor","GenRandomId","result","item","NcAutoCompleteResult","t","text","cb","emojiResults","emojiSearch","searchProvider","html","smilesCharacters","char","Tribute","getLinkWithPicker","tmpElem","eventData","newElem","error","range","selection","event","clipboardData","newRange","htmlOrText","value","renderedContent","node","curRange","search","callback","_hoisted_1","_hoisted_2","_ctx","withDirectives","mergeProps","$data","_cache","args","$event","withKeys","withModifiers"],"mappings":"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"}
+{"version":3,"file":"NcRichContenteditable-L8aEJNGb.cjs","sources":["../../src/components/NcRichContenteditable/NcAutoCompleteResult.vue","../../src/components/NcRichContenteditable/NcRichContenteditable.vue"],"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<div class=\"autocomplete-result\">\n\t\t<!-- Avatar or icon -->\n\t\t<div :class=\"[icon, `autocomplete-result__icon--${avatarUrl ? 'with-avatar' : ''}`]\"\n\t\t\t:style=\"avatarUrl ? { backgroundImage: `url(${avatarUrl})` } : null \"\n\t\t\tclass=\"autocomplete-result__icon\">\n\t\t\t<span v-if=\"status.icon\"\n\t\t\t\tclass=\"autocomplete-result__status autocomplete-result__status--icon\">\n\t\t\t\t{{ status && status.icon || '' }}\n\t\t\t</span>\n\t\t\t<NcUserStatusIcon v-else-if=\"status.status && status.status !== 'offline'\"\n\t\t\t\tclass=\"autocomplete-result__status\"\n\t\t\t\t:status=\"status.status\" />\n\t\t</div>\n\n\t\t<!-- Title and subline -->\n\t\t<span class=\"autocomplete-result__content\">\n\t\t\t<span class=\"autocomplete-result__title\" :title=\"title\">\n\t\t\t\t{{ title }}\n\t\t\t</span>\n\t\t\t<span v-if=\"subline\" class=\"autocomplete-result__subline\">\n\t\t\t\t{{ subline }}\n\t\t\t</span>\n\t\t</span>\n\t</div>\n</template>\n\n<script>\nimport { generateUrl } from '@nextcloud/router'\n\nimport NcUserStatusIcon from '../NcUserStatusIcon/index.js'\n\nexport default {\n\tname: 'NcAutoCompleteResult',\n\n\tcomponents: {\n\t\tNcUserStatusIcon,\n\t},\n\n\tprops: {\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\tsubline: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\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,\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\tstatus: {\n\t\t\ttype: [Object, Array],\n\t\t\tdefault: () => ({}),\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},\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$autocomplete-padding: 10px;\n\n.autocomplete-result {\n\tdisplay: flex;\n\theight: $clickable-area;\n\tpadding: $autocomplete-padding;\n\n\t.highlight & {\n\t\tcolor: var(--color-primary-element-light-text);\n\t\tbackground: var(--color-primary-element-light);\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t&__icon {\n\t\tposition: relative;\n\t\tflex: 0 0 $clickable-area;\n\t\twidth: $clickable-area;\n\t\tmin-width: $clickable-area;\n\t\theight: $clickable-area;\n\t\tborder-radius: $clickable-area;\n\t\tbackground-color: var(--color-background-darker);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: $clickable-area - 2 * $autocomplete-padding;\n\t\t&--with-avatar {\n\t\t\tcolor: inherit;\n\t\t\tbackground-size: cover;\n\t\t}\n\t}\n\n\t&__status {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tright: -4px;\n\t\tbottom: -4px;\n\t\tmin-width: 18px;\n\t\tmin-height: 18px;\n\t\twidth: 18px;\n\t\theight: 18px;\n\t\tborder: 2px solid var(--color-main-background);\n\t\tborder-radius: 50%;\n\t\tbackground-color: var(--color-main-background);\n\t\tfont-size: var(--default-font-size);\n\t\tline-height: 15px;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: 16px;\n\t\tbackground-position: center;\n\n\t\t&--icon {\n\t\t\tborder: none;\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t&__content {\n\t\tdisplay: flex;\n\t\tflex: 1 1 100%;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-width: 0;\n\t\tpadding-left: $autocomplete-padding;\n\t}\n\n\t&__title,\n\t&__subline {\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t&__subline {\n\t\tcolor: var(--color-text-maxcontrast);\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 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<docs>\n\n### General description\n\nThis component displays contenteditable div with automated `@` [at] autocompletion and `:` [colon] emoji autocompletion.\n\n### Examples\n\nTry mentioning user @Test01 or inserting emoji :smile\n\n```vue\n<template>\n\t<div>\n\t\t<NcRichContenteditable\n\t\t\tlabel=\"Write a comment\"\n\t\t\tv-model=\"message\"\n\t\t\t:auto-complete=\"autoComplete\"\n\t\t\t:maxlength=\"100\"\n\t\t\t:user-data=\"userData\"\n\t\t\t@submit=\"onSubmit\" />\n\t\t<br>\n\n\t\t<NcRichContenteditable\n\t\t\tv-model=\"message\"\n\t\t\t:auto-complete=\"autoComplete\"\n\t\t\t:maxlength=\"400\"\n\t\t\t:multiline=\"true\"\n\t\t\t:user-data=\"userData\"\n\t\t\t@submit=\"onSubmit\" />\n\n\t\t<h5>Output - raw</h5>\n\t\t{{ JSON.stringify(message) }}\n\n\t\t<h5>Output - preformatted</h5>\n\t\t<p class=\"pre-line\">{{ message }}</p>\n\n\t\t<h5>Output - in NcRichText with markdown support</h5>\n\t\t<NcRichText :text=\"text\" :arguments=\"userMentions\" autolink use-markdown />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tmessage: '**Lorem ipsum** dolor sit amet.',\n\t\t\t// You need to provide this for the inline mention to understand what to display or not.\n\t\t\t// Key should be a string with leading '@', like @Test02 or @\"Test Offline\"\n\t\t\tuserData: {\n\t\t\t\tTest01: {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test01',\n\t\t\t\t\ttitle: 'Test01',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tprimary: true,\n\t\t\t\t},\n\t\t\t\tTest02: {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test02',\n\t\t\t\t\ttitle: 'Test02',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\tmessage: 'Visiting London',\n\t\t\t\t\t\tstatus: 'away',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t},\n\t\t\t\t'Test@User': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test@User',\n\t\t\t\t\ttitle: 'Test 03',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\tmessage: 'Having space in my name',\n\t\t\t\t\t\tstatus: 'online',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t},\n\t\t\t\t'Test Offline': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test Offline',\n\t\t\t\t\ttitle: 'Test Offline',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\tmessage: null,\n\t\t\t\t\t\tstatus: 'offline',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: null,\n\t\t\t\t},\n\t\t\t\t'Test DND': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test DND',\n\t\t\t\t\ttitle: 'Test DND',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\tmessage: 'Out sick',\n\t\t\t\t\t\tstatus: 'dnd',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Out sick',\n\t\t\t\t},\n\t\t\t},\n\t\t\t// To display user bubbles in NcRichText, special format of data should be provided:\n\t\t\t// Key should be in curly brackets without '@' and ' ' symbols, like {user-2}\n\t\t\tuserMentions: {\n\t\t\t\t'user-1': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test01',\n\t\t\t\t\t\tuser: 'Test01',\n\t\t\t\t\t\tprimary: true,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-2': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test02',\n\t\t\t\t\t\tuser: 'Test02',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-3': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test 03',\n\t\t\t\t\t\tuser: 'Test@User',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-4': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test Offline',\n\t\t\t\t\t\tuser: 'Test Offline',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-5': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test DND',\n\t\t\t\t\t\tuser: 'Test DND',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t}\n\t},\n\tcomputed: {\n\t\ttext() {\n\t\t\treturn this.message\n\t\t\t\t\t.replace('@Test01', '{user-1}')\n\t\t\t\t\t.replace('@Test02', '{user-2}')\n\t\t\t\t\t.replace('@Test@User', '{user-3}')\n\t\t\t\t\t.replace('@\"Test Offline\"', '{user-4}')\n\t\t\t\t\t.replace('@\"Test DND\"', '{user-5}')\n\t\t},\n\t},\n\tmethods: {\n\t\t/**\n\t\t* Do your own query to the autocompletion api.\n\t\t* The returned data bellow is a fake data example.\n\t\t* The callback expects the same format returned by the core/autocomplete/get ocs api endpoint!\n\t\t* @see userData example above\n\t\t*\n\t\t* @param {string} search the query\n\t\t* @param {Function} callback the callback to process the results with\n\t\t*/\n\t\tautoComplete(search, callback) {\n\t\t\tcallback(Object.values(this.userData))\n\t\t},\n\t\tonSubmit() {\n\t\t\talert(this.message)\n\t\t}\n\t}\n}\n</script>\n<style lang=\"scss\" scoped>\n\th5 {\n\t\tfont-weight: bold;\n\t\tmargin: 40px 0 20px 0;\n\t}\n\n\t.pre-line {\n\t\twhite-space: pre-line;\n\t}\n</style>\n```\n\n</docs>\n\n<template>\n\t<div class=\"rich-contenteditable\" :class=\"$props.class\">\n\t\t<div :id=\"id\"\n\t\t\tref=\"contenteditable\"\n\t\t\tv-tooltip=\"tooltipString\"\n\t\t\t:class=\"{\n\t\t\t\t'rich-contenteditable__input--empty': isEmptyValue,\n\t\t\t\t'rich-contenteditable__input--multiline': multiline,\n\t\t\t\t'rich-contenteditable__input--has-label': label,\n\t\t\t\t'rich-contenteditable__input--overflow': isOverMaxlength,\n\t\t\t\t'rich-contenteditable__input--disabled': disabled,\n\t\t\t}\"\n\t\t\t:contenteditable=\"canEdit\"\n\t\t\t:aria-labelledby=\"label ? labelId : undefined\"\n\t\t\t:aria-placeholder=\"placeholder\"\n\t\t\taria-multiline=\"true\"\n\t\t\tclass=\"rich-contenteditable__input\"\n\t\t\trole=\"textbox\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@focus=\"moveCursorToEnd\"\n\t\t\t@input=\"onInput\"\n\t\t\t@compositionstart=\"isComposing = true\"\n\t\t\t@compositionend=\"isComposing = false\"\n\t\t\t@keydown.delete=\"onDelete\"\n\t\t\t@keydown.enter.exact=\"onEnter\"\n\t\t\t@keydown.ctrl.enter.exact.stop.prevent=\"onCtrlEnter\"\n\t\t\t@paste=\"onPaste\"\n\t\t\t@keyup.stop.prevent.capture=\"onKeyUp\" />\n\t\t<div v-if=\"label\"\n\t\t\t:id=\"labelId\"\n\t\t\tclass=\"rich-contenteditable__label\">\n\t\t\t{{ label }}\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { t } from '../../l10n.js'\nimport NcAutoCompleteResult from './NcAutoCompleteResult.vue'\nimport richEditor from '../../mixins/richEditor/index.js'\nimport Tooltip from '../../directives/Tooltip/index.js'\nimport { emojiSearch, emojiAddRecent } from '../../functions/emoji/index.ts'\nimport { searchProvider, getLinkWithPicker } from '../NcRichText/index.js'\n\nimport Tribute from 'tributejs/dist/tribute.esm.js'\nimport debounce from 'debounce'\nimport stringLength from 'string-length'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcRichContenteditable',\n\n\tdirectives: {\n\t\ttooltip: Tooltip,\n\t},\n\n\tmixins: [richEditor],\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The ID attribute of the content editable\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => GenRandomId(7),\n\t\t},\n\n\t\t/**\n\t\t * Visual label of the contenteditable\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\trequired: true,\n\t\t},\n\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Write a message …'),\n\t\t},\n\n\t\tautoComplete: {\n\t\t\ttype: Function,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\tmenuContainer: {\n\t\t\ttype: Element,\n\t\t\tdefault: () => document.body,\n\t\t},\n\n\t\t/**\n\t\t * Make the contenteditable looks like a textarea or not.\n\t\t * Default looks like a single-line input.\n\t\t * This also handle the default enter/shift+enter behaviour.\n\t\t * if multiline, enter = newline; otherwise enter = submit\n\t\t * shift+enter always add a new line. ctrl+enter always submits\n\t\t */\n\t\tmultiline: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Is the content editable ?\n\t\t */\n\t\tcontenteditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Disable the editing and show specific disabled design\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Max allowed length\n\t\t */\n\t\tmaxlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Enable or disable emoji autocompletion\n\t\t */\n\t\temojiAutocomplete: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Enable or disable link autocompletion\n\t\t */\n\t\tlinkAutocomplete: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * CSS class to apply to the root element.\n\t\t */\n\t\tclass: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'submit',\n\t\t'paste',\n\t\t'update:modelValue',\n\t\t'smart-picker-submit',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tlabelId: `rich-label-${GenRandomId(5)}`,\n\t\t\ttextSmiles: [],\n\t\t\ttribute: null,\n\t\t\tautocompleteOptions: {\n\t\t\t\t// Allow spaces in the middle of mentions\n\t\t\t\tallowSpaces: true,\n\t\t\t\tfillAttr: 'id',\n\t\t\t\t// Search against id and title (display name)\n\t\t\t\tlookup: result => `${result.id} ${result.title}`,\n\t\t\t\t// Where to inject the menu popup\n\t\t\t\tmenuContainer: this.menuContainer,\n\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\tmenuItemTemplate: item => this.renderComponentHtml(item.original, NcAutoCompleteResult),\n\t\t\t\t// Hide if no results\n\t\t\t\tnoMatchTemplate: () => '<span class=\"hidden\"></span>',\n\t\t\t\t// Inner display of mentions\n\t\t\t\tselectTemplate: item => this.genSelectTemplate(item?.original?.id),\n\t\t\t\t// Autocompletion results\n\t\t\t\tvalues: this.debouncedAutoComplete,\n\t\t\t},\n\t\t\temojiOptions: {\n\t\t\t\ttrigger: ':',\n\t\t\t\t// Don't use the tribute search function at all\n\t\t\t\t// We pass search results as values (see below)\n\t\t\t\tlookup: (result, query) => query,\n\t\t\t\t// Where to inject the menu popup\n\t\t\t\tmenuContainer: this.menuContainer,\n\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\tmenuItemTemplate: item => {\n\t\t\t\t\tif (this.textSmiles.includes(item.original)) {\n\t\t\t\t\t\t// Display the raw text string for :), :-D, … for non emoji results,\n\t\t\t\t\t\t// instead of trying to show an image and their name.\n\t\t\t\t\t\treturn item.original\n\t\t\t\t\t}\n\n\t\t\t\t\treturn `<span class=\"tribute-container-emoji__item__emoji\">${item.original.native}</span> :${item.original.short_name}`\n\t\t\t\t},\n\t\t\t\t// Hide if no results\n\t\t\t\tnoMatchTemplate: () => t('No emoji found'),\n\t\t\t\t// Display raw emoji along with its name\n\t\t\t\tselectTemplate: (item) => {\n\t\t\t\t\tif (this.textSmiles.includes(item.original)) {\n\t\t\t\t\t\t// Replace the selection with the raw text string for :), :-D, … for non emoji results\n\t\t\t\t\t\treturn item.original\n\t\t\t\t\t}\n\n\t\t\t\t\temojiAddRecent(item.original)\n\t\t\t\t\treturn item.original.native\n\t\t\t\t},\n\t\t\t\t// Pass the search results as values\n\t\t\t\tvalues: (text, cb) => {\n\t\t\t\t\tconst emojiResults = emojiSearch(text)\n\t\t\t\t\tif (this.textSmiles.includes(':' + text)) {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Prepend text smiles to the search results so that Tribute\n\t\t\t\t\t\t * is not interfering with normal writing, aka. \"Cocos Island Meme\".\n\t\t\t\t\t\t * E.g. `:)` and `:-)` got replaced by the flag of Cocos Island,\n\t\t\t\t\t\t * when submitting the input with Enter after writing them\n\t\t\t\t\t\t */\n\t\t\t\t\t\temojiResults.unshift(':' + text)\n\t\t\t\t\t}\n\t\t\t\t\tcb(emojiResults)\n\t\t\t\t},\n\t\t\t\t// Class added to the menu container\n\t\t\t\tcontainerClass: 'tribute-container-emoji',\n\t\t\t\t// Class added to each list item\n\t\t\t\titemClass: 'tribute-container-emoji__item',\n\t\t\t},\n\t\t\tlinkOptions: {\n\t\t\t\ttrigger: '/',\n\t\t\t\t// Don't use the tribute search function at all\n\t\t\t\t// We pass search results as values (see below)\n\t\t\t\tlookup: (result, query) => query,\n\t\t\t\t// Where to inject the menu popup\n\t\t\t\tmenuContainer: this.menuContainer,\n\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\tmenuItemTemplate: item => `<img class=\"tribute-container-link__item__icon\" src=\"${item.original.icon_url}\"> <span class=\"tribute-container-link__item__title\">${item.original.title}</span>`,\n\t\t\t\t// Hide if no results\n\t\t\t\tnoMatchTemplate: () => t('No link provider found'),\n\t\t\t\tselectTemplate: this.getLink,\n\t\t\t\t// Pass the search results as values\n\t\t\t\tvalues: (text, cb) => cb(searchProvider(text)),\n\t\t\t\t// Class added to the menu container\n\t\t\t\tcontainerClass: 'tribute-container-link',\n\t\t\t\t// Class added to each list item\n\t\t\t\titemClass: 'tribute-container-link__item',\n\t\t\t},\n\n\t\t\t// Represent the raw untrimmed text of the contenteditable\n\t\t\t// serves no other purpose than to check whether the\n\t\t\t// content is empty or not\n\t\t\tlocalValue: this.modelValue,\n\n\t\t\t// Is in text composition session in IME\n\t\t\tisComposing: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Is the current trimmed value empty?\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisEmptyValue() {\n\t\t\treturn !this.localValue || this.localValue.trim() === ''\n\t\t},\n\n\t\t/**\n\t\t * Is this Firefox? 🙄\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisFF() {\n\t\t\treturn !!navigator.userAgent.match(/firefox/i)\n\t\t},\n\n\t\t/**\n\t\t * Is the current value over maxlength?\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisOverMaxlength() {\n\t\t\tif (this.isEmptyValue || !this.maxlength) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn stringLength(this.localValue) > this.maxlength\n\t\t},\n\n\t\t/**\n\t\t * Tooltip to show if characters count is over limit\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\ttooltipString() {\n\t\t\tif (!this.isOverMaxlength) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tcontent: t('Message limit of {count} characters reached', { count: this.maxlength }),\n\t\t\t\tshown: true,\n\t\t\t\ttrigger: 'manual',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Edit is only allowed when contenteditableis true and disabled is false\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tcanEdit() {\n\t\t\treturn this.contenteditable && !this.disabled\n\t\t},\n\t},\n\n\twatch: {\n\t\t/**\n\t\t * If the parent value change, we compare the plain text rendering\n\t\t * If it's different, we render everything and update the main content\n\t\t */\n\t\tmodelValue() {\n\t\t\tconst html = this.$refs.contenteditable.innerHTML\n\t\t\t// Compare trimmed versions to be safe\n\t\t\tif (this.modelValue.trim() !== this.parseContent(html).trim()) {\n\t\t\t\tthis.updateContent(this.modelValue)\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\t/**\n\t\t * Populate the list of text smiles we want to offer via Tribute.\n\t\t * We add the colon `:)` and colon-dash `:-)` version for each of them.\n\t\t */\n\t\tconst smilesCharacters = ['d', 'D', 'p', 'P', 's', 'S', 'x', 'X', ')', '(', '|', '/']\n\t\tthis.textSmiles = []\n\t\tsmilesCharacters.forEach((char) => {\n\t\t\tthis.textSmiles.push(':' + char)\n\t\t\tthis.textSmiles.push(':-' + char)\n\t\t})\n\n\t\tthis.autocompleteTribute = new Tribute(this.autocompleteOptions)\n\t\tthis.autocompleteTribute.attach(this.$refs.contenteditable)\n\n\t\tif (this.emojiAutocomplete) {\n\t\t\tthis.emojiTribute = new Tribute(this.emojiOptions)\n\t\t\tthis.emojiTribute.attach(this.$refs.contenteditable)\n\t\t}\n\n\t\tif (this.linkAutocomplete) {\n\t\t\tthis.linkTribute = new Tribute(this.linkOptions)\n\t\t\tthis.linkTribute.attach(this.$refs.contenteditable)\n\t\t}\n\n\t\t// Update default value\n\t\tthis.updateContent(this.modelValue)\n\n\t\t// Removes the contenteditable attribute at first load if the prop is\n\t\t// set to false.\n\t\tthis.$refs.contenteditable.contentEditable = this.canEdit\n\t},\n\tbeforeUnmount() {\n\t\tif (this.autocompleteTribute) {\n\t\t\tthis.autocompleteTribute.detach(this.$refs.contenteditable)\n\t\t}\n\t\tif (this.emojiTribute) {\n\t\t\tthis.emojiTribute.detach(this.$refs.contenteditable)\n\t\t}\n\t\tif (this.linkTribute) {\n\t\t\tthis.linkTribute.detach(this.$refs.contenteditable)\n\t\t}\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the richContenteditable\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.contenteditable.focus()\n\t\t},\n\n\t\tgetLink(item) {\n\t\t\t// there is no way to get a tribute result asynchronously\n\t\t\t// so we immediately insert a node and replace it when the result comes\n\t\t\tgetLinkWithPicker(item.original.id)\n\t\t\t\t.then(result => {\n\t\t\t\t\t// replace dummy temp element by a text node which contains the picker result\n\t\t\t\t\tconst tmpElem = document.getElementById('tmp-smart-picker-result-node')\n\t\t\t\t\tconst eventData = {\n\t\t\t\t\t\tresult,\n\t\t\t\t\t\tinsertText: true,\n\t\t\t\t\t}\n\t\t\t\t\tthis.$emit('smart-picker-submit', eventData)\n\t\t\t\t\tif (eventData.insertText) {\n\t\t\t\t\t\tconst newElem = document.createTextNode(result)\n\t\t\t\t\t\ttmpElem.replaceWith(newElem)\n\t\t\t\t\t\tthis.setCursorAfter(newElem)\n\t\t\t\t\t\tthis.updateValue(this.$refs.contenteditable.innerHTML)\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttmpElem.remove()\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t.catch((error) => {\n\t\t\t\t\tconsole.debug('Smart picker promise rejected:', error)\n\t\t\t\t\tconst tmpElem = document.getElementById('tmp-smart-picker-result-node')\n\t\t\t\t\tthis.setCursorAfter(tmpElem)\n\t\t\t\t\ttmpElem.remove()\n\t\t\t\t})\n\t\t\treturn '<span id=\"tmp-smart-picker-result-node\"></span>'\n\t\t},\n\t\tsetCursorAfter(element) {\n\t\t\tconst range = document.createRange()\n\t\t\trange.setEndAfter(element)\n\t\t\trange.collapse()\n\t\t\tconst selection = window.getSelection()\n\t\t\tselection.removeAllRanges()\n\t\t\tselection.addRange(range)\n\t\t},\n\t\tmoveCursorToEnd() {\n\t\t\tif (!document.createRange) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst range = document.createRange()\n\t\t\trange.selectNodeContents(this.$refs.contenteditable)\n\t\t\trange.collapse(false)\n\t\t\tconst selection = window.getSelection()\n\t\t\tselection.removeAllRanges()\n\t\t\tselection.addRange(range)\n\t\t},\n\t\t/**\n\t\t * Re-emit the input event to the parent\n\t\t *\n\t\t * @param {Event} event the input event\n\t\t */\n\t\tonInput(event) {\n\t\t\tthis.updateValue(event.target.innerHTML)\n\t\t},\n\n\t\t/**\n\t\t * When pasting, sanitize the content, extract text\n\t\t * and render it again\n\t\t *\n\t\t * @param {Event} event the paste event\n\t\t * @fires Event paste the original paste event\n\t\t */\n\t\tonPaste(event) {\n\t\t\t// Either disabled or edit deactivated\n\t\t\tif (!this.canEdit) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tevent.preventDefault()\n\t\t\tconst clipboardData = event.clipboardData\n\n\t\t\t/** The original paste event */\n\t\t\tthis.$emit('paste', event)\n\n\t\t\t// If we have a file or if we don't have any text, ignore\n\t\t\tif (clipboardData.files.length !== 0\n\t\t\t\t|| !Object.values(clipboardData.items).find(item => item?.type.startsWith('text'))) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst text = clipboardData.getData('text')\n\t\t\tconst selection = window.getSelection()\n\n\t\t\t// If no selection, replace the whole data\n\t\t\tif (!selection.rangeCount) {\n\t\t\t\tthis.updateValue(text)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Generate text and insert\n\t\t\tconst range = selection.getRangeAt(0)\n\t\t\tselection.deleteFromDocument()\n\t\t\trange.insertNode(document.createTextNode(text))\n\n\t\t\t// Put cursor at the end of the selection\n\t\t\tconst newRange = document.createRange()\n\t\t\tnewRange.setStart(event.target, range.endOffset)\n\t\t\tnewRange.collapse(true)\n\t\t\tselection.removeAllRanges()\n\t\t\tselection.addRange(newRange)\n\n\t\t\t// Propagate data\n\t\t\tthis.updateValue(this.$refs.contenteditable.innerHTML)\n\t\t},\n\n\t\t/**\n\t\t * Update the value text from the provided html\n\t\t *\n\t\t * @param {string} htmlOrText the html content (or raw text with @mentions)\n\t\t */\n\t\tupdateValue(htmlOrText) {\n\t\t\tconst text = this.parseContent(htmlOrText)\n\t\t\tthis.localValue = text\n\t\t\tthis.$emit('update:modelValue', text)\n\t\t},\n\n\t\t/**\n\t\t * Update content and local value\n\t\t *\n\t\t * @param {string} value the message value\n\t\t */\n\t\tupdateContent(value) {\n\t\t\tconst renderedContent = this.renderContent(value)\n\t\t\tthis.$refs.contenteditable.innerHTML = renderedContent\n\t\t\tthis.localValue = value\n\t\t},\n\n\t\t/**\n\t\t * Because FF have a decade old bug preventing contenteditable=false\n\t\t * to properly be deleted on backspace, we have to hack 👀\n\t\t * https://stackoverflow.com/a/59383394/3885878\n\t\t * https://stackoverflow.com/a/30574622\n\t\t *\n\t\t * @param {Event} event the delete keydown event\n\t\t */\n\t\tonDelete(event) {\n\t\t\tif (!this.isFF || !window.getSelection) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Either disabled or edit deactivated\n\t\t\tif (!this.canEdit) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// fix backspace bug in FF\n\t\t\t// https://bugzilla.mozilla.org/show_bug.cgi?id=685445\n\t\t\t// https://bugzilla.mozilla.org/show_bug.cgi?id=1665167\n\t\t\tconst selection = window.getSelection()\n\t\t\tconst node = event.target\n\t\t\tif (!selection.isCollapsed || !selection.rangeCount) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst curRange = selection.getRangeAt(selection.rangeCount - 1)\n\t\t\tif (curRange.commonAncestorContainer.nodeType === 3 && curRange.startOffset > 0) {\n\t\t\t\t// we are in child selection. The characters of the text node is being deleted\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst range = document.createRange()\n\t\t\tif (selection.anchorNode !== node) {\n\t\t\t\t// selection is in character mode. expand it to the whole editable field\n\t\t\t\trange.selectNodeContents(node)\n\t\t\t\trange.setEndBefore(selection.anchorNode)\n\t\t\t} else if (selection.anchorOffset > 0) {\n\t\t\t\trange.setEnd(node, selection.anchorOffset)\n\t\t\t} else {\n\t\t\t\t// reached the beginning of editable field\n\t\t\t\treturn\n\t\t\t}\n\t\t\trange.setStart(node, range.endOffset - 1)\n\n\t\t\tconst previousNode = range.cloneContents().lastChild\n\t\t\tif (previousNode && previousNode.contentEditable === 'false') {\n\t\t\t\t// this is some rich content, e.g. smile. We should help the user to delete it\n\t\t\t\trange.deleteContents()\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Enter key pressed. Submits if not multiline\n\t\t *\n\t\t * @param {Event} event the keydown event\n\t\t */\n\t\tonEnter(event) {\n\t\t\t// Prevent submitting if multiline\n\t\t\t// or length is over maxlength\n\t\t\t// or autocompletion menu is opened\n\t\t\t// or in a text composition session with IME\n\t\t\tif (this.multiline\n\t\t\t\t|| this.isOverMaxlength\n\t\t\t\t|| this.autocompleteTribute.isActive || this.emojiTribute.isActive || this.linkTribute.isActive\n\t\t\t\t|| this.isComposing) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tthis.$emit('submit', event)\n\t\t},\n\n\t\t/**\n\t\t * Ctrl + Enter key pressed is used to submit\n\t\t *\n\t\t * @param {Event} event the keydown event\n\t\t */\n\t\tonCtrlEnter(event) {\n\t\t\tif (this.isOverMaxlength) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.$emit('submit', event)\n\t\t},\n\n\t\t/**\n\t\t * Debounce the autocomplete function\n\t\t */\n\t\tdebouncedAutoComplete: debounce(async function(search, callback) {\n\t\t\tthis.autoComplete(search, callback)\n\t\t}, 100),\n\n\t\tonKeyUp(event) {\n\t\t\t// prevent tribute from opening on keyup\n\t\t\tevent.stopImmediatePropagation()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// Standalone styling, independent from server\n.rich-contenteditable {\n\tposition: relative;\n\twidth: auto;\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 14px 0;\n\t\tmax-width: fit-content;\n\t\tinset-block-start: 11px;\n\t\tinset-inline: 0;\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(&__input--empty) + &__label {\n\t\tinset-block-start: -10px;\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tfont-weight: 500;\n\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: 5px;\n\t\tmargin-inline-start: 9px;\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t}\n\n\t&__input {\n\t\toverflow-y: auto;\n\t\twidth: auto;\n\t\tmargin: 0;\n\t\tpadding: 8px;\n\t\tcursor: text;\n\t\twhite-space: pre-wrap;\n\t\tword-break: break-word;\n\t\tcolor: var(--color-main-text);\n\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--border-radius-large);\n\t\toutline: none;\n\t\tbackground-color: var(--color-main-background);\n\t\tfont-family: var(--font-face);\n\t\tfont-size: inherit;\n\t\tmin-height: $clickable-area;\n\t\tmax-height: $clickable-area * 5.5;\n\n\t\t&--has-label {\n\t\t\tmargin-top: 10px;\n\t\t}\n\n\t\t// Cannot use :empty because of firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=1513303\n\t\t&--empty:focus:before,\n\t\t&--empty:not(&--has-label):before {\n\t\t\tcontent: attr(aria-placeholder);\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tposition: absolute;\n\t\t}\n\n\t\t&[contenteditable='false']:not(&--disabled) {\n\t\t\tcursor: default;\n\t\t\tbackground-color: transparent;\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-color: transparent;\n\t\t\topacity: 1;\n\t\t\tborder-radius: 0;\n\t\t}\n\n\t\t&--multiline {\n\t\t\tmin-height: $clickable-area * 3;\n\t\t\t// No max for mutiline\n\t\t\tmax-height: none;\n\t\t}\n\n\t\t&--disabled {\n\t\t\topacity: $opacity_disabled;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tborder: 2px solid var(--color-background-darker);\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t}\n\t}\n}\n\n</style>\n\n<style lang=\"scss\">\n.tribute-container, .tribute-container-emoji, .tribute-container-link {\n\tz-index: 9000;\n\toverflow: auto;\n\tmin-width: 250px;\n\tmax-width: 300px;\n\t// Show maximum 4 entries and a half to show scroll\n\t// 44px + 10px padding\n\tmax-height: ($clickable-area + 20px) * 4.5;\n\t// Space it out a bit from the text\n\tmargin: 5px 0;\n\tcolor: var(--color-main-text);\n\tborder-radius: var(--border-radius);\n\tbackground: var(--color-main-background);\n\tbox-shadow: 0 1px 5px var(--color-box-shadow);\n}\n\n.tribute-container-emoji, .tribute-container-link {\n\tmin-width: 200px;\n\tmax-width: 200px;\n\tpadding: 4px;\n\t// Show maximum 5 entries and a half to show scroll\n\tmax-height: 35px * 5 + math.div(35px, 2) !important;\n\n\t&__item {\n\t\tborder-radius: 8px;\n\t\tpadding: 4px 8px;\n\t\tmargin-bottom: 4px;\n\t\topacity: 0.8;\n\t\tcursor: pointer;\n\n\t\t// Take care of long names\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\n\t\t&:last-child {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\n\t\t&__emoji {\n\t\t\tpadding-right: 8px;\n\t\t}\n\t}\n\n\t.highlight {\n\t\topacity: 1;\n\t\tcolor: var(--color-primary-element-light-text);\n\t\tbackground: var(--color-primary-element-light);\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n.tribute-container-link {\n\tmin-width: 200px;\n\tmax-width: 300px;\n\t&__item {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t&__title {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t&__icon {\n\t\t\tmargin: auto 0;\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t\tobject-fit: contain;\n\t\t\tpadding-right: 8px;\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main$1","NcUserStatusIcon","router","_hoisted_1$1","_hoisted_3","_hoisted_4","vue","$props","$options","_hoisted_2$1","_sfc_main","floatingVue","Mixins_richEditor","GenRandomId","result","item","NcAutoCompleteResult","_a","_l10n","text","cb","emojiResults","emoji","referencePickerModal","html","smilesCharacters","char","Tribute__default","tmpElem","eventData","newElem","error","range","selection","event","clipboardData","newRange","htmlOrText","value","renderedContent","node","curRange","search","callback","_hoisted_1","_hoisted_2","_ctx","$data","_cache","args","$event"],"mappings":"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"}

package/dist/chunks/{NcRichContenteditable-rSquEMs2.mjs → NcRichContenteditable-W0BnJp3x.mjs}

@@ -1,16 +1,16 @@
-import "../assets/NcRichContenteditable-nUZdQSMZ.css";
-import { r as v, v as y, B as T, a as c } from "./_l10n-JmazR_zZ.mjs";
+import "../assets/NcRichContenteditable--bkjerM1.css";
+import { r as v, v as y, B as T, a as c } from "./_l10n-uuAvfQgY.mjs";
 import { generateUrl as S } from "@nextcloud/router";
-import { N as k } from "./NcUserStatusIcon--z2VUZIt.mjs";
-import { resolveComponent as E, openBlock as a, createElementBlock as u, createElementVNode as m, normalizeClass as _, normalizeStyle as x, toDisplayString as d, createBlock as A, createCommentVNode as g, resolveDirective as V, withDirectives as w, mergeProps as j, withKeys as p, withModifiers as h } from "vue";
+import { N as k } from "./NcUserStatusIcon-hmLq9dti.mjs";
+import { resolveComponent as E, openBlock as l, createElementBlock as u, createElementVNode as m, normalizeClass as _, normalizeStyle as x, toDisplayString as d, createBlock as A, createCommentVNode as g, resolveDirective as V, withDirectives as w, mergeProps as j, withKeys as p, withModifiers as h } from "vue";
 import { _ as C } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
-import { r as N } from "./index-hX7KRzaJ.mjs";
+import { r as N } from "./index-clpvFjGU.mjs";
 import "../Directives/Tooltip.mjs";
-import { a as R, e as I } from "./emoji-tllD0Rvt.mjs";
-import { n as O, j as U } from "./referencePickerModal-9sd4Ftja.mjs";
+import { a as R, e as I } from "./emoji-mEkenm2t.mjs";
+import { n as O, j as U } from "./referencePickerModal-Fu9pQBdT.mjs";
 import "@nextcloud/axios";
 import "./NcLoadingIcon-DnhhU7Z8.mjs";
-import "./NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_c3135eb8_lang-kB-352LR.mjs";
+import "./NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_48c28b96_lang-yghIE9RS.mjs";
 import { G as b } from "./GenRandomId-VodkdWbp.mjs";
 import "unist-util-visit";
 import "unist-builder";
@@ -22,9 +22,9 @@ import "remark-rehype";
 import "rehype-react";
 import "rehype-external-links";
 import "./NcEmptyContent-Dvt4jhjb.mjs";
-import "./NcSelect-w_Gt1U72.mjs";
-import "./NcTextField-avDV7Ry_.mjs";
-import "./NcButton-nCkJxwsi.mjs";
+import "./NcSelect-HmmLuUCp.mjs";
+import "./NcTextField-qqwMB07_.mjs";
+import "./NcButton-YOXv3gFY.mjs";
 import "../Components/NcModal.mjs";
 import "@nextcloud/event-bus";
 import f from "tributejs/dist/tribute.esm.js";
@@ -87,13 +87,13 @@ const P = {
   class: "autocomplete-result__subline"
 };
 function W(t, e, i, s, o, n) {
-  const l = E("NcUserStatusIcon");
-  return a(), u("div", L, [
+  const a = E("NcUserStatusIcon");
+  return l(), u("div", L, [
     m("div", {
-      class: _([[i.icon, `autocomplete-result__icon--${n.avatarUrl ? "with-avatar" : ""}`], "autocomplete-result__icon"]),
-      style: x(n.avatarUrl ? { backgroundImage: `url(${n.avatarUrl})` } : null)
+      class: _([[i.icon, "autocomplete-result__icon--".concat(n.avatarUrl ? "with-avatar" : "")], "autocomplete-result__icon"]),
+      style: x(n.avatarUrl ? { backgroundImage: "url(".concat(n.avatarUrl, ")") } : null)
     }, [
-      i.status.icon ? (a(), u("span", F, d(i.status && i.status.icon || ""), 1)) : i.status.status && i.status.status !== "offline" ? (a(), A(l, {
+      i.status.icon ? (l(), u("span", F, d(i.status && i.status.icon || ""), 1)) : i.status.status && i.status.status !== "offline" ? (l(), A(a, {
         key: 1,
         class: "autocomplete-result__status",
         status: i.status.status
@@ -104,7 +104,7 @@ function W(t, e, i, s, o, n) {
         class: "autocomplete-result__title",
         title: i.title
       }, d(i.title), 9, K),
-      i.subline ? (a(), u("span", q, d(i.subline), 1)) : g("", !0)
+      i.subline ? (l(), u("span", q, d(i.subline), 1)) : g("", !0)
     ])
   ]);
 }
@@ -211,7 +211,7 @@ const G = {
   ],
   data() {
     return {
-      labelId: `rich-label-${b(5)}`,
+      labelId: "rich-label-".concat(b(5)),
       textSmiles: [],
       tribute: null,
       autocompleteOptions: {
@@ -219,7 +219,7 @@ const G = {
         allowSpaces: !0,
         fillAttr: "id",
         // Search against id and title (display name)
-        lookup: (t) => `${t.id} ${t.title}`,
+        lookup: (t) => "".concat(t.id, " ").concat(t.title),
         // Where to inject the menu popup
         menuContainer: this.menuContainer,
         // Popup mention autocompletion templates
@@ -227,7 +227,10 @@ const G = {
         // Hide if no results
         noMatchTemplate: () => '<span class="hidden"></span>',
         // Inner display of mentions
-        selectTemplate: (t) => this.genSelectTemplate(t?.original?.id),
+        selectTemplate: (t) => {
+          var e;
+          return this.genSelectTemplate((e = t == null ? void 0 : t.original) == null ? void 0 : e.id);
+        },
         // Autocompletion results
         values: this.debouncedAutoComplete
       },
@@ -239,7 +242,7 @@ const G = {
         // Where to inject the menu popup
         menuContainer: this.menuContainer,
         // Popup mention autocompletion templates
-        menuItemTemplate: (t) => this.textSmiles.includes(t.original) ? t.original : `<span class="tribute-container-emoji__item__emoji">${t.original.native}</span> :${t.original.short_name}`,
+        menuItemTemplate: (t) => this.textSmiles.includes(t.original) ? t.original : '<span class="tribute-container-emoji__item__emoji">'.concat(t.original.native, "</span> :").concat(t.original.short_name),
         // Hide if no results
         noMatchTemplate: () => c("No emoji found"),
         // Display raw emoji along with its name
@@ -262,7 +265,7 @@ const G = {
         // Where to inject the menu popup
         menuContainer: this.menuContainer,
         // Popup mention autocompletion templates
-        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>`,
+        menuItemTemplate: (t) => '<img class="tribute-container-link__item__icon" src="'.concat(t.original.icon_url, '"> <span class="tribute-container-link__item__title">').concat(t.original.title, "</span>"),
         // Hide if no results
         noMatchTemplate: () => c("No link provider found"),
         selectTemplate: this.getLink,
@@ -406,7 +409,7 @@ const G = {
         return;
       t.preventDefault();
       const e = t.clipboardData;
-      if (this.$emit("paste", t), e.files.length !== 0 || !Object.values(e.items).find((l) => l?.type.startsWith("text")))
+      if (this.$emit("paste", t), e.files.length !== 0 || !Object.values(e.items).find((a) => a == null ? void 0 : a.type.startsWith("text")))
         return;
       const i = e.getData("text"), s = window.getSelection();
       if (!s.rangeCount) {
@@ -492,8 +495,8 @@ const G = {
   }
 }, X = ["id", "contenteditable", "aria-labelledby", "aria-placeholder"], J = ["id"];
 function Q(t, e, i, s, o, n) {
-  const l = V("tooltip");
-  return a(), u("div", {
+  const a = V("tooltip");
+  return l(), u("div", {
     class: _(["rich-contenteditable", t.$props.class])
   }, [
     w(m("div", j({
@@ -524,16 +527,16 @@ function Q(t, e, i, s, o, n) {
       onPaste: e[7] || (e[7] = (...r) => n.onPaste && n.onPaste(...r)),
       onKeyupCapture: e[8] || (e[8] = h((...r) => n.onKeyUp && n.onKeyUp(...r), ["stop", "prevent"]))
     }), null, 16, X), [
-      [l, n.tooltipString]
+      [a, n.tooltipString]
     ]),
-    i.label ? (a(), u("div", {
+    i.label ? (l(), u("div", {
       key: 0,
       id: o.labelId,
       class: "rich-contenteditable__label"
     }, d(i.label), 9, J)) : g("", !0)
   ], 2);
 }
-const jt = /* @__PURE__ */ C(G, [["render", Q], ["__scopeId", "data-v-cc6795a5"]]);
+const jt = /* @__PURE__ */ C(G, [["render", Q], ["__scopeId", "data-v-96d03e3d"]]);
 export {
   z as N,
   jt as a