Commit 4f461fd4 authored by Douwe Maan's avatar Douwe Maan

Merge branch 'rs-fix-highlighting' into 'master'

Syntax highlighting improvements

On the server side:

During development I would occasionally see SanitizationFilter sanitizing
the result of SyntaxHighlightFilter, even though its attributes were
whitelisted. This updates the `clean_spans` transformer to return the
whitelisted node as [suggested by the Sanitize docs](http://git.io/vZR8i).

On the client side:

- Makes the syntax_highlight JS more flexible
- Adds JS specs
- Simplifies highlighting of new notes
- Adds highlighting to Markdown preview

See merge request !1278
parents a5bb85f8 e3c97ede
...@@ -167,6 +167,7 @@ class @DropzoneInput ...@@ -167,6 +167,7 @@ class @DropzoneInput
dataType: "json" dataType: "json"
).success (data) -> ).success (data) ->
preview.html data.body preview.html data.body
preview.syntaxHighlight()
renderReferencedUsers data.references.users renderReferencedUsers data.references.users
......
...@@ -122,8 +122,9 @@ class @Notes ...@@ -122,8 +122,9 @@ class @Notes
# or skip if rendered # or skip if rendered
if @isNewNote(note) if @isNewNote(note)
@note_ids.push(note.id) @note_ids.push(note.id)
$('ul.main-notes-list').append(note.html) $('ul.main-notes-list').
$('.js-syntax-highlight').syntaxHighlight() append(note.html).
syntaxHighlight()
@initTaskList() @initTaskList()
### ###
......
# Syntax Highlighter
#
# Applies a syntax highlighting color scheme CSS class to any element with the # Applies a syntax highlighting color scheme CSS class to any element with the
# `js-syntax-highlight` class # `js-syntax-highlight` class
# #
...@@ -6,7 +8,13 @@ ...@@ -6,7 +8,13 @@
# <div class="js-syntax-highlight"></div> # <div class="js-syntax-highlight"></div>
# #
$.fn.syntaxHighlight = -> $.fn.syntaxHighlight = ->
if $(this).hasClass('js-syntax-highlight')
# Given the element itself, apply highlighting
$(this).addClass(gon.user_color_scheme) $(this).addClass(gon.user_color_scheme)
else
# Given a parent element, recurse to any of its applicable children
$children = $(this).find('.js-syntax-highlight')
$children.syntaxHighlight() if $children.length
$(document).on 'ready page:load', -> $(document).on 'ready page:load', ->
$('.js-syntax-highlight').syntaxHighlight() $('.js-syntax-highlight').syntaxHighlight()
...@@ -67,12 +67,16 @@ module Gitlab ...@@ -67,12 +67,16 @@ module Gitlab
def clean_spans def clean_spans
lambda do |env| lambda do |env|
return unless env[:node_name] == 'span' node = env[:node]
return unless env[:node].has_attribute?('class')
unless has_ancestor?(env[:node], 'pre') return unless node.name == 'span'
env[:node].remove_attribute('class') return unless node.has_attribute?('class')
unless has_ancestor?(node, 'pre')
node.remove_attribute('class')
end end
{ node_whitelist: [node] }
end end
end end
end end
......
#= require syntax_highlight
describe 'Syntax Highlighter', ->
stubUserColorScheme = (value) ->
window.gon ?= {}
window.gon.user_color_scheme = value
describe 'on a js-syntax-highlight element', ->
beforeEach ->
fixture.set('<div class="js-syntax-highlight"></div>')
it 'applies syntax highlighting', ->
stubUserColorScheme('monokai')
$('.js-syntax-highlight').syntaxHighlight()
expect($('.js-syntax-highlight')).toHaveClass('monokai')
describe 'on a parent element', ->
beforeEach ->
fixture.set """
<div class="parent">
<div class="js-syntax-highlight"></div>
<div class="foo"></div>
<div class="js-syntax-highlight"></div>
</div>
"""
it 'applies highlighting to all applicable children', ->
stubUserColorScheme('monokai')
$('.parent').syntaxHighlight()
expect($('.parent, .foo')).not.toHaveClass('monokai')
expect($('.monokai').length).toBe(2)
it 'prevents an infinite loop when no matches exist', ->
fixture.set('<div></div>')
highlight = -> $('div').syntaxHighlight()
expect(highlight).not.toThrow()
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