unified

Project: inokawa/remark-slate-transformer

Package: remark-slate-transformer@0.7.3

  1. remark plugin to transform remark syntax tree (mdast) to Slate document tree, and vice versa. Made for WYSIWYG markdown editor.
  1. 62%
  2. MIT
  3. 109
  1. 1.91 B
  2. 119k
  1. remark 213
  2. markdown 152
  3. unist 132
  4. mdast 87
  5. react 14

remark-slate-transformer

npm npm check demo

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

And also have experimental support for custom AST.

Demo

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

Install

npm install remark-slate-transformer

Supported unified versions

remark-slate-transformerunified
>=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

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);

Transform slate to remark

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);

Support custom AST

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);

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

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