decidim-core 0.31.3 → 0.31.4

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

@@ -80,7 +80,9 @@ export default Image.extend({
   addAttributes() {
     return {
       ...this.parent?.(),
-      width: { default: null }
+      width: { default: null },
+      href: { default: null },
+      target: { default: null }
     };
   },
 
@@ -92,13 +94,16 @@ export default Image.extend({
       ...this.parent?.(),
       imageDialog: () => async ({ dispatch }) => {
         if (dispatch) {
-          let { src, alt, width } = this.editor.getAttributes("image");
+          let { src, alt, width, href, target } = this.editor.getAttributes("image");
 
           this.editor.commands.toggleDialog(true);
-          const dialogState = await uploadDialog.toggle({ src, alt }, {
-            inputLabel: i18n.altLabel,
-            uploadHandler: async (file) => uploadImage(file, this.options.uploadImagesPath)
-          });
+          const dialogState = await uploadDialog.toggle(
+            { src, alt },
+            {
+              inputLabel: i18n.altLabel,
+              uploadHandler: async (file) => uploadImage(file, this.options.uploadImagesPath)
+            }
+          );
           this.editor.commands.toggleDialog(false);
 
           if (dialogState !== "save") {
@@ -113,8 +118,7 @@ export default Image.extend({
 
           src = uploadDialog.getValue("src");
           alt = uploadDialog.getValue("alt");
-
-          return this.editor.chain().setImage({ src, alt, width }).focus(null, { scrollIntoView: false }).run();
+          return this.editor.chain().setImage({ src, alt, width, href, target }).focus(null, { scrollIntoView: false }).run();
         }
 
         return true;
@@ -127,18 +131,52 @@ export default Image.extend({
   },
 
   parseHTML() {
-    return [{ tag: "div[data-image] img[src]:not([src^='data:'])" }];
+    return [
+      {
+        tag: "div[data-image] img[src]:not([src^='data:'])",
+        getAttrs: (dom) => {
+          // Check if the image's parent div is wrapped in a link
+          const imageDiv = dom.closest("div[data-image]");
+          const link = imageDiv?.parentElement;
+          if (link && link.tagName === "A" && link.hasAttribute("href")) {
+            const attrs = { href: link.getAttribute("href") };
+            if (link.hasAttribute("target")) {
+              attrs.target = link.getAttribute("target");
+            }
+            return attrs;
+          }
+          return {};
+        }
+      }
+    ];
   },
 
   renderHTML({ HTMLAttributes }) {
-    return [
+    const { href, target, ...imgAttributes } = HTMLAttributes;
+    const imageContent = [
       "div",
       { "class": "editor-content-image", "data-image": "" },
       [
         "img",
-        mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)
+        mergeAttributes(this.options.HTMLAttributes, imgAttributes)
       ]
     ];
+
+    if (href) {
+      const anchorAttributes = { href };
+      const anchorTarget = target;
+      if (anchorTarget) {
+        anchorAttributes.target = anchorTarget;
+        anchorAttributes.rel = "noopener noreferrer";
+      }
+      return [
+        "a",
+        anchorAttributes,
+        imageContent
+      ];
+    }
+
+    return imageContent;
   },
 
   addProseMirrorPlugins() {

data/app/packs/src/decidim/editor/extensions/image/node_view.js

@@ -62,7 +62,9 @@ export default (self) => {
     const img = contentDOM.querySelector("img");
     let activeResizeControl = null,
         currentHeight = null,
+        currentHref = node.attrs.href,
         currentSrc = node.attrs.src,
+        currentTarget = node.attrs.target,
         currentWidth = null,
         naturalHeight = img.naturalHeight,
         naturalWidth = img.naturalWidth,
@@ -185,7 +187,13 @@ export default (self) => {
           return false;
         }
 
-        const { alt, src, title, width } = updatedNode.attrs;
+        const { alt, src, title, width, href, target } = updatedNode.attrs;
+
+        // If the href or target changed, we need to recreate the node because the
+        // structure changes (wrapped in <a> vs not wrapped)
+        if (href !== currentHref || target !== currentTarget) {
+          return false;
+        }
 
         // We set the value through an attribute change here because otherwise
         // we would trigger a mutation in the DOM which causes the update method

data/app/packs/src/decidim/editor/extensions/link/bubble_menu.js

@@ -1,25 +1,53 @@
-import { PluginKey } from "prosemirror-state";
+import { NodeSelection, PluginKey } from "prosemirror-state";
 
 import { getDictionary } from "src/decidim/refactor/moved/i18n";
 import BubbleMenu from "src/decidim/editor/common/bubble_menu";
 
 class LinkBubbleMenu extends BubbleMenu {
-  shouldDisplay() {
-    return this.editor.isActive("link");
+  shouldDisplay(view) {
+    if (this.editor.isActive("link")) {
+      return true;
+    }
+
+    const selection = view.state.selection;
+    return this.isImage(selection) && Boolean(selection.node.attrs.href);
   }
 
-  display() {
-    const { href } = this.editor.getAttributes("link");
-    this.element.querySelector("[data-linkbubble-value]").textContent = href;
+  display(view) {
+    if (this.editor.isActive("link")) {
+      const { href } = this.editor.getAttributes("link");
+      this.updateHref(href);
+      return;
+    }
+
+    const selection = view.state.selection;
+    if (this.isImage(selection)) {
+      this.bubble.style.zIndex = "10";
+      this.updateHref(selection.node.attrs.href);
+    }
   }
 
   handleAction(action) {
     if (action === "remove") {
+      const { selection } = this.editor.state;
+      if (this.isImage(selection)) {
+        this.editor.chain().focus(null, { scrollIntoView: false }).updateAttributes("image", { href: null, target: null }).run();
+        return;
+      }
+
       this.editor.chain().focus(null, { scrollIntoView: false }).unsetLink().run();
     } else {
       this.editor.commands.linkDialog();
     }
   }
+
+  updateHref(href) {
+    this.element.querySelector("[data-linkbubble-value]").textContent = href;
+  }
+
+  isImage(selection) {
+    return selection instanceof NodeSelection && selection.node.type.name === "image";
+  }
 }
 
 const createElement = () => {

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

@@ -1,5 +1,5 @@
 import Link from "@tiptap/extension-link";
-import { Plugin } from "prosemirror-state";
+import { Plugin, NodeSelection } from "prosemirror-state";
 
 import { getDictionary } from "src/decidim/refactor/moved/i18n";
 import InputDialog from "src/decidim/editor/common/input_dialog";
@@ -40,31 +40,55 @@ export default Link.extend({
       ...this.parent?.(),
 
       toggleLinkBubble: () => ({ dispatch }) => {
+        const { selection } = this.editor.state;
+        const isImageSelection = selection instanceof NodeSelection && selection.node.type.name === "image";
+        const imageHasLink = isImageSelection && Boolean(selection.node.attrs.href);
+
         if (dispatch) {
-          if (this.editor.isActive("link")) {
-            this.storage.bubbleMenu.show();
+          if (this.editor.isActive("link") || (isImageSelection && imageHasLink)) {
+            this.storage.bubbleMenu.handleSelectionChange(this.editor.view);
             return true;
           }
 
           this.storage.bubbleMenu.hide();
           return false;
         }
+
+        if (isImageSelection) {
+          return imageHasLink;
+        }
+
         return this.editor.isActive("link");
       },
 
       linkDialog: () => async ({ dispatch, commands }) => {
         if (dispatch) {
-          // If the cursor is within the link but the link is not selected, the
-          // link would not be correctly updated. Also if only a part of the
-          // link is selected, the link would be split to separate links, only
-          // the current selection getting the updated link URL.
-          commands.extendMarkRange("link");
+          const { state } = this.editor;
+          const { selection } = state;
+          const isImageSelection = selection instanceof NodeSelection && selection.node.type.name === "image";
+          const nodeType = (() => {
+            if (isImageSelection) {
+              return "image";
+            }
+            return "link";
+          })();
+
+          if (!isImageSelection) {
+            // If the cursor is within the link but the link is not selected, the
+            // link would not be correctly updated. Also if only a part of the
+            // link is selected, the link would be split to separate links, only
+            // the current selection getting the updated link URL.
+            commands.extendMarkRange("link");
+          }
 
           this.storage.bubbleMenu.hide();
 
           const { allowTargetControl } = this.options;
 
-          let { href, target } = this.editor.getAttributes("link");
+          let href = null;
+          let target = null;
+
+          ({ href, target } = this.editor.getAttributes(nodeType));
 
           const inputs = { href: { type: "text", label: i18n.hrefLabel } };
           if (allowTargetControl) {
@@ -88,16 +112,25 @@ export default Link.extend({
             target = null;
           }
 
+          const buildChain = () => this.editor.chain().focus(null, { scrollIntoView: false });
+
           if (dialogState !== "save") {
-            this.editor.chain().focus(null, { scrollIntoView: false }).toggleLinkBubble().run();
+            buildChain().toggleLinkBubble().run();
             return false;
           }
 
           if (!href || href.trim().length < 1) {
-            return this.editor.chain().focus(null, { scrollIntoView: false }).unsetLink().run();
+            if (isImageSelection) {
+              return buildChain().updateAttributes("image", { href: null, target: null }).run();
+            }
+            return buildChain().unsetLink().run();
+          }
+
+          if (isImageSelection) {
+            return buildChain().updateAttributes("image", { href: href, target }).toggleLinkBubble().run();
           }
 
-          return this.editor.chain().focus(null, { scrollIntoView: false }).setLink({ href, target }).toggleLinkBubble().run();
+          return buildChain().setLink({ href: href, target }).toggleLinkBubble().run();
         }
 
         return true;

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

@@ -0,0 +1,161 @@
+/* global jest, global */
+
+import { createBasicEditor, updateContent, sleep } from "src/decidim/editor/test/helpers";
+
+import Dialog from "src/decidim/editor/extensions/dialog";
+import Image from "src/decidim/editor/extensions/image";
+import uploadTemplates from "src/decidim/editor/test/fixtures/upload_templates";
+
+class DummyDialog {
+  constructor(element) { this.element = element; }
+
+  open() { this.element.dataset.dialogOpen = true; }
+
+  close() { this.element.dataset.dialogOpen = null; }
+}
+
+// Not implemented in Jest
+global.Touch = class Touch {
+  constructor(options) {
+    this.pageX = options.pageX;
+    this.pageY = options.pageY;
+  }
+}
+
+describe("Image (links)", () => {
+  let editor = null;
+  let editorElement = null;
+  let uploadDialogElement = null;
+
+  beforeEach(() => {
+    document.body.innerHTML = "";
+
+    const dialogWrapper = document.createElement("div");
+    dialogWrapper.innerHTML = uploadTemplates.redesign;
+    uploadDialogElement = dialogWrapper.firstElementChild;
+    uploadDialogElement.dataset.dialog = "testDialog";
+    uploadDialogElement.dialog = new DummyDialog(uploadDialogElement);
+    window.Decidim.currentDialogs = { testDialog: uploadDialogElement.dialog };
+    document.body.append(uploadDialogElement);
+
+    editor = createBasicEditor({
+      extensions: [Dialog, Image.configure({ uploadDialogSelector: "#upload_dialog", uploadImagesPath: "/editor_images", contentTypes: ["image/png"] })]
+    });
+    editorElement = editor.view.dom;
+
+    const csrf = document.createElement("meta");
+    csrf.setAttribute("name", "csrf-token");
+    csrf.setAttribute("content", "abcdef0123456789");
+    document.head.append(csrf);
+
+    global.fetch = jest.fn(() => Promise.resolve({ ok: true, json: () => Promise.resolve({ url: "/path/to/image.jpg" }) }));
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("allows setting an image with href and target attributes", async () => {
+    editorElement.focus();
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image", href: "https://example.com", target: "_blank" });
+    await sleep(0);
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <a href="https://example.com" target="_blank" rel="noopener noreferrer">
+        <div class="editor-content-image" data-image="">
+          <img src="/path/to/image.jpg" alt="Test image">
+        </div>
+      </a>
+    `);
+  });
+
+  it("allows setting an image with href but no target", async () => {
+    editorElement.focus();
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image", href: "https://example.com" });
+    await sleep(0);
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <a href="https://example.com">
+        <div class="editor-content-image" data-image="">
+          <img src="/path/to/image.jpg" alt="Test image">
+        </div>
+      </a>
+    `);
+  });
+
+  it("parses existing HTML with linked images", async () => {
+    editorElement.focus();
+    await updateContent(editorElement,
+      '<a href="https://example.com" target="_blank"><div class="editor-content-image" data-image=""><img src="/path/to/image.jpg" alt="Test image"></div></a>',
+      editor
+    );
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <a href="https://example.com" target="_blank" rel="noopener noreferrer">
+        <div class="editor-content-image" data-image="">
+          <img src="/path/to/image.jpg" alt="Test image">
+        </div>
+      </a>
+    `);
+  });
+
+  it("parses existing HTML with linked images without target", async () => {
+    editorElement.focus();
+    await updateContent(editorElement,
+      '<a href="https://example.com"><div class="editor-content-image" data-image=""><img src="/path/to/image.jpg" alt="Test image"></div></a>',
+      editor
+    );
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <a href="https://example.com">
+        <div class="editor-content-image" data-image="">
+          <img src="/path/to/image.jpg" alt="Test image">
+        </div>
+      </a>
+    `);
+  });
+
+  it("allows updating image link attributes", async () => {
+    editorElement.focus();
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image", href: "https://example.com", target: "_blank" });
+    await sleep(0);
+
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image", href: "https://docs.example.com" });
+    await sleep(0);
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <a href="https://docs.example.com">
+        <div class="editor-content-image" data-image="">
+          <img src="/path/to/image.jpg" alt="Test image">
+        </div>
+      </a>
+    `);
+  });
+
+  it("allows removing link from image", async () => {
+    editorElement.focus();
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image", href: "https://example.com", target: "_blank" });
+    await sleep(0);
+
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image", href: null, target: null });
+    await sleep(0);
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <div class="editor-content-image" data-image="">
+        <img src="/path/to/image.jpg" alt="Test image">
+      </div>
+    `);
+  });
+
+  it("renders images without links correctly", async () => {
+    editorElement.focus();
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image" });
+    await sleep(0);
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <div class="editor-content-image" data-image="">
+        <img src="/path/to/image.jpg" alt="Test image">
+      </div>
+    `);
+  });
+});

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

@@ -106,4 +106,21 @@
   .editor-indent-10 {
     @apply ml-40;
   }
+
+  // Style for external link icon inside linked images
+  a:has(.editor-content-image) [data-external-link="true"] {
+    @apply block relative;
+
+    margin: -1.5rem 0 1em auto;
+    width: fit-content;
+
+    svg {
+      @apply w-4 h-4;
+    }
+  }
+
+  // Make sure the anchor with image is positioned for proper icon placement
+  a:has(.editor-content-image) {
+    @apply block relative;
+  }
 }

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

@@ -130,6 +130,16 @@
         [data-image-resizer-wrapper] {
           @apply relative inline-block;
 
+          [data-image-resizer-control],
+          [data-image-resizer-dimensions] {
+            z-index: 1;
+          }
+
+          > a {
+            position: relative;
+            z-index: 0;
+          }
+
           [data-image-resizer-control] {
             @apply absolute hidden w-2.5 h-2.5 rounded-none border border-solid border-[#000] bg-[#fff] opacity-80;
           }

data/app/presenters/decidim/menu_item_presenter.rb

@@ -29,7 +29,7 @@ module Decidim
     delegate :content_tag, :safe_join, :link_to, :active_link_to_class, :is_active_link?, :icon, to: :@view
 
     def render
-      content_tag :li, role: :menuitem, class: link_wrapper_classes do
+      content_tag :li, role: menuitem_role, class: link_wrapper_classes do
         output = if url == "#"
                    [content_tag(:span, composed_label, class: "sidebar-menu__item-disabled")]
                  else
@@ -69,6 +69,12 @@ module Decidim
       [@options.element_wrapper_class, active_class].compact.join(" ")
     end
 
+    def menuitem_role
+      return if @options.role == false
+
+      @options.role || :menuitem
+    end
+
     def active_class
       active_link_to_class(
         url,

data/app/views/decidim/devise/registrations/new.html.erb

@@ -34,6 +34,7 @@
       <%= f.text_field :name, help_text: t("decidim.devise.registrations.new.username_help"), autocomplete: "name", placeholder: "John Doe" %>
 
       <%= f.email_field :email, autocomplete: "email", placeholder: t("placeholder_email", scope: "decidim.devise.shared") %>
+      <span class="sr-only"><%= t("placeholder_email", scope: "decidim.devise.shared") %></span>
 
       <%= render partial: "decidim/account/password_fields", locals: { form: f, user: :user } %>
     </div>

data/app/views/decidim/devise/shared/_tos_fields.html.erb

@@ -1,13 +1,13 @@
 <div id="card__tos" class="form__wrapper-block border-y-2">
   <h2 class="h4"><%= t("decidim.devise.registrations.new.tos_title") %></h2>
+  <span class="sr-only"><%= t("forms.required") %></span>
 
-  <div>
+  <div id="terms_of_service_summary">
     <% terms_of_service_summary_content_blocks.each do |content_block| %>
       <%= cell content_block.manifest.cell, content_block %>
     <% end %>
   </div>
-
-  <%= form.check_box :tos_agreement, label: t("decidim.devise.registrations.new.tos_agreement", link: link_to(t("decidim.devise.registrations.new.terms"), decidim.page_path("terms-of-service"))), label_options: { class: "form__wrapper-checkbox-label" } %>
+  <%= form.check_box :tos_agreement, label: t("decidim.devise.registrations.new.tos_agreement", link: link_to(t("decidim.devise.registrations.new.terms"), decidim.page_path("terms-of-service"))), label_options: { class: "form__wrapper-checkbox-label" }, "aria-describedby": "terms_of_service_summary" %>
 </div>
 
 <div id="card__newsletter" class="form__wrapper-block">

data/app/views/decidim/notification_mailer/event_received.html.erb

@@ -15,7 +15,7 @@
 
   <blockquote>
     <p>
-      <%= @event_instance.safe_resource_text %>
+      <%= decidim_transform_image_urls(@event_instance.safe_resource_text, @organization.host).html_safe %>
     </p>
   </blockquote>
 <% end %>
@@ -28,7 +28,7 @@
   <p style="font-weight: bold"><%= t(".translated_text") %></p>
   <blockquote>
     <p>
-      <%= @event_instance.safe_resource_translated_text %>
+      <%= decidim_transform_image_urls(@event_instance.safe_resource_translated_text, @organization.host).html_safe %>
     </p>
   </blockquote>
 <% end %>
@@ -40,7 +40,7 @@
         <table>
           <tr>
             <td>
-              <%= link_to @event_instance.button_text, @event_instance.button_url, target: :blank %>
+              <%= link_to decidim_sanitize(@event_instance.button_text, strip_tags: true), @event_instance.button_url, target: :blank %>
             </td>
           </tr>
         </table>

data/app/views/decidim/pages/_tabbed.html.erb

@@ -11,16 +11,16 @@
 
   <div class="vertical-tabs">
     <nav role="navigation" aria-label="<%= I18n.t("layouts.decidim.navigation.aria_label", title: translated_attribute(page.title)) %>">
-      <button id="dropdown-trigger-pages" data-controller="dropdown" data-target="dropdown-menu-pages" data-open-md="true" data-auto-close="true">
+      <button id="dropdown-trigger-pages" data-controller="dropdown" data-target="dropdown-menu-pages" data-open-md="true" data-auto-close="true" data-add-aria-roles="false">
         <span>
           <%= translated_attribute(page.title) %>
         </span>
         <%= icon "arrow-down-s-line" %>
         <%= icon "arrow-up-s-line" %>
       </button>
-      <ul id="dropdown-menu-pages" class="vertical-tabs__list" role="menu">
+      <ul id="dropdown-menu-pages" class="vertical-tabs__list">
         <% pages.each do |sibling| %>
-          <li class="<%= "is-active" if page == sibling %>" role="menuitem">
+          <li class="<%= "is-active" if page == sibling %>">
             <%= link_to translated_attribute(sibling.title), page_path(sibling.slug), "aria-current": ("page" if page == sibling) %>
           </li>
         <% end %>

data/app/views/decidim/shared/_filters.html.erb

@@ -2,9 +2,9 @@
 <% search_label = t("decidim.searches.filters.search") unless local_assigns.has_key?(:search_label) %>
 
 <% if filter_sections.present? || local_assigns.has_key?(:search_variable) %>
-  <%= filter_form_for filter, url_for, class: "new_filter self-stretch", data: { filters: "", controller: "accordion form-filter" } do |form| %>
+  <%= filter_form_for filter, url_for, class: "new_filter self-stretch", data: { filters: "", controller: "accordion form-filter", panel_role: "group" } do |form| %>
 
-    <button id="dropdown-trigger-filters" data-controller="dropdown" data-target="dropdown-menu-filters" data-open-md="true">
+    <button id="dropdown-trigger-filters" data-controller="dropdown" data-target="dropdown-menu-filters" data-open-md="true" data-add-aria-roles="false">
       <%= icon "arrow-down-s-line" %>
       <%= icon "arrow-up-s-line" %>
       <span>
@@ -14,13 +14,13 @@
 
     <div id="dropdown-menu-filters">
       <% if local_assigns.has_key?(:skip_to_id) %>
-        <%= link_to t("skip", scope: "decidim.shared.filter_form_help"), "##{skip_to_id}", class: "filter-skip", role: "menuitem", "data-skip-to-content": true %>
+        <%= link_to t("skip", scope: "decidim.shared.filter_form_help"), "##{skip_to_id}", class: "filter-skip", "data-skip-to-content": true %>
       <% end %>
 
-      <p id="filter-help-text" class="filter-help" role="menuitem" aria-disabled="true"><%= t("help", scope: "decidim.shared.filter_form_help") %></p>
+      <p id="filter-help-text" class="filter-help" aria-disabled="true"><%= t("help", scope: "decidim.shared.filter_form_help") %></p>
 
       <% if local_assigns.has_key?(:search_variable) %>
-        <div class="filter-search filter-container" role="menuitem">
+        <div class="filter-search filter-container">
           <%= form.search_field search_variable,
                                 label: false,
                                 placeholder: search_label,

data/app/views/decidim/shared/filters/_check_boxes_tree.html.erb

@@ -1,4 +1,4 @@
-<div class="filter-container" role="menuitem">
+<div class="filter-container">
   <button id="trigger-menu-<%= id %>" data-controls="panel-dropdown-menu-<%= id %>" data-open="false" data-open-md="true">
     <%= icon "arrow-down-s-line" %>
     <%= icon "arrow-up-s-line" %>

data/app/views/decidim/shared/filters/_collection.html.erb

@@ -1,4 +1,4 @@
-<div class="filter-container" role="menuitem">
+<div class="filter-container">
   <button id="trigger-menu-<%= id %>" data-controls="panel-dropdown-menu-<%= id %>" data-open="false" data-open-md="true">
     <%= icon "arrow-down-s-line" %>
     <%= icon "arrow-up-s-line" %>