decidim-core 0.26.10 → 0.27.0.rc1

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

@@ -0,0 +1,264 @@
+import { Uploader } from "src/decidim/direct_uploads/uploader";
+import { truncateFilename, checkTitles, createHiddenInput } from "src/decidim/direct_uploads/upload_utility";
+
+// This class handles logic inside upload modal, but since modal is not inside the form
+// logic here moves "upload items" / hidden inputs to form.
+export default class UploadModal {
+  constructor(button, options = {}) {
+    // Button that opens the modal.
+    this.button = button;
+
+    // The provided options contains the options passed from the view in the
+    // `data-upload` attribute as a JSON.
+    let providedOptions = {};
+    try {
+      // The providedOptions can contain the following keys:
+      // - addAttribute - Field name / attribute of resource (e.g. avatar)
+      // - resourceName - The resource to which the attribute belongs (e.g. user)
+      // - resourceClass - Ruby class of the resource (e.g. Decidim::User)
+      // - optional - Defines if file is optional
+      // - multiple - Defines if multiple files can be uploaded
+      // - titled - Defines if file(s) can have titles
+      // - maxFileSize - Defines maximum file size in bytes
+      // - formObjectClass - Class of the current form object (e.g. Decidim::AccountForm)
+      providedOptions = JSON.parse(button.dataset.upload);
+    } catch (_e) {
+      // Don't care about the parse errors, just skip the provided options.
+    }
+
+    this.options = Object.assign(providedOptions, options)
+
+    this.name = this.button.name;
+    this.modal = document.querySelector(`#${button.dataset.open}`);
+    this.saveButton = this.modal.querySelector(`button.add-file-${this.name}`);
+    this.attachmentCounter = 0;
+    this.dropZoneEnabled = true;
+    this.modalTitle = this.modal.querySelector(".reveal__title");
+    this.uploadItems = this.modal.querySelector(".upload-items");
+    this.locales = JSON.parse(this.uploadItems.dataset.locales);
+    this.dropZone = this.modal.querySelector(".dropzone");
+    this.input = this.dropZone.querySelector("input");
+    this.uploadContainer = document.querySelector(`.upload-container-for-${this.name}`);
+    this.activeAttachments = this.uploadContainer.querySelector(".active-uploads");
+    this.trashCan = this.createTrashCan();
+  }
+
+  uploadFile(file) {
+    if (!this.dropZoneEnabled) {
+      return;
+    }
+
+    const title = file.name.split(".")[0].slice(0, 31);
+    const uploadItem = this.createUploadItem(file.name, title, "init");
+    const uploader = new Uploader(this, uploadItem, {
+      file: file,
+      url: this.input.dataset.directUploadUrl,
+      attachmentName: file.name
+    });
+    if (uploader.fileTooBig) {
+      return;
+    }
+
+    uploader.upload.create((error, blob) => {
+      if (error) {
+        uploadItem.dataset.state = "error";
+        const progressBar = uploadItem.querySelector(".progress-bar");
+        progressBar.classList.add("filled");
+        progressBar.innerHTML = this.locales.error;
+        console.error(error);
+      } else {
+        const ordinalNumber = this.getOrdinalNumber();
+
+        const attachmentDetails = document.createElement("div");
+        attachmentDetails.classList.add("attachment-details");
+        attachmentDetails.dataset.filename = file.name;
+        const titleAndFileNameSpan = document.createElement("span");
+        titleAndFileNameSpan.style.display = "none";
+        attachmentDetails.appendChild(titleAndFileNameSpan);
+
+        const hiddenBlobField = createHiddenInput(null, null, blob.signed_id);
+        if (this.options.titled) {
+          hiddenBlobField.name = `${this.options.resourceName}[${this.options.addAttribute}][${ordinalNumber}][file]`;
+        } else {
+          hiddenBlobField.name = `${this.options.resourceName}[${this.options.addAttribute}]`;
+        }
+
+        if (this.options.titled) {
+          const hiddenTitleField = createHiddenInput("hidden-title", `${this.options.resourceName}[${this.options.addAttribute}][${ordinalNumber}][title]`, title);
+          titleAndFileNameSpan.innerHTML = `${title} (${file.name})`;
+          attachmentDetails.appendChild(hiddenTitleField);
+        } else {
+          titleAndFileNameSpan.innerHTML = file.name;
+        }
+
+        if (!this.options.multiple) {
+          this.cleanTrashCan();
+        }
+
+        attachmentDetails.appendChild(hiddenBlobField);
+        uploadItem.appendChild(attachmentDetails);
+        uploader.validate(blob.signed_id);
+      }
+    });
+    this.updateDropZone();
+  }
+
+  getOrdinalNumber() {
+    const nextOrdinalNumber = this.attachmentCounter;
+    this.attachmentCounter += 1;
+    return nextOrdinalNumber;
+  }
+
+  updateDropZone() {
+    if (this.options.multiple) {
+      return;
+    }
+
+    if (this.uploadItems.children.length > 0) {
+      this.dropZone.classList.add("disabled");
+      this.dropZoneEnabled = false;
+      this.input.disabled = true;
+    } else {
+      this.dropZone.classList.remove("disabled");
+      this.dropZoneEnabled = true;
+      this.input.disabled = false;
+    }
+  }
+
+  createUploadItem(fileName, title, state) {
+    const wrapper = document.createElement("div");
+    wrapper.classList.add("upload-item");
+    wrapper.setAttribute("data-filename", fileName);
+
+    const firstRow = document.createElement("div");
+    const secondRow = document.createElement("div");
+    const thirdRow = document.createElement("div");
+    firstRow.classList.add("row", "upload-item-first-row");
+    secondRow.classList.add("row", "upload-item-second-row");
+    thirdRow.classList.add("row", "upload-item-third-row");
+
+    const fileNameSpan = document.createElement("span");
+    let fileNameSpanClasses = ["columns", "file-name-span"];
+    if (this.options.titled) {
+      fileNameSpanClasses.push("small-4", "medium-5");
+    } else {
+      fileNameSpanClasses.push("small-12");
+    }
+    fileNameSpan.classList.add(...fileNameSpanClasses);
+    fileNameSpan.innerHTML = truncateFilename(fileName);
+
+    const progressBar = document.createElement("div");
+    progressBar.classList.add("progress-bar");
+    if (state) {
+      if (state === "validated") {
+        progressBar.innerHTML = this.locales.uploaded;
+      } else {
+        progressBar.innerHTML = "0%";
+        progressBar.style.width = "15%";
+      }
+      wrapper.dataset.state = state;
+    }
+
+    const progressBarBorder = document.createElement("div");
+    progressBarBorder.classList.add("progress-bar-border");
+    progressBarBorder.appendChild(progressBar);
+
+    const progressBarWrapper = document.createElement("div");
+    progressBarWrapper.classList.add("columns", "progress-bar-wrapper");
+    progressBarWrapper.appendChild(progressBarBorder);
+    if (this.options.titled) {
+      progressBarWrapper.classList.add("small-4", "medium-5");
+    } else {
+      progressBarWrapper.classList.add("small-10");
+    }
+
+    const errorList = document.createElement("ul");
+    errorList.classList.add("upload-errors");
+
+    const removeButton = document.createElement("button");
+    removeButton.classList.add("columns", "small-3", "medium-2", "remove-upload-item");
+    removeButton.innerHTML = `× ${this.locales.remove}`;
+    removeButton.addEventListener(("click"), (event) => {
+      event.preventDefault();
+      const item = this.uploadItems.querySelector(`[data-filename='${fileName}']`);
+      this.trashCan.append(item);
+      this.updateDropZone();
+    })
+
+    const titleAndFileNameSpan = document.createElement("span");
+    titleAndFileNameSpan.classList.add("columns", "small-5", "title-and-filename-span");
+    titleAndFileNameSpan.innerHTML = `${title} (${truncateFilename(fileName)})`;
+
+    firstRow.appendChild(fileNameSpan);
+    secondRow.appendChild(progressBarWrapper);
+    thirdRow.appendChild(errorList);
+
+    let titleInputContainer = null;
+    if (this.options.titled) {
+      const titleInput = document.createElement("input");
+      titleInput.classList.add("attachment-title");
+      titleInput.type = "text";
+      titleInput.value = title;
+      titleInput.addEventListener("input", (event) => {
+        event.preventDefault();
+        checkTitles(this.uploadItems, this.saveButton);
+      })
+      titleInputContainer = document.createElement("div");
+      titleInputContainer.classList.add("columns", "small-5", "title-input-container");
+      titleInputContainer.appendChild(titleInput);
+
+      const noTitleErrorSpan = document.createElement("span");
+      noTitleErrorSpan.classList.add("form-error", "no-title-error");
+      noTitleErrorSpan.role = "alert";
+      noTitleErrorSpan.innerHTML = this.locales.title_required;
+      titleInputContainer.appendChild(noTitleErrorSpan);
+
+      const titleLabelSpan = document.createElement("span");
+      titleLabelSpan.classList.add("title-label-span");
+      titleLabelSpan.innerHTML = this.locales.title;
+
+      const titleContainer = document.createElement("div");
+      titleContainer.classList.add("columns", "small-8", "medium-7", "title-container");
+      titleContainer.appendChild(titleLabelSpan);
+      firstRow.appendChild(titleContainer);
+      secondRow.appendChild(titleInputContainer);
+    }
+
+    secondRow.appendChild(removeButton);
+
+    wrapper.appendChild(firstRow);
+    wrapper.appendChild(secondRow);
+    wrapper.appendChild(thirdRow);
+
+    this.uploadItems.appendChild(wrapper);
+
+    return wrapper;
+  }
+
+  updateAddAttachmentsButton() {
+    if (this.activeAttachments.children.length === 0) {
+      this.button.innerHTML = this.modalTitle.dataset.addlabel;
+    } else {
+      this.button.innerHTML = this.modalTitle.dataset.editlabel;
+    }
+  }
+
+  createTrashCan() {
+    const trashCan =  document.createElement("div");
+    trashCan.classList.add("trash-can");
+    trashCan.style.display = "none";
+    this.uploadItems.parentElement.appendChild(trashCan);
+    return trashCan;
+  }
+
+  cleanTrashCan() {
+    Array.from(this.trashCan.children).forEach((item) => {
+      const fileName = item.dataset.filename;
+      const activeAttachment = this.activeAttachments.querySelector(`div[data-filename='${fileName}']`);
+      if (activeAttachment) {
+        activeAttachment.remove();
+      }
+      item.remove();
+    })
+  }
+}

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

@@ -0,0 +1,49 @@
+export const checkTitles = (parentElement, saveButton) => {
+  let everyItemHasTitle = true;
+
+  Array.from(parentElement.children).forEach((item) => {
+    const title = item.querySelector("input[type='text']").value;
+    const noTitleErrorSpan = item.querySelector(".no-title-error");
+    if (!title || title.length === 0) {
+      everyItemHasTitle = false;
+      saveButton.disabled = true;
+      noTitleErrorSpan.classList.add("is-visible");
+      item.appendChild(noTitleErrorSpan);
+    } else {
+      noTitleErrorSpan.classList.remove("is-visible");
+    }
+  });
+
+  if (everyItemHasTitle) {
+    saveButton.disabled = false;
+  }
+}
+
+export const truncateFilename = (filename, maxLength = 31) => {
+  if (filename.length <= maxLength) {
+    return filename;
+  }
+
+  const charactersFromBegin = Math.floor(maxLength / 2) - 3;
+  const charactersFromEnd = maxLength - charactersFromBegin - 3;
+  return `${filename.slice(0, charactersFromBegin)}...${filename.slice(-charactersFromEnd)}`;
+}
+
+export const createHiddenInput = (elClasses, elName, elValue) => {
+  const el = document.createElement("input");
+  el.type = "hidden";
+  if (elClasses) {
+    if (typeof (elClasses) === "string") {
+      el.className = elClasses;
+    } else {
+      el.className = elClasses.join(" ")
+    }
+  }
+  if (elName) {
+    el.name = elName;
+  }
+  if (elValue) {
+    el.value = elValue;
+  }
+  return el;
+}

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

@@ -0,0 +1,89 @@
+import { DirectUpload } from "@rails/activestorage";
+
+export class Uploader {
+  constructor(modal, uploadItem, options) {
+    this.modal = modal;
+    this.uploadItem = uploadItem;
+    this.progressBar = uploadItem.querySelector(".progress-bar");
+    this.validationSent = false;
+    this.fileTooBig = false;
+    if (modal.options.maxFileSize && options.file.size > modal.options.maxFileSize) {
+      this.fileTooBig = true;
+      this.showError([modal.locales.file_size_too_large]);
+    } else {
+      this.upload = new DirectUpload(options.file, options.url, this);
+    }
+  }
+
+  showError(errors) {
+    this.progressBar.classList.add("filled");
+    this.progressBar.innerHTML = this.modal.locales.validation_error;
+    this.uploadItem.dataset.state = "error";
+    const errorList = this.uploadItem.querySelector(".upload-errors");
+    errors.forEach((error) => {
+      const errorItem = document.createElement("li");
+      errorItem.classList.add("form-error", "is-visible");
+      errorItem.innerHTML = error;
+      errorList.appendChild(errorItem);
+    })
+  }
+
+  validate(blobId) {
+    const callback = (data) => {
+      let errors = []
+      for (const [, value] of Object.entries(data)) {
+        errors = errors.concat(value);
+      }
+
+      this.progressBar.style.justifyContent = "center";
+      if (errors.length === 0) {
+        this.progressBar.innerHTML = this.modal.locales.uploaded;
+        this.uploadItem.dataset.state = "validated";
+      } else {
+        this.showError(errors);
+      }
+      this.progressBar.classList.add("filled");
+    }
+
+    if (!this.validationSent) {
+      let property = this.modal.options.addAttribute;
+      if (this.modal.options.titled) {
+        property = "file"
+      }
+      const params = new URLSearchParams({
+        resourceClass: this.modal.options.resourceClass,
+        property: property,
+        blob: blobId,
+        formClass: this.modal.options.formObjectClass
+      });
+
+      fetch(`/upload_validations?${params.toString()}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRF-Token": $("meta[name=csrf-token]").attr("content")
+        }
+      }).then((response) => response.json()).then((data) => {
+        callback(data);
+      });
+      this.validationSent = true;
+    }
+  }
+
+  directUploadWillStoreFileWithXHR(request) {
+    request.upload.addEventListener("progress", (event) => {
+      const progress = Math.floor(event.loaded / event.total * 100);
+      let width = "15%";
+      if (progress > 15) {
+        width = `${progress}%`;
+      }
+      this.progressBar.style.width = width;
+
+      if (progress === 100) {
+        this.progressBar.innerHTML = this.modal.locales.validating;
+        return;
+      }
+      this.progressBar.innerHTML = `${progress}%`;
+    });
+  }
+}

data/app/packs/src/decidim/editor/linebreak_module.js

@@ -129,6 +129,7 @@ class ScrollOvderride extends Scroll {
 Quill.register("blots/scroll", ScrollOvderride, true);
 Parchment.register(ScrollOvderride);
 
+
 export default function lineBreakButtonHandler(quill) {
   let range = quill.selection.getRange()[0];
   let currentLeaf = quill.getLeaf(range.index)[0];
@@ -166,6 +167,13 @@ Quill.register("modules/linebreak", (quill) => {
     }
   });
 
+  quill.clipboard.addMatcher("BR", (node) => {
+    if (node?.parentNode?.tagName === "A") {
+      return new Delta().insert("\n");
+    }
+    return new Delta().insert({"break": ""});
+  });
+
   addEnterBindings(quill);
   backspaceBindingsRangeAny(quill);
   backspaceBindings(quill);

data/app/packs/src/decidim/editor.js

@@ -1,58 +1,40 @@
 /* eslint-disable require-jsdoc */
 
-import lineBreakButtonHandler from "src/decidim/editor/linebreak_module";
-import "src/decidim/editor/clipboard_override";
-import "src/decidim/vendor/image-resize.min";
-import "src/decidim/vendor/image-upload.min";
+import lineBreakButtonHandler from "src/decidim/editor/linebreak_module"
+import "src/decidim/vendor/image-resize.min"
+import "src/decidim/vendor/image-upload.min"
 
-const quillFormats = [
-  "bold",
-  "italic",
-  "link",
-  "underline",
-  "header",
-  "list",
-  "alt",
-  "break",
-  "width",
-  "style",
-  "code",
-  "blockquote",
-  "indent"
-];
+const quillFormats = ["bold", "italic", "link", "underline", "header", "list", "video", "image", "alt", "break", "width", "style", "code", "blockquote", "indent"];
 
 export default function createQuillEditor(container) {
   const toolbar = $(container).data("toolbar");
   const disabled = $(container).data("disabled");
 
-  const allowedEmptyContentSelector = "iframe";
   let quillToolbar = [
     ["bold", "italic", "underline", "linebreak"],
     [{ list: "ordered" }, { list: "bullet" }],
     ["link", "clean"],
     ["code", "blockquote"],
-    [{ indent: "-1" }, { indent: "+1" }]
+    [{ "indent": "-1"}, { "indent": "+1" }]
   ];
 
-  let addImage = false;
-  let addVideo = false;
+  let addImage = $(container).data("editorImages");
 
-  /**
-   * - basic = only basic controls without titles
-   * - content = basic + headings
-   * - full = basic + headings + image + video
-   */
-  if (toolbar === "content") {
-    quillToolbar = [[{ header: [2, 3, 4, 5, 6, false] }], ...quillToolbar];
-  } else if (toolbar === "full") {
-    addImage = true;
-    addVideo = true;
+  if (toolbar === "full") {
     quillToolbar = [
       [{ header: [2, 3, 4, 5, 6, false] }],
       ...quillToolbar,
-      ["video"],
-      ["image"]
+      ["video"]
     ];
+  } else if (toolbar === "basic") {
+    quillToolbar = [
+      ...quillToolbar,
+      ["video"]
+    ];
+  }
+
+  if (addImage) {
+    quillToolbar.push(["image"]);
   }
 
   let modules = {
@@ -60,26 +42,17 @@ export default function createQuillEditor(container) {
     toolbar: {
       container: quillToolbar,
       handlers: {
-        linebreak: lineBreakButtonHandler
+        "linebreak": lineBreakButtonHandler
       }
     }
   };
   const $input = $(container).siblings('input[type="hidden"]');
   container.innerHTML = $input.val() || "";
   const token = $('meta[name="csrf-token"]').attr("content");
-
-  if (addVideo) {
-    quillFormats.push("video");
-  }
-
   if (addImage) {
-    // Attempt to allow images only if the image support is enabled at editor support.
-    // see: https://github.com/quilljs/quill/issues/1108
-    quillFormats.push("image");
-
     modules.imageResize = {
       modules: ["Resize", "DisplaySize"]
-    };
+    }
     modules.imageUpload = {
       url: $(container).data("uploadImagesPath"),
       method: "POST",
@@ -87,23 +60,18 @@ export default function createQuillEditor(container) {
       withCredentials: false,
       headers: { "X-CSRF-Token": token },
       callbackOK: (serverResponse, next) => {
-        $("div.ql-toolbar").last().removeClass("editor-loading");
+        $("div.ql-toolbar").last().removeClass("editor-loading")
         next(serverResponse.url);
       },
       callbackKO: (serverError) => {
-        $("div.ql-toolbar").last().removeClass("editor-loading");
+        $("div.ql-toolbar").last().removeClass("editor-loading")
         console.log(`Image upload error: ${serverError.message}`);
       },
       checkBeforeSend: (file, next) => {
-        $("div.ql-toolbar").last().addClass("editor-loading");
+        $("div.ql-toolbar").last().addClass("editor-loading")
         next(file);
       }
-    };
-
-    const text = $(container).data("dragAndDropHelpText");
-    $(container).after(
-      `<p class="help-text" style="margin-top:-1.5rem;">${text}</p>`
-    );
+    }
   }
   const quill = new Quill(container, {
     modules: modules,
@@ -111,11 +79,6 @@ export default function createQuillEditor(container) {
     theme: "snow"
   });
 
-  if (addImage === false) {
-    // Firefox natively implements image drop in contenteditable which is why we need to disable that
-    quill.root.addEventListener("drop", (ev) => ev.preventDefault());
-  }
-
   if (disabled) {
     quill.disable();
   }
@@ -130,22 +93,22 @@ export default function createQuillEditor(container) {
     });
     container.dispatchEvent(event);
 
-    if (
-      (text === "\n" || text === "\n\n") &&
-      quill.root.querySelectorAll(allowedEmptyContentSelector).length === 0
-    ) {
+    if (text === "\n" || text === "\n\n") {
       $input.val("");
     } else {
-      const emptyParagraph = "<p><br></p>";
-      const cleanHTML = quill.root.innerHTML.replace(
-        new RegExp(`^${emptyParagraph}|${emptyParagraph}$`, "g"),
-        ""
-      );
-      $input.val(cleanHTML);
+      $input.val(quill.root.innerHTML);
     }
   });
   // After editor is ready, linebreak_module deletes two extraneous new lines
   quill.emitter.emit("editor-ready");
 
+  if (addImage) {
+    const text = $(container).data("dragAndDropHelpText");
+    $(container).after(`<p class="help-text" style="margin-top:-1.5rem;">${text}</p>`);
+  }
+
+  // After editor is ready, linebreak_module deletes two extraneous new lines
+  quill.emitter.emit("editor-ready");
+
   return quill;
 }

data/app/packs/src/decidim/external_domain_warning.js

@@ -9,7 +9,7 @@ export default function updateExternalDomainLinks($target) {
 
   $("a", $target).filter((_i, link) => {
     const $link = $(link);
-    if (!$link[0].hasAttribute("href") || $link.parents(".ql-editor").length > 0) {
+    if (!$link[0].hasAttribute("href") || $link.parents(".editor-container").length > 0) {
       return false;
     }
 

data/app/packs/src/decidim/external_link.js

@@ -42,13 +42,24 @@ export default class ExternalLink {
       return;
     }
 
-    this.$link.addClass("external-link-container");
+    let $target = this.$link;
+    if (this.$link[0].hasAttribute("data-external-link-target")) {
+      $target = $(this.$link.data("external-link-target"), this.$link);
+      if ($target.length < 1) {
+        $target = this.$link;
+      }
+    }
+
+    $target.addClass("external-link-container");
     let spacer = "&nbsp;";
-    if (this.$link.text().trim().length < 1) {
+    if (this.$link[0].hasAttribute("data-external-link-spacer")) {
+      spacer = this.$link.data("external-link-spacer");
+    } else if ($target.text().trim().length < 1) {
       // Fixes image links extra space
       spacer = "";
     }
-    this.$link.append(`${spacer}${this.generateElement()}`);
+
+    $target.append(`${spacer}${this.generateElement()}`);
   }
 
   generateElement() {