diff --git a/CHANGELOG.md b/CHANGELOG.md
index 76f1ec8..65c4965 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
## [Unreleased]
+* Support wrapping output of `linkAfterHeader`. ([#100], [#110])
## [8.4.1] - 2021-10-11
* Attempt to fix `npm publish` that didn't publish previous version.
@@ -305,5 +306,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
[#103]: https://github.com/valeriangalliat/markdown-it-anchor/issues/103
[#106]: https://github.com/valeriangalliat/markdown-it-anchor/pull/106
[#107]: https://github.com/valeriangalliat/markdown-it-anchor/issues/107
+[#110]: https://github.com/valeriangalliat/markdown-it-anchor/issues/110
[`6fcc502`]: https://github.com/valeriangalliat/markdown-it-anchor/commit/6fcc50233d593458aa883e5b515cb8311114555c
diff --git a/README.md b/README.md
index b480a86..5ea9cd1 100644
--- a/README.md
+++ b/README.md
@@ -286,6 +286,7 @@ text from the visual experience.
| `visuallyHiddenClass` | The class you use to make an element visually hidden. | `undefined`, required for `visually-hidden` style |
| `space` | Add a space between the assistive text and the permalink symbol. | `true` |
| `placement` | Placement of the permalink symbol relative to the assistive text, can be `before` or `after` the header. | `after` |
+| `wrapper` | Opening and closing wrapper string, e.g. `['
', '
']`. | `null` |
| | See [common options](#common-options). | |
```js
@@ -296,17 +297,20 @@ md.use(anchor, {
permalink: anchor.permalink.linkAfterHeader({
style: 'visually-hidden',
assistiveText: title => `Permalink to “${title}”`,
- visuallyHiddenClass: 'visually-hidden'
+ visuallyHiddenClass: 'visually-hidden',
+ wrapper: ['', '
']
})
})
```
```html
-Title
-
+
+
Title
+
+
```
By using a visually hidden element for the assistive text, we make sure
diff --git a/permalink.js b/permalink.js
index 3e5bea6..7372fa8 100644
--- a/permalink.js
+++ b/permalink.js
@@ -207,10 +207,21 @@ export const linkAfterHeader = makePermalink((slug, opts, anchorOpts, state, idx
]
state.tokens.splice(idx + 3, 0, ...linkTokens)
+
+ if (opts.wrapper) {
+ state.tokens.splice(idx, 0, Object.assign(new state.Token('html_block', '', 0), {
+ content: opts.wrapper[0] + '\n'
+ }))
+
+ state.tokens.splice(idx + 3 + linkTokens.length + 1, 0, Object.assign(new state.Token('html_block', '', 0), {
+ content: opts.wrapper[1] + '\n'
+ }))
+ }
})
Object.assign(linkAfterHeader.defaults, {
style: 'visually-hidden',
space: true,
- placement: 'after'
+ placement: 'after',
+ wrapper: null
})
diff --git a/test.js b/test.js
index b07c527..254dcf8 100644
--- a/test.js
+++ b/test.js
@@ -383,6 +383,20 @@ nest('permalink.linkAfterHeader', test => {
'\n
H1
\n\n'
)
})
+
+ test('custom native wrapper', t => {
+ t.is(
+ md().use(anchor, {
+ permalink: anchor.permalink.linkAfterHeader({
+ style: 'visually-hidden',
+ assistiveText: title => `Permalink to “${title}”`,
+ visuallyHiddenClass: 'visually-hidden',
+ wrapper: ['', '
']
+ })
+ }).render('# H1'),
+ '\n
H1
\n\n'
+ )
+ })
})
nest('tokens', test => {