Skip to content

Commit d76ca3b

Browse files
edoversbedoversb
authored
Merge pull request #533 from Harbour-Enterprises/artem-code-examples
update code examples
2 parents 06c4153 + 3fc876b commit d76ca3b

23 files changed

Lines changed: 86 additions & 86 deletions

File tree

‎examples/cdn-example/index.html‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<link rel="stylesheet" href="https://unpkg.com/@harbour-enterprises/superdoc@0.6.37/dist/style.css">
5-
<script type="module" src="https://unpkg.com/@harbour-enterprises/superdoc@0.6.37/dist/superdoc.umd.js"></script>
4+
<link rel="stylesheet" href="https://unpkg.com/@harbour-enterprises/superdoc@0.11.45/dist/style.css">
5+
<script type="module" src="https://unpkg.com/@harbour-enterprises/superdoc@0.11.45/dist/superdoc.umd.js"></script>
66
<meta charset="UTF-8">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<title>SuperDoc - CDN example</title>
@@ -25,13 +25,20 @@
2525

2626
<script type="module">
2727
const superdoc = new SuperDocLibrary.SuperDoc({
28-
toolbar: 'my-toolbar',
29-
documents: [{
30-
url: './sample.docx',
31-
type: SuperDocLibrary.DOCX,
32-
}],
28+
selector: '#superdoc',
29+
toolbar: '#my-toolbar',
30+
document: './sample.docx', // URL, File or document config
31+
documentMode: 'editing',
32+
pagination: true,
33+
rulers: true,
34+
onReady: (event) => {
35+
console.log('SuperDoc is ready', event);
36+
},
37+
onEditorCreate: (event) => {
38+
console.log('Editor is created', event);
39+
},
3340
});
3441
</script>
3542

3643
</body>
37-
</html>
44+
</html>

‎examples/docxtemplater-example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"@fortawesome/free-regular-svg-icons": "^6.7.2",
1515
"@fortawesome/free-solid-svg-icons": "^6.7.2",
1616
"@fortawesome/vue-fontawesome": "^3.0.8",
17-
"@harbour-enterprises/superdoc": "^0.10.44",
17+
"@harbour-enterprises/superdoc": "^0.11.45",
1818
"docxtemplater": "^3.59.0",
1919
"pizzip": "^3.1.8",
2020
"prismjs": "^1.29.0",

‎examples/next-js-ssr/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12-
"@harbour-enterprises/superdoc": "^0.10.46",
12+
"@harbour-enterprises/superdoc": "^0.11.45",
1313
"next": "15.3.1",
1414
"react": "^19.0.0",
1515
"react-dom": "^19.0.0"

‎examples/next-js-ssr/src/app/SuperDoc/superdoc.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,26 @@ export default function SuperDocEditor() {
1111

1212
const onReady = () => {
1313
editor.current = superdoc.current.activeEditor;
14+
console.log('SuperDoc is ready');
1415
};
1516

1617
const initSuperDoc = async (fileToLoad = null) => {
1718
const { SuperDoc } = await import('@harbour-enterprises/superdoc');
1819
superdoc.current = new SuperDoc({
1920
selector: superdocContainerRef.current,
20-
pagination: true,
21+
modules: {
22+
toolbar: {
23+
selector: '#toolbar',
24+
toolbarGroups: ['center'],
25+
},
26+
},
2127
document: fileToLoad ? { data: fileToLoad } : '/sample-document.docx',
22-
modules: { toolbar: { selector: '#toolbar', toolbarGroups: ['center'] } },
28+
pagination: true,
29+
rulers: true,
2330
onReady,
31+
onEditorCreate: (event) => {
32+
console.log('Editor is created', event);
33+
},
2434
});
2535
};
2636

‎examples/nodejs-example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
},
1313
"description": "",
1414
"dependencies": {
15-
"@harbour-enterprises/superdoc": "^0.11.36",
15+
"@harbour-enterprises/superdoc": "^0.11.45",
1616
"express": "^4.21.2"
1717
},
1818
"devDependencies": {

‎examples/typescript-example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13-
"@harbour-enterprises/superdoc": "^0.10.44",
13+
"@harbour-enterprises/superdoc": "^0.11.45",
1414
"react": "^19.0.0",
1515
"react-dom": "^19.0.0"
1616
},

‎examples/typescript-example/src/App.tsx‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,17 @@
11
import { useRef, useState, ChangeEvent } from 'react';
22
import DocumentEditor from './components/DocumentEditor';
3-
import { SuperDoc } from '@harbour-enterprises/superdoc';
43

54
function App() {
65
const [documentFile, setDocumentFile] = useState<File | null>(null);
7-
const [documentId, setDocumentId] = useState('example-doc');
86
const fileInputRef = useRef<HTMLInputElement>(null);
97

108
const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
119
const file = event.target.files?.[0];
1210
if (file) {
1311
setDocumentFile(file);
14-
// Optional: Generate new document ID when file changes
15-
setDocumentId(`doc-${Date.now()}`);
1612
}
1713
};
1814

19-
const handleEditorReady = (editor: { superdoc: SuperDoc }) => {
20-
console.log('SuperDoc editor is ready', editor);
21-
};
22-
2315
return (
2416
<div className="app">
2517
<header>
@@ -38,9 +30,7 @@ function App() {
3830

3931
<main>
4032
<DocumentEditor
41-
documentId={documentId}
4233
initialData={documentFile}
43-
onEditorReady={handleEditorReady}
4434
/>
4535
</main>
4636

‎examples/typescript-example/src/components/DocumentEditor.tsx‎

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,28 @@ import '@harbour-enterprises/superdoc/style.css';
55
import { useEffect, useRef } from 'react';
66

77
interface Props {
8-
documentId: string,
9-
initialData: File | null,
10-
documentType?: string,
11-
readOnly?: boolean,
12-
onEditorReady: (editor: { superdoc: SuperDoc }) => void;
8+
initialData: File | null,
9+
readOnly?: boolean,
1310
}
1411

1512
const DocumentEditor = ({
16-
documentId,
17-
documentType = 'docx',
1813
initialData = null,
1914
readOnly = false,
20-
onEditorReady
2115
}: Props) => {
2216
const editorRef = useRef<SuperDoc>(null);
2317
useEffect(() => {
2418
const config: Config = {
2519
selector: '#superdoc',
26-
toolbar: 'superdoc-toolbar',
20+
toolbar: '#superdoc-toolbar',
21+
document: initialData, // URL, File or document config
2722
documentMode: readOnly ? 'viewing' : 'editing',
28-
onReady: (activeSuperDoc: SuperDoc) => {
29-
const superEditor = activeSuperDoc.activeEditor;
30-
console.debug('SuperDoc editor is ready', superEditor);
23+
pagination: true,
24+
rulers: true,
25+
onReady: (event) => {
26+
console.log('SuperDoc is ready', event);
3127
},
32-
onEditorCreate: (editor: Editor) => {
33-
console.log('Editor created', editor);
34-
},
35-
onEditorDestroy: () => {
36-
console.log('Editor destroyed');
28+
onEditorCreate: (event) => {
29+
console.log('Editor is created', event);
3730
},
3831
};
3932

@@ -46,7 +39,7 @@ const DocumentEditor = ({
4639
editorRef.current = null;
4740
}
4841
};
49-
}, [documentId, documentType, initialData, readOnly, onEditorReady]);
42+
}, [initialData, readOnly]);
5043

5144
return (
5245
<div className="document-editor">
@@ -64,6 +57,8 @@ const DocumentEditor = ({
6457
border-bottom: 1px solid #eee;
6558
}
6659
.editor {
60+
display: flex;
61+
justify-content: center;
6762
flex: 1 1 auto;
6863
overflow: auto;
6964
}

‎examples/vanilla-example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"dev": "vite"
88
},
99
"dependencies": {
10-
"@harbour-enterprises/superdoc": "^0.6.35"
10+
"@harbour-enterprises/superdoc": "^0.11.45"
1111
},
1212
"devDependencies": {
1313
"vite": "^4.4.6"

‎examples/vanilla-example/src/main.js‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { SuperDoc } from '@harbour-enterprises/superdoc';
22
import '@harbour-enterprises/superdoc/style.css';
3+
import './style.css';
34

45
// Initialize SuperDoc
56
let editor = null;
@@ -12,16 +13,17 @@ function initializeEditor(file = null) {
1213

1314
editor = new SuperDoc({
1415
selector: '#superdoc',
15-
toolbar: 'superdoc-toolbar',
16+
toolbar: '#superdoc-toolbar',
17+
document: file, // URL, File or document config
1618
documentMode: 'editing',
17-
documents: [{
18-
id: `doc-${Date.now()}`,
19-
type: 'docx',
20-
data: file
21-
}],
22-
onReady: () => {
23-
console.log('Editor is ready');
24-
}
19+
pagination: true,
20+
rulers: true,
21+
onReady: (event) => {
22+
console.log('SuperDoc is ready', event);
23+
},
24+
onEditorCreate: (event) => {
25+
console.log('Editor is created', event);
26+
},
2527
});
2628
}
2729

0 commit comments

Comments
 (0)