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

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

—

Pending

Overview

Eval results

Files

HTML Serialization

Name: tessl/npm-udecode--plate-html-serializer
Author: tessl

HTML serialization functionality for converting Plate editor content (Slate nodes) into HTML strings. This module provides comprehensive control over HTML output formatting, class preservation, and rendering customization.

Capabilities

Core Serialization

Main function for converting Slate node structures to HTML with extensive customization options.

/**
 * Convert Slate Nodes into HTML string
 * @param editor - Plate editor instance
 * @param options - Serialization configuration options
 * @returns HTML string representation of the nodes
 */
function serializeHTMLFromNodes(
  editor: PlateEditor,
  options: SerializeHTMLOptions
): string;

interface SerializeHTMLOptions {
  /** Plugins with renderElement or renderLeaf for custom rendering */
  plugins: PlatePlugin[];
  /** Slate nodes to convert to HTML */
  nodes: TDescendant[];
  /** Enable stripping data attributes (default: true) */
  stripDataAttributes?: boolean;
  /** List of className prefixes to preserve from being stripped out */
  preserveClassNames?: string[];
  /** Slate props to provide if the rendering depends on slate hooks */
  slateProps?: Partial<SlateProps>;
  /** Whether to strip whitespaces from serialized HTML (default: true) */
  stripWhitespace?: boolean;
}

Usage Examples:

import { serializeHTMLFromNodes } from "@udecode/plate-html-serializer";

// Basic serialization
const nodes = [
  {
    type: 'p',
    children: [{ text: 'Hello world' }]
  }
];

const html = serializeHTMLFromNodes(editor, {
  plugins: myPlugins,
  nodes: nodes
});
// Result: "<p>Hello world</p>"

// Advanced serialization with options
const htmlWithOptions = serializeHTMLFromNodes(editor, {
  plugins: myPlugins,
  nodes: complexNodes,
  stripDataAttributes: false,           // Keep data attributes
  preserveClassNames: ['my-custom-'],   // Preserve classes starting with 'my-custom-'
  stripWhitespace: false,               // Keep whitespace formatting
  slateProps: {                         // Additional Slate context
    value: editor.children,
    editor: editor
  }
});

// Serializing with custom class preservation
const styledHtml = serializeHTMLFromNodes(editor, {
  plugins: myPlugins,
  nodes: styledNodes,
  preserveClassNames: ['highlight-', 'theme-', 'slate-'], // Keep these class prefixes
  stripDataAttributes: true // Remove slate data attributes
});

HTML Processing Utilities

Low-level utilities for HTML string processing and DOM manipulation.

/**
 * Convert HTML string into HTML element
 * @param rawHtml - HTML string to convert
 * @param stripWhitespace - Whether to strip whitespace (default: true)
 * @returns HTMLElement with parsed content
 */
function htmlStringToDOMNode(
  rawHtml: string,
  stripWhitespace?: boolean
): HTMLElement;

Usage Example:

import { htmlStringToDOMNode } from "@udecode/plate-html-serializer";

// Convert HTML string to DOM element
const htmlString = '<div><p>Content</p><p>More content</p></div>';
const domElement = htmlStringToDOMNode(htmlString, true);

// Use with deserialization
const slateNodes = deserializeHTMLElement(editor, {
  plugins: myPlugins,
  element: domElement
});

Serialization Process

The serialization process follows these steps:

Element Processing: Each Slate element is matched against plugin render functions
Leaf Processing: Text nodes with marks are processed through leaf renderers
React Rendering: Components are rendered to static HTML using ReactDOM
Post-Processing: HTML is cleaned based on configuration options:
- Strip Slate data attributes (data-slate-node, data-slate-type, etc.)
- Remove test IDs (data-testid)
- Filter CSS classes (preserve only specified prefixes)
- Trim whitespace if enabled

HTML Output Customization

Class Name Preservation

Control which CSS classes are preserved in the final HTML output:

// Preserve all classes starting with specific prefixes
const html = serializeHTMLFromNodes(editor, {
  plugins: myPlugins,
  nodes: nodes,
  preserveClassNames: [
    'slate-',      // Keep Slate's default classes
    'editor-',     // Keep custom editor classes  
    'highlight-'   // Keep syntax highlighting classes
  ]
});

Data Attribute Control

Choose whether to strip Slate-specific data attributes:

// Keep all data attributes (useful for debugging)
const htmlWithData = serializeHTMLFromNodes(editor, {
  plugins: myPlugins,
  nodes: nodes,
  stripDataAttributes: false
});

// Strip data attributes for clean output (default)
const cleanHtml = serializeHTMLFromNodes(editor, {
  plugins: myPlugins,
  nodes: nodes,
  stripDataAttributes: true
});

Whitespace Handling

Control whitespace processing in the output:

// Preserve whitespace formatting
const formattedHtml = serializeHTMLFromNodes(editor, {
  plugins: myPlugins,
  nodes: nodes,
  stripWhitespace: false
});

// Remove extra whitespace for compact output (default)
const compactHtml = serializeHTMLFromNodes(editor, {
  plugins: myPlugins,
  nodes: nodes,
  stripWhitespace: true
});

Integration with Plate Plugins

The serializer integrates with Plate's plugin system to provide customizable rendering:

// Plugin with custom serialization
const myPlugin = {
  key: 'my-element',
  serialize: {
    element: ({ element, children }) => {
      if (element.type === 'my-element') {
        return <div className="custom-element">{children}</div>;
      }
    }
  },
  renderElement: ({ element, children }) => {
    if (element.type === 'my-element') {
      return <div className="custom-element">{children}</div>;
    }
  }
};

// Use plugin in serialization
const html = serializeHTMLFromNodes(editor, {
  plugins: [myPlugin],
  nodes: nodes
});

Install with Tessl CLI

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

docs

deserialization.md

document-processing.md

index.md

serialization.md

tile.json