@artibox/slate-jsx-serializer

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

API

• typings
• createJsxSerializerRule
• createJsxSerializer