@docvyu/sdk 0.0.5 → 0.1.0

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.
Files changed (37) hide show
  1. package/README.md +174 -209
  2. package/dist/cdn/docvyu.js +5060 -0
  3. package/dist/cdn/docvyu.min.js +10 -4
  4. package/dist/cjs/DocvyuEditor-BOTw6i4d.js +1 -0
  5. package/dist/cjs/index.js +1 -1
  6. package/dist/cjs/react/index.js +1 -1
  7. package/dist/esm/DocvyuEditor-CDLqMpaq.js +1 -0
  8. package/dist/esm/index.js +1 -1
  9. package/dist/esm/react/index.js +1 -1
  10. package/dist/types/app/DocvyuApp.d.ts +187 -0
  11. package/dist/types/app/index.d.ts +0 -2
  12. package/dist/types/core/DocvyuEditor.d.ts +409 -57
  13. package/dist/types/core/index.d.ts +1 -1
  14. package/dist/types/i18n/types.d.ts +131 -0
  15. package/dist/types/index.d.ts +19 -5
  16. package/dist/types/react/index.d.ts +2 -1
  17. package/dist/wasm/docvyu_core.d.ts +8 -182
  18. package/dist/wasm/docvyu_core.js +1 -1
  19. package/dist/wasm/docvyu_core_bg.wasm +0 -0
  20. package/dist/wasm/docvyu_core_bg.wasm.d.ts +0 -56
  21. package/package.json +2 -2
  22. package/wasm/docvyu_core.d.ts +8 -182
  23. package/wasm/docvyu_core.js +1297 -200
  24. package/wasm/docvyu_core_bg.wasm +0 -0
  25. package/wasm/docvyu_core_bg.wasm.d.ts +0 -56
  26. package/dist/cjs/DocvyuEditor-Bh9EkDQb.js +0 -1
  27. package/dist/esm/DocvyuEditor-DlUB7weZ.js +0 -1
  28. package/dist/types/app/DocvyuApp.test.d.ts +0 -1
  29. package/dist/types/app/styles.d.ts +0 -10
  30. package/dist/types/app/template.d.ts +0 -9
  31. package/dist/types/core/DocvyuEditor.test.d.ts +0 -4
  32. package/dist/types/i18n/I18nManager.test.d.ts +0 -4
  33. package/dist/types/license/LicenseManager.test.d.ts +0 -4
  34. package/dist/wasm/docuweave_core.d.ts +0 -207
  35. package/dist/wasm/docuweave_core.js +0 -988
  36. package/dist/wasm/docuweave_core_bg.wasm +0 -0
  37. package/dist/wasm/docuweave_core_bg.wasm.d.ts +0 -59
package/README.md CHANGED
@@ -4,48 +4,77 @@ Universal DOCX editor SDK for any frontend framework. Built with WebAssembly for
4
4
 
5
5
  ## Features
6
6
 
7
- - 🚀 **High Performance** - Powered by Rust/WebAssembly
8
- - 📄 **Full DOCX Support** - Load, edit, and save Word documents
9
- - 🎨 **Rich Formatting** - Bold, italic, underline, fonts, colors, alignment
10
- - 📝 **Lists Support** - Bullets and numbered lists with multiple formats
11
- - 📐 **Page Settings** - Margins, page sizes, zoom
12
- - 🔌 **Universal** - Works with vanilla JS, React, Vue, Angular, etc.
13
- - 🔒 **License System** - API key validation with tiered features
14
- - 🎁 **Plug & Play** - Complete editor UI ready to use
7
+ - **High Performance** - Powered by Rust/WebAssembly
8
+ - **Full DOCX Support** - Load, edit, and save Word documents (ECMA-376)
9
+ - **Rich Formatting** - Bold, italic, underline, strikethrough, fonts, colors, alignment
10
+ - **Lists & Numbering** - Bullets, numbered, outline lists with 11 formats and multi-level support
11
+ - **Paragraph Styles** - Normal, Heading 1-6, custom styles
12
+ - **Tables** - Insert and render tables
13
+ - **Images** - Insert, resize, scale, drag, wrap modes
14
+ - **Undo/Redo** - Full operation history
15
+ - **Copy/Paste** - Ctrl+C/V support
16
+ - **Find & Replace** - Search with navigation and batch replace
17
+ - **Comments** - Insert and view document comments
18
+ - **Columns** - 1, 2, or 3 column layouts
19
+ - **Page Layout** - Margins, page sizes, orientation, section breaks
20
+ - **Track Changes** - Accept/reject revisions
21
+ - **Bookmarks & TOC** - Insert bookmarks, generate table of contents
22
+ - **Page Fields** - Page numbers, page X of Y
23
+ - **Document Properties** - Title, author, word count
24
+ - **Headers & Footers** - Basic editing support
25
+ - **Page Settings** - 5 page sizes, zoom (10%-500%), ruler units (cm/in)
26
+ - **Multi-language** - English, Spanish, Portuguese
27
+ - **Universal** - Works with vanilla JS, React, Vue, Angular, etc.
28
+ - **Plug & Play** - Complete editor UI with ribbon toolbar
15
29
 
16
30
  ## Installation
17
31
 
32
+ ### NPM (for bundlers)
33
+
18
34
  ```bash
19
35
  npm install @docvyu/sdk
20
36
  ```
21
37
 
22
- ## Quick Start - Complete Editor (Recommended)
38
+ ### CDN (for vanilla JS)
39
+
40
+ ```html
41
+ <link rel="stylesheet" href="https://unpkg.com/@docvyu/sdk/dist/cdn/docvyu.css">
42
+ <script src="https://unpkg.com/@docvyu/sdk/dist/cdn/docvyu.min.js"></script>
43
+ ```
44
+
45
+ ## Quick Start
23
46
 
24
- The easiest way to add a full document editor to your application. Just a few lines of code:
47
+ ### Vanilla JavaScript (CDN)
25
48
 
26
- ### Vanilla JavaScript
49
+ The easiest way - just include the CDN files and go:
27
50
 
28
51
  ```html
29
52
  <!DOCTYPE html>
30
53
  <html>
31
54
  <head>
55
+ <link rel="stylesheet" href="https://unpkg.com/@docvyu/sdk/dist/cdn/docvyu.css">
56
+ <script src="https://unpkg.com/@docvyu/sdk/dist/cdn/docvyu.min.js"></script>
32
57
  <style>
33
- #app { width: 100%; height: 100vh; }
58
+ #editor { width: 100%; height: 100vh; }
34
59
  </style>
35
60
  </head>
36
61
  <body>
37
- <div id="app"></div>
38
- <script type="module">
39
- import { DocvyuApp } from '@docvyu/sdk';
40
- import wasmInit, { Editor } from '@docvyu/sdk/wasm/docvyu_core.js';
41
-
42
- const app = new DocvyuApp({
43
- container: '#app',
44
- locale: 'es',
45
- appTitle: 'My Document Editor',
62
+ <div id="editor"></div>
63
+
64
+ <script>
65
+ var app = new DocvyuApp({
66
+ container: '#editor',
67
+ locale: 'en', // 'en', 'es', 'pt'
68
+ // licenseKey: 'your-api-key', // Optional: for licensed features
69
+ onReady: function(instance) {
70
+ console.log('DocVyu Editor is ready!');
71
+ },
72
+ onError: function(error) {
73
+ console.error('Error:', error);
74
+ }
46
75
  });
47
76
 
48
- await app.init(wasmInit, Editor);
77
+ app.init();
49
78
  </script>
50
79
  </body>
51
80
  </html>
@@ -53,117 +82,52 @@ The easiest way to add a full document editor to your application. Just a few li
53
82
 
54
83
  That's it! You get a complete Word-like document editor with:
55
84
  - Title bar with save/open buttons
56
- - Menu bar (File, Edit, View, Insert, Format)
57
85
  - Ribbon with tabs (Home, Insert, Layout, View)
58
- - Full formatting toolbar (fonts, sizes, colors, alignment)
86
+ - Full formatting toolbar (fonts, sizes, colors, alignment, lists, styles)
87
+ - Tables, images, comments, bookmarks
88
+ - Undo/redo, find & replace, copy/paste
89
+ - Multi-column layout and page orientation
59
90
  - Document canvas with WYSIWYG editing
60
- - Status bar with zoom controls and language selector
61
-
62
- ### Configuration Options
63
-
64
- ```typescript
65
- const app = new DocvyuApp({
66
- // Required
67
- container: '#app', // CSS selector or HTMLElement
68
-
69
- // Optional
70
- locale: 'es', // 'en', 'es', 'pt'
71
- licenseKey: 'dvyu_live_xxx', // For paid tiers
72
- logoUrl: '/my-logo.png', // Custom logo
73
- appTitle: 'My Editor', // Title bar text
74
-
75
- // Callbacks
76
- onContentChange: () => {},
77
- onSelectionChange: (state) => {},
78
- onLicenseChange: (info) => {},
79
- });
80
-
81
- await app.init(wasmInit, Editor);
82
- ```
83
-
84
- ## Custom Integration (Advanced)
91
+ - Status bar with zoom controls, page count, and language selector
85
92
 
86
- For custom UI or framework-specific integrations, you can use the low-level `DocvyuEditor` class:
93
+ ### React
87
94
 
88
- ### Custom Vanilla JavaScript
95
+ ```jsx
96
+ import React, { useRef, useEffect, useState } from 'react';
97
+ import { DocvyuApp } from '@docvyu/sdk';
89
98
 
90
- ```javascript
91
- import { createEditor, initLicense } from '@docvyu/sdk';
92
- import init, { Editor } from '@docvyu/sdk/wasm/docvyu_core.js';
93
-
94
- // Create a custom editor with your own canvas
95
- const editor = createEditor({
96
- canvas: 'my-canvas', // Canvas element ID
97
- onSelectionChange: (state) => {
98
- console.log('Selection changed:', state);
99
- },
100
- });
99
+ function DocvyuEditor({ locale = 'en', licenseKey, onReady }) {
100
+ const containerRef = useRef(null);
101
+ const appRef = useRef(null);
101
102
 
102
- // Initialize with WASM
103
- await editor.initialize(init, Editor);
103
+ useEffect(() => {
104
+ if (!containerRef.current) return;
104
105
 
105
- // Load a document
106
- const response = await fetch('/document.docx');
107
- const data = await response.arrayBuffer();
108
- editor.loadDocument(data);
106
+ const initApp = async () => {
107
+ appRef.current = new DocvyuApp({
108
+ container: containerRef.current,
109
+ locale: locale,
110
+ licenseKey: licenseKey,
111
+ onContentChange: () => console.log('Content changed'),
112
+ onSelectionChange: (state) => console.log('Selection:', state),
113
+ });
109
114
 
110
- // Apply formatting
111
- editor.setBold(true);
112
- editor.setFontSize(14);
113
- editor.setAlignment('center');
115
+ await appRef.current.init();
116
+ if (onReady) onReady(appRef.current);
117
+ };
114
118
 
115
- // Save document
116
- editor.downloadDocument('my-document.docx');
117
- ```
119
+ initApp();
118
120
 
119
- ### React
121
+ return () => {
122
+ if (appRef.current) appRef.current.destroy();
123
+ };
124
+ }, [locale, licenseKey]);
120
125
 
121
- ```tsx
122
- import { DocvyuEditor } from '@docvyu/sdk/react';
123
- import init, { Editor } from '@docvyu/sdk/wasm/docvyu_core.js';
124
- import '@docvyu/sdk/styles';
125
-
126
- function MyEditor() {
127
- const editorRef = useRef(null);
128
-
129
- const handleLoad = () => {
130
- console.log('Document loaded!');
131
- };
132
-
133
- return (
134
- <DocvyuEditor
135
- ref={editorRef}
136
- apiKey="your-api-key-here"
137
- wasmInit={init}
138
- EditorClass={Editor}
139
- onReady={(editor) => console.log('Editor ready!')}
140
- onLoad={handleLoad}
141
- onSelectionChange={(state) => console.log('Selection:', state)}
142
- />
143
- );
126
+ return <div ref={containerRef} style={{ width: '100%', height: '100vh' }} />;
144
127
  }
145
128
 
146
- // Using hooks for toolbar
147
- function Toolbar() {
148
- const { selectionState } = useDocvyu();
149
- const { toggleBold, toggleItalic, toggleUnderline } = useEditorFormatting();
150
-
151
- return (
152
- <div className="toolbar">
153
- <button
154
- onClick={toggleBold}
155
- className={selectionState?.bold ? 'active' : ''}
156
- >
157
- Bold
158
- </button>
159
- <button
160
- onClick={toggleItalic}
161
- className={selectionState?.italic ? 'active' : ''}
162
- >
163
- Italic
164
- </button>
165
- </div>
166
- );
129
+ export default function App() {
130
+ return <DocvyuEditor locale="en" onReady={(app) => console.log('Ready!', app)} />;
167
131
  }
168
132
  ```
169
133
 
@@ -171,114 +135,116 @@ function Toolbar() {
171
135
 
172
136
  ```vue
173
137
  <template>
174
- <DocvyuEditor
175
- ref="editorRef"
176
- :api-key="apiKey"
177
- :wasm-init="wasmInit"
178
- :editor-class="EditorClass"
179
- @ready="onReady"
180
- @selection-change="onSelectionChange"
181
- />
138
+ <div ref="containerRef" class="editor-container"></div>
182
139
  </template>
183
140
 
184
141
  <script setup>
185
- import { ref } from 'vue';
186
- import { DocvyuEditor } from '@docvyu/sdk/vue';
187
- import init, { Editor } from '@docvyu/sdk/wasm/docvyu_core.js';
188
- import '@docvyu/sdk/styles';
189
-
190
- const editorRef = ref(null);
191
- const apiKey = 'your-api-key-here';
192
- const wasmInit = init;
193
- const EditorClass = Editor;
194
-
195
- const onReady = (editor) => {
196
- console.log('Editor ready!');
197
- };
198
-
199
- const onSelectionChange = (state) => {
200
- console.log('Selection:', state);
201
- };
142
+ import { ref, onMounted, onUnmounted } from 'vue';
143
+ import { DocvyuApp } from '@docvyu/sdk';
144
+
145
+ const containerRef = ref(null);
146
+ let app = null;
147
+
148
+ onMounted(async () => {
149
+ app = new DocvyuApp({
150
+ container: containerRef.value,
151
+ locale: 'en',
152
+ // licenseKey: 'your-api-key',
153
+ onContentChange: () => console.log('Content changed'),
154
+ onSelectionChange: (state) => console.log('Selection:', state),
155
+ });
156
+
157
+ await app.init();
158
+ console.log('DocVyu Editor is ready!');
159
+ });
160
+
161
+ onUnmounted(() => {
162
+ if (app) app.destroy();
163
+ });
164
+
165
+ // Expose methods for parent component
166
+ defineExpose({
167
+ loadDocument: (data) => app?.loadDocument(data),
168
+ downloadDocument: (filename) => app?.downloadDocument(filename),
169
+ });
202
170
  </script>
203
- ```
204
171
 
205
- ## License Tiers
172
+ <style scoped>
173
+ .editor-container {
174
+ width: 100%;
175
+ height: 100vh;
176
+ }
177
+ </style>
178
+ ```
206
179
 
207
- | Feature | Free | Starter | Professional | Enterprise |
208
- |---------|------|---------|--------------|------------|
209
- | Uses | 5 per IP | Unlimited | Unlimited | Unlimited |
210
- | Load/Save | ✅ | ✅ | ✅ | ✅ |
211
- | Text Editing | ✅ | ✅ | ✅ | ✅ |
212
- | Formatting | ✅ | ✅ | ✅ | ✅ |
213
- | Lists | ❌ | ✅ | ✅ | ✅ |
214
- | Page Settings | ❌ | ✅ | ✅ | ✅ |
215
- | Watermark | Yes | No | No | No |
216
- | Max Doc Size | 5MB | 25MB | 100MB | Unlimited |
217
- | Max Pages | 10 | 100 | Unlimited | Unlimited |
218
- | Remove Branding | ❌ | ❌ | ✅ | ✅ |
219
- | Priority Support | ❌ | ❌ | ✅ | ✅ |
180
+ ## Configuration Options
220
181
 
221
- ## API Reference
182
+ ```javascript
183
+ const app = new DocvyuApp({
184
+ // Required
185
+ container: '#editor', // CSS selector or HTMLElement
186
+
187
+ // Optional
188
+ locale: 'en', // 'en', 'es', 'pt'
189
+ licenseKey: 'dvyu_live_xxx', // For paid tiers
190
+ appTitle: 'My Editor', // Title bar text
191
+
192
+ // Callbacks
193
+ onReady: (instance) => {}, // Called when editor is ready
194
+ onError: (error) => {}, // Called on initialization error
195
+ onContentChange: () => {}, // Called when content changes
196
+ onSelectionChange: (state) => {},// Called when selection changes
197
+ onLicenseChange: (info) => {}, // Called when license info changes
198
+ });
222
199
 
223
- ### DocvyuApp Configuration
224
-
225
- ```typescript
226
- interface DocvyuAppConfig {
227
- /** Container element (CSS selector or HTMLElement) */
228
- container: string | HTMLElement;
229
- /** UI locale: 'en', 'es', 'pt' */
230
- locale?: 'en' | 'es' | 'pt';
231
- /** Your DocVyu license key */
232
- licenseKey?: string;
233
- /** Custom logo URL for title bar */
234
- logoUrl?: string;
235
- /** Application title */
236
- appTitle?: string;
237
- /** Callback when content changes */
238
- onContentChange?: () => void;
239
- /** Callback when selection changes */
240
- onSelectionChange?: (state: SelectionState) => void;
241
- /** Callback when license info changes */
242
- onLicenseChange?: (info: LicenseInfo) => void;
243
- }
200
+ // Initialize (returns a Promise)
201
+ await app.init();
244
202
  ```
245
203
 
204
+ ## API Reference
205
+
246
206
  ### DocvyuApp Methods
247
207
 
248
208
  | Method | Description |
249
209
  |--------|-------------|
250
- | `init(wasmInit, EditorClass)` | Initialize the application |
251
- | `loadDocument(data: ArrayBuffer)` | Load a DOCX file |
252
- | `saveDocument(): Uint8Array` | Get document as binary data |
210
+ | `init()` | Initialize the application (async) |
211
+ | `loadDocument(data: Uint8Array)` | Load a DOCX file |
212
+ | `getDocumentBytes(): Uint8Array` | Get document as binary data |
253
213
  | `downloadDocument(filename)` | Download document to user's device |
254
214
  | `setLocale(locale)` | Change UI language |
255
215
  | `destroy()` | Clean up resources |
256
216
 
257
- ### DocvyuEditor Methods (Advanced)
217
+ ### Editor Methods (via `getEditor()`)
218
+
219
+ | Category | Methods |
220
+ |----------|---------|
221
+ | Format | `setBold`, `setItalic`, `setUnderline`, `setStrikethrough`, `setFontSize`, `setFontFamily`, `setFontColor` |
222
+ | Paragraph | `setAlignment`, `applyParagraphStyle`, `removeParagraphStyle` |
223
+ | Lists | `setBulletList`, `setNumberedList`, `setOutlineList`, `applyNumbering`, `removeNumbering`, `increaseListLevel`, `decreaseListLevel` |
224
+ | Tables | `insertTable(rows, cols)` |
225
+ | Images | `insertImage`, `resizeImage`, `scaleImage`, `setImageWrapMode` |
226
+ | Clipboard | `copyText`, `cutText`, `pasteText` |
227
+ | Undo/Redo | `undo`, `redo`, `canUndo`, `canRedo` |
228
+ | Search | `find`, `findNext`, `findPrevious`, `replaceCurrent`, `replaceAll`, `clearSearch` |
229
+ | Comments | `insertComment`, `getCommentCount`, `getCommentText` |
230
+ | Zoom | `zoomIn`, `zoomOut`, `setZoom`, `getZoom` |
231
+ | Page | `setPageSize`, `setPageOrientation`, `setColumnCount`, `setMargins` |
232
+ | Sections | `insertSectionBreak` |
233
+ | Bookmarks | `insertBookmark`, `selectBookmark`, `getBookmarkNames` |
234
+ | TOC | `generateTocJson`, `navigateToTocEntry` |
235
+ | Properties | `getDocumentTitle`, `setDocumentTitle`, `calculateWordCount` |
236
+ | Header/Footer | `insertHeader`, `insertFooter`, `enterHeaderEditing`, `enterFooterEditing` |
258
237
 
259
- | Method | Description |
260
- |--------|-------------|
261
- | `initialize(wasmInit, EditorClass)` | Initialize the editor |
262
- | `loadDocument(data)` | Load a DOCX file |
263
- | `saveDocument()` | Save the document as Uint8Array |
264
- | `downloadDocument(filename)` | Download the document |
265
- | `setBold(enable)` | Toggle bold |
266
- | `setItalic(enable)` | Toggle italic |
267
- | `setUnderline(enable)` | Toggle underline |
268
- | `setFontSize(size)` | Set font size |
269
- | `setFontFamily(family)` | Set font family |
270
- | `setFontColor(color)` | Set font color |
271
- | `setAlignment(alignment)` | Set paragraph alignment |
272
- | `setBulletList(enable)` | Toggle bullet list |
273
- | `setNumberedList(enable)` | Toggle numbered list |
274
- | `setMargins(margins)` | Set page margins |
275
- | `setPageSize(size)` | Set page size |
276
- | `setZoom(zoom)` | Set zoom level |
277
- | `zoomIn()` / `zoomOut()` | Adjust zoom |
278
- | `getSelectionState()` | Get current selection state |
279
- | `getLicenseStatus()` | Get license status |
280
- | `destroy()` | Clean up resources |
238
+ ## License Tiers
281
239
 
240
+ | Feature | Free | Professional | Enterprise |
241
+ |---------|------|--------------|------------|
242
+ | Uses | 5 per IP | Unlimited | Unlimited |
243
+ | Load/Save | ✅ | ✅ | ✅ |
244
+ | Text Editing | ✅ | ✅ | ✅ |
245
+ | Formatting | ✅ | ✅ | ✅ |
246
+ | Watermark | Yes | No | No |
247
+ | Max Doc Size | 5MB | 25MB | Unlimited |
282
248
  ## Getting an API Key
283
249
 
284
250
  1. Visit [docvyu.com/pricing](https://docvyu.com/pricing)
@@ -289,7 +255,6 @@ interface DocvyuAppConfig {
289
255
  ## Support
290
256
 
291
257
  - 📚 [Documentation](https://docs.docvyu.com)
292
- - 💬 [Discord Community](https://discord.gg/docvyu)
293
258
  - 📧 [Email Support](mailto:support@docvyu.com)
294
259
  - 🐛 [Issue Tracker](https://github.com/docvyu/sdk/issues)
295
260