Editor

import { Editor } from "@booleanpress/ui/editor"

const TEMPLATE = `<h2>Your password reset link</h2>
<p>Hi {{first_name}},</p>
<p>Someone asked to reset the password of your <strong>Northwind</strong> account. The link below works for <em>one hour</em>:</p>
<ul><li>Open the link on the device you sign in with.</li><li>Choose a password you have not used before.</li></ul>
<blockquote>If you did not ask for this, you can ignore this email.</blockquote>
<p>Questions? Read the <a href="https://example.com/help">help centre</a>.</p>`

export default function EditorBasic() {
  return <Editor aria-label="Email template" defaultValue={TEMPLATE} contentClassName="h-80" className="max-w-2xl" />
}

import * as React from "react"
import { Editor } from "@booleanpress/ui/editor"

export default function EditorControlled() {
  const [html, setHtml] = React.useState("<p>Thanks for your patience: the <strong>DKIM records</strong> are now live.</p>")

  return (
    <div className="flex w-full max-w-2xl flex-col gap-3">
      <Editor aria-label="Reply to Maya Chen" value={html} onChange={setHtml} contentClassName="min-h-32" />
      <div className="flex flex-col gap-1">
        <span className="text-xs font-medium text-muted-foreground">HTML sent to the server</span>
        <pre className="overflow-x-auto rounded-md bg-muted px-3 py-2 font-mono text-xs whitespace-pre-wrap text-foreground">
          {html || "(empty)"}
        </pre>
      </div>
    </div>
  )
}

import { Editor } from "@booleanpress/ui/editor"

const NOTES = `<h3>Release 4.2</h3>
<ul><li><strong>Templates:</strong> open rate per template in the monthly report.</li><li><strong>Logs:</strong> bounces now show the receiving server's reply.</li></ul>
<p>Read the full notes in the <a href="https://example.com/changelog">changelog</a>.</p>`

export default function EditorReadOnly() {
  return <Editor aria-label="Release notes" readOnly defaultValue={NOTES} contentClassName="min-h-0" className="max-w-2xl" />
}

import { Editor } from "@booleanpress/ui/editor"

export default function EditorMinimalToolbar() {
  return (
    <Editor
      aria-label="Internal note"
      toolbar={[["bold", "italic", "underline"], ["bulletList"], ["link"]]}
      placeholder="Add a note only your team can see"
      contentClassName="min-h-24"
      className="max-w-xl"
    />
  )
}

import { Label } from "@booleanpress/ui/label"
import { Editor } from "@booleanpress/ui/editor"

export default function EditorCharacterCount() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-2">
      <Label id="summary-label">Ticket summary</Label>
      <Editor
        aria-labelledby="summary-label"
        toolbar={[["bold", "italic"], ["link"]]}
        characterCount
        maxLength={200}
        defaultValue="<p>Password reset emails bounce since the sender moved to a domain without DKIM records.</p>"
        contentClassName="min-h-24"
      />
    </div>
  )
}

import { Label } from "@booleanpress/ui/label"
import { Editor } from "@booleanpress/ui/editor"

export default function EditorInvalid() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-2">
      <Label id="reply-label">Reply</Label>
      <Editor
        aria-labelledby="reply-label"
        aria-invalid
        aria-describedby="reply-error"
        toolbar={[["bold", "italic", "underline"], ["link"]]}
        contentClassName="min-h-24"
      />
      <p id="reply-error" className="text-xs text-destructive-strong">
        Write a reply before you send it.
      </p>
    </div>
  )
}

import { Editor } from "@booleanpress/ui/editor"

export default function EditorDisabled() {
  return (
    <Editor
      aria-label="Signature"
      disabled
      defaultValue="<p><strong>Sam Ortiz</strong><br>Support, Northwind Mail</p>"
      contentClassName="min-h-24"
      className="max-w-2xl"
    />
  )
}

import { Editor, type EditorTool } from "@booleanpress/ui/editor"

const TOOLS: EditorTool[][] = [["bold", "italic", "link"]]

export default function EditorSizes() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-4">
      <Editor aria-label="Small note" size="sm" toolbar={TOOLS} defaultValue="<p>Small: 12 px text.</p>" contentClassName="min-h-16" />
      <Editor aria-label="Default note" toolbar={TOOLS} defaultValue="<p>Default: 14 px text.</p>" contentClassName="min-h-16" />
      <Editor aria-label="Large note" size="lg" toolbar={TOOLS} defaultValue="<p>Large: 16 px text.</p>" contentClassName="min-h-16" />
    </div>
  )
}

import { Editor } from "@booleanpress/ui/editor"

export default function EditorFilled() {
  return (
    <Editor
      aria-label="Auto-reply message"
      variant="filled"
      defaultValue="<p>We have your message and reply within one working day.</p>"
      contentClassName="min-h-32"
      className="max-w-2xl"
    />
  )
}

import * as React from "react"
import { Button } from "@booleanpress/ui/button"
import { Editor } from "@booleanpress/ui/editor"
import { Label } from "@booleanpress/ui/label"
import { Switch } from "@booleanpress/ui/switch"

export default function EditorWithForm() {
  const [disabled, setDisabled] = React.useState(false)
  const [sent, setSent] = React.useState<string | null>(null)

  return (
    <form
      className="flex w-full max-w-2xl flex-col gap-3"
      onSubmit={(event) => {
        event.preventDefault()
        setSent([...new FormData(event.currentTarget)].map(([key, value]) => `${key} = ${value}`).join(", "))
      }}
    >
      <Editor aria-label="Reply" name="reply" defaultValue="<p>Initial text</p>" disabled={disabled} contentClassName="min-h-24" />
      <div className="flex items-center gap-2">
        <Switch id="reply-disabled" checked={disabled} onCheckedChange={setDisabled} />
        <Label htmlFor="reply-disabled">Disable</Label>
      </div>
      <div className="flex gap-2">
        <Button type="submit">Submit</Button>
        <Button type="reset" variant="outline">
          Reset
        </Button>
      </div>
      <pre className="overflow-x-auto rounded-md bg-muted px-3 py-2 font-mono text-xs whitespace-pre-wrap text-foreground">
        {sent === null ? "Press Submit to see what the form sends." : `Sent: ${sent || "(nothing)"}`}
      </pre>
    </form>
  )
}