decidim-core 0.27.9 → 0.28.0.rc4

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

@@ -0,0 +1,215 @@
+import { mergeAttributes } from "@tiptap/core";
+import Image from "@tiptap/extension-image";
+import { Plugin } from "prosemirror-state";
+
+import { getDictionary } from "src/decidim/i18n";
+import { fileNameToTitle } from "src/decidim/editor/utilities/file";
+import createNodeView from "src/decidim/editor/extensions/image/node_view";
+
+import UploadDialog from "src/decidim/editor/common/upload_dialog";
+
+const createImageUploadDialog = (editor, { uploadDialogSelector }) => {
+  const i18nUpload = getDictionary("editor.upload");
+  return new UploadDialog(
+    document.querySelector(uploadDialogSelector),
+    {
+      i18n: i18nUpload,
+      onOpen: () => editor.commands.toggleDialog(true),
+      onClose: () => editor.chain().toggleDialog(false).focus(null, { scrollIntoView: false }).run()
+    }
+  );
+}
+
+const uploadImage = async (image, uploadUrl) => {
+  const token = document.querySelector("meta[name='csrf-token']").getAttribute("content");
+
+  const data = new FormData();
+  data.append("image", image);
+
+  const i18n = getDictionary("editor.extensions.image");
+
+  return new Promise((resolve, reject) => {
+    fetch(uploadUrl, {
+      method: "POST",
+      mode: "cors",
+      cache: "no-cache",
+      headers: { "X-CSRF-Token": token },
+      body: data
+    }).then((response) => {
+      if (response.ok) {
+        return response.json();
+      }
+      return new Promise((responseResolve) => responseResolve({ message: i18n.uploadError }));
+    }).then(
+      (json) => resolve({ title: fileNameToTitle(image.name), ...json })
+    ).catch(reject);
+  });
+}
+
+const filterImages = (files, contentTypes) => {
+  return Array.from(files).filter(
+    (file) => {
+      if (contentTypes instanceof RegExp) {
+        return contentTypes.test(file.type)
+      } else if (contentTypes instanceof Array) {
+        return contentTypes.includes(file.type);
+      }
+      // string
+      return contentTypes === file.type;
+    }
+  );
+}
+
+/**
+ * Handles the image uploads through ActiveStorage when they are dropped or
+ * pasted to the editor.
+ *
+ * Paste and drop handling based on:
+ * https://gist.github.com/slava-vishnyakov/16076dff1a77ddaca93c4bccd4ec4521
+ */
+export default Image.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      contentTypes: /^image\/(jpe?g|png|svg|webp)$/i,
+      uploadImagesPath: null,
+      uploadDialogSelector: null
+    };
+  },
+
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      width: { default: null }
+    };
+  },
+
+  addCommands() {
+    const i18n = getDictionary("editor.extensions.image");
+    const uploadDialog = createImageUploadDialog(this.editor, this.options);
+
+    return {
+      ...this.parent?.(),
+      imageDialog: () => async ({ dispatch }) => {
+        if (dispatch) {
+          let { src, alt, width } = 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)
+          });
+          this.editor.commands.toggleDialog(false);
+
+          if (dialogState !== "save") {
+            this.editor.commands.focus(null, { scrollIntoView: false });
+            return false;
+          }
+
+          if (uploadDialog.getValue("src") !== src) {
+            // Reset the width to original width in case the image changed.
+            width = null;
+          }
+
+          src = uploadDialog.getValue("src");
+          alt = uploadDialog.getValue("alt");
+
+          return this.editor.chain().setImage({ src, alt, width }).focus(null, { scrollIntoView: false }).run();
+        }
+
+        return true;
+      }
+    }
+  },
+
+  addNodeView() {
+    return createNodeView(this);
+  },
+
+  parseHTML() {
+    return [{ tag: "div[data-image] img[src]:not([src^='data:'])" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      { "class": "editor-content-image", "data-image": "" },
+      [
+        "img",
+        mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)
+      ]
+    ];
+  },
+
+  addProseMirrorPlugins() {
+    const editor = this.editor;
+    const { uploadImagesPath, contentTypes } = this.options;
+
+    const handleUploadedImages = (uploadedImages) => {
+      uploadedImages.forEach((imageData) => {
+        if (!imageData.url) {
+          return;
+        }
+
+        editor.commands.setImage({ src: imageData.url, alt: imageData.title });
+      });
+    }
+
+    return [
+      new Plugin({
+        props: {
+          handlePaste(view, event) {
+            const items = (event.clipboardData || event.originalEvent.clipboardData).items;
+            const images = filterImages(items, contentTypes);
+            if (images.length < 1) {
+              return false;
+            }
+
+            Promise.all(images.map((item) => uploadImage(item.getAsFile(), uploadImagesPath))).then((uploadedImages) => {
+              handleUploadedImages(uploadedImages);
+            });
+
+            return true;
+          },
+
+          handleDoubleClick() {
+            if (!editor.isActive("image")) {
+              return false;
+            }
+
+            editor.chain().focus().imageDialog().run();
+            return true;
+          },
+
+          handleDOMEvents: {
+            drop(view, event) {
+              const position = view.posAtCoords({left: event.clientX, top: event.clientY});
+
+              const files = event?.dataTransfer?.files;
+              if (!files || files.length < 1) {
+                return;
+              }
+
+              const images = filterImages(files, contentTypes);
+              if (images.length < 1) {
+                return;
+              }
+
+              event.preventDefault();
+
+              // Make sure the image is dropped at the right place. Otherwise
+              // the image would appear at the current text selection position
+              // and always in the beginning of the content in case the editor
+              // did not have focus when the image was dropped.
+              editor.chain().focus().setTextSelection(position.pos).run();
+
+              Promise.all(images.map((image) => uploadImage(image, uploadImagesPath))).then((uploadedImages) => {
+                handleUploadedImages(uploadedImages);
+              });
+            }
+          }
+        }
+      })
+    ];
+  }
+});

data/app/packs/src/decidim/editor/extensions/image/node_view.js

@@ -0,0 +1,216 @@
+import { DOMSerializer } from "prosemirror-model";
+
+import { getDictionary } from "src/decidim/i18n";
+
+const createControl = (position, label) => {
+  const el = document.createElement("button");
+  el.type = "button";
+  el.ariaLabel = label;
+  el.dataset.imageResizerControl = position;
+  return el;
+};
+
+const createDimensionDisplay = () => {
+  const el = document.createElement("div");
+  el.dataset.imageResizerDimensions = "";
+
+  const width = document.createElement("span");
+  width.dataset.imageResizerDimension = "width";
+  width.dataset.imageResizerDimensionValue = "";
+
+  const height = document.createElement("span");
+  height.dataset.imageResizerDimension = "height";
+  height.dataset.imageResizerDimensionValue = "";
+
+  el.append(width);
+  el.append("×");
+  el.append(height);
+
+  return { wrapper: el, width, height };
+};
+
+/**
+ * Wraps the editor element around the resizable element and implements the
+ * resizer functionality.
+ *
+ * @param {Object} self The node extension to create the view for
+ * @returns {Function} The custom node view callback to pass on to TipTap
+ */
+export default (self) => {
+  const i18nResize = getDictionary("editor.extensions.image.nodeView.resizer");
+  const createResizeControl = (position) => {
+    const label = i18nResize["control.resize"];
+    const positionLabel = i18nResize[`position.${position.replace(/-(\w)/, (da, ch) => ch.toUpperCase())}`];
+
+    return createControl(position, label.replace("%position%", positionLabel));
+  }
+
+  return ({ editor, node, getPos }) => {
+    const resizer = document.createElement("div");
+    resizer.dataset.imageResizerWrapper = "";
+    resizer.append(createResizeControl("top-left"));
+    resizer.append(createResizeControl("top-right"));
+    resizer.append(createResizeControl("bottom-left"));
+    resizer.append(createResizeControl("bottom-right"));
+
+    const dimensions = createDimensionDisplay();
+    resizer.append(dimensions.wrapper);
+
+    const contentDOM = DOMSerializer.fromSchema(node.type.schema).serializeNode(node);
+    resizer.append(contentDOM);
+
+    const img = contentDOM.querySelector("img");
+    let activeResizeControl = null,
+        currentHeight = null,
+        currentSrc = node.attrs.src,
+        currentWidth = null,
+        naturalHeight = img.naturalHeight,
+        naturalWidth = img.naturalWidth,
+        originalWidth = null,
+        resizeStartPosition = null;
+
+    // Used to reliably get the image width so that it is not reported as zero
+    // in case the original image element has not finished loading yet.
+    const tmpImg = document.createElement("img");
+    const { width: givenWidth } = node.attrs;
+    tmpImg.onload = () => {
+      naturalWidth = tmpImg.naturalWidth;
+      naturalHeight = tmpImg.naturalHeight;
+
+      // Set currentWidth and currentHeight
+      if (givenWidth === null) {
+        currentWidth = naturalWidth;
+        currentHeight = naturalHeight;
+      } else {
+        currentWidth = givenWidth;
+        currentHeight = Math.round(naturalHeight * (currentWidth / naturalWidth));
+      }
+
+      // Force node update in order to set the initial dimensions
+      [{ ...node.attrs, width: 1 }, node.attrs].forEach((newAttrs) => {
+        // The `setTimeout` below is to push the node updates to the next JS
+        // event loop so that we are not triggering a change in the element
+        // before it is created as would happen e.g. during the Jest tests.
+        setTimeout(() => {
+          editor.view.dispatch(
+            editor.view.state.tr.setNodeMarkup(getPos(), self.type, newAttrs)
+          );
+        }, 0);
+      });
+    }
+    tmpImg.src = img.src;
+
+    const getEventPagePosition = (ev, device) => {
+      if (device === "touch") {
+        const originalEv = ev.originalEvent;
+        const touches = ev.touches || ev.changedTouches || originalEv.touches || originalEv.changedTouches;
+        if (!touches) {
+          return { xPos: null, yPos: null };
+        }
+        const touch = touches[0];
+        return { xPos: touch.pageX, yPos: touch.pageY };
+      }
+      return { xPos: ev.clientX, yPos: ev.clientY };
+    };
+    const handleMove = (ev, device) => {
+      let { xPos } = getEventPagePosition(ev, device);
+      let diff = resizeStartPosition - xPos;
+      if (activeResizeControl.match(/-left$/)) {
+        diff *= -1;
+      }
+
+      currentWidth = Math.round(originalWidth * (1 - diff / originalWidth));
+      if (currentWidth < 100) {
+        currentWidth = 100;
+      } else if (currentWidth >= naturalWidth) {
+        currentWidth = naturalWidth;
+      }
+      currentHeight = Math.round(naturalHeight * (currentWidth / naturalWidth));
+
+
+      let width = currentWidth;
+      if (width >= naturalWidth) {
+        width = null;
+      }
+      editor.commands.updateAttributes("image", { width });
+    };
+    const handleMouseMove = (ev) => handleMove(ev, "mouse");
+    const handleTouchMove = (ev) => handleMove(ev, "touch");
+    const handleEnd = () => {
+      activeResizeControl = resizeStartPosition = null;
+
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("mouseup", handleEnd);
+      document.removeEventListener("touchend", handleEnd);
+    };
+    resizer.querySelectorAll("[data-image-resizer-control]").forEach((ctrl) => {
+      const handleStart = (ev, device) => {
+        // Only allow mouse events to start the resize on the primary button
+        // click.
+        if (device === "mouse" && ev.button !== 0) {
+          return;
+        }
+        if (!editor.isEditable || activeResizeControl) {
+          return;
+        }
+
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("touchmove", handleTouchMove);
+        document.addEventListener("mouseup", handleEnd);
+        document.addEventListener("touchend", handleEnd);
+
+        ev.preventDefault();
+        activeResizeControl = ctrl.dataset.imageResizerControl;
+        originalWidth = editor.getAttributes("image").width || naturalWidth;
+
+        resizeStartPosition = getEventPagePosition(ev, device).xPos;
+      };
+      const handleMouseStart = (ev) => handleStart(ev, "mouse");
+      const handleTouchStart = (ev) => handleStart(ev, "touch");
+
+      ctrl.addEventListener("mousedown", handleMouseStart);
+      ctrl.addEventListener("touchstart", handleTouchStart);
+    });
+
+    const dom = document.createElement("div");
+    dom.dataset.imageResizer = "";
+    dom.append(resizer);
+
+    return {
+      dom,
+      contentDOM,
+      update: (updatedNode) => {
+        if (updatedNode.type !== self.type) {
+          return false;
+        }
+
+        const { alt, src, title, width } = updatedNode.attrs;
+
+        // We set the value through an attribute change here because otherwise
+        // we would trigger a mutation in the DOM which causes the update method
+        // to be called recursively.
+        dimensions.width.dataset.imageResizerDimensionValue = currentWidth;
+        dimensions.height.dataset.imageResizerDimensionValue = currentHeight;
+
+        img.alt = alt;
+        if (currentSrc !== src) {
+          img.src = src;
+          currentSrc = src;
+        }
+        if (title) {
+          img.title = title;
+        } else {
+          img.removeAttribute("title");
+        }
+        if (width) {
+          img.width = width;
+        } else {
+          img.removeAttribute("width");
+        }
+
+        return true;
+      }
+    };
+  };
+};

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

@@ -0,0 +1,188 @@
+import { Extension } from "@tiptap/core";
+
+// The node types for which indentation is allowed
+const allowedNodeTypes = ["heading", "paragraph"];
+
+/**
+ * Helper method to check whether one of the allowed type nodes is currently
+ * active where the indentation can be performed on.
+ *
+ * @param {Object} editor The editor instance.
+ * @returns {Boolean} A boolean indicating if an allowed type node is active
+ */
+const allowedNodeActive = (editor) => allowedNodeTypes.some((type) => editor.isActive(type));
+
+/**
+ * Finds the closest allowed type node from the given position. Traversese the
+ * document depth upwards to search through all the node parents.
+ *
+ * @param {Object} position The position where to look for
+ * @returns {Node|null} The allowed node or null if no allowed node is found
+ */
+const closestAllowedNode = (position) => {
+  let depth = position.depth;
+  while (depth > 0) {
+    const node = position.node(depth);
+    if (allowedNodeTypes.some((type) => node.type.name === type)) {
+      return node;
+    }
+    depth -= 1;
+  }
+  return null;
+}
+
+/**
+ * Indent extension for the Tiptap editor.
+ *
+ * Originally based on the following MIT licensed code:
+ * https://github.com/ueberdosis/tiptap/issues/1036#issuecomment-1000983233
+ * https://github.com/evanfuture/tiptaptop-extension-indent
+ *
+ * License as specified at:
+ * https://github.com/evanfuture/tiptaptop-extension-indent
+ *
+ * The code has been simplified and modified to fit better the needs of Decidim.
+ *
+ * Authors/Credits: Jeet Mandaliya (@sereneinserenade),
+ *   Evan Payne (@evanfuture), @danline, YukiYama (@yuyuyukie)
+ */
+export default Extension.create({
+  name: "indent",
+
+  addOptions() {
+    return {
+      minIndentLevel: 0,
+      maxIndentLevel: 10,
+      HTMLAttributes: {}
+    };
+  },
+
+  addGlobalAttributes() {
+    const defaultIndentLevel = 0;
+
+    return [
+      {
+        types: allowedNodeTypes,
+        attributes: {
+          indent: {
+            default: defaultIndentLevel,
+            renderHTML: (attributes) => {
+              if (attributes.indent < 1) {
+                return {};
+              }
+
+              return { class: `editor-indent-${attributes.indent}` };
+            },
+            parseHTML: (element) => {
+              // The "ql" prefix here is to maintain backwards compatibility
+              // with the old editor. The new prefix is editor-indent-X where X
+              // is the current indentation level.
+              const regexp = /^(editor|ql)-indent-([0-9]+)/;
+              const indentClass = Array.from(element.classList).find((cls) => regexp.test(cls))
+              if (!indentClass) {
+                return defaultIndentLevel;
+              }
+              return parseInt(indentClass.match(regexp)[2], 10);
+            }
+          }
+        }
+      }
+    ];
+  },
+
+  addCommands() {
+    const updateIndent = (modifier, { editor, state, dispatch, commands }) => {
+      if (!allowedNodeActive(editor)) {
+        return false;
+      }
+
+      const node = closestAllowedNode(state.selection.$head);
+      if (node === null) {
+        return false;
+      }
+
+      const indent = node.attrs.indent + modifier;
+      if (indent < this.options.minIndentLevel || indent > this.options.maxIndentLevel) {
+        return false;
+      }
+
+      if (dispatch) {
+        return commands.updateAttributes(node.type.name, { indent });
+      }
+
+      return true;
+    }
+
+    return {
+      indent: () => ({ editor, state, commands, dispatch }) => {
+        if (editor.isActive("listItem")) {
+          if (dispatch) {
+            return commands.sinkListItem("listItem");
+          }
+          return true;
+        }
+
+        return updateIndent(1, { editor, state, dispatch, commands})
+      },
+      outdent: () => ({ editor, state, commands, dispatch }) => {
+        if (editor.isActive("listItem")) {
+          // When the list item depth is at 3 it means that the list is at the
+          // top level because of the following structure:
+          // <ul><!-- depth: 1 -->
+          //   <li><!-- depth: 2 -->
+          //     <p>Content</p><!-- depth: 3 -->
+          //   </li>
+          // </ul>
+          //
+          // We do not allow outdent at the top level of the list.
+          if (state.selection.$head.depth === 3) {
+            return false;
+          }
+          if (dispatch) {
+            return commands.liftListItem("listItem");
+          }
+          return true;
+        }
+
+        return updateIndent(-1, { editor, state, dispatch, commands})
+      }
+    }
+  },
+
+  addKeyboardShortcuts() {
+    const indent = () => {
+      if (!this.editor.can().indent()) {
+        return false;
+      }
+
+      return this.editor.commands.indent();
+    };
+    const outdent = () => {
+      if (!this.editor.can().outdent()) {
+        return false;
+      }
+
+      return this.editor.commands.outdent();
+    };
+
+    return {
+      Tab: indent,
+      "Shift-Tab": outdent,
+      Backspace: () => {
+        if (this.editor.isActive("listItem")) {
+          return false;
+        }
+
+        // With the backspace we only allow outdent when the cursor is at the
+        // beginning of the line.
+        if (this.editor.state.selection.$head.parentOffset > 0) {
+          return false;
+        }
+
+        return outdent();
+      },
+      "Mod-]": indent,
+      "Mod-[": outdent
+    };
+  }
+});

data/app/packs/src/decidim/editor/extensions/link/bubble_menu.js

@@ -0,0 +1,50 @@
+import { PluginKey } from "prosemirror-state";
+
+import { getDictionary } from "src/decidim/i18n";
+import BubbleMenu from "src/decidim/editor/common/bubble_menu";
+
+class LinkBubbleMenu extends BubbleMenu {
+  shouldDisplay() {
+    return this.editor.isActive("link");
+  }
+
+  display() {
+    const { href } = this.editor.getAttributes("link");
+    this.element.querySelector("[data-linkbubble-value]").textContent = href;
+  }
+
+  handleAction(action) {
+    if (action === "remove") {
+      this.editor.chain().focus(null, { scrollIntoView: false }).unsetLink().run();
+    } else {
+      this.editor.commands.linkDialog();
+    }
+  }
+}
+
+const createElement = () => {
+  const i18n = getDictionary("editor.extensions.link.bubbleMenu");
+
+  const element = document.createElement("div");
+  element.dataset.linkbubble = "";
+  element.innerHTML = `
+    <span data-linkbubble-content>
+      ${i18n.url}:
+      <span data-linkbubble-value></span>
+    </span>
+    <span data-linkbubble-actions>
+      <button type="button" data-action="edit">${i18n.edit}</button>
+      <button type="button" data-action="remove">${i18n.remove}</button>
+    </span>
+  `;
+
+  return element;
+};
+
+export default (editor) => {
+  return new LinkBubbleMenu({
+    editor,
+    element: createElement(),
+    pluginKey: new PluginKey("LinkBubble")
+  });
+};