w-funnel/MARKUP.md

# 🎨 Система разметки текста WitLab Funnel

## Описание

Универсальная система разметки позволяет выделять части текста **жирным шрифтом** в любых текстовых полях воронки. Система автоматически обнаруживает разметку и применяет стили.

## Синтаксис

### **Жирный текст**
```
**текст** - выделяет текст жирным шрифтом
```

### Примеры использования:

#### 📝 **В заголовках:**
```
"Добро пожаловать в **WitLab**!"
```
Результат: "Добро пожаловать в **WitLab**!"

#### 💰 **В предложениях скидок:**
```
"**50%** скидка только сегодня!"
```
Результат: "**50%** скидка только сегодня!"

#### 💖 **В результатах анализа:**
```
"Ваш **идеальный партнер** найден на основе анализа ваших ответов"
```
Результат: "Ваш **идеальный партнер** найден на основе анализа ваших ответов"

#### 👤 **С именами пользователей:**
```
"Поздравляем, **Анна**! Ваш портрет готов."
```
Результат: "Поздравляем, **Анна**! Ваш портрет готов."

## Где работает

### ✅ Автоматически поддерживается:
- **Все текстовые поля** в экранах воронки (title, subtitle, description)
- **Info экраны** - описания
- **Soulmate Portrait** - описания портрета
- **Date экраны** - info сообщения
- **Form экраны** - лейблы и placeholder
- **Coupon экраны** - все текстовые поля купона

### 🔧 Как это работает:

#### 1. **Автоматическое обнаружение:**
```typescript
// Система автоматически проверяет каждый текст на наличие разметки
import { hasTextMarkup } from "@/lib/text-markup";

if (hasTextMarkup("Ваш **идеальный** партнер")) {
  // Включает обработку разметки автоматически
}
```

#### 2. **Универсальная обработка:**
```typescript
// Все компоненты Typography автоматически поддерживают разметку
<Typography enableMarkup={hasTextMarkup(text)}>
  {text}
</Typography>
```

#### 3. **Превью в админке:**
```typescript
// В админке показывается живое превью разметки
<MarkupPreview text="Ваш **идеальный** партнер" />
```

## Примеры для разных типов экранов

### 📋 **Info экраны:**
```json
{
  "template": "info",
  "description": {
    "text": "Мы проанализировали **12 миллионов** анкет и нашли **идеальные совпадения** для вас!"
  }
}
```

### 💖 **Soulmate Portrait:**
```json
{
  "template": "soulmate", 
  "description": {
    "text": "Ваш **идеальный партнер** найден на основе **глубокого анализа** ваших ответов"
  }
}
```

### 📅 **Date экраны:**
```json
{
  "template": "date",
  "infoMessage": {
    "text": "Мы используем дату рождения для определения **знака зодиака** и **совместимости**"
  }
}
```

### 🎟️ **Coupon экраны:**
```json
{
  "template": "coupon",
  "coupon": {
    "title": { "text": "**94% скидка** только сегодня!" },
    "description": { "text": "Используйте промокод **HAIR50** и получите максимальную скидку" }
  }
}
```

## Технические детали

### 🔧 **Компоненты системы:**

#### 1. **Утилиты (`/lib/text-markup.ts`):**
- `parseTextMarkup()` - парсинг разметки в сегменты
- `hasTextMarkup()` - проверка наличия разметки
- `stripTextMarkup()` - удаление разметки

#### 2. **React компоненты (`/components/ui/MarkupText/`):**
- `<MarkupText>` - рендеринг текста с разметкой
- `<MarkupPreview>` - превью в админке
- `useHasMarkup()` - React хук для проверки

#### 3. **Интеграция (`Typography.tsx`):**
- Автоматическая активация при обнаружении разметки
- Параметр `enableMarkup` для ручного управления
- Совместимость с существующими стилями

### 📝 **Пример кода:**
```tsx
// Автоматическое использование
<Typography>
  Ваш **идеальный** партнер найден!
</Typography>

// Ручное управление
<Typography enableMarkup={true}>
  Обычный текст с **выделением**
</Typography>

// Прямое использование MarkupText
<MarkupText as="h1" boldClassName="text-primary">
  **WitLab** - найди свою любовь!
</MarkupText>
```

## Лучшие практики

### ✅ **Хорошо:**
- `"Ваш **идеальный** партнер найден!"` - выделение ключевых слов
- `"**50%** скидка только сегодня"` - выделение цифр и акций
- `"Поздравляем, **Анна**!"` - выделение имен

### ❌ **Избегайте:**
- `"**Весь текст жирный**"` - потеря контраста
- `"**Сл**ов**ом** **разб**ит**ые**"` - нечитаемость
- `"****"` - пустые выделения

### 💡 **Советы:**
1. **Выделяйте ключевые слова** - имена, проценты, важные понятия
2. **Соблюдайте баланс** - не более 20% текста должно быть жирным
3. **Тестируйте в превью** - используйте MarkupPreview в админке
4. **Учитывайте контекст** - в заголовках выделение менее заметно

## Совместимость

- ✅ **React 18+**
- ✅ **TypeScript 5+** 
- ✅ **Next.js 14+**
- ✅ **Tailwind CSS**
- ✅ **Обратная совместимость** - существующий текст работает без изменений