feat(spreadsheet): integrate spreadsheet with full-height

apps/client/package.json

@@ -35,6 +35,8 @@
     "@triliumnext/highlightjs": "workspace:*",
     "@triliumnext/share-theme": "workspace:*",
     "@triliumnext/split.js": "workspace:*",
+    "@univerjs/preset-sheets-core": "0.16.1",
+    "@univerjs/presets": "0.16.1",
     "@zumer/snapdom": "2.0.2",
     "autocomplete.js": "0.38.1",
     "bootstrap": "5.3.8",

apps/client/src/widgets/type_widgets/Spreadsheet.css

@@ -0,0 +1,3 @@
+.note-detail-spreadsheet > .spreadsheet {
+    height: 100%;
+}

apps/client/src/widgets/type_widgets/Spreadsheet.tsx

@@ -1,8 +1,39 @@
+import "@univerjs/preset-sheets-core/lib/index.css";
+import "./Spreadsheet.css";
+
+import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core';
+import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US';
+import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets';
+import { useEffect, useRef } from "preact/hooks";
+
 export default function Spreadsheet() {
     return (
-        <div className="spreadsheet-note">
-            <p>This is a placeholder for the spreadsheet note type.</p>
-            <p>It will be implemented in a future release.</p>
-        </div>
+        <UniverSpreadsheet />
     );
 }
+
+function UniverSpreadsheet() {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!containerRef.current) return;
+
+        const { univerAPI } = createUniver({
+            locale: LocaleType.EN_US,
+            locales: {
+                [LocaleType.EN_US]: mergeLocales(
+                    UniverPresetSheetsCoreEnUS
+                ),
+            },
+            presets: [
+                UniverSheetsCorePreset({
+                    container: containerRef.current
+                })
+            ]
+        });
+        univerAPI.createWorkbook({});
+        return () => univerAPI.dispose();
+    }, []);
+
+    return <div ref={containerRef} className="spreadsheet" />;
+}