4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T2fe3,"use client" import * as React from "react" import { cva } from "class-variance-authority" import { Bold, Code, Eye, Heading1, Italic, Link, List, ListOrdered, Maximize2, Minimize2, Quote, SplitSquareHorizontal, Type, } from "lucide-react" import { cn } from "@/lib/utils" import { Skeleton } from "@/components/ui/skeleton" import { Button } from "@/components/ui/ds-button" import { Separator } from "@/components/ui/separator" import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group" // ── Types ────────────────────────────────────────────────────────────────── export type MarkdownEditorMode = "edit" | "preview" | "split" export interface MarkdownEditorProps extends Omit< React.HTMLAttributes, "onChange" > { value?: string onChange?: (value: string) => void placeholder?: string height?: number disabled?: boolean loading?: boolean mode?: MarkdownEditorMode showToolbar?: boolean } // ── Variants ─────────────────────────────────────────────────────────────── export const markdownEditorContainerVariants = cva( "w-full overflow-hidden rounded-xl border border-border bg-card", { variants: {}, } ) export const markdownEditorTextareaVariants = cva( [ "w-full resize-none bg-transparent p-4 font-mono text-sm leading-relaxed", "text-foreground placeholder:text-muted-foreground", "focus:outline-none", "disabled:cursor-not-allowed disabled:opacity-50", ].join(" "), { variants: {}, } ) // ── Markdown renderer (regex-based, no deps) ────────────────────────────── function renderMarkdown(md: string): string { let html = md // Escape HTML .replace(/&/g, "&") .replace(//g, ">") // Code blocks (must be before inline code) html = html.replace( /```([a-z]*)\n([\s\S]*?)```/g, (_, _lang, code) => `

${code}

` ) // Blockquote html = html.replace( /^> (.+)$/gm, // blockquote accent — intentional, not AI slop '

$1

' ) // Headings html = html.replace( /^# (.+)$/gm, '

$1

' ) html = html.replace( /^## (.+)$/gm, '

$1

' ) html = html.replace( /^### (.+)$/gm, '

$1

' ) html = html.replace( /^#### (.+)$/gm, '

$1

' ) // Horizontal rule html = html.replace(/^---$/gm, '

') // Unordered list html = html.replace( /^[\*\-] (.+)$/gm, '

' ) // Ordered list html = html.replace( /^\d+\. (.+)$/gm, '

' ) // Wrap consecutive list items in

.*<\/li>\n?)+/gm, (match) => `
` ) html = html.replace( /(?:^
.*<\/li>\n?)+/gm, (match) => `
` ) // Bold html = html.replace( /\*\*(.+?)\*\*/g, '$1' ) // Italic html = html.replace(/\*(.+?)\*/g, '$1') html = html.replace(/_(.+?)_/g, '$1') // Inline code html = html.replace( /`([^`]+)`/g, '$1' ) // Links html = html.replace( /\[(.+?)\]$(.+?)$/g, '$1' ) // Paragraphs (double newline = paragraph break) html = html .split(/\n\n+/) .map((block) => { if ( block.startsWith("${trimmed.replace(/\n/g, "
")}
` }) .join("\n") return html } // ── Toolbar actions ─────────────────────────────────────────────────────── function insertMarkdown( textarea: HTMLTextAreaElement, before: string, after = "", placeholder = "" ) { const start = textarea.selectionStart const end = textarea.selectionEnd const selected = textarea.value.substring(start, end) || placeholder const newValue = textarea.value.substring(0, start) + before + selected + after + textarea.value.substring(end) return { value: newValue, cursor: start + before.length + selected.length + after.length, } } // ── MarkdownEditor ───────────────────────────────────────────────────────── export function MarkdownEditor({ value = "", onChange, placeholder = "Write your content here…", height = 360, disabled = false, loading = false, mode: modeProp = "split", showToolbar = true, className, ...props }: MarkdownEditorProps) { const [internalValue, setInternalValue] = React.useState(value) const [mode, setMode] = React.useState(modeProp) const [fullscreen, setFullscreen] = React.useState(false) const textareaRef = React.useRef(null) const currentValue = onChange ? value : internalValue const handleChange = React.useCallback( (newVal: string) => { if (!onChange) setInternalValue(newVal) onChange?.(newVal) }, [onChange] ) const applyFormat = React.useCallback( (before: string, after = "", placeholder = "") => { const ta = textareaRef.current if (!ta) return const result = insertMarkdown(ta, before, after, placeholder) handleChange(result.value) // Restore cursor requestAnimationFrame(() => { ta.focus() ta.setSelectionRange(result.cursor, result.cursor) }) }, [handleChange] ) const toolbarItems = React.useMemo( () => [ { icon: Heading1, label: "Heading", before: "# ", after: "", placeholder: "Heading", }, { icon: Bold, label: "Bold", before: "**", after: "**", placeholder: "bold text", }, { icon: Italic, label: "Italic", before: "*", after: "*", placeholder: "italic text", }, { icon: Code, label: "Code", before: "`", after: "`", placeholder: "code", }, { icon: Link, label: "Link", before: "[", after: "](url)", placeholder: "link text", }, { icon: List, label: "List", before: "- ", after: "", placeholder: "item", }, { icon: ListOrdered, label: "Ordered list", before: "1. ", after: "", placeholder: "item", }, { icon: Quote, label: "Quote", before: "> ", after: "", placeholder: "quote", }, ], [] ) const effectiveHeight = fullscreen ? "100vh" : height // ── Loading ───────────────────────────────────────────────────────────── if (loading) { return (

{Array.from({ length: 8 }).map((_, i) => ( ))}

) } const preview = (
) const editor = ( handleChange(e.target.value)} placeholder={placeholder} disabled={disabled} className={cn(markdownEditorTextareaVariants(), "flex-1")} style={{ minHeight: 0 }} aria-label="Markdown editor" aria-multiline="true" /> ) return ( <div className={cn( markdownEditorContainerVariants(), fullscreen && "fixed inset-0 z-50 rounded-none", className )} style={{ height: effectiveHeight }} {...props} > {/* Toolbar */} {showToolbar && ( <div className="flex h-10 items-center gap-0.5 border-b border-border bg-muted/40 px-2"> {toolbarItems.map( ({ icon: Icon, label, before, after, placeholder }) => ( <Button key={label} variant="ghost" size="icon" className="size-7" onClick={() => applyFormat(before, after, placeholder)} disabled={disabled || mode === "preview"} aria-label={label} title={label} > <Icon className="size-3.5" /> </Button> ) )} <Separator orientation="vertical" className="mx-1 h-5" /> {/* Mode switcher */} <ToggleGroup type="single" size="sm" value={mode} onValueChange={(v) => v && setMode(v as MarkdownEditorMode)} className="ml-auto" > <ToggleGroupItem value="edit" className="h-7 px-2 text-xs" aria-label="Edit mode" > <Type className="size-3" /> </ToggleGroupItem> <ToggleGroupItem value="split" className="h-7 px-2 text-xs" aria-label="Split mode" > <SplitSquareHorizontal className="size-3" /> </ToggleGroupItem> <ToggleGroupItem value="preview" className="h-7 px-2 text-xs" aria-label="Preview mode" > <Eye className="size-3" /> </ToggleGroupItem> </ToggleGroup> <Button variant="ghost" size="icon" className="ml-1 size-7" onClick={() => setFullscreen((f) => !f)} aria-label={fullscreen ? "Exit fullscreen" : "Fullscreen"} > {fullscreen ? ( <Minimize2 className="size-3.5" /> ) : ( <Maximize2 className="size-3.5" /> )} </Button> </div> )} {/* Content */} <div className={cn( "flex", mode === "split" && "divide-x divide-border", "overflow-hidden" )} style={{ height: `calc(100% - ${showToolbar ? "2.5rem" : "0px"})` }} > {(mode === "edit" || mode === "split") && editor} {(mode === "preview" || mode === "split") && preview} </div> </div> ) } 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4d",null,{"namespace":"@lema-ds","registryDependencies":["skeleton","button","separator","toggle-group"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ds/markdown-editor.tsx","content":"$4f","type":"registry:ui","target":"components/ui/ds-markdown-editor.tsx"}],"className":"h-[70svh] min-h-80"}]]}] </article></body></html>