# URL Paste Menu & Button Configuration - Documentation

## 📋 Vue d'ensemble

Cette fonctionnalité ajoute deux nouvelles capacités à l'éditeur Nimbus :

1. **Menu de collage d'URL** : Lorsqu'un utilisateur colle une URL dans un bloc paragraphe, un menu contextuel apparaît avec plusieurs options de transformation
2. **Configuration avancée des boutons** : Un modal de configuration complet pour personnaliser les blocs boutons

## 🎯 Fonctionnalités implémentées

### 1. Menu de collage d'URL (UrlPasteMenu)

Lorsqu'une URL est collée dans un bloc paragraphe en mode prompt, un menu s'affiche avec 5 options :

#### Options disponibles :
- **URL** : Affiche l'URL brute dans le bloc paragraphe
- **Titre** : Récupère le titre du site web et l'affiche dans le paragraphe
- **Intégrer** : Convertit le bloc en `embed-block` pour afficher la page dans une iframe ajustable
- **Marque-page** : Convertit le bloc en `bookmark-block` avec preview de la page
- **Bouton** : Convertit le bloc en `button-block` avec l'URL configurée

#### Comportement :
- Détection automatique des URLs (regex `https?://...`)
- Menu positionné près du curseur
- Récupération asynchrone du titre via `UrlPreviewService`
- Fermeture automatique après sélection

### 2. Configuration avancée des boutons (ButtonConfigModal)

Un modal complet pour configurer tous les aspects d'un bouton :

#### Paramètres configurables :

**Texte et URL**
- Titre du bouton (label)
- URL ou Email de destination
- ID unique du bouton (affiché, non modifiable)

**Comportement**
- ☑️ Ouvrir dans un nouvel onglet

**Forme du bouton**
- 🔵 Pill (arrondi complet)
- ⬜ Rounded (coins arrondis)

**Couleur d'arrière-plan**
- Palette de 7 couleurs prédéfinies :
  - Bleu (#3b82f6)
  - Rouge (#ef4444)
  - Orange (#f59e0b)
  - Vert (#10b981)
  - Violet (#8b5cf6)
  - Rose (#ec4899)
  - Gris (#6b7280)

**Taille**
- Petit (small)
- Moyen (medium) - par défaut
- Grand (large)

**Type de bouton**
- ⚪ Bouton 3D (effet de profondeur avec border-bottom)
- ⚪ Bouton avec ombre (shadow + hover effect)
- ⚪ Par défaut (style simple)

#### Comportement du modal :
- Ouverture automatique lors de la création d'un nouveau bouton
- Bouton d'édition (crayon) visible au survol du bouton
- Boutons "Annuler" et "Terminé"
- Validation en temps réel

## 📁 Fichiers créés

### Composants

1. **`src/app/editor/components/block/url-paste-menu.component.ts`**
   - Composant standalone Angular
   - Affiche le menu contextuel lors du collage d'URL
   - Récupère le titre du site via `UrlPreviewService`
   - Émet l'action sélectionnée vers le parent

2. **`src/app/editor/components/block/blocks/button-config-modal.component.ts`**
   - Modal de configuration des boutons
   - Interface complète avec tous les paramètres
   - Utilise Angular Signals pour la réactivité
   - Design cohérent avec le reste de l'application

### Modifications

3. **`src/app/editor/components/block/blocks/paragraph-block.component.ts`**
   - Ajout de l'import `UrlPasteMenuComponent`
   - Ajout de la méthode `onPaste()` pour intercepter le collage
   - Ajout de la méthode `onPasteMenuAction()` pour gérer les actions
   - Ajout des signaux : `pasteMenuVisible`, `pastedUrl`, `pasteMenuPosition`
   - Détection d'URL via regex
   - Conversion de blocs selon l'action choisie

4. **`src/app/editor/components/block/blocks/button-block.component.ts`**
   - Refonte complète du composant
   - Ajout de l'import `ButtonConfigModalComponent`
   - Rendu visuel du bouton avec tous les styles
   - Ouverture automatique du modal si le bouton est vide
   - Bouton d'édition au survol
   - Méthodes : `getButtonClasses()`, `getBgColor()`, `getTextColor()`

5. **`src/app/editor/core/models/block.model.ts`**
   - Extension de l'interface `ButtonProps` :
     ```typescript
     export interface ButtonProps {
       label: string;
       url: string;
       variant?: 'primary' | 'secondary' | 'outline' | '3d' | 'shadow' | 'default';
       openInNewTab?: boolean;
       shape?: 'pill' | 'rounded' | 'square';
       backgroundColor?: string;
       size?: 'small' | 'medium' | 'large';
     }
     ```

## 🔄 Flux d'utilisation

### Scénario 1 : Collage d'URL

```
1. Utilisateur colle une URL (Ctrl+V) dans un paragraphe vide
   ↓
2. ParagraphBlockComponent.onPaste() détecte l'URL
   ↓
3. UrlPasteMenu s'affiche avec 5 options
   ↓
4. Utilisateur clique sur une option (ex: "Bouton")
   ↓
5. ParagraphBlockComponent.onPasteMenuAction() convertit le bloc
   ↓
6. Le bloc devient un ButtonBlock
   ↓
7. ButtonConfigModal s'ouvre automatiquement (label vide)
   ↓
8. Utilisateur configure le bouton
   ↓
9. Clic sur "Terminé" → bouton créé et stylisé
```

### Scénario 2 : Création directe de bouton

```
1. Utilisateur crée un bloc bouton via le menu "/"
   ↓
2. ButtonBlock créé avec props par défaut
   ↓
3. ButtonConfigModal s'ouvre automatiquement
   ↓
4. Utilisateur configure tous les paramètres
   ↓
5. Clic sur "Terminé" → bouton créé
```

### Scénario 3 : Édition d'un bouton existant

```
1. Utilisateur survole un bouton existant
   ↓
2. Icône crayon apparaît en haut à droite
   ↓
3. Clic sur l'icône
   ↓
4. ButtonConfigModal s'ouvre avec les valeurs actuelles
   ↓
5. Modifications et "Terminé"
   ↓
6. Bouton mis à jour
```

## 🎨 Styles CSS appliqués

### Classes dynamiques du bouton

**Taille** :
- `small` : `px-3 py-1.5 text-xs`
- `medium` : `px-4 py-2 text-sm`
- `large` : `px-6 py-3 text-base`

**Forme** :
- `pill` : `rounded-full`
- `rounded` : `rounded-lg`
- `square` : `rounded-md`

**Variant** :
- `3d` : `border-b-4 border-black/20 active:border-b-0 active:translate-y-1`
- `shadow` : `shadow-lg hover:shadow-xl hover:-translate-y-0.5`
- `outline` : `border-2` (fond transparent, texte coloré)

## 🔧 Intégration technique

### Dépendances

- `UrlPreviewService` : Pour récupérer les métadonnées des URLs
- `DocumentService` : Pour convertir les blocs
- `Angular Signals` : Pour la réactivité
- `CommonModule`, `FormsModule` : Modules Angular standard

### Détection d'URL

Regex utilisée :
```typescript
/^https?:\/\/[^\s/$.?#].[^\s]*$/i
```

Cette regex détecte :
- Protocole `http://` ou `https://`
- Domaine valide
- Chemin optionnel
- Pas d'espaces

### Conversion de blocs

Utilise `DocumentService.updateBlock()` pour transformer le bloc paragraphe en :
- `embed` : `{ url, provider: 'generic' }`
- `bookmark` : `{ url, title, viewMode: 'card' }`
- `button` : `{ label, url, variant: 'primary' }`

## ✅ Tests recommandés

### Test 1 : Menu URL
1. Ouvrir l'éditeur Nimbus
2. Créer un nouveau paragraphe
3. Coller `https://example.com`
4. Vérifier que le menu apparaît
5. Tester chaque option

### Test 2 : Configuration bouton
1. Créer un bouton via "/"
2. Vérifier l'ouverture du modal
3. Modifier tous les paramètres
4. Vérifier le rendu visuel

### Test 3 : Édition bouton
1. Créer un bouton
2. Survoler le bouton
3. Cliquer sur l'icône crayon
4. Modifier et sauvegarder

### Test 4 : URLs complexes
- URL avec paramètres : `https://example.com?param=value`
- URL avec ancre : `https://example.com#section`
- URL avec port : `http://localhost:3000`

## 🐛 Gestion des erreurs

- Si `UrlPreviewService` échoue, le titre reste vide (pas de blocage)
- Si l'URL est invalide, le menu ne s'affiche pas
- Si le modal est annulé, aucune modification n'est appliquée
- Prévention de navigation dans l'éditeur (click intercepté)

## 🚀 Améliorations futures possibles

1. **Menu URL** :
   - Support des URLs sans protocole (auto-ajout de `https://`)
   - Prévisualisation de l'embed avant conversion
   - Historique des URLs récentes

2. **Configuration bouton** :
   - Sélecteur de couleur personnalisé (color picker)
   - Prévisualisation en temps réel dans le modal
   - Templates de boutons prédéfinis
   - Support des icônes (Lucide, FontAwesome)

3. **Général** :
   - Raccourcis clavier pour le menu URL
   - Drag & drop d'URLs depuis le navigateur
   - Support des emails (mailto:)
   - Support des numéros de téléphone (tel:)

## 📝 Notes de développement

- Tous les composants sont **standalone** (pas de module requis)
- Utilisation de **Angular Signals** pour la réactivité moderne
- **TailwindCSS** pour tous les styles
- **z-index: 12000** pour le modal (au-dessus de tout)
- **z-index: 11000** pour le menu URL
- Pas de dépendances externes supplémentaires

## ✨ Résumé

Cette implémentation ajoute une expérience utilisateur fluide et moderne pour :
- Transformer rapidement des URLs collées en différents types de blocs
- Configurer finement l'apparence et le comportement des boutons
- Maintenir la cohérence visuelle avec le reste de l'éditeur Nimbus

Tous les fichiers sont prêts et fonctionnels. La fonctionnalité est complète et prête pour les tests.