decidim-core 0.31.2 → 0.32.1

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

@@ -0,0 +1,234 @@
+/* global jest */
+
+import { adjustPickerPosition } from "src/decidim/datepicker/datepicker_functions";
+
+describe("adjustDatePickerPosition", () => {
+  let input = null;
+  let parent = null;
+  let datePickerContainer = null;
+
+  let originalInnerHeight = window.innerHeight;
+
+  beforeEach(() => {
+    // Setup DOM structure
+    parent = document.createElement("div");
+    parent.className = "datepicker__date-column";
+    document.body.appendChild(parent);
+
+    input = document.createElement("input");
+    Reflect.defineProperty(input, "offsetHeight", {
+      configurable: true,
+      value: 40
+    });
+    parent.appendChild(input);
+
+    datePickerContainer = document.createElement("div");
+    datePickerContainer.className = "datepicker__container";
+    parent.appendChild(datePickerContainer);
+
+    // Mock offsetHeight for calendar
+    Reflect.defineProperty(datePickerContainer, "offsetHeight", {
+      configurable: true,
+      value: 300
+    });
+
+    // store original viewport height
+    originalInnerHeight = window.innerHeight;
+  });
+
+  afterEach(() => {
+    document.body.removeChild(parent);
+
+    Reflect.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: originalInnerHeight
+    });
+
+    jest.restoreAllMocks();
+  });
+
+  it("sets parent position to relative when static", () => {
+    parent.style.position = "static";
+
+    adjustPickerPosition(input, datePickerContainer, ".datepicker__date-column");
+
+    expect(parent.style.position).toBe("relative");
+  });
+
+  it("does not change parent position when already positioned", () => {
+    parent.style.position = "absolute";
+
+    adjustPickerPosition(input, datePickerContainer, ".datepicker__date-column");
+
+    expect(parent.style.position).toBe("absolute");
+  });
+
+  it("opens below when sufficient space below", () => {
+    jest.spyOn(input, "getBoundingClientRect").mockReturnValue({
+      top: 100,
+      bottom: 140
+    });
+
+    Reflect.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: 800
+    });
+
+    adjustPickerPosition(input, datePickerContainer, ".datepicker__date-column");
+
+    expect(datePickerContainer.style.top).toBe("40px");
+    expect(datePickerContainer.style.bottom).toBe("");
+  });
+
+  it("opens above when insufficient space below", () => {
+    jest.spyOn(input, "getBoundingClientRect").mockReturnValue({
+      top: 400,
+      bottom: 440
+    });
+
+    Reflect.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: 500
+    });
+
+    adjustPickerPosition(input, datePickerContainer, ".datepicker__date-column");
+
+    expect(datePickerContainer.style.top).toBe("");
+    expect(datePickerContainer.style.bottom).toBe("40px");
+  });
+
+  it("prefers opening below when space is equal above and below", () => {
+    jest.spyOn(input, "getBoundingClientRect").mockReturnValue({
+      top: 250,
+      bottom: 290
+    });
+
+    Reflect.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: 540
+    });
+
+    adjustPickerPosition(input, datePickerContainer, ".datepicker__date-column");
+
+    expect(datePickerContainer.style.top).toBe("40px");
+    expect(datePickerContainer.style.bottom).toBe("");
+  });
+
+  it("always sets right position to 0px", () => {
+    jest.spyOn(input, "getBoundingClientRect").mockReturnValue({
+      top: 100,
+      bottom: 140
+    });
+
+    adjustPickerPosition(input, datePickerContainer, ".datepicker__date-column");
+
+    expect(datePickerContainer.style.right).toBe("0px");
+  });
+});
+
+
+describe("adjustTimePickerPosition", () => {
+  let input = null;
+  let parent = null;
+  let timePicker = null;
+
+  let originalInnerHeight = window.innerHeight;
+
+  beforeEach(() => {
+    parent = document.createElement("div");
+    parent.className = "datepicker__time-column";
+    document.body.appendChild(parent);
+
+    input = document.createElement("input");
+    Reflect.defineProperty(input, "offsetHeight", {
+      configurable: true,
+      value: 30
+    });
+    parent.appendChild(input);
+
+    timePicker = document.createElement("div");
+    timePicker.className = "timepicker__container";
+    parent.appendChild(timePicker);
+
+    Reflect.defineProperty(timePicker, "offsetHeight", {
+      configurable: true,
+      value: 200
+    });
+
+    // store original value before any test mutates it
+    originalInnerHeight = window.innerHeight;
+  });
+
+  afterEach(() => {
+    // restore DOM
+    document.body.removeChild(parent);
+
+    // restore window.innerHeight (fix for CodeRabbit warning)
+    Reflect.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: originalInnerHeight
+    });
+
+    jest.restoreAllMocks();
+  });
+
+  it("sets parent position to relative when static", () => {
+    parent.style.position = "static";
+
+    adjustPickerPosition(input, timePicker, ".datepicker__time-column");
+
+    expect(parent.style.position).toBe("relative");
+  });
+
+  it("opens below when there is enough space", () => {
+    jest.spyOn(input, "getBoundingClientRect").mockReturnValue({
+      top: 100,
+      bottom: 130
+    });
+
+    Reflect.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: 700
+    });
+
+    adjustPickerPosition(input, timePicker, ".datepicker__time-column");
+
+    expect(timePicker.style.top).toBe("30px");
+    expect(timePicker.style.bottom).toBe("");
+  });
+
+  it("opens above when there is not enough space below", () => {
+    jest.spyOn(input, "getBoundingClientRect").mockReturnValue({
+      top: 400,
+      bottom: 430
+    });
+
+    Reflect.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: 500
+    });
+
+    adjustPickerPosition(input, timePicker, ".datepicker__time-column");
+
+    expect(timePicker.style.top).toBe("");
+    expect(timePicker.style.bottom).toBe("30px");
+  });
+
+  it("always aligns to the right", () => {
+    jest.spyOn(input, "getBoundingClientRect").mockReturnValue({
+      top: 100,
+      bottom: 130
+    });
+
+    adjustPickerPosition(input, timePicker, ".datepicker__time-column");
+
+    expect(timePicker.style.right).toBe("0px");
+  });
+});

data/app/packs/src/decidim/direct_uploads/upload_field.js

@@ -1,5 +1,5 @@
 import UploadModal from "src/decidim/direct_uploads/upload_modal";
-import { escapeHtml, escapeQuotes } from "src/decidim/utilities/text";
+import { escapeHtml } from "src/decidim/utilities/text";
 
 const updateModalTitle = (modal) => {
   if (modal.uploadItems.children.length === 0) {
@@ -67,7 +67,7 @@ const updateActiveUploads = (modal) => {
       const titleField = isMultiple
         ? `${modal.options.resourceName}[${modal.options.addAttribute}][${ix}][title]`
         : `${modal.options.resourceName}[${modal.options.addAttribute}][title]`
-      hidden += `<input type="hidden" name="${titleField}" value="${escapeQuotes(titleValue)}" />`
+      hidden += `<input type="hidden" name="${titleField}" value="${escapeHtml(titleValue)}" />`
 
       title = titleValue
     }
@@ -77,8 +77,8 @@ const updateActiveUploads = (modal) => {
       : `data-hidden-field="${file.hiddenField}"`
 
     const template = `
-      <div ${attachmentIdOrHiddenField} data-filename="${escapeQuotes(file.name)}" data-title="${escapeQuotes(title)}">
-        ${(/image/).test(file.type) && "<div><img src=\"data:,\" role=\"presentation\" /></div>" || ""}
+      <div ${attachmentIdOrHiddenField} data-filename="${escapeHtml(file.name)}" data-title="${escapeHtml(title)}">
+        ${(/image/).test(file.type) && "<div><img src=\"data:,\" alt=\"\" /></div>" || ""}
         <p>${escapeHtml(title)}</p>
         ${hidden}
       </div>

data/app/packs/src/decidim/direct_uploads/upload_modal.js

@@ -1,6 +1,6 @@
 import { Uploader } from "src/decidim/direct_uploads/uploader";
 import icon from "src/decidim/refactor/moved/icon";
-import { escapeHtml, escapeQuotes } from "src/decidim/utilities/text";
+import { escapeHtml } from "src/decidim/utilities/text";
 
 const STATUS = {
   VALIDATED: "validated",
@@ -170,7 +170,7 @@ export default class UploadModal {
 
   createUploadItem(file, errors, opts = {}) {
     const okTemplate = `
-      <img src="data:,", role="presentation" />
+      <img src="data:," alt="" />
       <span class="upload-modal__span">${escapeHtml(file.name)}</span>
     `
 
@@ -183,16 +183,17 @@ export default class UploadModal {
       </div>
     `
 
+    const titleInputId = `upload-title-${this.getOrdinalNumber()}`
     const titleTemplate = `
-      <img src="data:," role="presentation" />
+      <img src="data:," alt="" />
       <div>
         <div>
           <label>${this.locales.filename}</label>
           <span class="upload-modal__span">${escapeHtml(file.name)}</span>
         </div>
         <div>
-          <label for="${file.name}">${this.locales.title}</label>
-          <input class="sm" type="text" value="${escapeQuotes(opts.title || file.name)}" id="${file.name}" />
+          <label for="${titleInputId}">${this.locales.title}</label>
+          <input class="sm" type="text" value="${escapeHtml(opts.title || file.name)}" id="${titleInputId}" />
         </div>
       </div>
     `
@@ -216,7 +217,7 @@ export default class UploadModal {
       ? `data-attachment-id="${opts.attachmentId}"`
       : ""
     const fullTemplate = `
-      <li ${attachmentId} data-filename="${escapeQuotes(file.name)}" data-state="${state}">
+      <li ${attachmentId} data-filename="${escapeHtml(file.name)}" data-state="${state}">
         <div data-template="${template}">
           ${content.trim()}
           <button>${this.locales.remove}</button>
@@ -252,7 +253,11 @@ export default class UploadModal {
   }
 
   setProgressBar(name, value) {
-    this.uploadItems.querySelector(`[data-filename="${escapeQuotes(name)}"] progress`).value = value
+    const items = Array.from(this.uploadItems.querySelectorAll("[data-filename]"));
+    const item = items.filter((el) => el.dataset.filename === name).pop();
+    if (item) {
+      item.querySelector("progress").value = value;
+    }
   }
 
   updateAddAttachmentsButton() {

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;
       }
@@ -183,7 +185,7 @@ export const createSuggestionRenderer = (node, { itemConverter } = {}) => () =>
 export const createNodeView = (self) => {
   return ({ node }) => {
     const dom = document.createElement("span");
-    dom.textContent = self.options.renderLabel({ options: self.options, node });
+    dom.textContent = self.options.renderText({ options: self.options, node });
 
     const { id, label } = node.attrs;
     dom.dataset.suggestion = node.type.name;

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

@@ -43,7 +43,10 @@ export default Extension.create({
         heading: false,
         bold: false,
         orderedList: false,
-        codeBlock: false
+        codeBlock: false,
+        link: false,
+        underline: false,
+        trailingNode: false
       }),
       CharacterCount.configure(this.options.characterCount),
       Link.configure({ openOnClick: false, ...this.options.link }),

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() {
@@ -172,13 +210,16 @@ export default Image.extend({
             return true;
           },
 
-          handleDoubleClick() {
-            if (!editor.isActive("image")) {
-              return false;
+          handleDoubleClick(view, pos) {
+            const { state } = view;
+            const node = state.doc.nodeAt(pos);
+
+            if (node && node.type.name === "image") {
+              editor.chain().focus().imageDialog().run();
+              return true;
             }
 
-            editor.chain().focus().imageDialog().run();
-            return true;
+            return false;
           },
 
           handleDOMEvents: {

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/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/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 = () => {