API & Props

Name: @tolipovjs/rich-text
Author: TolipovJS

Full prop surface plus the imperative ref API.

Props

Prop	Type	Default	Description
`value`	`string`	`""`	Controlled HTML content
`onChange`	`(html: string) => void`	`—`	Fires on sanitized content change
`placeholder`	`string`	`"Start typing..."`	Empty-state text
`className`	`string`	`""`	Extra class on root
`style`	`React.CSSProperties`	`—`	Inline style on root
`disabled`	`boolean`	`false`	Disable + grey out
`readOnly`	`boolean`	`false`	View-only (no editing)
`theme`	`"light" \| "dark" \| "auto"`	`"light"`	Theme
`toolbar`	`ToolbarPreset \| ToolbarItem[]`	`"all"`	Toolbar layout
`customButtons`	`ToolbarButtonConfig[]`	`—`	Append custom buttons
`onImageUpload`	`(file: File) => Promise<string>`	`—`	Async upload — return final URL
`autoFocus`	`boolean`	`false`	Focus on mount
`maxLength`	`number`	`—`	Hard cap on character count
`minHeight`	`string`	`"300px"`	CSS min-height for surface
`textColorPresets`	`string[]`	`24 defaults`	Text color swatches
`backgroundColorPresets`	`string[]`	`24 defaults`	BG color swatches
`showStats`	`boolean`	`false`	Show word/char count
`allowHtmlMode`	`boolean`	`true`	Allow Visual ↔ HTML toggle
`onFocus`	`() => void`	`—`	Focus event
`onBlur`	`() => void`	`—`	Blur event
`onSelectionChange`	`() => void`	`—`	Selection change event

Imperative ref API

import { useRef } from "react"
import { RichTextEditor, type RichTextEditorHandle } from "@tolipovjs/rich-text"

function Editor() {
  const ref = useRef<RichTextEditorHandle>(null)
  return (
    <>
      <button onClick={() => ref.current?.focus()}>Focus</button>
      <button onClick={() => ref.current?.clear()}>Clear</button>
      <button onClick={() => console.log(ref.current?.getHTML())}>Log HTML</button>
      <RichTextEditor ref={ref} />
    </>
  )
}

Methods

focus() — focus editor surface
blur() — blur editor
clear() — empty contents
getHTML() — return current sanitized HTML
setHTML(html) — replace contents with new HTML
insertHTML(html) — insert HTML at the current selection
getText() — return plain text
execCommand(cmd, value?) — execute an underlying command
getStats() — return { characters, charactersNoSpaces, words }

Types

import type {
  RichTextEditorProps,
  RichTextEditorHandle,
  ToolbarItem,
  ToolbarPreset,
  BuiltInToolbarItem,
  ToolbarButtonConfig,
  ColorPickerProps,
  SanitizeOptions,
  EditorStats,
  Theme,
} from "@tolipovjs/rich-text"

Utilities

import {
  EditorCommands,
  HTMLSanitizer,
  HistoryStack,
  htmlToMarkdown,
  RichTextEditorContext,
  useRichTextEditor,
} from "@tolipovjs/rich-text"

const md = htmlToMarkdown("<h1>Hi</h1><p>It's <strong>me</strong></p>")
// "# Hi\n\nIt's **me**"

HTMLSanitizer.sanitize(dirty)                         // safe defaults
HTMLSanitizer.sanitize(dirty, { allowStyle: true })   // permit inline style