(Feat) custom attribute addition from the UI

[krisbiradar]

Feature: Custom Attribute Addition in Trait Manager

🚀 Overview

This feature enhances the Trait Manager by allowing users to dynamically add custom attributes to selected components directly through the editor UI. This removes the need to define every possible trait in the component definition, giving users the flexibility to add attributes like data-* tags, ARIA labels, or custom identifiers on the fly.

📝 Key Changes

1. UI Updates

• New Input Field: Added a footer section to the Trait Manager panel containing a text input and an "Add" button (+).
• Interaction: Users can type an attribute name and add it by pressing Enter or clicking the button.

2. Core Logic

• Dynamic Addition: When a trait is added, it is immediately registered on the selected component's traits collection.
• Attribute Initialization: The feature automatically initializes the attribute on the component model (e.g., adding data-id=""), ensuring it appears in the exported code immediately.
• Validation: Implemented a validation mechanism to prevent invalid attribute names.
  • Default Behavior: Enforces data-* naming convention (e.g., data-tooltip).
  • Duplicate Check: Prevents adding attributes that already exist on the component.

3. Configuration

• Custom Validation: Introduced a new configuration option customTraitValidationRegex to override the default validation pattern.

⚙️ Configuration

You can customize the validation logic by passing a regex to the traitManager configuration.

Default Behavior (Strict data-* attributes):

// No config needed, defaults to: /^data-[a-z][a-z0-9-]*$/