/** * @usevyre/react — RichTextEditor * * AI CONTEXT: * ┌─────────────────────────────────────────────────────────────────┐ * │ Component: RichTextEditor (WYSIWYG, contentEditable) │ * │ Import: import { RichTextEditor } from "@usevyre/react" │ * │ │ * │ CONTROLLED. value is an HTML string; onChange gives next HTML. │ * │ Zero dependencies — native contentEditable + execCommand. │ * │ │ * │ Props: │ * │ value = string (HTML, controlled) │ * │ onChange = (html: string) => void │ * │ placeholder?= string (shown when empty) │ * │ disabled? = boolean (not editable, dimmed) │ * │ readOnly? = boolean (not editable, no toolbar) │ * │ toolbar? = RichTextTool[] (which buttons; default = all) │ * │ minHeight? = string (CSS, default "10rem") │ * │ sanitize? = (html: string) => string │ * │ │ * │ RichTextTool = "bold"|"italic"|"underline"|"strike"| │ * │ "h1"|"h2"|"h3"|"ul"|"ol"|"quote"|"code"|"link"|"clear" │ * │ │ * │ Controlled: store value in state and set it in onChange. │ * │ SECURITY: value is rendered as raw HTML. Sanitize untrusted │ * │ HTML before passing it in — e.g. sanitize={DOMPurify.sanitize}. │ * │ sanitize runs on render-in AND emit-out. The link tool blocks │ * │ javascript:/data:/vbscript: URLs regardless. │ * └─────────────────────────────────────────────────────────────────┘ * * @example * const [html, setHtml] = useState("

Hello world

"); * */ import React from "react"; import type { BaseProps } from "../../types"; export type RichTextTool = "bold" | "italic" | "underline" | "strike" | "h1" | "h2" | "h3" | "ul" | "ol" | "quote" | "code" | "link" | "clear"; export interface RichTextEditorProps extends BaseProps { value: string; onChange: (html: string) => void; placeholder?: string; disabled?: boolean; readOnly?: boolean; toolbar?: RichTextTool[]; minHeight?: string; /** * Optional sanitizer applied to the HTML on render (before it is shown) and on * emit (before onChange). The component is zero-dependency by design, so it * does NOT sanitize untrusted HTML on its own — pass your own sanitizer for * untrusted content, e.g. `sanitize={(h) => DOMPurify.sanitize(h)}`. */ sanitize?: (html: string) => string; } export declare const RichTextEditor: React.ForwardRefExoticComponent>;