decidim-core 0.32.0 → 0.32.2

data/app/packs/src/decidim/editor/common/suggestion.js

@@ -1,5 +1,3 @@
-/* global jest */
-
 export const createSuggestionRenderer = (node, { itemConverter } = {}) => () => {
   let suggestion = null;
   let suggestionItems = null;
@@ -55,25 +53,25 @@ export const createSuggestionRenderer = (node, { itemConverter } = {}) => () =>
       return;
     }
 
-    const command = selectCommand;
-    if (currentRange && !window.isTestEnvironment && typeof jest === "undefined") {
-      // Fixes an issue that after selecting the item, the written text will be
-      // placed after the newly added suggestion.
-      //
-      // NOTE: With JSDom/Jest this does not work even if we add a delay after
-      // changing the text in the selection. This is because the range remains
-      // the same for the `command` below which is why the underlying code is
-      // trying to do an insertion at a position that is out of range after we
-      // have already deleted the content.
-      currentEditor.chain().focus().setTextSelection(currentRange).command(({ tr, dispatch }) => {
-        if (dispatch) {
-          tr.replaceSelectionWith(currentEditor.schema.text("  "));
-        }
-
-        return true;
-      }).setTextSelection({ from: currentRange.from, to: currentRange.from }).run();
+    const item = convertItem(items[idx]);
+    if (currentRange) {
+      const docSize = currentEditor.state.doc.content.size;
+      const isValidRange = currentRange.from >= 0 && currentRange.to <= docSize && currentRange.from <= currentRange.to;
+
+      if (isValidRange) {
+        const nodeType = currentEditor.schema.nodes[items[idx].__typename === "User"
+          ? "mention"
+          : "mentionResource"];
+        currentEditor.chain().focus().setTextSelection(currentRange).insertContent({
+          type: nodeType.name,
+          attrs: item
+        }).insertContent(" ").run();
+        return;
+      }
     }
-    command(convertItem(items[idx]));
+
+    const command = selectCommand;
+    command(item);
   };
 
   const showSuggestions = ({ items, clientRect }) => {
@@ -87,7 +85,7 @@ export const createSuggestionRenderer = (node, { itemConverter } = {}) => () =>
     suggestion.classList.remove("hidden", "hide");
     suggestion.innerHTML = "";
     items.forEach((rawItem, idx) => {
-      const { label, id, help } = convertItem(rawItem);
+      const { label, id, help, avatarUrl, displayLabel } = convertItem(rawItem);
       const suggestionItem = document.createElement("button");
       suggestionItem.type = "button";
       suggestionItem.classList.add("editor-suggestions-item");
@@ -103,7 +101,19 @@ export const createSuggestionRenderer = (node, { itemConverter } = {}) => () =>
       if (help) {
         suggestionItem.disabled = true;
       }
-      suggestionItem.textContent = label;
+
+      if (avatarUrl) {
+        const avatar = document.createElement("img");
+        avatar.classList.add("editor-suggestions-item-avatar");
+        avatar.src = avatarUrl;
+        avatar.alt = label;
+        suggestionItem.append(avatar);
+      }
+
+      const labelElement = document.createElement("span");
+      labelElement.classList.add("editor-suggestions-item-label");
+      labelElement.textContent = displayLabel || label;
+      suggestionItem.append(labelElement);
       suggestion.append(suggestionItem);
 
       suggestionItem.addEventListener("click", (ev) => {

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

@@ -29,9 +29,11 @@ const searchUsers = async (queryText) => {
 export default Mention.extend({
   addOptions() {
     const parentOptions = this.parent?.();
+    const searchPromptMessage = parentOptions?.searchPromptMessage || "Type to search participants";
 
     return {
       ...parentOptions,
+      searchPromptMessage,
       renderText({ node }) {
         // renderText is used to create the DOM representation
         const label = node.attrs.label ?? node.attrs.id;
@@ -42,16 +44,25 @@ export default Mention.extend({
         allowSpaces: true,
         items: async ({ query }) => {
           if (query.length < 2) {
-            return [];
+            return [{ label: searchPromptMessage, help: true }];
           }
 
           const data = await searchUsers(query);
-          const sorted = data.sort((user) => user.nickname.slice(1));
+          const sorted = data.sort((first, second) => first.nickname.localeCompare(second.nickname));
           return sorted.slice(0, 5);
         },
         render: createSuggestionRenderer(this, {
           itemConverter: (user) => {
-            return { id: user.nickname, label: `${user.nickname} (${user.name})` }
+            if (user.help) {
+              return { label: user.label, help: true }
+            }
+
+            return {
+              id: user.nickname,
+              label: user.nickname,
+              displayLabel: `${user.nickname} (${user.name})`,
+              avatarUrl: user.avatarUrl
+            }
           }
         })
       }

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

@@ -87,5 +87,9 @@ export default function createEditor(container) {
       : editor.getHTML();
   });
 
+  editor.view.dom.addEventListener("move-cursor-to-end", () => {
+    editor.chain().focus("end").run();
+  });
+
   return editor;
 }

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

@@ -1,6 +1,6 @@
 /* global jest, global */
 
-import { createBasicEditor, updateContent } from "src/decidim/editor/test/helpers";
+import { createBasicEditor, updateContent, sleep } from "src/decidim/editor/test/helpers";
 
 import Mention from "src/decidim/editor/extensions/mention";
 
@@ -87,8 +87,11 @@ describe("Mention", () => {
     const items = suggestions.querySelectorAll(".editor-suggestions-item");
     expect(items.length).toEqual(expectedTags.length);
     for (const item of items) {
-      expect(expectedTags.includes(item.textContent)).toBe(true);
+      expect(expectedTags.includes(item.querySelector(".editor-suggestions-item-label").textContent)).toBe(true);
     }
+
+    expect(items[0].querySelector(".editor-suggestions-item-avatar")).toBeInstanceOf(HTMLImageElement);
+    expect(items[0].querySelector(".editor-suggestions-item-avatar").getAttribute("src")).toBe("/avatars/joannadoe.jpg");
   });
 
   it("does not display the suggestions when less than two characters are entered", async () => {
@@ -97,9 +100,12 @@ describe("Mention", () => {
 
     const suggestions = document.querySelector(".editor-suggestions");
     expect(suggestions).toBeInstanceOf(HTMLDivElement);
-    expect(suggestions.childNodes.length).toBe(0);
-    expect(suggestions.classList.contains("hidden")).toBe(true);
-    expect(suggestions.classList.contains("hide")).toBe(true);
+    const items = suggestions.querySelectorAll(".editor-suggestions-item");
+    expect(items.length).toBe(1);
+    expect(items[0].textContent).toBe("Type to search participants");
+    expect(items[0].disabled).toBe(true);
+    expect(suggestions.classList.contains("hidden")).toBe(false);
+    expect(suggestions.classList.contains("hide")).toBe(false);
   });
 
   it("allows selecting a mention from the list by clicking it", async () => {
@@ -110,10 +116,10 @@ describe("Mention", () => {
     suggestions.querySelector(".editor-suggestions-item").click();
 
     expect(editorElement.innerHTML).toEqual(
-      '<p><span data-suggestion="mention" data-id="@johndoe" data-label="@johndoe (John Doe)">@johndoe (John Doe)</span> </p>'
+      '<p><span data-suggestion="mention" data-id="@johndoe" data-label="@johndoe">@johndoe</span> </p>'
     );
     expect(normalizeHTML(editor.getHTML())).toEqual(
-      '<p><span data-type="mention" data-id="@johndoe" data-label="@johndoe (John Doe)">@johndoe (John Doe)</span> </p>'
+      '<p><span data-type="mention" data-id="@johndoe" data-label="@johndoe">@johndoe</span> </p>'
     );
   });
 
@@ -124,10 +130,27 @@ describe("Mention", () => {
     editorElement.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
 
     expect(editorElement.innerHTML).toEqual(
-      '<p><span data-suggestion="mention" data-id="@johndoe" data-label="@johndoe (John Doe)">@johndoe (John Doe)</span> </p>'
+      '<p><span data-suggestion="mention" data-id="@johndoe" data-label="@johndoe">@johndoe</span> </p>'
     );
     expect(normalizeHTML(editor.getHTML())).toEqual(
-      '<p><span data-type="mention" data-id="@johndoe" data-label="@johndoe (John Doe)">@johndoe (John Doe)</span> </p>'
+      '<p><span data-type="mention" data-id="@johndoe" data-label="@johndoe">@johndoe</span> </p>'
     );
   });
+
+  it("allows selecting a mention when content changes after triggering", async () => {
+    editorElement.focus();
+    await updateContent(editorElement, "@joh", editor);
+
+    const suggestions = document.querySelector(".editor-suggestions");
+    expect(suggestions).toBeInstanceOf(HTMLDivElement);
+
+    editor.commands.setContent("<p>Some new content @joh</p>");
+    await sleep(50);
+
+    expect(() => {
+      suggestions.querySelector(".editor-suggestions-item").click();
+    }).not.toThrow();
+
+    expect(normalizeHTML(editor.getHTML())).toContain('data-type="mention"');
+  });
 });

data/app/packs/src/decidim/map/controller.js

@@ -29,7 +29,16 @@ export default class MapController {
   }
 
   load() {
-    this.map = L.map(this.mapId);
+    const zoomControl = L.control.zoom({
+      zoomInTitle: this.config.zoomInText || "Zoom in",
+      zoomOutTitle: this.config.zoomOutText || "Zoom out"
+    });
+
+    this.map = L.map(this.mapId, {
+      zoomControl: false
+    });
+
+    this.map.addControl(zoomControl);
 
     this.map.scrollWheelZoom.disable();
 

data/app/packs/src/decidim/refactor/implementation/autofocus.js

@@ -0,0 +1,22 @@
+/**
+ * This focuses an element
+ * @param {HTMLElement} element The container element to search for a focusable input or editor.
+ * @returns {void} Nothing
+ */
+export default function autofocus(element) {
+  let node = element.querySelector(".editor .ProseMirror, input[type='text'], textarea")
+
+  if (!node) {
+    return;
+  }
+
+  node.dispatchEvent(new CustomEvent("move-cursor-to-end", { bubbles: true }));
+
+  if (typeof node.focus === "function") {
+    node.focus();
+  }
+
+  let value = node.value;
+  node.value = "";
+  node.value = value;
+}

data/app/packs/src/decidim/refactor/implementation/autofocus.test.js

@@ -0,0 +1,171 @@
+/* global jest */
+
+import autofocus from "src/decidim/refactor/implementation/autofocus"
+
+describe("autofocus", () => {
+  describe("when ProseMirror editor is present", () => {
+    it("dispatches move-cursor-to-end event on ProseMirror", () => {
+      const container = document.createElement("div");
+      const editor = document.createElement("div");
+      editor.className = "editor";
+      const prosemirror = document.createElement("div");
+      prosemirror.className = "ProseMirror";
+      editor.appendChild(prosemirror);
+      container.appendChild(editor);
+      document.body.appendChild(container);
+
+      const dispatchSpy = jest.spyOn(prosemirror, "dispatchEvent");
+
+      autofocus(container);
+
+      expect(dispatchSpy).toHaveBeenCalledWith(expect.objectContaining({
+        type: "move-cursor-to-end",
+        bubbles: true
+      }));
+      dispatchSpy.mockRestore();
+      container.remove();
+    });
+
+    it("calls focus on ProseMirror element", () => {
+      const container = document.createElement("div");
+      const editor = document.createElement("div");
+      editor.className = "editor";
+      const prosemirror = document.createElement("div");
+      prosemirror.className = "ProseMirror";
+      prosemirror.contentEditable = true;
+      const focusSpy = jest.spyOn(prosemirror, "focus");
+      editor.appendChild(prosemirror);
+      container.appendChild(editor);
+      document.body.appendChild(container);
+
+      autofocus(container);
+
+      expect(focusSpy).toHaveBeenCalled();
+      focusSpy.mockRestore();
+      container.remove();
+    });
+  });
+
+  describe("when input[type='text'] is present", () => {
+    it("focuses on the input element", () => {
+      const container = document.createElement("div");
+      const input = document.createElement("input");
+      input.type = "text";
+      input.value = "test value";
+      const focusSpy = jest.spyOn(input, "focus");
+      container.appendChild(input);
+      document.body.appendChild(container);
+
+      autofocus(container);
+
+      expect(focusSpy).toHaveBeenCalled();
+      expect(input.value).toBe("test value");
+      focusSpy.mockRestore();
+      container.remove();
+    });
+
+    it("clears and restores the input value", () => {
+      const container = document.createElement("div");
+      const input = document.createElement("input");
+      input.type = "text";
+      input.value = "original value";
+      container.appendChild(input);
+      document.body.appendChild(container);
+
+      autofocus(container);
+
+      expect(input.value).toBe("original value");
+      container.remove();
+    });
+  });
+
+  describe("when textarea is present", () => {
+    it("focuses on the textarea element", () => {
+      const container = document.createElement("div");
+      const textarea = document.createElement("textarea");
+      textarea.value = "textarea content";
+      const focusSpy = jest.spyOn(textarea, "focus");
+      container.appendChild(textarea);
+      document.body.appendChild(container);
+
+      autofocus(container);
+
+      expect(focusSpy).toHaveBeenCalled();
+      expect(textarea.value).toBe("textarea content");
+      focusSpy.mockRestore();
+      container.remove();
+    });
+
+    it("clears and restores the textarea value", () => {
+      const container = document.createElement("div");
+      const textarea = document.createElement("textarea");
+      textarea.value = "original content";
+      container.appendChild(textarea);
+      document.body.appendChild(container);
+
+      autofocus(container);
+
+      expect(textarea.value).toBe("original content");
+      container.remove();
+    });
+  });
+
+  describe("when no focusable element is present", () => {
+    it("does nothing and does not throw", () => {
+      const container = document.createElement("div");
+      container.innerHTML = "<p>No focusable element here</p>";
+      document.body.appendChild(container);
+
+      expect(() => autofocus(container)).not.toThrow();
+      container.remove();
+    });
+  });
+
+  describe("priority of elements", () => {
+    it("prefers ProseMirror over input", () => {
+      const container = document.createElement("div");
+      const editor = document.createElement("div");
+      editor.className = "editor";
+      const prosemirror = document.createElement("div");
+      prosemirror.className = "ProseMirror";
+      editor.appendChild(prosemirror);
+      const input = document.createElement("input");
+      input.type = "text";
+      editor.appendChild(input);
+      container.appendChild(editor);
+      document.body.appendChild(container);
+
+      const prosemirrorDispatchSpy = jest.spyOn(prosemirror, "dispatchEvent");
+      const inputFocusSpy = jest.spyOn(input, "focus");
+
+      autofocus(container);
+
+      expect(prosemirrorDispatchSpy).toHaveBeenCalled();
+      expect(inputFocusSpy).not.toHaveBeenCalled();
+      prosemirrorDispatchSpy.mockRestore();
+      inputFocusSpy.mockRestore();
+      container.remove();
+    });
+
+    it("prefers input over textarea", () => {
+      const container = document.createElement("div");
+      const input = document.createElement("input");
+      input.type = "text";
+      const textarea = document.createElement("textarea");
+      container.appendChild(input);
+      container.appendChild(textarea);
+      document.body.appendChild(container);
+
+      const inputFocusSpy = jest.spyOn(input, "focus");
+      const textareaFocusSpy = jest.spyOn(textarea, "focus");
+
+      autofocus(container);
+
+      expect(inputFocusSpy).toHaveBeenCalled();
+      expect(textareaFocusSpy).not.toHaveBeenCalled();
+      inputFocusSpy.mockRestore();
+      textareaFocusSpy.mockRestore();
+      container.remove();
+    });
+  });
+});

data/app/packs/src/decidim/refactor/moved/focus_guard.js

@@ -5,14 +5,12 @@ const focusableDisableableNodes = ["BUTTON", "INPUT", "TEXTAREA", "SELECT"];
 export default class FocusGuard {
   constructor(container) {
     this.container = container;
-    this.guardedElement = null;
-    this.triggerElement = null;
+    this.stack = [];
   }
 
   trap(element, trigger) {
     this.enable();
-    this.guardedElement = element;
-    this.triggerElement = trigger;
+    this.stack.push({ element, trigger });
   }
 
   enable() {
@@ -45,14 +43,15 @@ export default class FocusGuard {
   }
 
   disable() {
-    const guards = this.container.querySelectorAll(`:scope > .${focusGuardClass}`);
-    guards.forEach((guard) => guard.remove());
+    const current = this.stack.pop();
 
-    this.guardedElement = null;
+    if (this.stack.length === 0) {
+      const guards = this.container.querySelectorAll(`:scope > .${focusGuardClass}`);
+      guards.forEach((guard) => guard.remove());
+    }
 
-    if (this.triggerElement) {
-      this.triggerElement.focus();
-      this.triggerElement = null;
+    if (current && current.trigger) {
+      current.trigger.focus();
     }
   }
 
@@ -67,12 +66,13 @@ export default class FocusGuard {
   };
 
   handleContainerFocus(guard) {
-    if (!this.guardedElement) {
+    const current = this.stack[this.stack.length - 1];
+    if (!current || !current.element) {
       guard.blur();
       return;
     }
 
-    const visibleNodes = Array.from(this.guardedElement.querySelectorAll("*")).filter((item) => {
+    const visibleNodes = Array.from(current.element.querySelectorAll("*")).filter((item) => {
       return this.isVisible(item);
     });
 

data/app/packs/src/decidim/refactor/moved/focus_guard.test.js

@@ -0,0 +1,136 @@
+/* global jest */
+
+import FocusGuard from "src/decidim/refactor/moved/focus_guard"
+
+describe("FocusGuard", () => {
+  let focusGuard = null;
+
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    focusGuard = new FocusGuard(document.body);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  describe("single dialog", () => {
+    it("creates focus guards on trap", () => {
+      const dialog = document.createElement("div");
+      const trigger = document.createElement("button");
+      document.body.appendChild(dialog);
+      document.body.appendChild(trigger);
+
+      focusGuard.trap(dialog, trigger);
+      const guards = document.body.querySelectorAll(".focusguard");
+      expect(guards.length).toBe(2);
+    });
+
+    it("removes focus guards and returns focus on disable", () => {
+      const dialog = document.createElement("div");
+      const trigger = document.createElement("button");
+      document.body.appendChild(dialog);
+      document.body.appendChild(trigger);
+
+      focusGuard.trap(dialog, trigger);
+      focusGuard.disable();
+
+      const guards = document.body.querySelectorAll(".focusguard");
+      expect(guards.length).toBe(0);
+      expect(document.activeElement).toBe(trigger);
+    });
+  });
+
+  describe("nested dialogs", () => {
+    it("keeps guards when inner dialog is disabled", () => {
+      const outerDialog = document.createElement("div");
+      const outerTrigger = document.createElement("button");
+      const innerDialog = document.createElement("div");
+      const innerTrigger = document.createElement("button");
+
+      document.body.appendChild(outerDialog);
+      document.body.appendChild(outerTrigger);
+      document.body.appendChild(innerDialog);
+      document.body.appendChild(innerTrigger);
+
+      focusGuard.trap(outerDialog, outerTrigger);
+      focusGuard.trap(innerDialog, innerTrigger);
+
+      expect(document.body.querySelectorAll(".focusguard").length).toBe(2);
+
+      focusGuard.disable();
+
+      expect(document.body.querySelectorAll(".focusguard").length).toBe(2);
+      expect(document.activeElement).toBe(innerTrigger);
+    });
+
+    it("removes guards when outer dialog is disabled last", () => {
+      const outerDialog = document.createElement("div");
+      const outerTrigger = document.createElement("button");
+      const innerDialog = document.createElement("div");
+      const innerTrigger = document.createElement("button");
+
+      document.body.appendChild(outerDialog);
+      document.body.appendChild(outerTrigger);
+      document.body.appendChild(innerDialog);
+      document.body.appendChild(innerTrigger);
+
+      focusGuard.trap(outerDialog, outerTrigger);
+      focusGuard.trap(innerDialog, innerTrigger);
+
+      focusGuard.disable();
+      focusGuard.disable();
+
+      expect(document.body.querySelectorAll(".focusguard").length).toBe(0);
+      expect(document.activeElement).toBe(outerTrigger);
+    });
+
+    it("cycles focus to the current top dialog when a guard receives focus", () => {
+      jest.spyOn(focusGuard, "isVisible").mockReturnValue(true);
+
+      const outerDialog = document.createElement("div");
+      const outerInput = document.createElement("input");
+      outerDialog.appendChild(outerInput);
+
+      const innerDialog = document.createElement("div");
+      const innerInput = document.createElement("input");
+      innerDialog.appendChild(innerInput);
+
+      document.body.appendChild(outerDialog);
+      document.body.appendChild(innerDialog);
+
+      focusGuard.trap(outerDialog, null);
+      focusGuard.trap(innerDialog, null);
+
+      const endGuard = document.body.querySelector('.focusguard[data-position="end"]');
+      endGuard.focus();
+
+      expect(document.activeElement).toBe(innerInput);
+    });
+
+    it("cycles focus backward to the current top dialog when the start guard receives focus", () => {
+      jest.spyOn(focusGuard, "isVisible").mockReturnValue(true);
+
+      const outerDialog = document.createElement("div");
+      const outerInput = document.createElement("input");
+      outerDialog.appendChild(outerInput);
+
+      const innerDialog = document.createElement("div");
+      const innerInput = document.createElement("input");
+      const innerButton = document.createElement("button");
+      innerDialog.appendChild(innerInput);
+      innerDialog.appendChild(innerButton);
+
+      document.body.appendChild(outerDialog);
+      document.body.appendChild(innerDialog);
+
+      focusGuard.trap(outerDialog, null);
+      focusGuard.trap(innerDialog, null);
+
+      const startGuard = document.body.querySelector('.focusguard[data-position="start"]');
+      startGuard.focus();
+
+      expect(document.activeElement).toBe(innerButton);
+    });
+  });
+});

data/app/packs/src/decidim/utilities/dom.js

@@ -77,7 +77,7 @@ const createUnloadPreventer = () => {
     ev.preventDefault();
     ev.stopPropagation();
 
-    confirmAction(confirmMessage, link).then((answer) => {
+    confirmAction(confirmMessage, link, { iconName: "alert-line" }).then((answer) => {
       if (!answer) {
         return;
       }
@@ -109,7 +109,7 @@ const createUnloadPreventer = () => {
     ev.stopImmediatePropagation();
     ev.stopPropagation();
 
-    confirmAction(confirmMessage, button).then((answer) => {
+    confirmAction(confirmMessage, button, { iconName: "alert-line" }).then((answer) => {
       if (!answer) {
         return;
       }

data/app/packs/stylesheets/decidim/_cards.scss

@@ -55,7 +55,7 @@
     }
 
     &-content {
-      @apply flex flex-col gap-2.5;
+      @apply flex flex-col gap-2.5 min-w-0 break-words;
     }
 
     &-title {

data/app/packs/stylesheets/decidim/_content_blocks.scss

@@ -13,18 +13,12 @@
         @apply block max-h-40 overflow-hidden relative first:[&_*]:mt-0 before:content-[''] before:absolute before:inset-0 before:h-full before:w-full before:bg-gradient-to-b before:from-transparent before:to-white after:content-[''] after:absolute after:inset-0 after:h-full after:w-full after:bg-gradient-to-b after:from-transparent after:to-white;
       }
 
-      [aria-expanded="false"] > svg:last-of-type,
-      [aria-expanded="false"] > span:last-of-type,
-      [aria-expanded="true"] > span:first-of-type,
-      [aria-expanded="true"] > svg:first-of-type {
-        @apply hidden;
+      [aria-expanded] > svg {
+        @apply transition-transform;
       }
 
-      [aria-expanded="true"] > svg:last-of-type,
-      [aria-expanded="true"] > span:last-of-type,
-      [aria-expanded="false"] > span:first-of-type,
-      [aria-expanded="false"] > svg:first-of-type {
-        @apply block;
+      [aria-expanded="true"] > svg {
+        @apply rotate-180;
       }
     }