feat: add footnotes plugin

README.md

@@ -28,6 +28,7 @@ new Viewer({
 
 | Package | Status | Description |
 | --- | --- | --- |
+| [@bytemd/plugin-footnotes](./packages/plugin-footnotes) | [![npm](https://img.shields.io/npm/v/@bytemd/plugin-footnotes.svg)](https://npm.im/@bytemd/plugin-footnotes) | support footnotes |
 | [@bytemd/plugin-highlight](./packages/plugin-highlight) | [![npm](https://img.shields.io/npm/v/@bytemd/plugin-highlight.svg)](https://npm.im/@bytemd/plugin-highlight) | highlight code blocks |
 | [@bytemd/plugin-math](./packages/plugin-math) | [![npm](https://img.shields.io/npm/v/@bytemd/plugin-math.svg)](https://npm.im/@bytemd/plugin-math) | support math equation |
 | [@bytemd/plugin-mermaid](./packages/plugin-mermaid) | [![npm](https://img.shields.io/npm/v/@bytemd/plugin-mermaid.svg)](https://npm.im/@bytemd/plugin-mermaid) | support [mermaid](https://mermaid-js.github.io/mermaid/) diagram and flowchart |

examples/svelte/src/App.svelte

@@ -4,6 +4,7 @@
   import highlight from '@bytemd/plugin-highlight';
   import math from '@bytemd/plugin-math';
   import mermaid from '@bytemd/plugin-mermaid';
+  import footnotes from '@bytemd/plugin-footnotes';
   import 'github-markdown-css';
   import 'highlight.js/styles/vs.css';
   import 'katex/dist/katex.css';
@@ -26,12 +27,14 @@
     highlight: true,
     math: true,
     mermaid: true,
+    footnotes: true,
   };
 
   $: plugins = [
     enabled.mermaid && mermaid(),
     enabled.highlight && highlight(),
     enabled.math && math(),
+    enabled.footnotes && footnotes(),
   ].filter((x) => x);
 </script>
 
@@ -46,7 +49,7 @@
 
 <div>
   Plugins:
-  {#each ['math', 'highlight', 'mermaid'] as p}
+  {#each Object.keys(enabled) as p}
     {' '}
     <label>
       <input type="checkbox" bind:checked={enabled[p]} />

packages/bytemd/src/utils.ts

@@ -36,5 +36,6 @@ export function processMarkdown({
 
   parser = parser.use(stringify);
 
+  // console.log(parser.parse(value));
   return parser.processSync(value).toString();
 }

packages/plugin-footnotes/.gitignore

@@ -0,0 +1,2 @@
+src/*.js
+src/*.d.ts

packages/plugin-footnotes/README.md

@@ -0,0 +1,37 @@
+# @bytemd/plugin-footnotes
+
+[![npm](https://img.shields.io/npm/v/@bytemd/plugin-footnotes.svg)](https://npm.im/@bytemd/plugin-footnotes)
+
+[bytemd](https://github.com/bytedance/bytemd) plugin to support footnotes
+
+## Usage
+
+```js
+import { Editor } from 'bytemd';
+import footnotes from '@bytemd/plugin-footnotes';
+
+new Editor({
+  target: document.body,
+  props: {
+    plugins: [
+      footnotes(),
+      // ... other plugins
+    ],
+  },
+});
+```
+
+## Example
+
+```md
+Here is a footnote reference,[^1]
+
+another,[^longnote],
+
+[^1]: Here is the footnote.
+[^longnote]: Here’s one with multiple blocks.
+```
+
+## License
+
+MIT

packages/plugin-footnotes/docs/desc.md

@@ -0,0 +1 @@
+support footnotes

packages/plugin-footnotes/docs/example.md

@@ -0,0 +1,8 @@
+```md
+Here is a footnote reference,[^1]
+
+another,[^longnote],
+
+[^1]: Here is the footnote.
+[^longnote]: Here’s one with multiple blocks.
+```

packages/plugin-footnotes/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@bytemd/plugin-footnotes",
+  "version": "0.0.2",
+  "description": "@bytemd/plugin-footnotes",
+  "author": "Rongjian Zhang <pd4d10@gmail.com>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "unpkg": "dist/index.min.js",
+  "types": "src/index.d.ts",
+  "files": [
+    "dist",
+    "src/*.d.ts"
+  ],
+  "dependencies": {
+    "remark-footnotes": "^1.0.0"
+  },
+  "peerDependencies": {
+    "bytemd": "*"
+  }
+}

packages/plugin-footnotes/src/index.ts

@@ -0,0 +1,14 @@
+import { BytemdPlugin } from 'bytemd';
+import remarkFootnotes from 'remark-footnotes';
+
+export default function footnotes(): BytemdPlugin {
+  return {
+    remarkTransformer: (u) => u.use(remarkFootnotes),
+    markdownSanitizeSchema: {
+      attributes: {
+        div: ['className'],
+        a: ['className'],
+      },
+    },
+  };
+}

rollup.config.js

@@ -30,6 +30,7 @@ const packageConfigs = {
   'plugin-highlight': {},
   'plugin-math': {},
   'plugin-mermaid': {},
+  'plugin-footnotes': {},
 };
 
 if (umd) {