Block anchors

src/transform/plugins/block-anchor/block-anchor.ts

@@ -0,0 +1,49 @@
+import StateCore from 'markdown-it/lib/rules_core/state_core';
+import Token from 'markdown-it/lib/token';
+
+const pattern = /^{%[^\S\r\n]*anchor[^\S\r\n]+([\w-]+)[^\S\r\n]*%}/;
+export const TOKEN_NAME = 'anchor';
+
+function matchOpenToken(tokens: Token[], i: number) {
+    return (
+        tokens[i].type === 'paragraph_open' &&
+        tokens[i + 1].type === 'inline' &&
+        tokens[i + 2].type === 'paragraph_close' &&
+        tokens[i + 1].children?.length === 1 &&
+        tokens[i + 1].children?.[0].type === 'text' &&
+        pattern.exec(tokens[i + 1].children?.[0].content as string)
+    );
+}
+
+function createAnchorToken(state: StateCore, anchorId: string, position: number) {
+    const token = new state.Token(TOKEN_NAME, '', 0);
+    token.map = state.tokens[position].map;
+    token.markup = state.tokens[position].markup;
+    token.content = anchorId;
+    return token;
+}
+
+export function replaceTokens(state: StateCore) {
+    const blockTokens = state.tokens;
+    // i hate the idea of splicing the array while we're iterating over it
+    // so first lets find all the places where we will need to splice it and then actually do the splicing
+    const splicePointsMap: Map<number, string> = new Map();
+    for (let i = 0; i < blockTokens.length; i++) {
+        const match = matchOpenToken(blockTokens, i);
+
+        if (!match) {
+            continue;
+        }
+
+        splicePointsMap.set(i, match[1]);
+    }
+    splicePointsMap.forEach((anchorId, position) => {
+        blockTokens.splice(position, 3, createAnchorToken(state, anchorId, position));
+    });
+}
+
+export function renderTokens(tokens: Token[], idx: number) {
+    const token = tokens[idx];
+    const id = token.content;
+    return `<hr id=${id} class="visually-hidden"/>`;
+}

src/transform/plugins/block-anchor/index.ts

@@ -0,0 +1,11 @@
+import MarkdownIt from 'markdown-it';
+import {renderTokens, replaceTokens, TOKEN_NAME} from './block-anchor';
+
+const blockAnchor = (md: MarkdownIt) => {
+    md.core.ruler.before('curly_attributes', TOKEN_NAME, replaceTokens);
+    md.renderer.rules[TOKEN_NAME] = renderTokens;
+
+    return md;
+};
+
+export default blockAnchor;

test/__snapshots__/block-anchor.test.ts.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`block-anchor does not parse produce an anchor if there is content before markup 1`] = `
+"<p>Content </p>
+"
+`;
+
+exports[`block-anchor parses anchors surrounded by other blocks 1`] = `
+"<h1 id=\\"heading\\"><a href=\\"#heading\\" class=\\"yfm-anchor\\" aria-hidden=\\"true\\"><span class=\\"visually-hidden\\">Heading</span></a>Heading</h1>
+<hr id=\\"my-anchor\\" class=\\"visually-hidden\\" /><p>paragraph with content</p>
+"
+`;
+
+exports[`block-anchor parses block anchors 1`] = `
+"<p>\${%anchor my-anchor} Content</p>
+"
+`;
+
+exports[`block-anchor renders block-anchor 1`] = `"<hr id=\\"my-anchor\\" class=\\"visually-hidden\\" />"`;
+
+exports[`block-anchor works with heading anchors 1`] = `
+"<h1 id=\\"heading-anchor\\"><a href=\\"#heading-anchor\\" class=\\"yfm-anchor\\" aria-hidden=\\"true\\"><span class=\\"visually-hidden\\">Heading</span></a>Heading</h1>
+<hr id=\\"my-anchor\\" class=\\"visually-hidden\\" />"
+`;

test/block-anchor.test.ts

@@ -0,0 +1,41 @@
+import initMarkdown from '../src/transform/md';
+import plugin from '../src/transform/plugins/block-anchor';
+import anchorsPlugin from '../src/transform/plugins/anchors';
+
+const {parse, compile} = initMarkdown({plugins: [plugin, anchorsPlugin]});
+
+describe('block-anchor', function () {
+    it('renders block-anchor', () => {
+        const input = '{%anchor my-anchor%}';
+        const actual = compile(parse(input));
+
+        expect(actual).toMatchSnapshot();
+    });
+
+    it('parses anchors surrounded by other blocks', () => {
+        const input = '# Heading \n\n {%anchor my-anchor%} \n\n paragraph with content';
+        const actual = compile(parse(input));
+        expect(actual).toMatchSnapshot();
+    });
+
+    it('parses block anchors', () => {
+        const input = '${%anchor my-anchor} Content';
+        const actual = compile(parse(input));
+
+        expect(actual).toMatchSnapshot();
+    });
+
+    it('works with heading anchors', () => {
+        const input = '# Heading {#heading-anchor} \n {%anchor my-anchor%}';
+        const actual = compile(parse(input));
+
+        expect(actual).toMatchSnapshot();
+    });
+
+    it('does not parse produce an anchor if there is content before markup', () => {
+        const input = 'Content  {%anchor my-anchor%}';
+        const actual = compile(parse(input));
+
+        expect(actual).toMatchSnapshot();
+    });
+});