Editor

<Editor
  label="Post"
  placeholder="Start typing your post"
  defaultValue="<p>We moved every screen onto the new tokens this week. The checkout flow was the last holdout: <em>three</em> raw colours and a spacing value nobody could trace.</p>"
>
  <Editor.Toolbar>

<Editor
  label="Draft"
  defaultValue="<p>Notes from the design review: the empty states need one shared illustration size, and the settings page still uses the old toggle.</p>"
>
  <Editor.Toolbar>
    <Editor.ToolbarGroup aria-label="Text formatting">

<Editor
  label="Summary"
  placeholder="Say what changed and why"
  rows={4}
  invalid
  errorMessage="Write at least one line"

<Editor
  label="Post"
  defaultValue="<p>This post is scheduled. Editing opens again once it is published on <strong>Monday at 9:00</strong>.</p>"
  rows={4}
  disabled
/>

<Editor
  label="Published post"
  defaultValue="<p>Our design system now ships as one package: the components and tokens every screen is built from. Select and copy any of this text; it cannot be changed here.</p>"
  rows={4}
  readOnly
/>

<Editor
  label="Blog post"
  placeholder="Write your blog post"
  defaultValue="<p>An inconsistent interface is rarely one big mistake. It is a <strong>hundred small ones</strong>: a hex code pasted in a hurry, a margin nudged by two pixels, a button rebuilt because the real one was hard to find.</p>"
>
  <Editor.Toolbar>

<Editor
  label="Article"
  placeholder="Write an article"
  rows={14}
  defaultValue="<h2>Adopting tokens</h2><p>Start with colour, then spacing. Replace each raw value with the token that already matches it, for example <code>--fui-text-primary</code>.</p><ol><li>Run a check to list every raw value</li><li>Accept the fixes that match a token exactly</li><li>Review the rest by hand</li></ol><blockquote><p>Most teams clear their colour findings in a single afternoon.</p></blockquote>"
>

<Editor
  label="Bio"
  placeholder="Say who you are in a sentence or two"
  defaultValue="<p>Design engineer on the checkout team. I look after our component library, our tokens and the standards every screen is checked against, and I spend most Fridays turning the week’s findings into small fixes long before any of them can ever reach a customer release.</p>"
  maxLength={280}
  rows={4}