dnrops
/
bytemd
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add gfm plugin

This commit is contained in:
Rongjian Zhang 2020-10-14 18:27:27 +08:00
parent ac9465a9d0
commit a1c5e54801
8 changed files with 146 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
examples/svelte/src/App.svelte
View File

@ -1,6 +1,7 @@
<script>
import { onMount } from 'svelte';
import { Editor } from 'bytemd';
import gfm from '@bytemd/plugin-gfm';
import highlight from '@bytemd/plugin-highlight';
import math from '@bytemd/plugin-math';
import mermaid from '@bytemd/plugin-mermaid';
@ -32,6 +33,7 @@
});
let enabled = {
gfm: true,
highlight: true,
math: true,
mermaid: true,
@ -54,6 +56,7 @@
}
$: plugins = [
enabled.gfm && gfm(),
enabled.mermaid && mermaid(),
enabled.highlight && highlight(),
enabled.math && math(),
@ -73,10 +76,10 @@
// console.log('off', cm, el);
// };
// },
// viewerEffect(el) {
// console.log('on', el);
// viewerEffect(el, result) {
// console.log('on', el, result);
// return () => {
// console.log('off', el);
// console.log('off', el, result);
// };
// },
// },

1
packages/bytemd/README.md
View File

@ -150,6 +150,7 @@ The 2,5,7 steps are designed for user customization via ByteMD plugin API.
| [@bytemd/plugin-external-links](./packages/plugin-external-links) | [![npm](https://img.shields.io/npm/v/@bytemd/plugin-external-links.svg)](https://npm.im/@bytemd/plugin-external-links) | ByteMD plugin to open external links in new window |
| [@bytemd/plugin-footnotes](./packages/plugin-footnotes) | [![npm](https://img.shields.io/npm/v/@bytemd/plugin-footnotes.svg)](https://npm.im/@bytemd/plugin-footnotes) | ByteMD plugin to support footnotes |
| [@bytemd/plugin-frontmatter](./packages/plugin-frontmatter) | [![npm](https://img.shields.io/npm/v/@bytemd/plugin-frontmatter.svg)](https://npm.im/@bytemd/plugin-frontmatter) | ByteMD plugin to parse frontmatter |
| [@bytemd/plugin-gfm](./packages/plugin-gfm) | [![npm](https://img.shields.io/npm/v/@bytemd/plugin-gfm.svg)](https://npm.im/@bytemd/plugin-gfm) | ByteMD plugin to support GFM (autolink literals, strikethrough, tables, tasklists) |
| [@bytemd/plugin-highlight](./packages/plugin-highlight) | [![npm](https://img.shields.io/npm/v/@bytemd/plugin-highlight.svg)](https://npm.im/@bytemd/plugin-highlight) | ByteMD plugin to highlight code blocks |
| [@bytemd/plugin-highlight-ssr](./packages/plugin-highlight-ssr) | [![npm](https://img.shields.io/npm/v/@bytemd/plugin-highlight-ssr.svg)](https://npm.im/@bytemd/plugin-highlight-ssr) | ByteMD plugin to highlight code blocks (SSR compatible) |
| [@bytemd/plugin-import-html](./packages/plugin-import-html) | [![npm](https://img.shields.io/npm/v/@bytemd/plugin-import-html.svg)](https://npm.im/@bytemd/plugin-import-html) | ByteMD plugin to import HTML by pasting or dropping |

24
packages/bytemd/src/toolbar.ts
View File

@ -87,23 +87,6 @@ const leftItems: BytemdToolbarItem[] = [
handlePrepend(cm, (lines) => ['```', ...lines, '```']);
},
},
{
tooltip: 'table',
iconHtml: icon.InsertTable({}),
onClick(cm) {
const pos = cm.getCursor();
cm.replaceRange(
`
| | |
| --- | --- |
| | |
`,
pos
);
cm.setCursor({ line: pos.line + 1, ch: 2 });
cm.focus();
},
},
{
tooltip: 'ordered list',
iconHtml: icon.OrderedList({}),
@ -118,13 +101,6 @@ const leftItems: BytemdToolbarItem[] = [
handlePrepend(cm, (lines) => lines.map((line) => `- ${line}`));
},
},
{
tooltip: 'task list',
iconHtml: icon.CheckCorrect({}),
onClick(cm) {
handlePrepend(cm, (lines) => lines.map((line) => `- [ ] ${line}`));
},
},
];
const rightItems: BytemdToolbarItem[] = [

26
packages/plugin-gfm/README.md Normal file
View File

@ -0,0 +1,26 @@
# @bytemd/plugin-gfm
[![npm](https://img.shields.io/npm/v/@bytemd/plugin-gfm.svg)](https://npm.im/@bytemd/plugin-gfm)
ByteMD plugin to support GFM (autolink literals, strikethrough, tables, tasklists)
## Usage
```js
import { Editor } from 'bytemd';
import gfm from '@bytemd/plugin-gfm';
new Editor({
target: document.body,
props: {
plugins: [
gfm(),
// ... other plugins
],
},
});
```
## License
MIT

30
packages/plugin-gfm/package.json Normal file
View File

@ -0,0 +1,30 @@
{
"name": "@bytemd/plugin-gfm",
"version": "0.1.10",
"description": "ByteMD plugin to support GFM (autolink literals, strikethrough, tables, tasklists)",
"author": "Rongjian Zhang <pd4d10@gmail.com>",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/bytedance/bytemd.git",
"directory": "packages/plugin-gfm"
},
"main": "dist/index.js",
"module": "dist/index.esm.js",
"unpkg": "dist/index.min.js",
"types": "lib/index.d.ts",
"files": [
"dist",
"lib"
],
"dependencies": {
"@icon-park/svg": "^1.0.11",
"remark-gfm": "^1.0.0"
},
"peerDependencies": {
"bytemd": "*"
},
"publishConfig": {
"access": "public"
}
}

64
packages/plugin-gfm/src/index.ts Normal file
View File

@ -0,0 +1,64 @@
import type { BytemdPlugin } from 'bytemd';
import remarkGfm, { RemarkGfmOptions } from 'remark-gfm';
import * as icon from '@icon-park/svg';
// TODO:
function handlePrepend(
cm: CodeMirror.Editor,
replace: (lines: string[]) => string[]
) {
const [selection] = cm.listSelections();
const fromLine = selection.from().line;
const toLine = selection.to().line;
const lines = cm
// @ts-ignore
.getRange({ line: fromLine, ch: 0 }, { line: toLine })
.split('\n');
cm.replaceRange(
replace(lines).join('\n'),
{ line: fromLine, ch: 0 },
// @ts-ignore
{ line: toLine }
);
cm.focus();
}
export default function gfm(options?: RemarkGfmOptions): BytemdPlugin {
return {
remark: (u) => u.use(remarkGfm, options),
toolbar: {
left(items) {
return [
...items,
{
tooltip: 'task list',
iconHtml: icon.CheckCorrect({}),
onClick(cm) {
handlePrepend(cm, (lines) =>
lines.map((line) => `- [ ] ${line}`)
);
},
},
{
tooltip: 'table',
iconHtml: icon.InsertTable({}),
onClick(cm) {
const pos = cm.getCursor();
cm.replaceRange(
`
| | |
| --- | --- |
| | |
`,
pos
);
cm.setCursor({ line: pos.line + 1, ch: 2 });
cm.focus();
},
},
];
},
},
};
}

16
packages/plugin-gfm/tsconfig.json Normal file
View File

@ -0,0 +1,16 @@
{
"extends": "../../tsconfig-base.json",
"include": [
"src"
],
"compilerOptions": {
"composite": true,
"rootDir": "src",
"outDir": "lib"
},
"references": [
{
"path": "../bytemd"
}
]
}

3
tsconfig.json
View File

@ -16,6 +16,9 @@
{
"path": "packages/plugin-frontmatter"
},
{
"path": "packages/plugin-gfm"
},
{
"path": "packages/plugin-highlight"
},