decidim-core 0.27.0 → 0.27.2

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

@@ -0,0 +1,143 @@
+/* eslint max-lines: ["error", 350] */
+
+/**
+ * Quill clipboard utilities
+ *
+ * Copyright (c) 2017, Slab
+ * Copyright (c) 2014, Jason Chen
+ * Copyright (c) 2013, salesforce.com
+ * BSD 3-Clause "New" or "Revised" License
+ *
+ * Extends the original version from https://github.com/quilljs/quill
+ * Relevant parts converted from TypeScript to JavaScript
+ */
+
+import CodeBlock from "quill/formats/code";
+import { matchNewline, matchBreak, deltaEndsWith, traverse } from "src/decidim/editor/clipboard_utilities";
+
+const Delta = Quill.import("delta");
+const Clipboard = Quill.import("modules/clipboard");
+
+/**
+ * Pasting bold text is broken in Quill as described at:
+ * https://github.com/quilljs/quill/issues/306
+ *
+ * The reason is that the `<strong>` nodes are not recognized as bold types.
+ * This override fixes the issue by introducing parts of the newer Quill code
+ * at GitHub and defining the `<strong>` tags as bold tags.
+ */
+export default class ClipboardOverride extends Clipboard {
+  constructor(quill, options) {
+    super(quill, options);
+    this.overrideMatcher("b", "b, strong");
+    this.overrideMatcher("br", "br", matchBreak);
+
+    // Change the matchNewLine matchers to the newer version
+    this.matchers[1][1] = matchNewline;
+    this.matchers[3][1] = matchNewline;
+
+    // Remove `matchSpacing` as that is also removed in the newer versions.
+    this.removeMatcher(Node.ELEMENT_NODE, "matchSpacing");
+  }
+
+  overrideMatcher(originalSelector, newSelector, newMatcher = null) {
+    const idx = this.matchers.findIndex((item) => item[0] === originalSelector);
+    if (idx >= 0) {
+      this.matchers[idx][0] = newSelector;
+      if (newMatcher) {
+        this.matchers[idx][1] = newMatcher;
+      }
+    }
+  }
+
+  removeMatcher(selector, matcherName) {
+    const idx = this.matchers.findIndex((item) => item[0] === selector && item[1].name === matcherName);
+    if (idx >= 0) {
+      this.matchers.splice(idx, 1);
+    }
+  }
+
+  onPaste(ev) {
+    if (ev.defaultPrevented || !this.quill.isEnabled()) {
+      return;
+    }
+    ev.preventDefault();
+    const range = this.quill.getSelection(true);
+    if (range === null) {
+      return;
+    }
+    const html = ev.clipboardData.getData("text/html");
+    const text = ev.clipboardData.getData("text/plain");
+    const files = Array.from(ev.clipboardData.files || []);
+    if (!html && files.length > 0) {
+      this.quill.uploader.upload(range, files);
+      return;
+    }
+    if (html && files.length > 0) {
+      const doc = new DOMParser().parseFromString(html, "text/html");
+      if (
+        doc.body.childElementCount === 1 &&
+        doc.body.firstElementChild.tagName === "IMG"
+      ) {
+        this.quill.uploader.upload(range, files);
+        return;
+      }
+    }
+    this.onPasteRange(range, { html, text });
+  }
+
+  onPasteRange(range, { text, html }) {
+    const formats = this.quill.getFormat(range.index);
+    const pastedDelta = this.convertPaste({ text, html }, formats);
+    // debug.log('onPaste", pastedDelta, { text, html });
+    const delta = new Delta().retain(range.index).delete(range.length).concat(pastedDelta);
+    this.quill.updateContents(delta, Quill.sources.USER);
+    // range.length contributes to delta.length()
+    this.quill.setSelection(
+      delta.length() - range.length,
+      Quill.sources.SILENT,
+    );
+    this.quill.scrollIntoView();
+  }
+
+  convertPaste({ html, text }, formats = {}) {
+    if (formats[CodeBlock.blotName]) {
+      return new Delta().insert(text, {
+        [CodeBlock.blotName]: formats[CodeBlock.blotName]
+      });
+    }
+    if (!html) {
+      return new Delta().insert(text || "");
+    }
+    const delta = this.convertPasteHTML(html);
+    // Remove trailing newline
+    if (
+      deltaEndsWith(delta, "\n") &&
+      (delta.ops[delta.ops.length - 1].attributes === null || formats.table)
+    ) {
+      return delta.compose(new Delta().retain(delta.length() - 1).delete(1));
+    }
+    return delta;
+  }
+
+  convertPasteHTML(html) {
+    const doc = new DOMParser().parseFromString(html, "text/html");
+    const container = doc.body;
+    const nodeMatches = new WeakMap();
+    const [elementMatchers, textMatchers] = this.prepareMatching(
+      container,
+      nodeMatches
+    );
+    return traverse(
+      this.quill.scroll,
+      container,
+      elementMatchers,
+      textMatchers,
+      nodeMatches
+    );
+  }
+}
+
+// Disable warning messages from overwritting modules
+Quill.debug("error");
+Quill.register({"modules/clipboard": ClipboardOverride}, true);

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

@@ -0,0 +1,119 @@
+import { BlockEmbed } from "quill/blots/block";
+
+const Delta = Quill.import("delta");
+const Parchment = Quill.import("parchment");
+
+// Newer version used only for the pasting, not compatible with the version of
+// Quill in use.
+const traverse = (scroll, node, elementMatchers, textMatchers, nodeMatches) => { // eslint-disable-line max-params
+  // Post-order
+  if (node.nodeType === node.TEXT_NODE) {
+    return textMatchers.reduce((delta, matcher) => {
+      return matcher(node, delta, scroll);
+    }, new Delta());
+  }
+  if (node.nodeType === node.ELEMENT_NODE) {
+    return Array.from(node.childNodes || []).reduce((delta, childNode) => {
+      let childrenDelta = traverse(
+        scroll,
+        childNode,
+        elementMatchers,
+        textMatchers,
+        nodeMatches,
+      );
+      if (childNode.nodeType === node.ELEMENT_NODE) {
+        childrenDelta = elementMatchers.reduce((reducedDelta, matcher) => {
+          return matcher(childNode, reducedDelta, scroll);
+        }, childrenDelta);
+        childrenDelta = (nodeMatches.get(childNode) || []).reduce(
+          (reducedDelta, matcher) => {
+            return matcher(childNode, reducedDelta, scroll);
+          },
+          childrenDelta,
+        );
+      }
+      return delta.concat(childrenDelta);
+    }, new Delta());
+  }
+  return new Delta();
+}
+
+const deltaEndsWith = (delta, text) => {
+  let endText = "";
+  for (let idx = delta.ops.length - 1; idx >= 0 && endText.length < text.length; idx -= 1) {
+    const op = delta.ops[idx];
+    if (typeof op.insert !== "string") {
+      break;
+    }
+    endText = op.insert + endText;
+  }
+  return endText.slice(-1 * text.length) === text;
+}
+
+const isLine = (node) => {
+  if (node.childNodes.length === 0) {
+    // Exclude embed blocks
+    return false;
+  }
+  return [
+    "address", "article", "blockquote", "canvas", "dd", "div", "dl", "dt",
+    "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3",
+    "h4", "h5", "h6", "header", "iframe", "li", "main", "nav", "ol", "output",
+    "p", "pre", "section", "table", "td", "tr", "ul", "video"
+  ].includes(node.tagName.toLowerCase());
+}
+
+const matchNewLineScroll = (nextSibling, delta, scroll) => {
+  if (!scroll) {
+    return null;
+  }
+
+  const match = Parchment.query(nextSibling)
+  if (match && match.prototype instanceof BlockEmbed) {
+    return delta.insert("\n");
+  }
+  return null;
+}
+
+const matchNewline = (node, delta, scroll) => {
+  if (!deltaEndsWith(delta, "\n")) {
+    // When scroll is defined, it was initiated from the paste event. Otherwise
+    // it is a normal Quill initiated traversal which handles adding the line
+    // breaks already.
+    if (scroll && node.nodeType === node.ELEMENT_NODE && node.tagName === "BR") {
+      return delta.insert({"break": ""});
+    }
+    if (isLine(node)) {
+      return delta.insert("\n");
+    }
+    if (delta.length() > 0 && node.nextSibling) {
+      let { nextSibling } = node;
+      while (nextSibling !== null) {
+        if (isLine(nextSibling)) {
+          return delta.insert("\n");
+        }
+        const scrollMatch = matchNewLineScroll(nextSibling, delta, scroll);
+        if (scrollMatch) {
+          return scrollMatch;
+        }
+        nextSibling = nextSibling.firstChild;
+      }
+    }
+  }
+  return delta;
+}
+
+const matchBreak = (node, delta) => {
+  if (!deltaEndsWith(delta, "\n")) {
+    delta.insert({"break": ""});
+  }
+  return delta;
+}
+
+export {
+  traverse,
+  deltaEndsWith,
+  isLine,
+  matchNewline,
+  matchBreak
+}

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

@@ -129,7 +129,6 @@ 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];
@@ -167,13 +166,6 @@ 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,6 +1,7 @@
 /* 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"
 
@@ -10,6 +11,7 @@ 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" }],
@@ -93,10 +95,15 @@ export default function createQuillEditor(container) {
     });
     container.dispatchEvent(event);
 
-    if (text === "\n" || text === "\n\n") {
+    if ((text === "\n" || text === "\n\n") && quill.root.querySelectorAll(allowedEmptyContentSelector).length === 0) {
       $input.val("");
     } else {
-      $input.val(quill.root.innerHTML);
+      const emptyParagraph = "<p><br></p>";
+      const cleanHTML = quill.root.innerHTML.replace(
+        new RegExp(`^${emptyParagraph}|${emptyParagraph}$`, "g"),
+        ""
+      );
+      $input.val(cleanHTML);
     }
   });
   // After editor is ready, linebreak_module deletes two extraneous new lines

data/app/packs/src/decidim/form_filter.component.test.js

@@ -1,4 +1,4 @@
-/* global spyOn */
+/* global spyOn, jest */
 /* eslint-disable id-length */
 window.$ = $;
 
@@ -7,6 +7,20 @@ import DataPicker from "./data_picker"
 
 const FormFilterComponent = require("./form_filter.component_for_testing.js");
 
+const expectedPushState = (state, filters) => {
+  const queryString = Object.keys(filters).map((key) => {
+    const name = `filter[${key}]`;
+    const val = filters[key];
+    if (Array.isArray(val)) {
+      return val.map((v) => `${encodeURIComponent(`${name}[]`)}=${encodeURIComponent(v)}`).join("&");
+    }
+
+    return `${encodeURIComponent(name)}=${encodeURIComponent(val)}`;
+  }).join("&");
+
+  return [state, null, `/filters?${queryString}`];
+}
+
 describe("FormFilterComponent", () => {
   const selector = "form#new_filter";
   let subject = null;
@@ -15,6 +29,10 @@ describe("FormFilterComponent", () => {
   beforeEach(() => {
     let form = `
       <form id="new_filter" action="/filters" method="get">
+        <fieldset>
+          <input id="filter_search_text_cont" placeholder="Search" data-disable-dynamic-change="true" type="search" name="filter[search_text_cont]">
+        </fieldset>
+
         <fieldset>
           <div id="filter_somerandomid_scope_id" class="data-picker picker-multiple" data-picker-name="filter[scope_id]">
             <div class="picker-values">
@@ -67,11 +85,25 @@ describe("FormFilterComponent", () => {
     `;
     $("body").append(form);
 
+    const $form = $(document).find("form");
+
     window.Decidim = window.Decidim || {};
 
     window.theDataPicker = new DataPicker($(".data-picker"));
     window.theCheckBoxesTree = new CheckBoxesTree();
-    subject = new FormFilterComponent($(document).find("form"));
+    window.Rails = {
+      fire: (htmlElement, event) => {
+        // Hack to call trigger on the correct instance of the form, as fetching
+        // with the selector does not work.
+        if (htmlElement === $form[0]) {
+          $form.trigger(event);
+        }
+      }
+    };
+
+    subject = new FormFilterComponent($form);
+
+    jest.useFakeTimers();
   });
 
   it("exists", () => {
@@ -88,7 +120,19 @@ describe("FormFilterComponent", () => {
 
   describe("when mounted", () => {
     beforeEach(() => {
-      spyOn(subject.$form, "on");
+      // Jest doesn't implement listening on the form submit event so we need
+      // to hack it.
+      const originalOn = subject.$form.on.bind(subject.$form);
+      jest.spyOn(subject.$form, "on").mockImplementation((...args) => {
+        if (args[0] === "submit") {
+          subject.$form.submitHandler = args[1];
+        } else if (args[0] === "change" && typeof args[1] === "string") {
+          subject.$form.changeHandler = args[2];
+        } else {
+          originalOn(...args);
+        }
+      });
+
       subject.mountComponent();
     });
 
@@ -100,8 +144,98 @@ describe("FormFilterComponent", () => {
       expect(subject.mounted).toBeTruthy();
     });
 
-    it("binds the form change event", () => {
+    it("binds the form change and submit events", () => {
       expect(subject.$form.on).toHaveBeenCalledWith("change", "input:not([data-disable-dynamic-change]), select:not([data-disable-dynamic-change])", subject._onFormChange);
+      expect(subject.$form.on).toHaveBeenCalledWith("submit", subject._onFormSubmit);
+    });
+
+    describe("form changes", () => {
+      beforeEach(() => {
+        spyOn(window.history, "pushState");
+
+        // This is a hack to be able to trigger the events even somewhat close
+        // to an actual situation. In real browser environment the change events
+        // would be triggered by the input/select elements but to simplify the
+        // test implementation, we trigger them directly on the form.
+        const originalTrigger = subject.$form.trigger.bind(subject.$form);
+        jest.spyOn(subject.$form, "trigger").mockImplementation((...args) => {
+          if (args[0] === "submit") {
+            subject.$form.submitHandler(
+              $.event.fix(new CustomEvent("submit", { bubbles: true, cancelable: true }))
+            );
+          } else if (args[0] === "change") {
+            subject.$form.changeHandler();
+          } else {
+            originalTrigger(...args);
+          }
+
+          jest.runAllTimers();
+        });
+      });
+
+      it("does not save the state in case there were no changes to previous state", () => {
+        subject.$form.trigger("change");
+
+        expect(window.history.pushState).not.toHaveBeenCalled();
+      });
+
+      it("saves the state after dynamic form changes", () => {
+        $("#filter_somerandomid_category_id").val(2);
+
+        subject.$form.trigger("change");
+
+        const state = {
+          "filter_somerandomid_scope_id": [
+            {
+              "text": "Scope 1",
+              "url": "picker_url_1",
+              "value": "3"
+            },
+            {
+              "text": "Scope 2",
+              "url": "picker_url_2",
+              "value": "4"
+            }
+          ]
+        };
+        const filters = {
+          "search_text_cont": "",
+          "scope_id": [3, 4],
+          "category_id": 2,
+          "state": [""]
+        };
+        expect(window.history.pushState).toHaveBeenCalledWith(...expectedPushState(state, filters));
+      });
+
+      it("saves the state after form submission through input element", () => {
+        const textInput = document.getElementById("filter_search_text_cont");
+        textInput.value = "search";
+
+        subject.$form.trigger("submit");
+
+        const state = {
+          "filter_somerandomid_scope_id": [
+            {
+              "text": "Scope 1",
+              "url": "picker_url_1",
+              "value": "3"
+            },
+            {
+              "text": "Scope 2",
+              "url": "picker_url_2",
+              "value": "4"
+            }
+          ]
+        }
+        const filters = {
+          "search_text_cont": "search",
+          "scope_id": [3, 4],
+          "category_id": 1,
+          "state": [""]
+        }
+
+        expect(window.history.pushState).toHaveBeenCalledWith(...expectedPushState(state, filters));
+      });
     });
 
     describe("onpopstate event", () => {
@@ -131,6 +265,14 @@ describe("FormFilterComponent", () => {
         expect(checked.map((input) => input.value)).toEqual(["", "accepted", "evaluating"]);
         expect(checked.filter((input) => input.indeterminate).map((input) => input.value)).toEqual([""]);
       });
+
+      it("does not save the state", () => {
+        spyOn(window.history, "pushState");
+
+        window.onpopstate({ isTrusted: true, state: scopesPickerState});
+
+        expect(window.history.pushState).not.toHaveBeenCalled();
+      });
     });
   });
 
@@ -145,8 +287,9 @@ describe("FormFilterComponent", () => {
       expect(subject.mounted).toBeFalsy();
     });
 
-    it("unbinds the form change event", () => {
+    it("unbinds the form change and submit events", () => {
       expect(subject.$form.off).toHaveBeenCalledWith("change", "input, select", subject._onFormChange);
+      expect(subject.$form.off).toHaveBeenCalledWith("submit", subject._onFormSubmit);
     });
   });
 

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

@@ -23,6 +23,7 @@ export default class FormFilterComponent {
 
     this._updateInitialState();
     this._onFormChange = delayed(this, this._onFormChange.bind(this));
+    this._onFormSubmit = delayed(this, this._onFormSubmit.bind(this));
     this._onPopState = this._onPopState.bind(this);
 
     if (window.Decidim.PopStateHandler) {
@@ -42,6 +43,7 @@ export default class FormFilterComponent {
     if (this.mounted) {
       this.mounted = false;
       this.$form.off("change", "input, select", this._onFormChange);
+      this.$form.off("submit", this._onFormSubmit);
 
       unregisterCallback(`filters-${this.id}`)
     }
@@ -62,6 +64,7 @@ export default class FormFilterComponent {
         contentContainer = this.$form.data("remoteFill");
       }
       this.$form.on("change", "input:not([data-disable-dynamic-change]), select:not([data-disable-dynamic-change])", this._onFormChange);
+      this.$form.on("submit", this._onFormSubmit);
 
       this.currentFormRequest = null;
       this.$form.on("ajax:beforeSend", (e) => {
@@ -254,14 +257,16 @@ export default class FormFilterComponent {
 
     // Only one instance should submit the form on browser history navigation
     if (this.popStateSubmiter) {
-      Rails.fire(this.$form[0], "submit");
+      Rails.fire(this.$form[0], "submit", { from: "pop" });
     }
 
     this.changeEvents = true;
   }
 
   /**
-   * Handles the logic to update the current location after a form change event.
+   * Handles the logic to decide whether the form should be submitted or not
+   * after a form change event. The form is only submitted when changes have
+   * occurred.
    * @private
    * @returns {Void} - Returns nothing.
    */
@@ -270,7 +275,7 @@ export default class FormFilterComponent {
       return;
     }
 
-    const [newPath, newState] = this._currentStateAndPath();
+    const [newPath] = this._currentStateAndPath();
     const path = this._getLocation(false);
 
     if (newPath === path) {
@@ -278,6 +283,23 @@ export default class FormFilterComponent {
     }
 
     Rails.fire(this.$form[0], "submit");
+  }
+
+  /**
+   * Saves the current state of the search on form submit to update the search
+   * parameters to the URL and store the picker states.
+   * @private
+   * @param {jQuery.Event} ev The event that caused the form to submit.
+   * @returns {Void} - Returns nothing.
+   */
+  _onFormSubmit(ev) {
+    const eventDetail = ev.originalEvent.detail;
+    if (eventDetail && eventDetail.from === "pop") {
+      return;
+    }
+
+    const [newPath, newState] = this._currentStateAndPath();
+
     pushState(newPath, newState);
     this._saveFilters(newPath);
   }
@@ -314,7 +336,7 @@ export default class FormFilterComponent {
    * @returns {String} - Returns a unique identifier
    */
   _getUID() {
-    return `filter-form-${new Date().setUTCMilliseconds()}-${Math.floor(Math.random() * 10000000)}`;
+    return `filter-form-${new Date().getUTCMilliseconds()}-${Math.floor(Math.random() * 10000000)}`;
   }
 
   /**