decidim-core 0.32.0.rc3 → 0.32.0

data/app/packs/src/decidim/controllers/multiple_mentions/controller.js

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import AutoComplete from "src/decidim/refactor/moved/autocomplete";
+import TomSelect from "tom-select/dist/cjs/tom-select.popular";
 import icon from "src/decidim/refactor/moved/icon";
 
 export default class extends Controller {
@@ -16,20 +16,6 @@ export default class extends Controller {
 
     this.initializeEmptyFocusElement();
     this.initializeAutoComplete();
-    this.setupSelectionListener();
-  }
-
-  /**
-   * Setup the selection event listener
-   * @returns {void}
-   */
-  setupSelectionListener() {
-    this.selectionHandler = (event) => {
-      const feedback = event.detail;
-      const selection = feedback.selection;
-      this.handleSelection(selection);
-    };
-    this.searchInput.addEventListener("selection", this.selectionHandler);
   }
 
   /*
@@ -37,8 +23,8 @@ export default class extends Controller {
    * @returns {void}
    */
   disconnect() {
-    if (this.searchInput && this.selectionHandler) {
-      this.searchInput.removeEventListener("selection", this.selectionHandler);
+    if (this.tomSelect) {
+      this.tomSelect.destroy();
     }
   }
 
@@ -80,11 +66,56 @@ export default class extends Controller {
    * @returns {void}
    */
   initializeAutoComplete() {
-    this.autoComplete = new AutoComplete(this.searchInput, {
-      dataMatchKeys: ["name", "nickname"],
-      dataSource: this.getDataSource.bind(this),
-      dataFilter: this.filterResults.bind(this),
-      modifyResult: this.modifyResult.bind(this)
+    this.tomSelect = new TomSelect(this.searchInput, {
+      maxItems: 1,
+      valueField: "id",
+      labelField: "name",
+      searchField: ["name", "nickname"],
+      loadThrottle: 200,
+      loadingClass: "loading",
+      preload: false,
+      highlight: true,
+      load: (query, callback) => {
+        if (!query || query.length < 2) {
+          callback();
+          return;
+        }
+        this.getDataSource(query, (results) => {
+          const filtered = this.filterResults(results);
+          filtered.forEach((item) => {
+            if (item.directMessagesEnabled === "false") {
+              item.disabled = true;
+            }
+          });
+          callback(filtered);
+        });
+      },
+      render: {
+        option: (data, escape) => {
+          const isDisabled = data.directMessagesEnabled === "false";
+          const className = isDisabled
+            ? "disabled"
+            : "";
+          const disabledMsg = isDisabled
+            ? `<small>${escape(this.searchInput.dataset.directMessagesDisabled)}</small>`
+            : "";
+          return `<div class="${className}">
+            <img src="${escape(data.avatarUrl)}" alt="${escape(data.name)}">
+            <span>${escape(data.nickname)}</span>
+            <small>${escape(data.name)}</small>
+            ${disabledMsg}
+          </div>`;
+        },
+        "no_results": () => `<div class="no-results">${this.searchInput.dataset.noresults || ""}</div>`
+      },
+      onChange: (value) => {
+        if (value) {
+          const option = this.tomSelect.options[value];
+          this.handleSelection({ value: option });
+          this.tomSelect.clear();
+          this.tomSelect.clearOptions();
+        }
+      }
     });
   }
 
@@ -129,7 +160,7 @@ export default class extends Controller {
    */
   filterResults(list) {
     return list.filter(
-      (item) => !this.selected.includes(item.value.id)
+      (item) => !this.selected.includes(item.id)
     );
   }
 
@@ -161,18 +192,23 @@ export default class extends Controller {
    */
   handleSelection(selection) {
     const id = selection.value.id;
-    // Check if we have reached the maximum limit or if direct messages are disabled
     if (this.isMaxLimitReached() || selection.value.directMessagesEnabled === "false") {
       return;
     }
 
     this.addSelectedUser(selection, id);
-    this.autoComplete.setInput("");
     this.selected.push(id);
+  }
 
-    if (this.autoComplete && this.autoComplete.autocomplete) {
-      this.autoComplete.autocomplete.close();
-    }
+  /**
+   * Escape HTML characters in a string
+   * @param {string} str - The string to escape
+   * @returns {string} The escaped HTML string
+   */
+  htmlEscape(str) {
+    const div = document.createElement("div");
+    div.appendChild(document.createTextNode(str));
+    return div.innerHTML;
   }
 
   /**
@@ -187,10 +223,10 @@ export default class extends Controller {
     const listItem = document.createElement("li");
     listItem.tabIndex = "-1";
     listItem.innerHTML = `
-      <input type="hidden" name="${this.options.name}" value="${id}">
-      <img src="${selection.value.avatarUrl}" alt="${selection.value.name}">
-      <span>${selection.value.name}</span>
-      <button type="button" data-remove="${id}" tabindex="0" aria-controls="0" aria-label="${label}">${icon("delete-bin-line")}</button>
+      <input type="hidden" name="${this.htmlEscape(this.options.name)}" value="${this.htmlEscape(id)}">
+      <img src="${this.htmlEscape(selection.value.avatarUrl)}" alt="${this.htmlEscape(selection.value.name)}">
+      <span>${this.htmlEscape(selection.value.name)}</span>
+      <button type="button" data-remove="${this.htmlEscape(id)}" tabindex="0" aria-controls="0" aria-label="${this.htmlEscape(label)}">${icon("delete-bin-line")}</button>
     `;
 
     this.selectedItems.appendChild(listItem);

data/app/packs/src/decidim/controllers/multiple_mentions/input_multiple_mentions.test.js

@@ -7,13 +7,14 @@
 import { Application } from "@hotwired/stimulus"
 import MultipleMentionsController from "src/decidim/controllers/multiple_mentions/controller"
 
-const AutoComplete = require("src/decidim/refactor/moved/autocomplete");
+const TomSelect = require("tom-select/dist/cjs/tom-select.popular");
 const iconMock = require("src/decidim/refactor/moved/icon");
 
 // Mock the dependencies
-jest.mock("src/decidim/refactor/moved/autocomplete", () => {
+jest.mock("tom-select/dist/cjs/tom-select.popular", () => {
   return jest.fn().mockImplementation(() => ({
-    setInput: jest.fn()
+    destroy: jest.fn(),
+    clearOptions: jest.fn()
   }));
 });
 
@@ -114,12 +115,22 @@ describe("MultipleMentionsManager", () => {
       expect(controller.emptyFocusElement).toBe(existingElement);
     });
 
-    it("should initialize AutoComplete with correct configuration", () => {
-      expect(AutoComplete).toHaveBeenCalledWith(searchInput, {
-        dataMatchKeys: ["name", "nickname"],
-        dataSource: expect.any(Function),
-        dataFilter: expect.any(Function),
-        modifyResult: expect.any(Function)
+    it("should initialize TomSelect with correct configuration", () => {
+      expect(TomSelect).toHaveBeenCalledWith(searchInput, {
+        maxItems: 1,
+        valueField: "id",
+        labelField: "name",
+        searchField: ["name", "nickname"],
+        loadThrottle: 200,
+        loadingClass: "loading",
+        preload: false,
+        highlight: true,
+        load: expect.any(Function),
+        render: {
+          option: expect.any(Function),
+          "no_results": expect.any(Function)
+        },
+        onChange: expect.any(Function)
       });
     });
   });
@@ -226,24 +237,24 @@ describe("MultipleMentionsManager", () => {
       controller.selected = ["1", "3"];
 
       const list = [
-        { value: { id: "1" } },
-        { value: { id: "2" } },
-        { value: { id: "3" } },
-        { value: { id: "4" } }
+        { id: "1" },
+        { id: "2" },
+        { id: "3" },
+        { id: "4" }
       ];
 
       const filtered = controller.filterResults(list);
 
       expect(filtered).toEqual([
-        { value: { id: "2" } },
-        { value: { id: "4" } }
+        { id: "2" },
+        { id: "4" }
       ]);
     });
 
     it("should return all users when none are selected", () => {
       const list = [
-        { value: { id: "1" } },
-        { value: { id: "2" } }
+        { id: "1" },
+        { id: "2" }
       ];
 
       const filtered = controller.filterResults(list);
@@ -255,8 +266,8 @@ describe("MultipleMentionsManager", () => {
       controller.selected = ["1", "2"];
 
       const list = [
-        { value: { id: "1" } },
-        { value: { id: "2" } }
+        { id: "1" },
+        { id: "2" }
       ];
 
       const filtered = controller.filterResults(list);
@@ -330,7 +341,6 @@ describe("MultipleMentionsManager", () => {
 
       expect(controller.selected).toContain("1");
       expect(selectedItems.children.length).toBe(1);
-      expect(controller.autoComplete.setInput).toHaveBeenCalledWith("");
     });
 
     it("should not add user when max limit is reached", () => {
@@ -350,7 +360,6 @@ describe("MultipleMentionsManager", () => {
 
       expect(controller.selected).not.toContain("10");
       expect(selectedItems.children.length).toBe(0);
-      expect(controller.autoComplete.setInput).not.toHaveBeenCalled();
     });
 
     it("should not add user when direct messages are disabled", () => {
@@ -368,7 +377,6 @@ describe("MultipleMentionsManager", () => {
 
       expect(controller.selected).not.toContain("1");
       expect(selectedItems.children.length).toBe(0);
-      expect(controller.autoComplete.setInput).not.toHaveBeenCalled();
     });
 
     it("should handle multiple valid selections", () => {
@@ -383,7 +391,6 @@ describe("MultipleMentionsManager", () => {
 
       expect(controller.selected).toEqual(["1", "2"]);
       expect(selectedItems.children.length).toBe(2);
-      expect(controller.autoComplete.setInput).toHaveBeenCalledTimes(2);
     });
   });
 

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

@@ -134,7 +134,9 @@ export const createSuggestionRenderer = (node, { itemConverter } = {}) => () =>
       }
     },
 
-    onUpdate({ clientRect, items }) {
+    onUpdate({ clientRect, items, command }) {
+      selectCommand = command;
+
       if (!clientRect || !suggestion) {
         return;
       }

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

@@ -170,6 +170,15 @@ export default Extension.create({
       "Shift-Tab": outdent,
       Backspace: () => {
         if (this.editor.isActive("listItem")) {
+          // When at the start of a list item, join the list items
+          // together using joinItemBackward which properly merges
+          // inline content. This ensures the items are merged
+          // correctly regardless of how the browser handles the
+          // event.
+          if (this.editor.state.selection.$head.parentOffset === 0) {
+            return this.editor.commands.joinItemBackward();
+          }
+
           return false;
         }
 

data/app/packs/src/decidim/geocoding/reverse_geocoding.js

@@ -13,13 +13,24 @@ export const initializeReverseGeocoding = function() {
 
   const setLocating = (button, enable) => {
     if (enable) {
+      button.dataset.originalContent = button.innerHTML;
+      button.textContent = "";
+      const spinner = document.createElement("span");
+      spinner.className = "geocoding__spinner";
+      button.appendChild(spinner);
+      button.append(` ${button.dataset.locatingText || "Locating..."}`);
       button.setAttribute("disabled", true);
+      button.classList.add("geocoding__button--locating");
     } else {
+      if (button.dataset.originalContent) {
+        button.innerHTML = button.dataset.originalContent;
+      }
       button.removeAttribute("disabled");
+      button.classList.remove("geocoding__button--locating");
     }
   };
 
-  document.querySelectorAll(".user-device-location button").forEach((button) => {
+  document.querySelectorAll(".geocoding__button").forEach((button) => {
     button.addEventListener("click", (event) => {
       const target = event.target;
       if (target.disabled) {
@@ -36,19 +47,18 @@ export const initializeReverseGeocoding = function() {
         navigator.geolocation.getCurrentPosition((position) => {
           const coordinates = [position.coords.latitude, position.coords.longitude];
 
-          // reverse geolocation
           $.post(url, { latitude: coordinates[0], longitude: coordinates[1] }, (data) => {
             input.value = data.address;
             $(input).trigger("geocoder-suggest-coordinates.decidim", [coordinates]);
+            setLocating(target, false);
           }).fail((xhr, status, error) => {
             info(input, `${errorNoLocation} ${error}`);
+            setLocating(target, false);
           });
 
-          setLocating(target, false);
-
         }, (evt) => {
           info(input, `${errorNoLocation} ${evt.message}`);
-          target.removeAttribute("disabled");
+          setLocating(target, false);
         }, {
           enableHighAccuracy: true
         });

data/app/packs/src/decidim/geocoding/reverse_geocoding.test.js

@@ -0,0 +1,197 @@
+/* global global, jest */
+
+import { initializeReverseGeocoding } from "src/decidim/geocoding/reverse_geocoding";
+
+describe("reverseGeocoding", () => {
+  let container = null;
+  let button = null;
+  let input = null;
+  let label = null;
+  let mockGeolocation = null;
+  let mockPost = null;
+  let originalGeolocation = null;
+
+  beforeEach(() => {
+    document.body.innerHTML = "";
+
+    container = document.createElement("div");
+    container.innerHTML = `
+      <label>
+        <input id="test_address" type="text" />
+        <div class="geocoding__locate">
+          <button
+            class="geocoding__button"
+            type="button"
+            data-input="test_address"
+            data-error-no-location="Could not detect location."
+            data-error-unsupported="Device not supported."
+            data-locating-text="Locating..."
+            data-url="/locate">
+            Use my location
+          </button>
+        </div>
+      </label>
+    `;
+    document.body.appendChild(container);
+
+    button = container.querySelector(".geocoding__button");
+    input = container.querySelector("#test_address");
+    label = container.querySelector("label");
+
+    originalGeolocation = navigator.geolocation;
+    mockGeolocation = {
+      getCurrentPosition: jest.fn()
+    };
+    Reflect.defineProperty(global.navigator, "geolocation", {
+      value: mockGeolocation,
+      configurable: true
+    });
+
+    mockPost = jest.fn();
+    global.jQuery = jest.fn(() => ({ trigger: jest.fn() }));
+    global.jQuery.post = mockPost;
+    // eslint-disable-next-line id-length
+    global.$ = global.jQuery;
+
+    initializeReverseGeocoding();
+  });
+
+  afterEach(() => {
+    Reflect.defineProperty(global.navigator, "geolocation", {
+      value: originalGeolocation,
+      configurable: true
+    });
+    jest.restoreAllMocks();
+  });
+
+  describe("when clicking the button", () => {
+    it("shows the spinner and disables the button", () => {
+      mockGeolocation.getCurrentPosition.mockImplementation(() => {});
+
+      button.click();
+
+      expect(button.disabled).toBe(true);
+      expect(button.classList.contains("geocoding__button--locating")).toBe(true);
+      expect(button.querySelector(".geocoding__spinner")).not.toBeNull();
+      expect(button.textContent).toContain("Locating...");
+    });
+
+    it("uses custom locating text from data attribute", () => {
+      button.dataset.locatingText = "Finding you...";
+      mockGeolocation.getCurrentPosition.mockImplementation(() => {});
+
+      button.click();
+
+      expect(button.textContent).toContain("Finding you...");
+    });
+
+    it("stores original content for restoration", () => {
+      mockGeolocation.getCurrentPosition.mockImplementation(() => {});
+
+      button.click();
+
+      expect(button.dataset.originalContent).toContain("Use my location");
+    });
+  });
+
+  describe("when geolocation succeeds", () => {
+    it("restores the button after successful reverse geocoding", () => {
+      const mockPosition = {
+        coords: { latitude: 40.7128, longitude: -74.006 }
+      };
+      mockGeolocation.getCurrentPosition.mockImplementation((success) => {
+        success(mockPosition);
+      });
+
+      const mockDeferred = { fail: jest.fn() };
+      mockPost.mockImplementation((url, data, callback) => {
+        callback({ address: "New York, NY, USA" });
+        return mockDeferred;
+      });
+
+      button.click();
+
+      expect(button.disabled).toBe(false);
+      expect(button.classList.contains("geocoding__button--locating")).toBe(false);
+      expect(button.querySelector(".geocoding__spinner")).toBeNull();
+      expect(button.textContent).toContain("Use my location");
+      expect(input.value).toBe("New York, NY, USA");
+    });
+
+    it("restores the button when reverse geocoding fails", () => {
+      const mockPosition = {
+        coords: { latitude: 40.7128, longitude: -74.006 }
+      };
+      mockGeolocation.getCurrentPosition.mockImplementation((success) => {
+        success(mockPosition);
+      });
+
+      const mockDeferred = { fail: jest.fn((callback) => {
+        callback({}, "error", "Not Found");
+      }) };
+      mockPost.mockReturnValue(mockDeferred);
+
+      button.click();
+
+      expect(button.disabled).toBe(false);
+      expect(button.classList.contains("geocoding__button--locating")).toBe(false);
+      expect(button.textContent).toContain("Use my location");
+    });
+  });
+
+  describe("when geolocation fails", () => {
+    it("restores the button when user denies permission", () => {
+      const mockError = { message: "User denied geolocation" };
+      mockGeolocation.getCurrentPosition.mockImplementation((success, error) => {
+        error(mockError);
+      });
+
+      button.click();
+
+      expect(button.disabled).toBe(false);
+      expect(button.classList.contains("geocoding__button--locating")).toBe(false);
+      expect(button.textContent).toContain("Use my location");
+    });
+
+    it("shows an error message", () => {
+      const mockError = { message: "User denied geolocation" };
+      mockGeolocation.getCurrentPosition.mockImplementation((success, error) => {
+        error(mockError);
+      });
+
+      button.click();
+
+      const errorElement = label.querySelector(".form-error");
+      expect(errorElement).not.toBeNull();
+      expect(errorElement.textContent).toContain("Could not detect location.");
+    });
+  });
+
+  describe("when geolocation is not supported", () => {
+    it("shows an unsupported error and does not show spinner", () => {
+      Reflect.defineProperty(global.navigator, "geolocation", {
+        value: null,
+        configurable: true
+      });
+
+      button.click();
+
+      expect(button.disabled).toBe(false);
+      expect(button.classList.contains("geocoding__button--locating")).toBe(false);
+      const errorElement = label.querySelector(".form-error");
+      expect(errorElement).not.toBeNull();
+      expect(errorElement.textContent).toContain("Device not supported.");
+    });
+  });
+
+  describe("when button is already disabled", () => {
+    it("does not trigger geolocation again", () => {
+      button.disabled = true;
+      mockGeolocation.getCurrentPosition.mockImplementation(() => {});
+
+      button.click();
+
+      expect(mockGeolocation.getCurrentPosition).not.toHaveBeenCalled();
+    });
+  });
+});

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

@@ -60,6 +60,7 @@ window.Decidim = window.Decidim || {
   announceForScreenReader
 };
 
+window.createDialog = createDialog;
 window.morphdom = morphdom
 
 // eslint-disable-next-line max-params
@@ -236,8 +237,7 @@ const initializer = (element = document) => {
   document.dispatchEvent(new CustomEvent("decidim:loaded", { detail: { element } }));
 }
 
-// If no jQuery is used the Tribute feature used in comments to autocomplete
-// mentions stops working
+// Keep this under jQuery ready to support components initialized on legacy templates
 $(() => initializer());
 
 // Run initializer action over the new DOM elements

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

@@ -88,6 +88,20 @@
   }
 
   &__modal {
+    &-error {
+      [data-dialog-closable] {
+        @apply top-6 right-6;
+      }
+
+      [data-dialog-container] {
+        @apply inline grid-cols-none;
+      }
+
+      [data-dialog-title] {
+        @apply col-span-2 md:col-span-1 md:col-start-2 grid grid-cols-[auto_1fr] items-start md:items-center gap-2 pb-4 text-left text-xl text-gray-2 md:border-b md:border-gray-3;
+      }
+    }
+
     &-results {
       @apply mb-20 flex flex-wrap gap-x-8 gap-y-4;
     }

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

@@ -1,5 +1,5 @@
 [id*="dropdown-menu"] {
-  @apply flex flex-col py-0 mx-3.5 md:mx-0 border-t-0 border-gray-3 cursor-pointer;
+  @apply flex flex-col py-0 mx-3.5 md:mx-0 border-t-0 border-gray-3;
 
   &[aria-hidden="true"] {
     @apply hidden md:flex;

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

@@ -0,0 +1,49 @@
+.editor-suggestions-props {
+  --editor-suggestions-border-color: #000;
+  --editor-suggestions-background-color: #eee;
+  --editor-suggestions-selected-highlight-color: #ccc;
+}
+
+.editor-suggestions {
+  @apply editor-suggestions-props border-0 bg-[var(--editor-suggestions-background-color)] max-w-sm drop-shadow-md rounded-md;
+
+  &:hover {
+    .editor-suggestions-item[data-selected]:not(:hover) {
+      @apply bg-transparent;
+    }
+  }
+
+  .editor-suggestions-item {
+    @apply flex items-center gap-2 w-full text-left py-[0.375rem] px-1.5 border-0 rounded-none text-sm;
+
+    &:first-child {
+      @apply rounded-t-md;
+    }
+
+    &:last-child {
+      @apply rounded-b-md;
+    }
+
+    &:hover,
+    &[data-selected] {
+      @apply bg-[var(--editor-suggestions-selected-highlight-color)];
+    }
+
+    .editor-suggestions-item-avatar {
+      @apply rounded-full w-6 h-6 object-cover flex-none;
+    }
+
+    .editor-suggestions-item-label {
+      @apply truncate;
+    }
+  }
+
+  .editor-suggestions-item-disabled {
+    @apply cursor-default;
+
+    &:hover,
+    &[data-selected] {
+      @apply bg-transparent;
+    }
+  }
+}