superdoc-dev · mattConnHarbour · Jan 22, 2026 · Jan 23, 2026 · Jan 23, 2026 · chatgpt-codex-connector
diff --git a/examples/xlsx-to-table/demo-config.json b/examples/xlsx-to-table/demo-config.json
@@ -0,0 +1,5 @@
+{
+  "name": "XLSX to Table",
+  "description": "Import spreadsheet data and insert as tables in SuperDoc",
+  "category": "advanced"
+}
diff --git a/examples/xlsx-to-table/index.html b/examples/xlsx-to-table/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>XLSX to Table Demo - SuperDoc</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/examples/xlsx-to-table/package.json b/examples/xlsx-to-table/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "xlsx-to-table-demo",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite"
+  },
+  "dependencies": {
+    "superdoc": "^1.8.3",
+    "vue": "^3.5.13",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "vite": "^4.4.6"
+  }
+}
diff --git a/examples/xlsx-to-table/src/App.vue b/examples/xlsx-to-table/src/App.vue
@@ -0,0 +1,187 @@
+<template>
+  <div class="app">
+    <header>
+      <h1>XLSX to Table Demo</h1>
+      <div class="actions">
+        <button @click="docInput?.click()">Load Document</button>
+        <input
+          type="file"
+          ref="docInput"
+          accept=".docx"
+          class="hidden"
+          @change="handleDocChange"
+        >
+        <button @click="xlsxInput?.click()" :disabled="!editorReady">
+          Import XLSX
+        </button>
+        <input
+          type="file"
+          ref="xlsxInput"
+          accept=".xlsx,.xls,.csv"
+          class="hidden"
+          @change="handleXlsxChange"
+        >
+      </div>
+    </header>
+
+    <main>
+      <DocumentEditor
+        ref="documentEditor"
+        :initial-data="documentFile"
+        @editor-ready="handleEditorReady"
+      />
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import * as XLSX from 'xlsx';
+import DocumentEditor from './components/DocumentEditor.vue';
+
+const documentFile = ref(null);
+const docInput = ref(null);
+const xlsxInput = ref(null);
+const documentEditor = ref(null);
+const editorReady = ref(false);
+let editorInstance = null;
+
+const handleDocChange = (event) => {
+  const file = event.target.files?.[0];
+  if (file) {
+    documentFile.value = file;
+    editorReady.value = false;
+    editorInstance = null;
+  }
+};
+
+const handleEditorReady = (superdoc) => {
+  editorInstance = superdoc?.activeEditor;
+  editorReady.value = !!editorInstance;
+};
+
+const handleXlsxChange = async (event) => {
+  const file = event.target.files?.[0];
+  if (!file || !editorInstance) return;
+
+  try {
+    const arrayBuffer = await file.arrayBuffer();
+    const workbook = XLSX.read(arrayBuffer, { type: 'array' });
+
+    const firstSheetName = workbook.SheetNames[0];
+    const worksheet = workbook.Sheets[firstSheetName];
+
+    const rawData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
+
+    // Filter out empty rows and convert all values to strings
+    const data = rawData
+      .filter(row => row.some(cell => cell !== null && cell !== undefined && cell !== ''))
+      .map(row => row.map(cell => String(cell ?? '')));
+
+    if (data.length === 0) {
+      alert('No data found in spreadsheet');
+      return;
+    }
+
+    insertTable(data);
+  } catch (error) {
+    console.error('Failed to parse spreadsheet:', error);
+    alert('Failed to parse spreadsheet file');
+  }
+
+  event.target.value = '';
+};
+
+const insertTable = (data) => {
+  const cols = Math.max(...data.map(row => row.length));
+
+  // Normalize rows to have consistent column count
+  const normalizedData = data.map(row => {
+    const normalized = [...row];
+    while (normalized.length < cols) {
+      normalized.push('');
+    }
+    return normalized;
+  });
+
+  // Insert a template table with 1 row
+  editorInstance.commands.insertTable({ rows: 1, cols, withHeaderRow: false });
+
+  // Find the newly inserted table
+  const tables = editorInstance.getNodesOfType('table');
+  if (!tables?.length) return;
+
+  const tablePos = tables[tables.length - 1].pos;
+
+  // Append all data rows
+  editorInstance.commands.appendRowsWithContent({
+    tablePos,
+    valueRows: normalizedData,
+    copyRowStyle: false
+  });
+
+  // Delete the empty template row
+  editorInstance.commands.deleteRow();
+};
+</script>
+
+<style>
+* {
+  box-sizing: border-box;
+}
+
+.app {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  padding: 1rem;
+  background: #f5f5f5;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  border-bottom: 1px solid #ddd;
+}
+
+header h1 {
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+.actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-left: auto;
+}
+
+header button {
+  padding: 0.5rem 1rem;
+  background: #1355ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.875rem;
+}
+
+header button:hover:not(:disabled) {
+  background: #0044ff;
+}
+
+header button:disabled {
+  background: #999;
+  cursor: not-allowed;
+}
+
+.hidden {
+  display: none;
+}
+
+main {
+  flex: 1;
+  padding: 1rem;
+  overflow: hidden;
+}
+</style>
diff --git a/examples/xlsx-to-table/src/components/DocumentEditor.vue b/examples/xlsx-to-table/src/components/DocumentEditor.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="document-editor">
+    <div :key="documentKey" class="editor-container">
+      <div id="superdoc-toolbar" class="toolbar"></div>
+      <div id="superdoc" class="editor"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { SuperDoc } from 'superdoc';
+import 'superdoc/style.css';
+
+const props = defineProps({
+  initialData: {
+    type: [File, Blob],
+    default: null
+  },
+  readOnly: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['editor-ready', 'editor-error']);
+
+let superdocInstance = null;
+const documentKey = ref(0);
+
+const destroyEditor = () => {
+  if (superdocInstance) {
+    superdocInstance = null;
+  }
+};
+
+const initializeEditor = async () => {
+  try {
+    destroyEditor();
+    documentKey.value++;
+
+    superdocInstance = new SuperDoc({
+      selector: '#superdoc',
+      toolbar: '#superdoc-toolbar',
+      document: props.initialData,
+      documentMode: props.readOnly ? 'viewing' : 'editing',
+      pagination: true,
+      rulers: true,
+      onReady: ({ superdoc }) => {
+        emit('editor-ready', superdoc);
+      },
+    });
+  } catch (error) {
+    console.error('Failed to initialize editor:', error);
+    emit('editor-error', error);
+  }
+};
+
+watch(
+  () => [props.initialData, props.readOnly],
+  () => {
+    initializeEditor();
+  }
+);
+
+onMounted(() => {
+  initializeEditor();
+});
+
+onUnmounted(() => {
+  destroyEditor();
+});
+
+defineExpose({
+  getSuperdoc: () => superdocInstance
+});
+</script>
+
+<style scoped>
+.document-editor {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.toolbar {
+  flex: 0 0 auto;
+  border-bottom: 1px solid #eee;
+  min-height: 40px;
+}
+
+.editor {
+  display: flex;
+  justify-content: center;
+  flex: 1 1 auto;
+  overflow: auto;
+  margin-top: 10px;
+  min-height: 400px;
+}
+</style>
diff --git a/examples/xlsx-to-table/src/main.js b/examples/xlsx-to-table/src/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');
diff --git a/examples/xlsx-to-table/vite.config.js b/examples/xlsx-to-table/vite.config.js
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+  plugins: [vue()],
+  optimizeDeps: {
+    include: ['superdoc', 'xlsx']
+  }
+});