decidim-core 0.32.1 → 0.32.2

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

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

@@ -92,14 +92,6 @@
       [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 {

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

@@ -22,19 +22,27 @@
   }
 
   [data-dialog-container] {
-    @apply grid grid-cols-[auto_1fr] items-start md:items-center gap-2 text-left;
+    @apply block text-left;
 
-    > svg {
-      @apply w-6 h-6 text-gray fill-current flex-none;
-    }
+    &:has(> svg) {
+      @apply grid grid-cols-[auto_1fr] items-start md:items-center gap-2;
+
+      > svg {
+        @apply w-6 h-6 text-gray fill-current flex-none mb-6;
+      }
 
-    > :last-child {
-      @apply col-span-2 md:col-span-1 md:col-start-2;
+      > :last-child {
+        @apply col-span-2 md:col-span-1 md:col-start-2;
+      }
     }
   }
 
   [data-dialog-title] {
-    @apply text-2xl text-black font-semibold focus:outline-none;
+    @apply flex items-center gap-2 text-xl text-gray-2 font-semibold focus:outline-none pb-2 mb-4 md:border-b md:border-gray-3;
+
+    > svg {
+      @apply w-6 h-6 text-gray fill-current flex-none;
+    }
   }
 
   [data-dialog-actions] {
@@ -59,7 +67,7 @@
     }
 
     [data-dialog-container] {
-      @apply grid-cols-none;
+      @apply grid grid-cols-none;
 
       &.layout-content {
         @apply bg-white;

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

@@ -1,21 +1,7 @@
 .qr-modal {
   @apply md:p-6 lg:p-8;
 
-  [data-dialog-title] {
-    @apply flex justify-start items-center text-2xl text-black font-semibold focus:outline-none;
-
-    > svg {
-      @apply w-10 h-10 text-gray fill-current flex-none;
-    }
-
-    > :last-child {
-      @apply ml-1;
-    }
-  }
-
   [data-dialog-container] {
-    @apply inline grid-cols-none;
-
     .content {
       @apply md:grid md:grid-cols-2 gap-5 md:py-4;
 
@@ -59,14 +45,6 @@
     @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;
-  }
-
   &__list {
     @apply my-6 flex flex-wrap justify-center items-center md:grid grid-cols-4 md:grid-cols-5 gap-3 md:gap-6 max-w-96 mx-auto text-secondary;
 

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

@@ -111,7 +111,17 @@
     }
 
     &-item {
-      @apply flex items-center gap-1 text-white font-semibold hover:underline [&>svg]:fill-current;
+      @apply flex items-center gap-1 text-white font-semibold hover:underline;
+    }
+
+    &-label {
+      @apply flex-1 min-w-0 overflow-hidden text-ellipsis;
+
+      overflow-wrap: anywhere;
+    }
+
+    &-item > svg {
+      @apply shrink-0 fill-current;
     }
   }
 

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

@@ -7,18 +7,21 @@
   .editor-content-videoEmbed {
     @apply my-10 mx-auto;
   }
+}
 
-  .editor-mention {
-    @apply inline-flex items-center align-bottom font-semibold underline text-secondary;
+// Resource mentions are rendered both inside rich text (`.rich-text-display`)
+// and inside comments (`.editor-content`), so they cannot be scoped to one of
+// those wrappers.
+.editor-mention {
+  @apply inline-flex items-center align-bottom font-semibold underline text-secondary;
 
-    img,
-    svg {
-      @apply w-5 h-5 rounded-full;
-    }
+  img,
+  svg {
+    @apply w-5 h-5 m-0 rounded-full;
+  }
 
-    span {
-      @apply ml-1;
-    }
+  span {
+    @apply ml-1;
   }
 }
 

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

@@ -27,7 +27,10 @@
 }
 
 .title-decorator {
-  @apply h2 md:h1 decorator;
+  @apply h2 md:h1 decorator break-normal;
+
+  hyphens: auto;
+  overflow-wrap: anywhere;
 }
 
 .text-with-links {
@@ -38,7 +41,7 @@
 
 /* default styles for those dynamic text blocks */
 .editor-content {
-  @apply prose max-w-full text-gray-2 text-lg prose-a:text-secondary break-words prose-ul:pl-4;
+  @apply prose max-w-full text-gray-2 text-lg prose-a:text-secondary break-words prose-ul:pl-8 prose-ol:pl-8;
 
   iframe {
     @apply w-full block max-w-[600px] max-h-[70vh] h-[450px] my-10 mx-auto;

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

@@ -83,6 +83,7 @@
   @include meta.load-css("stylesheets/decidim/actions");
   @include meta.load-css("stylesheets/decidim/emoji");
   @include meta.load-css("stylesheets/decidim/success_image");
+  @include meta.load-css("stylesheets/decidim/editor_suggestions");
 }
 
 // This applies the custom style imports registered at the application.

data/app/packs/stylesheets/decidim/legacy/email.scss

@@ -1725,7 +1725,6 @@ body.outlook p {
 table.body th.decidim-bar,
 table.body td.decidim-bar {
   padding: 10px 0;
-  background-color: #1a181d;
 }
 
 table.body {
@@ -1742,10 +1741,6 @@ table.body {
   height: 30px;
 }
 
-.cityhall-bar {
-  background-color: #2c2930;
-}
-
 .cityhall-logo {
   width: 150px;
   margin-top: 16px;

data/app/permissions/decidim/permissions.rb

@@ -9,6 +9,7 @@ module Decidim
       locales_action?
       component_public_action?
       search_scope_action?
+      public_content_action?
 
       public_report_content_action?
 
@@ -66,6 +67,23 @@ module Decidim
       toggle_allow([:search, :pick].include?(permission_action.action))
     end
 
+    # Public, non-resource content that any visitor is allowed to reach. The
+    # controllers using these subjects enforce the actual data visibility
+    # themselves (profile publication, private download tokens, newsletter
+    # tokens, etc.).
+    def public_content_action?
+      case permission_action.subject
+      when :open_data, :search, :profile, :private_download, :short_link,
+           :calendar, :badges, :static_map, :qr_code, :homepage, :manifest,
+           :offline, :link, :authorization, :error, :timeout, :page
+        allow! if permission_action.action == :read
+      when :newsletter
+        allow! if [:read, :unsubscribe].include?(permission_action.action)
+      when :upload_validation
+        allow! if permission_action.action == :create
+      end
+    end
+
     def manage_self_user_action?
       return unless permission_action.subject == :user
 
@@ -78,6 +96,8 @@ module Decidim
       authorization = context.fetch(:authorization, nil)
 
       case permission_action.action
+      when :read
+        allow!
       when :create
         toggle_allow(authorization.user == user && not_already_active?(authorization))
       when :update, :destroy

data/app/presenters/decidim/admin_log/component_presenter.rb

@@ -29,7 +29,7 @@ module Decidim
 
       def action_string
         case action
-        when "export_component", "soft_delete", "restore"
+        when "export_component", "soft_delete", "restore", "menu_hidden"
           "decidim.admin_log.component.#{action}"
         when "create", "delete", "publish", "unpublish", "update_permissions", "update_filters"
           generate_action_string(action)

data/app/presenters/decidim/log/base_presenter.rb

@@ -111,9 +111,18 @@ module Decidim
       # Returns an HTML-safe String.
       def present_explanation
         h.content_tag(:div, class: "logs__log__explanation") do
+          escaped_params = i18n_params.transform_values do |value|
+            if value.is_a?(String) && !value.html_safe?
+              ERB::Util.html_escape(value)
+            else
+              value
+            end
+          end
+
           I18n.t(
             action_string,
-            **i18n_params
+            escape: false,
+            **escaped_params
           ).html_safe
         end
       end

data/app/presenters/decidim/log/user_presenter.rb

@@ -67,9 +67,9 @@ module Decidim
 
       # Private: Presents the nickname of the user performing the action.
       #
-      # Returns an HTML-safe String.
+      # Returns a String.
       def present_user_nickname
-        extra["nickname"].html_safe
+        extra["nickname"]
       end
 
       # Private: Calculates the path for the user. Returns the path of the

data/app/presenters/decidim/menu_item_presenter.rb

@@ -48,11 +48,7 @@ module Decidim
     private
 
     def link_options
-      if active?
-        { aria: { current: "page" } }
-      else
-        {}
-      end.merge({ class: link_classes, role: menuitem_role })
+      { class: link_classes, role: menuitem_role }
     end
 
     def composed_label

data/app/presenters/decidim/resource_presenter.rb

@@ -45,5 +45,16 @@ module Decidim
         content
       end
     end
+
+    # Prepares content for plain text areas (non-editor). Renders mentions
+    # to plain @nickname text instead of editor-specific HTML tags.
+    def plain_locales(data, all_locales)
+      handle_locales(data, all_locales) do |content|
+        content = Decidim::ContentRenderers::BlobRenderer.new(content).render
+        content = Decidim::ContentRenderers::UserRenderer.new(content).render(plain: true)
+        content = Decidim::ContentRenderers::MentionResourceRenderer.new(content).render(plain: true)
+        content.html_safe
+      end
+    end
   end
 end

data/app/resolvers/decidim/meta_image_url_resolver.rb

@@ -82,7 +82,7 @@ module Decidim
         blob = find_blob_by_id(image_url.split("/").last)
         return blob if blob.present?
 
-        blob = find_blob_by_key(image_url.split("/").second_to_last)
+        blob = find_blob_from_url(image_url)
         return blob if blob.present?
       end
 
@@ -119,6 +119,12 @@ module Decidim
       nil
     end
 
+    def find_blob_from_url(url)
+      return GlobalID::Locator.locate(url, only: ActiveStorage::Blob) if url.start_with?("gid://")
+
+      find_blob_by_key(url.split("/").second_to_last)
+    end
+
     def find_blob_by_key(blob_key)
       ActiveStorage::Blob.find_signed(blob_key) if blob_key.present?
     end