Commit 7887a3da authored by Jacob Schatz's avatar Jacob Schatz
Browse files

Merge branch 'code-blocks-vue-pre' into 'master'

Adds v-pre to code blocks in comments

## What does this MR do?

Allows users to comment on discussions with code that contains `{{`

Previously because of the discussion part being a Vue app it was being converted by Vue & therefore creating JS errors & the code not displaying correctly. This adds `v-pre` onto the code element to allow the user to write code that would contain `{{`

## What are the relevant issue numbers?

Closes #22911

See merge request !6674
......@@ -15,6 +15,7 @@ v 8.13.0 (unreleased)
- Simplify Mentionable concern instance methods
- Fix permission for setting an issue's due date
- Expose expires_at field when sharing project on API
- Fix VueJS template tags being rendered in code comments
- Fix issue with page scrolling to top when closing or pinning sidebar (lukehowell)
- Allow the Koding integration to be configured through the API
- Added soft wrap button to repository file/blob editor
......
......@@ -25,7 +25,7 @@ def customize_whitelist(whitelist)
return if customized?(whitelist[:transformers])
# Allow code highlighting
whitelist[:attributes]['pre'] = %w(class)
whitelist[:attributes]['pre'] = %w(class v-pre)
whitelist[:attributes]['span'] = %w(class)
# Allow table alignment
......
......@@ -30,7 +30,7 @@ def highlight_node(node)
# users can still access an issue/comment/etc.
end
highlighted = %(<pre class="#{css_classes}"><code>#{code}</code></pre>)
highlighted = %(<pre class="#{css_classes}" v-pre="true"><code>#{code}</code></pre>)
# Extracted to a method to measure it
replace_parent_pre_element(node, highlighted)
......
......@@ -240,6 +240,18 @@
is_expected.to have_css('.notes_holder .note', count: 1)
is_expected.to have_button('Reply...')
end
it 'adds code to discussion' do
click_button 'Reply...'
page.within(first('.js-discussion-note-form')) do
fill_in 'note[note]', with: '```{{ test }}```'
click_button('Comment')
end
expect(page).to have_content('{{ test }}')
end
end
end
end
......
......@@ -6,21 +6,21 @@
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"><code>def fun end</code></pre>')
expect(result.to_html).to eq('<pre class="code highlight js-syntax-highlight plaintext" v-pre="true"><code>def fun end</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"><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" v-pre="true"><code><span class="k">def</span> <span class="nf">fun</span> <span class="k">end</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"><code>This is a test</code></pre>')
expect(result.to_html).to eq('<pre class="code highlight js-syntax-highlight plaintext" v-pre="true"><code>This is a test</code></pre>')
end
end
......@@ -31,7 +31,7 @@
it "highlights as plaintext" do
result = filter('<pre><code class="ruby">This is a test</code></pre>')
expect(result.to_html).to eq('<pre class="code highlight"><code>This is a test</code></pre>')
expect(result.to_html).to eq('<pre class="code highlight" v-pre="true"><code>This is a test</code></pre>')
end
end
end
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