pixel-react 1.4.2 → 1.4.4

package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts

@@ -9,750 +9,747 @@ import {
   EntireColumnsSelection,
   EntireRowsSelection,
 } from './selection';
-import { Model, createFormulaParser } from './engine';
 
 export function applyBoldToCells(
-    currentData: Matrix.Matrix<Types.CellBase<any>>,
-    selectedRange: PointRange
-  ): Matrix.Matrix<Types.CellBase<any>> {
-    if (!selectedRange) {
-      return currentData;
-    }
-  
-    const { start, end } = selectedRange;
-  
-    let updatedData = currentData;
-  
-    for (let row = start.row; row <= end.row; row++) {
-      for (let col = start.column; col <= end.column; col++) {
-        const currentCell = Matrix.get({ row, column: col }, updatedData);
-  
-        if (!currentCell) {
-          continue;
-        }
-  
-        const updatedCell = {
-          ...currentCell,
-          style: {
-            ...currentCell.style,
-            fontWeight: 'bold',
-          },
-        };
-  
-        updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
+  currentData: Matrix.Matrix<Types.CellBase<any>>,
+  selectedRange: PointRange
+): Matrix.Matrix<Types.CellBase<any>> {
+  if (!selectedRange) {
+    return currentData;
+  }
+
+  const { start, end } = selectedRange;
+
+  let updatedData = currentData;
+
+  for (let row = start.row; row <= end.row; row++) {
+    for (let col = start.column; col <= end.column; col++) {
+      const currentCell = Matrix.get({ row, column: col }, updatedData);
+
+      if (!currentCell) {
+        continue;
       }
+
+      const updatedCell = {
+        ...currentCell,
+        style: {
+          ...currentCell.style,
+          fontWeight: 'bold',
+        },
+      };
+
+      updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
     }
-  
-    return updatedData;
   }
-  
-  export function applyItalicToCells(
-    currentData: Matrix.Matrix<Types.CellBase<any>>,
-    selectedRange: PointRange
-  ): Matrix.Matrix<Types.CellBase<any>> {
-    if (!selectedRange) {
-      return currentData;
+
+  return updatedData;
+}
+
+export function applyItalicToCells(
+  currentData: Matrix.Matrix<Types.CellBase<any>>,
+  selectedRange: PointRange
+): Matrix.Matrix<Types.CellBase<any>> {
+  if (!selectedRange) {
+    return currentData;
+  }
+
+  const { start, end } = selectedRange;
+
+  let updatedData = currentData;
+
+  for (let row = start.row; row <= end.row; row++) {
+    for (let col = start.column; col <= end.column; col++) {
+      const currentCell = Matrix.get({ row, column: col }, updatedData);
+
+      if (!currentCell) {
+        continue;
+      }
+
+      const updatedCell = {
+        ...currentCell,
+        style: {
+          ...currentCell.style,
+          fontStyle: 'italic',
+        },
+      };
+
+      updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
     }
-  
-    const { start, end } = selectedRange;
-  
-    let updatedData = currentData;
-  
-    for (let row = start.row; row <= end.row; row++) {
-      for (let col = start.column; col <= end.column; col++) {
-        const currentCell = Matrix.get({ row, column: col }, updatedData);
-  
-        if (!currentCell) {
-          continue;
-        }
-  
-        const updatedCell = {
-          ...currentCell,
-          style: {
-            ...currentCell.style,
-            fontStyle: 'italic',
-          },
-        };
-  
-        updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
+  }
+
+  return updatedData;
+}
+
+export function applyFontFamily(
+  currentData: Matrix.Matrix<Types.CellBase<any>>,
+  selectedRange: PointRange,
+  value: string
+): Matrix.Matrix<Types.CellBase<any>> {
+  if (!selectedRange) {
+    return currentData;
+  }
+
+  const { start, end } = selectedRange;
+
+  let updatedData = currentData;
+
+  for (let row = start.row; row <= end.row; row++) {
+    for (let col = start.column; col <= end.column; col++) {
+      const currentCell = Matrix.get({ row, column: col }, updatedData);
+
+      if (!currentCell) {
+        continue;
       }
+
+      let updatedCell = {
+        ...currentCell,
+        style: {
+          ...currentCell.style,
+          fontFamily: value,
+        },
+      };
+
+      updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
     }
-  
-    return updatedData;
   }
-  
-  export function applyFontFamily(
-    currentData: Matrix.Matrix<Types.CellBase<any>>,
-    selectedRange: PointRange,
-    value: string
-  ): Matrix.Matrix<Types.CellBase<any>> {
-    if (!selectedRange) {
-      return currentData;
+
+  return updatedData;
+}
+
+export function applyFontSize(
+  currentData: Matrix.Matrix<Types.CellBase<any>>,
+  selectedRange: PointRange,
+  value: string
+): Matrix.Matrix<Types.CellBase<any>> {
+  if (!selectedRange) {
+    return currentData;
+  }
+
+  const conversion = Number(value);
+
+  if (isNaN(conversion)) {
+    return currentData;
+  }
+
+  const fontSizeInPx = convertPtToPx(conversion);
+
+  const { start, end } = selectedRange;
+
+  let updatedData = currentData;
+
+  for (let row = start.row; row <= end.row; row++) {
+    for (let col = start.column; col <= end.column; col++) {
+      const currentCell = Matrix.get({ row, column: col }, updatedData);
+
+      if (!currentCell) {
+        continue;
+      }
+
+      let updatedCell = {
+        ...currentCell,
+        style: {
+          ...currentCell.style,
+          fontSize: fontSizeInPx,
+        },
+      };
+
+      updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
     }
-  
-    const { start, end } = selectedRange;
-  
-    let updatedData = currentData;
-  
-    for (let row = start.row; row <= end.row; row++) {
-      for (let col = start.column; col <= end.column; col++) {
-        const currentCell = Matrix.get({ row, column: col }, updatedData);
-  
-        if (!currentCell) {
-          continue;
-        }
-  
-        let updatedCell = {
-          ...currentCell,
-          style: {
+  }
+
+  return updatedData;
+}
+
+export function applyBorderToCells(
+  currentData: Matrix.Matrix<Types.CellBase<any>>,
+  selectedRange: PointRange,
+  value: string,
+  color: string
+): Matrix.Matrix<Types.CellBase<any>> {
+  if (!selectedRange) {
+    return currentData;
+  }
+
+  const { start, end } = selectedRange;
+
+  let updatedData = currentData;
+
+  for (let row = start.row; row <= end.row; row++) {
+    for (let col = start.column; col <= end.column; col++) {
+      const currentCell = Matrix.get({ row, column: col }, updatedData);
+
+      if (!currentCell) {
+        continue;
+      }
+
+      let updatedCell = { ...currentCell };
+
+      switch (value) {
+        case 'border-all-sides':
+          updatedCell.style = {
             ...currentCell.style,
-            fontFamily: value,
-          },
-        };
-  
-        updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
+            border: `2px solid ${color}`,
+          };
+          break;
+        case 'border-none':
+          updatedCell.style = {
+            ...currentCell.style,
+            border: `1px solid var(--toggle-strip-color)`,
+          };
+          break;
+        case 'border-right':
+          updatedCell.style = {
+            ...currentCell.style,
+            borderRight: `2px solid ${color}`,
+          };
+          break;
+        case 'border-left':
+          updatedCell.style = {
+            ...currentCell.style,
+            borderLeft: `2px solid ${color}`,
+          };
+          break;
+        case 'border-top':
+          updatedCell.style = {
+            ...currentCell.style,
+            borderTop: `2px solid ${color}`,
+          };
+          break;
+        case 'border-bottom':
+          updatedCell.style = {
+            ...currentCell.style,
+            borderBottom: `2px solid ${color}`,
+          };
+          break;
+        default:
+          break;
       }
+
+      updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
     }
-  
-    return updatedData;
   }
-  
-  export function applyFontSize(
-    currentData: Matrix.Matrix<Types.CellBase<any>>,
-    selectedRange: PointRange,
-    value: string
-  ): Matrix.Matrix<Types.CellBase<any>> {
-    const conversion = Number(value);
-  
-    if (isNaN(conversion)) {
-      return currentData;
-    }
-  
-    const fontSizeInPx = convertPtToPx(conversion);
-  
-    if (!selectedRange) {
-      return currentData;
+
+  return updatedData;
+}
+
+export function applyTextAlign(
+  currentData: Matrix.Matrix<Types.CellBase<any>>,
+  selectedRange: PointRange,
+  value: string
+): Matrix.Matrix<Types.CellBase<any>> {
+  if (!selectedRange) {
+    return currentData;
+  }
+
+  const { start, end } = selectedRange;
+
+  let updatedData = currentData;
+
+  for (let row = start.row; row <= end.row; row++) {
+    for (let col = start.column; col <= end.column; col++) {
+      const currentCell = Matrix.get({ row, column: col }, updatedData);
+
+      if (!currentCell) {
+        continue;
+      }
+
+      let updatedCell = {
+        ...currentCell,
+        style: {
+          ...currentCell.style,
+          textAlign: value as TextAlign,
+        },
+      };
+
+      updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
     }
-  
-    const { start, end } = selectedRange;
-  
-    let updatedData = currentData;
-  
-    for (let row = start.row; row <= end.row; row++) {
-      for (let col = start.column; col <= end.column; col++) {
-        const currentCell = Matrix.get({ row, column: col }, updatedData);
-  
-        if (!currentCell) {
-          continue;
-        }
-  
-        let updatedCell = {
+  }
+
+  return updatedData;
+}
+
+export function applyUnderlineToCells(
+  currentData: Matrix.Matrix<Types.CellBase<any>>,
+  selectedRange: PointRange,
+  value: string,
+  active: boolean
+): Matrix.Matrix<Types.CellBase<any>> {
+  const { start, end } = selectedRange;
+
+  let updatedData = currentData;
+
+  for (let row = start.row; row <= end.row; row++) {
+    for (let col = start.column; col <= end.column; col++) {
+      const currentCell = Matrix.get({ row, column: col }, updatedData);
+
+      if (!currentCell) {
+        continue;
+      }
+
+      let updatedCell;
+      if (!active) {
+        updatedCell = {
           ...currentCell,
           style: {
             ...currentCell.style,
-            fontSize: fontSizeInPx,
+            textDecoration: 'none',
+            textDecorationStyle: 'none' as TextDecorationStyle,
           },
         };
-  
-        updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
-      }
-    }
-  
-    return updatedData;
-  }
-  
-  export function applyBorderToCells(
-    currentData: Matrix.Matrix<Types.CellBase<any>>,
-    selectedRange: PointRange,
-    value: string,
-    color: string
-  ): Matrix.Matrix<Types.CellBase<any>> {
-    if (!selectedRange) {
-      return currentData;
-    }
-  
-    const { start, end } = selectedRange;
-  
-    let updatedData = currentData;
-  
-    for (let row = start.row; row <= end.row; row++) {
-      for (let col = start.column; col <= end.column; col++) {
-        const currentCell = Matrix.get({ row, column: col }, updatedData);
-  
-        if (!currentCell) {
-          continue;
-        }
-  
-        let updatedCell = { ...currentCell };
-  
-        switch (value) {
-          case 'border-all-sides':
-            updatedCell.style = {
-              ...currentCell.style,
-              border: `2px solid ${color}`,
-            };
-            break;
-          case 'border-none':
-            updatedCell.style = {
-              ...currentCell.style,
-              border: `1px solid var(--toggle-strip-color)`,
-            };
-            break;
-          case 'border-right':
-            updatedCell.style = {
-              ...currentCell.style,
-              borderRight: `2px solid ${color}`,
-            };
-            break;
-          case 'border-left':
-            updatedCell.style = {
-              ...currentCell.style,
-              borderLeft: `2px solid ${color}`,
-            };
-            break;
-          case 'border-top':
-            updatedCell.style = {
-              ...currentCell.style,
-              borderTop: `2px solid ${color}`,
-            };
-            break;
-          case 'border-bottom':
-            updatedCell.style = {
-              ...currentCell.style,
-              borderBottom: `2px solid ${color}`,
-            };
-            break;
-          default:
-            break;
-        }
-  
-        updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
-      }
-    }
-  
-    return updatedData;
-  }
-  
-  export function applyTextAlign(
-    currentData: Matrix.Matrix<Types.CellBase<any>>,
-    selectedRange: PointRange,
-    value: string
-  ): Matrix.Matrix<Types.CellBase<any>> {
-    if (!selectedRange) {
-      return currentData;
-    }
-  
-    const { start, end } = selectedRange;
-  
-    let updatedData = currentData;
-  
-    for (let row = start.row; row <= end.row; row++) {
-      for (let col = start.column; col <= end.column; col++) {
-        const currentCell = Matrix.get({ row, column: col }, updatedData);
-  
-        if (!currentCell) {
-          continue;
-        }
-  
-        let updatedCell = {
+      } else {
+        updatedCell = {
           ...currentCell,
           style: {
             ...currentCell.style,
-            textAlign: value as TextAlign,
+            textDecoration: value === 'double_border' ? 'underline' : value,
+            textDecorationStyle:
+              value === 'double_border'
+                ? 'double'
+                : ('none' as TextDecorationStyle),
           },
         };
-  
-        updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
       }
+
+      updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
     }
-  
-    return updatedData;
   }
-  
-  export function applyUnderlineToCells(
-    currentData: Matrix.Matrix<Types.CellBase<any>>,
-    selectedRange: PointRange,
-    value: string,
-    active: boolean
-  ): Matrix.Matrix<Types.CellBase<any>> {
-    const { start, end } = selectedRange;
-  
-    let updatedData = currentData;
-  
-    for (let row = start.row; row <= end.row; row++) {
-      for (let col = start.column; col <= end.column; col++) {
-        const currentCell = Matrix.get({ row, column: col }, updatedData);
-  
-        if (!currentCell) {
-          continue;
-        }
-  
-        let updatedCell;
-        if (!active) {
-          updatedCell = {
-            ...currentCell,
-            style: {
-              ...currentCell.style,
-              textDecoration: 'none',
-              textDecorationStyle: 'none' as TextDecorationStyle,
-            },
-          };
-        } else {
-          updatedCell = {
-            ...currentCell,
-            style: {
-              ...currentCell.style,
-              textDecoration: value === 'double_border' ? 'underline' : value,
-              textDecorationStyle:
-                value === 'double_border'
-                  ? 'double'
-                  : ('none' as TextDecorationStyle),
-            },
-          };
-        }
-  
-        updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
-      }
-    }
-  
-    return updatedData;
+
+  return updatedData;
+}
+
+export function isValidHexColor(color: string): boolean {
+  if (color.length !== 6) {
+    return false;
   }
-  
-  export function isValidHexColor(color: string): boolean {
-    if (color.length !== 6) {
+
+  const hexChars = '0123456789ABCDEFabcdef';
+  for (let i = 1; i < color.length; i++) {
+    if (!hexChars.includes(color[i] as string)) {
       return false;
     }
-  
-    const hexChars = '0123456789ABCDEFabcdef';
-    for (let i = 1; i < color.length; i++) {
-      if (!hexChars.includes(color[i] as string)) {
-        return false;
+  }
+
+  return true;
+}
+
+export function applyColorToCells(
+  currentData: Matrix.Matrix<Types.CellBase<any>>,
+  selectedRange: PointRange | null,
+  color: string
+): Matrix.Matrix<Types.CellBase<any>> {
+  if (!selectedRange) {
+    return currentData;
+  }
+
+  const { start, end } = selectedRange;
+
+  let updatedData = currentData;
+
+  const isHex = isValidHexColor(color);
+
+  const applyColor = isHex ? `#${color}` : color;
+
+  for (let row = start.row; row <= end.row; row++) {
+    for (let col = start.column; col <= end.column; col++) {
+      const currentCell = Matrix.get({ row, column: col }, updatedData);
+
+      if (!currentCell) {
+        continue;
       }
+
+      const updatedCell = {
+        ...currentCell,
+        style: {
+          ...currentCell.style,
+          color: applyColor,
+        },
+      };
+
+      updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
     }
-  
-    return true;
   }
-  
-  export function applyColorToCells(
-    currentData: Matrix.Matrix<Types.CellBase<any>>,
-    selectedRange: PointRange | null,
-    color: string
-  ): Matrix.Matrix<Types.CellBase<any>> {
-    if (!selectedRange) {
-      return currentData;
-    }
-  
+
+  return updatedData;
+}
+
+export function applyBackgroundColorToCells(
+  currentData: Matrix.Matrix<Types.CellBase<any>>,
+  selectedRange: PointRange | null,
+  backgroundColor: string
+): Matrix.Matrix<Types.CellBase<any>> {
+  if (selectedRange) {
     const { start, end } = selectedRange;
-  
+
     let updatedData = currentData;
-  
-    const isHex = isValidHexColor(color);
-  
-    const applyColor = isHex ? `#${color}` : color;
-  
+
+    const isHex = isValidHexColor(backgroundColor);
+
+    const applyColor = isHex ? `#${backgroundColor}` : backgroundColor;
+
     for (let row = start.row; row <= end.row; row++) {
       for (let col = start.column; col <= end.column; col++) {
         const currentCell = Matrix.get({ row, column: col }, updatedData);
-  
+
         if (!currentCell) {
           continue;
         }
-  
+
         const updatedCell = {
           ...currentCell,
           style: {
             ...currentCell.style,
-            color: applyColor,
+            backgroundColor: applyColor,
           },
         };
-  
-        updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
+
+        updatedData = Matrix.set(
+          { row, column: col },
+          updatedCell,
+          updatedData
+        );
       }
     }
-  
+
     return updatedData;
   }
-  
-  export function applyBackgroundColorToCells(
-    currentData: Matrix.Matrix<Types.CellBase<any>>,
-    selectedRange: PointRange | null,
-    backgroundColor: string
-  ): Matrix.Matrix<Types.CellBase<any>> {
-    if (selectedRange) {
-      const { start, end } = selectedRange;
-  
-      let updatedData = currentData;
-  
-      const isHex = isValidHexColor(backgroundColor);
-  
-      const applyColor = isHex ? `#${backgroundColor}` : backgroundColor;
-  
-      for (let row = start.row; row <= end.row; row++) {
-        for (let col = start.column; col <= end.column; col++) {
-          const currentCell = Matrix.get({ row, column: col }, updatedData);
-  
-          if (!currentCell) {
-            continue;
-          }
-  
-          const updatedCell = {
-            ...currentCell,
-            style: {
-              ...currentCell.style,
-              backgroundColor: applyColor,
-            },
-          };
-  
-          updatedData = Matrix.set(
-            { row, column: col },
-            updatedCell,
-            updatedData
-          );
-        }
-      }
-  
-      return updatedData;
-    }
-    return currentData;
+  return currentData;
+}
+
+export function edit(state: Types.StoreState): Types.StoreState {
+  if (isActiveReadOnly(state)) {
+    return state;
   }
-  
-  export function edit(state: Types.StoreState): Types.StoreState {
-    if (isActiveReadOnly(state)) {
-      return state;
+  return { ...state, mode: 'edit' };
+}
+
+export function clear(state: Types.StoreState): Types.StoreState {
+  if (!state.active) {
+    return state;
+  }
+
+  const canClearCell = (cell: Types.CellBase | undefined) =>
+    cell && !cell.readOnly;
+  const clearCell = (cell: Types.CellBase | undefined) => {
+    if (!canClearCell(cell)) {
+      return cell;
     }
-    return { ...state, mode: 'edit' };
+    return Object.assign({}, cell, { value: undefined });
+  };
+
+  const selectedRange = state.selected.toRange(state.model.data);
+
+  const changes: Types.CommitChanges = [];
+  let newData = state.model.data;
+
+  for (const point of selectedRange || []) {
+    const cell = Matrix.get(point, state.model.data);
+    const clearedCell = clearCell(cell);
+    changes.push({
+      prevCell: cell || null,
+      nextCell: clearedCell || null,
+    });
+    newData = Matrix.set(point, clearedCell, newData);
   }
-  
-  export function clear(state: Types.StoreState): Types.StoreState {
+
+  return {
+    ...state,
+    ...commit(changes),
+  };
+}
+
+export function blur(state: Types.StoreState): Types.StoreState {
+  return { ...state, active: null, selected: new EmptySelection() };
+}
+
+export function view(state: Types.StoreState): Types.StoreState {
+  return { ...state, mode: 'view' };
+}
+
+export function commit(
+  changes: Types.CommitChanges
+): Partial<Types.StoreState> {
+  return { lastCommit: changes };
+}
+
+export const go =
+  (rowDelta: number, columnDelta: number): KeyDownHandler =>
+  (state) => {
     if (!state.active) {
-      return state;
+      return;
     }
-  
-    const canClearCell = (cell: Types.CellBase | undefined) =>
-      cell && !cell.readOnly;
-    const clearCell = (cell: Types.CellBase | undefined) => {
-      if (!canClearCell(cell)) {
-        return cell;
-      }
-      return Object.assign({}, cell, { value: undefined });
+    const size = Matrix.getSize(state.model.data);
+    const newColumn = state.active.column + columnDelta;
+    const shouldWrap = newColumn >= size.columns;
+    const nextActive = {
+      row: state.active.row + rowDelta + (shouldWrap ? 1 : 0),
+      column: (state.active.column + columnDelta) % size.columns,
     };
-  
-    const selectedRange = state.selected.toRange(state.model.data);
-  
-    const changes: Types.CommitChanges = [];
-    let newData = state.model.data;
-  
-    for (const point of selectedRange || []) {
-      const cell = Matrix.get(point, state.model.data);
-      const clearedCell = clearCell(cell);
-      changes.push({
-        prevCell: cell || null,
-        nextCell: clearedCell || null,
-      });
-      newData = Matrix.set(point, clearedCell, newData);
+    if (!Matrix.has(nextActive, state.model.data)) {
+      return { ...state, mode: 'view' };
     }
-  
     return {
       ...state,
-      model: new Model(createFormulaParser, newData),
-      ...commit(changes),
-    };
-  }
-  
-  export function blur(state: Types.StoreState): Types.StoreState {
-    return { ...state, active: null, selected: new EmptySelection() };
-  }
-  
-  export function view(state: Types.StoreState): Types.StoreState {
-    return { ...state, mode: 'view' };
-  }
-  
-  export function commit(changes: Types.CommitChanges): Partial<Types.StoreState> {
-    return { lastCommit: changes };
-  }
-  
-  // Utility
-  
-  export const go =
-    (rowDelta: number, columnDelta: number): KeyDownHandler =>
-    (state) => {
-      if (!state.active) {
-        return;
-      }
-      const size = Matrix.getSize(state.model.data);
-      const newColumn = state.active.column + columnDelta;
-      const shouldWrap = newColumn >= size.columns;
-      const nextActive = {
-        row: state.active.row + rowDelta + (shouldWrap ? 1 : 0),
-        column: (state.active.column + columnDelta) % size.columns,
-      };
-      if (!Matrix.has(nextActive, state.model.data)) {
-        return { ...state, mode: 'view' };
-      }
-      return {
-        ...state,
-        active: nextActive,
-        selected: new RangeSelection(new PointRange(nextActive, nextActive)),
-        mode: 'view',
-      };
+      active: nextActive,
+      selected: new RangeSelection(new PointRange(nextActive, nextActive)),
+      mode: 'view',
     };
-  
-  function convertPtToPx(pt: number): string {
-    const px = pt * 1.33;
-    return `${Math.round(px)}px`;
-  }
-  
-  // Key Bindings
-  
-  type TextDecorationStyle = 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy';
-  
-  type TextAlign = 'left' | 'center' | 'right';
-  
-  export type KeyDownHandler = (
-    state: Types.StoreState,
-    event: React.KeyboardEvent
-  ) => Types.StoreState | void;
-  
-  type KeyDownHandlers = {
-    [K in string]: KeyDownHandler | undefined;
-  };
-  
-  const keyDownHandlers: KeyDownHandlers = {
-    ArrowUp: go(-1, 0),
-    ArrowDown: go(+1, 0),
-    ArrowLeft: go(0, -1),
-    ArrowRight: go(0, +1),
-    Tab: go(0, +1),
-    Enter: edit,
-    Backspace: clear,
-    Delete: clear,
-    Escape: blur,
-  };
-  
-  const editKeyDownHandlers: KeyDownHandlers = {
-    Escape: view,
-    Tab: keyDownHandlers.Tab,
-    Enter: keyDownHandlers.ArrowDown,
   };
-  
-  const editShiftKeyDownHandlers: KeyDownHandlers = {
-    Tab: go(0, -1),
-  };
-  
-  export enum Direction {
-    Left = 'Left',
-    Right = 'Right',
-    Top = 'Top',
-    Bottom = 'Bottom',
-  }
-  
-  const shiftKeyDownHandlers: KeyDownHandlers = {
-    ArrowUp: (state) => ({
-      ...state,
-      selected: modifyEdge(
-        state.selected,
-        state.active,
-        state.model.data,
-        Direction.Top
-      ),
-    }),
-    ArrowDown: (state) => ({
-      ...state,
-      selected: modifyEdge(
-        state.selected,
-        state.active,
-        state.model.data,
-        Direction.Bottom
-      ),
-    }),
-    ArrowLeft: (state) => ({
-      ...state,
-      selected: modifyEdge(
-        state.selected,
-        state.active,
-        state.model.data,
-        Direction.Left
-      ),
-    }),
-    ArrowRight: (state) => ({
-      ...state,
-      selected: modifyEdge(
-        state.selected,
-        state.active,
-        state.model.data,
-        Direction.Right
-      ),
-    }),
-    Tab: go(0, -1),
-  };
-  
-  const shiftMetaKeyDownHandlers: KeyDownHandlers = {};
-  const metaKeyDownHandlers: KeyDownHandlers = {};
-  
-  export function getKeyDownHandler(
-    state: Types.StoreState,
-    event: React.KeyboardEvent
-  ): KeyDownHandler | undefined {
-    const { key } = event;
-    let handlers;
-    // Order matters
-    if (state.mode === 'edit') {
-      if (event.shiftKey) {
-        handlers = editShiftKeyDownHandlers;
-      } else {
-        handlers = editKeyDownHandlers;
-      }
-    } else if (event.shiftKey && event.metaKey) {
-      handlers = shiftMetaKeyDownHandlers;
-    } else if (event.shiftKey) {
-      handlers = shiftKeyDownHandlers;
-    } else if (event.metaKey) {
-      handlers = metaKeyDownHandlers;
+
+function convertPtToPx(pt: number): string {
+  const px = pt * 1.33;
+  return `${Math.round(px)}px`;
+}
+
+// Key Bindings
+
+type TextDecorationStyle = 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy';
+
+type TextAlign = 'left' | 'center' | 'right';
+
+export type KeyDownHandler = (
+  state: Types.StoreState,
+  event: React.KeyboardEvent
+) => Types.StoreState | void;
+
+type KeyDownHandlers = {
+  [K in string]: KeyDownHandler | undefined;
+};
+
+const keyDownHandlers: KeyDownHandlers = {
+  ArrowUp: go(-1, 0),
+  ArrowDown: go(+1, 0),
+  ArrowLeft: go(0, -1),
+  ArrowRight: go(0, +1),
+  Tab: go(0, +1),
+  Enter: edit,
+  Backspace: clear,
+  Delete: clear,
+  Escape: blur,
+};
+
+const editKeyDownHandlers: KeyDownHandlers = {
+  Escape: view,
+  Tab: keyDownHandlers.Tab,
+  Enter: keyDownHandlers.ArrowDown,
+};
+
+const editShiftKeyDownHandlers: KeyDownHandlers = {
+  Tab: go(0, -1),
+};
+
+export enum Direction {
+  Left = 'Left',
+  Right = 'Right',
+  Top = 'Top',
+  Bottom = 'Bottom',
+}
+
+const shiftKeyDownHandlers: KeyDownHandlers = {
+  ArrowUp: (state) => ({
+    ...state,
+    selected: modifyEdge(
+      state.selected,
+      state.active,
+      state.model.data,
+      Direction.Top
+    ),
+  }),
+  ArrowDown: (state) => ({
+    ...state,
+    selected: modifyEdge(
+      state.selected,
+      state.active,
+      state.model.data,
+      Direction.Bottom
+    ),
+  }),
+  ArrowLeft: (state) => ({
+    ...state,
+    selected: modifyEdge(
+      state.selected,
+      state.active,
+      state.model.data,
+      Direction.Left
+    ),
+  }),
+  ArrowRight: (state) => ({
+    ...state,
+    selected: modifyEdge(
+      state.selected,
+      state.active,
+      state.model.data,
+      Direction.Right
+    ),
+  }),
+  Tab: go(0, -1),
+};
+
+const shiftMetaKeyDownHandlers: KeyDownHandlers = {};
+const metaKeyDownHandlers: KeyDownHandlers = {};
+
+export function getKeyDownHandler(
+  state: Types.StoreState,
+  event: React.KeyboardEvent
+): KeyDownHandler | undefined {
+  const { key } = event;
+  let handlers;
+  // Order matters
+  if (state.mode === 'edit') {
+    if (event.shiftKey) {
+      handlers = editShiftKeyDownHandlers;
     } else {
-      handlers = keyDownHandlers;
+      handlers = editKeyDownHandlers;
     }
-  
-    return handlers[key];
+  } else if (event.shiftKey && event.metaKey) {
+    handlers = shiftMetaKeyDownHandlers;
+  } else if (event.shiftKey) {
+    handlers = shiftKeyDownHandlers;
+  } else if (event.metaKey) {
+    handlers = metaKeyDownHandlers;
+  } else {
+    handlers = keyDownHandlers;
   }
-  
-  /** Returns whether the reducer has a handler for the given keydown event */
-  export function hasKeyDownHandler(
-    state: Types.StoreState,
-    event: React.KeyboardEvent
-  ): boolean {
-    return getKeyDownHandler(state, event) !== undefined;
+
+  return handlers[key];
+}
+
+/** Returns whether the reducer has a handler for the given keydown event */
+export function hasKeyDownHandler(
+  state: Types.StoreState,
+  event: React.KeyboardEvent
+): boolean {
+  return getKeyDownHandler(state, event) !== undefined;
+}
+
+/** Returns whether the active cell is read only */
+export function isActiveReadOnly(state: Types.StoreState): boolean {
+  const activeCell = getActive(state);
+  return Boolean(activeCell?.readOnly);
+}
+
+/** Gets active cell from given state */
+export function getActive(state: Types.StoreState): Types.CellBase | null {
+  const activeCell = state.active && Matrix.get(state.active, state.model.data);
+  return activeCell || null;
+}
+
+/** Modify given edge according to given active point and data */
+export function modifyEdge<T extends Selection>(
+  selection: T,
+  active: Point.Point | null,
+  data: Matrix.Matrix<unknown>,
+  direction: Direction
+): T {
+  if (!active) {
+    return selection;
   }
-  
-  /** Returns whether the active cell is read only */
-  export function isActiveReadOnly(state: Types.StoreState): boolean {
-    const activeCell = getActive(state);
-    return Boolean(activeCell?.readOnly);
+  if (selection instanceof RangeSelection) {
+    const nextSelection = modifyRangeSelectionEdge(
+      selection,
+      active,
+      data,
+      direction
+    );
+    // @ts-expect-error
+    return nextSelection;
   }
-  
-  /** Gets active cell from given state */
-  export function getActive(state: Types.StoreState): Types.CellBase | null {
-    const activeCell = state.active && Matrix.get(state.active, state.model.data);
-    return activeCell || null;
+  if (selection instanceof EntireColumnsSelection) {
+    // @ts-expect-error
+    return modifyEntireColumnsSelection(selection, active, data, direction);
   }
-  
-  /** Modify given edge according to given active point and data */
-  export function modifyEdge<T extends Selection>(
-    selection: T,
-    active: Point.Point | null,
-    data: Matrix.Matrix<unknown>,
-    direction: Direction
-  ): T {
-    if (!active) {
-      return selection;
-    }
-    if (selection instanceof RangeSelection) {
-      const nextSelection = modifyRangeSelectionEdge(
-        selection,
-        active,
-        data,
-        direction
-      );
-      // @ts-expect-error
-      return nextSelection;
-    }
-    if (selection instanceof EntireColumnsSelection) {
-      // @ts-expect-error
-      return modifyEntireColumnsSelection(selection, active, data, direction);
-    }
-    if (selection instanceof EntireRowsSelection) {
-      // @ts-expect-error
-      return modifyEntireRowsSelection(selection, active, data, direction);
-    }
+  if (selection instanceof EntireRowsSelection) {
+    // @ts-expect-error
+    return modifyEntireRowsSelection(selection, active, data, direction);
+  }
+  return selection;
+}
+
+export function modifyRangeSelectionEdge(
+  rangeSelection: RangeSelection,
+  active: Point.Point,
+  data: Matrix.Matrix<unknown>,
+  edge: Direction
+): RangeSelection {
+  const field =
+    edge === Direction.Left || edge === Direction.Right ? 'column' : 'row';
+
+  const key =
+    edge === Direction.Left || edge === Direction.Top ? 'start' : 'end';
+  const delta = key === 'start' ? -1 : 1;
+
+  const edgeOffsets = rangeSelection.range.has({
+    ...active,
+    [field]: active[field] + delta * -1,
+  });
+
+  const keyToModify = edgeOffsets ? (key === 'start' ? 'end' : 'start') : key;
+
+  const nextRange = new PointRange(
+    rangeSelection.range.start,
+    rangeSelection.range.end
+  );
+
+  nextRange[keyToModify][field] += delta;
+
+  const nextSelection = new RangeSelection(nextRange).normalizeTo(data);
+
+  return nextSelection;
+}
+
+export function modifyEntireRowsSelection(
+  selection: EntireRowsSelection,
+  active: Point.Point,
+  data: Matrix.Matrix<unknown>,
+  edge: Direction
+): EntireRowsSelection {
+  if (edge === Direction.Left || edge === Direction.Right) {
     return selection;
   }
-  
-  export function modifyRangeSelectionEdge(
-    rangeSelection: RangeSelection,
-    active: Point.Point,
-    data: Matrix.Matrix<unknown>,
-    edge: Direction
-  ): RangeSelection {
-    const field =
-      edge === Direction.Left || edge === Direction.Right ? 'column' : 'row';
-  
-    const key =
-      edge === Direction.Left || edge === Direction.Top ? 'start' : 'end';
-    const delta = key === 'start' ? -1 : 1;
-  
-    const edgeOffsets = rangeSelection.range.has({
-      ...active,
-      [field]: active[field] + delta * -1,
-    });
-  
-    const keyToModify = edgeOffsets ? (key === 'start' ? 'end' : 'start') : key;
-  
-    const nextRange = new PointRange(
-      rangeSelection.range.start,
-      rangeSelection.range.end
-    );
-  
-    nextRange[keyToModify][field] += delta;
-  
-    const nextSelection = new RangeSelection(nextRange).normalizeTo(data);
-  
-    return nextSelection;
+  const delta = edge === Direction.Top ? -1 : 1;
+  const property = edge === Direction.Top ? 'start' : 'end';
+  const oppositeProperty = property === 'start' ? 'end' : 'start';
+  const newSelectionData = { ...selection };
+  if (
+    edge === Direction.Top
+      ? selection.end > active.row
+      : selection.start < active.row
+  ) {
+    newSelectionData[oppositeProperty] = selection[oppositeProperty] + delta;
+  } else {
+    newSelectionData[property] = selection[property] + delta;
   }
-  
-  export function modifyEntireRowsSelection(
-    selection: EntireRowsSelection,
-    active: Point.Point,
-    data: Matrix.Matrix<unknown>,
-    edge: Direction
-  ): EntireRowsSelection {
-    if (edge === Direction.Left || edge === Direction.Right) {
-      return selection;
-    }
-    const delta = edge === Direction.Top ? -1 : 1;
-    const property = edge === Direction.Top ? 'start' : 'end';
-    const oppositeProperty = property === 'start' ? 'end' : 'start';
-    const newSelectionData = { ...selection };
-    if (
-      edge === Direction.Top
-        ? selection.end > active.row
-        : selection.start < active.row
-    ) {
-      newSelectionData[oppositeProperty] = selection[oppositeProperty] + delta;
-    } else {
-      newSelectionData[property] = selection[property] + delta;
-    }
-    const nextSelection = new EntireRowsSelection(
-      Math.max(newSelectionData.start, 0),
-      Math.max(newSelectionData.end, 0)
-    );
-    return nextSelection.normalizeTo(data);
+  const nextSelection = new EntireRowsSelection(
+    Math.max(newSelectionData.start, 0),
+    Math.max(newSelectionData.end, 0)
+  );
+  return nextSelection.normalizeTo(data);
+}
+
+export function modifyEntireColumnsSelection(
+  selection: EntireColumnsSelection,
+  active: Point.Point,
+  data: Matrix.Matrix<unknown>,
+  edge: Direction
+): EntireColumnsSelection {
+  if (edge === Direction.Top || edge === Direction.Bottom) {
+    return selection;
   }
-  
-  export function modifyEntireColumnsSelection(
-    selection: EntireColumnsSelection,
-    active: Point.Point,
-    data: Matrix.Matrix<unknown>,
-    edge: Direction
-  ): EntireColumnsSelection {
-    if (edge === Direction.Top || edge === Direction.Bottom) {
-      return selection;
-    }
-    const delta = edge === Direction.Left ? -1 : 1;
-    const property = edge === Direction.Left ? 'start' : 'end';
-    const oppositeProperty = property === 'start' ? 'end' : 'start';
-    const newSelectionData = { ...selection };
-    if (
-      edge === Direction.Left
-        ? selection.end > active.row
-        : selection.start < active.row
-    ) {
-      newSelectionData[oppositeProperty] = selection[oppositeProperty] + delta;
-    } else {
-      newSelectionData[property] = selection[property] + delta;
-    }
-    const nextSelection = new EntireColumnsSelection(
-      Math.max(newSelectionData.start, 0),
-      Math.max(newSelectionData.end, 0)
-    );
-    return nextSelection.normalizeTo(data);
+  const delta = edge === Direction.Left ? -1 : 1;
+  const property = edge === Direction.Left ? 'start' : 'end';
+  const oppositeProperty = property === 'start' ? 'end' : 'start';
+  const newSelectionData = { ...selection };
+  if (
+    edge === Direction.Left
+      ? selection.end > active.row
+      : selection.start < active.row
+  ) {
+    newSelectionData[oppositeProperty] = selection[oppositeProperty] + delta;
+  } else {
+    newSelectionData[property] = selection[property] + delta;
   }
-  
+  const nextSelection = new EntireColumnsSelection(
+    Math.max(newSelectionData.start, 0),
+    Math.max(newSelectionData.end, 0)
+  );
+  return nextSelection.normalizeTo(data);
+}