Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
b5f618bf
Commit
b5f618bf
authored
Oct 06, 2019
by
Guillaume Grossetie
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Enable image link and lazy loading
parent
69d55850
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
60 additions
and
39 deletions
+60
-39
changelogs/unreleased/30533-asciidoc-image-link-lazy-loading.yml
...ogs/unreleased/30533-asciidoc-image-link-lazy-loading.yml
+5
-0
lib/banzai/pipeline/ascii_doc_pipeline.rb
lib/banzai/pipeline/ascii_doc_pipeline.rb
+2
-0
spec/lib/gitlab/asciidoc_spec.rb
spec/lib/gitlab/asciidoc_spec.rb
+53
-39
No files found.
changelogs/unreleased/30533-asciidoc-image-link-lazy-loading.yml
0 → 100644
View file @
b5f618bf
---
title
:
Enable image link and lazy loading in AsciiDoc documents
merge_request
:
18164
author
:
Guillaume Grossetie
type
:
fixed
lib/banzai/pipeline/ascii_doc_pipeline.rb
View file @
b5f618bf
...
...
@@ -11,6 +11,8 @@ module Banzai
Filter
::
ExternalLinkFilter
,
Filter
::
PlantumlFilter
,
Filter
::
ColorFilter
,
Filter
::
ImageLazyLoadFilter
,
Filter
::
ImageLinkFilter
,
Filter
::
AsciiDocPostProcessingFilter
]
end
...
...
spec/lib/gitlab/asciidoc_spec.rb
View file @
b5f618bf
...
...
@@ -58,7 +58,7 @@ module Gitlab
},
'image with onerror'
=>
{
input:
'image:https://localhost.com/image.png[Alt text" onerror="alert(7)]'
,
output:
"<div>
\n
<p><span><
img src=
\"
https://localhost.com/image.png
\"
alt='Alt text
\"
onerror=
\"
alert(7)'
></span></p>
\n
</div>"
output:
"<div>
\n
<p><span><
a class=
\"
no-attachment-icon
\"
href=
\"
https://localhost.com/image.png
\"
target=
\"
_blank
\"
rel=
\"
noopener noreferrer
\"
><img src=
\"
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
\"
alt='Alt text
\"
onerror=
\"
alert(7)' class=
\"
lazy
\"
data-src=
\"
https://localhost.com/image.png
\"
></a
></span></p>
\n
</div>"
},
'fenced code with inline script'
=>
{
input:
'```mypre"><script>alert(3)</script>'
,
...
...
@@ -73,6 +73,20 @@ module Gitlab
end
end
context
"images"
do
it
"does lazy load and link image"
do
input
=
'image:https://localhost.com/image.png[]'
output
=
"<div>
\n
<p><span><a class=
\"
no-attachment-icon
\"
href=
\"
https://localhost.com/image.png
\"
target=
\"
_blank
\"
rel=
\"
noopener noreferrer
\"
><img src=
\"
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
\"
alt=
\"
image
\"
class=
\"
lazy
\"
data-src=
\"
https://localhost.com/image.png
\"
></a></span></p>
\n
</div>"
expect
(
render
(
input
,
context
)).
to
include
(
output
)
end
it
"does not automatically link image if link is explicitly defined"
do
input
=
'image:https://localhost.com/image.png[link=https://gitlab.com]'
output
=
"<div>
\n
<p><span><a href=
\"
https://gitlab.com
\"
rel=
\"
nofollow noreferrer noopener
\"
target=
\"
_blank
\"
><img src=
\"
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
\"
alt=
\"
image
\"
class=
\"
lazy
\"
data-src=
\"
https://localhost.com/image.png
\"
></a></span></p>
\n
</div>"
expect
(
render
(
input
,
context
)).
to
include
(
output
)
end
end
context
'with admonition'
do
it
'preserves classes'
do
input
=
<<~
ADOC
...
...
@@ -107,7 +121,7 @@ module Gitlab
ADOC
output
=
<<~
HTML
<h2>Title</h2>
<h2>Title</h2>
HTML
expect
(
render
(
input
,
context
)).
to
include
(
output
.
strip
)
...
...
@@ -149,15 +163,15 @@ module Gitlab
ADOC
output
=
<<~
HTML
<div>
<p>This paragraph has a footnote.<sup>[<a id="_footnoteref_1" href="#_footnotedef_1" title="View footnote.">1</a>]</sup></p>
</div>
<div>
<hr>
<div id="_footnotedef_1">
<a href="#_footnoteref_1">1</a>. This is the text of the footnote.
</div>
</div>
<div>
<p>This paragraph has a footnote.<sup>[<a id="_footnoteref_1" href="#_footnotedef_1" title="View footnote.">1</a>]</sup></p>
</div>
<div>
<hr>
<div id="_footnotedef_1">
<a href="#_footnoteref_1">1</a>. This is the text of the footnote.
</div>
</div>
HTML
expect
(
render
(
input
,
context
)).
to
include
(
output
.
strip
)
...
...
@@ -183,34 +197,34 @@ module Gitlab
ADOC
output
=
<<~
HTML
<h1>Title</h1>
<div>
<h2 id="user-content-first-section">
<a class="anchor" href="#user-content-first-section"></a>First section</h2>
<div>
<div>
<p>This is the first section.</p>
</div>
</div>
</div>
<div>
<h2 id="user-content-second-section">
<a class="anchor" href="#user-content-second-section"></a>Second section</h2>
<div>
<div>
<p>This is the second section.</p>
</div>
</div>
</div>
<div>
<h2 id="user-content-thunder">
<a class="anchor" href="#user-content-thunder"></a>Thunder ⚡ !</h2>
<div>
<div>
<p>This is the third section.</p>
</div>
</div>
</div>
<h1>Title</h1>
<div>
<h2 id="user-content-first-section">
<a class="anchor" href="#user-content-first-section"></a>First section</h2>
<div>
<div>
<p>This is the first section.</p>
</div>
</div>
</div>
<div>
<h2 id="user-content-second-section">
<a class="anchor" href="#user-content-second-section"></a>Second section</h2>
<div>
<div>
<p>This is the second section.</p>
</div>
</div>
</div>
<div>
<h2 id="user-content-thunder">
<a class="anchor" href="#user-content-thunder"></a>Thunder ⚡ !</h2>
<div>
<div>
<p>This is the third section.</p>
</div>
</div>
</div>
HTML
expect
(
render
(
input
,
context
)).
to
include
(
output
.
strip
)
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment