# Cell Format Editor

Cmd + Option + 1 will bring up the cell format editor

import { CanvasGrid, defaultSpreadsheetTheme } from "@rowsncolumns/spreadsheet"
import { useSpreadsheetState, CellFormatEditor, CellFormatEditorDialog } from "@rowsncolumns/spreadsheet-state"

const App = () => {
  const activeSheetId = 1
  const [theme, onChangeTheme] = useState<SpreadsheetTheme>(
    defaultSpreadsheetTheme
  );
  const {
    activeCell,
    selections,
    theme,
    onMergeCells,
    onChangeFormatting,
    onChangeBorder,
    onRequestFormatCells,
    getUserEnteredFormat,
    getEffectiveValue
  } = useSpreadsheetState({
    ...
  })
  
  const currentCellFormat = useMemo(
    () =>
      getUserEnteredFormat(
        activeSheetId,
        activeCell.rowIndex,
        activeCell.columnIndex
      ),
    [activeSheetId, activeCell, getUserEnteredFormat]
  );
  return (
    <>
      <CanvasGrid
        // Binds to keyboard shortcut and context menu
        onRequestFormatCells={onRequestFormatCells}
      />
      <CellFormatEditorDialog>
        <CellFormatEditor
          sheetId={activeSheetId}
          activeCell={activeCell}
          selections={selections}
          onChangeFormatting={onChangeFormatting}
          cellFormat={currentCellFormat}
          getEffectiveValue={getEffectiveValue}
          onMergeCells={onMergeCells}
          theme={theme}
          onChangeBorder={onChangeBorder}
        />
      </CellFormatEditorDialog>

    </>
  )
}