decidim-core 0.31.2 → 0.31.4

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

@@ -1,5 +1,31 @@
 // Utility helper functions for the date and time picker functionality
 
+export const adjustPickerPosition = (input, datePickerContainer, selector) => {
+  const parent = input.closest(selector);
+
+  if (getComputedStyle(parent).position === "static") {
+    parent.style.position = "relative";
+  }
+
+  const rect = input.getBoundingClientRect();
+  const calendarHeight = datePickerContainer.offsetHeight;
+  const spaceAbove = rect.top;
+  const spaceBelow = window.innerHeight - rect.bottom;
+  const openBelow = spaceBelow >= calendarHeight || spaceBelow >= spaceAbove;
+
+  if (openBelow) {
+    // Open below
+    datePickerContainer.style.top = `${input.offsetHeight}px`;
+    datePickerContainer.style.bottom = "";
+  } else {
+    // Open above
+    datePickerContainer.style.top = "";
+    datePickerContainer.style.bottom = `${input.offsetHeight}px`;
+  }
+
+  datePickerContainer.style.right = "0px";
+};
+
 export const setHour = (value, format) => {
   const hour = value.split(":")[0];
   if (format === 12) {

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

@@ -1,6 +1,6 @@
 /* eslint-disable require-jsdoc */
 import icon from "src/decidim/refactor/moved/icon"
-import { dateToPicker, formatDate, displayDate, formatTime, calculateDatepickerPos } from "src/decidim/datepicker/datepicker_functions"
+import { dateToPicker, formatDate, displayDate, formatTime, calculateDatepickerPos, adjustPickerPosition } from "src/decidim/datepicker/datepicker_functions"
 import { dateKeyDownListener, dateBeforeInputListener } from "src/decidim/datepicker/datepicker_listeners"
 import { getDictionary } from "src/decidim/refactor/moved/i18n"
 
@@ -136,6 +136,7 @@ export default function generateDatePicker(input, row, formats) {
     };
     pickedDate = null;
     datePickerContainer.style.display = "block";
+    adjustPickerPosition(date, datePickerContainer, ".datepicker__date-column");
 
     document.addEventListener("click", datePickerDisplay);
 

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

@@ -2,7 +2,7 @@
 /* eslint max-lines: ["error", 310] */
 
 import icon from "src/decidim/refactor/moved/icon"
-import { changeHourDisplay, changeMinuteDisplay, formatDate, hourDisplay, minuteDisplay, formatTime, setHour, setMinute, updateTimeValue, updateInputValue } from "src/decidim/datepicker/datepicker_functions"
+import { changeHourDisplay, changeMinuteDisplay, formatDate, hourDisplay, minuteDisplay, formatTime, setHour, setMinute, updateTimeValue, updateInputValue, adjustPickerPosition } from "src/decidim/datepicker/datepicker_functions"
 import { timeKeyDownListener, timeBeforeInputListener } from "src/decidim/datepicker/datepicker_listeners";
 import { getDictionary } from "src/decidim/refactor/moved/i18n";
 
@@ -29,7 +29,6 @@ export default function generateTimePicker(input, row, formats) {
     clock.setAttribute("disabled", input.attributes.disabled);
   };
 
-
   timeColumn.appendChild(time);
   timeColumn.appendChild(clock);
 
@@ -279,6 +278,8 @@ export default function generateTimePicker(input, row, formats) {
     event.preventDefault();
     timePicker.style.display = "block";
     document.addEventListener("click", timePickerDisplay);
+    adjustPickerPosition(time, timePicker, ".datepicker__time-column")
+
     hours.value = hourDisplay(hour);
     minutes.value = minuteDisplay(minute);
   });

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