From 03f4ff9e7ce7f9b8ad99f3447bafb4f4475eaf8a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 3 Mar 2026 18:59:00 +0200
Subject: [PATCH] feat(spreadsheet): save spreadsheet to JSON

---
 .../src/widgets/type_widgets/Spreadsheet.tsx  | 44 +++++++++++++++++--
 1 file changed, 41 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/Spreadsheet.tsx b/apps/client/src/widgets/type_widgets/Spreadsheet.tsx
index 85e80c00f6..72f72e0838 100644
--- a/apps/client/src/widgets/type_widgets/Spreadsheet.tsx
+++ b/apps/client/src/widgets/type_widgets/Spreadsheet.tsx
@@ -3,17 +3,21 @@ import "./Spreadsheet.css";
 
 import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core';
 import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US';
-import { createUniver, FUniver, LocaleType, mergeLocales } from '@univerjs/presets';
+import { CommandType, createUniver, FUniver, LocaleType, mergeLocales } from '@univerjs/presets';
 import { MutableRef, useEffect, useRef } from "preact/hooks";
 
-import { useColorScheme } from "../react/hooks";
+import NoteContext from "../../components/note_context";
+import FNote from "../../entities/fnote";
+import { useColorScheme, useEditorSpacedUpdate } from "../react/hooks";
+import { TypeWidgetProps } from "./type_widget";
 
-export default function Spreadsheet() {
+export default function Spreadsheet({ note, noteContext }: TypeWidgetProps) {
     const containerRef = useRef<HTMLDivElement>(null);
     const apiRef = useRef<FUniver>();
 
     useInitializeSpreadsheet(containerRef, apiRef);
     useDarkMode(apiRef);
+    usePersistence(note, noteContext, apiRef);
 
     return <div ref={containerRef} className="spreadsheet" />;
 }
@@ -51,3 +55,37 @@ function useDarkMode(apiRef: MutableRef<FUniver | undefined>) {
         univerAPI.toggleDarkMode(colorScheme === 'dark');
     }, [ colorScheme, apiRef ]);
 }
+
+function usePersistence(note: FNote, noteContext: NoteContext | null | undefined, apiRef: MutableRef<FUniver | undefined>) {
+    const spacedUpdate = useEditorSpacedUpdate({
+        noteType: "spreadsheet",
+        note,
+        noteContext,
+        getData() {
+            const univerAPI = apiRef.current;
+            if (!univerAPI) return undefined;
+            const workbook = univerAPI.getActiveWorkbook();
+            if (!workbook) return undefined;
+            const content = JSON.stringify({
+                version: 1,
+                workbook: workbook.save()
+            });
+            return {
+                content
+            };
+        },
+        onContentChange(newContent) {
+        },
+    });
+
+    useEffect(() => {
+        const univerAPI = apiRef.current;
+        const workbook = apiRef.current?.getActiveWorkbook();
+        if (!univerAPI || !workbook) return;
+
+        workbook.onCommandExecuted(command => {
+            if (command.type !== CommandType.MUTATION) return;
+            spacedUpdate.scheduleUpdate();
+        });
+    });
+}