Skip to content

Serialize Slate JSON objects to HTML and vice versa. Define rules to modify the end result.

Notifications You must be signed in to change notification settings

cloudbeds/slate-serializers

This branch is 15 commits ahead of, 106 commits behind thompsonsj/slate-serializers:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

9f355e7 · Jan 19, 2024
Jan 18, 2024
May 3, 2023
Feb 21, 2023
May 3, 2023
Jan 18, 2023
Nov 22, 2022
May 3, 2023
Feb 21, 2023
Nov 28, 2022
Jan 19, 2024
Jan 19, 2024
Nov 28, 2022
Nov 22, 2022

Repository files navigation

slate-serializers

A collection of serializers to convert Slate JSON objects to various formats and vice versa. Designed to work in both Node.js and browser environments.

Serializers included so far:

View the demo at https://thompsonsj.github.io/slate-serializers-demo.

Setup

Compatibility

Serializers are only compatible with Slate >=0.50.0. Earlier versions used a different data model.

Note that compatibility has only been tested with Slate v0.72.8. These serializers are still in active development/testing.

Install

yarn add slate-serializers
# or
npm install slate-serializers

Configuration

Each serializer uses a default configuration, which may not transform your data effectively.

One of the principles of Slate is its schema-less core.

Check configuration objects in src/config/. Extend the default configuration or write your own in order to apply your schema/transformation rules.

Serializers

slateToHtml

import { slateToHtml } from 'slate-serializers'

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

const serializedToHtml = slateToHtml(slate)
// output
// <h1>Heading 1</h1><p>Paragraph 1</p>

Configuration

By default, slateToHtml incorporates transformation rules based on the example in Deserializing | Serializing | Slate.

If you are using Payload CMS, import the Payload configuration file and pass it as a parameter to the serializer.

import { slateToHtml, payloadSlateToDomConfig } from 'slate-serializers'

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

const serializedToHtml = slateToHtml(slate, payloadSlateToDomConfig)

You can create your own configuration file that implements your schema. See src/config/slateToDom/payload.ts for an example of how to extend the default configuration or copy src/config/slateToDom/default.ts and rewrite it as appropriate.

htmlToSlate

import { htmlToSlate } from 'slate-serializers'

const html = `<h1>Heading 1</h1><p>Paragraph 1</p>`

const serializedToSlate = htmlToSlate(html)
// output
/*
[
  {
    children: [
      {
        text: 'Heading 1',
      },
    ],
    type: 'h1',
  },
  {
    children: [
      {
        text: 'Paragraph 1',
      },
    ],
    type: 'p',
  },
]
/*

Configuration

By default, htmlToSlate incorporates transformation rules based on the example in HTML | Serializing | Slate.

If you are using Payload CMS, import the Payload configuration file and pass it as a parameter to the serializer.

import { htmlToSlate, payloadHtmlToSlateConfig } from 'slate-serializers'

const html = `<h1>Heading 1</h1><p>Paragraph 1</p>`

const serializedToSlate = htmlToSlate(html, payloadHtmlToSlateConfig)

You can create your own configuration file that implements your schema. See src/config/htmlToSlate/payload.ts for an example of how to extend the default configuration or copy src/config/htmlToSlate/default.ts and rewrite it as appropriate.

For a breakdown of configuration options, see docs/config/htmlToSlate.md.

Whitespace

htmlToSlate processes whitespace in a similar way to browsers. It minifies whitespace while trying to preserve meaning. For details, see docs/engineering.md#whitespace.

slateToDom

slateToHtml is a simple wrapper that runs dom-serializer on the output from slateToDom.

slateToDom is made available in case you wish to work with the DOM output yourself or run dom-serializer using any of the available options.

It accepts the same configuration object as slateToHtml.

Commits

TLDR: contributors can format commit messages in any way, maintainers should use conventional commits.

This repository uses conventional commits.

Conventional commits are not enforced. General guidance:

  • Commit messages can be formatted in any way on a pull request.
  • Conventional commit messages are preferred on pull request squash and merge.

Run npx cz instead of git commit to lint commit messages using @commitlint/cli.

About

Serialize Slate JSON objects to HTML and vice versa. Define rules to modify the end result.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 99.7%
  • JavaScript 0.3%