decidim-core 0.28.1 → 0.29.0.rc1

data/app/packs/src/decidim/editor/extensions/video_embed/index.js

@@ -9,7 +9,7 @@ const YOUTUBE_REGEX_GLOBAL = /^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu
 const VIMEO_REGEX = /^(https?:\/\/)?(www\.|player\.)?(vimeo\.com)(.+)?$/;
 const VIMEO_REGEX_GLOBAL = /^(https?:\/\/)?(www\.|player\.)?(vimeo\.com)(.+)?$/g;
 
-const isValidYoutubeUrl = (url) => {
+const isValidYouTubeUrl = (url) => {
   return url.match(YOUTUBE_REGEX);
 }
 
@@ -17,7 +17,7 @@ const isValidVimeoUrl = (url) => {
   return url.match(VIMEO_REGEX);
 };
 
-const getEmbedUrlFromYoutubeUrl = (options) => {
+const getEmbedUrlFromYouTubeUrl = (options) => {
   const embedUrl = "https://www.youtube-nocookie.com/embed/";
 
   const { url } = options;
@@ -74,8 +74,8 @@ const getEmbedUrlFromVimeoUrl = (options) => {
 const getEmbedUrlFromVideoUrl = (options) => {
   const { url } = options;
 
-  if (isValidYoutubeUrl(url)) {
-    return getEmbedUrlFromYoutubeUrl(options);
+  if (isValidYouTubeUrl(url)) {
+    return getEmbedUrlFromYouTubeUrl(options);
   } else if (isValidVimeoUrl(url)) {
     return getEmbedUrlFromVimeoUrl(options);
   }

data/app/packs/src/decidim/editor/test/extensions/decidim_kit.test.js

@@ -1,24 +1,9 @@
-/* global jest */
-
 import { Editor } from "@tiptap/core";
 
 import DecidimKit from "src/decidim/editor/extensions/decidim_kit";
 
 import { createEditorContainer } from "src/decidim/editor/test/helpers";
 
-// Mock picmo as it is distributed as an ES6 module that is not fully compatible
-// with Jest without configuration changes.
-jest.mock("@picmo/popup-picker",
-  () => ({
-    createPopup: () => {
-      return {
-        addEventListener: () => {},
-        closeButton: {}
-      }
-    }
-  })
-);
-
 describe("DecidimKit", () => {
   const createEditor = (config = {}) => {
     const editorElement = document.querySelector(".editor .editor-input");

data/app/packs/src/decidim/editor/test/extensions/indent.test.js

@@ -141,7 +141,7 @@ describe("Indent", () => {
       expect(editor.getHTML()).toEqual("<p>Hello, world!</p>");
     });
 
-    it("does not oudent the content if the selection is not at the beginning of the line", async () => {
+    it("does not outdent the content if the selection is not at the beginning of the line", async () => {
       await updateContent(editorElement, '<p class="editor-indent-2">Hello, world!</p>');
 
       editorElement.focus();

data/app/packs/src/decidim/editor/test/fixtures/upload_templates.js

@@ -9,7 +9,7 @@ const dropzoneLocales = {
   uploaded: "Uploaded",
   validating: "Validating...",
   "title_required": "Title is required!",
-  "file_size_too_large": "File size is too large! Maximun file size: 10MB",
+  "file_size_too_large": "File size is too large! Maximum file size: 10MB",
   "validation_error": "Validation error!"
 };
 

data/app/packs/src/decidim/editor/test/helpers.js

@@ -34,26 +34,13 @@ window.DragEvent = class DragEvent extends Event {};
 
 const defaultEditorConfig = {
   contentTypes: {
-    image: ["image/jpeg", "image/png"]
+    image: ["image/jpeg", "image/png", "image/webp"]
   },
   uploadImagesPath: "/editor_images",
   dragAndDropHelpText: "Add images by dragging & dropping or pasting them.",
   uploadDialogSelector: "#upload_dialog"
 };
 
-// Mock picmo as it is distributed as an ES6 module that is not fully compatible
-// with Jest without configuration changes.
-jest.mock("@picmo/popup-picker",
-  () => ({
-    createPopup: () => {
-      return {
-        addEventListener: () => {},
-        closeButton: {}
-      }
-    }
-  })
-);
-
 // Mock the SVG icons import because jest tests are not running through webpack
 jest.mock("images/decidim/remixicon.symbol.svg", () => "test/url.svg");
 

data/app/packs/src/decidim/editor/utilities/paste_transform.js

@@ -40,7 +40,7 @@ const getMsoListStyle = (type, level, styleDefs) => {
   return Object.assign(typeStyle, levelStyle);
 };
 
-const converMsoListStyleToHtml = (listStyle) => {
+const convertMsoListStyleToHtml = (listStyle) => {
   let tag = "ol",
       type = null;
   switch (listStyle["mso-level-number-format"]) {
@@ -108,7 +108,7 @@ export const transformMsDesktop = (html) => {
   elements.forEach((paragraph) => {
     const { type: msoType, level } = detectMsoList(paragraph);
     const listStyle = getMsoListStyle(msoType, level, listStyles);
-    const { tag, type } = converMsoListStyleToHtml(listStyle);
+    const { tag, type } = convertMsoListStyleToHtml(listStyle);
 
     const li = document.createElement("li");
     const pa = document.createElement("p");

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

@@ -28,8 +28,8 @@ export default function updateExternalDomainLinks(element) {
   }
 
   const domain = parts[3].replace(/^www\./, "")
-  const whitelist = window.Decidim.config.get("external_domain_whitelist") || []
-  if (whitelist.includes(domain)) {
+  const allowlist = window.Decidim.config.get("external_domain_allowlist") || []
+  if (allowlist.includes(domain)) {
     return;
   }
 

data/app/packs/src/decidim/external_domain_warning.test.js

@@ -4,7 +4,7 @@ describe("ExternalDomainLink", () => {
   const content = `
     <div id="links">
       <a href="https://github.com/" target="_blank">This is an external link</a>
-      <a href="https://example.com/" target="_blank">This is an external link from a whitelisted domain</a>
+      <a href="https://example.com/" target="_blank">This is an external link from a domain in the allowlist</a>
       <div class="editor-container">
         <a href="https://example.org/" target="_blank">This is an external link within an editor</a>
       </div>
@@ -12,7 +12,7 @@ describe("ExternalDomainLink", () => {
     </div>
   `;
   const config = {
-    "external_domain_whitelist": ["example.com"]
+    "external_domain_allowlist": ["example.com"]
   };
   window.Decidim = {
     config: {
@@ -33,11 +33,11 @@ describe("ExternalDomainLink", () => {
     );
   });
 
-  it("does not update the link to the external link URL when its whitelisted", () => {
+  it("does not update the link to the external link URL when its in the allow list", () => {
     const $link = $("#links a")[1];
 
     expect($link.outerHTML).toEqual(
-      '<a href="https://example.com/" target="_blank">This is an external link from a whitelisted domain</a>'
+      '<a href="https://example.com/" target="_blank">This is an external link from a domain in the allowlist</a>'
     );
   });
 

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

@@ -2,7 +2,7 @@
 /* eslint max-lines: ["error", {"max": 350, "skipBlankLines": true}] */
 
 /**
- * A plain Javascript component that handles the form filter.
+ * A plain JavaScript component that handles the form filter.
  * @class
  * @augments Component
  */
@@ -24,9 +24,9 @@ export default class FormFilterComponent {
     this._onPopState = this._onPopState.bind(this);
 
     if (window.Decidim.PopStateHandler) {
-      this.popStateSubmiter = false;
+      this.popStateSubmitter = false;
     } else {
-      this.popStateSubmiter = true;
+      this.popStateSubmitter = true;
       window.Decidim.PopStateHandler = this.id;
     }
   }
@@ -239,7 +239,7 @@ export default class FormFilterComponent {
     }
 
     // Only one instance should submit the form on browser history navigation
-    if (this.popStateSubmiter) {
+    if (this.popStateSubmitter) {
       Rails.fire(this.$form[0], "submit");
     }
 

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

@@ -1,7 +1,7 @@
 import dayjs from "dayjs"
 
 $(() => {
-  const $impersonationWarning = $(".impersonation-warning");
+  const $impersonationWarning = $("[data-impersonation-warning]");
   if ($impersonationWarning.length) {
     const endsAt = dayjs($impersonationWarning.data("session-ends-at"));
     const exitInterval = setInterval(() => {

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

@@ -17,9 +17,6 @@ import Rails from "@rails/ujs"
 import svg4everybody from "svg4everybody"
 import morphdom from "morphdom"
 
-// vendor customizated scripts (bad practice: these ones should be removed eventually)
-import "src/decidim/vendor/modernizr"
-
 /**
  * Local dependencies
  */
@@ -50,9 +47,13 @@ import "src/decidim/impersonation"
 import "src/decidim/gallery"
 import "src/decidim/direct_uploads/upload_field"
 import "src/decidim/data_consent"
+import "src/decidim/abide_form_validator_fixer"
 import "src/decidim/sw"
+import "src/decidim/sticky_header"
+import "src/decidim/attachments"
 
 // local deps that require initialization
+import formDatePicker from "src/decidim/datepicker/form_datepicker"
 import Configuration from "src/decidim/configuration"
 import ExternalLink from "src/decidim/external_link"
 import updateExternalDomainLinks from "src/decidim/external_domain_warning"
@@ -64,6 +65,7 @@ import addInputEmoji, { EmojiButton } from "src/decidim/input_emoji"
 import FocusGuard from "src/decidim/focus_guard"
 import backToListLink from "src/decidim/back_to_list"
 import markAsReadNotifications from "src/decidim/notifications"
+import handleNotificationActions from "src/decidim/notifications_actions"
 import RemoteModal from "src/decidim/remote_modal"
 import selectActiveIdentity from "src/decidim/identity_selector_dialog"
 import createTooltip from "src/decidim/tooltips"
@@ -72,12 +74,13 @@ import {
   createAccordion,
   createDialog,
   createDropdown,
+  announceForScreenReader,
   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
+// rails-translations could be referenced through a single Decidim.I18n object
 window.Decidim = window.Decidim || {
   config: new Configuration(),
   ExternalLink,
@@ -85,11 +88,39 @@ window.Decidim = window.Decidim || {
   FormValidator,
   addInputEmoji,
   EmojiButton,
-  Dialogs
+  Dialogs,
+  announceForScreenReader
 };
 
 window.morphdom = morphdom
 
+// REDESIGN_PENDING: deprecated
+window.initFoundation = (element) => {
+  $(element).foundation();
+
+  // Fix compatibility issue with the `a11y-accordion-component` package that
+  // uses the `data-open` attribute to indicate the open state for the accordion
+  // trigger.
+  //
+  // In Foundation, these listeners are initiated on the document node always,
+  // regardless of the element for which foundation is initiated. Therefore, we
+  // need the document node here instead of the `element` passed to this
+  // function.
+  const $document = $(document);
+
+  $document.off("click.zf.trigger", window.Foundation.Triggers.Listeners.Basic.openListener);
+  $document.on("click.zf.trigger", "[data-open]", (ev, ...restArgs) => {
+    // Do not apply for the accordion triggers.
+    const accordion = ev.currentTarget?.closest("[data-component='accordion']");
+    if (accordion) {
+      return;
+    }
+
+    // Otherwise call the original implementation
+    Reflect.apply(window.Foundation.Triggers.Listeners.Basic.openListener, ev.currentTarget, [ev, ...restArgs]);
+  });
+};
+
 Rails.start()
 
 /**
@@ -104,10 +135,12 @@ const initializer = (element = document) => {
   window.focusGuard = window.focusGuard || new FocusGuard(document.body);
 
   // REDESIGN_PENDING: deprecated
-  $(element).foundation();
+  window.initFoundation(element);
 
   svg4everybody();
 
+  element.querySelectorAll('input[type="datetime-local"],input[type="date"]').forEach((elem) => formDatePicker(elem))
+
   element.querySelectorAll(".editor-container").forEach((container) => window.createEditor(container));
 
   // initialize character counter
@@ -140,6 +173,7 @@ const initializer = (element = document) => {
   backToListLink(element.querySelectorAll(".js-back-to-list"));
 
   markAsReadNotifications(element)
+  handleNotificationActions(element)
 
   scrollToLastChild(element)
 

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

@@ -232,7 +232,7 @@ export default class InputCharacterCounter {
       } else if (this.maxCharacters - srLength === this.announceThreshold) {
         return this.announcedAt || currentLength;
       // The third branch checks that when deleting characters, we should
-      // announce the next threshold to get accurate annoucement. E.g. when we
+      // announce the next threshold to get accurate announcement. E.g. when we
       // have 750 characters left and the user deletes 100 characters at once,
       // we should announce "700 characters left" after that deletion.
       } else if (srLength < currentLength) {

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

@@ -1,56 +1,150 @@
-import { createPopup } from "@picmo/popup-picker";
-import { screens } from "tailwindcss/defaultTheme"
-import { SUPPORTED_LOCALES } from "emojibase";
+import data from "@emoji-mart/data"
+import i18nEn from "@emoji-mart/data/i18n/en.json"
+import { Picker } from "emoji-mart"
 
 import * as i18n from "src/decidim/i18n";
+import { screens } from "tailwindcss/defaultTheme"
 
-let I18N_CONFIG = null;
-
-export class EmojiButton {
-  static i18n() {
-    if (I18N_CONFIG) {
-      return I18N_CONFIG;
+class EmojiI18n {
+  static isObject(item) {
+    return (item && typeof item === "object" && !Array.isArray(item));
+  }
+  static deepMerge(target, ...sources) {
+    if (!sources.length) {
+      return target;
     }
-
-    let dict = i18n.getMessages("emojis") || null;
-    const buttonText = dict.button;
-    if (dict) {
-      Reflect.deleteProperty(dict, "button");
-      dict = i18n.createDictionary(dict);
+    const source = sources.shift();
+
+    if (this.isObject(target) && this.isObject(source)) {
+      for (const key in source) {
+        if (this.isObject(source[key])) {
+          if (!target[key]) {
+            Object.assign(target, { [key]: {} });
+          }
+          this.deepMerge(target[key], source[key]);
+        } else {
+          Object.assign(target, { [key]: source[key] });
+        }
+      }
     }
 
-    // dictionary = the messages dictionary passed to Picmo
-    // messages = local "extra" messages
-    I18N_CONFIG = {
-      dictionary: dict,
-      messages: { buttonText }
-    }
-    return I18N_CONFIG;
+    return this.deepMerge(target, ...sources);
   }
 
-  // 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");
+    return document.documentElement.getAttribute("lang");
+  }
 
-    if (!SUPPORTED_LOCALES.includes(emojiLocale)) {
-      const secondaryLocale = emojiLocale?.split("-")[0];
-      if (SUPPORTED_LOCALES.includes(secondaryLocale)) {
-        emojiLocale = secondaryLocale;
-      } else {
-        emojiLocale = "en";
-      }
+  static i18n() {
+    return this.deepMerge(i18nEn, i18n.getMessages("emojis"));
+  }
+}
+class EmojiPopUp {
+
+  constructor(pickerOptions, handlerElement) {
+    this.popUp = this.createContainer();
+    this.popUp.appendChild(this.createCloseButton());
+    this.popUp.appendChild(this.addStyles());
+
+    let container = document.createElement("div");
+
+    this.picker = new Picker({
+      parent: container,
+      i18n: EmojiI18n.i18n(),
+      locale: EmojiI18n.locale(),
+      data: data,
+      perLine: 8,
+      theme: "light",
+      emojiButtonSize: 41,
+      emojiSize: 30,
+      ...(window.matchMedia(`(max-width: ${screens.sm})`).matches && { emojiButtonSize: 36 }),
+      ...(window.matchMedia(`(max-width: ${screens.sm})`).matches && { emojiSize: 30 }),
+      ...pickerOptions
+    });
+
+    this.popUp.appendChild(container);
+
+    this.setCoordinates(handlerElement);
+  }
+
+  createCloseButton() {
+    let closeButton = document.createElement("button");
+    closeButton.type = "button";
+    closeButton.classList.add("emoji-picker__closeButton");
+    closeButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>';
+    closeButton.addEventListener("click", () => {
+      this.close();
+    });
+    return closeButton;
+  }
+
+  addStyles() {
+    let style = document.createElement("style");
+    style.innerHTML = `
+    em-emoji-picker {
+    --color-border: rgb(204, 204, 204);
+    --rgb-background: 249, 250, 251;
+    --rgb-color: 0,0,0;
+    --rgb-accent: var(--primary-rgb);
+    --shadow: 5px 5px 15px -8px rgba(0,0,0,0.75);
+    --color-border-over: rgba(0, 0, 0, 0.1);
+    --rgb-input: 235, 235, 235;
+    --background-rgb: var(--primary-rgb);
+    --category-icon-size: 24px;
+
+    border: 1px solid var(--color-border);
+  }
+  `;
+
+    return style;
+  }
+
+  createContainer() {
+    const container = document.createElement("div");
+
+    container.classList.add("emoji-picker__popupContainer");
+    container.classList.add("emoji__decidim");
+    container.id = "picker"
+
+    container.style.position = "absolute";
+    container.style.zIndex = "1000";
+
+    document.body.appendChild(container);
+
+    return container;
+  }
+
+  setCoordinates(handlerElement) {
+    let rect = handlerElement.getBoundingClientRect();
+
+    let leftPosition = window.scrollX + rect.x;
+    let topPosition = window.scrollY + rect.y;
+
+    topPosition -= this.popUp.offsetHeight;
+    leftPosition -= this.popUp.offsetWidth;
+
+    let popUpWidth = window.matchMedia(`(max-width: ${screens.sm})`).matches
+      ? 41 * 9
+      : 36 * 8;
+    // Emoji picker min-width of 352px set in styles.scss in emoji-mart
+    leftPosition -= popUpWidth;
+
+    if (leftPosition < 0) {
+      leftPosition = parseInt((window.screen.availWidth - popUpWidth) / 2, 10) + 30;
     }
 
-    return emojiLocale;
+    this.popUp.style.top = `${topPosition}px`;
+    this.popUp.style.left = `${leftPosition}px`;
   }
 
-  constructor(elem) {
-    const i18nConfig = EmojiButton.i18n();
-    const i18nDictionary = i18nConfig.dictionary;
-    const buttonText = i18nConfig.messages.buttonText;
+  close() {
+    this.popUp.remove();
+  }
+}
 
+export class EmojiButton {
+
+  constructor(elem) {
     const wrapper = document.createElement("span");
     wrapper.className = "emoji__container"
     const btnContainer = document.createElement("span");
@@ -58,7 +152,7 @@ export class EmojiButton {
     const btn = document.createElement("button");
     btn.className = "emoji__button"
     btn.type = "button"
-    btn.setAttribute("aria-label", buttonText)
+    btn.setAttribute("aria-label", EmojiI18n.i18n().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 referenceElement = document.createElement("span");
     referenceElement.className = "emoji__reference";
@@ -74,39 +168,8 @@ export class EmojiButton {
     // belong to for Foundation Abide to show them automatically.
     parent.querySelectorAll(".form-error").forEach((el) => wrapper.appendChild(el));
 
-    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
-    });
-
-    // 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}) => {
+    let emojiSelectHandler = (emojidata) => {
+      let emoji = emojidata.native;
       if (elem.contentEditable === "true") {
         if (elem.editor) {
           elem.editor.chain().insertContent(` ${emoji} `).focus().run();
@@ -124,6 +187,42 @@ export class EmojiButton {
 
       const event = new Event("emoji.added");
       elem.dispatchEvent(event);
+    }
+
+    let handlerPicker = () => {
+      let popUp = document.getElementById("picker");
+      if (popUp) {
+        // We close the picker
+        popUp.remove();
+        return;
+      }
+
+      let pickerOptions = {
+        onEmojiSelect: (emoji) => emojiSelectHandler(emoji),
+        onClickOutside: (event) => {
+          if (event.target.parentNode === btn) {
+            return;
+          }
+          handlerPicker();
+        }
+      }
+
+      // eslint-disable-next-line no-new
+      new EmojiPopUp(pickerOptions, btn);
+    }
+
+    btn.addEventListener("click", handlerPicker);
+
+    elem.addEventListener("emoji.added", 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");
+      }
     });
   }
 }

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

@@ -27,7 +27,7 @@ $(() => {
         cb([])
       }).always(() => {
       // This function runs Tribute every single time you type something
-      // So we must evalute DOM properties after each
+      // So we must evaluate DOM properties after each
         const $parent = $(tribute.current.element).parent()
         $parent.addClass("is-active")
 

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

@@ -42,7 +42,7 @@ const mentionsInitializer = () => {
         cb([])
       }).always(() => {
       // This function runs Tribute every single time you type something
-      // So we must evalute DOM properties after each
+      // So we must evaluate DOM properties after each
         const $parent = $(tribute.current.element).parent();
         $parent.addClass("is-active");
 

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

@@ -0,0 +1,40 @@
+/**
+ * This file handles the interactions of actions in notifications (if any)
+ * @param {HTMLElement} node target node
+ * @returns {void}
+ */
+export default function(node = document) {
+  const actions = node.querySelectorAll("[data-notification-action]")
+  if (!actions.length) {
+    return;
+  }
+
+  const extractMessage = (detail) => {
+    return detail && detail.message || detail[0] && detail[0].message
+  };
+
+  const resolvePanel = (panel, message, klass) => {
+    panel.classList.remove("spinner-container");
+    if (message) {
+      panel.innerHTML = `<div class="callout ${klass}">${message}</div>`;
+    } else {
+      panel.innerHTML = "";
+    }
+  };
+
+  actions.forEach((action) => {
+    const panel = action.closest(".notification__snippet-actions")
+    action.addEventListener("ajax:beforeSend", () => {
+      panel.classList.add("spinner-container");
+      panel.querySelectorAll("[data-notification-action]").forEach((el) => {
+        el.disabled = true;
+      });
+    });
+    action.addEventListener("ajax:success", (event) => {
+      resolvePanel(panel, extractMessage(event.detail), "success");
+    });
+    action.addEventListener("ajax:error", (event) => {
+      resolvePanel(panel, extractMessage(event.detail) || window.Decidim.config.get("notifications").action_error, "alert");
+    });
+  });
+}