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

- - Permalink to “Title” - - +
+

Title

+ + Permalink to “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

\nPermalink to “H1”
\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

\nPermalink to “H1”
\n' + ) + }) }) nest('tokens', test => {