decidim-core 0.32.1 → 0.32.2

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

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
+import autofocus from "src/decidim/refactor/implementation/autofocus"
 
 /**
  * This controller is used to change the active tab when the language is changed in the admin or system panel.
@@ -10,30 +11,42 @@ export default class extends Controller {
   connect() {
     this.handleChange = this.handleChange.bind(this);
     this.element.addEventListener("change", this.handleChange);
-    this.element.dispatchEvent(new Event("change"));
+    this.tabsContent = this.element.parentElement.parentElement.nextElementSibling;
+
+    this.setActiveTab(this.element.value);
   }
 
   disconnect() {
     this.element.removeEventListener("change", this.handleChange)
   }
 
-  handleChange(event) {
-    let targetTabPaneSelector = event.target.value;
-    let tabsContent = event.target.parentElement.parentElement.nextElementSibling;
-
-    if (!tabsContent) {
+  setActiveTab(targetTabPaneSelector) {
+    if (!this.tabsContent) {
       return;
     }
 
-    let activeTabContent = tabsContent.querySelector(".is-active");
+    let activeTabContent = this.tabsContent.querySelector(".is-active");
     if (activeTabContent) {
       activeTabContent.ariaHidden = "true";
       activeTabContent.classList.remove("is-active");
     }
-    let activePane = tabsContent.querySelector(targetTabPaneSelector);
+    let activePane = this.tabsContent.querySelector(targetTabPaneSelector);
     if (activePane) {
       activePane.ariaHidden = "false";
       activePane.classList.add("is-active");
     }
   }
+
+  handleChange(event) {
+    this.setActiveTab(event.target.value);
+
+    if (!this.tabsContent) {
+      return;
+    }
+
+    const activePane = this.tabsContent.querySelector(event.target.value);
+    if (activePane) {
+      autofocus(activePane);
+    }
+  }
 }

data/app/packs/src/decidim/controllers/language_change/language_change.test.js

@@ -1,5 +1,4 @@
 /* global jest */
-/* eslint max-lines: ["error", 360] */
 import { Application } from "@hotwired/stimulus"
 import LanguageChangeController from "src/decidim/controllers/language_change/controller";
 

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

@@ -1,11 +1,12 @@
-/* eslint max-lines: ["error", 400] */
+/* eslint max-lines: ["error", 450] */
 
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   connect() {
     this.options = {
-      noDataFoundMessage: this.element.getAttribute("data-noresults") || "No results found",
+      noDataFoundMessage: this.element.getAttribute("data-no_results") || "No results found",
+      searchPromptMessage: this.element.getAttribute("data-search_prompt") || "Type to search participants",
       debounceDelay: 250,
       menuItemLimit: 5
     };
@@ -94,6 +95,14 @@ export default class extends Controller {
     }
 
     this.currentMentionStart = trigger.start;
+
+    if (trigger.query.length < 2) {
+      // Invalidate any pending debounced searches
+      this.requestId += 1;
+      this.showMessage(this.options.searchPromptMessage);
+      return;
+    }
+
     this.performRemoteSearch(trigger.query);
   }
 
@@ -136,7 +145,7 @@ export default class extends Controller {
     }
 
     const textBeforeCursor = value.slice(0, caretPosition);
-    const mentionMatch = textBeforeCursor.match(/(?:^|\s)@([\w.-]{2,})$/);
+    const mentionMatch = textBeforeCursor.match(/(?:^|\s)@([\w.-]{1,})$/);
     if (!mentionMatch) {
       return null;
     }
@@ -257,6 +266,26 @@ export default class extends Controller {
     this.suggestion.classList.remove("hidden", "hide");
   }
 
+  showMessage(message) {
+    if (!this.suggestion || !message) {
+      return;
+    }
+
+    this.suggestion.innerHTML = "";
+    this.isActive = false;
+    this.selectedIndex = -1;
+
+    const item = document.createElement("button");
+    item.type = "button";
+    item.disabled = true;
+    item.classList.add("editor-suggestions-item", "editor-suggestions-item-disabled");
+    item.textContent = message;
+
+    this.suggestion.append(item);
+    this.positionSuggestionMenu();
+    this.suggestion.classList.remove("hidden", "hide");
+  }
+
   positionSuggestionMenu() {
     if (!this.suggestion || this.currentMentionStart === null) {
       return;

data/app/packs/src/decidim/controllers/mention/input_mentions.test.js

@@ -26,7 +26,7 @@ describe("MentionController", () => {
 
     document.body.innerHTML = `
       <div class="mention-container">
-        <input data-noresults="No users found" data-controller="mention" />
+        <input data-no_results="No users found" data-search_prompt="Type to search participants" data-controller="mention" />
       </div>
     `;
 
@@ -111,17 +111,20 @@ describe("MentionController", () => {
     expect(suggestions.classList.contains("hidden")).toBe(false);
   });
 
-  it("does not show suggestions when fewer than two mention characters", async () => {
+  it("shows search prompt when first mention character is entered", async () => {
     await connectController();
 
     mockElement.value = "Hello @d";
     mockElement.setSelectionRange(mockElement.value.length, mockElement.value.length);
     mockElement.dispatchEvent(new Event("input", { bubbles: true }));
 
-    await waitForDebounce();
-
     const suggestions = document.querySelector(".editor-suggestions");
-    expect(suggestions.classList.contains("hidden")).toBe(true);
+    const promptItem = suggestions.querySelector(".editor-suggestions-item");
+
+    expect(promptItem).toBeInstanceOf(HTMLButtonElement);
+    expect(promptItem.textContent).toBe("Type to search participants");
+    expect(promptItem.disabled).toBe(true);
+    expect(suggestions.classList.contains("hidden")).toBe(false);
   });
 
   it("inserts selected mention on click", async () => {

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

@@ -68,7 +68,7 @@ describe("MultipleMentionsManager", () => {
           spellcheck="false"
           autocomplete="off"
           placeholder="Search..."
-          data-noresults="No results"
+          data-no_results="No results"
           data-selected= "selected-users"
           contenteditable="true"
           data-direct-messages-disabled="Direct messages disabled">

data/app/packs/src/decidim/datepicker/datepicker_functions.js

@@ -6,11 +6,16 @@ export const adjustPickerPosition = (input, datePickerContainer, selector) => {
   if (getComputedStyle(parent).position === "static") {
     parent.style.position = "relative";
   }
+  const stickyFooterItem = document.querySelector(".item__edit-sticky");
+
+  const availableBottom = stickyFooterItem
+    ? stickyFooterItem.getBoundingClientRect().top
+    : window.innerHeight;
 
-  const rect = input.getBoundingClientRect();
   const calendarHeight = datePickerContainer.offsetHeight;
+  const rect = input.getBoundingClientRect();
+  const spaceBelow = availableBottom - rect.bottom;
   const spaceAbove = rect.top;
-  const spaceBelow = window.innerHeight - rect.bottom;
   const openBelow = spaceBelow >= calendarHeight || spaceBelow >= spaceAbove;
 
   if (openBelow) {
@@ -50,10 +55,7 @@ export const setMinute = (value) => {
 };
 
 export const formatInputDate = (date, formats) => {
-  const dateList = date.split("-");
-  const year = dateList[0];
-  const month = dateList[1];
-  const day = dateList[2];
+  const [year, month, day] = date.split("-");
 
   if (formats.order === "m-d-y") {
     return `${month}${formats.separator}${day}${formats.separator}${year}`;
@@ -63,10 +65,34 @@ export const formatInputDate = (date, formats) => {
   return `${day}${formats.separator}${month}${formats.separator}${year}`;
 };
 
+/**
+ * Splits a time string into two elements: hours and minutes. Ensures a returned
+ * array of size 2 for any kind of strings or `null` values.
+ *
+ * Examples:
+ * splitTime("") => ["00", "00"]
+ * splitTime(null) => ["00", "00"]
+ * splitTime("12") => ["12", "00"]
+ * splitTime("12:30") => ["12", "30"]
+ * splitTime("2:4") => ["02", "04"]
+ * splitTime("12:30:45") => ["12", "30"]
+ *
+ * @param {String} value The original time string, typically hh:ss.
+ * @returns {Array} An array with two elements where the first element is the
+ *   hour part and the second element is the minute part.
+ */
+const splitTime = (value) => {
+  return [...(value || "").split(":"), "00"].splice(0, 2).map((part) => part.padStart(2, "0"));
+};
+
 export const formatInputTime = (time, format, input) => {
-  const timeList = time.split(":");
-  let hour = timeList[0];
-  const minute = timeList[1];
+  if (!time) {
+    return "";
+  } else if (time.length < 1) {
+    return time;
+  }
+
+  let [hour, minute] = splitTime(time);
 
   if (format === 12) {
     if (Number(hour) === 12) {
@@ -80,11 +106,9 @@ export const formatInputTime = (time, format, input) => {
     } else if (Number(hour) === 0) {
       hour = "12";
     }
-
-    return `${hour}:${minute}`;
   };
 
-  return time;
+  return `${hour}:${minute}`;
 };
 
 export const changeHourDisplay = (change, hour, format) => {
@@ -199,29 +223,21 @@ export const formatDate = (value, formats) => {
 };
 
 export const formatTime = (value, format, inputname) => {
+  let [hour, minute] = splitTime(value);
+
   if (format === 12) {
-    const splitValue = value.split(":");
-    let hour = splitValue[0];
-    const minute = splitValue[1];
     if (document.getElementById(`period_am_${inputname}`).checked) {
-      switch (hour) {
-      case "12":
+      if (hour === "12") {
         hour = "00";
-
-        return `${hour}:${minute}`;
-      default:
-        return value;
-      };
+      }
     } else if (document.getElementById(`period_pm_${inputname}`).checked) {
       if (Number(hour) > 0 && Number(hour) < 12) {
         hour = `${Number(hour) + 12}`;
       };
-
-      return `${hour}:${minute}`
     };
   };
 
-  return value;
+  return `${hour}:${minute}`;
 };
 
 export const updateInputValue = (input, formats, time) => {

data/app/packs/src/decidim/datepicker/generate_datepicker.js

@@ -51,7 +51,7 @@ export default function generateDatePicker(input, row, formats) {
   dateColumn.appendChild(datePickerContainer);
 
   let prevDate = null;
-  let defaultTime = input.getAttribute("default_time") || "00:00"
+  let defaultTime = input.dataset.defaultTime || "00:00"
 
   const datePickerDisplay = (event) => {
     if (!dateColumn.contains(event.target)) {
@@ -72,7 +72,7 @@ export default function generateDatePicker(input, row, formats) {
       if (input.type === "date") {
         input.value = `${formatDate(date.value, formats)}`;
       } else if (input.type === "datetime-local") {
-        input.value = `${formatDate(date.value, formats)}T${formatTime(document.querySelector(`#${input.id}_time`).value, formats.time, input.id) || defaultTime}`;
+        input.value = `${formatDate(date.value, formats)}T${formatTime(document.querySelector(`#${input.id}_time`).value || defaultTime, formats.time, input.id)}`;
       };
     };
   });
@@ -88,7 +88,7 @@ export default function generateDatePicker(input, row, formats) {
       if (input.type === "date") {
         input.value = `${formatDate(date.value, formats)}`;
       } else if (input.type === "datetime-local") {
-        input.value = `${formatDate(date.value, formats)}T${formatTime(document.querySelector(`#${input.id}_time`).value, formats.time, input.id) || defaultTime}`;
+        input.value = `${formatDate(date.value, formats)}T${formatTime(document.querySelector(`#${input.id}_time`).value || defaultTime, formats.time, input.id)}`;
       };
     };
   });
@@ -103,7 +103,7 @@ export default function generateDatePicker(input, row, formats) {
     if (input.type === "date") {
       input.value = `${pickedDate}`;
     } else if (input.type === "datetime-local") {
-      input.value = `${pickedDate}T${formatTime(document.querySelector(`#${input.id}_time`).value, formats.time, input.id) || defaultTime}`;
+      input.value = `${pickedDate}T${formatTime(document.querySelector(`#${input.id}_time`).value || defaultTime, formats.time, input.id)}`;
     };
     datePickerContainer.style.display = "none";
   });

data/app/packs/src/decidim/datepicker/test/datepicker_functions_adjust_picker_position.test.js

@@ -128,6 +128,37 @@ describe("adjustDatePickerPosition", () => {
 
     expect(datePickerContainer.style.right).toBe("0px");
   });
+
+  it("opens below when there is enough space above the sticky action area", () => {
+    jest.spyOn(input, "getBoundingClientRect").mockReturnValue({
+      top: 100,
+      bottom: 140
+    });
+
+    Reflect.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: 800
+    });
+
+    const stickyContainer = document.createElement("div");
+    stickyContainer.className = "item__edit-sticky";
+
+    jest.spyOn(stickyContainer, "getBoundingClientRect").mockReturnValue({
+      top: 500
+    });
+
+    document.body.appendChild(stickyContainer);
+
+    try {
+      adjustPickerPosition(input, datePickerContainer, ".datepicker__date-column");
+
+      expect(datePickerContainer.style.top).toBe("40px");
+      expect(datePickerContainer.style.bottom).toBe("");
+    } finally {
+      document.body.removeChild(stickyContainer);
+    }
+  });
 });
 
 
@@ -231,4 +262,37 @@ describe("adjustTimePickerPosition", () => {
 
     expect(timePicker.style.right).toBe("0px");
   });
+
+  it("opens above when sticky action area reduces the available space below", () => {
+    jest.spyOn(input, "getBoundingClientRect").mockReturnValue({
+      top: 300,
+      bottom: 340
+    });
+
+    Reflect.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: 600
+    });
+
+    const stickyContainer = document.createElement("div");
+    stickyContainer.className = "item__edit-sticky";
+
+    jest.spyOn(stickyContainer, "getBoundingClientRect").mockReturnValue({
+      top: 500
+    });
+
+    document.body.appendChild(stickyContainer);
+
+    adjustPickerPosition(
+      input,
+      timePicker,
+      ".datepicker__time-column"
+    );
+
+    expect(timePicker.style.top).toBe("");
+    expect(timePicker.style.bottom).toBe("30px");
+
+    document.body.removeChild(stickyContainer);
+  });
 });

data/app/packs/src/decidim/datepicker/test/time.test.js

@@ -49,34 +49,42 @@ describe("setMinute", () => {
 });
 
 describe("formatInputTime", () => {
-  const setupDOM = () => {
-    document.body.innerHTML = `
-      <input type="radio" id="period_am_exampleInput" name="period">
-      <input type="radio" id="period_pm_exampleInput" name="period">
-    `;
-  };
-
   describe("24-hour format", () => {
+    const format = 24;
+    const input = { id: "exampleInput" };
+
     it("returns the value in correct format", () => {
-      setupDOM();
-      const time = "15:30";
-      const format = 24;
-      const input = { id: "exampleInput" };
+      const result = formatInputTime("15:30", format, input);
 
-      const result = formatInputTime(time, format, input);
+      expect(result).toBe("15:30");
+    });
+
+    it("returns the value in correct format if seconds are provided", () => {
+      const result = formatInputTime("15:30:04", format, input);
 
       expect(result).toBe("15:30");
     });
+
+    it("returns an empty string if an empty string is provided", () => {
+      const result = formatInputTime("", 24, { id: "exampleInput" });
+
+      expect(result).toBe("");
+    });
   })
 
   describe("12-hour format", () => {
-    it("returns the value in correct format and checks the PM radio-button", () => {
-      setupDOM();
-      const time = "12:45";
-      const format = 12;
-      const input = { id: "exampleInput" };
+    beforeEach(() => {
+      document.body.innerHTML = `
+        <input type="radio" id="period_am_exampleInput" name="period">
+        <input type="radio" id="period_pm_exampleInput" name="period">
+      `;
+    });
+
+    const format = 12;
+    const input = { id: "exampleInput" };
 
-      const result = formatInputTime(time, format, input);
+    it("returns the value in correct format and checks the PM radio-button", () => {
+      const result = formatInputTime("12:45", format, input);
 
       expect(result).toBe("12:45");
       expect(document.getElementById("period_pm_exampleInput").checked).toBeTruthy();
@@ -84,17 +92,24 @@ describe("formatInputTime", () => {
     });
 
     it("returns the value in correct format", () => {
-      setupDOM();
-      const time = "00:25";
-      const format = 12;
-      const input = { id: "exampleInput" };
-
-      const result = formatInputTime(time, format, input);
+      const result = formatInputTime("00:25", format, input);
 
       expect(result).toBe("12:25");
       // We are not expecting a radio button to be selected here since in a real environment the selected button is not
       // handled by this method for values < 12
     });
+
+    it("returns the value in correct format if seconds are provided", () => {
+      const result = formatInputTime("00:25:04", format, input);
+
+      expect(result).toBe("12:25");
+    });
+
+    it("returns an empty string if an empty string is provided", () => {
+      const result = formatInputTime("", 24, { id: "exampleInput" });
+
+      expect(result).toBe("");
+    });
   })
 });
 

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;
 }