Update custom node example, update versions for all examples

Author: harbournick

examples/docxtemplater-example/package.json

@@ -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.9.7",
+    "@harbour-enterprises/superdoc": "^0.10.44",
     "docxtemplater": "^3.59.0",
     "pizzip": "^3.1.8",
     "prismjs": "^1.29.0",

examples/nodejs-example/package.json

@@ -12,7 +12,7 @@
   },
   "description": "",
   "dependencies": {
-    "@harbour-enterprises/superdoc": "^0.9.7",
+    "@harbour-enterprises/superdoc": "^0.10.44",
     "express": "^4.21.2"
   },
   "devDependencies": {

examples/react-example/package.json

@@ -7,7 +7,7 @@
         "dev": "vite"
     },
     "dependencies": {
-        "@harbour-enterprises/superdoc": "^0.9.7",
+        "@harbour-enterprises/superdoc": "^0.10.44",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
     },

examples/typescript-example/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@harbour-enterprises/superdoc": "^0.9.7",
+    "@harbour-enterprises/superdoc": "^0.10.44",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

examples/vue-custom-mark/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@harbour-enterprises/superdoc": "^0.10.8",
+    "@harbour-enterprises/superdoc": "^0.10.44",
     "vue": "^3.5.13"
   },
   "devDependencies": {

examples/vue-custom-mark/src/App.vue

@@ -2,17 +2,22 @@
 import '@harbour-enterprises/superdoc/style.css';
 import { onMounted, shallowRef } from 'vue';
 import { SuperDoc } from '@harbour-enterprises/superdoc';
+import UploadFile from '../../shared/vue/UploadFile/UploadFile.vue';
+import sampleDocument from '../../shared/data/sample-document.docx?url';
 
 // This is our custom mark that we are creating for this example
 import { CustomMark } from './custom-mark.js';
 
 const superdoc = shallowRef(null);
-const init = () => {
+const init = (fileToLoad) => {
   superdoc.value = new SuperDoc({
     selector: '#editor', // Can also be a class ie: .main-editor
 
     pagination: true,
 
+    // Load the document if provided, otherwise load the sample document
+    document: fileToLoad ? { data: fileToLoad } : sampleDocument,
+
     // Initialize the toolbar
     toolbar: '#toolbar',
     toolbarGroups: ['center'],
@@ -30,9 +35,6 @@ const myCustomOnReady = () => {
   superdoc.value?.activeEditor?.on('update', async ({ editor }) => {
     // Let's log the HTML representation of the editor on each update;
     console.log('Content updated: ', editor.getHTML());
-
-    // Let's also pretend we're exporting to DOCX so we can save it somewhere
-    exportToDocx(editor);
   });
 }
 
@@ -58,6 +60,14 @@ const exportDocx = () => {
   });
 };
 
+const handleFileUpdate = (file) => {
+  // Handle file update logic here
+  console.log('File updated:', file);
+  superdoc.value?.destroy();
+
+  init(file);
+};
+
 onMounted(() => init());
 </script>
 
@@ -71,39 +81,10 @@ onMounted(() => init());
     <div class="editor-and-button">
       <div id="editor" class="main-editor"></div>
       <div class="editor-buttons">
-        <button class="insert-mark" @click="insertCustomMark">Insert custom mark</button>
-        <button class="insert-mark" @click="exportDocx">Export</button>
+        <UploadFile :update-file="handleFileUpdate" />
+        <button class="custom-button" @click="insertCustomMark">Insert custom mark</button>
+        <button class="custom-button" @click="exportDocx">Export</button>
       </div>
     </div>
   </div>
 </template>
-
-<style scoped>
-.example-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.editor-and-button {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: center;
-}
-.editor-buttons {
-  display: flex;
-  flex-direction: column;
-}
-.editor-buttons button {
-  margin-bottom: 10px;
-}
-.insert-mark {
-  padding: 8px 12px;
-  border-radius: 8px;
-  margin-left: 10px;
-  outline: none;
-  border: none;
-  background-color: #AECEE6;
-}
-</style>

examples/vue-custom-mark/src/main.js

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import './style.css'
+import '../../shared/css/style.css'
 import App from './App.vue'
 
 createApp(App).mount('#app')

examples/vue-custom-node-example/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@harbour-enterprises/superdoc": "^0.10.8",
+    "@harbour-enterprises/superdoc": "^0.10.44",
     "vue": "^3.5.13"
   },
   "devDependencies": {

examples/vue-custom-node-example/src/App.vue

@@ -2,7 +2,7 @@
 import '@harbour-enterprises/superdoc/style.css';
 import { onMounted, shallowRef } from 'vue';
 import { SuperDoc } from '@harbour-enterprises/superdoc';
-import UploadFile from './components/UploadFile.vue';
+import UploadFile from '../../shared/vue/UploadFile/UploadFile.vue';
 
 // Default document
 import sampleDocument from '../../shared/data/sample-document.docx?url';