Added comprehensive undo/redo functionality: - Command pattern interface and base classes - HistoryManager with 50-operation stack - EditCommand for all edit operations (cut, delete, paste, trim) - Full keyboard shortcuts (Ctrl+Z undo, Ctrl+Y/Ctrl+Shift+Z redo) - HistoryControls UI component with visual feedback - Integrated history system with all edit operations - Toast notifications for undo/redo actions - History state tracking and display New files: - lib/history/command.ts - Command interface and BaseCommand - lib/history/history-manager.ts - HistoryManager class - lib/history/commands/edit-command.ts - EditCommand and factory functions - lib/hooks/useHistory.ts - React hook for history management - components/editor/HistoryControls.tsx - History UI component Modified files: - components/editor/AudioEditor.tsx - Integrated history system - components/editor/EditControls.tsx - Updated keyboard shortcuts display 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
55 lines
1.2 KiB
TypeScript
55 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { HistoryManager } from '@/lib/history/history-manager';
|
|
import type { HistoryState } from '@/lib/history/history-manager';
|
|
import type { Command } from '@/lib/history/command';
|
|
|
|
export interface UseHistoryReturn {
|
|
execute: (command: Command) => void;
|
|
undo: () => boolean;
|
|
redo: () => boolean;
|
|
clear: () => void;
|
|
state: HistoryState;
|
|
}
|
|
|
|
export function useHistory(maxHistorySize: number = 50): UseHistoryReturn {
|
|
const [manager] = React.useState(() => new HistoryManager(maxHistorySize));
|
|
const [state, setState] = React.useState<HistoryState>(manager.getState());
|
|
|
|
React.useEffect(() => {
|
|
const unsubscribe = manager.subscribe(() => {
|
|
setState(manager.getState());
|
|
});
|
|
|
|
return unsubscribe;
|
|
}, [manager]);
|
|
|
|
const execute = React.useCallback(
|
|
(command: Command) => {
|
|
manager.execute(command);
|
|
},
|
|
[manager]
|
|
);
|
|
|
|
const undo = React.useCallback(() => {
|
|
return manager.undo();
|
|
}, [manager]);
|
|
|
|
const redo = React.useCallback(() => {
|
|
return manager.redo();
|
|
}, [manager]);
|
|
|
|
const clear = React.useCallback(() => {
|
|
manager.clear();
|
|
}, [manager]);
|
|
|
|
return {
|
|
execute,
|
|
undo,
|
|
redo,
|
|
clear,
|
|
state,
|
|
};
|
|
}
|