Merge branch 'himkp-fix-markdown-serialization' into 'master'

Fix markdown serialization in content editor

See merge request gitlab-org/gitlab!81849

app/assets/javascripts/content_editor/services/serialization_helpers.js

@@ -259,11 +259,16 @@ export function renderContent(state, node, forceRenderInline) {
   }
 }
 
-export function renderHTMLNode(tagName, forceRenderInline = false) {
+export function renderHTMLNode(tagName, forceRenderContentInline = false) {
   return (state, node) => {
     renderTagOpen(state, tagName, node.attrs);
-    renderContent(state, node, forceRenderInline);
+    renderContent(state, node, forceRenderContentInline);
     renderTagClose(state, tagName, false);
+
+    if (forceRenderContentInline) {
+      state.closeBlock(node);
+      state.flushClose();
+    }
   };
 }
 

spec/frontend/content_editor/markdown_processing_spec_helper.js

@@ -55,7 +55,7 @@ const testSerializesHtmlToMarkdownForElement = async ({ markdown, html }) => {
 
   // Assert that the markdown we ended up with after sending it through all the ContentEditor
   // plumbing matches the original markdown from the YAML.
-  expect(serializedContent).toBe(markdown);
+  expect(serializedContent.trim()).toBe(markdown.trim());
 };
 
 // describeMarkdownProcesssing

spec/frontend/content_editor/services/markdown_serializer_spec.js

@@ -597,6 +597,7 @@ this is not really json but just trying out whether this case works or not
             paragraph('A giant ', italic('owl-like'), ' creature.'),
           ),
         ),
+        heading('this is a heading'),
       ),
     ).toBe(
       `
@@ -612,6 +613,8 @@ A giant _owl-like_ creature.
 
 </dd>
 </dl>
+
+# this is a heading
       `.trim(),
     );
   });
@@ -623,6 +626,7 @@ A giant _owl-like_ creature.
           detailsContent(paragraph('this is the summary')),
           detailsContent(paragraph('this content will be hidden')),
         ),
+        heading('this is a heading'),
       ),
     ).toBe(
       `
@@ -630,6 +634,8 @@ A giant _owl-like_ creature.
 <summary>this is the summary</summary>
 this content will be hidden
 </details>
+
+# this is a heading
       `.trim(),
     );
   });
@@ -648,7 +654,7 @@ this content will be hidden
           detailsContent(paragraph('this content will be ', italic('hidden'))),
         ),
         details(detailsContent(paragraph('summary 2')), detailsContent(paragraph('content 2'))),
-      ),
+      ).trim(),
     ).toBe(
       `
 <details>
@@ -669,6 +675,7 @@ console.log(c);
 this content will be _hidden_
 
 </details>
+
 <details>
 <summary>summary 2</summary>
 content 2
@@ -694,7 +701,7 @@ content 2
             ),
           ),
         ),
-      ),
+      ).trim(),
     ).toBe(
       `
 <details>
@@ -709,7 +716,9 @@ content 2
 _inception_
 
 </details>
+
 </details>
+
 </details>
       `.trim(),
     );