feat(spreadsheet): spreadsheet related improvement

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

@@ -272,14 +272,8 @@ export const SpreadsheetBlockView: React.FC<SpreadsheetViewProps> = ({
           <SpreadsheetView>
             <SpreadsheetHeader rowId="first" context={spreadsheetContext}>
               {columns.map((column, i) => {
-                const handleTitleSave = (value: string): string | undefined => {
-                  if (value && columns.some(c => c.title === value && c.uuid !== column.uuid)) {
-                    return `'${value}' ${t('spreadsheet.column.name_used')}`
-                  } else if (value === title) {
-                    return `'${value}' ${t('spreadsheet.column.name_used')}`
-                  } else {
-                    updateColumn({ ...column, title: value })
-                  }
+                const handleTitleSave = (title: string): string | undefined => {
+                  return updateColumn({ ...column, title })
                 }
                 const onResize = (width: number): void => {
                   updateColumn({ ...column, width })

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

@@ -41,11 +41,15 @@ export interface SpreadsheetContext {
   editable: boolean
 }
 
-export const keyDownMovements: { [key: string]: [number, number] } = {
-  ArrowUp: [-1, 0],
-  ArrowDown: [1, 0],
-  ArrowLeft: [0, -1],
-  ArrowRight: [0, 1]
+export const keyDownMovements: {
+  // movement: [row, column, if jump to next row when last column]
+  [key: string]: [number, number, boolean]
+} = {
+  ArrowUp: [-1, 0, false],
+  ArrowDown: [1, 0, false],
+  ArrowLeft: [0, -1, false],
+  ArrowRight: [0, 1, false],
+  Tab: [0, 1, true]
 }
 
 export const useSpreadsheetContext = (options: {
@@ -124,20 +128,23 @@ export const useSpreadsheetContext = (options: {
   )
 
   const pasteToSpreadsheet = React.useCallback(
-    (pasteMatrix: string[][]) => {
+    (pasteMatrix: string[][], selection: SpreadsheetSelection) => {
+      const { columnIds: selectedColumnIds } = selection
       let { rowIdx, columnIdx } = getSelectedIdx()
       if (rowIdx === rowIds.length) {
         rowIdx = 0
       }
       if (columnIdx === columnIds.length) {
         columnIdx = 0
       }
-
+      let rowDelta = 0
       pasteMatrix.forEach((r: string[], ri: number) => {
         r.forEach((c: string, ci: number) => {
-          const rowId = rowIds[rowIdx + ri]
+          const rowId = rowIds[rowIdx + ri + rowDelta]
           const columnId = columnIds[columnIdx + ci]
-          if (rowId && columnId) {
+          if (selectedColumnIds?.includes(columnId) && ri === 0) {
+            rowDelta -= 1
+          } else if (rowId && columnId) {
             const cellId = `${rowId},${columnId}`
             MashcardEventBus.dispatch(SpreadsheetUpdateCellValue({ parentId: parentId!, cellId, value: c }))
           }
@@ -159,10 +166,18 @@ export const useSpreadsheetContext = (options: {
           const { rowIdx, columnIdx } = getSelectedIdx()
           let nRowIdx = rowIdx + movement[0]
           let nColumnIdx = columnIdx + movement[1]
+          if (movement[2]) {
+            if (nColumnIdx >= columnIds.length) {
+              nColumnIdx = 0
+              nRowIdx += 1
+              if (nRowIdx >= rowIds.length) nRowIdx = 0
+            }
+          } else if (nColumnIdx > columnIds.length) {
+            nColumnIdx = 0
+          }
+          if (nColumnIdx < 0) nColumnIdx = columnIds.length
           if (nRowIdx > rowIds.length) nRowIdx = 0
           if (nRowIdx < 0) nRowIdx = rowIds.length
-          if (nColumnIdx > columnIds.length) nColumnIdx = 0
-          if (nColumnIdx < 0) nColumnIdx = columnIds.length
           if (nRowIdx === rowIds.length) {
             setSelection({ columnIds: [columnIds[nColumnIdx]] })
           } else if (nColumnIdx === columnIds.length) {
@@ -194,7 +209,7 @@ export const useSpreadsheetContext = (options: {
         const pasteMatrix = parsePasteTable(text)
         devLog('paste to spreadsheet', [text])
         devLog('parsed', pasteMatrix)
-        pasteToSpreadsheet(pasteMatrix)
+        pasteToSpreadsheet(pasteMatrix, selection)
         e.preventDefault()
       }
     }

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

@@ -11,7 +11,7 @@ import {
   BlockInput,
   Block
 } from '@mashcard/schema'
-import { useEditorContext } from '../../../hooks'
+import { useEditorContext, useEditorI18n } from '../../../hooks'
 import { getFormulaContext } from '../FormulaView'
 import { useFormulaSpreadsheet } from './useFormulaSpreadsheet'
 
@@ -37,7 +37,7 @@ export function useSpreadsheet(options: {
 }): {
   columns: SpreadsheetColumns
   addColumn: (index?: number) => void
-  updateColumn: (column: SpreadsheetColumn) => void
+  updateColumn: (column: SpreadsheetColumn) => string | undefined
   removeColumn: (column: SpreadsheetColumn) => void
   moveColumn: (srcId: string, targetId: string) => void
   rows: SpreadsheetRows
@@ -49,6 +49,7 @@ export function useSpreadsheet(options: {
   deleteSpreadsheet: () => void
   cellsMap: SpreadsheetCellsMap
 } {
+  const [t] = useEditorI18n()
   const { editor } = useEditorContext()
   const formulaContext = getFormulaContext(editor)
   const { isNew, parentId, data, updateAttributeData, title } = options
@@ -162,16 +163,21 @@ export function useSpreadsheet(options: {
   )
 
   const updateColumn = React.useCallback(
-    (column: SpreadsheetColumn): void => {
+    (column: SpreadsheetColumn): string | undefined => {
       const oldColumns = columns.filter(c => c.uuid !== column.uuid)
+      if (column.title && oldColumns.some(c => c.title === column.title)) {
+        return `'${column.title}' ${t('spreadsheet.column.name_used')}`
+      } else if (column.title && column.title === title) {
+        return `'${column.title}' ${t('spreadsheet.column.name_used')}`
+      }
       updateSpreadsheetAttributes(
         [...oldColumns.slice(0, column.sort), column, ...oldColumns.slice(column.sort)].map((c, i) => ({
           ...c,
           sort: i
         }))
       )
     },
-    [columns, updateSpreadsheetAttributes]
+    [columns, updateSpreadsheetAttributes, title, t]
   )
 
   const addColumn = React.useCallback(