Skip to content

feat: Support hide lines in remark-embed-snippet #6084

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 41 commits into from
Dec 31, 2018
Merged

feat: Support hide lines in remark-embed-snippet #6084

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
ccb6f62
Support hide lines
washingtonsoares Jun 21, 2018
7da3162
Update README
washingtonsoares Jun 22, 2018
a60891e
Write test case
washingtonsoares Jun 22, 2018
a280b94
Update screenshot example URL
washingtonsoares Jun 25, 2018
92fcba3
Create rule for hidden and highlighted rows do not overlap
washingtonsoares Jun 27, 2018
69fdee7
Show file name when throw Error
washingtonsoares Jun 27, 2018
a7bdb18
Update message error
washingtonsoares Jun 27, 2018
7324d39
Wording improvements
washingtonsoares Jul 24, 2018
688c903
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Sep 17, 2018
63f588f
Update test snapshot
washingtonsoares Sep 17, 2018
6b37cdf
Add support to hideline-next-line
washingtonsoares Sep 17, 2018
df80eed
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Sep 18, 2018
3b5a881
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Sep 18, 2018
0e62ca2
Add blank lines in test case
washingtonsoares Sep 24, 2018
5ecf804
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Sep 24, 2018
4cd6ab7
Refactoring hideline-range test cases
washingtonsoares Sep 26, 2018
65ef8b9
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Sep 26, 2018
986d615
Remove console.log
washingtonsoares Sep 26, 2018
8f2a727
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Sep 27, 2018
8407607
Update README
washingtonsoares Oct 6, 2018
ecaa0f6
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Oct 6, 2018
bb0f3f4
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Oct 8, 2018
0f0a377
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Oct 8, 2018
8eb4dbb
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Oct 9, 2018
c92a6e4
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Oct 11, 2018
66eaa65
Merge remote-tracking branch 'origin/master' into pr6084
pieh Dec 7, 2018
c42ba96
update gitignore to use pattern
pieh Dec 8, 2018
0a44d6c
gatsby-remark-prismjs: add `hide` directives
pieh Dec 8, 2018
53c4fae
wip
pieh Dec 12, 2018
190ec0b
Merge branch 'master' into 6084
m-allanson Dec 18, 2018
7341226
Add language tags to code fences
m-allanson Dec 18, 2018
98cef72
Fix example syntax
m-allanson Dec 18, 2018
d9e38d7
Add demo page to the using-remark example site
m-allanson Dec 18, 2018
353f078
Fix missing layout
m-allanson Dec 18, 2018
9d6e3aa
Reverse order to start with hello world, then on to specific subjects
m-allanson Dec 18, 2018
f727d86
Ignore errors for missing files
m-allanson Dec 18, 2018
c676e15
Port tests from remark-embed-snippet to remark-prismjs
m-allanson Dec 19, 2018
0349dd4
Merge branch 'master' into 6084
m-allanson Dec 19, 2018
4062fb1
Fix lint errors
m-allanson Dec 19, 2018
2a1b01c
Re-enable errors for missing files
m-allanson Dec 19, 2018
4e3c607
Add info on hiding lines to the gatsby-remark-prismjs readme
m-allanson Dec 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 10 additions & 8 deletions packages/gatsby-remark-embed-snippet/src/__tests__/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -632,15 +632,15 @@ Object {
},
"type": "html",
"value": "<div class=\\"gatsby-highlight\\">
<pre class=\\"language-jsx\\"><code><span class=\\"gatsby-highlight-code-line\\">ReactDOM<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">render</span><span class=\\"token punctuation\\">(</span>
</span><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>div</span><span class=\\"token punctuation\\">></span></span>
<pre class=\\"language-jsx\\"><code>ReactDOM<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">render</span><span class=\\"token punctuation\\">(</span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>div</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>ul</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"gatsby-highlight-code-line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>li</span><span class=\\"token punctuation\\">></span></span>Not hidden<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>li</span><span class=\\"token punctuation\\">></span></span>
</span><span class=\\"gatsby-highlight-code-line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>li</span><span class=\\"token punctuation\\">></span></span>Not hidden<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>li</span><span class=\\"token punctuation\\">></span></span>
</span><span class=\\"gatsby-highlight-code-line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>li</span><span class=\\"token punctuation\\">></span></span>Not hidden<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>li</span><span class=\\"token punctuation\\">></span></span>
</span><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>ul</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>div</span><span class=\\"token punctuation\\">></span></span><span class=\\"token punctuation\\">,</span>
document<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">getElementById</span><span class=\\"token punctuation\\">(</span><span class=\\"token string\\">'root'</span><span class=\\"token punctuation\\">)</span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>li</span><span class=\\"token punctuation\\">></span></span>Not hidden and highlighted<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>li</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>li</span><span class=\\"token punctuation\\">></span></span>Not hidden and highlighted<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>li</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"gatsby-highlight-code-line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>li</span><span class=\\"token punctuation\\">></span></span>Not hidden and highlighted<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>li</span><span class=\\"token punctuation\\">></span></span>
</span><span class=\\"gatsby-highlight-code-line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>ul</span><span class=\\"token punctuation\\">></span></span>
</span><span class=\\"gatsby-highlight-code-line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>div</span><span class=\\"token punctuation\\">></span></span><span class=\\"token punctuation\\">,</span>
</span>document<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">getElementById</span><span class=\\"token punctuation\\">(</span><span class=\\"token string\\">'root'</span><span class=\\"token punctuation\\">)</span>
<span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span></code></pre>
</div>",
},
Expand Down Expand Up @@ -996,6 +996,8 @@ notHighlighted <span class=\\"token operator\\">=</span> <span class=\\"token nu
}
`;

exports[`gatsby-remark-embed-snippet JavaScript files should throw error when hidden and highlighted lines overlap 1`] = `"There can be no intersection between hidden lines and highlighted lines"`;

exports[`gatsby-remark-embed-snippet Markdown files should extract the correct Prism language 1`] = `
Object {
"children": Array [
Expand Down
42 changes: 38 additions & 4 deletions packages/gatsby-remark-embed-snippet/src/__tests__/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -473,15 +473,15 @@ describe(`gatsby-remark-embed-snippet`, () => {
fs.readFileSync.mockReturnValue(
`
// hideline-range{1-2,9-11,16}
// highlight-range{1,4-6}
// highlight-range{6-8}
import React from 'react'
import { render } from "react-dom"
ReactDOM.render(
<div>
<ul>
<li>Not hidden</li>
<li>Not hidden</li>
<li>Not hidden</li>
<li>Not hidden and highlighted</li>
<li>Not hidden and highlighted</li>
<li>Not hidden and highlighted</li>
<li>Hidden</li>
<li>Hidden</li>
<li>Hidden</li>
Expand All @@ -506,6 +506,40 @@ describe(`gatsby-remark-embed-snippet`, () => {

expect(transformed).toMatchSnapshot()
})

it(`should throw error when hidden and highlighted lines overlap`, () => {
fs.readFileSync.mockReturnValue(
`
// hideline-range{1-2,6}
// highlight-range{5-7,9}
import React from 'react'
import { render } from "react-dom"
ReactDOM.render(
<div>
<ul>
<li>Maybe hidden</li>
</ul>
</div>,
// highlight-next-line
document.getElementById('root')
);
`
.replace(/^ +/gm, ``)
.trim()
)

const markdownAST = remark.parse(`\`embed:hello-world.js\``)
try {
plugin(
{ markdownAST },
{
directory: `examples`,
}
)
} catch (e) {
expect(e).toMatchSnapshot()
}
})
})

describe(`Markdown files`, () => {
Expand Down
14 changes: 13 additions & 1 deletion packages/gatsby-remark-embed-snippet/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,19 @@ module.exports = (

return returnValue
})
.filter((line, index) => !hiddenLines.includes(index + 1)) // hide line numbers are 1-based.
.filter((line, index) => {
// (Hide and highlight line numbers are 1-based).
const isHiddenLine = hiddenLines.includes(index + 1)
const isHighlightedLine = highlightLines.includes(index + 1)
// check if hidden and highlighted lines overlap
const hasIntersection = isHiddenLine && isHighlightedLine

if (hasIntersection) {
throw `There can be no intersection between hidden lines and highlighted lines`
Copy link
Contributor

@pieh pieh Jun 27, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we display path to file that is offender here?

Copy link
Contributor Author

@washingtonsoares washingtonsoares Jun 27, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It sounds like a good idea.

}

return !isHiddenLine
})
.map((line, index) => {
if (line.includes(`highlight-line`)) {
// Mark this line for highlighting.
Expand Down