Giter VIP home page Giter VIP logo

slate-serializers's Introduction

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.

slate-serializers's People

Contributors

thompsonsj avatar charamza avatar github-actions[bot] avatar steven-prybylynskyi avatar jammylin avatar scmmishra avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.