Commit 245284aa authored by Phil Hughes's avatar Phil Hughes

Merge branch 'dm-copy-suggestion-as-gfm' into 'master'

Allow suggestions to be copied and pasted as GFM

See merge request gitlab-org/gitlab-ce!24600
parents 7c7916ba 43005f2d
......@@ -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]],
};
......
......@@ -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"
......
......@@ -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>
......@@ -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 {
......
---
title: Allow suggestions to be copied and pasted as GFM
merge_request:
author:
type: fixed
# frozen_string_literal: true
# Generated HTML is transformed back to GFM by app/assets/javascripts/behaviors/markdown/nodes/code_block.js
module Banzai
module Filter
class SuggestionFilter < HTML::Pipeline::Filter
......
......@@ -402,6 +402,68 @@ describe 'Copy as GFM', :js do
expect(output_gfm.strip).to eq(gfm.strip)
end
verify(
'SuggestionFilter: suggestion as converted from GFM to HTML',
<<~GFM
```suggestion
New
And newer
```
GFM
)
aggregate_failures('SuggestionFilter: suggestion as transformed from HTML to Vue component') do
gfm = <<~GFM
```suggestion
New
And newer
```
GFM
html = <<~HTML
<div class="md-suggestion">
<div class="md-suggestion-header border-bottom-0 mt-2 qa-suggestion-diff-header">
<div class="qa-suggestion-diff-header font-weight-bold">
Suggested change
<a href="/gitlab/help/user/discussions/index.md#suggest-changes" aria-label="Help" class="js-help-btn">
<svg aria-hidden="true" class="s16 ic-question-o link-highlight">
<use xlink:href="/gitlab/assets/icons.svg#question-o"></use>
</svg>
</a>
</div>
<!---->
<button type="button" class="btn qa-apply-btn">Apply suggestion</button>
</div>
<table class="mb-3 md-suggestion-diff js-syntax-highlight code white">
<tbody>
<tr class="line_holder old">
<td class="diff-line-num old_line qa-old-diff-line-number old">9</td>
<td class="diff-line-num new_line old"></td>
<td class="line_content old"><span>Old
</span></td>
</tr>
<tr class="line_holder new">
<td class="diff-line-num old_line new"></td>
<td class="diff-line-num new_line qa-new-diff-line-number new">9</td>
<td class="line_content new"><span>New
</span></td>
</tr>
<tr class="line_holder new">
<td class="diff-line-num old_line new"></td>
<td class="diff-line-num new_line qa-new-diff-line-number new">10</td>
<td class="line_content new"><span> And newer
</span></td>
</tr>
</tbody>
</table>
</div>
HTML
output_gfm = html_to_gfm(html)
expect(output_gfm.strip).to eq(gfm.strip)
end
verify(
'SanitizationFilter',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment