feat: implement Phase 5 - undo/redo system with command pattern
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>
This commit is contained in:
54
lib/hooks/useHistory.ts
Normal file
54
lib/hooks/useHistory.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
'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,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user