or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

deserialization.mddocument-processing.mdindex.mdserialization.md
tile.json

tessl/npm-udecode--plate-html-serializer

HTML serializer plugin for Plate rich text editor framework enabling bidirectional conversion between Slate nodes and HTML format

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@udecode/plate-html-serializer@7.0.x

To install, run

npx @tessl/cli install tessl/npm-udecode--plate-html-serializer@7.0.0

index.mddocs/

Plate HTML Serializer

The Plate HTML Serializer provides bidirectional conversion between Plate editor content (Slate nodes) and HTML format for the Plate rich text editor framework. It enables seamless integration between HTML content and Plate's internal Slate data structure, supporting both serialization (Slate → HTML) and deserialization (HTML → Slate).

Package Information

  • Package Name: @udecode/plate-html-serializer
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @udecode/plate-html-serializer

Core Imports

import { 
  // Plugin functions
  createDeserializeHTMLPlugin,
  withDeserializeHTML,
  // Serialization functions
  serializeHTMLFromNodes,
  htmlStringToDOMNode,
  // Deserialization functions
  deserializeHTMLToDocumentFragment,
  deserializeHTMLElement,
  deserializeHTMLNode,
  deserializeHTMLToElement,
  deserializeHTMLToText,
  deserializeHTMLToFragment,
  deserializeHTMLToMarks,
  deserializeHTMLToBreak,
  // Constants
  htmlDeserializerId
} from "@udecode/plate-html-serializer";

For CommonJS:

const { 
  // Plugin functions
  createDeserializeHTMLPlugin,
  withDeserializeHTML,
  // Serialization functions
  serializeHTMLFromNodes,
  htmlStringToDOMNode,
  // Deserialization functions
  deserializeHTMLToDocumentFragment,
  deserializeHTMLElement,
  deserializeHTMLNode,
  deserializeHTMLToElement,
  deserializeHTMLToText,
  deserializeHTMLToFragment,
  deserializeHTMLToMarks,
  deserializeHTMLToBreak,
  // Constants
  htmlDeserializerId
} = require("@udecode/plate-html-serializer");

Basic Usage

import { createPlateEditor } from "@udecode/plate-core";
import { 
  createDeserializeHTMLPlugin,
  serializeHTMLFromNodes,
  deserializeHTMLToDocumentFragment
} from "@udecode/plate-html-serializer";

// Create editor with HTML deserialization support
const editor = createPlateEditor({
  plugins: [
    createDeserializeHTMLPlugin({
      plugins: [] // Add your Plate plugins here for deserialization rules
    })
  ]
});

// Serialize Slate nodes to HTML
const nodes = [{ type: 'p', children: [{ text: 'Hello world' }] }];
const html = serializeHTMLFromNodes(editor, {
  plugins: [], // Add your Plate plugins here for rendering
  nodes: nodes,
  stripDataAttributes: true,
  stripWhitespace: true
});
console.log(html); // "<p>Hello world</p>"

// Deserialize HTML string to Slate nodes
const htmlString = '<p>Hello <strong>world</strong></p>';
const slateNodes = deserializeHTMLToDocumentFragment(editor, {
  plugins: [], // Add your Plate plugins here for deserialization rules
  element: htmlString,
  stripWhitespace: true
});
console.log(slateNodes);
// [{ type: 'p', children: [{ text: 'Hello ' }, { text: 'world', bold: true }] }]

Architecture

The Plate HTML Serializer is built around two core modules:

  • Deserializer: Converts HTML elements and strings into Slate node structures, with support for elements, marks, text nodes, and fragments
  • Serializer: Converts Slate node structures into HTML strings, with customizable rendering and formatting options
  • Plugin System: Integrates with Plate's plugin architecture for extensible serialization/deserialization rules
  • Type Safety: Full TypeScript support with comprehensive type definitions for all operations

Capabilities

HTML Deserialization

Core functionality for converting HTML content into Slate node structures, including plugin integration and low-level processing utilities.

function createDeserializeHTMLPlugin(
  options?: WithDeserializeHTMLOptions
): PlatePlugin;

function withDeserializeHTML(
  options?: WithDeserializeHTMLOptions  
): WithOverride;

function deserializeHTMLElement<T = {}>(
  editor: PlateEditor<T>,
  options: { plugins: PlatePlugin<T>[]; element: HTMLElement; }
): DeserializeHTMLReturn;

function deserializeHTMLNode<T = {}>(
  editor: PlateEditor<T>,
  plugins: PlatePlugin<T>[]
): (node: HTMLElement | ChildNode) => DeserializeHTMLReturn;

function deserializeHTMLToElement<T = {}>(
  editor: PlateEditor<T>,
  options: {
    plugins: PlatePlugin<T>[];
    element: HTMLElement;
    children: DeserializeHTMLChildren[];
  }
): TElement | undefined;

function deserializeHTMLToText(
  node: HTMLElement | ChildNode
): string | null;

function deserializeHTMLToFragment(options: {
  element: HTMLElement;
  children: DeserializeHTMLChildren[];
}): TDescendant[] | undefined;

function deserializeHTMLToMarks<T = {}>(
  editor: PlateEditor<T>,
  props: DeserializeMarksProps<T>
): TDescendant[];

function deserializeHTMLToBreak(
  node: HTMLElement | ChildNode
): string | undefined;

interface WithDeserializeHTMLOptions {
  plugins?: PlatePlugin[];
}

const htmlDeserializerId: "HTML Deserializer";

HTML Deserialization

HTML Serialization

Convert Slate nodes to HTML strings with extensive customization options for rendering, class preservation, and formatting.

function serializeHTMLFromNodes(
  editor: PlateEditor,
  options: SerializeHTMLOptions
): string;

function htmlStringToDOMNode(
  rawHtml: string,
  stripWhitespace?: boolean
): HTMLElement;

HTML Serialization

HTML Document Processing

Low-level utilities for processing HTML elements, fragments, and document structures into Slate-compatible formats.

function deserializeHTMLToDocumentFragment<T = {}>(
  editor: PlateEditor<T>,
  options: DocumentFragmentOptions<T>
): TDescendant[];

Document Processing

Types

// Deserialization types
type DeserializeHTMLChildren = ChildNode | TDescendant | string | null;

type DeserializeHTMLReturn = 
  | string 
  | null 
  | TDescendant[] 
  | TElement 
  | DeserializeHTMLChildren[];

type DeserializedHTMLElement = TDescendant;

interface DeserializeMarksProps<T = {}> {
  plugins: PlatePlugin<T>[];
  element: HTMLElement;
  children: DeserializeHTMLChildren[];
}

interface WithDeserializeHTMLOptions {
  plugins?: PlatePlugin[];
}

interface DocumentFragmentOptions<T> {
  plugins: PlatePlugin<T>[];
  element: HTMLElement | string;
  stripWhitespace?: boolean;
}

// Serialization types
interface SerializeHTMLOptions {
  plugins: PlatePlugin[];
  nodes: TDescendant[];
  stripDataAttributes?: boolean;
  preserveClassNames?: string[];
  slateProps?: Partial<SlateProps>;
  stripWhitespace?: boolean;
}