@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 +70 -217
- package/dist/az-editor.js +283 -208
- package/dist/library/hujjat/table-grid.d.ts +8 -0
- package/docs/integration.ru.md +896 -0
- package/examples/integration/DocxEditorExample.tsx +92 -0
- package/examples/{agrodox → integration}/HtmlDraft.tsx +1 -1
- package/examples/integration/HtmlFormExample.tsx +25 -0
- package/examples/integration/README.md +21 -0
- package/examples/integration/loadFonts.ts +26 -0
- package/examples/integration/server-api.ts +28 -0
- package/package.json +3 -4
- package/docs/agrodox-integration.ru.md +0 -82
- package/docs/hujjat-integration.ru.md +0 -165
package/README.md
CHANGED
|
@@ -1,217 +1,70 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
npm
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
##
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
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).
|