import { defineCellType } from '../../types';
import { ImageView } from './View';
import { ImageEdit } from './Edit';

export { ImageView, ImageEdit };

export const imageCellType = defineCellType<string | null>({
  type: 'image',
  ViewComponent: ImageView,
  EditComponent: ImageEdit,
  serialize: (value) => value ?? '',
  clearable: true,
  showEditWhenFocused: true,
  // Returning undefined blocks all key presses from starting type-to-edit, but
  // the presence of the function sets the :typeToEdit CSS modifier which keeps
  // the selection borders visible while the cell is in edit mode (double border).
  onTypeToEdit: () => undefined,
});
