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]], }; diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue index b9f884074d0..a351ca62c94 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue @@ -42,7 +42,7 @@ export default {