import { useState } from "react"
import { RichTextEditor } from "@tolipovjs/rich-text"
import "@tolipovjs/rich-text/styles.css"   // ← import once in your app

export function MyEditor() {
  const [html, setHtml] = useState("<p>Hello world!</p>")
  return <RichTextEditor value={html} onChange={setHtml} />
}

<RichTextEditor className="my-editor" value={html} onChange={setHtml} />

<RichTextEditor theme="dark" />     // forced dark
<RichTextEditor theme="light" />    // forced light
<RichTextEditor theme="auto" />     // follow OS preference

<RichTextEditor toolbar="minimal" />
<RichTextEditor toolbar="basic" />
<RichTextEditor toolbar="all" />

<RichTextEditor
  toolbar={[
    "undo", "redo", "|",
    "bold", "italic", "underline", "|",
    "heading", "|",
    "link", "image",
  ]}
/>

import { Sparkles } from "lucide-react"

<RichTextEditor
  customButtons={[
    {
      id: "ai",
      title: "AI assist",
      icon: <Sparkles size={16} />,
      onClick: () => console.log("✨"),
    },
  ]}
/>

<RichTextEditor
  slashMenu             // type "/" to open the command palette
  markdownShortcuts     // **bold**, # heading, - list, > quote, ---
  bubbleToolbar         // floating toolbar on text selection
/>

import { DEFAULT_SLASH_COMMANDS, type SlashCommand } from "@tolipovjs/rich-text"
import { Sparkles } from "lucide-react"

const ai: SlashCommand = {
  id: "ai",
  label: "AI continue",
  description: "Let the model finish this sentence",
  icon: <Sparkles size={16} />,
  keywords: ["ai", "continue"],
  run: () => doAiStuff(),
}

<RichTextEditor slashMenu={[ai, ...DEFAULT_SLASH_COMMANDS]} />

<RichTextEditor bubbleToolbar={["bold", "italic", "code", "|", "h1", "h2", "link"]} />

<RichTextEditor
  findReplace                                 // Ctrl/Cmd+F → popup
  imageResize                                 // click image → corner drag handles
  cleanPaste                                  // strip Word/Google Docs clutter (default true)
  autosave={{
    interval: 1500,                           // debounce window in ms
    onSave: (html) => fetch("/draft", { method: "PUT", body: html }),
    onError: (err) => console.error(err),
  }}
  onDirtyChange={(dirty) => setUnsavedBadge(dirty)}
/>

const ref = useRef<RichTextEditorHandle>(null)

// After successful save:
await api.save(ref.current!.getHTML())
ref.current!.markClean()

// Check from anywhere:
if (ref.current!.isDirty()) warnBeforeNavigate()

ref.current?.openFindReplace()
ref.current?.closeFindReplace()

import { useRef } from "react"
import { RichTextEditor, type RichTextEditorHandle } from "@tolipovjs/rich-text"

function Editor() {
  const ref = useRef<RichTextEditorHandle>(null)

  return (
    <>
      <button onClick={() => ref.current?.focus()}>Focus</button>
      <button onClick={() => ref.current?.clear()}>Clear</button>
      <button onClick={() => console.log(ref.current?.getHTML())}>Log HTML</button>
      <button onClick={() => console.log(ref.current?.getStats())}>Word count</button>
      <RichTextEditor ref={ref} />
    </>
  )
}

<RichTextEditor
  onImageUpload={async (file) => {
    const form = new FormData()
    form.append("image", file)
    const res = await fetch("/api/upload", { method: "POST", body: form })
    const { url } = await res.json()
    return url
  }}
/>

import { htmlToMarkdown } from "@tolipovjs/rich-text"

const md = htmlToMarkdown("<h1>Hi</h1><p>It's <strong>me</strong></p>")
// → "# Hi\n\nIt's **me**"

HTMLSanitizer.sanitize(dirty)                         // safe defaults
HTMLSanitizer.sanitize(dirty, { allowStyle: true })   // permit inline style

import { useState } from "react"
import { RichTextEditor, htmlToMarkdown } from "@tolipovjs/rich-text"
import "@tolipovjs/rich-text/styles.css"

export function BlogEditor({ onPublish }: { onPublish: (md: string) => void }) {
  const [html, setHtml] = useState("")
  return (
    <>
      <RichTextEditor
        value={html}
        onChange={setHtml}
        toolbar="all"
        slashMenu
        markdownShortcuts
        bubbleToolbar
        placeholder="Write your post… Type / for blocks"
        minHeight="500px"
      />
      <button onClick={() => onPublish(htmlToMarkdown(html))}>Publish</button>
    </>
  )
}

<RichTextEditor
  value={html}
  onChange={setHtml}
  toolbar="minimal"
  bubbleToolbar
  showStats={false}
  maxLength={500}
  minHeight="80px"
  placeholder="Add a comment…"
/>

<RichTextEditor
  value={html}
  onChange={setHtml}
  toolbar="basic"
  slashMenu
  markdownShortcuts
  bubbleToolbar
  theme="auto"
  placeholder="Press / for blocks, ** for bold, # for heading"
/>

<RichTextEditor
  value={html}
  onChange={setHtml}
  toolbar={["bold", "italic", "underline", "|", "link", "|", "ul", "ol"]}
  allowHtmlMode={false}
  onImageUpload={async (file) => {
    const fd = new FormData()
    fd.append("file", file)
    const res = await fetch("/api/attach", { method: "POST", body: fd })
    const { url } = await res.json()
    return url
  }}
/>

import { Controller, useForm } from "react-hook-form"
import { RichTextEditor } from "@tolipovjs/rich-text"

export function PostForm() {
  const { control, handleSubmit } = useForm({ defaultValues: { content: "" } })

  return (
    <form onSubmit={handleSubmit((d) => console.log(d))}>
      <Controller
        name="content"
        control={control}
        rules={{ required: true, minLength: 20 }}
        render={({ field }) => (
          <RichTextEditor value={field.value} onChange={field.onChange} />
        )}
      />
      <button type="submit">Save</button>
    </form>
  )
}

// app/editor/page.tsx
"use client"

import dynamic from "next/dynamic"

const Editor = dynamic(
  () => import("@tolipovjs/rich-text").then((m) => m.RichTextEditor),
  { ssr: false },
)

export default function Page() {
  return <Editor placeholder="SSR-safe…" />
}

<RichTextEditor
  onImageUpload={async (file) => {
    const fd = new FormData()
    fd.append("file", file)
    fd.append("upload_preset", "your_preset")
    const res = await fetch("https://api.cloudinary.com/v1_1/<cloud>/image/upload", {
      method: "POST",
      body: fd,
    })
    return (await res.json()).secure_url
  }}
/>