1 files changed, 22 insertions, 2 deletions
diff --git a/app/assets/javascripts/behaviors/markdown/nodes/code_block.js b/app/assets/javascripts/behaviors/markdown/nodes/code_block.js
index b9b894b3348..1e0c05eff08 100644
--- a/app/assets/javascripts/behaviors/markdown/nodes/code_block.js
+++ b/app/assets/javascripts/behaviors/markdown/nodes/code_block.js
@@ -8,6 +8,7 @@ const PLAINTEXT_LANG = 'plaintext';
 // - Banzai::Filter::SyntaxHighlightFilter
 // - Banzai::Filter::MathFilter
 // - Banzai::Filter::MermaidFilter
+// - Banzai::Filter::SuggestionFilter
 export default class CodeBlock extends BaseCodeBlock {
   get schema() {
     return {
@@ -20,7 +21,7 @@ export default class CodeBlock extends BaseCodeBlock {
         lang: { default: PLAINTEXT_LANG },
       },
       parseDOM: [
-        // Matches HTML generated by Banzai::Filter::SyntaxHighlightFilter, Banzai::Filter::MathFilter or Banzai::Filter::MermaidFilter
+        // Matches HTML generated by Banzai::Filter::SyntaxHighlightFilter, Banzai::Filter::MathFilter, Banzai::Filter::MermaidFilter, or Banzai::Filter::SuggestionFilter
         {
           tag: 'pre.code.highlight',
           preserveWhitespace: 'full',
@@ -39,7 +40,7 @@ export default class CodeBlock extends BaseCodeBlock {
           contentElement: 'annotation[encoding="application/x-tex"]',
           attrs: { lang: 'math' },
         },
-        // Matches HTML generated by Banzai::Filter::MathFilter,
+        // Matches HTML generated by Banzai::Filter::MermaidFilter,
         // after being transformed by app/assets/javascripts/behaviors/markdown/render_mermaid.js
         {
           tag: 'svg.mermaid',
@@ -47,6 +48,25 @@ export default class CodeBlock extends BaseCodeBlock {
           contentElement: 'text.source',
           attrs: { lang: 'mermaid' },
         },
+        // Matches HTML generated by Banzai::Filter::SuggestionFilter,
+        // after being transformed by app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
+        {
+          tag: '.md-suggestion',
+          skip: true,
+        },
+        {
+          tag: '.md-suggestion-header',
+          ignore: true,
+        },
+        {
+          tag: '.md-suggestion-diff',
+          preserveWhitespace: 'full',
+          getContent: (el, schema) =>
+            [...el.querySelectorAll('.line_content.new span')].map(span =>
+              schema.text(span.innerText),
+            ),
+          attrs: { lang: 'suggestion' },
+        },
       ],
       toDOM: node => ['pre', { class: 'code highlight', lang: node.attrs.lang }, ['code', 0]],
     };