tessl/npm-platejs--core

Core plugin system and editor functionality for the Plate rich text editor framework

—

Pending

Overview

Eval results

Files

HTML Serialization

Name: tessl/npm-platejs--core
Author: tessl

Complete HTML serialization and deserialization system with customizable parsing, cleaning utilities, and Slate format conversion.

Capabilities

HtmlPlugin

Main plugin that enables HTML serialization and deserialization support in Plate editor.

/**
 * HTML plugin for serialization and deserialization
 */
const HtmlPlugin: SlatePlugin;

deserializeHtml

Core functionality for converting HTML content into Slate editor format.

/**
 * Deserialize HTML content to Slate nodes
 * @param editor - Slate editor instance
 * @param options - Deserialization options
 * @returns Array of Slate nodes
 */
function deserializeHtml(
  editor: SlateEditor, 
  options: {
    element: HTMLElement | string;
    collapseWhiteSpace?: boolean;
    defaultElementPlugin?: WithRequiredKey;
  }
): any[];

/**
 * Deserialize a single HTML element to Slate format
 * @param editor - Slate editor instance
 * @param element - HTML element to deserialize
 * @returns Slate node representation
 */
function deserializeHtmlElement(
  editor: SlateEditor, 
  element: HTMLElement
): DeserializeHtmlNodeReturnType;

Usage Examples:

import { createSlateEditor, HtmlPlugin, deserializeHtml } from "@platejs/core";

const editor = createSlateEditor({
  plugins: [HtmlPlugin]
});

// Deserialize HTML string
const htmlContent = '<p>Hello <strong>world</strong></p>';
const slateNodes = deserializeHtml(editor, { 
  element: htmlContent,
  collapseWhiteSpace: true 
});

// Deserialize HTML element
const element = document.createElement('div');
element.innerHTML = '<p>Content</p>';
const nodes = deserializeHtml(editor, { element });

serializeHtml

Convert Slate content to HTML format with customization options.

/**
 * Serialize Slate nodes to HTML
 * @param editor - Slate editor instance
 * @param options - Serialization options
 * @returns HTML string representation
 */
function serializeHtml(
  editor: SlateEditor,
  options?: { 
    nodes?: any[];
    dnd?: boolean;
    stripDataAttributes?: boolean;
  }
): string;

Usage Examples:

// Serialize current editor content
const html = serializeHtml(editor);

// Serialize specific nodes
const html = serializeHtml(editor, {
  nodes: [
    { type: 'p', children: [{ text: 'Hello world' }] }
  ]
});

HTML Parsing Functions

Utilities for parsing HTML strings and converting between formats.

/**
 * Parse HTML string to Document
 * @param html - HTML string to parse
 * @returns Parsed Document object
 */
function parseHtmlDocument(html: string): Document;

/**
 * Parse HTML string to HTMLElement
 * @param html - HTML string to parse
 * @returns Parsed HTMLElement
 */
function parseHtmlElement(html: string): HTMLElement;

/**
 * Convert HTML string to DOM node
 * @param rawHtml - Raw HTML string
 * @returns HTMLElement node
 */
function htmlStringToDOMNode(rawHtml: string): HTMLElement;

HTML Cleaning Functions

Comprehensive HTML cleaning utilities for normalizing content from various sources.

/**
 * Clean HTML text nodes by removing unnecessary whitespace
 * @param rootNode - Root node to clean
 */
function cleanHtmlTextNodes(rootNode: Node): void;

/**
 * Clean HTML br elements and normalize line breaks
 * @param rootNode - Root node to clean
 */
function cleanHtmlBrElements(rootNode: Node): void;

/**
 * Collapse whitespace in HTML element according to CSS rules
 * @param element - Element to process
 * @returns Element with collapsed whitespace
 */
function collapseWhiteSpace(element: HTMLElement): HTMLElement;

/**
 * Pre-process HTML string before parsing
 * @param html - Raw HTML string
 * @returns Cleaned HTML string
 */
function preCleanHtml(html: string): string;

/**
 * Post-process HTML string after serialization
 * @param html - HTML string to clean
 * @returns Cleaned HTML string
 */
function postCleanHtml(html: string): string;

HTML Element Classification

Type guards and utilities for HTML element identification.

/**
 * Check if node is an HTML element
 * @param node - Node to check
 * @returns True if node is Element
 */
function isHtmlElement(node: Node): node is Element;

/**
 * Check if node is a text node
 * @param node - Node to check
 * @returns True if node is Text
 */
function isHtmlText(node: Node): node is Text;

/**
 * Check if element is a block-level element
 * @param node - Node to check
 * @returns True if block element
 */
function isHtmlBlockElement(node: Node): boolean;

/**
 * Check if element is an inline element
 * @param node - Node to check
 * @returns True if inline element
 */
function isHtmlInlineElement(node: Node): boolean;

HTML Constants

// Character constants for text processing
const CARRIAGE_RETURN: string;
const LINE_FEED: string;
const NO_BREAK_SPACE: string;
const SPACE: string;
const TAB: string;
const ZERO_WIDTH_SPACE: string;

// HTML element types
const BLOCK_ELEMENTS: Set<string>;
const INLINE_ELEMENTS: Set<string>;
const VOID_ELEMENTS: Set<string>;

Types

type DeserializeHtmlChildren = ChildNode | any | string | null;

type DeserializeHtmlNodeReturnType = 
  | any
  | any[]
  | DeserializeHtmlChildren[]
  | string 
  | null;

interface HtmlDeserializeOptions {
  element: HTMLElement | string;
  collapseWhiteSpace?: boolean;
  defaultElementPlugin?: WithRequiredKey;
}

Install with Tessl CLI