decidim-core 0.27.8 → 0.28.0.rc4

data/app/packs/src/decidim/index.js

@@ -1,88 +1,184 @@
-/* eslint-disable no-invalid-this */
+/* eslint-disable max-lines */
 
+/**
+ * External dependencies
+ */
+
+// external deps with no initialization
+import "core-js/stable";
+import "regenerator-runtime/runtime";
+import "jquery"
+
+// external deps that require initialization
+import Rails from "@rails/ujs"
 import svg4everybody from "svg4everybody"
-import formDatePicker from "src/decidim/form_datepicker"
-import fixDropdownMenus from "src/decidim/dropdowns_menus"
-import createQuillEditor from "src/decidim/editor"
+import morphdom from "morphdom"
+
+// vendor customizated scripts (bad practice: these ones should be removed eventually)
+import "./vendor/modernizr"
+
+/**
+ * Local dependencies
+ */
+
+// local deps with no initialization
+import "src/decidim/input_tags"
+import "src/decidim/input_hashtags"
+import "src/decidim/input_mentions"
+import "src/decidim/input_multiple_mentions"
+import "src/decidim/input_autojump"
+import "src/decidim/history"
+import "src/decidim/callout"
+import "src/decidim/clipboard"
+import "src/decidim/append_elements"
+import "src/decidim/user_registrations"
+import "src/decidim/account_form"
+import "src/decidim/append_redirect_url_to_modals"
+import "src/decidim/form_attachments"
+import "src/decidim/form_remote"
+import "src/decidim/delayed"
+import "src/decidim/vizzs"
+import "src/decidim/responsive_horizontal_tabs"
+import "src/decidim/security/selfxss_warning"
+import "src/decidim/session_timeouter"
+import "src/decidim/confirm"
+import "src/decidim/results_listing"
+import "src/decidim/impersonation"
+import "src/decidim/gallery"
+import "src/decidim/direct_uploads/upload_field"
+import "src/decidim/data_consent"
+import "src/decidim/sw"
+
+// local deps that require initialization
 import Configuration from "src/decidim/configuration"
 import ExternalLink from "src/decidim/external_link"
 import updateExternalDomainLinks from "src/decidim/external_domain_warning"
-import InputCharacterCounter from "src/decidim/input_character_counter"
+import scrollToLastChild from "src/decidim/scroll_to_last_child"
+import InputCharacterCounter, { createCharacterCounter } from "src/decidim/input_character_counter"
 import FormValidator from "src/decidim/form_validator"
-import CommentsComponent from "src/decidim/comments/comments.component"
-import DataPicker from "src/decidim/data_picker"
 import FormFilterComponent from "src/decidim/form_filter"
-import addInputEmoji from "src/decidim/input_emoji"
-import dialogMode from "src/decidim/dialog_mode"
+import addInputEmoji, { EmojiButton } from "src/decidim/input_emoji"
 import FocusGuard from "src/decidim/focus_guard"
 import backToListLink from "src/decidim/back_to_list"
-
-window.Decidim = window.Decidim || {};
-window.Decidim.config = new Configuration()
-window.Decidim.ExternalLink = ExternalLink;
-window.Decidim.InputCharacterCounter = InputCharacterCounter;
-window.Decidim.FormValidator = FormValidator;
-window.Decidim.DataPicker = DataPicker;
-window.Decidim.CommentsComponent = CommentsComponent;
-window.Decidim.addInputEmoji = addInputEmoji;
-
-$(() => {
-  window.theDataPicker = new DataPicker($(".data-picker"));
-  window.focusGuard = new FocusGuard(document.querySelector("body"));
-
-  $(document).foundation();
-  $(document).on("open.zf.reveal", (ev) => {
-    dialogMode($(ev.target));
-  });
-
-  // Trap the focus within the mobile menu if the user enters it. This is an
-  // accessibility feature forcing the focus within the offcanvas container
-  // which holds the mobile menu.
-  $("#offCanvas").on("openedEnd.zf.offCanvas", (ev) => {
-    ev.target.querySelector(".main-nav a").focus();
-    window.focusGuard.trap(ev.target);
-  }).on("closed.zf.offCanvas", () => {
-    window.focusGuard.disable();
-  });
-
-  fixDropdownMenus();
+import markAsReadNotifications from "src/decidim/notifications"
+import RemoteModal from "src/decidim/remote_modal"
+import selectActiveIdentity from "src/decidim/identity_selector_dialog"
+import createTooltip from "src/decidim/tooltips"
+import createToggle from "src/decidim/toggle"
+import {
+  createAccordion,
+  createDialog,
+  createDropdown,
+  Dialogs
+} from "src/decidim/a11y"
+import changeReportFormBehavior from "src/decidim/change_report_form_behavior"
+
+// bad practice: window namespace should avoid be populated as much as possible
+// rails-translations could be referrenced through a single Decidim.I18n object
+window.Decidim = window.Decidim || {
+  config: new Configuration(),
+  ExternalLink,
+  InputCharacterCounter,
+  FormValidator,
+  addInputEmoji,
+  EmojiButton,
+  Dialogs
+};
+
+window.morphdom = morphdom
+
+Rails.start()
+
+/**
+ * Initializer event for those script who require to be triggered
+ * when the page is loaded
+ *
+ * @param {HTMLElement} element target node
+ * @returns {void}
+ */
+const initializer = (element = document) => {
+  // focus guard must be initialized only once
+  window.focusGuard = window.focusGuard || new FocusGuard(document.body);
+
+  // REDESIGN_PENDING: deprecated
+  $(element).foundation();
 
   svg4everybody();
 
-  // Prevent data-open buttons e.g. from submitting the underlying form in
-  // authorized action buttons.
-  $("[data-open]").on("click", (event) => {
-    event.preventDefault();
-  });
-
-  formDatePicker();
+  element.querySelectorAll(".editor-container").forEach((container) => window.createEditor(container));
 
-  $(".editor-container").each((_idx, container) => {
-    createQuillEditor(container);
-  });
+  // initialize character counter
+  $("input[type='text'], textarea, .editor>input[type='hidden']", element).each((_i, elem) => {
+    const $input = $(elem);
 
-  $('a[target="_blank"]').each((_i, elem) => {
-    const $link = $(elem);
-    $link.data("external-link", new ExternalLink($link));
-  });
+    if (!$input.is("[minlength]") && !$input.is("[maxlength]")) {
+      return;
+    }
 
-  // Mount comments component
-  $("[data-decidim-comments]").each((_i, el) => {
-    const $el = $(el);
-    const comments = new CommentsComponent($el, $el.data("decidim-comments"));
-    comments.mountComponent();
-    $(el).data("comments", comments);
+    createCharacterCounter($input);
   });
 
-  $("form.new_filter").each(function () {
+  $("form.new_filter", element).each(function () {
+    // eslint-disable-next-line no-invalid-this
     const formFilter = new FormFilterComponent($(this));
 
     formFilter.mountComponent();
   })
 
-  updateExternalDomainLinks($("body"))
+  element.querySelectorAll("a[target=\"_blank\"]:not([data-external-link=\"false\"])").forEach((elem) => {
+    // both functions (updateExternalDomainLinks and ExternalLink) are related, so if we disable one, the other also
+    updateExternalDomainLinks(elem)
+
+    return new ExternalLink(elem)
+  })
+
+  addInputEmoji(element)
+
+  backToListLink(element.querySelectorAll(".js-back-to-list"));
+
+  markAsReadNotifications(element)
+
+  scrollToLastChild(element)
+
+  element.querySelectorAll('[data-component="accordion"]').forEach((component) => createAccordion(component))
+
+  element.querySelectorAll('[data-component="dropdown"]').forEach((component) => createDropdown(component))
+
+  element.querySelectorAll("[data-dialog]").forEach((component) => createDialog(component))
+
+  // Initialize available remote modals (ajax-fetched contents)
+  element.querySelectorAll("[data-dialog-remote-url]").forEach((elem) => new RemoteModal(elem))
+
+  // Add event listeners to identity modal
+  element.querySelectorAll("[data-user-identity]").forEach((elem) => selectActiveIdentity(elem))
+
+  // Initialize data-tooltips
+  element.querySelectorAll("[data-tooltip]").forEach((elem) => createTooltip(elem))
+
+  // Initialize data-toggles
+  element.querySelectorAll("[data-toggle]").forEach((elem) => createToggle(elem))
+
+  element.querySelectorAll(".new_report").forEach((elem) => changeReportFormBehavior(elem))
+}
+
+// If no jQuery is used the Tribute feature used in comments to autocomplete
+// mentions stops working
+// document.addEventListener("DOMContentLoaded", () => {
+$(() => initializer());
 
-  addInputEmoji()
+// Run initializer action over the new DOM elements
+document.addEventListener("remote-modal:loaded", ({ detail }) => initializer(detail));
+document.addEventListener("ajax:loaded", ({ detail }) => initializer(detail));
 
-  backToListLink(document.querySelectorAll(".js-back-to-list"));
+// Run initializer action over the new DOM elements (for example after comments polling)
+document.addEventListener("comments:loaded", (event) => {
+  const commentsIds = event.detail.commentsIds;
+  if (commentsIds) {
+    commentsIds.forEach((commentId) => {
+      const commentsContainer = document.getElementById(`comment_${commentId}`);
+      if (commentsContainer) {
+        initializer(commentsContainer)
+      }
+    });
+  }
 });

data/app/packs/src/decidim/input_autojump.js

@@ -4,7 +4,7 @@ $(() => {
 
   // Initialize
   $inputs.on("keydown", (event) => {
-    // Don't do anything if there is selected text
+    // Do not do anything if there is selected text
     if (event.target.selectionStart !== event.target.selectionEnd) {
       return;
     }

data/app/packs/src/decidim/input_character_counter.js

@@ -62,43 +62,51 @@ export default class InputCharacterCounter {
     if (this.$target.length > 0) {
       this.$target.attr("id", targetId)
     } else {
-      this.$target = $(`<span id="${targetId}" class="form-input-extra-before" />`)
+      const span = document.createElement("span")
+      span.id = targetId
+      span.className = "input-character-counter__text"
+
+      this.$target = $(span)
+
+      const container = document.createElement("span")
+      container.className = "input-character-counter__container"
+      container.appendChild(span)
 
       // If input is a hidden for WYSIWYG editor add it at the end
       if (this.$input.parent().is(".editor")) {
         this.$input.parent().after(this.$target);
-      }
-      // Prefix and suffix columns are wrapped in columns, so put the
-      // character counter before that.
-      else if (
-        this.$input.parent().is(".columns") &&
-        this.$input.parent().parent().is(".row")
-      ) {
-        this.$input.parent().parent().after(this.$target);
       } else {
-        this.$input.after(this.$target);
+        const wrapper = document.createElement("span")
+        wrapper.className = "input-character-counter"
+
+        // The form errors need to be in the same container with the field they
+        // belong to for Foundation Abide to show them automatically.
+        this.$input.next(".form-error").addBack().wrapAll(wrapper)
+        this.$input.after(container);
       }
     }
 
     if (this.$target.length > 0 && (this.maxCharacters > 0 || this.minCharacters > 0)) {
-      // Create the screen reader target element. We don't want to constantly
+      // Create the screen reader target element. We do not want to constantly
       // announce every change to screen reader, only occasionally.
-      this.$srTarget = $(
-        `<span role="status" id="${targetId}_sr" class="show-for-sr remaining-character-count-sr" />`
-      );
-      this.$target.before(this.$srTarget);
+      const screenReaderId = `${targetId}_sr`;
+      this.$srTarget = $(`#${screenReaderId}`);
+      if (!this.$srTarget.length) {
+        this.$srTarget = $(
+          `<span role="status" id="${screenReaderId}" class="sr-only remaining-character-count-sr" />`
+        );
+        this.$target.before(this.$srTarget);
+      }
       this.$target.attr("aria-hidden", "true");
-
       this.$userInput = this.$input;
 
-      // In WYSIWYG editors (Quill) we need to find the active editor from the
-      // DOM node. Quill has the experimental "find" method that should work
-      // fine in this case
-      if (Quill && this.$input.parent().is(".editor")) {
-        // Wait until the next javascript loop so Quill editors are created
+      // In WYSIWYG editors (TipTap) we need to find the active editor from the
+      // DOM node.
+      if (this.$input.parent().is(".editor")) {
+        // Wait until the next javascript loop so WYSIWYG editors are created
         setTimeout(() => {
-          this.editor = Quill.find(this.$input.siblings(".editor-container")[0]);
-          this.$userInput = $(this.editor.root);
+          this.editor = this.$input.siblings(".editor-container")[0].querySelector(".ProseMirror").editor;
+          this.$userInput = $(this.editor.view.dom);
           this.initialize();
         });
       } else {
@@ -129,7 +137,7 @@ export default class InputCharacterCounter {
 
   bindEvents() {
     if (this.editor) {
-      this.editor.on("text-change", () => {
+      this.editor.on("update", () => {
         this.handleInput();
       });
     } else {
@@ -164,7 +172,7 @@ export default class InputCharacterCounter {
   updateInputLength() {
     this.previousInputLength = this.inputLength;
     if (this.editor) {
-      this.inputLength = this.editor.getLength();
+      this.inputLength = this.editor.storage.characterCount.characters();
     } else {
       this.inputLength = this.$input.val().length;
     }
@@ -264,7 +272,7 @@ export default class InputCharacterCounter {
       if (remaining === 1) {
         message = MESSAGES.charactersLeft.one;
       }
-      this.$input[0].dispatchEvent(
+      this.$userInput[0].dispatchEvent(
         new CustomEvent("characterCounter", {detail: {remaining: remaining}})
       );
       showMessages.push(message.replace(COUNT_KEY, remaining));
@@ -302,16 +310,4 @@ const createCharacterCounter = ($input) => {
   }
 }
 
-$(() => {
-  $("input[type='text'], textarea, .editor>input[type='hidden']").each((_i, elem) => {
-    const $input = $(elem);
-
-    if (!$input.is("[minlength]") && !$input.is("[maxlength]")) {
-      return;
-    }
-
-    createCharacterCounter($input);
-  });
-});
-
 export {InputCharacterCounter, createCharacterCounter};

data/app/packs/src/decidim/input_emoji.js

@@ -1,65 +1,143 @@
-import {EmojiButton} from "@joeattardi/emoji-button";
+import { createPopup } from "@picmo/popup-picker";
+import { screens } from "tailwindcss/defaultTheme"
+import { SUPPORTED_LOCALES } from "emojibase";
 
-// eslint-disable-next-line require-jsdoc
-export default function addInputEmoji() {
-  const containers = document.querySelectorAll("[data-input-emoji]");
+import * as i18n from "src/decidim/i18n";
 
-  if (containers.length) {
-    containers.forEach((elem) => {
-      const picker = new EmojiButton({
-        position: "bottom-end",
-        rootElement: elem.closest("form")?.parentElement || document.body,
-        zIndex: 2000
-      });
-
-      // if the selector is inside a modal window
-      // this allows shows the emoji menu uncut
-      const reveal = elem.closest("[data-reveal]")
-      if (reveal) {
-        reveal.style.overflowY = "unset"
-      }
+let I18N_CONFIG = null;
+
+export class EmojiButton {
+  static i18n() {
+    if (I18N_CONFIG) {
+      return I18N_CONFIG;
+    }
+
+    let dict = i18n.getMessages("emojis") || null;
+    const buttonText = dict.button;
+    if (dict) {
+      Reflect.deleteProperty(dict, "button");
+      dict = i18n.createDictionary(dict);
+    }
+
+    // dictionary = the messages dictionary passed to Picmo
+    // messages = local "extra" messages
+    I18N_CONFIG = {
+      dictionary: dict,
+      messages: { buttonText }
+    }
+    return I18N_CONFIG;
+  }
+
+  // Get the current locale used for the emoji database
+  //
+  // @returns {string} the current locale if it is supported by emoji base, or english as the fallback locale
+  static locale() {
+    let emojiLocale = document.documentElement.getAttribute("lang");
 
-      const wrapper = document.createElement("div");
-      wrapper.className = "emoji__container"
-      const btnContainer = document.createElement("div");
-      btnContainer.className = "emoji__trigger"
-      const btn = document.createElement("div");
-      btn.className = "emoji__button"
-      btn.innerHTML = '<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="smile" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"></path></svg>'
-
-      const parent = elem.parentNode;
-      parent.insertBefore(wrapper, elem);
-      wrapper.appendChild(elem);
-      wrapper.appendChild(btnContainer);
-      btnContainer.appendChild(btn);
-
-      // The form errors need to be in the same container with the field they
-      // belong to for Foundation Abide to show them automatically.
-      parent.querySelectorAll(".form-error").forEach((el) => wrapper.appendChild(el));
-
-      let handlerPicker = function () {
-        picker.togglePicker(btnContainer);
+    if (!SUPPORTED_LOCALES.includes(emojiLocale)) {
+      const secondaryLocale = emojiLocale?.split("-")[0];
+      if (SUPPORTED_LOCALES.includes(secondaryLocale)) {
+        emojiLocale = secondaryLocale;
+      } else {
+        emojiLocale = "en";
       }
+    }
+
+    return emojiLocale;
+  }
+
+  constructor(elem) {
+    const i18nConfig = EmojiButton.i18n();
+    const i18nDictionary = i18nConfig.dictionary;
+    const buttonText = i18nConfig.messages.buttonText;
+
+    const wrapper = document.createElement("span");
+    wrapper.className = "emoji__container"
+    const btnContainer = document.createElement("span");
+    btnContainer.className = "emoji__trigger"
+    const btn = document.createElement("button");
+    btn.className = "emoji__button"
+    btn.type = "button"
+    btn.setAttribute("aria-label", buttonText)
+    btn.innerHTML = '<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="smile" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"></path></svg>'
+    const referenceElement = document.createElement("span");
+    referenceElement.className = "emoji__reference";
+
+    const parent = elem.parentNode;
+    parent.insertBefore(wrapper, elem);
+    wrapper.appendChild(elem);
+    wrapper.appendChild(btnContainer);
+    wrapper.appendChild(referenceElement);
+    btnContainer.appendChild(btn);
+
+    // The form errors need to be in the same container with the field they
+    // belong to for Foundation Abide to show them automatically.
+    parent.querySelectorAll(".form-error").forEach((el) => wrapper.appendChild(el));
 
-      btnContainer.addEventListener("click", handlerPicker);
+    const picker = createPopup({
+      autoFocus: "search",
+      locale: EmojiButton.locale(),
+      i18n: i18nDictionary,
+      // shrink the size of the emoji when mobile
+      ...(window.matchMedia(`(max-width: ${screens.sm})`).matches && { emojiSize: "1.5rem" })
+    }, {
+      position: "bottom-end",
+      triggerElement: btn,
+      className: "emoji__decidim",
+      referenceElement
+    });
 
-      elem.addEventListener("characterCounter", (event) => {
-        if (event.detail.remaining >= 4) {
-          btnContainer.addEventListener("click", handlerPicker);
-          btnContainer.removeAttribute("style");
+    // Prevent the picker close button to submit the comment form
+    picker.closeButton.type = "button";
+
+    let handlerPicker = () => {
+      picker.toggle();
+    }
+
+    btn.addEventListener("click", handlerPicker);
+
+    elem.addEventListener("characterCounter", (event) => {
+      if (event.detail.remaining >= 4) {
+        btn.addEventListener("click", handlerPicker);
+        btn.removeAttribute("style");
+      } else {
+        btn.removeEventListener("click", handlerPicker);
+        btn.setAttribute("style", "color:lightgrey");
+      }
+    });
+
+    picker.addEventListener("emoji:select", ({emoji}) => {
+      if (elem.contentEditable === "true") {
+        if (elem.editor) {
+          elem.editor.chain().insertContent(` ${emoji} `).focus().run();
         } else {
-          btnContainer.removeEventListener("click", handlerPicker);
-          btnContainer.setAttribute("style", "color:lightgrey");
+          elem.innerHTML += ` ${emoji} `
         }
-      });
+      } else {
+        elem.value += ` ${emoji} `
+      }
 
+      // Make sure the input event is dispatched on the input/textarea elements
+      if (elem.tagName === "TEXTAREA" || elem.tagName === "INPUT") {
+        elem.dispatchEvent(new Event("input"));
+      }
 
-      picker.on("emoji", ({emoji}) => {
-        elem.value += ` ${emoji} `
+      const event = new Event("emoji.added");
+      elem.dispatchEvent(event);
+    });
+  }
+}
+
+/**
+ * Adds the input emojis to the input elements that are defined to have them.
+ *
+ * @param {HTMLElement} element target node
+ * @returns {void}
+ */
+export default function addInputEmoji(element = document) {
+  const containers = element.querySelectorAll("[data-input-emoji]");
 
-        const event = new Event("emoji.added");
-        elem.dispatchEvent(event);
-      });
-    })
+  if (containers.length) {
+    containers.forEach((elem) => new EmojiButton(elem))
   }
 };

data/app/packs/src/decidim/input_hashtags.js

@@ -5,28 +5,20 @@ $(() => {
   const $hashtagContainer = $(".js-hashtags");
   const nodatafound = $hashtagContainer.attr("data-noresults");
 
+  // The editor implements hashtags functionality by itself so it is not needed
+  // to attach tribute to the rich text editor.
+  if ($hashtagContainer.parent().hasClass("editor")) {
+    return;
+  }
+
   let noMatchTemplate = null
   if (nodatafound) {
     noMatchTemplate = () => `<li>${nodatafound}</li>`;
   }
 
-  // Listener for the event triggered by quilljs
-  let cursor = "";
-  $hashtagContainer.on("quill-position", function(event) {
-    if (event.detail !== null) {
-      // When replacing the text content after selecting a hashtag, we only need
-      // to know the hashtag's start position as that is the point which we want
-      // to replace.
-      let quill = event.target.__quill;
-      if (quill.getText(event.detail.index - 1, 1) === "#") {
-        cursor = event.detail.index;
-      }
-    }
-  });
-
   /* eslint no-use-before-define: ["error", { "variables": false }]*/
   let remoteSearch = function(text, cb) {
-    $.post(window.Decidim.config.get("api_path"), {query: `{hashtags(name:"${text}") {name}}`}).
+    $.post("/api", {query: `{hashtags(name:"${text}") {name}}`}).
 
       then((response) => {
         let data = response.data.hashtags || {};
@@ -62,30 +54,6 @@ $(() => {
       if (typeof item === "undefined") {
         return null;
       }
-      if (this.range.isContentEditable(this.current.element)) {
-        // Check quill.js
-        if ($(this.current.element).hasClass("ql-editor")) {
-          let editorContainer = $(this.current.element).parent().get(0);
-          let quill = editorContainer.__quill;
-          quill.insertText(cursor - 1, `#${item.original.name} `, Quill.sources.API);
-          // cursor position + hashtag length + "#" sign + space
-          let position = cursor + item.original.name.length + 2;
-
-          let next = 0;
-          if (quill.getLength() > position) {
-            next = position
-          } else {
-            next = quill.getLength() - 1
-          }
-          // Workaround https://github.com/quilljs/quill/issues/731
-          setTimeout(function () {
-            quill.setSelection(next, 0);
-          }, 500);
-
-          return ""
-        }
-        return `<span contenteditable="false">#${item.original.name}</span>`;
-      }
       return `#${item.original.name}`;
     },
     menuItemTemplate: function(item) {
@@ -94,21 +62,6 @@ $(() => {
     }
   });
 
-  // Tribute needs to be attached to the `.ql-editor` element as said at:
-  // https://github.com/quilljs/quill/issues/1816
-  //
-  // For this reason we need to wait a bit for quill to initialize itself.
-  setTimeout(function() {
-    $hashtagContainer.each((index, item) => {
-      let $qlEditor = $(".ql-editor", item);
-      if ($qlEditor.length > 0) {
-        tribute.attach($qlEditor);
-      } else {
-        tribute.attach(item);
-      }
-    });
-  }, 1000);
-
   // DOM manipulation
   $hashtagContainer.on("focusin", (event) => {
     // Set the parent container relative to the current element