Обновления редактора контента

✨ Новое в версии 0.1.9

📝 Правильные склонения в русском языке

Проблема: Неправильные склонения в UI ("2 тегов", "3 постов")

Решение: Добавлена универсальная функция склонения для русского языка

🛠️ Новые функции:

1. pluralize(count, forms)

// Формат: [единственное, 2-4, множественное]
pluralize(1, ['тег', 'тега', 'тегов']) // → 'тег'
pluralize(2, ['тег', 'тега', 'тегов']) // → 'тега' 
pluralize(5, ['тег', 'тега', 'тегов']) // → 'тегов'

2. formatCount(count, forms)

formatCount(1, ['тег', 'тега', 'тегов']) // → '1 тег'
formatCount(2, ['тег', 'тега', 'тегов']) // → '2 тега'
formatCount(5, ['тег', 'тега', 'тегов']) // → '5 тегов'

📋 Алгоритм склонения:

• 1, 21, 31, 41... → форма 1 (тег, пост)
• 2, 3, 4, 22, 23, 24... → форма 2 (тега, поста)
• 0, 5-20, 25-30... → форма 3 (тегов, постов)
• 11-14 → всегда форма 3 (особый случай русского языка)

✅ Исправленные места:

Frontend:

• frontend/app/posts/[slug]/page.tsx - счетчик тегов
• frontend/components/posts/PostsList.tsx - счетчик тегов в карточках

Admin:

• admin/src/routes/PostsList.tsx - счетчик постов в заголовке
• admin/src/routes/Dashboard.tsx - статистика постов
• admin/src/components/settings/PostSettings.tsx - настройки постов

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

Файлы с новыми функциями:

• frontend/lib/utils.ts - функции для frontend
• admin/src/lib/utils.ts - функции для админки

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

// Старое (неправильно)
<span>{post.tags.length} тегов</span>

// Новое (правильно)
<span>{formatCount(post.tags.length, ['тег', 'тега', 'тегов'])}</span>

📊 Результат:

• ✅ 1 тег вместо "1 тегов"
• ✅ 2 тега вместо "2 тегов"
• ✅ 5 тегов (правильно)
• ✅ 11 тегов (особый случай)
• ✅ 21 тег вместо "21 тегов"
• ✅ 22 поста вместо "22 постов"

🎯 Применимость:

Функции можно использовать для любых слов в русском языке:

pluralize(count, ['файл', 'файла', 'файлов'])
pluralize(count, ['пользователь', 'пользователя', 'пользователей'])
pluralize(count, ['страница', 'страницы', 'страниц'])

🎨 ПОЛНАЯ ПОДДЕРЖКА TAILWIND CSS v0.1.8

🎯 Решение проблемы с Tailwind в Simple Preview

Проблема: Tailwind CSS классы не отображались в Simple Preview админки, потому что Tailwind не видел динамический контент из редактора.

✅ Что было исправлено:

// ПРОБЛЕМА: Tailwind config сканировал только статические файлы
content: [
  "./index.html",
  "./src/**/*.{js,ts,jsx,tsx}",
],
// Динамические классы из редактора НЕ включались в финальный CSS

🛠️ Решение:

Добавлен safelist в admin/tailwind.config.js с 200+ предустановленными классами:

safelist: [
  // Цвета фона
  'bg-blue-500', 'bg-red-500', 'bg-green-500', 'bg-purple-400', 'bg-pink-400',
  
  // Градиенты  
  'bg-gradient-to-r', 'bg-gradient-to-l', 'bg-gradient-to-t', 'bg-gradient-to-b',
  'from-purple-400', 'from-blue-400', 'to-pink-400', 'to-blue-400',
  
  // Отступы (p-1 до p-10, px-1 до px-10, m-1 до m-10, etc.)
  'p-1', 'p-2', 'p-3', ..., 'p-10',
  'px-1', 'px-2', ..., 'px-10', 
  'py-1', 'py-2', ..., 'py-10',
  
  // Typography
  'text-white', 'text-black', 'font-bold', 'text-center', 'text-lg',
  
  // Layout
  'flex', 'inline-flex', 'grid', 'items-center', 'justify-center',
  
  // Borders & Shadows
  'border', 'rounded-lg', 'rounded-xl', 'shadow', 'shadow-lg',
  
  // Pattern для responsive классов
  {
    pattern: /(sm|md|lg|xl|2xl):(bg|text|p|m|w|h|flex|grid|border|rounded)-.+/,
  }
]

🎯 Результат:

• ✅ Настоящий Tailwind CSS: Больше никаких inline стилей или хаков
• ✅ Все градиенты работают: bg-gradient-to-r from-purple-400 to-pink-400
• ✅ Responsive поддержка: sm:bg-blue-500, md:p-8, lg:text-center
• ✅ 200+ готовых классов: Цвета, отступы, typography, layout, borders
• ✅ Simple Preview = точная копия: Используется тот же CSS что и вся админка

🧹 Убрано:

• ❌ Inline стили хаки из ContentRenderer
• ❌ Сложный код преобразования классов в стили
• ❌ Временные костыли для обработки цветов

📝 Для разработчиков:

Если нужно добавить новые классы, просто добавьте их в admin/tailwind.config.js в секцию safelist.

🚨 КРИТИЧЕСКИЕ ИСПРАВЛЕНИЯ v0.1.7

🔧 Исправлен парсинг CSS классов на Frontend

Проблема: При отображении на продакшене (frontend) терялись CSS классы из атрибутов.

❌ Что было:

В редакторе:

<div class="bg-blue-500 p-10 inline-flex text-white rounded-lg">
Синий блок с отступами
</div>

На проде:

<div class="bg-blue-500">
Синий блок с отступами
</div>

✅ Что стало:

В редакторе и на проде одинаково:

<div class="bg-blue-500 p-10 inline-flex text-white rounded-lg">
Синий блок с отступами
</div>

🔍 Техническая причина:

Простой парсинг split(/\s+/) разбивал строку по пробелам внутри кавычек:

// НЕПРАВИЛЬНО
const attrParts = attributesStr.split(/\s+/);
// "class=\"bg-blue-500 p-10 inline-flex text-white rounded-lg\"" 
// превращалось в: ["class=\"bg-blue-500", "p-10", "inline-flex", ...]

✅ Решение:

Regex парсинг с правильной обработкой кавычек:

// ПРАВИЛЬНО
const regex = /(\w+)=["']([^"']*)["']/g;
// Результат: class = "bg-blue-500 p-10 inline-flex text-white rounded-lg"

🎯 Влияние исправления:

• ✅ Все Tailwind CSS классы корректно работают на продакшене
• ✅ Div блоки и кнопки отображаются как задумано
• ✅ Полное соответствие между админкой и frontend
• ✅ Исправлено для кнопок и div блоков

Критические исправления v0.1.6

🎨 Исправление Simple Preview в админке

Главная проблема была в том, что Simple Preview не отображал Tailwind CSS классы. Теперь добавлена поддержка inline стилей:

✅ Поддерживаемые Tailwind классы:

• Цвета фона: bg-blue-500, bg-red-500, bg-green-500, bg-purple-400, bg-pink-400
• Градиенты: bg-gradient-to-r from-purple-400 to-pink-400
• Отступы: p-8 (2rem), p-10 (2.5rem)
• Текст: text-white, text-center, font-bold
• Display: inline-flex
• Border radius: rounded-lg (0.5rem), rounded-xl (0.75rem)

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

// Если класс содержит bg-blue-500, добавляется:
style.backgroundColor = '#3b82f6';

// Если класс содержит градиент:
if (className.includes('from-purple-400') && className.includes('to-pink-400')) {
  style.background = 'linear-gradient(to right, #c084fc, #f472b6)';
}

📐 Улучшенный Grid Layout редактора

Исправлена проблема с растяжением секций редактора по высоте:

✅ Новый Grid Layout:

// Основной контейнер
<div className="h-full grid grid-rows-[auto_1fr] gap-4">
  <EditorButtons />  {/* Кнопки фиксированной высоты */}
  
  // Контент растягивается на всю оставшуюся высоту
  <div className="grid grid-cols-2 gap-4 h-full min-h-[500px]">
    <div className="h-full">
      <Textarea className="h-full" />
    </div>
    <div className="h-full">
      <LivePreview />
    </div>
  </div>
</div>

🎯 Результат:

• Одинаковая высота: Левая и правая секции всегда одинаковой высоты
• Адаптивность: Если правая панель выше, левая автоматически подстраивается
• Минимум: min-h-[500px] для комфортной работы
• Fullscreen: Тот же layout и в полноэкранном режиме

Критические исправления v0.1.5

🎯 Исправление рендеринга на продакшене

• ✅ Frontend MDX рендеринг: кнопки и div блоки теперь правильно отображаются на реальном сайте (http://localhost:3000)
• ✅ Компонент MDXContent: полная поддержка HTML-like тегов в frontend
• ✅ Tailwind CSS 4.1: использует @plugin "@tailwindcss/typography" синтаксис
• ✅ Prose классы: автоматическое применение typography стилей к контенту

🛠️ Поддерживаемые компоненты

• ✅ Кнопки: <button variant="outline" size="lg" href="#" class="bg-blue-500">Текст</button>
• ✅ Div блоки: <div class="bg-blue-500 p-10 inline-flex">Контент</div>
• ✅ Tailwind классы: полная поддержка всех классов (bg-gradient-to-r, from-purple-400, etc.)
• ✅ Markdown: заголовки, списки, код, жирный текст, инлайн код

🔧 Технические улучшения

• MDXContent компонент: заменил dangerouslySetInnerHTML на безопасный парсинг
• CustomComponents: shadcn UI кнопки с поддержкой всех атрибутов
• Совместимость regex: исправлены проблемы с ES2018 флагами
• Prose интеграция: использует @tailwindcss/typography для typography

Критические исправления v0.1.4 - Статус Backend

📡 Динамическая проверка статуса Backend

• ✅ Автоматическая проверка: каждые 30 секунд проверяется доступность backend
• ✅ Реальный статус: вместо всегда "Сервер активен" показывается актуальное состояние
• ✅ Продакшн готовность: автоматическое определение URL backend в зависимости от окружения
• ✅ Индикаторы состояния:
  • 🟢 Сервер активен - backend доступен
  • 🔴 Не активен - backend недоступен
  • 🟡 Проверка... - идет проверка соединения

🛠️ Дополнительные возможности

• ✅ Tooltip с деталями: наведите на статус для подробной информации
• ✅ Ручная проверка: кнопка обновления для мгновенной проверки
• ✅ Обработка ошибок: отображение причины недоступности
• ✅ Таймаут: автоматический таймаут запросов через 5 секунд

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

• useServerStatus Hook: отвечает за логику проверки
• Автоопределение URL: в продакшене использует правильный адрес
• Периодические запросы: setInterval каждые 30 секунд
• AbortSignal.timeout(5000): защита от зависания

Критические исправления v0.1.3.1

🔘 Исправление кнопок в Simple режиме

• ✅ Улучшенная regex: теперь корректно парсит все варианты атрибутов (attr="value" и attr=value)
• ✅ Поддержка className: работают как class, так и className атрибуты
• ✅ Обработка пустых href: корректная обработка href="#" и пустых ссылок
• ✅ Очистка текста: trim() для удаления лишних пробелов в тексте кнопок

📝 Восстановление отступов Markdown

• ✅ Списки с дефисами: правильное отображение - элемент списка как <ul><li>
• ✅ Группировка списков: элементы списка объединяются в один <ul> блок
• ✅ Правильные отступы: восстановлен space-y-2 между элементами
• ✅ Улучшенная типография: добавлен leading-relaxed для лучшей читаемости

🔧 Технические улучшения v0.1.3.1

• Улучшенный парсинг атрибутов: регулярное выражение обрабатывает больше случаев
• Группировка блоков: алгоритм processedBlocks для правильной структуры
• React компоненты: все элементы рендерятся как типизированные React компоненты

Исправления v0.1.3

🖥️ iFrame режим

• ✅ Исправлен URL: теперь показывает конкретную редактируемую страницу вместо списка постов
• ✅ Убран двойной скролл: добавлен overflow: hidden для iframe контейнера
• ✅ Убран лишний параметр: удален ?preview=true из URL

🎨 Simple режим - полная переработка

• ✅ ContentRenderer компонент: полностью новый рендеринг через React компоненты
• ✅ Реальные shadcn кнопки: HTML <button> теги превращаются в настоящие Button компоненты
• ✅ Полная поддержка Tailwind CSS: любые классы (bg-slate-100, text-center, etc.) работают корректно
• ✅ Обработка HTML элементов: <div class="..."> и другие элементы рендерятся с правильными стилями

UX улучшения

1. Интуитивные иконки для каждого режима
2. Визуальная обратная связь - активные кнопки подсвечиваются
3. Адаптивные размеры для разных режимов
4. Плавные переходы между режимами
5. Сохранение контента при переключении режимов

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

• ✅ Работает с существующей формой постов
• ✅ Поддерживает валидацию React Hook Form
• ✅ Совместимо с loading состояниями
• ✅ Адаптивный дизайн

Как использовать

1. Откройте админку (http://localhost:5174)
2. Перейдите в создание или редактирование поста
3. В разделе "Содержимое" используйте новые кнопки:
   • Код - для расширенного редактирования
   • Сплит - для одновременного просмотра результата
   • Развернуть - для полноэкранного кастомного режима (ESC для закрытия)
   • Компоненты - для вставки готовых блоков

Использование компонентов

1. Установите курсор в нужное место в редакторе
2. Нажмите кнопку "Компоненты"
3. Выберите "Кнопка CTA" из выпадающего меню
4. Готовый шаблон кнопки вставится в позицию курсора
5. Отредактируйте атрибуты кнопки по необходимости

Использование режимов Preview

1. Simple режим (по умолчанию):

   • Мгновенное обновление при вводе
   • Базовый Markdown рендеринг
   • Подходит для быстрого редактирования

2. iFrame режим (нажмите иконку Monitor):

   • Реальный предварительный просмотр с frontend
   • Полная поддержка shadcn компонентов
   • Обработка всех Tailwind CSS классов
   • Автосохранение через 2 секунды после изменений
   • Подходит для финальной проверки

Тестирование статуса Backend

1. Когда backend работает (http://localhost:3333):

   • Статус: 🟢 "Сервер активен"
   • Tooltip показывает время последней проверки

2. Остановите backend (Ctrl+C в терминале):

   • Статус изменится на: 🔴 "Не активен"
   • Tooltip покажет ошибку соединения

3. Запустите backend снова:

   • Статус автоматически обновится на: 🟢 "Сервер активен"
   • Или нажмите кнопку обновления для мгновенной проверки

Планы развития

• [x] Реальные shadcn кнопки в Simple режиме ✅
• [x] Поддержка Tailwind CSS в Simple режиме ✅
• [x] Исправление iframe для показа правильной страницы ✅
• [x] Убирание двойного скролла ✅
• [x] Исправление парсинга кнопок в Simple режиме ✅
• [x] Восстановление отступов Markdown ✅
• [x] Обработка списков с дефисами ✅
• [x] Динамическая проверка статуса Backend ✅
• [x] Продакшн готовность статуса ✅
• [ ] Больше компонентов (карточки, блоки кода, таблицы, цитаты)
• [ ] Редактор атрибутов компонентов через модальные окна
• [ ] Расширенный Markdown парсер для Preview
• [ ] Syntax highlighting для кода
• [ ] Автосохранение черновиков
• [ ] Настройки пользователя для режимов по умолчанию
• [ ] Горячие клавиши для переключения режимов
• [ ] Drag & drop для компонентов