Forms

RichTextEditor

A WYSIWYG editor that emits clean HTML.

import { RichTextEditor } from "@flinbu/seed";

Release notes

0 words0 characters

Pluto can draft these from the changes.

import { Field, RichTextEditor } from "@flinbu/seed";

const [html, setHtml] = React.useState("");

<div className="flex w-full max-w-xl flex-col gap-sm">
  <Field label="Release notes" hint="Pluto can draft these from the changes.">
    <RichTextEditor placeholder="What changed in this version?" showCount onChange={setHtml}
      defaultValue="<h2>v2.4</h2><p>The accent ramp is <b>one step lighter</b> in Dark.</p><ul><li>Renamed <code>radius-lg</code> to <code>radius-petal</code></li><li>New tokens for charts</li></ul>" />
  </Field>
  {html ? <pre className="m-0 overflow-x-auto rounded-md bg-inset p-sm font-mono text-tertiary body-body-4-regular">{html}</pre> : null}
</div>

A trimmed comment box

Comment

0 words0 / 280

import { Field, RichTextEditor } from "@flinbu/seed";

  return <Field label="Comment"><RichTextEditor toolbar={["bold", "italic", "code", "|", "link", "ul"]} minHeight={80} maxLength={280} placeholder="Add a comment…" /></Field>;

Use it for

Descriptions, comments, release notes, help articles.

Use something else for

Plain text: use Textarea.
Collaboration, tables or images: a dedicated editor library.

Props

Prop	Type	Default	Description
`defaultValue / value / onChange`	`string (HTML)`	–	Content.
`toolbar`	`RteTool[]`	`all`	Tools; '\|' separates.
`placeholder`	`string`	–	Empty text.
`minHeight / maxHeight`	`numberstring`	`160`	Size.
`maxLength / showCount`	`number / boolean`	–	Counting.
`readOnly / disabled / invalid`	`boolean`	`false`	States.
`pasteFormatting`	`boolean`	`false`	Keep formatting on paste.

Accessibility

A labelled multiline textbox with a Formatting toolbar.
⌘B, ⌘I, ⌘U, ⌘K for a link, Tab to indent list items.
Paste is plain text unless pasteFormatting.