Skip to content

update code examples #533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
edoversb merged 1 commit into from
May 28, 2025
Merged

update code examples #533

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 15 additions & 8 deletions examples/cdn-example/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://unpkg.com/@harbour-enterprises/superdoc@0.6.37/dist/style.css">
<script type="module" src="https://unpkg.com/@harbour-enterprises/superdoc@0.6.37/dist/superdoc.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@harbour-enterprises/superdoc@0.11.45/dist/style.css">
<script type="module" src="https://unpkg.com/@harbour-enterprises/superdoc@0.11.45/dist/superdoc.umd.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SuperDoc - CDN example</title>
Expand All @@ -25,13 +25,20 @@

<script type="module">
const superdoc = new SuperDocLibrary.SuperDoc({
toolbar: 'my-toolbar',
documents: [{
url: './sample.docx',
type: SuperDocLibrary.DOCX,
}],
selector: '#superdoc',
toolbar: '#my-toolbar',
document: './sample.docx', // URL, File or document config
documentMode: 'editing',
pagination: true,
rulers: true,
onReady: (event) => {
console.log('SuperDoc is ready', event);
},
onEditorCreate: (event) => {
console.log('Editor is created', event);
},
});
</script>

</body>
</html>
</html>
2 changes: 1 addition & 1 deletion examples/docxtemplater-example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"@fortawesome/free-regular-svg-icons": "^6.7.2",
"@fortawesome/free-solid-svg-icons": "^6.7.2",
"@fortawesome/vue-fontawesome": "^3.0.8",
"@harbour-enterprises/superdoc": "^0.10.44",
"@harbour-enterprises/superdoc": "^0.11.45",
"docxtemplater": "^3.59.0",
"pizzip": "^3.1.8",
"prismjs": "^1.29.0",
Expand Down
2 changes: 1 addition & 1 deletion examples/next-js-ssr/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"lint": "next lint"
},
"dependencies": {
"@harbour-enterprises/superdoc": "^0.10.46",
"@harbour-enterprises/superdoc": "^0.11.45",
"next": "15.3.1",
"react": "^19.0.0",
"react-dom": "^19.0.0"
Expand Down
14 changes: 12 additions & 2 deletions examples/next-js-ssr/src/app/SuperDoc/superdoc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,26 @@ export default function SuperDocEditor() {

const onReady = () => {
editor.current = superdoc.current.activeEditor;
console.log('SuperDoc is ready');
};

const initSuperDoc = async (fileToLoad = null) => {
const { SuperDoc } = await import('@harbour-enterprises/superdoc');
superdoc.current = new SuperDoc({
selector: superdocContainerRef.current,
pagination: true,
modules: {
toolbar: {
selector: '#toolbar',
toolbarGroups: ['center'],
},
},
document: fileToLoad ? { data: fileToLoad } : '/sample-document.docx',
modules: { toolbar: { selector: '#toolbar', toolbarGroups: ['center'] } },
pagination: true,
rulers: true,
onReady,
onEditorCreate: (event) => {
console.log('Editor is created', event);
},
});
};

Expand Down
2 changes: 1 addition & 1 deletion examples/nodejs-example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
},
"description": "",
"dependencies": {
"@harbour-enterprises/superdoc": "^0.11.36",
"@harbour-enterprises/superdoc": "^0.11.45",
"express": "^4.21.2"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion examples/typescript-example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"preview": "vite preview"
},
"dependencies": {
"@harbour-enterprises/superdoc": "^0.10.44",
"@harbour-enterprises/superdoc": "^0.11.45",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
Expand Down
10 changes: 0 additions & 10 deletions examples/typescript-example/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,17 @@
import { useRef, useState, ChangeEvent } from 'react';
import DocumentEditor from './components/DocumentEditor';
import { SuperDoc } from '@harbour-enterprises/superdoc';

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

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

const handleEditorReady = (editor: { superdoc: SuperDoc }) => {
console.log('SuperDoc editor is ready', editor);
};

return (
<div className="app">
<header>
Expand All @@ -38,9 +30,7 @@ function App() {

<main>
<DocumentEditor
documentId={documentId}
initialData={documentFile}
onEditorReady={handleEditorReady}
/>
</main>

Expand Down
31 changes: 13 additions & 18 deletions examples/typescript-example/src/components/DocumentEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,35 +5,28 @@ import '@harbour-enterprises/superdoc/style.css';
import { useEffect, useRef } from 'react';

interface Props {
documentId: string,
initialData: File | null,
documentType?: string,
readOnly?: boolean,
onEditorReady: (editor: { superdoc: SuperDoc }) => void;
initialData: File | null,
readOnly?: boolean,
}

const DocumentEditor = ({
documentId,
documentType = 'docx',
initialData = null,
readOnly = false,
onEditorReady
}: Props) => {
const editorRef = useRef<SuperDoc>(null);
useEffect(() => {
const config: Config = {
selector: '#superdoc',
toolbar: 'superdoc-toolbar',
toolbar: '#superdoc-toolbar',
document: initialData, // URL, File or document config
documentMode: readOnly ? 'viewing' : 'editing',
onReady: (activeSuperDoc: SuperDoc) => {
const superEditor = activeSuperDoc.activeEditor;
console.debug('SuperDoc editor is ready', superEditor);
pagination: true,
rulers: true,
onReady: (event) => {
console.log('SuperDoc is ready', event);
},
onEditorCreate: (editor: Editor) => {
console.log('Editor created', editor);
},
onEditorDestroy: () => {
console.log('Editor destroyed');
onEditorCreate: (event) => {
console.log('Editor is created', event);
},
};

Expand All @@ -46,7 +39,7 @@ const DocumentEditor = ({
editorRef.current = null;
}
};
}, [documentId, documentType, initialData, readOnly, onEditorReady]);
}, [initialData, readOnly]);

return (
<div className="document-editor">
Expand All @@ -64,6 +57,8 @@ const DocumentEditor = ({
border-bottom: 1px solid #eee;
}
.editor {
display: flex;
justify-content: center;
flex: 1 1 auto;
overflow: auto;
}
Expand Down
2 changes: 1 addition & 1 deletion examples/vanilla-example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"dev": "vite"
},
"dependencies": {
"@harbour-enterprises/superdoc": "^0.6.35"
"@harbour-enterprises/superdoc": "^0.11.45"
},
"devDependencies": {
"vite": "^4.4.6"
Expand Down
20 changes: 11 additions & 9 deletions examples/vanilla-example/src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { SuperDoc } from '@harbour-enterprises/superdoc';
import '@harbour-enterprises/superdoc/style.css';
import './style.css';

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

editor = new SuperDoc({
selector: '#superdoc',
toolbar: 'superdoc-toolbar',
toolbar: '#superdoc-toolbar',
document: file, // URL, File or document config
documentMode: 'editing',
documents: [{
id: `doc-${Date.now()}`,
type: 'docx',
data: file
}],
onReady: () => {
console.log('Editor is ready');
}
pagination: true,
rulers: true,
onReady: (event) => {
console.log('SuperDoc is ready', event);
},
onEditorCreate: (event) => {
console.log('Editor is created', event);
},
});
}

Expand Down
5 changes: 4 additions & 1 deletion examples/vanilla-example/src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@
}

#superdoc {
display: flex;
justify-content: center;
flex: 1;
overflow: auto;
}
}

2 changes: 1 addition & 1 deletion examples/vue-custom-mark/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"preview": "vite preview"
},
"dependencies": {
"@harbour-enterprises/superdoc": "^0.10.44",
"@harbour-enterprises/superdoc": "^0.11.45",
"vue": "^3.5.13"
},
"devDependencies": {
Expand Down
2 changes: 2 additions & 0 deletions examples/vue-custom-mark/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,8 @@ const init = (fileToLoad) => {

pagination: true,

rulers: true,

// Load the document if provided, otherwise load the sample document
document: fileToLoad ? { data: fileToLoad } : sampleDocument,

Expand Down
2 changes: 1 addition & 1 deletion examples/vue-custom-node-example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"preview": "vite preview"
},
"dependencies": {
"@harbour-enterprises/superdoc": "^0.10.68",
"@harbour-enterprises/superdoc": "^0.11.45",
"vue": "^3.5.13"
},
"devDependencies": {
Expand Down
2 changes: 2 additions & 0 deletions examples/vue-custom-node-example/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ const init = (fileToLoad) => {
// Enable pagination
pagination: true,

rulers: true,

document: fileToLoad ? { data: fileToLoad } : sampleDocument,

// Initialize the toolbar
Expand Down
2 changes: 1 addition & 1 deletion examples/vue-docx-from-html/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"preview": "vite preview"
},
"dependencies": {
"@harbour-enterprises/superdoc": "^0.10.44",
"@harbour-enterprises/superdoc": "^0.11.45",
"vue": "^3.5.13"
},
"devDependencies": {
Expand Down
3 changes: 2 additions & 1 deletion examples/vue-docx-from-html/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,14 @@ const init = () => {

pagination: true,

rulers: true,

// Initialize the toolbar
toolbar: '#toolbar',
toolbarGroups: ['center'],

// Optional, pass in an initial docx document to use your own template rather than a blank doc
document: '/sample-document.docx',

});
};

Expand Down
2 changes: 1 addition & 1 deletion examples/vue-example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"dev": "vite"
},
"dependencies": {
"@harbour-enterprises/superdoc": "^0.10.44",
"@harbour-enterprises/superdoc": "^0.11.45",
"vue": "^3.5.13"
},
"devDependencies": {
Expand Down
3 changes: 0 additions & 3 deletions examples/vue-example/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@

<main>
<DocumentEditor
:document-id="documentId"
:initial-data="documentFile"
@editor-ready="handleEditorReady"
/>
Expand All @@ -26,15 +25,13 @@
import { ref } from 'vue';
import DocumentEditor from './components/DocumentEditor.vue';

const documentId = ref('example-doc');
const documentFile = ref(null);
const fileInput = ref(null);

const handleFileChange = (event) => {
const file = event.target.files?.[0];
if (file) {
documentFile.value = file;
documentId.value = `doc-${Date.now()}`;
}
};

Expand Down
Loading
Loading