decidim-core 0.24.3 → 0.25.0.rc1

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

@@ -0,0 +1,110 @@
+/* eslint-disable require-jsdoc */
+
+const History = Quill.import("modules/history");
+History.DEFAULTS = {
+  delay: 1000,
+  maxStack: 100,
+  userOnly: true
+};
+
+/**
+ * Linebreak module brokes quill's default history class.
+ * So here we are moving innerHTML to undo and redo stack
+ * instead of deltas.
+ */
+export default class HistoryOverride extends History {
+  constructor(quill, options) {
+    super(quill, options);
+    this.lastRecorded = 0;
+    this.ignoreChange = false;
+    this.init = false;
+    this.quill.emitter.on("editor-ready", () => {
+      this.clear();
+      const $input = $(this.quill.container).siblings('input[type="hidden"]');
+      this.stack.undo.push({content: $input.val() || "", index: this.quill.getLength() - 2 });
+      this.lastLength = this.quill.getLength();
+    })
+    /* eslint-disable max-params */
+    this.quill.on(Quill.events.EDITOR_CHANGE, (eventName, delta, oldDelta, source) => {
+      if (!delta) {
+        return;
+      }
+      if (!this.init && eventName === "selection-change") {
+        this.stack.undo[0].index = delta.index;
+      }
+      if (eventName !== Quill.events.TEXT_CHANGE || this.ignoreChange) {
+        return;
+      }
+
+      if (!this.options.userOnly || source === Quill.sources.USER) {
+        this.record(delta, oldDelta);
+      }
+    });
+    this.quill.keyboard.addBinding({ key: "Z", shortKey: true }, this.undo.bind(this));
+    this.quill.keyboard.addBinding({ key: "Z", shortKey: true, shiftKey: true }, this.redo.bind(this));
+    if ((/Win/i).test(navigator.platform)) {
+      this.quill.keyboard.addBinding({ key: "Y", shortKey: true }, this.redo.bind(this));
+    }
+  }
+  /* eslint-enable max-params */
+
+  change(source, dest) {
+    if (this.stack[source].length === 0) {
+      return;
+    }
+    let obj = this.updateStacks(source, dest);
+    if (!obj.content) {
+      return;
+    }
+    if (!obj.index) {
+      obj.index = 0
+    }
+    this.lastRecorded = 0;
+    this.ignoreChange = true;
+    this.quill.setContents(this.quill.clipboard.convert(obj.content));
+    this.ignoreChange = false;
+    let index = obj.index;
+    this.quill.setSelection(index);
+  }
+
+  updateStacks(source, dest) {
+    if (source === "undo") {
+      if (this.stack.undo.length === 1) {
+        return this.stack.undo[0]
+      }
+      this.stack[dest].push(this.stack.undo.pop())
+      return this.stack.undo[this.stack.undo.length - 1]
+    }
+    let content = this.stack.redo.pop();
+    this.stack.undo.push(content)
+    return content
+  }
+
+  record(changeDelta) {
+    if (changeDelta.ops.length === 0) {
+      return
+    } else if (!this.init) {
+      this.init = true;
+    }
+    this.stack.redo = [];
+    let timestamp = Date.now();
+    // Should not return after length check, because after linebreak a keypress replaces invisible characters with
+    // visible characters.
+    // For example: <br><br></p> -> [press X] -> <br>X</p>.
+    if (Math.abs(this.lastLength === this.quill.getLength()) || this.lastRecorded + this.options.delay > timestamp) {
+      if (this.stack.undo.length > 1) {
+        this.stack.undo.pop();
+      }
+    } else {
+      this.lastLength = this.quill.getLength();
+      if (this.lastRecorded + this.options.delay <= timestamp) {
+        this.lastRecorded = timestamp;
+      }
+    }
+    this.stack.undo.push({content: this.quill.container.firstChild.innerHTML, index: this.quill.getSelection()})
+  }
+
+  transform() {
+    return;
+  }
+}

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

@@ -0,0 +1,183 @@
+/* eslint-disable require-jsdoc */
+
+import addEnterBindings from "src/decidim/editor/modified_enter"
+import backspaceBindingsRangeAny from "src/decidim/editor/modified_backspace_offset_any"
+import backspaceBindings from "src/decidim/editor/modified_backspace_offset1"
+import HistoryOverride from "src/decidim/editor/history_override"
+
+// Disable warning messages from overwritting modules
+Quill.debug("error");
+
+// It all started with these snippets of code: https://github.com/quilljs/quill/issues/252
+const Delta = Quill.import("delta");
+const Break = Quill.import("blots/break");
+const Embed = Quill.import("blots/embed");
+const Scroll = Quill.import("blots/scroll");
+const Parchment = Quill.import("parchment");
+Quill.register({"modules/history": HistoryOverride}, true);
+let icons = Quill.import("ui/icons");
+icons.linebreak = "⏎";
+
+class SmartBreak extends Break {
+  length() {
+    return 1;
+  }
+
+  value() {
+    return "\n";
+  }
+
+  insertInto(parent, ref) {
+    // Embed.prototype.insertInto.call(this, parent, ref);
+    Reflect.apply(Embed.prototype.insertInto, this, [parent, ref]);
+  }
+}
+Quill.register(SmartBreak);
+
+// Override quill/blots/scroll.js
+class ScrollOvderride extends Scroll {
+  optimize(mutations = [], context = {}) {
+    if (this.batch === true) {
+      return;
+    }
+
+    this.parchmentOptimize(mutations, context);
+
+    if (mutations.length > 0) {
+      // quill/core/emitter.js, Emitter.events.SCROLL_OPTIMIZE = "scroll-optimize"
+      this.emitter.emit("scroll-optimize", mutations, context);
+    }
+  }
+
+  // Override parchment/src/blot/scroll.ts
+  parchmentOptimize(mutations = [], context = {}) {
+    // super.optimize(context);
+    Reflect.apply(Parchment.Container.prototype.optimize, this, [context]);
+
+    // We must modify mutations directly, cannot make copy and then modify
+    // let records = [].slice.call(this.observer.takeRecords());
+    let records = [...this.observer.takeRecords()];
+    // Array.push currently seems to be implemented by a non-tail recursive function
+    // so we cannot just mutations.push.apply(mutations, this.observer.takeRecords());
+    while (records.length > 0) {
+      mutations.push(records.pop());
+    }
+    let mark = (blot, markParent) => {
+      if (!blot || blot === this) {
+        return;
+      }
+      if (!blot.domNode.parentNode) {
+        return;
+      }
+      if (blot.domNode.__blot && blot.domNode.__blot.mutations === null) {
+        blot.domNode.__blot.mutations = [];
+      }
+      if (markParent) {
+        mark(blot.parent);
+      }
+    };
+    let optimize = (blot) => {
+      // Post-order traversal
+      if (!blot.domNode.__blot) {
+        return;
+      }
+
+      if (blot instanceof Parchment.Container) {
+        blot.children.forEach(optimize);
+      }
+      blot.optimize(context);
+    };
+    let remaining = mutations;
+    for (let ind = 0; remaining.length > 0; ind += 1) {
+      // MAX_OPTIMIZE_ITERATIONS = 100
+      if (ind >= 100) {
+        throw new Error("[Parchment] Maximum optimize iterations reached");
+      }
+      remaining.forEach((mutation) => {
+        let blot = Parchment.find(mutation.target, true);
+        if (!blot) {
+          return;
+        }
+        if (blot.domNode === mutation.target) {
+          if (mutation.type === "childList") {
+            mark(Parchment.find(mutation.previousSibling, false));
+
+            mutation.addedNodes.forEach((node) => {
+              let child = Parchment.find(node, false);
+              mark(child, false);
+              if (child instanceof Parchment.Container) {
+                child.children.forEach(function(grandChild) {
+                  mark(grandChild, false);
+                });
+              }
+            });
+          } else if (mutation.type === "attributes") {
+            mark(blot.prev);
+          }
+        }
+        mark(blot);
+      });
+      this.children.forEach(optimize);
+      remaining = [...this.observer.takeRecords()];
+      records = remaining.slice();
+      while (records.length > 0) {
+        mutations.push(records.pop());
+      }
+    }
+  }
+};
+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];
+  let nextLeaf = quill.getLeaf(range.index + 1)[0];
+  const previousChar = quill.getText(range.index - 1, 1);
+
+  // Insert a second break if:
+  // At the end of the editor, OR next leaf has a different parent (<p>)
+  if (nextLeaf === null || (currentLeaf.parent !== nextLeaf.parent)) {
+    quill.insertEmbed(range.index, "break", true, "user");
+    quill.insertEmbed(range.index, "break", true, "user");
+  } else if (previousChar === "\n") {
+    const delta = new Delta().retain(range.index).insert("\n");
+    quill.updateContents(delta, Quill.sources.USER);
+  } else {
+    quill.insertEmbed(range.index, "break", true, "user");
+  }
+
+  // Now that we've inserted a line break, move the cursor forward
+  quill.setSelection(range.index + 1, Quill.sources.SILENT);
+}
+
+Quill.register("modules/linebreak", (quill) => {
+  quill.getModule("toolbar").addHandler("linebreak", () => {
+    lineBreakButtonHandler(quill);
+  });
+
+  quill.emitter.on("editor-ready", () => {
+    const length = quill.getLength();
+    const text = quill.getText(length - 2, 2);
+
+    // Remove extraneous new lines
+    if (text === "\n\n") {
+      quill.deleteText(quill.getLength() - 2, 2);
+    }
+  });
+
+  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);
+
+  return;
+});
+

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

@@ -0,0 +1,96 @@
+/* eslint-disable require-jsdoc */
+
+import attributeDiff from "src/decidim/editor/attribute_diff"
+
+const Delta = Quill.import("delta");
+
+const previousChar = (quill, range) => {
+  return quill.getText(range.index - 1, 1);
+}
+
+const beforePreviousChar = (quill, range) => {
+  return quill.getText(range.index - 2, 1);
+}
+
+const nextChar = (quill, range) => {
+  return quill.getText(range.index, 1);
+}
+
+const handleListSelection = (quill, range) => {
+  const lastCharacterOfPreviousLine = quill.getText(range.index - 3, 1);
+  if (nextChar(quill, range) === "\n" || lastCharacterOfPreviousLine !== "\n") {
+    quill.setSelection(range.index - 1, Quill.sources.SILENT);
+  } else {
+    quill.setSelection(range.index - 3, Quill.sources.SILENT);
+  }
+}
+
+const moveSelectionToPreviousLine = (quill, range) => {
+  const lastCharacterOfPreviousLine = quill.getText(range.index - 3, 1);
+  if (nextChar(quill, range) === "\n" || lastCharacterOfPreviousLine !== "\n") {
+    quill.setSelection(range.index - 1, Quill.sources.SILENT);
+  } else {
+    quill.setSelection(range.index - 3, Quill.sources.SILENT);
+  }
+}
+
+export default function backspaceBindings(quill) {
+  quill.keyboard.addBinding({ key: 8, offset: 1, collapsed: true }, (range, context) => {
+    let length = 1
+    if ((/[\uD800-\uDBFF][\uDC00-\uDFFF]$/).test(context.prefix)) {
+      length = 2;
+    }
+
+    if (range.index === 0 || quill.getLength() <= 1) {
+      return;
+    }
+    let formats = {};
+    const [line] = quill.getLine(range.index);
+    let delta = new Delta().retain(range.index - length).delete(length);
+    if (context.offset === 1 && previousChar(quill, range) === "\n") {
+      const [prev] = quill.getLine(range.index - 2);
+      if (prev && prev.statics.blotName === "list-item") {
+        formats = handleListSelection(quill, range);
+        if (prev !== null && prev.length() > 1) {
+          let curFormats = line.formats();
+          let prevFormats = quill.getFormat(range.index - 2, 1);
+          formats = attributeDiff(curFormats, prevFormats) || {};
+          length += 1;
+        }
+        delta = new Delta().retain(range.index - 2).delete(2);
+        moveSelectionToPreviousLine(quill, range);
+      } else {
+        delta = new Delta().retain(range.index - 1).delete(1);
+        if (range.index < 2) {
+          delta = new Delta().delete(1).retain(range.index + line.length() - 1);
+        } else if (previousChar(quill, range) === "\n" && beforePreviousChar(quill, range) === "\n") {
+          delta = new Delta().retain(range.index - 2).delete(2);
+        }
+      }
+    } else {
+      const [prev] = quill.getLine(range.index - 1);
+      if (prev) {
+        const isPrevLineEmpty =
+          prev.statics.blotName === "block" && prev.length() <= 1;
+        if (!isPrevLineEmpty) {
+          const curFormats = line.formats();
+          const prevFormats = quill.getFormat(range.index - 1, 1);
+          formats = attributeDiff(curFormats, prevFormats) || {};
+          if (Object.keys(formats).length > 0) {
+            // line.length() - 1 targets \n in line, another -1 for newline being deleted
+            const formatDelta = new Delta().retain(range.index + line.length() - 2).retain(1, formats);
+            delta = delta.compose(formatDelta);
+          }
+        }
+      }
+    }
+    quill.updateContents(delta, Quill.sources.USER);
+    if (Object.keys(formats).length > 0) {
+      quill.formatLine(range.index - length, length, formats, Quill.sources.USER);
+    }
+    quill.focus();
+  });
+
+  // Put this backspace binding to second
+  quill.keyboard.bindings[8].splice(1, 0, quill.keyboard.bindings[8].pop());
+}

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

@@ -0,0 +1,46 @@
+/* eslint-disable require-jsdoc */
+
+import attributeDiff from "src/decidim/editor/attribute_diff"
+
+export default function backspaceBindingsRangeAny(quill) {
+  quill.keyboard.addBinding({ key: 8, altKey: null, ctrlKey: null, metaKey: null, shiftKey: null, collapsed: true }, (range, context) => {
+    let length = 1;
+    if (range.index === 0 || quill.getLength() <= 1) {
+      return;
+    }
+    let [line] = quill.getLine(range.index);
+    let formats = {};
+    if (context.offset === 0) {
+      let [prev] = quill.getLine(range.index - 1);
+      if (prev !== null && prev.length() > 1) {
+        let curFormats = line.formats();
+        let prevFormats = quill.getFormat(range.index - 1, 1);
+        formats = attributeDiff(curFormats, prevFormats) || {};
+        const previousLineLength = quill.getLine(range.index - 1)[1];
+        const previousChar = quill.getText(range.index - 1, 1)
+        const beforePreviousChar = quill.getText(range.index - 2, 1);
+        if (previousLineLength && previousLineLength === 1 && beforePreviousChar === "\n") {
+          if (prevFormats && prevFormats.list) {
+            quill.setSelection(range.index - 2, Quill.sources.SILENT);
+          } else if (previousChar === "\n" && beforePreviousChar === "\n") {
+            length += 1;
+          }
+        }
+      }
+    }
+
+    if ((/[\uD800-\uDBFF][\uDC00-\uDFFF]$/).test(context.prefix)) {
+      length += 1;
+    }
+    quill.deleteText(range.index - length, length, Quill.sources.USER);
+
+    if (Object.keys(formats).length > 0) {
+      quill.formatLine(range.index - length, length, formats, Quill.sources.USER);
+    }
+    quill.focus();
+  })
+
+  // Put this backspace binding to second (after backspce_offset1 it's going to be third)
+  quill.keyboard.bindings[8].splice(1, 0, quill.keyboard.bindings[8].pop());
+}
+

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

@@ -0,0 +1,116 @@
+/* eslint-disable require-jsdoc */
+
+const Parchment = Quill.import("parchment")
+const Delta = Quill.import("delta");
+
+const getLineFormats = (context) => {
+  return Object.keys(context.format).reduce(
+    (formats, format) => {
+      // See Parchment registry.ts => (1 << 3) | ((1 << 2) - 1) = 8 | 3 = 11
+      const blockScope = 11;
+      if (
+        Parchment.query(format, blockScope) &&
+        !Array.isArray(context.format[format])
+      ) {
+        formats[format] = context.format[format];
+      }
+      return formats;
+    },
+    {},
+  );
+}
+
+const continueFormats = (quill, context, lineFormats) => {
+  Object.keys(context.format).forEach((name) => {
+    if (typeof lineFormats[name] !== "undefined" && lineFormats[name] !== null) {
+      return;
+    }
+    if (Array.isArray(context.format[name])) {
+      return;
+    }
+    if (name === "link") {
+      return;
+    }
+    quill.format(name, context.format[name], Quill.sources.USER);
+  });
+}
+
+const lineBreakHandler = (quill, range, context) => {
+  const currentLeaf = quill.getLeaf(range.index)[0];
+  const nextLeaf = quill.getLeaf(range.index + 1)[0];
+  const previousChar = quill.getText(range.index - 1, 1);
+  const formats = quill.getFormat(range.index);
+
+  if (currentLeaf?.next?.domNode?.tagName === "A" || nextLeaf?.parent?.domNode?.tagName === "A") {
+    quill.insertEmbed(range.index, "break", true, "user");
+    quill.removeFormat(range.index, 1, Quill.sources.SILENT)
+  } else {
+    quill.insertEmbed(range.index, "break", true, "user");
+  }
+
+  if (nextLeaf === null) {
+    quill.insertEmbed(range.index, "break", true, "user");
+  } else if (context.offset === 1 && previousChar === "\n") {
+    const delta = new Delta().retain(range.index).insert("\n");
+    quill.updateContents(delta, Quill.sources.USER);
+  }
+
+  Object.keys(formats).forEach((format) => {
+    quill.format(format, context.format[format], Quill.sources.USER);
+  });
+  quill.setSelection(range.index + 1, Quill.sources.SILENT);
+
+  const lineFormats = getLineFormats(context);
+  continueFormats(quill, context, lineFormats);
+};
+
+export default function addEnterBindings(quill) {
+  quill.keyboard.addBinding({
+    key: 13,
+    shiftKey: true
+  }, (range, context) => {
+    lineBreakHandler(quill, range, context);
+  });
+
+  // HAX: make our SHIFT+ENTER binding the second (first is added below) in order to override Quill defaults
+  quill.keyboard.bindings[13].unshift(quill.keyboard.bindings[13].pop());
+
+  quill.keyboard.addBinding({ key: 13, shiftKey: false }, (range, context) => {
+    const lineFormats = getLineFormats(context);
+    const previousChar = quill.getText(range.index - 1, 1);
+    const nextChar = quill.getText(range.index, 1);
+    const delta = new Delta().retain(range.index).insert("\n", lineFormats);
+    // const length = context.prefix.length;
+    if (previousChar === "" || previousChar === "\n") {
+      if (lineFormats.list && nextChar === "\n") {
+        if (quill.getLength() - range.index > 2) {
+          const endFormatDelta = new Delta().retain(range.index - 1).delete(1);
+          quill.updateContents(endFormatDelta, Quill.sources.USER);
+        } else {
+          // Delete empty list item and end the list
+          const endFormatDelta = new Delta().retain(range.index - 1).delete(1).retain(range.index).insert("\n");
+          quill.updateContents(endFormatDelta, Quill.sources.USER);
+          quill.setSelection(range.index + 1, Quill.sources.SILENT);
+        }
+      } else {
+        quill.updateContents(delta, Quill.sources.USER);
+        if (context.offset === 1 && previousChar === "\n") {
+          quill.setSelection(range.index + 1, Quill.sources.SILENT);
+        } else {
+          quill.setSelection(range.index + 2, Quill.sources.SILENT);
+        }
+      }
+    } else {
+      quill.updateContents(delta, Quill.sources.USER);
+      quill.setSelection(range.index + 1, Quill.sources.SILENT);
+    }
+    quill.focus();
+
+    continueFormats(quill, context, lineFormats);
+  });
+
+  // Replace the default enter handling because we have modified the break element
+  quill.keyboard.bindings[13].unshift(quill.keyboard.bindings[13].pop());
+  return;
+}
+