Preview
Code
"use client"
import { Editor } from "@/components/ui/preskok-ui/editor/editor"
const starterContent = `
<h2>Preskok Editor</h2>
<p>Draft a product update with headings, lists, and links.</p>
<ul>
<li>Highlight the release name and date.</li>
<li>Call out the top three improvements.</li>
<li>Link to the full changelog.</li>
</ul>
<blockquote>Tip: Select text to reveal formatting tools.</blockquote>
<p><a href="https://preskok.com" rel="noopener noreferrer" target="_blank">Visit preskok.com</a></p>
`
export function EditorDemo() {
return (
<div className="w-full max-w-2xl">
<Editor
value={starterContent}
placeholder="Start writing..."
className="min-h-[320px]"
editorContentClassName="min-h-[240px]"
/>
</div>
)
}
Installation
CLI
Manual
pnpmnpmyarnbunpnpm dlx preskok-ui@latest add editor
Usage
import { Editor } from "@/components/ui/preskok-ui/minimal-tiptap/minimal-tiptap"
export function EditorDemo() {
return <Editor placeholder="Start writing..." />
}Examples
Preview
Code
"use client"
import { Editor } from "@/components/ui/preskok-ui/editor/editor"
const starterContent = `
<h2>Preskok Editor</h2>
<p>Draft a product update with headings, lists, and links.</p>
<ul>
<li>Highlight the release name and date.</li>
<li>Call out the top three improvements.</li>
<li>Link to the full changelog.</li>
</ul>
<blockquote>Tip: Select text to reveal formatting tools.</blockquote>
<p><a href="https://preskok.com" rel="noopener noreferrer" target="_blank">Visit preskok.com</a></p>
`
export function EditorDemo() {
return (
<div className="w-full max-w-2xl">
<Editor
value={starterContent}
placeholder="Start writing..."
className="min-h-[320px]"
editorContentClassName="min-h-[240px]"
/>
</div>
)
}