Installations

npm install remark-slate-transformer

Pull Requests

Open

7

Total

192

Closed

26

Merged

159

Issues

Open

5

Total

22

Closed

17

Releases

41

0.9.0

Published on 07 Dec 2023

0.8.1

Published on 10 Aug 2023

0.8.0

Published on 08 Aug 2023

0.7.5

Published on 11 Jun 2023

0.7.4

Published on 07 Feb 2023

0.7.3

Published on 07 Nov 2022

View all 41 releases

Developer

inokawa

Developer Guide

BETA

Module System

CommonJS, ESM

Min. Node Version

Typescript Support

Yes

Node Version

20.6.1

NPM Version

9.8.1 Statistics

109 Stars

471 Commits

22 Forks

2 Watching

9 Branches

6 Contributors

Updated on 20 Nov 2024

Bundle Size

7.23 kB

Minified

2.03 kB

Minified + Gzipped

Bundlephobia

Languages

TypeScript (96.44%)

JavaScript (3.56%)

Total Downloads

Cumulative downloads

Total Downloads

1,479,277

Last day

-37.8%

4,439

Compared to previous day

Last week

14.8%

30,970

Compared to previous week

Last month

70.9%

128,295

Compared to previous month

Last year

116.2%

846,500

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

3

@types/mdast mdast-util-math tslib

Peer Dependencies

1

unified

Dev Dependencies

33

Versions

remark-slate-transformer

npm npm

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...

Support

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...

remark-gfm
remark-frontmatter
math and inlineMath from remark-math.

And also have experimental support for custom AST.

Demo

https://inokawa.github.io/remark-slate-transformer/

Install

1npm install remark-slate-transformer

Supported unified versions

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

Usage

Transform remark to slate

1import { unified } from "unified";
2import markdown from "remark-parse";
3import { remarkToSlate } from "remark-slate-transformer";
4
5const processor = unified().use(markdown).use(remarkToSlate);
6
7const text = "# hello world";
8
9const value = processor.processSync(text).result;
10console.log(value);

Transform slate to remark

1import { unified } from "unified";
2import stringify from "remark-stringify";
3import { slateToRemark } from "remark-slate-transformer";
4
5const processor = unified().use(stringify);
6
7const value = ...; // value passed to slate editor
8
9const ast = processor.runSync(slateToRemark(value));
10const text = processor.stringify(ast);
11console.log(text);

Support custom AST

1import { unified } from "unified";
2import markdown from "remark-parse";
3import stringify from "remark-stringify";
4import { remarkToSlate, slateToRemark } from "remark-slate-transformer";
5
6const text = "# hello world";
7const r2s = unified()
8  .use(markdown)
9  .use(remarkToSlate, {
10    // If you use TypeScript, install `@types/mdast` for autocomplete.
11    overrides: {
12      // This overrides `type: "heading"` builder of remarkToSlate
13      heading: (node, next) => ({
14        type: "head",
15        dep: node.depth,
16        // You have to call next if the node have children
17        children: next(node.children),
18      }),
19      // Unknown type from community plugins can be handled
20      foo: (node, next) => ({ type: "foo", value: node.bar }),
21    },
22  });
23const value = r2s.processSync(text).result;
24console.log(value);
25
26const s2r = unified().use(stringify);
27const ast = s2r.runSync(
28  slateToRemark(value, {
29    overrides: {
30      head: (node, next) => ({
31        type: "heading",
32        depth: node.dep,
33        children: next(node.children),
34      }),
35      foo: (node, next) => ({ type: "foo", bar: node.value }),
36    },
37  })
38);
39const text = s2r.stringify(ast);
40console.log(text);

Utilities

Transformer utilities mdastToSlate and slateToMdast are also exported for more fine-tuned control.

Contribute

All contributions are welcome. If you find a problem, feel free to create an issue or a PR.

Making a Pull Request

Fork this repo.
Run npm install.
Commit your fix.
Add tests to cover the fix.
Make a PR and confirm all the CI checks passed.

Related projects

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

5

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

4

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.2

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More