fix(formula): keep correct formula id (#448)

* fix: formula id

* refactor: move useFormulaSpreadsheet into useSpreadsheet

packages/formula/src/context/context.ts

@@ -57,6 +57,7 @@ import {
   VariableId,
   VariableInterface,
   VariableKey,
+  VariableRichType,
   View,
   ViewRender,
   ViewType
@@ -361,6 +362,14 @@ export class FormulaContext implements ContextInterface {
     return this.variables[variableKey(namespaceId, variableId)]
   }
 
+  public findVariableByCellMeta(
+    meta: Extract<VariableRichType, { type: 'spreadsheet' }>['meta']
+  ): VariableInterface | undefined {
+    return Object.values(this.variables).find(
+      v => v.t.meta.richType.type === 'spreadsheet' && JSON.stringify(v.t.meta.richType.meta) === JSON.stringify(meta)
+    )
+  }
+
   public findVariableDisplayDataById(
     namespaceId: NamespaceId,
     variableId: VariableId

packages/formula/src/context/variable.ts

@@ -33,7 +33,7 @@ import {
 } from '../events'
 import { devWarning } from '@mashcard/design-system'
 
-const MAX_LEVEL = 20
+const MAX_LEVEL = 8
 
 export const fetchVariableTError = ({ task }: VariableData): ErrorMessage | undefined => {
   if (task.async) return undefined
@@ -386,7 +386,8 @@ export class VariableClass implements VariableInterface {
     //   { sourceUuid, id: this.id },
     //   this.t.meta.name,
     //   source,
-    //   input
+    //   input,
+    //   this
     // )
 
     if (level > MAX_LEVEL) {

packages/formula/src/type/index.ts

@@ -393,6 +393,9 @@ export interface ContextInterface {
   removeSpreadsheet: (spreadsheetId: SpreadsheetId) => Promise<void>
   listVariables: (namespaceId: NamespaceId) => VariableInterface[]
   findVariableById: (namespaceId: NamespaceId, variableId: VariableId) => VariableInterface | undefined
+  findVariableByCellMeta: (
+    meta: Extract<VariableRichType, { type: 'spreadsheet' }>['meta']
+  ) => VariableInterface | undefined
   findVariableDisplayDataById: (namespaceId: NamespaceId, variableId: VariableId) => VariableDisplayData | undefined
   findVariableByName: (namespaceId: NamespaceId, name: string) => VariableInterface | undefined
   commitVariable: ({ variable }: { variable: VariableInterface }) => Promise<void>

packages/legacy-editor/src/components/blockViews/Spreadsheet/SpreadsheetBlockView.tsx

@@ -76,8 +76,10 @@ export const SpreadsheetBlockView: React.FC<SpreadsheetViewProps> = ({
     moveRow,
     getCellBlock,
     saveCellBlock,
-    cellsMap
+    cellsMap,
+    deleteSpreadsheet
   } = useSpreadsheet({
+    title,
     isNew: node.attrs.isNew ?? false,
     parentId,
     data: prevData,
@@ -100,8 +102,6 @@ export const SpreadsheetBlockView: React.FC<SpreadsheetViewProps> = ({
     editable: documentEditable
   })
 
-  const { deleteSpreadsheet } = useFormulaSpreadsheet({ spreadsheetId: parentId, rows, columns, getCellBlock, title })
-
   const handleDeleteNode = (): void => {
     deleteSpreadsheet()
     deleteNode()
@@ -343,7 +343,7 @@ export const SpreadsheetBlockView: React.FC<SpreadsheetViewProps> = ({
                     }
                   >
                     {columns.map((column, columnIdx) => {
-                      const block = getCellBlock(rowBlock.id, column.uuid)
+                      const block = getCellBlock(parentId, rowBlock.id, column.uuid)
                       return (
                         <SpreadsheetCellContainer
                           key={block.id}

packages/legacy-editor/src/components/blockViews/Spreadsheet/SpreadsheetCell.tsx

@@ -57,6 +57,7 @@ export const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
 
   const cellId = `${rowId},${columnId}`
   const formulaId = currentBlock.data.formulaId
+
   const formulaName = `Cell_${rowId}_${columnId}`.replaceAll('-', '')
 
   const editing = context?.editingCellId === formulaName
@@ -106,7 +107,7 @@ export const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
       // console.log('dispatch update cell', variable)
       // setEditing(false)
     },
-    [rootId, block, cellId, saveBlock, tableId, rowIdx, rowId, columnSort, columnTitle, formulaContext]
+    [formulaContext, block, cellId, rootId, saveBlock, tableId, rowIdx, rowId, columnSort, columnTitle]
   )
 
   const meta: UseFormulaInput['meta'] = {

packages/legacy-editor/src/components/blockViews/Spreadsheet/useFormulaSpreadsheet.ts

@@ -7,38 +7,40 @@ import {
   dispatchFormulaSpreadsheetNameChange,
   dispatchFormulaSpreadsheetRemove,
   dispatchFormulaSpreadsheetRowChange,
-  dispatchFormulaSpreadsheetColumnChange
+  dispatchFormulaSpreadsheetColumnChange,
+  ContextInterface
 } from '@mashcard/formula'
 import { BlockInput } from '@mashcard/schema'
 import { SpreadsheetColumn } from './useSpreadsheet'
 import { columnDisplayIndex, columnDisplayTitle } from './helper'
-import { useEditorContext, useDocumentContext } from '../../../hooks'
-import { getFormulaContext } from '../FormulaView'
+import { useDocumentContext } from '../../../hooks'
 
 interface useFormulaSpreadsheetProps {
   spreadsheetId: string
   columns: SpreadsheetColumn[]
+  formulaContext: ContextInterface | undefined | null
   rows: BlockInput[]
-  getCellBlock: (rowId: string, columnId: string) => BlockInput
+  getCellBlock: (spreadsheetId: string, rowId: string, columnId: string) => BlockInput
   title: string
 }
 
 export function useFormulaSpreadsheet({
   spreadsheetId,
   columns,
+  formulaContext,
   rows,
   title: originalTitle,
   getCellBlock
 }: useFormulaSpreadsheetProps): {
   deleteSpreadsheet: () => void
 } {
   const title = originalTitle || 'Untitled Spreadsheet'
-  const { editor } = useEditorContext()
   const { docId } = useDocumentContext()
   const rootId = docId!
-  const formulaContext = getFormulaContext(editor)
   const titleRef = React.useRef(title)
 
+  console.log('rootId rerender', rootId)
+
   const rowData: Row[] = React.useMemo(
     () => rows.map((row, rowIndex) => ({ rowId: row.id, rowIndex, spreadsheetId })),
     [rows, spreadsheetId]
@@ -102,7 +104,7 @@ export function useFormulaSpreadsheet({
       columns: columnsRef.current,
       rows: rowsRef.current,
       getCell: ({ rowId, columnId, rowIndex, columnIndex }) => {
-        const cellBlock = getCellBlock(rowId, columnId)
+        const cellBlock = getCellBlock(spreadsheetId, rowId, columnId)
 
         return {
           namespaceId: rootId,

packages/legacy-editor/src/components/blockViews/Spreadsheet/useSpreadsheet.ts

@@ -11,6 +11,9 @@ import {
   BlockInput,
   Block
 } from '@mashcard/schema'
+import { useEditorContext } from '../../../hooks'
+import { getFormulaContext } from '../FormulaView'
+import { useFormulaSpreadsheet } from './useFormulaSpreadsheet'
 
 export interface SpreadsheetColumn {
   uuid: string
@@ -28,6 +31,7 @@ export interface SpreadsheetCellsMap extends Map<string, Map<string, BlockInput>
 export function useSpreadsheet(options: {
   isNew: boolean
   parentId: string
+  title: string
   data: Record<string, any>
   updateAttributeData: (data: Record<string, any>) => void
 }): {
@@ -40,11 +44,14 @@ export function useSpreadsheet(options: {
   addRow: (index?: number) => void
   removeRow: (index: number) => void
   moveRow: (srcId: string, targetId: string) => void
-  getCellBlock: (rowId: string, columnId: string) => BlockInput
+  getCellBlock: (spreadsheetId: string, rowId: string, columnId: string) => BlockInput
   saveCellBlock: (block: BlockInput) => void
+  deleteSpreadsheet: () => void
   cellsMap: SpreadsheetCellsMap
 } {
-  const { isNew, parentId, data, updateAttributeData } = options
+  const { editor } = useEditorContext()
+  const formulaContext = getFormulaContext(editor)
+  const { isNew, parentId, data, updateAttributeData, title } = options
   const [columns, setColumns] = React.useState<SpreadsheetColumns>(data.columns ?? [])
   // const latestColumns = React.useRef<SpreadsheetColumns>(columns)
   const latestRowsCount = React.useRef<number>(data.rowsCount || 0)
@@ -239,9 +246,12 @@ export function useSpreadsheet(options: {
   )
 
   const getCellBlock = React.useCallback(
-    (rowId: string, columnId: string): BlockInput => {
+    (spreadsheetId: string, rowId: string, columnId: string): BlockInput => {
       let block = cellsMap.current.get(rowId)?.get(columnId)
       if (!block) {
+        // TODO: This should be refactored when we have formula state management.
+        const formulaId =
+          formulaContext?.findVariableByCellMeta({ spreadsheetId, columnId, rowId })?.t.meta.variableId ?? uuid()
         block = {
           id: uuid(),
           sort: 0,
@@ -250,15 +260,24 @@ export function useSpreadsheet(options: {
           content: [],
           meta: {},
           text: '',
-          data: { columnId, formulaId: uuid() }
+          data: { columnId, formulaId }
         }
         setBlockToCellsMap(block)
       }
       return block
     },
-    [setBlockToCellsMap]
+    [formulaContext, setBlockToCellsMap]
   )
 
+  const { deleteSpreadsheet } = useFormulaSpreadsheet({
+    spreadsheetId: parentId,
+    formulaContext,
+    rows,
+    columns,
+    getCellBlock,
+    title
+  })
+
   // const getCellBlockByIdx = React.useCallback(
   //   (rowIdx: number, columnIdx: number): BlockInput => {
   //     return getCellBlock(
@@ -286,7 +305,7 @@ export function useSpreadsheet(options: {
 
   const saveCellBlock = React.useCallback(
     (block: BlockInput): void => {
-      devLog(`Saving cell block`, block)
+      devLog(`Saving cell block`, block, cellsMap.current)
       setBlockToCellsMap(block)
       blocksMap.current.set(block.id, block)
       MashcardEventBus.dispatch(UpdateBlock({ block: block as Block }))
@@ -318,6 +337,7 @@ export function useSpreadsheet(options: {
     moveRow,
     getCellBlock,
     saveCellBlock,
+    deleteSpreadsheet,
     cellsMap: cellsMap.current
   }
 }