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

Copy code as GFM from diffs, blobs and GFM code blocks

See merge request !9874

app/assets/javascripts/copy_as_gfm.js

@@ -118,10 +118,10 @@ const gfmRules = {
   },
   SyntaxHighlightFilter: {
     'pre.code.highlight'(el, t) {
-      const text = t.trim();
+      const text = t.trimRight();
 
       let lang = el.getAttribute('lang');
-      if (lang === 'plaintext') {
+      if (!lang || lang === 'plaintext') {
         lang = '';
       }
 
@@ -157,7 +157,7 @@ const gfmRules = {
       const backticks = Array(backtickCount + 1).join('`');
       const spaceOrNoSpace = backtickCount > 1 ? ' ' : '';
 
-      return backticks + spaceOrNoSpace + text + spaceOrNoSpace + backticks;
+      return backticks + spaceOrNoSpace + text.trim() + spaceOrNoSpace + backticks;
     },
     'blockquote'(el, text) {
       return text.trim().split('\n').map(s => `> ${s}`.trim()).join('\n');
@@ -273,28 +273,29 @@ const gfmRules = {
 
 class CopyAsGFM {
   constructor() {
-    $(document).on('copy', '.md, .wiki', this.handleCopy);
-    $(document).on('paste', '.js-gfm-input', this.handlePaste);
+    $(document).on('copy', '.md, .wiki', (e) => { this.copyAsGFM(e, CopyAsGFM.transformGFMSelection); });
+    $(document).on('copy', 'pre.code.highlight, .diff-content .line_content', (e) => { this.copyAsGFM(e, CopyAsGFM.transformCodeSelection); });
+    $(document).on('paste', '.js-gfm-input', this.pasteGFM.bind(this));
   }
 
-  handleCopy(e) {
+  copyAsGFM(e, transformer) {
     const clipboardData = e.originalEvent.clipboardData;
     if (!clipboardData) return;
 
     const documentFragment = window.gl.utils.getSelectedFragment();
     if (!documentFragment) return;
 
-    // If the documentFragment contains more than just Markdown, don't copy as GFM.
-    if (documentFragment.querySelector('.md, .wiki')) return;
+    const el = transformer(documentFragment.cloneNode(true));
+    if (!el) return;
 
     e.preventDefault();
-    clipboardData.setData('text/plain', documentFragment.textContent);
+    e.stopPropagation();
 
-    const gfm = CopyAsGFM.nodeToGFM(documentFragment);
-    clipboardData.setData('text/x-gfm', gfm);
+    clipboardData.setData('text/plain', el.textContent);
+    clipboardData.setData('text/x-gfm', CopyAsGFM.nodeToGFM(el));
   }
 
-  handlePaste(e) {
+  pasteGFM(e) {
     const clipboardData = e.originalEvent.clipboardData;
     if (!clipboardData) return;
 
@@ -306,7 +307,47 @@ class CopyAsGFM {
     window.gl.utils.insertText(e.target, gfm);
   }
 
+  static transformGFMSelection(documentFragment) {
+    // If the documentFragment contains more than just Markdown, don't copy as GFM.
+    if (documentFragment.querySelector('.md, .wiki')) return null;
+
+    return documentFragment;
+  }
+
+  static transformCodeSelection(documentFragment) {
+    const lineEls = documentFragment.querySelectorAll('.line');
+
+    let codeEl;
+    if (lineEls.length > 1) {
+      codeEl = document.createElement('pre');
+      codeEl.className = 'code highlight';
+
+      const lang = lineEls[0].getAttribute('lang');
+      if (lang) {
+        codeEl.setAttribute('lang', lang);
+      }
+    } else {
+      codeEl = document.createElement('code');
+    }
+
+    if (lineEls.length > 0) {
+      for (let i = 0; i < lineEls.length; i += 1) {
+        const lineEl = lineEls[i];
+        codeEl.appendChild(lineEl);
+        codeEl.appendChild(document.createTextNode('\n'));
+      }
+    } else {
+      codeEl.appendChild(documentFragment);
+    }
+
+    return codeEl;
+  }
+
   static nodeToGFM(node) {
+    if (node.nodeType === Node.COMMENT_NODE) {
+      return '';
+    }
+
     if (node.nodeType === Node.TEXT_NODE) {
       return node.textContent;
     }

app/helpers/gitlab_markdown_helper.rb

@@ -172,7 +172,9 @@ module GitlabMarkdownHelper
   # text hasn't already been truncated, then append "..." to the node contents
   # and return true.  Otherwise return false.
   def truncate_if_block(node, truncated)
-    if node.element? && node.description&.block? && !truncated
+    return true if truncated
+
+    if node.element? && (node.description&.block? || node.matches?('pre > code > .line'))
       node.inner_html = "#{node.inner_html}..." if node.next_sibling
       true
     else

changelogs/unreleased/dm-copy-code-as-gfm.yml

+---
+title: Copy code as GFM from diffs, blobs and GFM code blocks
+merge_request:
+author:

lib/banzai/filter/syntax_highlight_filter.rb

@@ -5,8 +5,6 @@ module Banzai
     # HTML Filter to highlight fenced code blocks
     #
     class SyntaxHighlightFilter < HTML::Pipeline::Filter
-      include Rouge::Plugins::Redcarpet
-
       def call
         doc.search('pre > code').each do |node|
           highlight_node(node)
@@ -23,7 +21,7 @@ module Banzai
         lang = lexer.tag
 
         begin
-          code = format(lex(lexer, code))
+          code = Rouge::Formatters::HTMLGitlab.format(lex(lexer, code), tag: lang)
 
           css_classes << " js-syntax-highlight #{lang}"
         rescue
@@ -45,10 +43,6 @@ module Banzai
         lexer.lex(code)
       end
 
-      def format(tokens)
-        rouge_formatter.format(tokens)
-      end
-
       def lexer_for(language)
         (Rouge::Lexer.find(language) || Rouge::Lexers::PlainText).new
       end
@@ -57,11 +51,6 @@ module Banzai
         # Replace the parent `pre` element with the entire highlighted block
         node.parent.replace(highlighted)
       end
-
-      # Override Rouge::Plugins::Redcarpet#rouge_formatter
-      def rouge_formatter(lexer = nil)
-        @rouge_formatter ||= Rouge::Formatters::HTML.new
-      end
     end
   end
 end

lib/gitlab/highlight.rb

@@ -14,7 +14,7 @@ module Gitlab
     end
 
     def initialize(blob_name, blob_content, repository: nil)
-      @formatter = Rouge::Formatters::HTMLGitlab.new
+      @formatter = Rouge::Formatters::HTMLGitlab
       @repository = repository
       @blob_name = blob_name
       @blob_content = blob_content
@@ -28,7 +28,7 @@ module Gitlab
         hl_lexer = self.lexer
       end
 
-      @formatter.format(hl_lexer.lex(text, continue: continue)).html_safe
+      @formatter.format(hl_lexer.lex(text, continue: continue), tag: hl_lexer.tag).html_safe
     rescue
       @formatter.format(Rouge::Lexers::PlainText.lex(text)).html_safe
     end

lib/rouge/formatters/html_gitlab.rb

@@ -5,10 +5,10 @@ module Rouge
 
       # Creates a new <tt>Rouge::Formatter::HTMLGitlab</tt> instance.
       #
-      # [+linenostart+]     The line number for the first line (default: 1).
-      def initialize(linenostart: 1)
-        @linenostart = linenostart
-        @line_number = linenostart
+      # [+tag+]     The tag (language) of the lexer used to generate the formatted tokens
+      def initialize(tag: nil)
+        @line_number = 1
+        @tag = tag
       end
 
       def stream(tokens, &b)
@@ -17,7 +17,7 @@ module Rouge
           yield "\n" unless is_first
           is_first = false
 
-          yield %(<span id="LC#{@line_number}" class="line">)
+          yield %(<span id="LC#{@line_number}" class="line" lang="#{@tag}">)
           line.each { |token, value| yield span(token, value.chomp) }
           yield %(</span>)
 

spec/features/copy_as_gfm_spec.rb

@@ -2,8 +2,14 @@ require 'spec_helper'
 
 describe 'Copy as GFM', feature: true, js: true do
   include GitlabMarkdownHelper
+  include RepoHelpers
   include ActionView::Helpers::JavaScriptHelper
 
+  before do
+    login_as :admin
+  end
+
+  describe 'Copying rendered GFM' do
     before do
       @feat = MarkdownFeature.new
 
@@ -410,17 +416,6 @@ describe 'Copy as GFM', feature: true, js: true do
 
     alias_method :gfm_to_html, :markdown
 
-  def html_to_gfm(html)
-    js = <<-JS.strip_heredoc
-      (function(html) {
-        var node = document.createElement('div');
-        node.innerHTML = html;
-        return window.gl.CopyAsGFM.nodeToGFM(node);
-      })("#{escape_javascript(html)}")
-    JS
-    page.evaluate_script(js)
-  end
-
     def verify(label, *gfms)
       aggregate_failures(label) do
         gfms.each do |gfm|
@@ -435,4 +430,166 @@ describe 'Copy as GFM', feature: true, js: true do
     def current_user
       @feat.user
     end
+  end
+
+  describe 'Copying code' do
+    let(:project) { create(:project) }
+
+    context 'from a diff' do
+      before do
+        visit namespace_project_commit_path(project.namespace, project, sample_commit.id)
+      end
+
+      context 'selecting one word of text' do
+        it 'copies as inline code' do
+          verify(
+            '[id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_10_9"] .line .no',
+
+            '`RuntimeError`'
+          )
+        end
+      end
+
+      context 'selecting one line of text' do
+        it 'copies as inline code' do
+          verify(
+            '[id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_10_9"] .line',
+
+            '`raise RuntimeError, "System commands must be given as an array of strings"`'
+          )
+        end
+      end
+
+      context 'selecting multiple lines of text' do
+        it 'copies as a code block' do
+          verify(
+            '[id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_10_9"], [id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_10_10"]',
+
+            <<-GFM.strip_heredoc,
+              ```ruby
+                    raise RuntimeError, "System commands must be given as an array of strings"
+                  end
+              ```
+            GFM
+          )
+        end
+      end
+    end
+
+    context 'from a blob' do
+      before do
+        visit namespace_project_blob_path(project.namespace, project, File.join('master', 'files/ruby/popen.rb'))
+      end
+
+      context 'selecting one word of text' do
+        it 'copies as inline code' do
+          verify(
+            '.line[id="LC9"] .no',
+
+            '`RuntimeError`'
+          )
+        end
+      end
+
+      context 'selecting one line of text' do
+        it 'copies as inline code' do
+          verify(
+            '.line[id="LC9"]',
+
+            '`raise RuntimeError, "System commands must be given as an array of strings"`'
+          )
+        end
+      end
+
+      context 'selecting multiple lines of text' do
+        it 'copies as a code block' do
+          verify(
+            '.line[id="LC9"], .line[id="LC10"]',
+
+            <<-GFM.strip_heredoc,
+              ```ruby
+                    raise RuntimeError, "System commands must be given as an array of strings"
+                  end
+              ```
+            GFM
+          )
+        end
+      end
+    end
+
+    context 'from a GFM code block' do
+      before do
+        visit namespace_project_blob_path(project.namespace, project, File.join('markdown', 'doc/api/users.md'))
+      end
+
+      context 'selecting one word of text' do
+        it 'copies as inline code' do
+          verify(
+            '.line[id="LC27"] .s2',
+
+            '`"bio"`'
+          )
+        end
+      end
+
+      context 'selecting one line of text' do
+        it 'copies as inline code' do
+          verify(
+            '.line[id="LC27"]',
+
+            '`"bio": null,`'
+          )
+        end
+      end
+
+      context 'selecting multiple lines of text' do
+        it 'copies as a code block with the correct language' do
+          verify(
+            '.line[id="LC27"], .line[id="LC28"]',
+
+            <<-GFM.strip_heredoc,
+              ```json
+                  "bio": null,
+                  "skype": "",
+              ```
+            GFM
+          )
+        end
+      end
+    end
+
+    def verify(selector, gfm)
+      html = html_for_selector(selector)
+      output_gfm = html_to_gfm(html, 'transformCodeSelection')
+      expect(output_gfm.strip).to eq(gfm.strip)
+    end
+  end
+
+  def html_for_selector(selector)
+    js = <<-JS.strip_heredoc
+      (function(selector) {
+        var els = document.querySelectorAll(selector);
+        var htmls = _.map(els, function(el) { return el.outerHTML; });
+        return htmls.join("\\n");
+      })("#{escape_javascript(selector)}")
+    JS
+    page.evaluate_script(js)
+  end
+
+  def html_to_gfm(html, transformer = 'transformGFMSelection')
+    js = <<-JS.strip_heredoc
+      (function(html) {
+        var transformer = window.gl.CopyAsGFM[#{transformer.inspect}];
+
+        var node = document.createElement('div');
+        node.innerHTML = html;
+
+        node = transformer(node);
+        if (!node) return null;
+
+        return window.gl.CopyAsGFM.nodeToGFM(node);
+      })("#{escape_javascript(html)}")
+    JS
+    page.evaluate_script(js)
+  end
 end

spec/helpers/blob_helper_spec.rb

@@ -19,12 +19,12 @@ describe BlobHelper do
   describe '#highlight' do
     it 'returns plaintext for unknown lexer context' do
       result = helper.highlight(blob_name, no_context_content)
-      expect(result).to eq(%[<pre class="code highlight"><code><span id="LC1" class="line">:type "assem"))</span></code></pre>])
+      expect(result).to eq(%[<pre class="code highlight"><code><span id="LC1" class="line" lang="">:type "assem"))</span></code></pre>])
     end
 
     it 'highlights single block' do
-      expected = %Q[<pre class="code highlight"><code><span id="LC1" class="line"><span class="p">(</span><span class="nb">make-pathname</span> <span class="ss">:defaults</span> <span class="nv">name</span></span>
-<span id="LC2" class="line"><span class="ss">:type</span> <span class="s">"assem"</span><span class="p">))</span></span></code></pre>]
+      expected = %Q[<pre class="code highlight"><code><span id="LC1" class="line" lang="common_lisp"><span class="p">(</span><span class="nb">make-pathname</span> <span class="ss">:defaults</span> <span class="nv">name</span></span>
+<span id="LC2" class="line" lang="common_lisp"><span class="ss">:type</span> <span class="s">"assem"</span><span class="p">))</span></span></code></pre>]
 
       expect(helper.highlight(blob_name, blob_content)).to eq(expected)
     end
@@ -43,10 +43,10 @@ describe BlobHelper do
       let(:blob_name) { 'test.diff' }
       let(:blob_content) { "+aaa\n+bbb\n- ccc\n ddd\n"}
       let(:expected) do
-        %q(<pre class="code highlight"><code><span id="LC1" class="line"><span class="gi">+aaa</span></span>
-<span id="LC2" class="line"><span class="gi">+bbb</span></span>
-<span id="LC3" class="line"><span class="gd">- ccc</span></span>
-<span id="LC4" class="line"> ddd</span></code></pre>)
+        %q(<pre class="code highlight"><code><span id="LC1" class="line" lang="diff"><span class="gi">+aaa</span></span>
+<span id="LC2" class="line" lang="diff"><span class="gi">+bbb</span></span>
+<span id="LC3" class="line" lang="diff"><span class="gd">- ccc</span></span>
+<span id="LC4" class="line" lang="diff"> ddd</span></code></pre>)
       end
 
       it 'highlights each line properly' do

spec/helpers/events_helper_spec.rb

@@ -28,7 +28,7 @@ describe EventsHelper do
 
     it 'displays the first line of a code block' do
       input = "```\nCode block\nwith two lines\n```"
-      expected = %r{<pre.+><code>Code block\.\.\.</code></pre>}
+      expected = %r{<pre.+><code><span class="line">Code block\.\.\.</span>\n</code></pre>}
 
       expect(helper.event_note(input)).to match(expected)
     end
@@ -55,10 +55,8 @@ describe EventsHelper do
     it 'preserves code color scheme' do
       input = "```ruby\ndef test\n  'hello world'\nend\n```"
       expected = '<pre class="code highlight js-syntax-highlight ruby">' \
-        "<code><span class=\"k\">def</span> <span class=\"nf\">test</span>\n" \
-        "  <span class=\"s1\">\'hello world\'</span>\n" \
-        "<span class=\"k\">end</span>\n" \
-        '</code></pre>'
+        "<code><span class=\"line\"><span class=\"k\">def</span> <span class=\"nf\">test</span>...</span>\n" \
+        "</code></pre>"
       expect(helper.event_note(input)).to eq(expected)
     end
 

spec/lib/banzai/filter/syntax_highlight_filter_spec.rb

@@ -6,21 +6,21 @@ describe Banzai::Filter::SyntaxHighlightFilter, lib: true do
   context "when no language is specified" do
     it "highlights as plaintext" do
       result = filter('<pre><code>def fun end</code></pre>')
-      expect(result.to_html).to eq('<pre class="code highlight js-syntax-highlight plaintext" lang="plaintext" v-pre="true"><code>def fun end</code></pre>')
+      expect(result.to_html).to eq('<pre class="code highlight js-syntax-highlight plaintext" lang="plaintext" v-pre="true"><code><span id="LC1" class="line" lang="plaintext">def fun end</span></code></pre>')
     end
   end
 
   context "when a valid language is specified" do
     it "highlights as that language" do
       result = filter('<pre><code class="ruby">def fun end</code></pre>')
-      expect(result.to_html).to eq('<pre class="code highlight js-syntax-highlight ruby" lang="ruby" v-pre="true"><code><span class="k">def</span> <span class="nf">fun</span> <span class="k">end</span></code></pre>')
+      expect(result.to_html).to eq('<pre class="code highlight js-syntax-highlight ruby" lang="ruby" v-pre="true"><code><span id="LC1" class="line" lang="ruby"><span class="k">def</span> <span class="nf">fun</span> <span class="k">end</span></span></code></pre>')
     end
   end
 
   context "when an invalid language is specified" do
     it "highlights as plaintext" do
       result = filter('<pre><code class="gnuplot">This is a test</code></pre>')
-      expect(result.to_html).to eq('<pre class="code highlight js-syntax-highlight plaintext" lang="plaintext" v-pre="true"><code>This is a test</code></pre>')
+      expect(result.to_html).to eq('<pre class="code highlight js-syntax-highlight plaintext" lang="plaintext" v-pre="true"><code><span id="LC1" class="line" lang="plaintext">This is a test</span></code></pre>')
     end
   end
 

spec/lib/gitlab/diff/highlight_spec.rb

@@ -22,19 +22,19 @@ describe Gitlab::Diff::Highlight, lib: true do
       end
 
       it 'highlights and marks unchanged lines' do
-        code = %Q{ <span id="LC7" class="line">  <span class="k">def</span> <span class="nf">popen</span><span class="p">(</span><span class="n">cmd</span><span class="p">,</span> <span class="n">path</span><span class="o">=</span><span class="kp">nil</span><span class="p">)</span></span>\n}
+        code = %Q{ <span id="LC7" class="line" lang="ruby">  <span class="k">def</span> <span class="nf">popen</span><span class="p">(</span><span class="n">cmd</span><span class="p">,</span> <span class="n">path</span><span class="o">=</span><span class="kp">nil</span><span class="p">)</span></span>\n}
 
         expect(subject[2].text).to eq(code)
       end
 
       it 'highlights and marks removed lines' do
-        code = %Q{-<span id="LC9" class="line">      <span class="k">raise</span> <span class="s2">"System commands must be given as an array of strings"</span></span>\n}
+        code = %Q{-<span id="LC9" class="line" lang="ruby">      <span class="k">raise</span> <span class="s2">"System commands must be given as an array of strings"</span></span>\n}
 
         expect(subject[4].text).to eq(code)
       end
 
       it 'highlights and marks added lines' do
-        code = %Q{+<span id="LC9" class="line">      <span class="k">raise</span> <span class="no"><span class='idiff left'>RuntimeError</span></span><span class="p"><span class='idiff'>,</span></span><span class='idiff right'> </span><span class="s2">"System commands must be given as an array of strings"</span></span>\n}
+        code = %Q{+<span id="LC9" class="line" lang="ruby">      <span class="k">raise</span> <span class="no"><span class='idiff left'>RuntimeError</span></span><span class="p"><span class='idiff'>,</span></span><span class='idiff right'> </span><span class="s2">"System commands must be given as an array of strings"</span></span>\n}
 
         expect(subject[5].text).to eq(code)
       end

spec/lib/gitlab/highlight_spec.rb

@@ -13,9 +13,9 @@ describe Gitlab::Highlight, lib: true do
     end
 
     it 'highlights all the lines properly' do
-      expect(lines[4]).to eq(%Q{<span id="LC5" class="line">  <span class="kp">extend</span> <span class="nb">self</span></span>\n})
-      expect(lines[21]).to eq(%Q{<span id="LC22" class="line">    <span class="k">unless</span> <span class="no">File</span><span class="p">.</span><span class="nf">directory?</span><span class="p">(</span><span class="n">path</span><span class="p">)</span></span>\n})
-      expect(lines[26]).to eq(%Q{<span id="LC27" class="line">    <span class="vi">@cmd_status</span> <span class="o">=</span> <span class="mi">0</span></span>\n})
+      expect(lines[4]).to eq(%Q{<span id="LC5" class="line" lang="ruby">  <span class="kp">extend</span> <span class="nb">self</span></span>\n})
+      expect(lines[21]).to eq(%Q{<span id="LC22" class="line" lang="ruby">    <span class="k">unless</span> <span class="no">File</span><span class="p">.</span><span class="nf">directory?</span><span class="p">(</span><span class="n">path</span><span class="p">)</span></span>\n})
+      expect(lines[26]).to eq(%Q{<span id="LC27" class="line" lang="ruby">    <span class="vi">@cmd_status</span> <span class="o">=</span> <span class="mi">0</span></span>\n})
     end
 
     describe 'with CRLF' do
@@ -26,7 +26,7 @@ describe Gitlab::Highlight, lib: true do
       end
 
       it 'strips extra LFs' do
-        expect(lines[0]).to eq("<span id=\"LC1\" class=\"line\">test  </span>")
+        expect(lines[0]).to eq("<span id=\"LC1\" class=\"line\" lang=\"plaintext\">test  </span>")
       end
     end
   end