export const title = "Text editor components"
export const description = "Powerful and customizable React text editor components built for modern applications and websites. These text editors are built using TipTap and styled with Tailwind CSS."
export const links = {
    tiptap: "https://tiptap.dev/docs",
}

import * as Demos from "@/components/base/text-editor/text-editor.demo.tsx";

<PreviewAndCode title="Text editor example" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-32 overflow-x-auto items-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-128 mx-auto">
            <Demos.DefaultDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="text-editor/DefaultDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this Text editor component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add text-editor
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Install dependencies">
                As our text editor component is built with [TipTap](https://tiptap.dev/docs), you'll need to install the dependencies:
                ```bash
                npm install @tiptap/core @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/extension-text-style @tiptap/extension-image @tiptap/extension-placeholder @tiptap/extension-text-align @floating-ui/dom
                ```
            </Step>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="base/text-editor" filepath="base/input" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the text editor components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Text editor examples

Below are examples and variations of this text editor component:

### Default sm {{ tocOnly:true }}

<PreviewAndCode title="Default sm" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-32 overflow-auto items-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-max mx-auto">
            <Demos.DefaultSm />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="text-editor/DefaultSm" />
    </TabPanel>
</PreviewAndCode>

### Default md {{ tocOnly:true }}

<PreviewAndCode title="Default md" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-32 overflow-x-auto items-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-max mx-auto">
            <Demos.DefaultMd />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="text-editor/DefaultMd" />
    </TabPanel>
</PreviewAndCode>

### Floating toolbar sm {{ tocOnly:true }}

<PreviewAndCode title="Floating toolbar sm" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-32 overflow-x-auto items-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-max mx-auto">
            <Demos.FloatingToolbarSm />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="text-editor/FloatingToolbarSm" />
    </TabPanel>
</PreviewAndCode>

### Floating toolbar md {{ tocOnly:true }}

<PreviewAndCode title="Floating toolbar md" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-32 overflow-x-auto items-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-max mx-auto">
            <Demos.FloatingToolbarMd />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="text-editor/FloatingToolbarMd" />
    </TabPanel>
</PreviewAndCode>

### With tooltip {{ tocOnly:true }}

<PreviewAndCode title="With tooltip" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-32 overflow-x-auto items-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-128 mx-auto">
            <Demos.WithTooltip />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="text-editor/WithTooltip" />
    </TabPanel>
</PreviewAndCode>