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
This commit is contained in:
commit
4f461fd45f
|
@ -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
|
||||||
# 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()
|
||||||
|
|
||||||
###
|
###
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
# 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 @@
|
||||||
# <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
|
||||||
|
|
||||||
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')
|
||||||
end
|
|
||||||
|
unless has_ancestor?(node, 'pre')
|
||||||
|
node.remove_attribute('class')
|
||||||
|
end
|
||||||
|
|
||||||
|
{ node_whitelist: [node] }
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
|
@ -0,0 +1,42 @@
|
||||||
|
#= 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()
|
Loading…
Reference in New Issue