Compatible with Docsify v5 Preview (#3)

Author: sy-records

.gitignore

@@ -1,4 +1,4 @@
 node_modules/
 .idea/
-lib/
-package-lock.json
+dist/
+package-lock.json

.npmignore

@@ -1,3 +1,4 @@
 build/
 screenshots.png
 .idea/
+src/

README.md

@@ -11,7 +11,7 @@ A plugin that supports the use of footnotes in docsify.
 ## Usage
 
 ```html
-<script src="//cdn.jsdelivr.net/npm/@sy-records/docsify-footnotes/lib/index.min.js"></script>
+<script src="//cdn.jsdelivr.net/npm/@sy-records/docsify-footnotes/dist/index.min.js"></script>
 ```
 
 ## Example

build/build.js

@@ -39,14 +39,11 @@ async function build(opts) {
       }
     })
     .then(function (bundle) {
-      var dest = 'lib/' + (opts.output || opts.input)
+      var dest = 'dist/' + (opts.output || opts.input)
 
       console.log(dest)
       return bundle.write({
-        format: 'iife',
-        output: opts.globalName ? {name: opts.globalName} : {},
-        file: dest,
-        strict: false
+        output: {file: dest, format: 'iife', strict: false},
       })
     })
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sy-records/docsify-footnotes",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "A plugin that supports the use of footnotes in docsify.",
   "main": "src/index.js",
   "repository": {
@@ -20,7 +20,7 @@
   "homepage": "https://github.com/sy-records/docsify-footnotes#readme",
   "devDependencies": {
     "cross-env": "^6.0.3",
-    "rollup": "^1.23.1",
+    "rollup": "^2.79.2",
     "rollup-plugin-async": "^1.2.0",
     "rollup-plugin-buble": "^0.19.8",
     "rollup-plugin-commonjs": "^10.1.0",

src/index.js

@@ -1,13 +1,31 @@
-const footnotes = function(hook) {
-  hook.beforeEach(function (html) {
-    if (/\[\^([A-Za-z0-9\-]+)\][^:]/.test(html)) {
-      html = html
-        .replace(/\[\^([A-Za-z0-9\-]+)\][^:]/gm, '<sup class="footnote-symbol" id="fn-$1">[\[$1]\](#fnref-$1)</sup>')
-        .replace(/\[\^([A-Za-z0-9\-]+)\]\: /gm, '<strong class="footnote-reference-symbol" id="fnref-$1">[\[$1\]](#fn-$1)</strong>:leftwards_arrow_with_hook: ');
+document.addEventListener('click', function (event) {
+  const target = event.target.closest('.footnote-symbol, .footnote-reference-symbol');
+
+  if (!target || !target.hasAttribute('data-id')) return;
+
+  const dataId = target.getAttribute('data-id');
+
+  const footnotesElm = Docsify.dom.find(`.markdown-section :where(sup, strong)[id="${dataId}"]`);
+
+  if (footnotesElm) {
+    footnotesElm.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start',
+    });
+  }
+});
+
+function footnotes(hook) {
+  hook.beforeEach(function (markdown) {
+    if (/\[\^([A-Za-z0-9\-]+)\][^:]/.test(markdown)) {
+      markdown = markdown
+          .replace(/\[\^([A-Za-z0-9\-]+)\][^:]/gm, '<sup class="footnote-symbol" data-id="fnref-$1" id="fn-$1">[\[$1]\](#fnref-$1)</sup>')
+          .replace(/\[\^([A-Za-z0-9\-]+)\]\: /gm, '<strong class="footnote-reference-symbol" data-id="fn-$1" id="fnref-$1">[\[$1\]](#fn-$1)</strong>:leftwards_arrow_with_hook: ');
     }
-    return html;
+
+    return markdown;
   });
-};
+}
 
-$docsify = $docsify || {};
-$docsify.plugins = [].concat(footnotes, $docsify.plugins || []);
+window.$docsify = window.$docsify || {};
+$docsify.plugins = [...($docsify.plugins || []), footnotes];