Function MarkdownEditor

src/components/MarkdownEditor.tsx:14–124

({
  content,
  onChange,
  onSave,
  hasUnsavedChanges,
  disabled = false,
}: MarkdownEditorProps)

}

export function MarkdownEditor({
  content,
  onChange,
  onSave,
  hasUnsavedChanges,
  disabled = false,
}: MarkdownEditorProps) {
  const [isSaving, setIsSaving] = useState(false);
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === "Tab") {
      e.preventDefault();
      const target = e.currentTarget;
      const start = target.selectionStart;
      const end = target.selectionEnd;

      const newValue =
        content.substring(0, start) + "  " + content.substring(end);
      onChange(newValue);

      // Restore cursor position after state update
      setTimeout(() => {
        target.selectionStart = target.selectionEnd = start + 2;
      }, 0);
    }

    // Ctrl/Cmd + S to save
    if ((e.ctrlKey || e.metaKey) && e.key === "s") {
      e.preventDefault();
      handleSave();
    }
  };

  const handleSave = async () => {
    if (!hasUnsavedChanges || isSaving) return;
    setIsSaving(true);
    try {
      await onSave();
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <div className="h-full flex flex-col">
      {/* Toolbar */}
      <div
        className="flex items-center justify-between px-4 py-2"
        style={{
          backgroundColor: "var(--card)",
          borderBottom: "1px solid var(--border)",
        }}
      >
        <div className="flex items-center gap-2">
          {hasUnsavedChanges && (
            <span
              className="flex items-center gap-1.5 text-sm"