@docvyu/sdk 0.0.5 → 0.0.6

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 (17) hide show
  1. package/README.md +143 -193
  2. package/dist/cdn/docvyu.js +2912 -0
  3. package/dist/cdn/docvyu.min.js +10 -4
  4. package/dist/cjs/DocvyuEditor-CwMF2qhs.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-CCAFPhSl.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/styles.d.ts +1 -1
  11. package/dist/types/core/DocvyuEditor.d.ts +7 -0
  12. package/dist/types/i18n/types.d.ts +3 -0
  13. package/dist/types/index.d.ts +19 -5
  14. package/dist/types/react/index.d.ts +2 -1
  15. package/package.json +1 -1
  16. package/dist/cjs/DocvyuEditor-Bh9EkDQb.js +0 -1
  17. package/dist/esm/DocvyuEditor-DlUB7weZ.js +0 -1
package/README.md CHANGED
@@ -9,43 +9,58 @@ Universal DOCX editor SDK for any frontend framework. Built with WebAssembly for
9
9
  - 🎨 **Rich Formatting** - Bold, italic, underline, fonts, colors, alignment
10
10
  - 📝 **Lists Support** - Bullets and numbered lists with multiple formats
11
11
  - 📐 **Page Settings** - Margins, page sizes, zoom
12
+ - 🌐 **Multi-language** - English, Spanish, Portuguese
12
13
  - 🔌 **Universal** - Works with vanilla JS, React, Vue, Angular, etc.
13
- - 🔒 **License System** - API key validation with tiered features
14
14
  - 🎁 **Plug & Play** - Complete editor UI ready to use
15
15
 
16
16
  ## Installation
17
17
 
18
+ ### NPM (for bundlers)
19
+
18
20
  ```bash
19
21
  npm install @docvyu/sdk
20
22
  ```
21
23
 
22
- ## Quick Start - Complete Editor (Recommended)
24
+ ### CDN (for vanilla JS)
25
+
26
+ ```html
27
+ <link rel="stylesheet" href="https://unpkg.com/@docvyu/sdk/dist/cdn/docvyu.css">
28
+ <script src="https://unpkg.com/@docvyu/sdk/dist/cdn/docvyu.min.js"></script>
29
+ ```
23
30
 
24
- The easiest way to add a full document editor to your application. Just a few lines of code:
31
+ ## Quick Start
25
32
 
26
- ### Vanilla JavaScript
33
+ ### Vanilla JavaScript (CDN)
34
+
35
+ The easiest way - just include the CDN files and go:
27
36
 
28
37
  ```html
29
38
  <!DOCTYPE html>
30
39
  <html>
31
40
  <head>
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>
32
43
  <style>
33
- #app { width: 100%; height: 100vh; }
44
+ #editor { width: 100%; height: 100vh; }
34
45
  </style>
35
46
  </head>
36
47
  <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',
48
+ <div id="editor"></div>
49
+
50
+ <script>
51
+ var app = new DocvyuApp({
52
+ container: '#editor',
53
+ locale: 'en', // 'en', 'es', 'pt'
54
+ // licenseKey: 'your-api-key', // Optional: for licensed features
55
+ onReady: function(instance) {
56
+ console.log('DocVyu Editor is ready!');
57
+ },
58
+ onError: function(error) {
59
+ console.error('Error:', error);
60
+ }
46
61
  });
47
62
 
48
- await app.init(wasmInit, Editor);
63
+ app.init();
49
64
  </script>
50
65
  </body>
51
66
  </html>
@@ -53,117 +68,49 @@ The easiest way to add a full document editor to your application. Just a few li
53
68
 
54
69
  That's it! You get a complete Word-like document editor with:
55
70
  - Title bar with save/open buttons
56
- - Menu bar (File, Edit, View, Insert, Format)
57
71
  - Ribbon with tabs (Home, Insert, Layout, View)
58
72
  - Full formatting toolbar (fonts, sizes, colors, alignment)
59
73
  - Document canvas with WYSIWYG editing
60
74
  - Status bar with zoom controls and language selector
61
75
 
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
- ```
76
+ ### React
83
77
 
84
- ## Custom Integration (Advanced)
78
+ ```jsx
79
+ import React, { useRef, useEffect, useState } from 'react';
80
+ import { DocvyuApp } from '@docvyu/sdk';
85
81
 
86
- For custom UI or framework-specific integrations, you can use the low-level `DocvyuEditor` class:
82
+ function DocvyuEditor({ locale = 'en', licenseKey, onReady }) {
83
+ const containerRef = useRef(null);
84
+ const appRef = useRef(null);
87
85
 
88
- ### Custom Vanilla JavaScript
86
+ useEffect(() => {
87
+ if (!containerRef.current) return;
89
88
 
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
- });
89
+ const initApp = async () => {
90
+ appRef.current = new DocvyuApp({
91
+ container: containerRef.current,
92
+ locale: locale,
93
+ licenseKey: licenseKey,
94
+ onContentChange: () => console.log('Content changed'),
95
+ onSelectionChange: (state) => console.log('Selection:', state),
96
+ });
101
97
 
102
- // Initialize with WASM
103
- await editor.initialize(init, Editor);
98
+ await appRef.current.init();
99
+ if (onReady) onReady(appRef.current);
100
+ };
104
101
 
105
- // Load a document
106
- const response = await fetch('/document.docx');
107
- const data = await response.arrayBuffer();
108
- editor.loadDocument(data);
102
+ initApp();
109
103
 
110
- // Apply formatting
111
- editor.setBold(true);
112
- editor.setFontSize(14);
113
- editor.setAlignment('center');
104
+ return () => {
105
+ if (appRef.current) appRef.current.destroy();
106
+ };
107
+ }, [locale, licenseKey]);
114
108
 
115
- // Save document
116
- editor.downloadDocument('my-document.docx');
117
- ```
118
-
119
- ### React
120
-
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
- );
109
+ return <div ref={containerRef} style={{ width: '100%', height: '100vh' }} />;
144
110
  }
145
111
 
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
- );
112
+ export default function App() {
113
+ return <DocvyuEditor locale="en" onReady={(app) => console.log('Ready!', app)} />;
167
114
  }
168
115
  ```
169
116
 
@@ -171,114 +118,118 @@ function Toolbar() {
171
118
 
172
119
  ```vue
173
120
  <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
- />
121
+ <div ref="containerRef" class="editor-container"></div>
182
122
  </template>
183
123
 
184
124
  <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
- };
125
+ import { ref, onMounted, onUnmounted } from 'vue';
126
+ import { DocvyuApp } from '@docvyu/sdk';
127
+
128
+ const containerRef = ref(null);
129
+ let app = null;
130
+
131
+ onMounted(async () => {
132
+ app = new DocvyuApp({
133
+ container: containerRef.value,
134
+ locale: 'en',
135
+ // licenseKey: 'your-api-key',
136
+ onContentChange: () => console.log('Content changed'),
137
+ onSelectionChange: (state) => console.log('Selection:', state),
138
+ });
139
+
140
+ await app.init();
141
+ console.log('DocVyu Editor is ready!');
142
+ });
143
+
144
+ onUnmounted(() => {
145
+ if (app) app.destroy();
146
+ });
147
+
148
+ // Expose methods for parent component
149
+ defineExpose({
150
+ loadDocument: (data) => app?.loadDocument(data),
151
+ downloadDocument: (filename) => app?.downloadDocument(filename),
152
+ });
202
153
  </script>
203
- ```
204
154
 
205
- ## License Tiers
155
+ <style scoped>
156
+ .editor-container {
157
+ width: 100%;
158
+ height: 100vh;
159
+ }
160
+ </style>
161
+ ```
206
162
 
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 | ❌ | ❌ | ✅ | ✅ |
163
+ ## Configuration Options
220
164
 
221
- ## API Reference
165
+ ```javascript
166
+ const app = new DocvyuApp({
167
+ // Required
168
+ container: '#editor', // CSS selector or HTMLElement
169
+
170
+ // Optional
171
+ locale: 'en', // 'en', 'es', 'pt'
172
+ licenseKey: 'dvyu_live_xxx', // For paid tiers
173
+ appTitle: 'My Editor', // Title bar text
174
+
175
+ // Callbacks
176
+ onReady: (instance) => {}, // Called when editor is ready
177
+ onError: (error) => {}, // Called on initialization error
178
+ onContentChange: () => {}, // Called when content changes
179
+ onSelectionChange: (state) => {},// Called when selection changes
180
+ onLicenseChange: (info) => {}, // Called when license info changes
181
+ });
222
182
 
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
- }
183
+ // Initialize (returns a Promise)
184
+ await app.init();
244
185
  ```
245
186
 
187
+ ## API Reference
188
+
246
189
  ### DocvyuApp Methods
247
190
 
248
191
  | Method | Description |
249
192
  |--------|-------------|
250
- | `init(wasmInit, EditorClass)` | Initialize the application |
251
- | `loadDocument(data: ArrayBuffer)` | Load a DOCX file |
252
- | `saveDocument(): Uint8Array` | Get document as binary data |
193
+ | `init()` | Initialize the application (async) |
194
+ | `loadDocument(data: Uint8Array)` | Load a DOCX file |
195
+ | `getDocumentBytes(): Uint8Array` | Get document as binary data |
253
196
  | `downloadDocument(filename)` | Download document to user's device |
254
197
  | `setLocale(locale)` | Change UI language |
255
198
  | `destroy()` | Clean up resources |
256
199
 
257
- ### DocvyuEditor Methods (Advanced)
200
+ ### Formatting Methods
258
201
 
259
202
  | Method | Description |
260
203
  |--------|-------------|
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
204
  | `setBold(enable)` | Toggle bold |
266
205
  | `setItalic(enable)` | Toggle italic |
267
206
  | `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 |
207
+ | `setFontSize(size)` | Set font size (e.g., 12, 14, 16) |
208
+ | `setFontFamily(family)` | Set font family (e.g., 'Arial') |
209
+ | `setFontColor(color)` | Set font color (e.g., '#ff0000') |
210
+ | `setAlignment(align)` | Set alignment ('left', 'center', 'right', 'justify') |
272
211
  | `setBulletList(enable)` | Toggle bullet list |
273
212
  | `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 |
281
213
 
214
+ ### Zoom Methods
215
+
216
+ | Method | Description |
217
+ |--------|-------------|
218
+ | `zoomIn()` | Increase zoom |
219
+ | `zoomOut()` | Decrease zoom |
220
+ | `setZoom(level)` | Set zoom level (e.g., 1.5 for 150%) |
221
+ | `getZoom()` | Get current zoom level |
222
+
223
+ ## License Tiers
224
+
225
+ | Feature | Free | Professional | Enterprise |
226
+ |---------|------|--------------|------------|
227
+ | Uses | 5 per IP | Unlimited | Unlimited |
228
+ | Load/Save | ✅ | ✅ | ✅ |
229
+ | Text Editing | ✅ | ✅ | ✅ |
230
+ | Formatting | ✅ | ✅ | ✅ |
231
+ | Watermark | Yes | No | No |
232
+ | Max Doc Size | 5MB | 25MB | Unlimited |
282
233
  ## Getting an API Key
283
234
 
284
235
  1. Visit [docvyu.com/pricing](https://docvyu.com/pricing)
@@ -289,7 +240,6 @@ interface DocvyuAppConfig {
289
240
  ## Support
290
241
 
291
242
  - 📚 [Documentation](https://docs.docvyu.com)
292
- - 💬 [Discord Community](https://discord.gg/docvyu)
293
243
  - 📧 [Email Support](mailto:support@docvyu.com)
294
244
  - 🐛 [Issue Tracker](https://github.com/docvyu/sdk/issues)
295
245