wysiwyg-editor-3lab 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -5,6 +5,32 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.0] - 2025-01-20
+
+### Added
+- **ChatEditor** — новый компактный компонент для чатов и мессенджеров
+  - Минимальный тулбар с компактными кнопками (28x28px)
+  - Поддержка форматирования: жирный, курсив, подчёркивание, зачёркивание
+  - Цвет текста и фона с палитрой из 24 цветов
+  - Вставка ссылок через модальное окно
+  - Вставка изображений (загрузка файла или кастомный handler)
+  - Вставка видео YouTube/Vimeo через модальное окно
+  - Вставка таблиц с выбором строк/столбцов
+  - Эмодзи пикер
+  - Блок кода
+  - Отправка по Ctrl+Enter или Enter
+  - Кастомизация через props (включение/отключение функций)
+
+### Changed
+- **PreviewPanel** — убраны хардкодные стили, теперь наследует тему
+- **CSS Variables** — применяются локально к каждому редактору, а не глобально
+- Тёмная тема по умолчанию
+
+### Fixed
+- Исправлено применение CSS переменных в React (использование setProperty)
+- Исправлены z-index для всплывающих окон (цвета, эмодзи)
+- Модальные окна теперь открываются поверх всего контента
+
 ## [1.0.0] - 2025-01-19
 
 ### Added

package/README.md

@@ -1,5 +1,11 @@
 # Pro WYSIWYG Editor
 
+[![npm version](https://img.shields.io/npm/v/wysiwyg-editor-3lab)](https://www.npmjs.com/package/wysiwyg-editor-3lab)
+[![npm downloads](https://img.shields.io/npm/dm/wysiwyg-editor-3lab)](https://www.npmjs.com/package/wysiwyg-editor-3lab)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/wysiwyg-editor-3lab)](https://bundlephobia.com/package/wysiwyg-editor-3lab)
+[![license](https://img.shields.io/npm/l/wysiwyg-editor-3lab)](https://github.com/3lab/wysiwyg-editor/blob/main/LICENSE)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue)](https://www.typescriptlang.org/)
+
 Профессиональный WYSIWYG редактор для React с headless архитектурой. Полный набор функций для создания богатого текстового контента.
 
 ## ✨ Особенности
@@ -14,15 +20,16 @@
 - 🎨 **Полная кастомизация** — настройка через props
 - 📦 **Без зависимостей** — только React peer dependency
 - 💻 **Автоопределение кода** — автоматическая подсветка синтаксиса при вставке кода
+- 💬 **ChatEditor** — компактный редактор для чатов и мессенджеров
 
 ## 📦 Установка
 
 ```bash
-npm install @3lab/wysiwyg-editor
+npm install wysiwyg-editor-3lab
 # или
-yarn add @3lab/wysiwyg-editor
+yarn add wysiwyg-editor-3lab
 # или
-pnpm add @3lab/wysiwyg-editor
+pnpm add wysiwyg-editor-3lab
 ```
 
 **Важно:** Добавьте Font Awesome в ваш проект:
@@ -36,7 +43,8 @@ pnpm add @3lab/wysiwyg-editor
 ### Базовое использование
 
 ```tsx
-import { WysiwygEditor } from '@3lab/wysiwyg-editor';
+import { WysiwygEditor } from 'wysiwyg-editor-3lab';
+import 'wysiwyg-editor-3lab/style.css';
 
 function App() {
   return <WysiwygEditor placeholder="Начните печатать..." />;
@@ -47,7 +55,8 @@ function App() {
 
 ```tsx
 import { useState } from 'react';
-import { WysiwygEditor, EditorMeta } from '@3lab/wysiwyg-editor';
+import { WysiwygEditor, EditorMeta } from 'wysiwyg-editor-3lab';
+import 'wysiwyg-editor-3lab/style.css';
 
 function App() {
   const [html, setHtml] = useState('');
@@ -70,7 +79,8 @@ function App() {
 ### Uncontrolled с автосохранением
 
 ```tsx
-import { WysiwygEditor } from '@3lab/wysiwyg-editor';
+import { WysiwygEditor } from 'wysiwyg-editor-3lab';
+import 'wysiwyg-editor-3lab/style.css';
 
 function App() {
   return (
@@ -84,6 +94,108 @@ function App() {
 }
 ```
 
+## 💬 ChatEditor — компактный редактор для чатов
+
+Специальный компонент для мессенджеров и чатов с минимальным интерфейсом:
+
+```tsx
+import { ChatEditor } from 'wysiwyg-editor-3lab';
+import 'wysiwyg-editor-3lab/style.css';
+
+function Chat() {
+  return (
+    <ChatEditor
+      placeholder="Введите сообщение..."
+      onSubmit={(html) => {
+        console.log('Отправлено:', html);
+        // Отправка на сервер
+      }}
+      submitOnCtrlEnter={true}
+      enableEmoji={true}
+      enableBold={true}
+      enableItalic={true}
+      enableCode={true}
+      enableLink={true}
+      enableTextColor={true}
+      enableBgColor={true}
+      enableImage={true}
+      enableVideo={true}
+      enableTable={true}
+      maxHeight={150}
+    />
+  );
+}
+```
+
+### ChatEditor Props
+
+| Prop | Type | Default | Описание |
+|------|------|---------|----------|
+| `value` | `string` | - | HTML контент (controlled) |
+| `defaultValue` | `string` | - | Начальный HTML (uncontrolled) |
+| `onChange` | `(html: string, meta: EditorMeta) => void` | - | Callback при изменении |
+| `onSubmit` | `(html: string) => void` | - | Callback при отправке |
+| `placeholder` | `string` | `"Введите сообщение..."` | Placeholder текст |
+| `theme` | `"dark" \| "light"` | `"dark"` | Тема оформления |
+| `maxHeight` | `number \| string` | `200` | Максимальная высота |
+| `minHeight` | `number \| string` | `40` | Минимальная высота |
+| `enableEmoji` | `boolean` | `true` | Эмодзи пикер |
+| `enableBold` | `boolean` | `true` | Жирный текст |
+| `enableItalic` | `boolean` | `true` | Курсив |
+| `enableUnderline` | `boolean` | `false` | Подчёркивание |
+| `enableStrike` | `boolean` | `false` | Зачёркивание |
+| `enableLink` | `boolean` | `true` | Вставка ссылок |
+| `enableCode` | `boolean` | `true` | Блок кода |
+| `enableList` | `boolean` | `false` | Списки |
+| `enableTextColor` | `boolean` | `false` | Цвет текста |
+| `enableBgColor` | `boolean` | `false` | Цвет фона |
+| `enableImage` | `boolean` | `false` | Вставка изображений |
+| `enableVideo` | `boolean` | `false` | Вставка видео |
+| `enableTable` | `boolean` | `false` | Вставка таблиц |
+| `onImageUpload` | `(file: File) => Promise<string>` | - | Кастомный загрузчик изображений |
+| `submitOnEnter` | `boolean` | `false` | Отправка по Enter |
+| `submitOnCtrlEnter` | `boolean` | `true` | Отправка по Ctrl+Enter |
+| `submitButtonText` | `string` | `"Отправить"` | Текст кнопки |
+| `showSubmitButton` | `boolean` | `true` | Показать кнопку отправки |
+
+## 🎨 Кастомизация
+
+### Встроенные темы
+
+```tsx
+<WysiwygEditor themeName="dark" />      // Темная тема
+<WysiwygEditor themeName="light" />     // Светлая тема
+<WysiwygEditor themeName="minimal" />   // Минималистичная
+<WysiwygEditor themeName="colorful" />  // Яркая
+```
+
+### Пользовательские цвета
+
+```tsx
+<WysiwygEditor
+  themeName="custom"
+  customTheme={{
+    primary: '#ff6b6b',
+    bgPrimary: '#fff5f5',
+    textPrimary: '#2d3748',
+    borderRadius: '8px',
+  }}
+/>
+```
+
+### Управление панелью предпросмотра
+
+```tsx
+<WysiwygEditor
+  enablePreviewPanel={true}
+  previewPosition="right"        // 'right' | 'bottom' | 'none'
+  previewWidth={400}
+  previewHeight={600}
+/>
+```
+
+Подробнее в [CUSTOMIZATION_GUIDE.md](./CUSTOMIZATION_GUIDE.md) и [INTEGRATION_EXAMPLES.md](./INTEGRATION_EXAMPLES.md)
+
 ## 📖 API
 
 ### WysiwygEditor Props