w-funnel/MARKUP.md

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

Описание

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

Синтаксис

Жирный текст

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

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

📝 В заголовках:

"Добро пожаловать в **WitLab**!"

Результат: "Добро пожаловать в WitLab!"

💰 В предложениях скидок:

"**50%** скидка только сегодня!"

Результат: "50% скидка только сегодня!"

💖 В результатах анализа:

"Ваш **идеальный партнер** найден на основе анализа ваших ответов"

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

👤 С именами пользователей:

"Поздравляем, **Анна**! Ваш портрет готов."

Результат: "Поздравляем, Анна! Ваш портрет готов."

Где работает

✅ Автоматически поддерживается:

• Все текстовые поля в экранах воронки (title, subtitle, description)
• Info экраны - описания
• Soulmate Portrait - описания портрета
• Date экраны - info сообщения
• Form экраны - лейблы и placeholder
• Coupon экраны - все текстовые поля купона

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

1. Автоматическое обнаружение:

// Система автоматически проверяет каждый текст на наличие разметки
import { hasTextMarkup } from "@/lib/text-markup";

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

2. Универсальная обработка:

// Все компоненты Typography автоматически поддерживают разметку
<Typography enableMarkup={hasTextMarkup(text)}>
  {text}
</Typography>

3. Превью в админке:

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

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

📋 Info экраны:

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

💖 Soulmate Portrait:

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

📅 Date экраны:

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

🎟️ Coupon экраны:

{
  "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 для ручного управления
• Совместимость с существующими стилями

📝 Пример кода:

// Автоматическое использование
<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
• ✅ Обратная совместимость - существующий текст работает без изменений