superdoc-dev · falsaadehh · Jul 14, 2025 · Aug 18, 2025 · Aug 21, 2025 · Aug 27, 2025
diff --git a/.github/workflows/run-tests-example-apps.yml b/.github/workflows/run-tests-example-apps.yml
@@ -0,0 +1,30 @@
+name: Run tests for example apps
+
+on:
+  workflow_call:
+  # TODO: Enable this when we test this workflow manually
+  # pull_request:
+  #   branches:
+  #     - develop
+
+jobs:
+  run-tests-example-apps:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: cd examples/tests && npm ci
+
+      - name: Install Playwright browsers
+        run: cd examples/tests && npx playwright install --with-deps
+
+      - name: Run tests
+        run: cd examples/tests && npm test
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -91,7 +91,7 @@ export default [
       }
     },
     rules: {
-      'no-unused-vars': 'warn', // See warnings but don't block
+      'no-unused-vars': ['warn', { "varsIgnorePattern": "^_" }], // See warnings but don't block
 
       // Relax these rules - they're more style than bugs
       'no-empty': ['warn', { allowEmptyCatch: true }], // Allow empty catch blocks

diff --git a/examples/loading-from-json/demo-config.json 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"
+}
diff --git a/examples/loading-from-json/demo-thumbnail.png b/examples/loading-from-json/demo-thumbnail.png
diff --git a/examples/loading-from-json/demo-video.mp4 b/examples/loading-from-json/demo-video.mp4
diff --git a/examples/loading-from-json/index.html b/examples/loading-from-json/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SuperDoc Vanilla Example</title>
+  </head>
+  <body>
+    <div class="container">
+      <header>
+        <h1>SuperDoc Example</h1>
+        <button id="loadButton">Upload DOCX</button>
+        <button id="loadJSON">Load JSON</button>
+        <input
+          type="file"
+          id="fileInput"
+          accept=".docx,.pdf,.html"
+          style="display: none"
+        />
+      </header>
+      <main>
+        <div id="superdoc-toolbar"></div>
+        <div id="superdoc"></div>
+      </main>
+    </div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/examples/loading-from-json/package.json 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
@@ -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
@@ -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;
+  }
+
diff --git a/examples/loading-from-json/vite.config.js b/examples/loading-from-json/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  optimizeDeps: {
+    include: ['@harbour-enterprises/superdoc']
+  }
+});
diff --git a/examples/react-example/package-lock.json b/examples/react-example/package-lock.json
diff --git a/examples/react-example/package.json b/examples/react-example/package.json
@@ -13,6 +13,6 @@
     },
     "devDependencies": {
         "@vitejs/plugin-react": "^4.0.4",
-        "vite": "^7.0.5"
+        "vite": "^6.2.0"
     }
 }
diff --git a/examples/replace-content-example/README.md b/examples/replace-content-example/README.md
@@ -0,0 +1,26 @@
+# Replace Content Example
+
+A React example demonstrating how to replace document content with HTML or JSON using SuperDoc.
+
+## Features
+
+- Load DOCX documents
+- Replace entire document or selection with custom content  
+- Switch between HTML and JSON input formats
+- Side panel with content replacement controls
+
+## Usage
+
+1. Load a document using "Load Document" button
+2. Open the side panel using the tab on the right
+3. Choose replacement scope (Document or Selection)
+4. Select content type (HTML or JSON)
+5. Enter your content in the textarea
+6. Click "Replace content" to apply changes
+
+## Running
+
+```bash
+npm install
+npm run dev
+```
diff --git a/examples/replace-content-example/demo-config.json b/examples/replace-content-example/demo-config.json
@@ -0,0 +1,9 @@
+{
+    "dirname": "replace-content-example",
+    "tags": [
+        "editing",
+        "viewing",
+        "react"
+    ],
+    "title": "Replacing content with HTML/JSON"
+}
diff --git a/examples/replace-content-example/demo-thumbnail.png b/examples/replace-content-example/demo-thumbnail.png
diff --git a/examples/replace-content-example/demo-video.mp4 b/examples/replace-content-example/demo-video.mp4
diff --git a/examples/replace-content-example/index.html b/examples/replace-content-example/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SuperDoc React Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/examples/replace-content-example/package.json b/examples/replace-content-example/package.json
@@ -0,0 +1,19 @@
+{
+    "name": "react-superdoc-example",
+    "private": true,
+    "version": "0.0.1",
+    "type": "module",
+    "scripts": {
+        "dev": "vite"
+    },
+    "dependencies": {
+        "@harbour-enterprises/superdoc": "^0.14.15",
+        "highlight.js": "^11.11.1",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+    },
+    "devDependencies": {
+        "@vitejs/plugin-react": "^4.0.4",
+        "vite": "^7.0.5"
+    }
+}
diff --git a/examples/replace-content-example/public/sample.docx b/examples/replace-content-example/public/sample.docx