feat(spreadsheet): spreadsheet related improvement

apps/server-monolith/app/graphql/mutations/blocks/sync_batch.rb

@@ -32,8 +32,8 @@ def do_resolve(blocks:, root_id:, operator_id:, deleted_ids:)
 
         if root
           preloads = root.descendants(unscoped: true).index_by(&:id)
-          paths_cache = root.paths_cache
-          final_delete_ids = deleted_ids & paths_cache.keys
+          preloads.merge! Docs::Block.where(id: deleted_ids).index_by(&:id)
+          final_delete_ids = deleted_ids
           if final_delete_ids.present?
             preloads = preloads.each_with_object({}) do |(id, b), h|
               b.soft_delete! if id.in?(final_delete_ids)

packages/legacy-editor/__snapshots__/components/ui/Formula/AutocompleteList/__tests__/AutocompleteList.test.tsx.snap

@@ -140,7 +140,7 @@ exports[`AutocompleteList Active Completion renders column kind correctly 1`] =
         class="autocomplete-preview-column"
       >
         <div
-          class="mc-c-htoqZK"
+          class="mc-c-jczSvQ"
         >
           <div
             class="node-spreadsheetBlock"
@@ -381,7 +381,7 @@ exports[`AutocompleteList Active Completion renders spreadsheet kind correctly 1
         class="autocomplete-preview-spreadsheet"
       >
         <div
-          class="mc-c-htoqZK"
+          class="mc-c-jczSvQ"
         >
           <div
             class="node-spreadsheetBlock"

packages/legacy-editor/__snapshots__/components/ui/Formula/Render/__tests__/FormulaSpreadsheet.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`FormulaSpreadsheet renders FormulaSpreadsheet correctly 1`] = `
 <div>
   <div
-    class="mc-c-htoqZK"
+    class="mc-c-jczSvQ"
   >
     <div
       class="node-spreadsheetBlock"

packages/legacy-editor/__snapshots__/editors/documentEditor/__tests__/documentEditor.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`documentEditor renders document editor correctly 1`] = `
 <div>
   <div>
     <div
-      class="mc-c-dwHqnd mc-c-dwHqnd-gHONcO-enableSelection-false"
+      class="mc-c-dxPmcb mc-c-dxPmcb-gHONcO-enableSelection-false"
     >
       <div
         class="ProseMirror"

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

@@ -10,6 +10,9 @@ const tableSelectBorderColor = '#c0cdff'
 const tableActionHoverColor = '#356cf9'
 const spreadsheetBorderColor = '#87B6E8'
 
+export const columnDefaultWidth = 230
+export const columnMinWidth = 70
+
 export const spreadsheetStyles: CSS = {
   '.mashcard-spreadsheet-block': {
     overflow: 'auto',
@@ -29,7 +32,8 @@ export const spreadsheetStyles: CSS = {
     },
     '.spreadsheet-action': {
       position: 'absolute',
-      top: theme.lineHeights.body,
+      top: '-2px',
+      left: '2px',
       zIndex: 100
     },
     'table.spreadsheet-row-actions': {
@@ -173,18 +177,6 @@ export const spreadsheetStyles: CSS = {
             opacity: 1
           }
         },
-        '.resize-handler': {
-          height: '100%',
-          width: 2,
-          position: 'absolute',
-          right: -1,
-          top: 0,
-          border: 0,
-          padding: 0,
-          cursor: 'ew-resize',
-          background: 'transparent'
-        },
-
         '.cell': {
           padding: '4px 6px'
         }
@@ -396,3 +388,15 @@ export const SpreadsheetColumnTooltip = styled(SpreadsheetTooltip, {
   bottom: '-28px',
   left: '20px'
 })
+
+export const SpreadsheetColumnResizeHandler = styled('button', {
+  height: '100%',
+  width: 6,
+  position: 'absolute',
+  right: -3,
+  top: 0,
+  border: 0,
+  padding: 0,
+  cursor: 'ew-resize',
+  background: 'transparent'
+})

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

@@ -6,7 +6,13 @@ import { BlockContainer, BlockContainerProps } from '../BlockContainer'
 import { SpreadsheetViewProps } from '../../../extensions/blocks/spreadsheet/meta'
 import { MenuIcon } from '../../ui/BlockSelector/BlockSelector.style'
 
-import { SpreadsheetTitleEditing, SpreadsheetTitleInput, SpreadsheetTitleTooltip } from './Spreadsheet.style'
+import {
+  SpreadsheetTitleEditing,
+  SpreadsheetTitleInput,
+  SpreadsheetTitleTooltip,
+  columnDefaultWidth,
+  columnMinWidth
+} from './Spreadsheet.style'
 import { useSpreadsheet } from './useSpreadsheet'
 import { columnDisplayTitle } from './helper'
 
@@ -86,10 +92,12 @@ export const SpreadsheetBlockView: React.FC<SpreadsheetViewProps> = ({
   })
 
   const valuesMatrix = new Map(
-    Array.from(cellsMap.entries()).map(([rowId, row]) => [
-      rowId,
-      new Map(Array.from(row.entries()).map(([columnId, cell]) => [columnId, cell.text]))
-    ])
+    rows
+      .flat(1)
+      .map(row => [
+        row.id,
+        new Map(columns.map(column => [column.uuid, cellsMap.get(row.id)?.get(column.uuid)?.text ?? '']))
+      ])
   )
 
   const spreadsheetContext = useSpreadsheetContext({
@@ -130,7 +138,13 @@ export const SpreadsheetBlockView: React.FC<SpreadsheetViewProps> = ({
 
   const [columnWidths, setColumnWidths] = React.useState(Object.fromEntries(columns.map(c => [c.uuid, c.width])))
 
-  const finalColumnWidths = Object.fromEntries(Object.entries(columnWidths).map(([id, width]) => [id, width ?? 230]))
+  const finalColumnWidths = Object.fromEntries(
+    Object.entries(columnWidths).map(([id, width]) => {
+      let finalWidth = width ?? columnDefaultWidth
+      if (finalWidth < columnMinWidth) finalWidth = columnMinWidth
+      return [id, finalWidth]
+    })
+  )
 
   React.useEffect(() => {
     const onDraggingMouseMove = (e: MouseEvent): void => {
@@ -311,7 +325,11 @@ export const SpreadsheetBlockView: React.FC<SpreadsheetViewProps> = ({
                     draggable={documentEditable}
                     onResize={onResize}
                     width={finalColumnWidths[column.uuid]}
-                    setWidth={number => setColumnWidths({ ...columnWidths, [column.uuid]: number })}
+                    setWidth={width => {
+                      let newWidth = width
+                      if (newWidth < columnMinWidth) newWidth = columnMinWidth
+                      setColumnWidths({ ...columnWidths, [column.uuid]: newWidth })
+                    }}
                   >
                     <SpreadsheetColumnEditable
                       context={spreadsheetContext}
@@ -349,6 +367,8 @@ export const SpreadsheetBlockView: React.FC<SpreadsheetViewProps> = ({
                               spreadsheetId={parentId}
                               key={block.id}
                               block={block}
+                              rowIdx={rowIdx}
+                              columnIdx={columnIdx}
                               saveBlock={saveCellBlock}
                               width={finalColumnWidths[column.uuid]}
                               height={rowLayoutHeights[rowBlock.id]}

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

@@ -24,6 +24,8 @@ import { useEditorContext, useDocumentContext } from '../../../hooks'
 export interface SpreadsheetCellProps {
   context: SpreadsheetContext
   block: BlockInput
+  rowIdx: number
+  columnIdx: number
   spreadsheetId: string
   saveBlock: (block: BlockInput) => void
   width?: number
@@ -34,6 +36,8 @@ export const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
   context,
   spreadsheetId,
   block,
+  rowIdx,
+  columnIdx,
   saveBlock,
   width,
   height
@@ -104,16 +108,18 @@ export const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
   const eventId = `${spreadsheetId},${cellId}`
 
   React.useEffect(() => {
-    const listener = MashcardEventBus.subscribe(
-      SpreadsheetUpdateCellValue,
-      e => {
-        const { value } = e.payload
-        devLog('Spreadsheet update cell', { eventId, value })
-        void commitFormula(value)
-      },
-      { eventId, subscribeId: eventId }
-    )
-    return () => listener.unsubscribe()
+    const subscriptions = [
+      MashcardEventBus.subscribe(
+        SpreadsheetUpdateCellValue,
+        e => {
+          const { value } = e.payload
+          devLog('Spreadsheet update cell', { eventId, value })
+          void commitFormula(value)
+        },
+        { eventId, subscribeId: eventId }
+      )
+    ]
+    return () => subscriptions.forEach(s => s.unsubscribe())
   }, [commitFormula, eventId])
 
   const handleEnterEdit = (): void => {

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

@@ -1,6 +1,12 @@
 import React from 'react'
 import { devLog } from '@mashcard/design-system'
-import { MashcardEventBus, SpreadsheetUpdateCellValue } from '@mashcard/schema'
+import {
+  MashcardEventBus,
+  SpreadsheetUpdateCellValue,
+  SpreadsheetUpdateCellValueByIdx,
+  SpreadsheetAddRow,
+  SpreadsheetAddColumn
+} from '@mashcard/schema'
 import { parsePasteTable } from './helper'
 
 export interface SpreadsheetSelectionCellId {
@@ -140,13 +146,25 @@ export const useSpreadsheetContext = (options: {
       let rowDelta = 0
       pasteMatrix.forEach((r: string[], ri: number) => {
         r.forEach((c: string, ci: number) => {
-          const rowId = rowIds[rowIdx + ri + rowDelta]
-          const columnId = columnIds[columnIdx + ci]
+          const nRowIdx = rowIdx + ri + rowDelta
+          const nColumnIdx = columnIdx + ci
+          const rowId = rowIds[nRowIdx]
+          const columnId = columnIds[nColumnIdx]
           if (selectedColumnIds?.includes(columnId) && ri === 0) {
             rowDelta -= 1
           } else if (rowId && columnId) {
             const cellId = `${rowId},${columnId}`
             MashcardEventBus.dispatch(SpreadsheetUpdateCellValue({ parentId: parentId!, cellId, value: c }))
+          } else if (c && c.length > 0) {
+            if (nRowIdx >= rowIds.length) {
+              MashcardEventBus.dispatch(SpreadsheetAddRow({ parentId: parentId!, idx: nRowIdx }))
+            }
+            if (nColumnIdx >= columnIds.length) {
+              MashcardEventBus.dispatch(SpreadsheetAddColumn({ parentId: parentId!, idx: nColumnIdx }))
+            }
+            MashcardEventBus.dispatch(
+              SpreadsheetUpdateCellValueByIdx({ parentId: parentId!, rowIdx: nRowIdx, columnIdx: nColumnIdx, value: c })
+            )
           }
         })
       })

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

@@ -15,7 +15,9 @@ import {
   SpreadsheetColumnDisplay,
   SpreadsheetColumnInput,
   SpreadsheetColumnEditing,
-  SpreadsheetColumnIndex
+  SpreadsheetColumnIndex,
+  SpreadsheetColumnResizeHandler,
+  columnDefaultWidth
 } from './Spreadsheet.style'
 
 /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/interactive-supports-focus,
@@ -192,7 +194,7 @@ export const SpreadsheetHeaderColumn: React.FC<{
     document.addEventListener('mousemove', onResizeMouseMove)
     document.addEventListener('mouseup', onResizeMouseUp)
     context.clearSelection()
-    latestMovement.current = width ?? columnRef.current?.clientWidth ?? 230
+    latestMovement.current = width ?? columnRef.current?.clientWidth ?? columnDefaultWidth
   }
 
   const onContextMenu: React.MouseEventHandler = (e: React.MouseEvent): void => {
@@ -253,7 +255,7 @@ export const SpreadsheetHeaderColumn: React.FC<{
       ) : (
         <></>
       )}
-      {onResize ? <button className="resize-handler" onMouseDown={onResizeMouseDown} /> : <></>}
+      {onResize ? <SpreadsheetColumnResizeHandler onMouseDown={onResizeMouseDown} /> : <></>}
     </th>
   )
 }