open-index/open-npm huggingface dataset:
npm package: @hautechai/visual-editor
Description: Main editor component library providing drag-and-drop video editing interfaces.
Latest version: 2.1.0

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

```tsx
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:**

```bash
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](docs/files_structure.md) for detailed file structure and [docs/tech_stack.md](docs/tech_stack.md) for technology stack information.