feat: write grid cell data to backend for only text fieldtype

frontend/appflowy_tauri/src/appflowy_app/components/board/BoardTextCell.tsx

@@ -1,6 +1,7 @@
 import { CellIdentifier } from '$app/stores/effects/database/cell/cell_bd_svc';
 import { CellCache } from '$app/stores/effects/database/cell/cell_cache';
 import { FieldController } from '$app/stores/effects/database/field/field_controller';
+import { useEffect, useState } from 'react';
 import { useCell } from '../_shared/database-hooks/useCell';
 
 export const BoardTextCell = ({
@@ -12,13 +13,26 @@ export const BoardTextCell = ({
   cellCache: CellCache;
   fieldController: FieldController;
 }) => {
-  const { data } = useCell(cellIdentifier, cellCache, fieldController);
+  const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController);
+
+  const [value, setValue] = useState((data as string) || '');
+
+  useEffect(() => {
+    if (data) setValue(data as string);
+  }, [data]);
 
   return (
     <div>
-      {((data as string | undefined) || '').split('\n').map((line, index) => (
-        <div key={index}>{line}</div>
-      ))}
+      <input
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+        onBlur={async () => {
+          await cellController?.saveCellData(value);
+        }}
+        className='min-h-[32px] w-full p-2 focus:border focus:border-main-accent focus:outline-none '
+      />
     </div>
   );
 };

frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableCell.tsx

@@ -2,7 +2,6 @@ import { CellIdentifier } from '@/appflowy_app/stores/effects/database/cell/cell
 import { CellCache } from '@/appflowy_app/stores/effects/database/cell/cell_cache';
 import { FieldController } from '@/appflowy_app/stores/effects/database/field/field_controller';
 import { BoardCell } from '../../board/BoardCell';
-import { useCell } from '../../_shared/database-hooks/useCell';
 
 export const GridTableCell = ({
   cellIdentifier,
@@ -13,12 +12,8 @@ export const GridTableCell = ({
   cellCache: CellCache;
   fieldController: FieldController;
 }) => {
-  const { data } = useCell(cellIdentifier, cellCache, fieldController);
-
-  console.log({ data });
-
   return (
-    <div className='min-h-[32px] w-full rounded-lg border border-transparent p-2 focus:border-main-accent'>
+    <div className='w-full rounded-lg border border-transparent group-active:bg-main-accent'>
       <BoardCell cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController} />
     </div>
   );

frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableRow.tsx

@@ -14,11 +14,12 @@ export const GridTableRow = ({
 }) => {
   const { cells } = useRow(viewId, controller, row);
 
+  console.log({ cells });
   return (
     <tr>
       {cells.map((cell, cellIndex) => {
         return (
-          <td className='m-0 border border-l-0 border-shade-6 p-0 '>
+          <td className='m-0 border border-l-0 border-shade-6 p-0 ' key={cellIndex}>
             <GridTableCell
               key={cellIndex}
               cellIdentifier={cell.cellIdentifier}