@slate-serializers/template

@slate-serializers/template

Render Slate JSON as a combination of HTML and custom serializers that you pass to the configuration.

Returns an array. By default, each array element is the output of @slate-serializers/html. If you pass a custom serializers, your serialized output will be included in this array. These serializers match on top-level Slate nodes only using the type attribute.

Usage

slateToTemplate

import { slateToTemplate } from '@slate-serializers/template'

const slate = [
  {
    children: [
      {
        text: 'Heading 1',
      },
    ],
    type: 'h1',
  },
  {
    children: [
      {
        text: 'Paragraph 1',
      },
    ],
    type: 'p',
  },
]

const serializedToArray = slateToTemplate(slate)
// output
// ["<h1>Heading 1</h1>", "<p>Paragraph 1</p>"]

Configuration

Define a custom serializer to include any output for top-level Slate nodes of a given type.

const slate = [
  {
    children: [
      {
        text: 'Paragraph',
      },
    ],
    type: 'p',
  },
  {
    children: [
      {
        buttonType: 'primary',
        text: 'Button',
      },
    ],
    type: 'button',
  },
];

const config: SlateToTemplateConfig = {
  ...defaultTemplateConfig,
  customElementSerializers: {
    button: ({ node }) => {
      return () =>
        `<button class="${node.buttonType}">Button HTML string generated by function</button>`;
    },
  },
};

const serializedToArray = slateToTemplate(slate)
// output
// ["<p>Paragraph</p>", [Function]]