@artibox/slate-jsx-serializer

<div align="center"> <img src="https://raw.githubusercontent.com/ianstormtaylor/slate/master/docs/images/banner.png" height="200" /> </div>

Usage no npm install needed!

<script type="module">
  import artiboxSlateJsxSerializer from 'https://cdn.skypack.dev/@artibox/slate-jsx-serializer';
</script>

README

@artibox/slate-jsx-serializer

Slate jsx serializer.

npm package npm downloads

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