Visual Editor Library

Main editor component library providing drag-and-drop video editing interfaces.

Key Features

• Drag-and-drop timeline editing with real-time preview
• Keyframe animation system for smooth property transitions
• Customizable media fields for enhanced asset management
• Property-based element system with full type safety
• Responsive performance with compositions up to 50 elements

Customization

Custom Media Fields

The visual editor supports custom media field components for enhanced asset management:

import { VisualEditor } from '@hautechai/visual-editor';

const CustomMediaField = ({ elementType, value, setValue }) => {
  // Your custom media picker implementation
  return (
    <div>
      <select value={value} onChange={(e) => setValue(e.target.value)}>
        <option value="">Select {elementType}</option>
        {/* Your asset options */}
      </select>
    </div>
  );
};

<VisualEditor
  customMediaField={CustomMediaField}
  testId="my-editor"
  // ... other props
/>;

### E2E Testing

You can pass a `testId` prop to set a `data-testid` attribute on the root editor container for automated end-to-end testing:

```tsx
<VisualEditor testId="my-editor" />

This enables reliable selection of the editor in test suites.

See the [storybook example](../../apps/storybook/stories/VisualEditor.stories.tsx) for a complete implementation.

## Building

```bash
cd libs/visual-editor

Note: Depends on runtime library - build runtime first.

Testing

Run tests:

cd libs/visual-editor
pnpm run test

• Uses Jest with jsdom environment
• Uses testing-library/react for React component testing
• 7 test suites with 39 tests total
• Test runtime: ~3 seconds
• All tests consistently pass

Architecture

See docs/files_structure.md for detailed file structure and docs/tech_stack.md for technology stack information.