52: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T2aca,'use client'; import * as React from 'react'; import { focusRing, invalidRing } from '@/lib/recipes'; import { cn } from '@/lib/utils'; import { activeRichTextActions, applyRichTextAction, continueList } from '@/components/ui/rich-text-markdown'; import { RichTextToolbar, type RichTextAction, type RichTextToolbarProps } from '@/components/ui/rich-text-toolbar'; import { useLabels } from '@/components/ui/labels-context'; const safeUrl = (url: string) => /^(https?:\/\/|mailto:|\/|#)/i.test(url.trim()); // Inline markdown subset to React nodes. Never builds HTML strings, and only allows safe link targets. const inlinePattern = /(\*\*[^*]+\*\*|\*[^*]+\*|[^<]*<\/u>|`[^`]+`|!?\[[^\]]*\]$[^)]*$)/g; const renderInline = (text: string, keyPrefix: string): React.ReactNode[] => text.split(inlinePattern).map((part, index) => { const key = `${keyPrefix}-${index}`; if (part.startsWith('**') && part.endsWith('**') && part.length > 4) return {part.slice(2, -2)}; if (part.startsWith('*') && part.endsWith('*') && part.length > 2) return {part.slice(1, -1)}; if (part.startsWith('') && part.endsWith('')) return {part.slice(3, -4)}; if (part.startsWith('`') && part.endsWith('`') && part.length > 2) { return (


          {part.slice(1, -1)}

); } const link = /^(!?)\[([^\]]*)\]$([^)]*)$$/.exec(part); if (link) { const [, image, label, url] = link; if (!safeUrl(url)) return {label}; if (image) return {label}

; return ( {label} ); } return {part}; }); export const renderRichTextPreview = (value: string): React.ReactNode[] => { const nodes: React.ReactNode[] = []; const lines = value.split('\n'); let index = 0; while (index < lines.length) { const line = lines[index]; const key = `b${index}`; const heading = /^(#{1,2}) (.*)$/.exec(line); if (heading) { nodes.push( heading[1].length === 1 ? (

{renderInline(heading[2], key)}

) : (

{renderInline(heading[2], key)}

), ); index += 1; } else if (line.startsWith('> ')) { nodes.push(

{renderInline(line.slice(2), key)}

, ); index += 1; } else if (/^- /.test(line) || /^\d+\. /.test(line)) { const ordered = /^\d+\. /.test(line); const items: string[] = []; while (index < lines.length && (ordered ? /^\d+\. /.test(lines[index]) : /^- /.test(lines[index]))) { items.push(lines[index].replace(ordered ? /^\d+\. / : /^- /, '')); index += 1; } const List = ordered ? 'ol' : 'ul'; nodes.push( {items.map((item, itemIndex) => (

{renderInline(item, `${key}-${itemIndex}`)}

))} , ); } else if (line.trim() === '') { index += 1; } else { nodes.push(

{renderInline(line, key)}

); index += 1; } } return nodes; }; export interface RichTextEditorProps extends Omit, 'onChange' | 'defaultValue'>, Pick { // Markdown source. The editor is a plain textarea that writes markdown markers around the selection, not a contenteditable. value?: string; defaultValue?: string; onValueChange?: (value: string) => void; placeholder?: string; disabled?: boolean; readOnly?: boolean; invalid?: boolean; // Shows the Write / Preview switch. The preview renders the markdown subset as React elements. preview?: boolean; // Accessible name of the text area. textLabel?: string; rows?: number; // Message from a failed action, shown in the toolbar. error?: React.ReactNode; } const RichTextEditor = React.forwardRef( ( { className, value, defaultValue = '', onValueChange, placeholder, disabled = false, readOnly = false, invalid = false, preview = true, textLabel: textLabelProp, rows = 8, type, actions, leading, error, ...props }, ref, ) => { const l = useLabels(); const textLabel = textLabelProp ?? l.content; const [inner, setInner] = React.useState(defaultValue); const current = value ?? inner; const [mode, setMode] = React.useState<'write' | 'preview'>('write'); const [active, setActive] = React.useState>>({}); const areaRef = React.useRef(null); const pending = React.useRef<{ start: number; end: number } | null>(null); const setValue = (next: string) => { setInner(next); onValueChange?.(next); }; const refreshActive = () => { const area = areaRef.current; if (area) setActive(activeRichTextActions({ value: area.value, start: area.selectionStart, end: area.selectionEnd })); }; React.useLayoutEffect(() => { const area = areaRef.current; if (area && pending.current) { area.focus(); area.setSelectionRange(pending.current.start, pending.current.end); pending.current = null; refreshActive(); } }); const apply = (action: RichTextAction) => { const area = areaRef.current; if (!area || disabled || readOnly) return; const edit = applyRichTextAction( { value: area.value, start: area.selectionStart, end: area.selectionEnd }, action, ); pending.current = { start: edit.start, end: edit.end }; setValue(edit.value); }; const shortcuts: Record = { b: 'bold', i: 'italic', u: 'underline', e: 'code', k: 'link' }; const handleKeyDown = (event: React.KeyboardEvent) => { if ((event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey) { const action = shortcuts[event.key.toLowerCase()]; if (action) { event.preventDefault(); apply(action); return; } } if ( event.key === 'Enter' && !event.shiftKey && !event.ctrlKey && !event.metaKey && !event.nativeEvent.isComposing ) { const area = event.currentTarget; const edit = continueList({ value: area.value, start: area.selectionStart, end: area.selectionEnd }); if (edit) { event.preventDefault(); pending.current = { start: edit.start, end: edit.end }; setValue(edit.value); } } }; return (

{preview ? (

{(['write', 'preview'] as const).map((entry) => ( ))}

) : null}

{mode === 'write' ? (

{
              areaRef.current = node;
              if (typeof ref === 'function') ref(node);
              else if (ref) ref.current = node;
            }}
            aria-label={textLabel}
            aria-invalid={invalid || undefined}
            value={current}
            rows={rows}
            placeholder={placeholder}
            disabled={disabled}
            readOnly={readOnly}
            spellCheck
            className={cn(
              'w-full resize-y rounded-item border-0 bg-transparent px-2 py-1 text-foreground outline-none typography-input-text',
              // Below sm the field text is at least 16px so iOS Safari does not zoom on focus.
              'max-sm:text-[max(16px,var(--typo-input-text-size,1rem))]',
              'placeholder:text-text-subtle',
              'disabled:cursor-not-allowed',
              invalidRing,
            )}
            onChange={(event) => setValue(event.target.value)}
            onKeyDown={handleKeyDown}
            onSelect={refreshActive}
            onKeyUp={refreshActive}
            onClick={refreshActive}
          />
        ) : (
          <div
            data-rich-text-preview=""
            aria-label={l.previewRegion}
            role="region"
            className="flex flex-col gap-2 px-2 py-2 typography-ui text-foreground"
          >
            {current.trim() ? renderRichTextPreview(current) : <p className="text-text-subtle">{l.nothingToPreview}</p>}
          </div>
        )}
      </div>
    );
  },
);
RichTextEditor.displayName = 'RichTextEditor';

export { RichTextEditor };
51:["$","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,["$","$L52",null,{"namespace":"@getitdone","registryDependencies":["https://zero-design.itdone.de/r/labels-context.json","https://zero-design.itdone.de/r/recipes.json","https://zero-design.itdone.de/r/rich-text-markdown.json","https://zero-design.itdone.de/r/rich-text-toolbar.json","https://zero-design.itdone.de/r/utils.json","https://zero-design.itdone.de/r/theme.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/ui/rich-text-editor.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>