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 Deserialization

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

HTML deserialization functionality for converting HTML content into Plate editor format (Slate nodes). This module provides comprehensive support for parsing HTML elements, text nodes, attributes, and complex document structures.

Capabilities

Deserialization Plugin

Creates a Plate plugin that enables automatic HTML deserialization when content is pasted or inserted into the editor.

/**
 * Creates HTML deserializer plugin for Plate
 * @param options - Configuration options for the deserializer
 * @returns PlatePlugin configured for HTML deserialization
 */
function createDeserializeHTMLPlugin(
  options?: WithDeserializeHTMLOptions
): PlatePlugin;

/**
 * Higher-order function that adds HTML deserialization capability to an editor
 * @param options - Configuration options for deserialization
 * @returns WithOverride function for editor enhancement
 */
function withDeserializeHTML(
  options?: WithDeserializeHTMLOptions
): WithOverride;

interface WithDeserializeHTMLOptions {
  /** Array of Plate plugins to use for deserialization rules */
  plugins?: PlatePlugin[];
}

/** Identifier string for the HTML deserializer */
const htmlDeserializerId: "HTML Deserializer";

Usage Example:

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

const editor = createPlateEditor({
  plugins: [
    createDeserializeHTMLPlugin({
      plugins: [] // Add your custom plugins for deserialization rules
    })
  ]
});

HTML Element Deserialization

Core functions for deserializing individual HTML elements into Slate structures.

/**
 * Deserializes HTML element to Slate format
 * @param editor - Plate editor instance
 * @param options - Deserialization configuration
 * @returns Deserialized Slate content
 */
function deserializeHTMLElement<T = {}>(
  editor: PlateEditor<T>,
  options: {
    plugins: PlatePlugin<T>[];
    element: HTMLElement;
  }
): DeserializeHTMLReturn;

/**
 * Deserializes HTML element or child node with comprehensive processing
 * @param editor - Plate editor instance  
 * @param plugins - Array of Plate plugins for deserialization rules
 * @returns Function that deserializes a node
 */
function deserializeHTMLNode<T = {}>(
  editor: PlateEditor<T>,
  plugins: PlatePlugin<T>[]
): (node: HTMLElement | ChildNode) => DeserializeHTMLReturn;

/**
 * Deserializes HTML to Slate Element using plugin rules
 * @param editor - Plate editor instance
 * @param options - Element deserialization options
 * @returns Slate Element or undefined
 */
function deserializeHTMLToElement<T = {}>(
  editor: PlateEditor<T>,
  options: {
    plugins: PlatePlugin<T>[];
    element: HTMLElement;
    children: DeserializeHTMLChildren[];
  }
): TElement | undefined;

Text and Fragment Processing

Specialized functions for handling text nodes, fragments, and special HTML elements.

/**
 * Deserializes HTML text node to text content
 * @param node - HTML element or child node
 * @returns Text content or null for newlines
 */
function deserializeHTMLToText(node: HTMLElement | ChildNode): string | null;

/**
 * Deserializes HTML body element to Fragment
 * @param options - Fragment deserialization options
 * @returns Slate descendant array or undefined
 */
function deserializeHTMLToFragment(options: {
  element: HTMLElement;
  children: DeserializeHTMLChildren[];
}): TDescendant[] | undefined;

/**
 * Deserializes HTML BR elements to break lines
 * @param node - HTML element or child node  
 * @returns Newline string or undefined
 */
function deserializeHTMLToBreak(node: HTMLElement | ChildNode): string | undefined;

Mark Processing

Functions for handling HTML elements that represent text formatting (marks).

/**
 * Deserializes HTML to TDescendant[] with marks on Text
 * Builds the leaf from the leaf deserializers of each plugin
 * @param editor - Plate editor instance
 * @param props - Mark deserialization properties
 * @returns Array of Slate descendants with applied marks
 */
function deserializeHTMLToMarks<T = {}>(
  editor: PlateEditor<T>,
  props: DeserializeMarksProps<T>
): TDescendant[];

interface DeserializeMarksProps<T = {}> {
  /** Array of Plate plugins for mark deserialization rules */
  plugins: PlatePlugin<T>[];
  /** HTML element to process for marks */
  element: HTMLElement;
  /** Child elements to apply marks to */
  children: DeserializeHTMLChildren[];
}

Usage Example:

import { 
  deserializeHTMLElement,
  deserializeHTMLToDocumentFragment 
} from "@udecode/plate-html-serializer";

// Deserialize individual HTML element
const htmlElement = document.createElement('div');
htmlElement.innerHTML = '<p><strong>Bold text</strong></p>';

const slateContent = deserializeHTMLElement(editor, {
  plugins: myPlugins,
  element: htmlElement.firstElementChild as HTMLElement
});

// Deserialize complete HTML string to document fragment  
const htmlString = '<div><p>Paragraph 1</p><p>Paragraph 2</p></div>';
const documentFragment = deserializeHTMLToDocumentFragment(editor, {
  plugins: myPlugins,
  element: htmlString,
  stripWhitespace: true
});

Types

type DeserializeHTMLChildren = ChildNode | TDescendant | string | null;

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

type DeserializedHTMLElement = TDescendant;

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