diff options
Diffstat (limited to 'app')
4 files changed, 26 insertions, 4 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]], }; 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 { </script> <template> - <div> + <div class="md-suggestion"> <suggestion-diff-header class="qa-suggestion-diff-header" :can-apply="suggestion.appliable && suggestion.current_user.can_apply && !disabled" diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue index dcda701f049..c33665c24f6 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue @@ -130,6 +130,6 @@ export default { <template> <div> <div class="flash-container js-suggestions-flash"></div> - <div v-show="isRendered" ref="container" v-html="noteHtml"></div> + <div v-show="isRendered" ref="container" class="note-text md" v-html="noteHtml"></div> </div> </template> diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index 679148ddf7b..f708a26bb32 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -280,6 +280,8 @@ .md-suggestion-diff { display: table !important; border: 1px solid $border-color !important; + width: 100% !important; + font-family: $monospace-font !important; } .md-suggestion-header { |