Rich Text Editor

const SAMPLE_HTML =
  '<h2>Before you get in</h2><p>The hot tub is on the back deck, past the <strong>string lights</strong>. It stays at 102°F all year.</p><ul><li>Shower first.</li><li>Keep the cover on whenever nobody is in.</li></ul><h3>Turning on the jets</h3><ol><li>Lift the cover from the house side.</li><li>Press <strong>Jets</strong> once for low, twice for high.</li></ol><blockquote><p>Please be out of the tub by 10 pm.</p></blockquote><p>Something not working? See <a href="/guide/who-to-call">Who to call</a>. <em>Never drain the tub yourself.</em></p>';

const BasicRichTextEditor = () => {
  const [html, setHtml] = useState(SAMPLE_HTML);

  return (
    <>
      <FormField
        label="About the house"
        htmlFor="about"
        hint="Shown on the home page."
      >
        <RichTextEditor
          id="about"
          value={html}
          onChange={setHtml}
          aria-label="About the house"
        />
      </FormField>
      <RichText html={html} />
    </>
  );
};

render(<BasicRichTextEditor />);