remark plugin to transform remark syntax tree (mdast) to Slate document tree, and vice versa. Made for WYSIWYG markdown editor.
MIT License
remark plugin to transform remark syntax tree (mdast) to Slate document tree, and vice versa. Made for WYSIWYG markdown editor.
remark is popular markdown parser/serializer which data structure can be converted to what used in rehype, retext and so on. Slate is fully customizable rich text editor built on React. Connect both 2 worlds should be great...
This plugin supports slate 0.50+. The data structure is described here. slate ~0.47.9 was supported until 0.8.1.
All nodes in mdast syntax tree are supported, including nodes created with...
math
and inlineMath
from remark-math.And also have experimental support for custom AST.
https://inokawa.github.io/remark-slate-transformer/
npm install remark-slate-transformer
remark-slate-transformer | unified |
---|---|
>=0.9.0 | >=11.0.0 |
>=0.7.0 <0.9.0 | >=10.1.0 <11.0.0 |
>=0.5.0 <0.7.0 | >=10.0.0 |
<0.5.0 | <10.0.0 |
import { unified } from "unified";
import markdown from "remark-parse";
import { remarkToSlate } from "remark-slate-transformer";
const processor = unified().use(markdown).use(remarkToSlate);
const text = "# hello world";
const value = processor.processSync(text).result;
console.log(value);
import { unified } from "unified";
import stringify from "remark-stringify";
import { slateToRemark } from "remark-slate-transformer";
const processor = unified().use(stringify);
const value = ...; // value passed to slate editor
const ast = processor.runSync(slateToRemark(value));
const text = processor.stringify(ast);
console.log(text);
import { unified } from "unified";
import markdown from "remark-parse";
import stringify from "remark-stringify";
import { remarkToSlate, slateToRemark } from "remark-slate-transformer";
const text = "# hello world";
const r2s = unified()
.use(markdown)
.use(remarkToSlate, {
// If you use TypeScript, install `@types/mdast` for autocomplete.
overrides: {
// This overrides `type: "heading"` builder of remarkToSlate
heading: (node, next) => ({
type: "head",
dep: node.depth,
// You have to call next if the node have children
children: next(node.children),
}),
// Unknown type from community plugins can be handled
foo: (node, next) => ({ type: "foo", value: node.bar }),
},
});
const value = r2s.processSync(text).result;
console.log(value);
const s2r = unified().use(stringify);
const ast = s2r.runSync(
slateToRemark(value, {
overrides: {
head: (node, next) => ({
type: "heading",
depth: node.dep,
children: next(node.children),
}),
foo: (node, next) => ({ type: "foo", bar: node.value }),
},
})
);
const text = s2r.stringify(ast);
console.log(text);
Transformer utilities mdastToSlate
and slateToMdast
are also exported for more fine-tuned control.
All contributions are welcome. If you find a problem, feel free to create an issue or a PR.
npm install
.