"use client"; import * as React from "react"; import { cn } from "@kineticui/core"; import { BoldIcon, CodeIcon, HeadingIcon, ItalicIcon, LinkIcon, ListIcon, ListOrderedIcon, QuoteIcon, RedoIcon, StrikethroughIcon, UnderlineIcon, UndoIcon } from "@kineticui/icons"; export type RichTextEditorProps = { /** Initial HTML. */ defaultValue?: string; /** Called with the editor's HTML on every change. */ onChange?: (html: string, text: string) => void; placeholder?: string; /** Minimum editable height in px. */ minHeight?: number; /** Show word / character count. */ showCount?: boolean; className?: string; }; type Cmd = { cmd: string; arg?: string; label: string; icon: React.ReactNode; key?: string; state?: string }; const tools: (Cmd | "sep")[] = [ { cmd: "bold", label: "Bold", icon: , key: "B", state: "bold" }, { cmd: "italic", label: "Italic", icon: , key: "I", state: "italic" }, { cmd: "underline", label: "Underline", icon: , key: "U", state: "underline" }, { cmd: "strikeThrough", label: "Strikethrough", icon: , state: "strikeThrough" }, "sep", { cmd: "formatBlock", arg: "h2", label: "Heading", icon: }, { cmd: "formatBlock", arg: "blockquote", label: "Quote", icon: }, { cmd: "formatBlock", arg: "pre", label: "Code block", icon: }, "sep", { cmd: "insertUnorderedList", label: "Bulleted list", icon: , state: "insertUnorderedList" }, { cmd: "insertOrderedList", label: "Numbered list", icon: , state: "insertOrderedList" }, { cmd: "createLink", label: "Link", icon: , key: "K" }, "sep", { cmd: "undo", label: "Undo", icon: }, { cmd: "redo", label: "Redo", icon: }, ]; /** * Lightweight WYSIWYG editor (contentEditable) with a formatting toolbar, shortcuts and HTML output. * Sanitise the HTML on your server before rendering it elsewhere. */ export function RichTextEditor({ defaultValue = "", onChange, placeholder = "Start writing…", minHeight = 180, showCount = true, className }: RichTextEditorProps) { const ref = React.useRef(null); const [active, setActive] = React.useState>(new Set()); const [empty, setEmpty] = React.useState(!defaultValue); const [count, setCount] = React.useState({ words: 0, chars: 0 }); React.useEffect(() => { if (ref.current && defaultValue) ref.current.innerHTML = defaultValue; sync(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const sync = () => { const el = ref.current; if (!el) return; const text = el.innerText.trim(); setEmpty(!text && !el.querySelector("img,li")); setCount({ words: text ? text.split(/\s+/).length : 0, chars: text.length }); onChange?.(el.innerHTML, el.innerText); }; const refreshState = () => { const s = new Set(); for (const t of tools) if (t !== "sep" && t.state && document.queryCommandState(t.state)) s.add(t.state); const block = document.queryCommandValue("formatBlock").toLowerCase(); if (block) s.add(`block:${block}`); setActive(s); }; const exec = (t: Cmd) => { ref.current?.focus(); if (t.cmd === "createLink") { const url = window.prompt("Link URL", "https://"); if (!url) return; document.execCommand("createLink", false, url); } else if (t.cmd === "formatBlock") { const current = document.queryCommandValue("formatBlock").toLowerCase(); document.execCommand("formatBlock", false, current === t.arg ? "p" : t.arg); } else document.execCommand(t.cmd, false, t.arg); refreshState(); sync(); }; return (

{empty ? {placeholder} : null}

{ if (!(e.metaKey || e.ctrlKey)) return; const t = tools.find((x) => x !== "sep" && x.key === e.key.toUpperCase()) as Cmd | undefined; if (t) { e.preventDefault(); exec(t); } }} onPaste={(e) => { // Paste as plain text to avoid foreign styles. e.preventDefault(); document.execCommand("insertText", false, e.clipboardData.getData("text/plain")); }} style={{ minHeight }} className={cn( "px-4 py-3 text-[15px] leading-relaxed outline-none", "[&_h2]:mb-2 [&_h2]:mt-3 [&_h2]:font-display [&_h2]:text-xl [&_h2]:font-semibold", "[&_blockquote]:my-2 [&_blockquote]:border-l-2 [&_blockquote]:border-accent [&_blockquote]:pl-3 [&_blockquote]:text-muted", "[&_pre]:my-2 [&_pre]:rounded-lg [&_pre]:bg-background [&_pre]:p-3 [&_pre]:font-mono [&_pre]:text-[13px]", "[&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6 [&_a]:text-accent [&_a]:underline", )} />

{showCount ? (

{count.words} words {count.chars} chars

) : null}

); }

Rich Text Editor

Installation

Exports