@peaceroad/markdown-it-footnote-here 0.1.0 → 0.2.0

package/README.md

@@ -26,21 +26,34 @@ HTML:
 <p>A paragraph.</p>
 ```
 
+Notice. When multiple instances of the same footnote number appear in the main content, the default behavior is that the backlink from the footnote will refer to the first instance.
+
 ## Use
 
 ```js
-const md = require('markdown-it')()
-            .use(require('@peaceroad/markdown-it-footnote-here'));
+import mdit from 'markdown-it'
+import mditFootnoteHere from '@peaceroad/markdown-it-footnote-here'
 
+const md = mdit().use(mditFootnoteHere)
 md.render(/*...*/) // See examples above
 ```
 
 ## Install
 
-```bash
+```samp
 npm install @peaceroad/markdown-it-footnote-here
 ```
 
-## License
-
-[MIT](./LICENSE)
+## Options
+
+- beforeSameBacklink (boolean): false by default. When true, duplicate footnote references will use letter suffixes (a, b, c, ...) and generate matching backlinks in footnote definitions.
+- afterBacklink (boolean): false by default. If true, backlinks (↩) are placed at the end of the footnote content instead of before it.
+- afterBacklinkContent (string): The content for the backlink (default: '↩').
+- afterBacklinkWithNumber (boolean): If true, backlink will show a number or letter suffix.
+- afterBacklinkSuffixArabicNumerals (boolean): If true, backlink suffix uses numbers (1, 2, ...) instead of letters (a, b, ...).
+- afterBacklinkdAriaLabelPrefix (string): Prefix for aria-label of backlink (default: 'Back to reference ').
+- labelBra (string): Bracket to use before footnote number (default: '[').
+- labelKet (string): Bracket to use after footnote number (default: ']').
+- labelSupTag (boolean): If true, wraps footnote reference in `<sup>` tag.
+- backLabelBra (string): Bracket to use before backlink number (default: '[').
+- backLabelKet (string): Bracket to use after backlink number (default: ']').

package/index.js

@@ -1,248 +1,288 @@
-// Process footnotes
-//
-'use strict';
-
-////////////////////////////////////////////////////////////////////////////////
-// Renderer partials
-
-function render_footnote_anchor_name(tokens, idx, options, env/*, slf*/) {
-  var n = Number(tokens[idx].meta.id + 1).toString();
-  var prefix = '';
-
+const render_footnote_anchor_name = (tokens, idx, opt, env) => {
+  let n = tokens[idx].meta.id + 1
+  if (!opt.afterBacklinkSuffixArabicNumerals) n = Number(n).toString()
+  let prefix = ''
   if (typeof env.docId === 'string') {
-    prefix = '-' + env.docId + '-';
+    prefix = '-' + env.docId + '-'
   }
-
-  return prefix + n;
+  return prefix + n
 }
 
-function render_footnote_caption(tokens, idx) {
-  var n = Number(tokens[idx].meta.id + 1).toString();
-
-  return '[' + n + ']';
+const render_footnote_ref = (tokens, idx, opt, env) => {
+  const token = tokens[idx]
+  const id = token.meta.id
+  const n = id + 1
+  const footnotes = env.footnotes
+  footnotes._refCount = footnotes._refCount || {}
+  let refIdx = (footnotes._refCount[id] = (footnotes._refCount[id] || 0) + 1)
+  if (!opt.afterBacklinkSuffixArabicNumerals) {
+    refIdx = String.fromCharCode(96 + refIdx)
+  }
+  let suffix = ''
+  let label = `${opt.labelBra}${n}${opt.labelKet}`
+  if (footnotes.totalCounts && footnotes.totalCounts[id] > 1) {
+    suffix = '-' + refIdx
+    if (opt.beforeSameBacklink) {
+      label = `${opt.labelBra}${n}${suffix}${opt.labelKet}`
+    }
+  }
+  let refCont = `<a href="#fn${n}" id="fn-ref${n}${suffix}" class="fn-noteref" role="doc-noteref">${label}</a>`
+  if (opt.labelSupTag) refCont = `<sup class="fn-noteref-wrapper">${refCont}</sup>`
+  return refCont
 }
 
-function render_footnote_ref(tokens, idx, options, env, slf) {
-  var id      = slf.rules.footnote_anchor_name(tokens, idx, options, env, slf);
-  var caption = slf.rules.footnote_caption(tokens, idx, options, env, slf);
-  var refid   = id;
+const render_footnote_open = (tokens, idx, opt, env, slf) => {
+  const id = slf.rules.footnote_anchor_name(tokens, idx, opt, env, slf)
+  return `<aside id="fn${id}" class="fn" role="doc-footnote">\n`
+}
 
-  return '<a href="#fn' + id + '" id="fn-ref' + refid + '" class="fn-noteref" role="doc-noteref">' + caption + '</a>';
+const render_footnote_close = () => {
+  return `</aside>\n`
 }
 
-function render_footnote_open(tokens, idx, options, env, slf) {
-  var id = slf.rules.footnote_anchor_name(tokens, idx, options, env, slf);
+const render_footnote_anchor = (tokens, idx, opt, env) => {
+  const idNum = tokens[idx].meta.id
+  const n = idNum + 1
+  const footnotes = env.footnotes
+  const counts = footnotes && footnotes.totalCounts
+  if (opt.beforeSameBacklink && counts && counts[idNum] > 1) {
+    let links = ''
+    for (let i = 1; i <= counts[idNum]; i++) {
+      const suffix = '-' + String.fromCharCode(96 + i); // a, b, c ...
+      links += `<a href="#fn-ref${n}${suffix}" class="fn-backlink" role="doc-backlink">${opt.backLabelBra}${n}${suffix}${opt.backLabelKet}</a>`
+    }
+    return links + ' '
+  }
 
-  return '<aside id="fn' + id + '" class="fn" role="doc-footnote">\n';
-}
+  if (opt.afterBacklink) {
+    return `<span class="fn-label">${opt.backLabelBra}${n}${opt.backLabelKet}</span> `
+  }
+
+  if (counts && counts[idNum] > 1) {
+    return `<a href="#fn-ref${n}-a" class="fn-backlink" role="doc-backlink">${opt.backLabelBra}${n}${opt.backLabelKet}</a> `
+  }
 
-function render_footnote_close() {
-  return '</aside>\n';
+  return `<a href="#fn-ref${n}" class="fn-backlink" role="doc-backlink">${opt.backLabelBra}${n}${opt.backLabelKet}</a> `
 }
 
-function render_footnote_anchor(tokens, idx, options, env, slf) {
-  var id = slf.rules.footnote_anchor_name(tokens, idx, options, env, slf);
-  if (tokens[idx].meta.subId > 0) {
-    id += ':' + tokens[idx].meta.subId;
+function createAfterBackLinkToken(state, counts, n, opt) {
+  let html = ' '
+  if (counts && counts > 1) {
+    for (let i = 1; i <= counts; i++) {
+      const suffixChar = opt.afterBacklinkSuffixArabicNumerals ? i : String.fromCharCode(96 + i)
+      const suffix = '-' + suffixChar
+      html += `<a href="#fn-ref${n}${suffix}" class="fn-backlink" role="doc-backlink"`
+      if (opt.afterBacklinkdAriaLabelPrefix) html += ` aria-label="${opt.afterBacklinkdAriaLabelPrefix}${n}${suffix}"`
+      html += `>${opt.afterBacklinkContent}`
+      if (opt.afterBacklinkWithNumber) {
+        html += `<sup>${suffixChar}</sup>`
+      }
+      html += `</a>`
+    }
+  } else {
+    html += `<a href="#fn-ref${n}" class="fn-backlink" role="doc-backlink"`
+    if (opt.afterBacklinkdAriaLabelPrefix) html += ` aria-label="${opt.afterBacklinkdAriaLabelPrefix}${n}"`
+    html += `>${opt.afterBacklinkContent}</a>`
   }
-  return '<a href="#fn-ref' + id + '" class="fn-backlink" role="doc-backlink">[' + id + ']</a> ';
+  const token = new state.Token('html_inline', '', 0)
+  token.content = html
+  return token
 }
 
+const footnote_plugin = (md, option) =>{
+  const opt = {
+    labelBra: '[',
+    labelKet: ']',
+    labelSupTag: false,
+    backLabelBra: '[',
+    backLabelKet: ']',
+    beforeSameBacklink: false,
+    afterBacklink: false,
+    afterBacklinkContent: '↩',
+    afterBacklinkWithNumber: false,
+    afterBacklinkSuffixArabicNumerals: false,
+    afterBacklinkdAriaLabelPrefix: 'Back to reference ', /* 戻る：本文参照 */
+  }
+  if (option) Object.assign(opt, option)
 
-module.exports = function footnote_plugin(md) {
-  const parseLinkLabel = md.helpers.parseLinkLabel;
-  const isSpace = md.utils.isSpace;
-
-  md.renderer.rules.footnote_ref          = render_footnote_ref;
-  md.renderer.rules.footnote_open         = render_footnote_open;
-  md.renderer.rules.footnote_close        = render_footnote_close;
-  md.renderer.rules.footnote_anchor       = render_footnote_anchor;
+  const isSpace = md.utils.isSpace
 
-  // helpers (only used in other rules, no tokens are attached to those)
-  md.renderer.rules.footnote_caption      = render_footnote_caption;
-  md.renderer.rules.footnote_anchor_name  = render_footnote_anchor_name;
+  md.renderer.rules.footnote_ref = (tokens, idx, _options, env) => render_footnote_ref(tokens, idx, opt, env)
+  md.renderer.rules.footnote_open = render_footnote_open
+  md.renderer.rules.footnote_close = render_footnote_close
+  md.renderer.rules.footnote_anchor = (tokens, idx, _options, env, slf) => render_footnote_anchor(tokens, idx, opt, env, slf)
+  md.renderer.rules.footnote_anchor_name  = render_footnote_anchor_name
 
   // Process footnote block definition
-  function footnote_def(state, startLine, endLine, silent) {
-    var oldBMark, oldTShift, oldSCount, oldParentType, pos, label, token, id,
-        initial, offset, ch, posAfterColon,
-        start = state.bMarks[startLine] + state.tShift[startLine],
-        max = state.eMarks[startLine];
+  const footnote_def = (state, startLine, endLine, silent) => {
+    const bMarks = state.bMarks, tShift = state.tShift, eMarks = state.eMarks, src = state.src
+    const start = bMarks[startLine] + tShift[startLine]
+    const max = eMarks[startLine]
 
     // line should be at least 5 chars - "[^x]:"
     if (start + 4 > max) { return false; }
 
-    if (state.src.charCodeAt(start) !== 0x5B/* [ */) { return false; }
-    if (state.src.charCodeAt(start + 1) !== 0x5E/* ^ */) { return false; }
-
-    for (pos = start + 2; pos < max; pos++) {
-      if (state.src.charCodeAt(pos) === 0x20) { return false; }
-      if (state.src.charCodeAt(pos) === 0x5D /* ] */) {
-        break;
-      }
-    }
-
-    if (pos === start + 2) { return false; } // no empty footnote labels
-    if (pos + 1 >= max || state.src.charCodeAt(++pos) !== 0x3A /* : */) { return false; }
-    if (silent) { return true; }
-    pos++;
+    if (src.charCodeAt(start) !== 0x5B/* [ */ || src.charCodeAt(start + 1) !== 0x5E/* ^ */) { return false; }
 
-    if (!state.env.footnotes) { state.env.footnotes = { length:0}; }
-    if (!state.env.footnotes.refs) { state.env.footnotes.refs = {}; }
+    // locate end of label efficiently
+    const idx = src.indexOf(']:', start + 2)
+    if (idx < start + 3 || idx > max - 2) { return false; }
 
-    label = state.src.slice(start + 2, pos - 2);
-    id = state.env.footnotes.length++;
-    state.env.footnotes.refs[':' + label] = id;
+    const label = src.slice(start + 2, idx)
+    if (label.indexOf(' ') >= 0) { return false; }
+    const pos = idx + 2
 
-    token       = new state.Token('footnote_open', '', 1);
-    token.meta  = { id: id, label: label };
-    token.level = state.level++;
-    state.tokens.push(token);
-
-    oldBMark = state.bMarks[startLine];
-    oldTShift = state.tShift[startLine];
-    oldSCount = state.sCount[startLine];
-    oldParentType = state.parentType;
-
-    posAfterColon = pos;
-    initial = offset = state.sCount[startLine] + pos - (state.bMarks[startLine] + state.tShift[startLine]);
-
-    /*
-    token =  new state.Token('footnote_anchor', '', 0);
-    token.meta = { id: id, label: label };
-    state.tokens.push(token);
-    */
-
-
-    while (pos < max) {
-      ch = state.src.charCodeAt(pos);
+    if (silent) { return true; }
 
+    // initialize footnotes environment once
+    if (!state.env.footnotes) {
+      state.env.footnotes = { length: 0, refs: {}, positions: [] }
+    }
+    const fn = state.env.footnotes
+    const id = fn.length++
+    fn.refs[':' + label] = id
+
+    const token = new state.Token('footnote_open', '', 1)
+    token.meta = { id, label }
+    token.level = state.level++
+    state.tokens.push(token)
+    fn.positions.push(state.tokens.length - 1)
+
+    const oldBMark = bMarks[startLine]
+    const oldTShift = tShift[startLine]
+    const oldSCount = state.sCount[startLine]
+    const oldParentType = state.parentType
+
+    const posAfterColon = pos
+    const initial = state.sCount[startLine] + pos - (bMarks[startLine] + tShift[startLine])
+    let offset = initial
+    let newPos = pos
+
+    while (newPos < max) {
+      const ch = src.charCodeAt(newPos)
       if (isSpace(ch)) {
         if (ch === 0x09) {
-          offset += 4 - offset % 4;
+          offset += 4 - offset % 4
         } else {
-          offset++;
+          offset++
         }
       } else {
-        break;
+        break
       }
-
-      pos++;
+      newPos++
     }
 
-    state.tShift[startLine] = pos - posAfterColon;
-    state.sCount[startLine] = offset - initial;
+    state.tShift[startLine] = newPos - posAfterColon
+    state.sCount[startLine] = offset - initial
 
-    state.bMarks[startLine] = posAfterColon;
-    state.blkIndent += 4;
-    state.parentType = 'footnote';
+    state.bMarks[startLine] = posAfterColon
+    state.blkIndent += 4
+    state.parentType = 'footnote'
 
     if (state.sCount[startLine] < state.blkIndent) {
-      state.sCount[startLine] += state.blkIndent;
+      state.sCount[startLine] += state.blkIndent
     }
 
-    state.md.block.tokenize(state, startLine, endLine, true);
+    state.md.block.tokenize(state, startLine, endLine, true)
 
-    state.parentType = oldParentType;
-    state.blkIndent -= 4;
-    state.tShift[startLine] = oldTShift;
-    state.sCount[startLine] = oldSCount;
-    state.bMarks[startLine] = oldBMark;
+    state.parentType = oldParentType
+    state.blkIndent -= 4
+    state.tShift[startLine] = oldTShift
+    state.sCount[startLine] = oldSCount
+    state.bMarks[startLine] = oldBMark
 
-    token       = new state.Token('footnote_close', '', -1);
-    token.level = --state.level;
-    state.tokens.push(token);
+    const closeToken = new state.Token('footnote_close', '', -1)
+    closeToken.level = --state.level
+    state.tokens.push(closeToken)
 
-    return true;
+    return true
   }
 
   // Process footnote references ([^...])
-  function footnote_ref(state, silent) {
-    var label,
-        pos,
-        id,
-        footnoteId,
-        token,
-        max = state.posMax,
-        start = state.pos;
-
-    // should be at least 4 chars - "[^x]"
-    if (start + 3 > max) { return false; }
-
-    if (!state.env.footnotes || !state.env.footnotes.refs) { return false; }
-    if (state.src.charCodeAt(start) !== 0x5B/* [ */) { return false; }
-    if (state.src.charCodeAt(start + 1) !== 0x5E/* ^ */) { return false; }
-
-    for (pos = start + 2; pos < max; pos++) {
-      if (state.src.charCodeAt(pos) === 0x20) { return false; }
-      if (state.src.charCodeAt(pos) === 0x0A) { return false; }
-      if (state.src.charCodeAt(pos) === 0x5D /* ] */) {
-        break;
-      }
+  const footnote_ref = (state, silent) => {
+    const src = state.src
+    const start = state.pos
+    const posMax = state.posMax
+    if (start + 3 >= posMax) { return false; } // - "[^x]"
+    if (src.charCodeAt(start) !== 0x5B/* [ */ || src.charCodeAt(start + 1) !== 0x5E/* ^ */) {
+      return false
+    }
+
+    const env = state.env
+    if (!env.footnotes || !env.footnotes.refs) { return false; }
+
+    let pos = start + 2
+    let found = false
+    for (; pos < posMax && !found; pos++) {
+      const ch = src.charCodeAt(pos)
+      if (ch === 0x20 || ch === 0x0A) { return false; } // space or linebreak
+      if (ch === 0x5D /* ] */) { found = true; break; }
     }
 
-    if (pos === start + 2) { return false; } // no empty footnote labels
-    if (pos >= max) { return false; }
-    pos++;
+    if (!found || pos === start + 2) { return false; }
+    pos++; // pos set next ']' position.
 
-    label = state.src.slice(start + 2, pos - 1);
-    if (typeof state.env.footnotes.refs[':' + label] === 'undefined') { return false; }
+    const label = src.slice(start + 2, pos - 1)
+    const id = env.footnotes.refs[':' + label]
+
+    if (id === undefined) { return false; }
 
     if (!silent) {
-      if (!state.env.footnotes.list) { state.env.footnotes.list = []; }
+      const fn = env.footnotes
 
+      if (!fn.list) { fn.list = []; }
 
-      let footnoteId = state.env.footnotes.list.length;
-      state.env.footnotes.list[footnoteId] = { label: label, count: 0 };
+      const footnoteId = fn.list.length
+      fn.list[footnoteId] = { label, count: 0 }
 
-      id = state.env.footnotes.refs[':' + label];
+      fn.totalCounts = fn.totalCounts || {}
+      fn.totalCounts[id] = (fn.totalCounts[id] || 0) + 1
 
-      token      = state.push('footnote_ref', '', 0);
-      token.meta = { id: id, label: label };
+      const token = state.push('footnote_ref', '', 0)
+      token.meta = { id, label }
     }
 
-    state.pos = pos;
-    state.posMax = max;
-    return true;
+    state.pos = pos
+    return true
   }
 
-  function addClass(token, className) {
-    token.attrs = token.attrs || [];
-    const ats = token.attrs.map(x => x[0]);
-    const i = ats.indexOf('class');
-    if (i === -1) {
-      token.attrs.push(['class', className]);
-    } else {
-      let classVal = token.attrs[i][1] || '';
-      const classNames = classStr.split(' ');
-      if (classNames.indexOf(className) === -1) {
-        classVal += ' ' + className;
-        token.attrs[i][1] = classVal;
-      }
+  const footnote_anchor = (state) => {
+    const tokens = state.tokens
+    const fn = state.env.footnotes
+    const positions = fn && fn.positions
+    if (!positions || positions.length === 0) { return; }
+
+    const createAnchorToken = (id) => {
+      const aToken = new state.Token('footnote_anchor', '', 0)
+      aToken.meta = { id, label: id + 1 }
+      return aToken
     }
-  }
 
-  function footnote_anchor (state) {
-    let n = 0;
-    let id = 0;
-    while (n < state.tokens.length - 2) {
-      const token = state.tokens[n];
-      const isFootnoteStartTag = token.type === 'footnote_open';
-      if(!isFootnoteStartTag) {
-        n++;
-        continue;
-      }
-      if(state.tokens[n + 1].type === 'paragraph_open'
-        && state.tokens[n + 2].type === 'inline') {
-          const aToken =  new state.Token('footnote_anchor', '', 0);
-          aToken.meta = { id: id++, label: id };
-          state.tokens[n + 2].children.unshift(aToken);
+    for (let j = 0, len = positions.length; j < len; ++j) {
+      const posOpen = positions[j]
+      if (posOpen + 2 >= tokens.length) continue
+
+      const t1 = tokens[posOpen + 1]
+      if (t1.type !== 'paragraph_open') continue
+
+      const t2 = tokens[posOpen + 2]
+      if (t2.type !== 'inline') continue
+
+      const t0 = tokens[posOpen]
+      const id = t0.meta.id
+
+      t2.children.unshift(createAnchorToken(id))
+      if (opt.afterBacklink) {
+        const n = id + 1
+        const counts = fn.totalCounts && fn.totalCounts[id]
+        t2.children.push(createAfterBackLinkToken(state, counts, n, opt))
       }
-      n++;
     }
   }
 
-  md.block.ruler.before('reference', 'footnote_def', footnote_def, { alt: [ 'paragraph', 'reference' ] });
-  md.inline.ruler.after('image', 'footnote_ref', footnote_ref);
-  md.core.ruler.after('inline', 'footnote_anchor', footnote_anchor);
-};
+  md.block.ruler.before('reference', 'footnote_def', footnote_def, { alt: [ 'paragraph', 'reference' ] })
+  md.inline.ruler.after('image', 'footnote_ref', footnote_ref)
+  md.core.ruler.after('inline', 'footnote_anchor', footnote_anchor)
+}
+
+export default footnote_plugin

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@peaceroad/markdown-it-footnote-here",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A markdown-it plugin. This generate aside[role|doc-footnote] element just below the footnote reference paragraph.",
+  "type":"module",
   "author": "peaceroad <peaceroad@gmail.com>",
   "repository": "https://github.com/peaceroad/markdown-it-footnote-here.git",
   "bugs": {
@@ -12,6 +13,6 @@
     "test": "node test/test.js"
   },
   "devDependencies": {
-    "markdown-it": "^12.0.6"
+    "markdown-it": "^14.1.0"
   }
 }