import { useState, useRef, useEffect } from "react";
import type { BodyElement } from "../../lib/api";
import { ChartRenderer } from "../charts/ChartRenderer";
import { ElementContextMenu } from "./ElementContextMenu";
import { copyMarkdownToClipboard } from "../../lib/markdown";
interface BodyRendererProps {
elements: BodyElement[];
isEditing?: boolean;
onUpdate?: (index: number, element: BodyElement) => void;
onReorder?: (fromIndex: number, toIndex: number) => void;
onEditingChange?: (isEditing: boolean) => void;
hasPendingRemoteUpdate?: boolean;
onOverwrite?: () => void;
onFocusElement?: (index: number) => void;
onDeleteElement?: (index: number) => void;
onDuplicateElement?: (index: number) => void;
onConvertElement?: (index: number, toType: string) => void;
onGenerateFromElement?: (index: number, action: string) => void;
onCreateTaskFromElement?: (index: number, selectedText?: string) => void;
}
export function BodyRenderer({
elements,
isEditing = false,
onUpdate,
onReorder,
onEditingChange,
hasPendingRemoteUpdate,
onOverwrite,
onFocusElement,
onDeleteElement,
onDuplicateElement,
onConvertElement,
onGenerateFromElement,
onCreateTaskFromElement,
}: BodyRendererProps) {
const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
const [contextMenu, setContextMenu] = useState<{
x: number;
y: number;
elementIndex: number;
selectedText?: string;
} | null>(null);
const [copiedMarkdown, setCopiedMarkdown] = useState(false);
const handleCopyMarkdown = async () => {
const success = await copyMarkdownToClipboard(elements);
if (success) {
setCopiedMarkdown(true);
setTimeout(() => setCopiedMarkdown(false), 2000);
}
};
const handleContextMenu = (index: number) => (e: React.MouseEvent) => {
e.preventDefault();
// Get any selected text
const selection = window.getSelection();
const selectedText = selection?.toString().trim() || undefined;
setContextMenu({
x: e.clientX,
y: e.clientY,
elementIndex: index,
selectedText,
});
};
const closeContextMenu = () => {
setContextMenu(null);
};
if (elements.length === 0) {
return (
<div className="text-[#555] font-mono text-sm italic">
No content yet. Use the CLI below to add content.
</div>
);
}
const handleDragStart = (index: number) => (e: React.DragEvent) => {
setDraggedIndex(index);
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("text/plain", index.toString());
};
const handleDragOver = (index: number) => (e: React.DragEvent) => {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
if (draggedIndex !== null && draggedIndex !== index) {
setDragOverIndex(index);
}
};
const handleDragLeave = () => {
setDragOverIndex(null);
};
const handleDrop = (toIndex: number) => (e: React.DragEvent) => {
e.preventDefault();
const fromIndex = draggedIndex;
setDraggedIndex(null);
setDragOverIndex(null);
if (fromIndex !== null && fromIndex !== toIndex && onReorder) {
onReorder(fromIndex, toIndex);
}
};
const handleDragEnd = () => {
setDraggedIndex(null);
setDragOverIndex(null);
};
return (
<div className="space-y-1">
{/* Markdown Export Toolbar */}
<div className="flex justify-end mb-2">
<button
onClick={handleCopyMarkdown}
className="flex items-center gap-1 px-2 py-1 text-[10px] font-mono text-[#555] hover:text-[#75aafc] transition-colors"
title="Copy content as markdown"
>
{copiedMarkdown ? (
<>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<polyline points="20 6 9 17 4 12" />
</svg>
Copied!
</>
) : (
<>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
<rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
</svg>
Copy as Markdown
</>
)}
</button>
</div>
{elements.map((element, index) => (
<div
key={index}
className={`group flex items-start gap-2 py-1 transition-all ${
draggedIndex === index ? "opacity-50" : ""
} ${
dragOverIndex === index
? "border-t-2 border-[#75aafc] -mt-[2px] pt-[calc(0.25rem+2px)]"
: ""
}`}
onDragOver={handleDragOver(index)}
onDragLeave={handleDragLeave}
onDrop={handleDrop(index)}
onContextMenu={handleContextMenu(index)}
>
{/* Drag handle - only show in edit mode */}
{isEditing && onReorder && (
<div
draggable
onDragStart={handleDragStart(index)}
onDragEnd={handleDragEnd}
className="flex-shrink-0 w-5 h-6 flex items-center justify-center cursor-grab active:cursor-grabbing opacity-0 group-hover:opacity-100 transition-opacity text-[#555] hover:text-[#75aafc]"
title="Drag to reorder"
>
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="currentColor"
>
<circle cx="3" cy="2" r="1.5" />
<circle cx="9" cy="2" r="1.5" />
<circle cx="3" cy="6" r="1.5" />
<circle cx="9" cy="6" r="1.5" />
<circle cx="3" cy="10" r="1.5" />
<circle cx="9" cy="10" r="1.5" />
</svg>
</div>
)}
<div className="flex-1">
<BodyElementRenderer
element={element}
onUpdate={isEditing && onUpdate ? (el) => onUpdate(index, el) : undefined}
onEditingChange={onEditingChange}
hasPendingRemoteUpdate={hasPendingRemoteUpdate}
onOverwrite={onOverwrite}
/>
</div>
</div>
))}
{/* Context Menu */}
{contextMenu && (
<ElementContextMenu
x={contextMenu.x}
y={contextMenu.y}
element={elements[contextMenu.elementIndex]}
elementIndex={contextMenu.elementIndex}
selectedText={contextMenu.selectedText}
onClose={closeContextMenu}
onFocus={(index) => onFocusElement?.(index)}
onDelete={(index) => onDeleteElement?.(index)}
onDuplicate={(index) => onDuplicateElement?.(index)}
onConvert={(index, toType) => onConvertElement?.(index, toType)}
onGenerate={(index, action) => onGenerateFromElement?.(index, action)}
onCreateTask={(index, selectedText) => onCreateTaskFromElement?.(index, selectedText)}
/>
)}
</div>
);
}
function BodyElementRenderer({
element,
onUpdate,
onEditingChange,
hasPendingRemoteUpdate,
onOverwrite,
}: {
element: BodyElement;
onUpdate?: (element: BodyElement) => void;
onEditingChange?: (isEditing: boolean) => void;
hasPendingRemoteUpdate?: boolean;
onOverwrite?: () => void;
}) {
switch (element.type) {
case "heading":
return (
<HeadingElement
level={element.level}
text={element.text}
onUpdate={
onUpdate
? (text) => onUpdate({ ...element, text })
: undefined
}
onEditingChange={onEditingChange}
hasPendingRemoteUpdate={hasPendingRemoteUpdate}
onOverwrite={onOverwrite}
/>
);
case "paragraph":
return (
<ParagraphElement
text={element.text}
onUpdate={
onUpdate
? (text) => onUpdate({ ...element, text })
: undefined
}
onEditingChange={onEditingChange}
hasPendingRemoteUpdate={hasPendingRemoteUpdate}
onOverwrite={onOverwrite}
/>
);
case "code":
return (
<CodeElement
language={element.language}
content={element.content}
/>
);
case "list":
return (
<ListElement
ordered={element.ordered}
items={element.items}
/>
);
case "chart":
return (
<ChartElement
chartType={element.chartType}
data={element.data}
title={element.title}
config={element.config}
/>
);
case "image":
return (
<ImageElement
src={element.src}
alt={element.alt}
caption={element.caption}
/>
);
case "markdown":
return (
<MarkdownElement
content={element.content}
onUpdate={
onUpdate
? (content) => onUpdate({ ...element, content })
: undefined
}
onEditingChange={onEditingChange}
hasPendingRemoteUpdate={hasPendingRemoteUpdate}
onOverwrite={onOverwrite}
/>
);
default:
return null;
}
}
function HeadingElement({
level,
text,
onUpdate,
onEditingChange,
hasPendingRemoteUpdate,
onOverwrite,
}: {
level: number;
text: string;
onUpdate?: (text: string) => void;
onEditingChange?: (isEditing: boolean) => void;
hasPendingRemoteUpdate?: boolean;
onOverwrite?: () => void;
}) {
const [isEditing, setIsEditing] = useState(false);
const [editText, setEditText] = useState(text);
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
// Only update editText if not currently editing
if (!isEditing) {
setEditText(text);
}
}, [text, isEditing]);
useEffect(() => {
if (isEditing && inputRef.current) {
inputRef.current.focus();
inputRef.current.select();
}
}, [isEditing]);
const startEditing = () => {
setIsEditing(true);
onEditingChange?.(true);
};
const stopEditing = () => {
setIsEditing(false);
onEditingChange?.(false);
};
const handleSave = () => {
// Don't auto-save if there's a pending remote update
if (hasPendingRemoteUpdate) return;
if (onUpdate && editText.trim() !== text) {
onUpdate(editText.trim());
}
stopEditing();
};
const handleOverwrite = () => {
if (onUpdate && editText.trim() !== text) {
onUpdate(editText.trim());
}
onOverwrite?.();
stopEditing();
};
const handleCancel = () => {
setEditText(text);
stopEditing();
};
const handleKeyDown = (e: React.KeyboardEvent) => {
// Disable Enter save if there's a pending remote update
if (e.key === "Enter" && !hasPendingRemoteUpdate) {
handleSave();
} else if (e.key === "Escape") {
handleCancel();
}
};
const handleBlur = () => {
// Don't auto-save on blur if there's a pending remote update
if (!hasPendingRemoteUpdate) {
handleSave();
}
};
const baseClassName = "font-mono text-[#9bc3ff]";
const sizeClasses: Record<number, string> = {
1: "text-2xl font-bold",
2: "text-xl font-bold",
3: "text-lg font-semibold",
4: "text-base font-semibold",
5: "text-sm font-semibold",
6: "text-xs font-semibold",
};
const sizeClass = sizeClasses[level] || sizeClasses[3];
if (isEditing && onUpdate) {
return (
<div>
<input
ref={inputRef}
type="text"
value={editText}
onChange={(e) => setEditText(e.target.value)}
onBlur={handleBlur}
onKeyDown={handleKeyDown}
className={`${baseClassName} ${sizeClass} w-full bg-transparent border-b border-[#3f6fb3] outline-none`}
/>
{hasPendingRemoteUpdate && (
<div className="flex items-center gap-2 mt-2">
<span className="text-yellow-500 text-xs font-mono">Remote update pending</span>
<button
onClick={handleOverwrite}
onMouseDown={(e) => e.preventDefault()}
className="px-2 py-1 font-mono text-xs text-yellow-500 border border-yellow-500/50 hover:border-yellow-500 transition-colors"
>
Overwrite
</button>
<button
onClick={handleCancel}
onMouseDown={(e) => e.preventDefault()}
className="px-2 py-1 font-mono text-xs text-[#555] hover:text-white/70 transition-colors"
>
Cancel
</button>
</div>
)}
</div>
);
}
const HeadingTag = `h${level}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
return (
<HeadingTag
className={`${baseClassName} ${sizeClass} ${onUpdate ? "cursor-text hover:bg-[rgba(117,170,252,0.05)] px-1 -mx-1 rounded" : ""}`}
onClick={() => onUpdate && startEditing()}
>
{text}
</HeadingTag>
);
}
function ParagraphElement({
text,
onUpdate,
onEditingChange,
hasPendingRemoteUpdate,
onOverwrite,
}: {
text: string;
onUpdate?: (text: string) => void;
onEditingChange?: (isEditing: boolean) => void;
hasPendingRemoteUpdate?: boolean;
onOverwrite?: () => void;
}) {
const [isEditing, setIsEditing] = useState(false);
const [editText, setEditText] = useState(text);
const textareaRef = useRef<HTMLTextAreaElement>(null);
useEffect(() => {
// Only update editText if not currently editing
if (!isEditing) {
setEditText(text);
}
}, [text, isEditing]);
useEffect(() => {
if (isEditing && textareaRef.current) {
textareaRef.current.focus();
// Auto-resize textarea
textareaRef.current.style.height = "auto";
textareaRef.current.style.height = textareaRef.current.scrollHeight + "px";
}
}, [isEditing]);
const startEditing = () => {
setIsEditing(true);
onEditingChange?.(true);
};
const stopEditing = () => {
setIsEditing(false);
onEditingChange?.(false);
};
const handleSave = () => {
// Don't auto-save if there's a pending remote update
if (hasPendingRemoteUpdate) return;
if (onUpdate && editText.trim() !== text) {
onUpdate(editText.trim());
}
stopEditing();
};
const handleOverwrite = () => {
if (onUpdate && editText.trim() !== text) {
onUpdate(editText.trim());
}
onOverwrite?.();
stopEditing();
};
const handleCancel = () => {
setEditText(text);
stopEditing();
};
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === "Escape") {
handleCancel();
}
// Ctrl/Cmd + Enter to save - disabled if there's a pending remote update
if (e.key === "Enter" && (e.ctrlKey || e.metaKey) && !hasPendingRemoteUpdate) {
handleSave();
}
};
const handleBlur = () => {
// Don't auto-save on blur if there's a pending remote update
if (!hasPendingRemoteUpdate) {
handleSave();
}
};
const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
setEditText(e.target.value);
// Auto-resize
e.target.style.height = "auto";
e.target.style.height = e.target.scrollHeight + "px";
};
if (isEditing && onUpdate) {
return (
<div className="relative">
<textarea
ref={textareaRef}
value={editText}
onChange={handleInput}
onBlur={handleBlur}
onKeyDown={handleKeyDown}
className="font-mono text-sm text-white/80 leading-relaxed w-full bg-transparent border border-[#3f6fb3] outline-none p-2 resize-none min-h-[60px]"
/>
{hasPendingRemoteUpdate ? (
<div className="flex items-center gap-2 mt-2">
<span className="text-yellow-500 text-xs font-mono">Remote update pending</span>
<button
onClick={handleOverwrite}
onMouseDown={(e) => e.preventDefault()}
className="px-2 py-1 font-mono text-xs text-yellow-500 border border-yellow-500/50 hover:border-yellow-500 transition-colors"
>
Overwrite
</button>
<button
onClick={handleCancel}
onMouseDown={(e) => e.preventDefault()}
className="px-2 py-1 font-mono text-xs text-[#555] hover:text-white/70 transition-colors"
>
Cancel
</button>
</div>
) : (
<div className="text-[10px] text-[#555] font-mono mt-1">
Ctrl+Enter to save, Esc to cancel
</div>
)}
</div>
);
}
return (
<p
className={`font-mono text-sm text-white/80 leading-relaxed ${onUpdate ? "cursor-text hover:bg-[rgba(117,170,252,0.05)] px-1 -mx-1 rounded" : ""}`}
onClick={() => onUpdate && startEditing()}
>
{text}
</p>
);
}
function ChartElement({
chartType,
data,
title,
config,
}: {
chartType: "line" | "bar" | "pie" | "area";
data: Record<string, unknown>[];
title?: string;
config?: Record<string, unknown>;
}) {
return (
<div className="border border-[#333] p-4 bg-black/30">
<ChartRenderer
chartType={chartType}
data={data}
title={title}
config={config}
/>
</div>
);
}
function ImageElement({
src,
alt,
caption,
}: {
src: string;
alt?: string;
caption?: string;
}) {
return (
<figure className="space-y-2">
<img
src={src}
alt={alt || ""}
className="max-w-full border border-[#333]"
/>
{caption && (
<figcaption className="text-[#555] font-mono text-xs italic">
{caption}
</figcaption>
)}
</figure>
);
}
function CodeElement({
language,
content,
}: {
language?: string;
content: string;
}) {
return (
<div className="relative">
{language && (
<div className="absolute top-0 right-0 px-2 py-0.5 font-mono text-[10px] text-[#555] bg-[#1a1a1a] border-b border-l border-[#333]">
{language}
</div>
)}
<pre className="bg-[#0d0d0d] border border-[#333] p-4 overflow-x-auto">
<code className="font-mono text-sm text-[#9bc3ff] whitespace-pre">
{content}
</code>
</pre>
</div>
);
}
function ListElement({
ordered,
items,
}: {
ordered: boolean;
items: string[];
}) {
const ListTag = ordered ? "ol" : "ul";
return (
<ListTag className={`font-mono text-sm text-white/80 leading-relaxed pl-6 space-y-1 ${ordered ? "list-decimal" : "list-disc"}`}>
{items.map((item, index) => (
<li key={index} className="pl-1">
{item}
</li>
))}
</ListTag>
);
}
/**
* Simple inline markdown renderer.
* Renders basic markdown syntax to HTML elements.
*/
function renderMarkdown(content: string): React.ReactNode {
const lines = content.split('\n');
const elements: React.ReactNode[] = [];
let i = 0;
while (i < lines.length) {
const line = lines[i];
// Code blocks
if (line.startsWith('```')) {
const lang = line.slice(3).trim();
const codeLines: string[] = [];
i++;
while (i < lines.length && !lines[i].startsWith('```')) {
codeLines.push(lines[i]);
i++;
}
i++; // skip closing ```
elements.push(
<div key={elements.length} className="relative my-2">
{lang && (
<div className="absolute top-0 right-0 px-2 py-0.5 font-mono text-[10px] text-[#555] bg-[#1a1a1a] border-b border-l border-[#333]">
{lang}
</div>
)}
<pre className="bg-[#0d0d0d] border border-[#333] p-4 overflow-x-auto">
<code className="font-mono text-sm text-[#9bc3ff] whitespace-pre">
{codeLines.join('\n')}
</code>
</pre>
</div>
);
continue;
}
// Headings
const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
if (headingMatch) {
const level = headingMatch[1].length;
const text = headingMatch[2];
const HeadingTag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
const sizeClasses: Record<number, string> = {
1: "text-2xl font-bold",
2: "text-xl font-bold",
3: "text-lg font-semibold",
4: "text-base font-semibold",
5: "text-sm font-semibold",
6: "text-xs font-semibold",
};
elements.push(
<HeadingTag key={elements.length} className={`font-mono text-[#9bc3ff] ${sizeClasses[level]} my-2`}>
{renderInlineMarkdown(text)}
</HeadingTag>
);
i++;
continue;
}
// Unordered lists
if (line.match(/^[-*]\s+/)) {
const items: string[] = [];
while (i < lines.length && lines[i].match(/^[-*]\s+/)) {
items.push(lines[i].replace(/^[-*]\s+/, ''));
i++;
}
elements.push(
<ul key={elements.length} className="font-mono text-sm text-white/80 leading-relaxed pl-6 space-y-1 list-disc my-2">
{items.map((item, idx) => (
<li key={idx} className="pl-1">{renderInlineMarkdown(item)}</li>
))}
</ul>
);
continue;
}
// Ordered lists
if (line.match(/^\d+\.\s+/)) {
const items: string[] = [];
while (i < lines.length && lines[i].match(/^\d+\.\s+/)) {
items.push(lines[i].replace(/^\d+\.\s+/, ''));
i++;
}
elements.push(
<ol key={elements.length} className="font-mono text-sm text-white/80 leading-relaxed pl-6 space-y-1 list-decimal my-2">
{items.map((item, idx) => (
<li key={idx} className="pl-1">{renderInlineMarkdown(item)}</li>
))}
</ol>
);
continue;
}
// Empty lines
if (line.trim() === '') {
i++;
continue;
}
// Regular paragraphs
elements.push(
<p key={elements.length} className="font-mono text-sm text-white/80 leading-relaxed my-2">
{renderInlineMarkdown(line)}
</p>
);
i++;
}
return <>{elements}</>;
}
/**
* Render inline markdown (bold, italic, code, links).
*/
function renderInlineMarkdown(text: string): React.ReactNode {
// Process inline elements: **bold**, *italic*, `code`, [link](url)
const parts: React.ReactNode[] = [];
let remaining = text;
let keyCounter = 0;
while (remaining.length > 0) {
// Check for inline code
const codeMatch = remaining.match(/^`([^`]+)`/);
if (codeMatch) {
parts.push(
<code key={keyCounter++} className="bg-[#1a1a1a] px-1 py-0.5 text-[#9bc3ff] border border-[#333] text-xs">
{codeMatch[1]}
</code>
);
remaining = remaining.slice(codeMatch[0].length);
continue;
}
// Check for bold
const boldMatch = remaining.match(/^\*\*([^*]+)\*\*/);
if (boldMatch) {
parts.push(<strong key={keyCounter++} className="font-bold">{boldMatch[1]}</strong>);
remaining = remaining.slice(boldMatch[0].length);
continue;
}
// Check for italic
const italicMatch = remaining.match(/^\*([^*]+)\*/);
if (italicMatch) {
parts.push(<em key={keyCounter++} className="italic">{italicMatch[1]}</em>);
remaining = remaining.slice(italicMatch[0].length);
continue;
}
// Check for links
const linkMatch = remaining.match(/^\[([^\]]+)\]\(([^)]+)\)/);
if (linkMatch) {
parts.push(
<a key={keyCounter++} href={linkMatch[2]} className="text-[#75aafc] hover:underline" target="_blank" rel="noopener noreferrer">
{linkMatch[1]}
</a>
);
remaining = remaining.slice(linkMatch[0].length);
continue;
}
// Find next special character or end
const nextSpecial = remaining.search(/[`*\[]/);
if (nextSpecial === -1) {
parts.push(remaining);
break;
} else if (nextSpecial === 0) {
// Special char at start but didn't match a pattern - treat as text
parts.push(remaining[0]);
remaining = remaining.slice(1);
} else {
parts.push(remaining.slice(0, nextSpecial));
remaining = remaining.slice(nextSpecial);
}
}
return <>{parts}</>;
}
function MarkdownElement({
content,
onUpdate,
onEditingChange,
hasPendingRemoteUpdate,
onOverwrite,
}: {
content: string;
onUpdate?: (content: string) => void;
onEditingChange?: (isEditing: boolean) => void;
hasPendingRemoteUpdate?: boolean;
onOverwrite?: () => void;
}) {
const [isEditing, setIsEditing] = useState(false);
const [editContent, setEditContent] = useState(content);
const textareaRef = useRef<HTMLTextAreaElement>(null);
useEffect(() => {
if (!isEditing) {
setEditContent(content);
}
}, [content, isEditing]);
useEffect(() => {
if (isEditing && textareaRef.current) {
textareaRef.current.focus();
textareaRef.current.style.height = "auto";
textareaRef.current.style.height = textareaRef.current.scrollHeight + "px";
}
}, [isEditing]);
const startEditing = () => {
setIsEditing(true);
onEditingChange?.(true);
};
const stopEditing = () => {
setIsEditing(false);
onEditingChange?.(false);
};
const handleSave = () => {
if (hasPendingRemoteUpdate) return;
if (onUpdate && editContent !== content) {
onUpdate(editContent);
}
stopEditing();
};
const handleOverwrite = () => {
if (onUpdate && editContent !== content) {
onUpdate(editContent);
}
onOverwrite?.();
stopEditing();
};
const handleCancel = () => {
setEditContent(content);
stopEditing();
};
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === "Escape") {
handleCancel();
}
if (e.key === "Enter" && (e.ctrlKey || e.metaKey) && !hasPendingRemoteUpdate) {
handleSave();
}
};
const handleBlur = () => {
if (!hasPendingRemoteUpdate) {
handleSave();
}
};
const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
setEditContent(e.target.value);
e.target.style.height = "auto";
e.target.style.height = e.target.scrollHeight + "px";
};
if (isEditing && onUpdate) {
return (
<div className="relative">
<div className="text-[10px] text-[#555] font-mono mb-1 flex items-center gap-2">
<span className="text-[#75aafc]">Editing Markdown</span>
</div>
<textarea
ref={textareaRef}
value={editContent}
onChange={handleInput}
onBlur={handleBlur}
onKeyDown={handleKeyDown}
className="font-mono text-sm text-white/80 leading-relaxed w-full bg-[#0d0d0d] border border-[#3f6fb3] outline-none p-3 resize-none min-h-[120px]"
placeholder="Enter markdown content..."
/>
{hasPendingRemoteUpdate ? (
<div className="flex items-center gap-2 mt-2">
<span className="text-yellow-500 text-xs font-mono">Remote update pending</span>
<button
onClick={handleOverwrite}
onMouseDown={(e) => e.preventDefault()}
className="px-2 py-1 font-mono text-xs text-yellow-500 border border-yellow-500/50 hover:border-yellow-500 transition-colors"
>
Overwrite
</button>
<button
onClick={handleCancel}
onMouseDown={(e) => e.preventDefault()}
className="px-2 py-1 font-mono text-xs text-[#555] hover:text-white/70 transition-colors"
>
Cancel
</button>
</div>
) : (
<div className="text-[10px] text-[#555] font-mono mt-1">
Ctrl+Enter to save, Esc to cancel
</div>
)}
</div>
);
}
return (
<div
className={`border border-[#333] bg-[#0a0a0a] p-4 rounded ${onUpdate ? "cursor-text hover:border-[#3f6fb3] transition-colors" : ""}`}
onClick={() => onUpdate && startEditing()}
>
<div className="text-[10px] text-[#555] font-mono mb-2 flex items-center gap-1">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
<path d="M14 2v6h6" />
<path d="M16 13H8" />
<path d="M16 17H8" />
<path d="M10 9H8" />
</svg>
<span>Markdown</span>
</div>
{renderMarkdown(content)}
</div>
);
}
