Skip to content
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

Adding TOC UI #3352

Merged
merged 4 commits into from
Dec 23, 2019
Merged

Adding TOC UI #3352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fe2db1c
adding TOC UI
sudomf Nov 11, 2019
07b4bc8
configuring a div wrapper for TOC plugin to use overflow-y in <ul> an…
sudomf Nov 29, 2019
9c75a04
refactoring to use the new .markdownIt-TOC-wrapper div
sudomf Nov 29, 2019
04f1a82
rebuilding test snapshots
sudomf Nov 29, 2019
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
72 changes: 69 additions & 3 deletions browser/components/markdown.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -444,6 +444,44 @@ pre.fence
color $ui-text-color
background-color $ui-tag-backgroundColor

.markdownIt-TOC-wrapper
list-style none
position fixed
right 0
top 0
margin-left 15px
z-index 1000
transition transform .2s ease-in-out
transform translateX(100%)

.markdownIt-TOC
display block
max-height 90vh
overflow-y auto
padding 25px
padding-left 38px

&,
&:before
background-color $ui-dark-backgroundColor
color: $ui-dark-text-color

&:hover
transform translateX(-15px)

&:before
content 'TOC'
position absolute
width 60px
height 30px
top 60px
left -29px
display flex
align-items center
justify-content center
transform-origin top left
transform rotate(-90deg)

themeDarkBackground = darken(#21252B, 10%)
themeDarkText = #f9f9f9
themeDarkBorder = lighten(themeDarkBackground, 20%)
Expand Down Expand Up @@ -511,6 +549,14 @@ body[data-theme="dark"]
color $ui-dark-text-color
background-color $ui-dark-tag-backgroundColor

.markdownIt-TOC-wrapper
&,
&:before
background-color darken(themeDarkBackground, 5%)
color themeDarkText


themeSolarizedDarkBackground = $ui-solarized-dark-noteDetail-backgroundColor
themeSolarizedDarkTableOdd = $ui-solarized-dark-noteDetail-backgroundColor
themeSolarizedDarkTableEven = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%)
themeSolarizedDarkTableHead = themeSolarizedDarkTableEven
Expand All @@ -519,7 +565,7 @@ themeSolarizedDarkTableBorder = themeDarkBorder
body[data-theme="solarized-dark"]
color $ui-solarized-dark-text-color
border-color themeDarkBorder
background-color $ui-solarized-dark-noteDetail-backgroundColor
background-color themeSolarizedDarkBackground
table
thead
tr
Expand Down Expand Up @@ -554,6 +600,13 @@ body[data-theme="solarized-dark"]
color $ui-solarized-dark-button--active-color
background-color $ui-solarized-dark-button-backgroundColor

.markdownIt-TOC-wrapper
&,
&:before
background-color darken(themeSolarizedDarkBackground, 15%)
color themeDarkText

themeMonokaiBackground = $ui-monokai-noteDetail-backgroundColor
themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor
themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%)
themeMonokaiTableHead = themeMonokaiTableEven
Expand All @@ -562,7 +615,7 @@ themeMonokaiTableBorder = themeDarkBorder
body[data-theme="monokai"]
color $ui-monokai-text-color
border-color themeDarkBorder
background-color $ui-monokai-noteDetail-backgroundColor
background-color themeMonokaiBackground
table
thead
tr
Expand Down Expand Up @@ -600,6 +653,13 @@ body[data-theme="monokai"]
color $ui-monokai-button--active-color
background-color $ui-monokai-button-backgroundColor

.markdownIt-TOC-wrapper
&,
&:before
background-color darken(themeMonokaiBackground, 15%)
color themeDarkText

themeDraculaBackground = $ui-dracula-noteDetail-backgroundColor
themeDraculaTableOdd = $ui-dracula-noteDetail-backgroundColor
themeDraculaTableEven = darken($ui-dracula-noteDetail-backgroundColor, 10%)
themeDraculaTableHead = themeDraculaTableEven
Expand All @@ -608,7 +668,7 @@ themeDraculaTableBorder = themeDarkBorder
body[data-theme="dracula"]
color $ui-dracula-text-color
border-color themeDarkBorder
background-color $ui-dracula-noteDetail-backgroundColor
background-color themeDraculaBackground
table
thead
tr
Expand Down Expand Up @@ -645,3 +705,9 @@ body[data-theme="dracula"]
.prev, .next
color $ui-dracula-button--active-color
background-color $ui-dracula-button-backgroundColor

.markdownIt-TOC-wrapper
&,
&:before
background-color darken(themeDraculaBackground, 15%)
color themeDarkText
17 changes: 12 additions & 5 deletions browser/lib/markdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,12 +128,19 @@ class Markdown {
this.md.use(require('markdown-it-abbr'))
this.md.use(require('markdown-it-sub'))
this.md.use(require('markdown-it-sup'))
this.md.use(markdownItTocAndAnchor, {
toc: true,
tocPattern: /\[TOC\]/i,
anchorLink: false,
appendIdToHeading: false

this.md.use(md => {
markdownItTocAndAnchor(md, {
toc: true,
tocPattern: /\[TOC\]/i,
anchorLink: false,
appendIdToHeading: false
})

md.renderer.rules.toc_open = () => '<div class="markdownIt-TOC-wrapper">'
md.renderer.rules.toc_close = () => '</div>'
})

this.md.use(require('./markdown-it-deflist'))
this.md.use(require('./markdown-it-frontmatter'))

Expand Down
39 changes: 2 additions & 37 deletions tests/lib/snapshots/markdown-test.js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`<p data-line="1"><ul class="markdownIt-TOC">␊
`<p data-line="1"><div class="markdownIt-TOC-wrapper"><ul class="markdownIt-TOC">␊
<li><a href="#H1">H1</a>␊
<ul>␊
<li><a href="#H2">H2</a>␊
Expand All @@ -98,7 +98,7 @@ Generated by [AVA](https://ava.li).
</ul>␊
</li>␊
</ul>␊
</p>␊
</div></p>␊
<h1 id="H1" data-line="2">H1</h1>␊
<h2 id="H2" data-line="3">H2</h2>␊
<h3 id="H3" data-line="4">H3</h3>␊
Expand Down Expand Up @@ -226,39 +226,4 @@ Generated by [AVA](https://ava.li).
> Snapshot 2

`<p data-line="0">This is a &quot;QUOTE&quot;.</p>␊


## Markdown.render() should render PlantUML Ditaa correctly
Copy link
Member

Choose a reason for hiding this comment

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

Why do you have to remove these tests?

Copy link
Contributor Author

@sudomf sudomf Nov 29, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

I just deleted the snapshots, to regenerate it. Do I need to do it in another way?

Copy link
Member

Choose a reason for hiding this comment

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

That's strange, somehow it's still pass the test

Copy link
Member

Choose a reason for hiding this comment

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

How did you deleted them?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

a normal delete, direct from the IDE

Copy link
Member

Choose a reason for hiding this comment

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

Oh they have been moved to the top of the file 😄 look good to me then 😄

Copy link
Contributor Author

Choose a reason for hiding this comment

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

heheh troll


> Snapshot 1

`<img src="http://www.plantuml.com/plantuml/png/SoWkIImgISaiIKpaqjQ50cq51GLj93Q2mrMZ00NQO3cmHX3RJW4cKmDI4v9QKQ805a8nfyObCp6zA34NgCObFxiqDpMl1AIcHj4tCJqpLH5i18evG52TKbk3B8og1kmC0cvMKB1Im0NYkA2ckMRcANWabgQbvYau5YMbPfP0p4UOWmcqkHnIyrB0GG00" alt="uml diagram" />␊
`

## Markdown.render() should render PlantUML Gantt correctly

> Snapshot 1

`<img src="http://www.plantuml.com/plantuml/svg/SoWkIImgIK_CAodXYWueoY_9BwaiI5L8IItEJC-BLSX9B2ufLZ0qLKX9h2pcYWv9BIvHA82fWaiRu906crsia5YYW6cqUh52QbuAbmEG0DiE0000" alt="uml diagram" />␊
`

## Markdown.render() should render PlantUML MindMaps correctly

> Snapshot 1

`<img src="http://www.plantuml.com/plantuml/svg/JOzD3e8m44Rtd6BMtNW192IM5I29HEDsAbKdeLD2MvNRIsjCMCsRlFd9LpgFipV4Wy4f4o2r8kHC23Yhm3wi9A0X3XzeYNrgwx1H6wvb1KTjqtRJoYhMtexBSAqJUescwoEUq4tn3xp9Fm7XfUS5HiiFO3Gw7SjT4QUCkkKxLy2-WAvl3rkrtEclBdOCXcnMwZN7ByiN" alt="uml diagram" />␊
`

## Markdown.render() should render PlantUML Umls correctly

> Snapshot 1

`<img src="http://www.plantuml.com/plantuml/svg/LOzD2eCm44RtESMtj0jx01V5E_G4Gvngo2_912gbTsz4LBfylCV7p5Y4ibJlbEENG2AocHV1P39hCJ6eOar8bCaZaROqyrDMnzWqXTcn8YqnGzSYqNC-q76sweoW5zOsLi57uMpHz-WESslY0jmVw1AjdaE30IPeLoVUceLTslrL3-2tS9ZA_qZRtm_vgh7PzkOF" alt="uml diagram" />␊
`

## Markdown.render() should render PlantUML WBS correctly

> Snapshot 1

`<img src="http://www.plantuml.com/plantuml/svg/ZP2_JiD03CRtFeNdRF04fR140gdGeREv-z8plVYYimFYxSabKbaxsR9-ylTdRyxLVpvjrz5XDb6OqR6MqEPRYSXPz4BdmsdNTVJAiuP4da1JBLy8lbmxUYxZbE6Wa_CLgUI8IXymS0rf9NeL5yxKDt24EhiKfMDcRNzVO79HcX8RLdvLfZBGa_KtFx2RKcpK7TZ3dTpZfWgskMAZ9jIXr94rW4PubM1RbBZOb-6NtcS9LpgBjlj_1w9QldbPjZHxQ5pg_GC0" alt="uml diagram" />␊
`
Binary file modified tests/lib/snapshots/markdown-test.js.snap
View file
Open in desktop
Binary file not shown.