slate-sugar
Create Slate documents using JSX.
The purpose of slate-sugar is to make Slate nodes and documents creation:
- Painless by using smart defaults and inferring properties based on the input
- Comprehensible by offering a declarative way to create structured documents
Install
yarn add slate-sugar
Usage
Basic
This is the quickest way to use slate-sugar
. If you need a terser syntax, you should declare a type mapping beforehand.
/* @jsx h */import createHyperscript from 'slate-sugar'; const h = ;const document = <document> <heading ="block" => Introduction </heading> <paragraph ="block"> This is a super <text =>bold</text> paragraph Also it has a <link ="inline" =>link</link> in it </paragraph> </document>;
With Mapping
Here is the recommended way to use slate-sugar
, leading to the leanest code. The only difference is that you declare your blocks, inlines and marks types ahead of time.
/* @jsx h */import createHyperscript from 'slate-sugar'; const h = ;const document = <document> <heading ="introduction"> Introduction </heading> <paragraph> This is a super <bold>bold</bold> paragraph Also it has a <link ="/">link</link> in it </paragraph> </document>;
Documentation
createHyperscript([groups], [nodeCreators])
groups?: { [groupName: string]: { [key: string]: string } }
: groups of types in the form of constants.nodeCreators?: { [tagName: string]: (tagName, attributes, children) => Slate.Node }
: mapping of functions to use to create a Node from a given tag name.
Returns a JSX-compatible function.
By default, slate-sugar
is able to create:
blocks
: creates aSlate.BLock
with type being the tag name, the rest is considered data.inlines
: creates aSlate.Inline
with type being the tag name, the rest is considered data.marks
: creates aSlate.Text
with type being a mark applied to the text, the rest is considered the mark's data.state
: creates aSlate.State
(must have a single child of typeSlate.Document
)document
: creates aSlate.Document
text
: creates aSlate.Text
with marks if passed (<text marks={[...]} />
)