2d:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T4781,"use client"; import { IconBlockquote, IconBold, IconCode, IconH2, IconH3, IconItalic, IconLink, IconList, IconListNumbers, IconStrikethrough, } from "@tabler/icons-react"; import CharacterCount from "@tiptap/extension-character-count"; import Placeholder from "@tiptap/extension-placeholder"; import { EditorContent, useEditor, type Editor, type JSONContent } from "@tiptap/react"; import { BubbleMenu } from "@tiptap/react/menus"; import StarterKit from "@tiptap/starter-kit"; import { cva } from "class-variance-authority"; import * as React from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { Toggle } from "@/components/ui/toggle"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; /* ------------------------------------------------------------------------------------------------ * RichTextEditor: Tiptap in Kobra's textarea chrome. The toolbar is a Kobra toggle group whose * pressed state follows the editor, so a command is one entry: id, icon, run, isActive. * ---------------------------------------------------------------------------------------------- */ export type { JSONContent }; export type EditorCommand = { id: string; label: string; icon: React.ReactNode; /** Shown in the tooltip, e.g. "Ctrl B". */ shortcut?: string; run: (editor: Editor) => void; isActive?: (editor: Editor) => boolean; isDisabled?: (editor: Editor) => boolean; }; const mod = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform) ? "⌘" : "Ctrl"; /** The built-in commands, by id. Spread them, filter them, or add yours beside them. */ export const editorCommands = { bold: { id: "bold", label: "Bold", icon: , shortcut: "B", run: (e) => e.chain().focus().toggleBold().run(), isActive: (e) => e.isActive("bold") }, italic: { id: "italic", label: "Italic", icon: , shortcut: "I", run: (e) => e.chain().focus().toggleItalic().run(), isActive: (e) => e.isActive("italic") }, strike: { id: "strike", label: "Strikethrough", icon: , shortcut: "Shift X", run: (e) => e.chain().focus().toggleStrike().run(), isActive: (e) => e.isActive("strike") }, code: { id: "code", label: "Code", icon: , shortcut: "E", run: (e) => e.chain().focus().toggleCode().run(), isActive: (e) => e.isActive("code") }, h2: { id: "h2", label: "Heading 2", icon: , run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(), isActive: (e) => e.isActive("heading", { level: 2 }) }, h3: { id: "h3", label: "Heading 3", icon: , run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(), isActive: (e) => e.isActive("heading", { level: 3 }) }, bulletList: { id: "bulletList", label: "Bullet list", icon: , shortcut: "Shift 8", run: (e) => e.chain().focus().toggleBulletList().run(), isActive: (e) => e.isActive("bulletList") }, orderedList: { id: "orderedList", label: "Numbered list", icon: , shortcut: "Shift 7", run: (e) => e.chain().focus().toggleOrderedList().run(), isActive: (e) => e.isActive("orderedList") }, blockquote: { id: "blockquote", label: "Quote", icon: , shortcut: "Shift B", run: (e) => e.chain().focus().toggleBlockquote().run(), isActive: (e) => e.isActive("blockquote") }, } satisfies Record; const MARKS = [editorCommands.bold, editorCommands.italic, editorCommands.strike, editorCommands.code]; const BLOCKS = [editorCommands.h2, editorCommands.h3, editorCommands.bulletList, editorCommands.orderedList, editorCommands.blockquote]; type EditorContextValue = { editor: Editor | null; disabled: boolean; readOnly: boolean; maxLength?: number; variant: "default" | "secondary"; commands: EditorCommand[]; }; const Context = React.createContext(null); function useRichText(part: string) { const ctx = React.useContext(Context); if (!ctx) throw new Error(`${part} must be rendered inside `); return ctx; } const chrome = cva("group/editor flex w-full flex-col overflow-hidden rounded-lg border focus-field text-sm data-disabled:cursor-not-allowed data-disabled:opacity-50", { variants: { variant: { default: "border-input bg-transparent dark:bg-input/30", secondary: "border-transparent bg-muted dark:bg-muted/60", }, }, defaultVariants: { variant: "default" }, }); export type RichTextEditorProps = { /** Controlled document, as Tiptap JSON. */ value?: JSONContent; defaultValue?: JSONContent; onValueChange?: (value: JSONContent) => void; placeholder?: string; /** Hard cap on characters. The count turns to a warning near it. */ maxLength?: number; disabled?: boolean; /** Content stays selectable; the toolbar goes away in the default layout. */ readOnly?: boolean; variant?: "default" | "secondary"; /** Show a bubble menu over a text selection (default layout). */ bubbleMenu?: boolean; /** Show the character count (default layout). Also on when maxLength is set. */ showCount?: boolean; /** Extra toolbar commands, rendered as their own group after the built-ins. */ commands?: EditorCommand[]; /** Minimum height of the writing area. */ minHeight?: "sm" | "default" | "lg"; "aria-label"?: string; className?: string; /** Custom composition from the parts below. Without children: toolbar, content, count. */ children?: React.ReactNode; }; export function RichTextEditor({ value, defaultValue, onValueChange, placeholder = "Write something", maxLength, disabled = false, readOnly = false, variant = "default", bubbleMenu = false, showCount = false, commands = [], minHeight = "default", "aria-label": ariaLabel = "Rich text editor", className, children, }: RichTextEditorProps) { const onChange = React.useRef(onValueChange); React.useEffect(() => { onChange.current = onValueChange; }); const editor = useEditor({ immediatelyRender: false, shouldRerenderOnTransaction: true, editable: !disabled && !readOnly, content: value ?? defaultValue, extensions: [ StarterKit.configure({ heading: { levels: [1, 2, 3] }, link: { openOnClick: false, autolink: true } }), Placeholder.configure({ placeholder }), CharacterCount.configure({ limit: maxLength ?? null }), ], editorProps: { attributes: { role: "textbox", "aria-multiline": "true", "aria-label": ariaLabel }, }, onUpdate: ({ editor: e }) => onChange.current?.(e.getJSON()), }); React.useEffect(() => { editor?.setEditable(!disabled && !readOnly); }, [editor, disabled, readOnly]); // Controlled: accept a document that differs from the editor's own. React.useEffect(() => { if (!editor || value === undefined) return; if (JSON.stringify(editor.getJSON()) !== JSON.stringify(value)) editor.commands.setContent(value, { emitUpdate: false }); }, [editor, value]); const ctx = React.useMemo( () => ({ editor, disabled, readOnly, maxLength, variant, commands }), [editor, disabled, readOnly, maxLength, variant, commands], ); return (

{children ?? ( <> {readOnly ? null : } {bubbleMenu ? : null} {showCount || maxLength ? : null} )}

); } function CommandItem({ command, editor, disabled, size }: { command: EditorCommand; editor: Editor; disabled: boolean; size?: "sm" }) { const label = command.shortcut ? `${command.label} (${mod} ${command.shortcut})` : command.label; return ( command.run(editor)} className="after:absolute after:-inset-1 after:content-[''] relative" > {command.icon} } /> {label} ); } /** A toggle group of commands whose pressed state follows the editor. Use it to build your own toolbar. */ export function RichTextEditorCommands({ list, label, size }: { list: EditorCommand[]; label: string; size?: "sm" }) { const { editor, disabled } = useRichText("RichTextEditorCommands"); if (!editor) return null; const active = list.filter((c) => c.isActive?.(editor)).map((c) => c.id); return ( {}} spacing={0.5} size={size} > {list.map((c) => ( ))} ); } /** The toolbar: marks, blocks, a link control, then any `commands` you passed. */ export function RichTextEditorToolbar({ className }: { className?: string }) { const { editor, disabled, commands } = useRichText("RichTextEditorToolbar"); return ( ); } function ToolbarSeparator() { return ; } function normalizeUrl(raw: string) { const t = raw.trim(); if (!t) return ""; return /^[a-z][a-z0-9+.-]*:/i.test(t) ? t : `https://${t}`; } function LinkControl({ editor, disabled }: { editor: Editor | null; disabled: boolean }) { const [open, setOpen] = React.useState(false); const [url, setUrl] = React.useState(""); const [invalid, setInvalid] = React.useState(false); const active = Boolean(editor?.isActive("link")); const errorId = React.useId(); const apply = () => { if (!editor) return; const href = normalizeUrl(url); if (!href) { editor.chain().focus().extendMarkRange("link").unsetLink().run(); setOpen(false); return; } try { new URL(href); } catch { setInvalid(true); return; } const ok = editor.chain().focus().extendMarkRange("link").setLink({ href }).run(); if (ok) setOpen(false); else setInvalid(true); }; return ( { if (next && editor) { setUrl((editor.getAttributes("link").href as string | undefined) ?? ""); setInvalid(false); } setOpen(next); }} > } /> } > {`Link (${mod} K)`} ); } const minHeights = { sm: "min-h-20", default: "min-h-32", lg: "min-h-48" } as const; const prose = [ "[&_.tiptap]:min-h-[inherit] [&_.tiptap]:px-3 [&_.tiptap]:py-2.5 [&_.tiptap]:outline-none [&_.tiptap]:break-words", "[&_.tiptap>*+*]:mt-2", "[&_.tiptap_h1]:text-xl [&_.tiptap_h1]:font-semibold [&_.tiptap_h2]:text-lg [&_.tiptap_h2]:font-semibold [&_.tiptap_h3]:text-base [&_.tiptap_h3]:font-semibold", "[&_.tiptap_ul]:list-disc [&_.tiptap_ul]:ps-5 [&_.tiptap_ol]:list-decimal [&_.tiptap_ol]:ps-5 [&_.tiptap_li>p]:m-0", "[&_.tiptap_blockquote]:border-s-2 [&_.tiptap_blockquote]:border-border [&_.tiptap_blockquote]:ps-3 [&_.tiptap_blockquote]:text-muted-foreground", "[&_.tiptap_code]:rounded-sm [&_.tiptap_code]:bg-muted [&_.tiptap_code]:px-1 [&_.tiptap_code]:py-0.5 [&_.tiptap_code]:font-mono [&_.tiptap_code]:text-[0.85em]", "[&_.tiptap_pre]:overflow-x-auto [&_.tiptap_pre]:rounded-md [&_.tiptap_pre]:bg-muted [&_.tiptap_pre]:p-3 [&_.tiptap_pre_code]:bg-transparent [&_.tiptap_pre_code]:p-0", "[&_.tiptap_a]:text-foreground [&_.tiptap_a]:underline [&_.tiptap_a]:underline-offset-4", "[&_.tiptap_hr]:my-3 [&_.tiptap_hr]:border-border", "[&_.tiptap_.is-editor-empty:first-child::before]:pointer-events-none [&_.tiptap_.is-editor-empty:first-child::before]:float-start [&_.tiptap_.is-editor-empty:first-child::before]:h-0 [&_.tiptap_.is-editor-empty:first-child::before]:text-muted-foreground [&_.tiptap_.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]", ].join(" "); /** The writing area. Shows a skeleton the size of the editor until Tiptap has mounted. */ export function RichTextEditorContent({ minHeight = "default", className }: { minHeight?: keyof typeof minHeights; className?: string }) { const { editor } = useRichText("RichTextEditorContent"); return (

{editor ? ( ) : (

)}

); } // Module-level: a new options object on every render re-registers the plugin, which dispatches, which re-renders. const BUBBLE_OPTIONS = { placement: "top", offset: 8 } as const; /** A small floating toolbar over a text selection: the four marks. */ export function RichTextEditorBubbleMenu({ className }: { className?: string }) { const { editor, disabled, readOnly } = useRichText("RichTextEditorBubbleMenu"); if (!editor || disabled || readOnly) return null; return ( ); } export function RichTextEditorFooter({ className, ...props }: React.ComponentProps<"div">) { return (

); } /** Characters used, and the limit when there is one. */ export function RichTextEditorCount({ className }: { className?: string }) { const { editor, maxLength } = useRichText("RichTextEditorCount"); const used = editor ? (editor.storage.characterCount?.characters?.() as number | undefined) ?? 0 : 0; const near = maxLength ? used >= maxLength * 0.9 : false; const full = maxLength ? used >= maxLength : false; return ( {maxLength ? `${used} / ${maxLength}` : `${used} characters`} {full ? "Character limit reached" : ""} ); } export default RichTextEditor; 32:T15e5,"use client"; import { IconArrowBackUp, IconArrowForwardUp, IconMinus, IconSend } from "@tabler/icons-react"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { DemoGroup, DemoPage } from "../../feedback/_demo-group"; import { editorSample } from "../_fixtures-b"; import { editorCommands, RichTextEditor, RichTextEditorBubbleMenu, RichTextEditorCommands, RichTextEditorContent, RichTextEditorCount, RichTextEditorFooter, type EditorCommand, type JSONContent, } from "./rich-text-editor"; const sample = editorSample as unknown as JSONContent; const bubbleSample: JSONContent = { type: "doc", content: [{ type: "paragraph", content: [{ type: "text", text: "Double-click any word in this sentence and a small menu floats above it. Toolbar kept for the whole document." }] }] }; const extra: EditorCommand[] = [ { id: "rule", label: "Divider", icon: , run: (e) => e.chain().focus().setHorizontalRule().run() }, { id: "undo", label: "Undo", icon: , shortcut: "Z", run: (e) => e.chain().focus().undo().run(), isDisabled: (e) => !e.can().undo() }, { id: "redo", label: "Redo", icon: , shortcut: "Shift Z", run: (e) => e.chain().focus().redo().run(), isDisabled: (e) => !e.can().redo() }, ]; function Controlled() { const [doc, setDoc] = useState(sample); return (

        {JSON.stringify(doc, null, 1)}

); } function Composed() { const [sent, setSent] = useState(false); return (

{sent ?

Sample composer, nothing was sent.

: null}

); } export function RichTextEditorDemo() { return ( ); } export default RichTextEditorDemo; 33:T6c8,import type { BlockMeta } from "../../../lib/block-meta"; export const richTextEditorMeta: BlockMeta = { slug: "rich-text-editor", title: "Rich text editor", description: "Tiptap in Kobra's textarea chrome: a toggle-group toolbar with a link popover, a bubble menu on selection, controlled JSON, character count, placeholder, disabled and read-only, extensible commands.", group: "forms", kobraDeps: ["toggle-group", "toggle", "popover", "input", "button", "tooltip"], files: ["blocks/forms/rich-text-editor/rich-text-editor.tsx"], props: [ { name: "value / defaultValue", type: "JSONContent", description: "Tiptap JSON document, controlled or initial." }, { name: "onValueChange", type: "(value: JSONContent) => void", description: "Called with the document on every change." }, { name: "placeholder", type: "string", description: "Shown while the document is empty." }, { name: "maxLength", type: "number", description: "Hard character cap; shows a count." }, { name: "disabled / readOnly", type: "boolean", description: "Inert and dimmed; or selectable with no toolbar." }, { name: "variant", type: "'default' | 'secondary'", default: "'default'", description: "Textarea outline or quiet filled panel." }, { name: "bubbleMenu", type: "boolean", default: "false", description: "Floating marks menu over a selection." }, { name: "commands", type: "EditorCommand[]", description: "Extra toolbar commands: { id, label, icon, run, isActive, isDisabled }." }, { name: "children", type: "ReactNode", description: "Compose RichTextEditorToolbar, Commands, Content, BubbleMenu, Footer and Count yourself." }, ], tags: ["editor", "tiptap", "rich text", "form"], status: "ready", }; 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#forms","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Forms"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Rich text editor"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Rich text editor"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Tiptap in Kobra's textarea chrome: a toggle-group toolbar with a link popover, a bubble menu on selection, controlled JSON, character count, placeholder, disabled and read-only, extensible commands."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"rich-text-editor","group":"forms","minHeight":520,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/forms/rich-text-editor/rich-text-editor.tsx","code":"$31"},{"path":"blocks/forms/rich-text-editor/demo.tsx","code":"$32"},{"path":"blocks/forms/rich-text-editor/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]