decidim-core 0.31.5 → 0.32.0.rc2

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

@@ -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");
 

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/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>

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

@@ -76,16 +76,14 @@ Object.assign(Range.prototype, {
 
 export const sleep = async (time) => new Promise((resolve) => setTimeout(resolve, time));
 
-export const updateContent = async (editable, content) => {
-  // ProseMirror listens has a mutation observer which listens to the changes on
-  // the contenteditable element. This forces us to manually change the
-  // `innerHTML` of the element to cause a change event to be triggered for the
-  // editor.
-  editable.innerHTML = content;
-
-  // We need to wait for the mutation observer to complete its logic. It has a
-  // timeout of 20 milliseconds by default which is the minimum amount we need
-  // to wait.
+export const updateContent = async (editable, content, editor) => {
+  if (editor) {
+    // Allows the proper use of TipTap's setContent method
+    editor.commands.setContent(content);
+  } else {
+    // Fallback for cases where editor is not available
+    editable.innerHTML = content;
+  }
   await sleep(50);
 };
 

data/app/packs/src/decidim/editor/test/toolbar/full.test.js

@@ -53,6 +53,12 @@ describe("full toolbar", () => {
     });
 
     describe("videoEmbed", () => {
+
+      const normalizeHTML = (html) => {
+        return html.replace(/\s*data-mention-suggestion-char="[^"]*"/g, "").
+          replace(/<p><br class="ProseMirror-trailingBreak"><\/p>/g, "");
+      };
+
       it("creates a new video embed with the provided details at the end of the selection", async () => {
         await setContent("Hello, world!");
         prosemirror.focus();
@@ -69,7 +75,7 @@ describe("full toolbar", () => {
         // handled
         await sleep(0);
 
-        expect(prosemirror.innerHTML).toMatchHtml(
+        expect(normalizeHTML(prosemirror.innerHTML)).toMatchHtml(
           `
             <p>Hello, world!</p>
             <div class="editor-content-videoEmbed ProseMirror-selectednode" data-video-embed="https://www.youtube.com/watch?v=f6JMgJAQ2tc" draggable="true">
@@ -112,7 +118,7 @@ describe("full toolbar", () => {
         // handled
         await sleep(0);
 
-        expect(prosemirror.innerHTML).toMatchHtml(
+        expect(normalizeHTML(prosemirror.innerHTML)).toMatchHtml(
           `
             <p>Hello, world!</p>
             <div class="editor-content-videoEmbed ProseMirror-selectednode" data-video-embed="https://www.youtube.com/watch?v=zhMMW0TENNA" draggable="true">
@@ -148,6 +154,11 @@ describe("full toolbar", () => {
         window.Decidim.currentDialogs[dialog] = dialogEl.dialog;
       }
 
+      const normalizeHTML = (html) => {
+        return html.replace(/\s*data-mention-suggestion-char="[^"]*"/g, "").
+          replace(/<p><br class="ProseMirror-trailingBreak"><\/p>/g, "");
+      };
+
       beforeEach(() => {
         const csrf = document.createElement("meta");
         csrf.setAttribute("name", "csrf-token")
@@ -174,7 +185,7 @@ describe("full toolbar", () => {
 
         await sleep(0);
 
-        expect(prosemirror.innerHTML).toMatchHtml(
+        expect(normalizeHTML(prosemirror.innerHTML)).toMatchHtml(
           `
             <p>Hello, world!</p>
             <div data-image-resizer="" class="ProseMirror-selectednode" draggable="true">
@@ -218,7 +229,7 @@ describe("full toolbar", () => {
 
         await sleep(0);
 
-        expect(prosemirror.innerHTML).toMatchHtml(
+        expect(normalizeHTML(prosemirror.innerHTML)).toMatchHtml(
           `
             <p>Hello, world!</p>
             <div data-image-resizer="" class="ProseMirror-selectednode" draggable="true">

data/app/packs/src/decidim/editor/test/toolbar/shared/behaves_like_basic_block.js

@@ -5,13 +5,17 @@ import contextHelpers from "src/decidim/editor/test/toolbar/shared/context";
 export default (ctx) => {
   const { getControl, setContent } = contextHelpers(ctx);
 
+  const normalizeHTML = (html) => {
+    return html.replace(/<p><br class="ProseMirror-trailingBreak"><\/p>$/g, "").trim();
+  };
+
   describe("codeBlock", () => {
     it("creates a new code block", async () => {
       await setContent("Hello, world!");
       selectContent(ctx.prosemirror);
       getControl("codeBlock").click();
 
-      expect(ctx.prosemirror.innerHTML).toEqual("<pre><code>Hello, world!</code></pre>");
+      expect(normalizeHTML(ctx.prosemirror.innerHTML)).toEqual("<pre><code>Hello, world!</code></pre>");
     });
 
     it("makes existing code block content as normal text", async () => {
@@ -20,7 +24,7 @@ export default (ctx) => {
       selectContent(ctx.prosemirror, "pre code");
       getControl("codeBlock").click();
 
-      expect(ctx.prosemirror.innerHTML).toEqual("<p>Hello, world!</p>");
+      expect(normalizeHTML(ctx.prosemirror.innerHTML)).toEqual("<p>Hello, world!</p>");
     });
   });
 
@@ -30,7 +34,7 @@ export default (ctx) => {
       selectContent(ctx.prosemirror);
       getControl("blockquote").click();
 
-      expect(ctx.prosemirror.innerHTML).toEqual("<blockquote><p>Hello, world!</p></blockquote>");
+      expect(normalizeHTML(ctx.prosemirror.innerHTML)).toEqual("<blockquote><p>Hello, world!</p></blockquote>");
     });
 
     it("makes existing blockquote content as normal text", async () => {
@@ -39,7 +43,7 @@ export default (ctx) => {
       selectContent(ctx.prosemirror, "blockquote p");
       getControl("blockquote").click();
 
-      expect(ctx.prosemirror.innerHTML).toEqual("<p>Hello, world!</p>");
+      expect(normalizeHTML(ctx.prosemirror.innerHTML)).toEqual("<p>Hello, world!</p>");
     });
   });
 };

data/app/packs/src/decidim/editor/test/toolbar/shared/behaves_like_basic_formatting.js

@@ -3,6 +3,10 @@ import contextHelpers from "src/decidim/editor/test/toolbar/shared/context";
 export default (ctx) => {
   const { getControl, setContent } = contextHelpers(ctx);
 
+  const normalizeHTML = (html) => {
+    return html.replace(/<p><br class="ProseMirror-trailingBreak"><\/p>$/g, "").trim();
+  };
+
   describe("hardBreak", () => {
     it("creates a new line break at the cursor position", async () => {
       await setContent("Hello, world!");
@@ -11,7 +15,7 @@ export default (ctx) => {
 
       // Note that the "tailingBreak" is only ProseMirror's internal element
       // to place the cursor at the correct location.
-      expect(ctx.prosemirror.innerHTML).toEqual('<p>Hello, world!<br><br class="ProseMirror-trailingBreak"></p>');
+      expect(normalizeHTML(ctx.prosemirror.innerHTML)).toEqual('<p>Hello, world!<br><br class="ProseMirror-trailingBreak"></p>');
     });
   });
 };

data/app/packs/src/decidim/editor/test/toolbar/shared/behaves_like_basic_indent.js

@@ -5,6 +5,10 @@ import contextHelpers from "src/decidim/editor/test/toolbar/shared/context";
 export default (ctx) => {
   const { getControl, setContent } = contextHelpers(ctx);
 
+  const normalizeHTML = (html) => {
+    return html.replace(/<p><br class="ProseMirror-trailingBreak"><\/p>$/g, "").trim();
+  };
+
   describe("indent:indent", () => {
     it("indents the existing content", async () => {
       await setContent("Hello, world!");
@@ -13,7 +17,7 @@ export default (ctx) => {
       ctrl.click();
       ctrl.click();
 
-      expect(ctx.prosemirror.innerHTML).toEqual('<p class="editor-indent-2">Hello, world!</p>');
+      expect(normalizeHTML(ctx.prosemirror.innerHTML)).toEqual('<p class="editor-indent-2">Hello, world!</p>');
     });
 
     it("indents a list item correctly", async () => {
@@ -21,7 +25,7 @@ export default (ctx) => {
       selectContent(ctx.prosemirror, "ul li:nth-child(2) p");
       getControl("indent:indent").click();
 
-      expect(ctx.prosemirror.innerHTML).toEqual(
+      expect(normalizeHTML(ctx.prosemirror.innerHTML)).toEqual(
         "<ul><li><p>First item</p><ul><li><p>Second item</p></li></ul></li></ul>"
       );
     });
@@ -35,7 +39,7 @@ export default (ctx) => {
       ctrl.click();
       ctrl.click();
 
-      expect(ctx.prosemirror.innerHTML).toEqual("<p>Hello, world!</p>");
+      expect(normalizeHTML(ctx.prosemirror.innerHTML)).toEqual("<p>Hello, world!</p>");
     });
 
     it("outdents a list item correctly", async () => {
@@ -43,7 +47,7 @@ export default (ctx) => {
       selectContent(ctx.prosemirror, "ul li ul li p");
       getControl("indent:outdent").click();
 
-      expect(ctx.prosemirror.innerHTML).toEqual(
+      expect(normalizeHTML(ctx.prosemirror.innerHTML)).toEqual(
         "<ul><li><p>First item</p></li><li><p>Second item</p></li></ul>"
       );
     });
@@ -53,7 +57,7 @@ export default (ctx) => {
       selectContent(ctx.prosemirror, "ul li:nth-child(2) p");
       getControl("indent:outdent").click();
 
-      expect(ctx.prosemirror.innerHTML).toEqual(
+      expect(normalizeHTML(ctx.prosemirror.innerHTML)).toEqual(
         "<ul><li><p>First item</p></li><li><p>Second item</p></li></ul>"
       );
     });

data/app/packs/src/decidim/editor/test/toolbar/shared/behaves_like_basic_link.js

@@ -5,6 +5,10 @@ import contextHelpers from "src/decidim/editor/test/toolbar/shared/context";
 export default (ctx) => {
   const { getControl, setContent } = contextHelpers(ctx);
 
+  const normalizeHTML = (html) => {
+    return html.replace(/<p><br class="ProseMirror-trailingBreak"><\/p>$/g, "").trim();
+  };
+
   describe("link", () => {
     it("creates a link for the selected text", async () => {
       await setContent("Hello, world!");
@@ -25,7 +29,7 @@ export default (ctx) => {
       // handled
       await sleep(0);
 
-      expect(ctx.prosemirror.innerHTML).toEqual(
+      expect(normalizeHTML(ctx.prosemirror.innerHTML)).toEqual(
         '<p>Hello, <a href="https://decidim.org" target="_blank">world</a>!</p>'
       );
     });