@makhmudov.kay/az-editor 0.1.0-beta.1 → 0.1.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,217 +1,70 @@
1
- # AZ Editor — React-библиотека для DOCX
2
-
3
- Встраиваемый редактор документов Word: текст, таблицы, страницы, импорт и сохранение
4
- DOCX. Пакет `@makhmudov.kay/az-editor` использует открытое ядро `@docx-editor.dev` 2.27.0.
5
- Демонстрационное приложение отделено от библиотеки: его шапка, боковые панели,
6
- уведомления, обработка файлов и серверные настройки не входят в компонент.
7
-
8
- Совпадение с Microsoft Word один в один пока не подтверждено. Подробности:
9
- [проверка совместимости](docs/compatibility-2026-10-08.md).
10
-
11
- Для текущего Hujjat (ограниченный HTML → JSON по локалям → mPDF) добавлен адаптер:
12
- `exportHujjat()`, `importHujjatTemplate()` и `requestHujjatPreview()`.
13
- [Инструкция интеграции и ограничения](docs/hujjat-integration.ru.md).
14
-
15
- Для будущего подключения рядом с существующим редактором доступен `AzHtmlEditor`:
16
- `initialHtml` → отдельный черновик → `await ref.exportHtml()`.
17
- В комплекте есть пример применения/отмены и [инструкция для agrodox-front](docs/agrodox-integration.ru.md).
18
- Сам проект agrodox-front не изменён; подключение выполняет приложение отдельно.
19
-
20
- ## Запуск демо
21
-
22
- Node.js 24.15+ (ветка 24) или 26+, npm.
23
-
24
- ```sh
25
- npm ci
26
- npm run dev
27
- ```
28
-
29
- Откройте http://127.0.0.1:5173. Сразу откроется пустой документ. В меню «Файл» доступны
30
- создание документа, открытие DOCX, пример договора, скачивание DOCX/PDF и печать.
31
- Также можно перетащить DOCX в редактор. Сохранение не меняет исходный файл.
32
-
33
- Сборка автономна: код подготовки печатных страниц и профиль рендеринга находятся
34
- в `src/library/print-pages`. Соседний репозиторий backend не требуется.
35
-
36
- ## Сборка и установка пакета
37
-
38
- ```sh
39
- npm pack
40
- # В другом React-проекте:
41
- npm install /path/to/makhmudov.kay-az-editor-0.1.0-beta.1.tgz
42
- ```
43
-
44
- `npm pack` автоматически запускает сборку. Архив содержит ES-модуль, CSS,
45
- TypeScript-декларации и сведения о лицензиях. React и React DOM 19 — peer dependencies.
46
- Пакет подготовлен к публичной публикации `@makhmudov.kay/az-editor@0.1.0-beta.1`.
47
- В `publishConfig` установлены `access: public` и `tag: beta`.
48
- Публичная публикация в npm бесплатна; для прямой публикации от имени аккаунта
49
- требуется двухфакторная аутентификация. Собственный код — `UNLICENSED`:
50
- публичный доступ не предоставляет открытую лицензию. Лицензии зависимостей сохраняются.
51
- Статус публикации проверяется в реестре; наличие архива ещё не означает,
52
- что версия опубликована.
53
-
54
- После публикации пакет можно установить без входа в npm:
55
-
56
- ```sh
57
- npm install @makhmudov.kay/az-editor@beta
58
- ```
59
-
60
- Нужен браузерный сборщик с поддержкой CSS, шрифтов и WASM; проверен Vite.
61
- В приложениях с серверным рендерингом подключайте редактор на клиенте.
62
-
63
- ## Минимальное подключение
64
-
65
- ```tsx
66
- import { useRef } from 'react';
67
- import {
68
- AzDocumentEditor,
69
- downloadDocx,
70
- type AzDocumentEditorHandle,
71
- } from '@makhmudov.kay/az-editor';
72
- import '@makhmudov.kay/az-editor/styles.css';
73
-
74
- export function Editor() {
75
- const editor = useRef<AzDocumentEditorHandle>(null);
76
-
77
- async function save() {
78
- if (!editor.current) return;
79
- const bytes = await editor.current.save();
80
- downloadDocx(bytes, 'document.docx');
81
- // Вместо скачивания приложение может отправить bytes в свой API.
82
- }
83
-
84
- return (
85
- <AzDocumentEditor
86
- ref={editor}
87
- document="blank"
88
- title="Договор.docx"
89
- style={{ height: 700 }}
90
- onSave={save}
91
- onChange={() => console.log('Документ изменён')}
92
- />
93
- );
94
- }
95
- ```
96
-
97
- Без `document` создаётся пустой документ. Для импорта используйте
98
- `const opened = await readDocxFile(file)` и передавайте `opened.original` в `document`.
99
- При замене документа меняйте React `key`, чтобы сбросить историю предыдущего файла.
100
- Проверку несохранённых изменений выполняет приложение до замены `key`.
101
-
102
- Компонент занимает высоту контейнера. Задайте её через `style`/`className` или родителю.
103
- Минимальная высота, размеры окна и глобальные стили страницы не навязываются.
104
-
105
- ## Настройка интерфейса
106
-
107
- ```tsx
108
- <AzDocumentEditor
109
- document={bytes}
110
- style={{ height: '100%' }}
111
- ui={{ menu: false, rulers: false, navigation: false, print: false }}
112
- />
113
-
114
- // Поверхность документа без заголовка, меню, панели форматирования и линеек:
115
- <AzDocumentEditor document={bytes} ui={false} style={{ height: 600 }} />
116
-
117
- // Просмотр без редактирования:
118
- <AzDocumentEditor document={bytes} mode="view" style={{ height: 600 }} />
119
- ```
120
-
121
- Все параметры `ui` по умолчанию включены:
122
-
123
- | Параметр | Назначение |
124
- | --- | --- |
125
- | `chrome` | Заголовок, меню и панель форматирования одним блоком |
126
- | `menu` | Меню «Файл», «Формат», «Вставка», «Рецензирование» |
127
- | `rulers` | Горизонтальная и вертикальная линейки |
128
- | `navigation` | Навигация по заголовкам и поиск |
129
- | `contextMenu` | Контекстное меню редактора |
130
- | `print` | Пункт печати и перехват Ctrl/Cmd+P нашим адаптером |
131
-
132
- `ui={false}` отключает эти элементы; редактирование остаётся доступным, если `mode="edit"`.
133
- Настройки интерфейса можно менять без повторного открытия документа и потери правок.
134
- `ui.chrome=false` использует поверхность движка без его рамки, включая встроенные линейки
135
- и навигацию. Для отдельных переключателей оставьте `chrome` включённым.
136
-
137
- Дополнительные параметры:
138
-
139
- | Prop | Назначение |
140
- | --- | --- |
141
- | `className`, `style` | Контейнер и размеры компонента |
142
- | `colorMode` | `light`, `dark`, `system`; меняется интерфейс, а не лист документа |
143
- | `i18n` | Каталог переводов; по умолчанию частичный русский с английскими запасными строками |
144
- | `locale` | Региональные правила дат и подписей, по умолчанию `ru-RU`; не переключает язык UI |
145
- | `labels` | Подписи `open`, `save`, `exportPdf`, `print` для действий адаптера |
146
- | `fonts` | Своя конфигурация шрифтов; при её замене перемонтируйте компонент |
147
- | `zoom`, `zoomMode` | Масштаб и режим подгонки страниц |
148
- | `renderTitleBarLeft`, `renderTitleBarRight` | Элементы приложения по краям заголовка |
149
- | `fileActions` | Дополнительные действия меню «Файл»: `{ id, label, onSelect, disabled? }` |
150
- | `actionsDisabled` | Блокировка файловых действий при загрузке/сохранении приложением |
151
-
152
- Для оформления используйте CSS, ограниченный вашим классом, например
153
- `.my-editor .docx-editor { --doc-primary: #2563eb; }`.
154
- Диалог локальной печати пока использует русские подписи.
155
-
156
- ## Открытие, сохранение и PDF принадлежат приложению
157
-
158
- - `onOpen` — приложение выбирает источник и передаёт новые байты в компонент.
159
- - `onSave` — приложение получает байты через `ref.save()` и решает, куда их сохранить.
160
- - `onExportPdf` — приложение вызывает собственный сервис и скачивает результат.
161
- - `onChange` — правка содержимого; загрузка исходника не считается правкой.
162
- - `onStatusChange` — `{ pages, loading, error }`, без обязательной полосы статуса в библиотеке.
163
- - `onFontError` — сообщение о неудачной загрузке шрифта.
164
-
165
- Если обработчик `onOpen`, `onSave` или `onExportPdf` не передан, соответствующий пункт
166
- меню отсутствует. Компонент сам не обращается к серверу сохранения или генерации PDF.
167
- Ошибки асинхронных обработчиков приложение обрабатывает самостоятельно.
168
-
169
- Ref предоставляет `save(): Promise<ArrayBuffer>`, `focus()` и `print(): Promise<void>`.
170
- `print()` открывает локальный предпросмотр всех страниц, после которого используется
171
- диалог печати браузера. Ctrl/Cmd+S/O/P адаптер обрабатывает только внутри активного
172
- редактора; поля и кнопки вне компонента остаются под управлением приложения.
173
-
174
- Опциональные функции `requestPdf`, `downloadPdf` и `pdfRenderProfile` поддерживают
175
- контракт отдельного PDF-сервиса. У `requestPdf` можно задать `url`, `headers`, `signal`
176
- и собственный `fetcher`. Эти функции не вызываются при простом подключении редактора.
177
- Демо использует `/api/documents/export/pdf`; настройки прокси находятся в
178
- `.env.pdf.example`. Для другого бэкенда реализуйте свой `onExportPdf`.
179
-
180
- [ТЗ PDF-сервиса](docs/pdf-export-backend-spec.md) ·
181
- [Контракт OpenAPI](docs/pdf-export.openapi.yaml).
182
-
183
- ## Проверки
184
-
185
- ```sh
186
- npm test
187
- npm run build
188
- npm run build:demo
189
- npx playwright install chromium
190
- npm run test:e2e
191
- ```
192
-
193
- Проверяются импорт и повторное открытие DOCX, правки текста и таблиц, undo/redo,
194
- сохранность исходных байтов, отказ от повреждённых файлов, защита несохранённых правок,
195
- экспорт текущего состояния в PDF, подготовка всех 12 страниц при виртуализации,
196
- встраивание в контейнер, скрытие UI, режим просмотра и сочетания клавиш приложения.
197
-
198
- `tests/browser/fixtures/embed.html` — пример отдельного приложения-потребителя без
199
- стилей демо. Личный корпус документов подключается отдельно через `AZ_EDITOR_CORPUS`;
200
- в обычном запуске его проверки пропускаются. Пользовательские файлы не входят в npm-пакет.
201
-
202
- ## Ограничения
203
-
204
- Поддерживается DOCX до 30 МиБ; DOC, DOCM, PDF и защищённые паролем документы не являются
205
- входным форматом редактора. Шрифты-заменители и отличия вёрстки могут менять переносы.
206
- Сложные поля, формулы, плавающие объекты, исправления и комментарии требуют отдельной
207
- проверки. Адаптер Hujjat преобразует поддерживаемое содержимое в HTML/JSON и вызывает
208
- существующий PDF API. Авторизацию, сохранение и версии шаблонов подключает приложение;
209
- сквозная проверка с живым Hujjat пока не выполнена.
210
-
211
- Демо хранит правки в памяти до скачивания. Библиотека позволяет приложению реализовать
212
- свой процесс сохранения. Экспорт через Chromium воспроизводит вёрстку редактора,
213
- а Hujjat заново рассчитывает её через mPDF. Ни один из этих вариантов не является
214
- независимым эталоном Microsoft Word. Сборщик может предупреждать о размере ядра и Node-модулях
215
- в браузерном экспортере; сохранение из байтов проверяется в браузерных тестах.
216
-
217
- Лицензии и происхождение компонентов: [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md).
1
+ # Az Editor
2
+
3
+ React-библиотека для редактирования DOCX и HTML-документов с постраничным интерфейсом.
4
+ Приложение управляет файлами, сохранением, авторизацией и подключением PDF-сервиса.
5
+
6
+ **[Полное руководство по интеграции →](docs/integration.ru.md)**
7
+
8
+ Установка, React + Vite, Next.js, DOCX, HTML-черновики, применение и отмена правок,
9
+ переменные, JSON, PDF, шрифты, интерфейс, справочник API и устранение ошибок.
10
+
11
+ ## Установка
12
+
13
+ ```sh
14
+ npm install @makhmudov.kay/az-editor@beta
15
+ ```
16
+
17
+ Для воспроизводимой установки опубликованной версии:
18
+
19
+ ```sh
20
+ npm install --save-exact @makhmudov.kay/az-editor@0.1.0-beta.3
21
+ ```
22
+
23
+ Требуются React и React DOM 19, Node.js `^24.15.0 || >=26.0.0` для установки/сборки,
24
+ браузерный сборщик с поддержкой CSS, шрифтов и WASM. Пакет — ESM с TypeScript-декларациями.
25
+ Редактор работает в браузере; SSR компонента отключают.
26
+
27
+ ## Минимальное подключение
28
+
29
+ ```tsx
30
+ import { AzDocumentEditor } from '@makhmudov.kay/az-editor';
31
+ import '@makhmudov.kay/az-editor/styles.css';
32
+
33
+ export function Editor() {
34
+ return <AzDocumentEditor document="blank" title="document.docx" style={{ height: 700 }} />;
35
+ }
36
+ ```
37
+
38
+ Для HTML используйте `AzHtmlEditor` с `initialHtml` и асинхронным `exportHtml()`.
39
+ Открытие, сохранение и обработка ошибок подробно разобраны в [руководстве](docs/integration.ru.md).
40
+
41
+ ## Примеры для копирования
42
+
43
+ - [DOCX: открытие, сохранение, несохранённые правки](examples/integration/DocxEditorExample.tsx)
44
+ - [HTML: форма и отдельный черновик](examples/integration/HtmlFormExample.tsx)
45
+ - [HTML: применение, отмена и диагностика](examples/integration/HtmlDraft.tsx)
46
+ - [Свой API и PDF-сервис](examples/integration/server-api.ts)
47
+ - [Загрузка собственных шрифтов](examples/integration/loadFonts.ts)
48
+
49
+ Это исходники для копирования в приложение, а не дополнительные экспорты npm-пакета.
50
+
51
+ ## Разработка и сборка
52
+
53
+ ```sh
54
+ npm ci
55
+ npm run dev
56
+ npm run build
57
+ npm pack
58
+ ```
59
+
60
+ Демо: `http://127.0.0.1:5173`. Сборка автономна. `npm pack` включает руководство,
61
+ примеры, JS, CSS, типы и лицензии зависимостей.
62
+
63
+ ## Ограничения и лицензия
64
+
65
+ Внешний вид и переносы могут отличаться от Microsoft Word или серверного PDF.
66
+ HTML поддерживает ограниченный набор тегов и стилей; потери возвращаются в диагностике.
67
+ Подробности и лимиты — в [руководстве](docs/integration.ru.md).
68
+
69
+ Собственный код: [UNLICENSED](LICENSE). Публичная доступность не предоставляет открытую
70
+ лицензию. Лицензии зависимостей: [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md).