Support wrapping output of linkAfterHeader

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

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. `['<div class="wrapper">', '</div>']`.                           | `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: ['<div class="wrapper">', '</div>']
   })
 })
 ```
 
 ```html
-<h2 id="title">Title</h2>
-<a class="header-anchor" href="#title">
-  <span class="visually-hidden">Permalink to “Title”</span>
-  <span aria-hidden="true">#</span>
-</a>
+<div class="wrapper">
+  <h2 id="title">Title</h2>
+  <a class="header-anchor" href="#title">
+    <span class="visually-hidden">Permalink to “Title”</span>
+    <span aria-hidden="true">#</span>
+  </a>
+</div>
 ```
 
 By using a visually hidden element for the assistive text, we make sure

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
 })

test.js

@@ -383,6 +383,20 @@ nest('permalink.linkAfterHeader', test => {
       '<div class="wrapper">\n<h1 id="h1" tabindex="-1">H1</h1>\n<a class="header-anchor" href="#h1"><span class="visually-hidden">Permalink to “H1”</span> <span aria-hidden="true">#</span></a></div>\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: ['<div class="wrapper">', '</div>']
+        })
+      }).render('# H1'),
+      '<div class="wrapper">\n<h1 id="h1" tabindex="-1">H1</h1>\n<a class="header-anchor" href="#h1"><span class="visually-hidden">Permalink to “H1”</span> <span aria-hidden="true">#</span></a></div>\n'
+    )
+  })
 })
 
 nest('tokens', test => {