diff --git a/examples/loading-from-json/demo-config.json b/examples/loading-from-json/demo-config.json new file mode 100644 index 0000000000..485e31e29c --- /dev/null +++ b/examples/loading-from-json/demo-config.json @@ -0,0 +1,9 @@ +{ + "dirname": "loading-from-json", + "tags": [ + "editing", + "viewing", + "vanilla-js" + ], + "title": "Loading from JSON" +} \ No newline at end of file diff --git a/examples/loading-from-json/demo-thumbnail.png b/examples/loading-from-json/demo-thumbnail.png new file mode 100644 index 0000000000..6a8b0fe52a Binary files /dev/null and b/examples/loading-from-json/demo-thumbnail.png differ diff --git a/examples/loading-from-json/demo-video.mp4 b/examples/loading-from-json/demo-video.mp4 new file mode 100644 index 0000000000..9886a67205 Binary files /dev/null and b/examples/loading-from-json/demo-video.mp4 differ diff --git a/examples/loading-from-json/index.html b/examples/loading-from-json/index.html new file mode 100644 index 0000000000..bd0ef18e17 --- /dev/null +++ b/examples/loading-from-json/index.html @@ -0,0 +1,28 @@ + + + + + + SuperDoc Vanilla Example + + +
+
+

SuperDoc Example

+ + + +
+
+
+
+
+
+ + + diff --git a/examples/loading-from-json/package.json b/examples/loading-from-json/package.json new file mode 100644 index 0000000000..e1de37387f --- /dev/null +++ b/examples/loading-from-json/package.json @@ -0,0 +1,15 @@ +{ + "name": "vanilla-superdoc-example", + "private": true, + "version": "0.0.1", + "type": "module", + "scripts": { + "dev": "vite" + }, + "dependencies": { + "@harbour-enterprises/superdoc": "^0.15.16" + }, + "devDependencies": { + "vite": "^4.4.6" + } +} diff --git a/examples/loading-from-json/src/main.js b/examples/loading-from-json/src/main.js new file mode 100644 index 0000000000..3112cad3df --- /dev/null +++ b/examples/loading-from-json/src/main.js @@ -0,0 +1,100 @@ +// Imports +import { SuperDoc } from '@harbour-enterprises/superdoc'; +import '@harbour-enterprises/superdoc/style.css'; +import './style.css'; + +// Init +let editor = null; + +//Init SuperDoc from DOCX file +function initSuperDocFromFile(file = null) { + if (editor) { + editor = null; + } + + editor = new SuperDoc({ + selector: '#superdoc', + toolbar: '#superdoc-toolbar', + document: file, // DOCX URL, File object, or document config + documentMode: 'editing', + mode: 'docx', + pagination: true, + rulers: true, + onReady: (event) => { + const docJSON = event.superdoc.activeEditor.getJSON(); + console.log('SuperDoc ready - JSON', docJSON); + }, + onEditorUpdate: (event) => { + const docJSON = event.editor.getJSON(); + console.log('SuperDoc updated - JSON', docJSON); + }, + }); +} + +//Init SuperDoc from JSON +function initSuperDocFromJSON() { + if (editor) { + editor = null; + } + + //Hardcoded demo JSON + const demoJSON = { + type: 'doc', + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + text: 'Hello, SuperDoc~!!', + }, + ], + }, + ], + }; + + editor = new SuperDoc({ + selector: '#superdoc', + toolbar: '#superdoc-toolbar', + documentMode: 'editing', + + /* LOADING JSON */ + //https://docs.superdoc.dev/core/supereditor/configuration#param-options-content + mode: 'docx', + jsonOverride: demoJSON, + + pagination: true, + rulers: true, + onReady: (event) => { + const docJSON = event.superdoc.activeEditor.getJSON(); + console.log('SuperDoc ready - JSON', docJSON); + }, + onEditorUpdate: (event) => { + const docJSON = event.editor.getJSON(); + console.log('SuperDoc updated - JSON', docJSON); + }, + }); +} + +// Setup file input handling +const fileInput = document.getElementById('fileInput'); +const loadButton = document.getElementById('loadButton'); +const loadJSON = document.getElementById('loadJSON'); + +loadButton.addEventListener('click', () => { + fileInput.click(); +}); + +loadJSON.addEventListener('click', () => { + initSuperDocFromJSON(); +}); + +fileInput.addEventListener('change', (event) => { + const file = event.target.files?.[0]; + if (file) { + initSuperDocFromFile(file); + } +}); + +// Initialize empty editor on page load +initSuperDocFromFile(null); diff --git a/examples/loading-from-json/src/style.css b/examples/loading-from-json/src/style.css new file mode 100644 index 0000000000..09052dcc1d --- /dev/null +++ b/examples/loading-from-json/src/style.css @@ -0,0 +1,45 @@ +.container { + height: 100vh; + display: flex; + flex-direction: column; + } + + header { + padding: 1rem; + background: #f5f5f5; + display: flex; + align-items: center; + gap: 1rem; + } + + button { + padding: 0.5rem 1rem; + background: #1355ff; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + } + + button:hover { + background: #0044ff; + } + + main { + flex: 1; + padding: 1rem; + display: flex; + flex-direction: column; + } + + #superdoc-toolbar { + border-bottom: 1px solid #eee; + } + + #superdoc { + display: flex; + justify-content: center; + flex: 1; + overflow: auto; + } + \ No newline at end of file diff --git a/examples/loading-from-json/vite.config.js b/examples/loading-from-json/vite.config.js new file mode 100644 index 0000000000..e1edef2913 --- /dev/null +++ b/examples/loading-from-json/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite'; + +export default defineConfig({ + optimizeDeps: { + include: ['@harbour-enterprises/superdoc'] + } +}); \ No newline at end of file