50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T1985,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; /* -------------------------------------------------------------------------- */ /* Dependency-free YAML tokenizer — enough to read config at a glance, not a */ /* full parser. Each line becomes a list of classed spans. */ /* -------------------------------------------------------------------------- */ const tokenClass = { comment: "text-muted-foreground italic", key: "text-info", string: "text-success", literal: "text-warning", punctuation: "text-muted-foreground", scalar: "text-foreground", } as const; type Token = { className: string; text: string }; const LITERAL = /^(true|false|null|yes|no|on|off|~)$/i; const NUMBER = /^-?\d+(\.\d+)?$/; function classifyValue(raw: string): Token[] { const tokens: Token[] = []; const hashAt = raw.indexOf(" #"); let value = raw; let comment = ""; if (hashAt !== -1) { value = raw.slice(0, hashAt); comment = raw.slice(hashAt); } const trimmed = value.trim(); if (trimmed) { let className: string = tokenClass.scalar; if ( (trimmed.startsWith('"') && trimmed.endsWith('"')) || (trimmed.startsWith("'") && trimmed.endsWith("'")) ) { className = tokenClass.string; } else if (NUMBER.test(trimmed) || LITERAL.test(trimmed)) { className = tokenClass.literal; } tokens.push({ className, text: value }); } if (comment) tokens.push({ className: tokenClass.comment, text: comment }); return tokens; } function tokenizeLine(line: string): Token[] { const indentMatch = line.match(/^(\s*)/); const indent = indentMatch ? indentMatch[1] : ""; let rest = line.slice(indent.length); const tokens: Token[] = []; if (indent) tokens.push({ className: "", text: indent }); if (rest.startsWith("#")) { tokens.push({ className: tokenClass.comment, text: rest }); return tokens; } const listMatch = rest.match(/^(-\s+|-$)/); if (listMatch) { tokens.push({ className: tokenClass.punctuation, text: listMatch[0] }); rest = rest.slice(listMatch[0].length); } const keyMatch = rest.match(/^([^\s:#][^:]*?):(\s|$)/); if (keyMatch) { tokens.push({ className: tokenClass.key, text: keyMatch[1] }); tokens.push({ className: tokenClass.punctuation, text: ":" }); const after = rest.slice(keyMatch[1].length + 1); tokens.push(...classifyValue(after)); return tokens; } if (rest) tokens.push(...classifyValue(rest)); return tokens; } function HighlightLine({ line }: { line: string }) { const tokens = tokenizeLine(line); return ( {tokens.length === 0 ? "" : tokens.map((token, i) => ( {token.text} ))} ); } /* -------------------------------------------------------------------------- */ /* Editor */ /* -------------------------------------------------------------------------- */ type YamlEditorProps = Omit< React.ComponentProps<"div">, "onChange" | "defaultValue" > & { value?: string; defaultValue?: string; onValueChange?: (value: string) => void; readOnly?: boolean; /** Visible rows before the editor scrolls. */ rows?: number; textareaProps?: React.ComponentProps<"textarea">; }; function YamlEditor({ value, defaultValue = "", onValueChange, readOnly, rows = 12, className, textareaProps, ...props }: YamlEditorProps) { const [internal, setInternal] = React.useState(defaultValue); const isControlled = value !== undefined; const text = isControlled ? value : internal; const preRef = React.useRef(null); const gutterRef = React.useRef(null); const lines = text.split("\n"); const syncScroll = (event: React.UIEvent) => { const el = event.currentTarget; if (preRef.current) { preRef.current.scrollTop = el.scrollTop; preRef.current.scrollLeft = el.scrollLeft; } if (gutterRef.current) gutterRef.current.scrollTop = el.scrollTop; }; const handleChange = (event: React.ChangeEvent) => { const next = event.target.value; if (!isControlled) setInternal(next); onValueChange?.(next); }; const handleKeyDown = (event: React.KeyboardEvent) => { if (event.key !== "Tab" || readOnly) return; event.preventDefault(); const el = event.currentTarget; const start = el.selectionStart; const end = el.selectionEnd; const next = text.slice(0, start) + " " + text.slice(end); if (!isControlled) setInternal(next); onValueChange?.(next); requestAnimationFrame(() => { el.selectionStart = el.selectionEnd = start + 2; }); }; return (

{lines.map((_, i) => (

{i + 1}

))}

          {lines.map((line, i) => (
            
          ))}

      </div>
    </div>
  );
}

export { YamlEditor };
4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://hirael.com/r/yaml-editor.json","proxyUrl":"https://shadcnregistry.com/r/hirael/yaml-editor","itemId":"@hirael/yaml-editor"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/hirael/components/yaml-editor.tsx","content":"$53","type":"registry:ui","target":"components/yaml-editor.tsx"}]}]]}],"$L54"]}]
</article></body></html>

YAML Editor

Installation

Files

components

Styles