decidim-core 0.31.2 → 0.32.1

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";
@@ -33,6 +33,14 @@ export default Link.extend({
     }
   },
 
+  renderHTML({ HTMLAttributes }) {
+    const attrs = { ...HTMLAttributes };
+    if (attrs.target === "") {
+      Reflect.deleteProperty(attrs, "target");
+    }
+    return ["a", attrs, 0];
+  },
+
   addCommands() {
     const i18n = getDictionary("editor.extensions.link");
 
@@ -40,31 +48,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 +120,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;

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

@@ -32,11 +32,10 @@ export default Mention.extend({
 
     return {
       ...parentOptions,
-      renderLabel({ node }) {
-        // The labels are formed based on the nicknames returned by the API
-        // which already contain the suggestion character, so there is no need
-        // to display it twice.
-        return `${node.attrs.label ?? node.attrs.id}`
+      renderText({ node }) {
+        // renderText is used to create the DOM representation
+        const label = node.attrs.label ?? node.attrs.id;
+        return label;
       },
       suggestion: {
         ...parentOptions?.suggestion,
@@ -59,6 +58,20 @@ export default Mention.extend({
     };
   },
 
+  renderHTML({ node }) {
+    // renderHTML is used for visual rendering getHTML()
+    const label = node.attrs.label ?? node.attrs.id;
+    return [
+      "span",
+      {
+        "data-type": "mention",
+        "data-id": node.attrs.id,
+        "data-label": node.attrs.label
+      },
+      label
+    ];
+  },
+
   addNodeView() {
     return createNodeView(this);
   }

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

@@ -27,18 +27,14 @@ const searchResources = async (queryText) => {
 
 export default Mention.extend({
   name: "mentionResource",
-
   addOptions() {
     const options = this.parent?.();
     const suggestion = options?.suggestion;
-
     return {
       ...options,
-      renderLabel({ node }) {
-        // The labels are formed based on the titles returned by the API
-        // which already contain the suggestion character, so there is no need
-        // to display it twice.
-        return `${node.attrs.label ?? node.attrs.id}`
+      renderText({ node }) {
+        // renderText is used to create the DOM representation
+        return node.attrs.label ?? node.attrs.id;
       },
       suggestion: {
         ...suggestion,
@@ -63,6 +59,19 @@ export default Mention.extend({
     };
   },
 
+  renderHTML({ node }) {
+    // renderHTML is used for visual rendering getHTML()
+    return [
+      "span",
+      {
+        "data-type": "mentionResource",
+        "data-id": node.attrs.id,
+        "data-label": node.attrs.label
+      },
+      node.attrs.label ?? node.attrs.id
+    ];
+  },
+
   addNodeView() {
     return createNodeView(this);
   }

data/app/packs/src/decidim/editor/test/extensions/decidim_kit.test.js

@@ -32,15 +32,24 @@ describe("DecidimKit", () => {
         "code",
         "doc",
         "dropCursor",
-        "gapCursor",
         "hardBreak",
-        "history",
+        "paragraph",
+        "link",
+        "decidimKit",
+        "starterKit",
         "horizontalRule",
         "italic",
         "listItem",
-        "paragraph",
         "strike",
-        "text"
+        "text",
+        "characterCount",
+        "bold",
+        "dialog",
+        "indent",
+        "orderedList",
+        "codeBlock",
+        "underline",
+        "heading"
       ].forEach((name) => expect(extensions).toContain(name));
     });
 

data/app/packs/src/decidim/editor/test/extensions/heading.test.js

@@ -51,6 +51,6 @@ describe("Heading", () => {
     editorElement.focus();
     await updateContent(editorElement, "# ");
 
-    expect(editor.getHTML()).toMatchHtml("<h2></h2>");
+    expect(editor.getHTML()).toMatchHtml("<p># </p>");
   });
 });

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

@@ -28,24 +28,7 @@ describe("Image", () => {
   let uploadFilePath = "/path/to/image.jpg";
   let uploadDialogElement = null;
   let editorInnerHTML = (dim, src, alt) => {
-    return `
-    <div data-image-resizer="" class="ProseMirror-selectednode" draggable="true">
-      <div data-image-resizer-wrapper="">
-        <button type="button" data-image-resizer-control="top-left"></button>
-        <button type="button" data-image-resizer-control="top-right"></button>
-        <button type="button" data-image-resizer-control="bottom-left"></button>
-        <button type="button" data-image-resizer-control="bottom-right"></button>
-        <div data-image-resizer-dimensions="">
-          <span data-image-resizer-dimension="width" data-image-resizer-dimension-value="${dim}"></span>
-          ×
-          <span data-image-resizer-dimension="height" data-image-resizer-dimension-value="${dim}"></span>
-        </div>
-        <div class="editor-content-image" data-image="">
-          <img src="${src}" alt="${alt}">
-        </div>
-      </div>
-    </div>
-  `
+    return `<div data-image-resizer="" class="ProseMirror-selectednode" draggable="true"><div data-image-resizer-wrapper=""><button type="button" data-image-resizer-control="top-left"></button><button type="button" data-image-resizer-control="top-right"></button><button type="button" data-image-resizer-control="bottom-left"></button><button type="button" data-image-resizer-control="bottom-right"></button><div data-image-resizer-dimensions=""><span data-image-resizer-dimension="width" data-image-resizer-dimension-value="${dim}"></span>×<span data-image-resizer-dimension="height" data-image-resizer-dimension-value="${dim}"></span></div><div class="editor-content-image" data-image=""><img src="${src}" alt="${alt}"></div></div></div>`;
   }
 
   const updateFile = async (path, alt) => {
@@ -63,6 +46,10 @@ describe("Image", () => {
     await sleep(0);
   }
 
+  const normalizeHTML = (html) => {
+    return html.replace(/<p><br class="ProseMirror-trailingBreak"><\/p>/g, "").replace(/<p><\/p>/g, "");
+  };
+
   beforeEach(() => {
     document.body.innerHTML = "";
 
@@ -109,7 +96,8 @@ describe("Image", () => {
   it("editing setting the image through the dialog", async () => {
     editorElement.focus();
     await updateContent(editorElement,
-      '<div class="editor-content-image" data-image=""><img src="/path/to/image.jpg" alt="Test text"></div>'
+      '<div class="editor-content-image" data-image=""><img src="/path/to/image.jpg" alt="Test text"></div>',
+      editor
     );
 
     editor.commands.imageDialog();
@@ -117,7 +105,7 @@ describe("Image", () => {
     await updateFile("/path/to/image_updated.jpg", "Updated text")
     expect(editorElement.classList.contains("dialog-open")).toBe(false);
 
-    expect(editorElement.innerHTML).toMatchHtml(editorInnerHTML("null", "/path/to/image_updated.jpg", "Updated text"));
+    expect(normalizeHTML(editorElement.innerHTML)).toMatchHtml(editorInnerHTML("null", "/path/to/image_updated.jpg", "Updated text"));
     expect(editor.getHTML()).toMatchHtml(`
       <div class="editor-content-image" data-image=""><img src="/path/to/image_updated.jpg" alt="Updated text"></div>
     `);
@@ -126,16 +114,26 @@ describe("Image", () => {
   it("allows double clicking the image", async () => {
     editorElement.focus();
     await updateContent(editorElement,
-      '<div class="editor-content-image" data-image=""><img src="/path/to/image.jpg" alt="Test text"></div>'
+      '<div class="editor-content-image" data-image=""><img src="/path/to/image.jpg" alt="Test text"></div>',
+      editor
     );
 
     jest.spyOn(uploadDialogElement.dialog, "open");
 
     // Position calculations do not work with JSDom / Jest
-    editor.view.posAtCoords = jest.fn().mockReturnValue({ pos: 1, inside: -1 });
-    editorElement.dispatchEvent(new MouseEvent("mousedown", { button: 0, clientX: 10, clientY: 10 }));
-    editorElement.dispatchEvent(new MouseEvent("mousedown", { button: 0, clientX: 10, clientY: 10 }));
-    await updateFile("/path/to/image_updated.jpg", "Updated text")
+    editor.view.posAtCoords = jest.fn().mockReturnValue({ pos: 0, inside: 0 });
+
+    const mockEvent = new MouseEvent("dblclick", {
+      button: 0,
+      clientX: 10,
+      clientY: 10
+    });
+
+    editor.view.someProp("handleDoubleClick", (click) => click(editor.view, 0, mockEvent));
+
+    await sleep(0);
+
+    await updateFile("/path/to/image_updated.jpg", "Updated text");
 
     expect(uploadDialogElement.dialog.open).toHaveBeenCalled();
     expect(editor.getHTML()).toMatchHtml(`
@@ -283,9 +281,9 @@ describe("Image", () => {
       });
 
       editorElement.focus();
-      await updateContent(editorElement,
-        '<div class="editor-content-image" data-image=""><img src="/path/to/image.jpg" alt="Test text"></div>'
-      );
+
+      editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test text" });
+      await sleep(0);
     });
     describe("with mouse", () => behavesLikeImageResizer("mouse"));
 

data/app/packs/src/decidim/editor/test/extensions/image_links.test.js

@@ -0,0 +1,161 @@
+/* global jest, global */
+
+import { createBasicEditor, updateContent, sleep } from "src/decidim/editor/test/helpers";
+
+import Dialog from "src/decidim/editor/extensions/dialog";
+import Image from "src/decidim/editor/extensions/image";
+import uploadTemplates from "src/decidim/editor/test/fixtures/upload_templates";
+
+class DummyDialog {
+  constructor(element) { this.element = element; }
+
+  open() { this.element.dataset.dialogOpen = true; }
+
+  close() { this.element.dataset.dialogOpen = null; }
+}
+
+// Not implemented in Jest
+global.Touch = class Touch {
+  constructor(options) {
+    this.pageX = options.pageX;
+    this.pageY = options.pageY;
+  }
+}
+
+describe("Image (links)", () => {
+  let editor = null;
+  let editorElement = null;
+  let uploadDialogElement = null;
+
+  beforeEach(() => {
+    document.body.innerHTML = "";
+
+    const dialogWrapper = document.createElement("div");
+    dialogWrapper.innerHTML = uploadTemplates.redesign;
+    uploadDialogElement = dialogWrapper.firstElementChild;
+    uploadDialogElement.dataset.dialog = "testDialog";
+    uploadDialogElement.dialog = new DummyDialog(uploadDialogElement);
+    window.Decidim.currentDialogs = { testDialog: uploadDialogElement.dialog };
+    document.body.append(uploadDialogElement);
+
+    editor = createBasicEditor({
+      extensions: [Dialog, Image.configure({ uploadDialogSelector: "#upload_dialog", uploadImagesPath: "/editor_images", contentTypes: ["image/png"] })]
+    });
+    editorElement = editor.view.dom;
+
+    const csrf = document.createElement("meta");
+    csrf.setAttribute("name", "csrf-token");
+    csrf.setAttribute("content", "abcdef0123456789");
+    document.head.append(csrf);
+
+    global.fetch = jest.fn(() => Promise.resolve({ ok: true, json: () => Promise.resolve({ url: "/path/to/image.jpg" }) }));
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("allows setting an image with href and target attributes", async () => {
+    editorElement.focus();
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image", href: "https://example.com", target: "_blank" });
+    await sleep(0);
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <a href="https://example.com" target="_blank" rel="noopener noreferrer">
+        <div class="editor-content-image" data-image="">
+          <img src="/path/to/image.jpg" alt="Test image">
+        </div>
+      </a>
+    `);
+  });
+
+  it("allows setting an image with href but no target", async () => {
+    editorElement.focus();
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image", href: "https://example.com" });
+    await sleep(0);
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <a href="https://example.com">
+        <div class="editor-content-image" data-image="">
+          <img src="/path/to/image.jpg" alt="Test image">
+        </div>
+      </a>
+    `);
+  });
+
+  it("parses existing HTML with linked images", async () => {
+    editorElement.focus();
+    await updateContent(editorElement,
+      '<a href="https://example.com" target="_blank"><div class="editor-content-image" data-image=""><img src="/path/to/image.jpg" alt="Test image"></div></a>',
+      editor
+    );
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <a href="https://example.com" target="_blank" rel="noopener noreferrer">
+        <div class="editor-content-image" data-image="">
+          <img src="/path/to/image.jpg" alt="Test image">
+        </div>
+      </a>
+    `);
+  });
+
+  it("parses existing HTML with linked images without target", async () => {
+    editorElement.focus();
+    await updateContent(editorElement,
+      '<a href="https://example.com"><div class="editor-content-image" data-image=""><img src="/path/to/image.jpg" alt="Test image"></div></a>',
+      editor
+    );
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <a href="https://example.com">
+        <div class="editor-content-image" data-image="">
+          <img src="/path/to/image.jpg" alt="Test image">
+        </div>
+      </a>
+    `);
+  });
+
+  it("allows updating image link attributes", async () => {
+    editorElement.focus();
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image", href: "https://example.com", target: "_blank" });
+    await sleep(0);
+
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image", href: "https://docs.example.com" });
+    await sleep(0);
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <a href="https://docs.example.com">
+        <div class="editor-content-image" data-image="">
+          <img src="/path/to/image.jpg" alt="Test image">
+        </div>
+      </a>
+    `);
+  });
+
+  it("allows removing link from image", async () => {
+    editorElement.focus();
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image", href: "https://example.com", target: "_blank" });
+    await sleep(0);
+
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image", href: null, target: null });
+    await sleep(0);
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <div class="editor-content-image" data-image="">
+        <img src="/path/to/image.jpg" alt="Test image">
+      </div>
+    `);
+  });
+
+  it("renders images without links correctly", async () => {
+    editorElement.focus();
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image" });
+    await sleep(0);
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <div class="editor-content-image" data-image="">
+        <img src="/path/to/image.jpg" alt="Test image">
+      </div>
+    `);
+  });
+});

data/app/packs/src/decidim/editor/test/extensions/mention.test.js

@@ -64,6 +64,10 @@ describe("Mention", () => {
   let editor = null;
   let editorElement = null;
 
+  const normalizeHTML = (html) => {
+    return html.replace(/\s*data-mention-suggestion-char="[^"]*"/g, "");
+  };
+
   beforeEach(() => {
     document.body.innerHTML = "";
 
@@ -108,7 +112,7 @@ describe("Mention", () => {
     expect(editorElement.innerHTML).toEqual(
       '<p><span data-suggestion="mention" data-id="@johndoe" data-label="@johndoe (John Doe)">@johndoe (John Doe)</span> </p>'
     );
-    expect(editor.getHTML()).toEqual(
+    expect(normalizeHTML(editor.getHTML())).toEqual(
       '<p><span data-type="mention" data-id="@johndoe" data-label="@johndoe (John Doe)">@johndoe (John Doe)</span> </p>'
     );
   });
@@ -122,7 +126,7 @@ describe("Mention", () => {
     expect(editorElement.innerHTML).toEqual(
       '<p><span data-suggestion="mention" data-id="@johndoe" data-label="@johndoe (John Doe)">@johndoe (John Doe)</span> </p>'
     );
-    expect(editor.getHTML()).toEqual(
+    expect(normalizeHTML(editor.getHTML())).toEqual(
       '<p><span data-type="mention" data-id="@johndoe" data-label="@johndoe (John Doe)">@johndoe (John Doe)</span> </p>'
     );
   });

data/app/packs/src/decidim/editor/test/extensions/video_embed.test.js

@@ -9,6 +9,10 @@ describe("VideoEmbed", () => {
   let editor = null;
   let editorElement = null;
 
+  const normalizeHTML = (html) => {
+    return html.replace(/<p><br class="ProseMirror-trailingBreak"><\/p>/g, "").replace(/<p><\/p>/g, "");
+  };
+
   beforeEach(() => {
     document.body.innerHTML = "";
 
@@ -35,7 +39,7 @@ describe("VideoEmbed", () => {
         </div>
       </div>
     `);
-    expect(editor.getHTML()).toMatchHtml(`
+    expect(normalizeHTML(editor.getHTML())).toMatchHtml(`
       <div class="editor-content-videoEmbed" data-video-embed="https://www.youtube.com/watch?v=f6JMgJAQ2tc">
         <div>
           <iframe src="https://www.youtube-nocookie.com/embed/f6JMgJAQ2tc?cc_load_policy=1&amp;modestbranding=1" title="Decidim" frameborder="0" allowfullscreen="true"></iframe>
@@ -52,21 +56,21 @@ describe("VideoEmbed", () => {
           <iframe src="https://www.youtube-nocookie.com/embed/f6JMgJAQ2tc?cc_load_policy=1&amp;modestbranding=1" title="Decidim" frameborder="0" allowfullscreen="true"></iframe>
         </div>
       </div>
-    `);
+    `, editor);
 
     editor.commands.setVideo({
       src: "https://www.youtube.com/watch?v=zhMMW0TENNA",
       title: "Free Open-Source"
     });
 
-    expect(editorElement.innerHTML).toMatchHtml(`
+    expect(normalizeHTML(editorElement.innerHTML)).toMatchHtml(`
       <div class="editor-content-videoEmbed ProseMirror-selectednode" data-video-embed="https://www.youtube.com/watch?v=zhMMW0TENNA" draggable="true">
         <div>
           <iframe src="https://www.youtube-nocookie.com/embed/zhMMW0TENNA?cc_load_policy=1&amp;modestbranding=1" title="Free Open-Source" frameborder="0" allowfullscreen="true"></iframe>
         </div>
       </div>
     `);
-    expect(editor.getHTML()).toMatchHtml(`
+    expect(normalizeHTML(editor.getHTML())).toMatchHtml(`
       <div class="editor-content-videoEmbed" data-video-embed="https://www.youtube.com/watch?v=zhMMW0TENNA">
         <div>
           <iframe src="https://www.youtube-nocookie.com/embed/zhMMW0TENNA?cc_load_policy=1&amp;modestbranding=1" title="Free Open-Source" frameborder="0" allowfullscreen="true"></iframe>
@@ -83,7 +87,7 @@ describe("VideoEmbed", () => {
           <iframe src="https://www.youtube-nocookie.com/embed/f6JMgJAQ2tc?cc_load_policy=1&amp;modestbranding=1" title="Decidim" frameborder="0" allowfullscreen="true"></iframe>
         </div>
       </div>
-    `);
+    `, editor);
 
     editor.commands.videoEmbedDialog();
     expect(editorElement.classList.contains("dialog-open")).toBe(true);
@@ -94,7 +98,7 @@ describe("VideoEmbed", () => {
     dialog.querySelector("[data-dialog-actions] button[data-action='save']").click();
     await sleep(50);
 
-    expect(editor.getHTML()).toMatchHtml(`
+    expect(normalizeHTML(editor.getHTML())).toMatchHtml(`
       <div class="editor-content-videoEmbed" data-video-embed="https://www.youtube.com/watch?v=f6JMgJAQ2tc">
         <div>
           <iframe src="https://www.youtube-nocookie.com/embed/f6JMgJAQ2tc?cc_load_policy=1&amp;modestbranding=1" title="Decidim" frameborder="0" allowfullscreen="true"></iframe>
@@ -113,7 +117,7 @@ describe("VideoEmbed", () => {
     dialog.querySelector("[data-dialog-actions] button[data-action='save']").click();
     await sleep(50);
 
-    expect(editor.getHTML()).toMatchHtml(`
+    expect(normalizeHTML(editor.getHTML())).toMatchHtml(`
       <div class="editor-content-videoEmbed" data-video-embed="https://www.youtube.com/watch?v=zhMMW0TENNA">
         <div>
           <iframe src="https://www.youtube-nocookie.com/embed/zhMMW0TENNA?cc_load_policy=1&amp;modestbranding=1" title="Free Open-Source" frameborder="0" allowfullscreen="true"></iframe>
@@ -125,7 +129,7 @@ describe("VideoEmbed", () => {
   it("allows pasting a YouTube video", async () => {
     await pasteContent(editorElement, "https://www.youtube.com/watch?v=f6JMgJAQ2tc");
 
-    expect(editor.getHTML()).toMatchHtml(`
+    expect(normalizeHTML(editor.getHTML())).toMatchHtml(`
       <div class="editor-content-videoEmbed" data-video-embed="https://www.youtube.com/watch?v=f6JMgJAQ2tc">
         <div>
           <iframe src="https://www.youtube-nocookie.com/embed/f6JMgJAQ2tc?cc_load_policy=1&amp;modestbranding=1" title="" frameborder="0" allowfullscreen="true"></iframe>
@@ -137,7 +141,7 @@ describe("VideoEmbed", () => {
   it("allows pasting a Vimeo video", async () => {
     await pasteContent(editorElement, "https://vimeo.com/312909656");
 
-    expect(editor.getHTML()).toMatchHtml(`
+    expect(normalizeHTML(editor.getHTML())).toMatchHtml(`
       <div class="editor-content-videoEmbed" data-video-embed="https://vimeo.com/312909656">
         <div>
           <iframe src="https://player.vimeo.com/video/312909656" title="" frameborder="0" allowfullscreen="true"></iframe>
@@ -154,13 +158,21 @@ describe("VideoEmbed", () => {
           <iframe src="https://www.youtube-nocookie.com/embed/f6JMgJAQ2tc?cc_load_policy=1&amp;modestbranding=1" title="Decidim" frameborder="0" allowfullscreen="true"></iframe>
         </div>
       </div>
-    `);
+    `, editor);
+
+    // Position calculations do not work with JSDom / Jest.
+    editor.view.posAtCoords = jest.fn().mockReturnValue({ pos: 0, inside: 0 });
+
+    // Manually trigger the handleDoubleClick handler directly.
+    const mockEvent = new MouseEvent("dblclick", {
+      bubbles: true,
+      cancelable: true,
+      clientX: 10,
+      clientY: 10
+    });
 
-    // Position calculations do not work with JSDom / Jest
-    editor.view.posAtCoords = jest.fn().mockReturnValue({ pos: 1, inside: -1 });
+    editor.view.someProp("handleDoubleClick", (click) => click(editor.view, 0, mockEvent));
 
-    editorElement.dispatchEvent(new MouseEvent("mousedown", { clientX: 10, clientY: 10 }));
-    editorElement.dispatchEvent(new MouseEvent("mousedown", { clientX: 10, clientY: 10 }));
     await sleep(0);
 
     expect(editorElement.classList.contains("dialog-open")).toBe(true);
@@ -172,7 +184,7 @@ describe("VideoEmbed", () => {
     dialog.querySelector("[data-dialog-actions] button[data-action='save']").click();
     await sleep(50);
 
-    expect(editor.getHTML()).toMatchHtml(`
+    expect(normalizeHTML(editor.getHTML())).toMatchHtml(`
       <div class="editor-content-videoEmbed" data-video-embed="https://www.youtube.com/watch?v=zhMMW0TENNA">
         <div>
           <iframe src="https://www.youtube-nocookie.com/embed/zhMMW0TENNA?cc_load_policy=1&amp;modestbranding=1" title="Decidim" frameborder="0" allowfullscreen="true"></iframe>