unified

Project: inokawa/remark-slate-transformer

Package: remark-slate-transformer@0.4.0

  1. Dependencies: 0·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 142
  3. unist 120
  4. mdast 89
  5. react 17

remark-slate-transformer

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

Demo

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

Install

npm install remark-slate-transformer

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