UX: avoid leading space when serializing some nodes from rich editor (#32270)

On some cases during serialization (like with headings), the previous
node is still "open" when it's the "turn" of the node we're serializing.

In this case, checking the boundaries before writing was getting the
wrong state, because the `write` call uses `flushClose()`, which makes
sure we have the newlines from closing the previous node.

This would create scenarios like (notice the space before each node
below the heading)

```markdown
# Heading

 🎉

# Heading

 @mention

# Heading

  #hashtag
```

This PR makes sure we call flushClose() before checking boundaries, and
adds tests for that.

app/assets/javascripts/discourse/app/static/prosemirror/extensions/emoji.js

@@ -170,6 +170,7 @@ const extension = {
 
   serializeNode: {
     emoji(state, node) {
+      state.flushClose();
       if (!isBoundary(state.out, state.out.length - 1)) {
         state.write(" ");
       }

app/assets/javascripts/discourse/app/static/prosemirror/extensions/hashtag.js

@@ -68,6 +68,7 @@ const extension = {
 
   serializeNode: {
     hashtag(state, node, parent, index) {
+      state.flushClose();
       if (!isBoundary(state.out, state.out.length - 1)) {
         state.write(" ");
       }

app/assets/javascripts/discourse/app/static/prosemirror/extensions/mention.js

@@ -61,7 +61,8 @@ const extension = {
   },
 
   serializeNode: {
-    mention: (state, node, parent, index) => {
+    mention(state, node, parent, index) {
+      state.flushClose();
       if (!isBoundary(state.out, state.out.length - 1)) {
         state.write(" ");
       }

app/assets/javascripts/discourse/tests/integration/components/prosemirror-editor/emoji-test.js

@@ -10,57 +10,50 @@ module(
 
     const testCases = {
       emoji: [
-        [
         "Hey :tada:!",
         `<p>Hey <img class="emoji" alt=":tada:" title=":tada:" src="/images/emoji/twitter/tada.png?v=${v}" contenteditable="false" draggable="true">!</p>`,
         "Hey :tada:!",
       ],
-      ],
       "emoji in heading": [
-        [
         "# Heading :information_source:",
         `<h1>Heading <img class="emoji" alt=":information_source:" title=":information_source:" src="/images/emoji/twitter/information_source.png?v=${v}" contenteditable="false" draggable="true"></h1>`,
         "# Heading :information_source:",
       ],
+      "emoji after a heading": [
+        "# Heading\n\n:tada:",
+        `<h1>Heading</h1><p><img class="emoji only-emoji" alt=":tada:" title=":tada:" src="/images/emoji/twitter/tada.png?v=${v}" contenteditable="false" draggable="true"></p>`,
+        "# Heading\n\n:tada:",
       ],
       "single emoji in paragraph gets only-emoji class": [
-        [
         ":tada:",
         `<p><img class="emoji only-emoji" alt=":tada:" title=":tada:" src="/images/emoji/twitter/tada.png?v=${v}" contenteditable="false" draggable="true"></p>`,
         ":tada:",
       ],
-      ],
       "three emojis in paragraph get only-emoji class": [
-        [
         ":tada: :smile: :heart:",
         `<p><img class="emoji only-emoji" alt=":tada:" title=":tada:" src="/images/emoji/twitter/tada.png?v=${v}" contenteditable="false" draggable="true"> <img class="emoji only-emoji" alt=":smile:" title=":smile:" src="/images/emoji/twitter/smile.png?v=${v}" contenteditable="false" draggable="true"> <img class="emoji only-emoji" alt=":heart:" title=":heart:" src="/images/emoji/twitter/heart.png?v=${v}" contenteditable="false" draggable="true"></p>`,
         ":tada: :smile: :heart:",
       ],
-      ],
       "more than three emojis don't get only-emoji class": [
-        [
         ":tada: :smile: :heart: :+1:",
         `<p><img class="emoji" alt=":tada:" title=":tada:" src="/images/emoji/twitter/tada.png?v=${v}" contenteditable="false" draggable="true"> <img class="emoji" alt=":smile:" title=":smile:" src="/images/emoji/twitter/smile.png?v=${v}" contenteditable="false" draggable="true"> <img class="emoji" alt=":heart:" title=":heart:" src="/images/emoji/twitter/heart.png?v=${v}" contenteditable="false" draggable="true"> <img class="emoji" alt=":+1:" title=":+1:" src="/images/emoji/twitter/+1.png?v=${v}" contenteditable="false" draggable="true"></p>`,
         ":tada: :smile: :heart: :+1:",
       ],
-      ],
       "emoji with text doesn't get only-emoji class": [
-        [
         "Hello :tada:",
         `<p>Hello <img class="emoji" alt=":tada:" title=":tada:" src="/images/emoji/twitter/tada.png?v=${v}" contenteditable="false" draggable="true"></p>`,
         "Hello :tada:",
       ],
-      ],
     };
 
-    Object.entries(testCases).forEach(([name, tests]) => {
+    Object.entries(testCases).forEach(
-      tests.forEach(([markdown, expectedHtml, expectedMarkdown]) => {
+      ([name, [markdown, expectedHtml, expectedMarkdown]]) => {
         test(name, async function (assert) {
           this.siteSettings.rich_editor = true;
 
           await testMarkdown(assert, markdown, expectedHtml, expectedMarkdown);
         });
-      });
+      }
-    });
+    );
   }
 );

app/assets/javascripts/discourse/tests/integration/components/prosemirror-editor/hashtag-test.js

@@ -9,27 +9,30 @@ module(
 
     const testCases = {
       hashtag: [
-        [
         "#hello",
         '<p><a class="hashtag-cooked" data-name="hello" contenteditable="false" draggable="true">#hello</a></p>',
         "#hello",
       ],
-        [
+      "text with hashtag": [
         "Hello #category",
         '<p>Hello <a class="hashtag-cooked" data-name="category" contenteditable="false" draggable="true">#category</a></p>',
         "Hello #category",
       ],
+      "hashtag after heading": [
+        "## Hello\n\n#category",
+        '<h2>Hello</h2><p><a class="hashtag-cooked" data-name="category" contenteditable="false" draggable="true">#category</a></p>',
+        "## Hello\n\n#category",
       ],
     };
 
-    Object.entries(testCases).forEach(([name, tests]) => {
+    Object.entries(testCases).forEach(
-      tests.forEach(([markdown, expectedHtml, expectedMarkdown]) => {
+      ([name, [markdown, expectedHtml, expectedMarkdown]]) => {
         test(name, async function (assert) {
           this.siteSettings.rich_editor = true;
 
           await testMarkdown(assert, markdown, expectedHtml, expectedMarkdown);
         });
-      });
+      }
-    });
+    );
   }
 );

app/assets/javascripts/discourse/tests/integration/components/prosemirror-editor/mention-test.js

@@ -8,28 +8,31 @@ module(
     setupRenderingTest(hooks);
 
     const testCases = {
-      hashtag: [
+      mention: [
-        [
         "@hello",
         '<p><a class="mention" data-name="hello" contenteditable="false" draggable="true">@hello</a></p>',
         "@hello",
       ],
-        [
+      "text with mention": [
         "Hello @dude",
         '<p>Hello <a class="mention" data-name="dude" contenteditable="false" draggable="true">@dude</a></p>',
         "Hello @dude",
       ],
+      "mention after heading": [
+        "## Hello\n\n@dude",
+        '<h2>Hello</h2><p><a class="mention" data-name="dude" contenteditable="false" draggable="true">@dude</a></p>',
+        "## Hello\n\n@dude",
       ],
     };
 
-    Object.entries(testCases).forEach(([name, tests]) => {
+    Object.entries(testCases).forEach(
-      tests.forEach(([markdown, expectedHtml, expectedMarkdown]) => {
+      ([name, [markdown, expectedHtml, expectedMarkdown]]) => {
         test(name, async function (assert) {
           this.siteSettings.rich_editor = true;
 
           await testMarkdown(assert, markdown, expectedHtml, expectedMarkdown);
         });
-      });
+      }
-    });
+    );
   }
 );

plugins/discourse-local-dates/assets/javascripts/lib/rich-editor-extension.js

@@ -146,6 +146,7 @@ const extension = {
   serializeNode({ utils: { isBoundary } }) {
     return {
       local_date(state, node, parent, index) {
+        state.flushClose();
         if (!isBoundary(state.out, state.out.length - 1)) {
           state.write(" ");
         }
@@ -166,6 +167,7 @@ const extension = {
         }
       },
       local_date_range(state, node, parent, index) {
+        state.flushClose();
         if (!isBoundary(state.out, state.out.length - 1)) {
           state.write(" ");
         }