unified

Project: inokawa/remark-slate-transformer

Package: remark-slate-transformer@0.7.3

  1. Dependents: 0
  2. remark plugin to transform remark syntax tree (mdast) to Slate document tree, and vice versa. Made for WYSIWYG markdown editor.
  1. remark 202
  2. markdown 155
  3. unist 132
  4. mdast 86
  5. react 15

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. And also support ~0.47.9 currently, but I don't know in the future.

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.7.0>=10.1.0
>=0.5.0 <0.7.0>=10.0.0
<0.5.0<10.0.0

Usage

Transform remark to slate

0.50+

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

~0.47.9

import { Value } from "slate";
import { unified } from "unified";
import markdown from "remark-parse";
import { remarkToSlateLegacy } from "remark-slate-transformer";

const processor = unified().use(markdown).use(remarkToSlateLegacy);

const text = "# hello world";

const value = Value.fromJSON(processor.processSync(text).result);
console.log(value);

Transform slate to remark

0.50+

import { unified } from "unified";
import stringify from "remark-stringify";
import { slateToRemark } from "remark-slate-transformer";

const processor = unified().use(slateToRemark).use(stringify);

const value = ...; // value passed to slate editor

const ast = processor.runSync({
  type: "root",
  children: value,
});
const text = processor.stringify(ast);
console.log(text);

~0.47.9

import { unified } from "unified";
import stringify from "remark-stringify";
import { slateToRemarkLegacy } from "remark-slate-transformer";

const processor = unified().use(slateToRemarkLegacy).use(stringify);

const value = ...; // value passed to slate editor

const ast = processor.runSync({
  type: "root",
  children: value.toJSON().document.nodes,
});
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(slateToRemark, {
    overrides: {
      head: (node, next) => ({
        type: "heading",
        depth: node.dep,
        children: next(node.children),
      }),
      foo: (node, next) => ({ type: "foo", bar: node.value }),
    },
  })
  .use(stringify);
const ast = s2r.runSync({
  type: "root",
  children: 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. Clone this repo.
  2. Run npm install.
  3. Commit your fix.
  4. Make a PR and confirm all the CI checks passed.