@artibox/slate-jsx-serializer
v1.2.0
Published
<div align="center"> <img src="https://raw.githubusercontent.com/ianstormtaylor/slate/master/docs/images/banner.png" height="200" /> </div>
Downloads
30
Readme
Slate jsx serializer.
Installation
npm install @artibox/slate-jsx-serializer --save
or
$ yarn add @artibox/slate-jsx-serializer
Introduction
Quick and easy way to reuse your custom component on both editor and anywhere you want to render the json of value.
Usage
import { Block } from 'slate';
import { createJsxSerializer } from '@artibox/slate-jsx-serializer';
...
function createSomeJsxSerializerRule(config?: CreateSomeJsxSerializerRuleConfig) {
const { type = SOME_TYPE, component = SomeComponent } = config || {};
return createJsxSerializerRule<Block>({
type,
component,
getProps: block => ({
someData: block.data.someData,
otherData: block.data.otherData
})
});
}
const jsxSerializer = createJsxSerializer({
blocks: [
createSomeJsxSerializerRule({
type: 'overrided some type',
component: OverridedSomeComponent // Which may be also used in editor.
})
]
});
...
return (
<div>
{jsxSerializer(valueJSON /* from slate */)}
</div>
);