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,
  accept,
  placeholder,
  isExposed,
  onToggleExpose,
}) => {
  // Your custom media picker implementation
  return (
    <div>
      <button type="button" onClick={onToggleExpose}>
        {isExposed ? 'Hide from inputs' : 'Expose to inputs'}
      </button>

      <select value={value} onChange={(e) => setValue(e.target.value)}>
        <option value="">Select {elementType}</option>
        {/* Your asset options */}
      </select>

      <input
        type="text"
        placeholder={placeholder}
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />

      <input type="file" accept={accept} />
    </div>
  );
};

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

// The custom field receives the same `accept` and placeholder values used by the
// built-in MediaField, so uploads can be limited per element type.

### 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.