UPDATE: Adds web app

base/src/lib.rs

@@ -58,3 +58,4 @@ pub mod mock_time;
 pub use model::get_milliseconds_since_epoch;
 pub use model::Model;
 pub use user_model::UserModel;
+pub use user_model::BorderArea;

base/src/new_empty.rs

@@ -353,7 +353,14 @@ impl Model {
         let now = dt.format("%Y-%m-%dT%H:%M:%SZ").to_string();
 
         let mut views = HashMap::new();
-        views.insert(0, WorkbookView { sheet: 0 });
+        views.insert(
+            0,
+            WorkbookView {
+                sheet: 0,
+                window_width: 800,
+                window_height: 600,
+            },
+        );
 
         // String versions of the locale are added here to simplify the serialize/deserialize logic
         let workbook = Workbook {

base/src/types.rs

@@ -33,6 +33,10 @@ pub struct WorkbookSettings {
 pub struct WorkbookView {
     /// The index of the currently selected sheet.
     pub sheet: u32,
+    /// The current width of the window
+    pub window_width: i64,
+    /// The current heigh of the window
+    pub window_height: i64,
 }
 
 /// An internal representation of an IronCalc Workbook

base/src/user_model/common.rs

@@ -2,7 +2,6 @@
 
 use std::{collections::HashMap, fmt::Debug};
 
-use bitcode::{Decode, Encode};
 use serde::{Deserialize, Serialize};
 
 use crate::{
@@ -13,180 +12,35 @@ use crate::{
     },
     model::Model,
     types::{
-        Alignment, BorderItem, BorderStyle, Cell, CellType, Col, HorizontalAlignment, Row,
+        Alignment, BorderItem, BorderStyle, CellType, Col, HorizontalAlignment, SheetProperties,
-        SheetProperties, Style, VerticalAlignment,
+        Style, VerticalAlignment,
     },
     utils::is_valid_hex_color,
 };
 
+use crate::user_model::history::{
+    ColumnData, Diff, DiffList, DiffType, History, QueueDiffs, RowData,
+};
+
 #[derive(Serialize, Deserialize)]
-#[cfg_attr(test, derive(PartialEq, Debug))]
+pub enum BorderType {
-pub struct SelectedView {
+    All,
-    pub sheet: u32,
+    Inner,
-    pub row: i32,
+    Outer,
-    pub column: i32,
+    Top,
-    pub range: [i32; 4],
+    Right,
-    pub top_row: i32,
+    Bottom,
-    pub left_column: i32,
+    Left,
+    CenterH,
+    CenterV,
+    None,
 }
 
-#[derive(Clone, Encode, Decode)]
+/// This is the struct for a border area
-struct RowData {
+#[derive(Serialize, Deserialize)]
-    row: Option<Row>,
+pub struct BorderArea {
-    data: HashMap<i32, Cell>,
+    item: BorderItem,
-}
+    r#type: BorderType,
-
-#[derive(Clone, Encode, Decode)]
-struct ColumnData {
-    column: Option<Col>,
-    data: HashMap<i32, Cell>,
-}
-
-#[derive(Clone, Encode, Decode)]
-enum Diff {
-    // Cell diffs
-    SetCellValue {
-        sheet: u32,
-        row: i32,
-        column: i32,
-        new_value: String,
-        old_value: Box<Option<Cell>>,
-    },
-    CellClearContents {
-        sheet: u32,
-        row: i32,
-        column: i32,
-        old_value: Box<Option<Cell>>,
-    },
-    CellClearAll {
-        sheet: u32,
-        row: i32,
-        column: i32,
-        old_value: Box<Option<Cell>>,
-        old_style: Box<Style>,
-    },
-    SetCellStyle {
-        sheet: u32,
-        row: i32,
-        column: i32,
-        old_value: Box<Style>,
-        new_value: Box<Style>,
-    },
-    // Column and Row diffs
-    SetColumnWidth {
-        sheet: u32,
-        column: i32,
-        new_value: f64,
-        old_value: f64,
-    },
-    SetRowHeight {
-        sheet: u32,
-        row: i32,
-        new_value: f64,
-        old_value: f64,
-    },
-    InsertRow {
-        sheet: u32,
-        row: i32,
-    },
-    DeleteRow {
-        sheet: u32,
-        row: i32,
-        old_data: Box<RowData>,
-    },
-    InsertColumn {
-        sheet: u32,
-        column: i32,
-    },
-    DeleteColumn {
-        sheet: u32,
-        column: i32,
-        old_data: Box<ColumnData>,
-    },
-    SetFrozenRowsCount {
-        sheet: u32,
-        new_value: i32,
-        old_value: i32,
-    },
-    SetFrozenColumnsCount {
-        sheet: u32,
-        new_value: i32,
-        old_value: i32,
-    },
-    DeleteSheet {
-        sheet: u32,
-    },
-    NewSheet {
-        index: u32,
-        name: String,
-    },
-    RenameSheet {
-        index: u32,
-        old_value: String,
-        new_value: String,
-    },
-    SetSheetColor {
-        index: u32,
-        old_value: String,
-        new_value: String,
-    },
-    SetShowGridLines {
-        sheet: u32,
-        old_value: bool,
-        new_value: bool,
-    }, // FIXME: we are missing SetViewDiffs
-}
-
-type DiffList = Vec<Diff>;
-
-#[derive(Default)]
-struct History {
-    undo_stack: Vec<DiffList>,
-    redo_stack: Vec<DiffList>,
-}
-
-impl History {
-    fn push(&mut self, diff_list: DiffList) {
-        self.undo_stack.push(diff_list);
-        self.redo_stack = vec![];
-    }
-
-    fn undo(&mut self) -> Option<Vec<Diff>> {
-        match self.undo_stack.pop() {
-            Some(diff_list) => {
-                self.redo_stack.push(diff_list.clone());
-                Some(diff_list)
-            }
-            None => None,
-        }
-    }
-
-    fn redo(&mut self) -> Option<Vec<Diff>> {
-        match self.redo_stack.pop() {
-            Some(diff_list) => {
-                self.undo_stack.push(diff_list.clone());
-                Some(diff_list)
-            }
-            None => None,
-        }
-    }
-
-    fn clear(&mut self) {
-        self.redo_stack = vec![];
-        self.undo_stack = vec![];
-    }
-}
-
-#[derive(Clone, Encode, Decode)]
-enum DiffType {
-    Undo,
-    Redo,
-}
-
-#[derive(Clone, Encode, Decode)]
-struct QueueDiffs {
-    r#type: DiffType,
-    list: DiffList,
 }
 
 fn boolean(value: &str) -> Result<bool, String> {
@@ -292,7 +146,7 @@ fn vertical(value: &str) -> Result<VerticalAlignment, String> {
 /// # }
 /// ```
 pub struct UserModel {
-    model: Model,
+    pub(crate) model: Model,
     history: History,
     send_queue: Vec<QueueDiffs>,
     pause_evaluation: bool,
@@ -828,6 +682,154 @@ impl UserModel {
         self.model.set_frozen_columns(sheet, frozen_columns)
     }
 
+    /// Paste `styles` in the selected area
+    pub fn on_paste_styles(&mut self, styles: &[Vec<Style>]) -> Result<(), String> {
+        let styles_heigh = styles.len() as i32;
+        let styles_width = styles[0].len() as i32;
+        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            return Ok(());
+        };
+        let range = if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
+            if let Some(view) = worksheet.views.get(&self.model.view_id) {
+                view.range
+            } else {
+                return Ok(());
+            }
+        } else {
+            return Ok(());
+        };
+
+        // If the pasted area is smaller than the selected area we increase it
+        let [row_start, column_start, row_end, column_end] = range;
+        let last_row = row_end.max(row_start + styles_heigh - 1);
+        let last_column = column_end.max(column_start + styles_width - 1);
+
+        let mut diff_list = Vec::new();
+        for row in row_start..=last_row {
+            for column in column_start..=last_column {
+                let row_index = ((row - row_start) % styles_heigh) as usize;
+                let column_index = ((column - column_start) % styles_width) as usize;
+                let style = &styles[row_index][column_index];
+                let old_value = self.model.get_style_for_cell(sheet, row, column);
+                self.model.set_cell_style(sheet, row, column, style)?;
+                diff_list.push(Diff::SetCellStyle {
+                    sheet,
+                    row,
+                    column,
+                    old_value: Box::new(old_value),
+                    new_value: Box::new(style.clone()),
+                });
+            }
+        }
+        self.push_diff_list(diff_list);
+
+        // select the pasted range
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
+                view.range = [row_start, column_start, last_row, last_column];
+            }
+        }
+        Ok(())
+    }
+
+    /// Sets the border
+    pub fn set_area_with_border(
+        &mut self,
+        range: &Area,
+        border_area: &BorderArea,
+    ) -> Result<(), String> {
+        let sheet = range.sheet;
+        let mut diff_list = Vec::new();
+        let last_row = range.row + range.height - 1;
+        let last_column = range.column + range.width - 1;
+        for row in range.row..=last_row {
+            for column in range.column..=last_column {
+                let old_value = self.model.get_style_for_cell(sheet, row, column);
+                let mut style = old_value.clone();
+
+                // First remove all existing borders
+                style.border.top = None;
+                style.border.right = None;
+                style.border.bottom = None;
+                style.border.left = None;
+
+                match border_area.r#type {
+                    BorderType::All => {
+                        style.border.top = Some(border_area.item.clone());
+                        style.border.right = Some(border_area.item.clone());
+                        style.border.bottom = Some(border_area.item.clone());
+                        style.border.left = Some(border_area.item.clone());
+                    }
+                    BorderType::Inner => {
+                        if row != range.row {
+                            style.border.top = Some(border_area.item.clone());
+                        }
+                        if row != last_row {
+                            style.border.bottom = Some(border_area.item.clone());
+                        }
+                        if column != range.column {
+                            style.border.left = Some(border_area.item.clone());
+                        }
+                        if column != last_column {
+                            style.border.right = Some(border_area.item.clone());
+                        }
+                    }
+                    BorderType::Outer => {
+                        if row == range.row {
+                            style.border.top = Some(border_area.item.clone());
+                        }
+                        if row == last_row {
+                            style.border.bottom = Some(border_area.item.clone());
+                        }
+                        if column == range.column {
+                            style.border.left = Some(border_area.item.clone());
+                        }
+                        if column == last_column {
+                            style.border.right = Some(border_area.item.clone());
+                        }
+                    }
+                    BorderType::Top => style.border.top = Some(border_area.item.clone()),
+                    BorderType::Right => style.border.right = Some(border_area.item.clone()),
+                    BorderType::Bottom => style.border.bottom = Some(border_area.item.clone()),
+                    BorderType::Left => style.border.left = Some(border_area.item.clone()),
+                    BorderType::CenterH => {
+                        if row != range.row {
+                            style.border.top = Some(border_area.item.clone());
+                        }
+                        if row != last_row {
+                            style.border.bottom = Some(border_area.item.clone());
+                        }
+                    }
+                    BorderType::CenterV => {
+                        if column != range.column {
+                            style.border.left = Some(border_area.item.clone());
+                        }
+                        if column != last_column {
+                            style.border.right = Some(border_area.item.clone());
+                        }
+                    }
+                    BorderType::None => {
+                        // noop, we already removed all the borders
+                    }
+                }
+
+                self.model.set_cell_style(sheet, row, column, &style)?;
+                diff_list.push(Diff::SetCellStyle {
+                    sheet,
+                    row,
+                    column,
+                    old_value: Box::new(old_value),
+                    new_value: Box::new(style),
+                });
+            }
+        }
+
+        self.push_diff_list(diff_list);
+        Ok(())
+    }
+
     /// Updates the range with a cell style.
     /// See also:
     /// * [Model::set_cell_style]
@@ -1154,166 +1156,6 @@ impl UserModel {
         self.model.get_worksheets_properties()
     }
 
-    /// Returns the selected sheet index
-    pub fn get_selected_sheet(&self) -> u32 {
-        if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
-            view.sheet
-        } else {
-            0
-        }
-    }
-
-    /// Returns the selected cell
-    pub fn get_selected_cell(&self) -> (u32, i32, i32) {
-        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
-            view.sheet
-        } else {
-            0
-        };
-        if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
-            if let Some(view) = worksheet.views.get(&self.model.view_id) {
-                return (sheet, view.row, view.column);
-            }
-        }
-        // return a safe default
-        (0, 1, 1)
-    }
-
-    /// Returns selected view
-    pub fn get_selected_view(&self) -> SelectedView {
-        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
-            view.sheet
-        } else {
-            0
-        };
-        if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
-            if let Some(view) = worksheet.views.get(&self.model.view_id) {
-                return SelectedView {
-                    sheet,
-                    row: view.row,
-                    column: view.column,
-                    range: view.range,
-                    top_row: view.top_row,
-                    left_column: view.left_column,
-                };
-            }
-        }
-        // return a safe default
-        SelectedView {
-            sheet: 0,
-            row: 1,
-            column: 1,
-            range: [1, 1, 1, 1],
-            top_row: 1,
-            left_column: 1,
-        }
-    }
-
-    /// Sets the the selected sheet
-    pub fn set_selected_sheet(&mut self, sheet: u32) -> Result<(), String> {
-        if self.model.workbook.worksheet(sheet).is_err() {
-            return Err(format!("Invalid worksheet index {}", sheet));
-        }
-        if let Some(view) = self.model.workbook.views.get_mut(&0) {
-            view.sheet = sheet;
-        }
-        Ok(())
-    }
-
-    /// Sets the selected cell
-    pub fn set_selected_cell(&mut self, row: i32, column: i32) -> Result<(), String> {
-        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
-            view.sheet
-        } else {
-            0
-        };
-        if !is_valid_column_number(column) {
-            return Err(format!("Invalid column: '{column}'"));
-        }
-        if !is_valid_row(row) {
-            return Err(format!("Invalid row: '{row}'"));
-        }
-        if self.model.workbook.worksheet(sheet).is_err() {
-            return Err(format!("Invalid worksheet index {}", sheet));
-        }
-        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
-            if let Some(view) = worksheet.views.get_mut(&0) {
-                view.row = row;
-                view.column = column;
-                view.range = [row, column, row, column];
-            }
-        }
-        Ok(())
-    }
-
-    /// Sets the selected range
-    pub fn set_selected_range(
-        &mut self,
-        start_row: i32,
-        start_column: i32,
-        end_row: i32,
-        end_column: i32,
-    ) -> Result<(), String> {
-        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
-            view.sheet
-        } else {
-            0
-        };
-
-        if !is_valid_column_number(start_column) {
-            return Err(format!("Invalid column: '{start_column}'"));
-        }
-        if !is_valid_column_number(start_row) {
-            return Err(format!("Invalid row: '{start_row}'"));
-        }
-
-        if !is_valid_column_number(end_column) {
-            return Err(format!("Invalid column: '{end_column}'"));
-        }
-        if !is_valid_column_number(end_row) {
-            return Err(format!("Invalid row: '{end_row}'"));
-        }
-        if self.model.workbook.worksheet(sheet).is_err() {
-            return Err(format!("Invalid worksheet index {}", sheet));
-        }
-        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
-            if let Some(view) = worksheet.views.get_mut(&0) {
-                view.range = [start_row, start_column, end_row, end_column];
-            }
-        }
-        Ok(())
-    }
-
-    /// Sets the value of the first visible cell
-    pub fn set_top_left_visible_cell(
-        &mut self,
-        top_row: i32,
-        left_column: i32,
-    ) -> Result<(), String> {
-        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
-            view.sheet
-        } else {
-            0
-        };
-
-        if !is_valid_column_number(left_column) {
-            return Err(format!("Invalid column: '{left_column}'"));
-        }
-        if !is_valid_column_number(top_row) {
-            return Err(format!("Invalid row: '{top_row}'"));
-        }
-        if self.model.workbook.worksheet(sheet).is_err() {
-            return Err(format!("Invalid worksheet index {}", sheet));
-        }
-        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
-            if let Some(view) = worksheet.views.get_mut(&0) {
-                view.top_row = top_row;
-                view.left_column = left_column;
-            }
-        }
-        Ok(())
-    }
-
     /// Set the gid lines in the worksheet to visible (`true`) or hidden (`false`)
     pub fn set_show_grid_lines(&mut self, sheet: u32, show_grid_lines: bool) -> Result<(), String> {
         let old_value = self.model.workbook.worksheet(sheet)?.show_grid_lines;
@@ -1643,7 +1485,7 @@ impl UserModel {
 mod tests {
     use crate::{
         types::{HorizontalAlignment, VerticalAlignment},
-        user_model::{horizontal, vertical},
+        user_model::common::{horizontal, vertical},
     };
 
     #[test]

base/src/user_model/history.rs

@@ -0,0 +1,164 @@
+use std::collections::HashMap;
+
+use bitcode::{Decode, Encode};
+
+use crate::types::{Cell, Col, Row, Style};
+
+#[derive(Clone, Encode, Decode)]
+pub(crate) struct RowData {
+    pub(crate) row: Option<Row>,
+    pub(crate) data: HashMap<i32, Cell>,
+}
+
+#[derive(Clone, Encode, Decode)]
+pub(crate) struct ColumnData {
+    pub(crate) column: Option<Col>,
+    pub(crate) data: HashMap<i32, Cell>,
+}
+
+#[derive(Clone, Encode, Decode)]
+pub(crate) enum Diff {
+    // Cell diffs
+    SetCellValue {
+        sheet: u32,
+        row: i32,
+        column: i32,
+        new_value: String,
+        old_value: Box<Option<Cell>>,
+    },
+    CellClearContents {
+        sheet: u32,
+        row: i32,
+        column: i32,
+        old_value: Box<Option<Cell>>,
+    },
+    CellClearAll {
+        sheet: u32,
+        row: i32,
+        column: i32,
+        old_value: Box<Option<Cell>>,
+        old_style: Box<Style>,
+    },
+    SetCellStyle {
+        sheet: u32,
+        row: i32,
+        column: i32,
+        old_value: Box<Style>,
+        new_value: Box<Style>,
+    },
+    // Column and Row diffs
+    SetColumnWidth {
+        sheet: u32,
+        column: i32,
+        new_value: f64,
+        old_value: f64,
+    },
+    SetRowHeight {
+        sheet: u32,
+        row: i32,
+        new_value: f64,
+        old_value: f64,
+    },
+    InsertRow {
+        sheet: u32,
+        row: i32,
+    },
+    DeleteRow {
+        sheet: u32,
+        row: i32,
+        old_data: Box<RowData>,
+    },
+    InsertColumn {
+        sheet: u32,
+        column: i32,
+    },
+    DeleteColumn {
+        sheet: u32,
+        column: i32,
+        old_data: Box<ColumnData>,
+    },
+    SetFrozenRowsCount {
+        sheet: u32,
+        new_value: i32,
+        old_value: i32,
+    },
+    SetFrozenColumnsCount {
+        sheet: u32,
+        new_value: i32,
+        old_value: i32,
+    },
+    DeleteSheet {
+        sheet: u32,
+    },
+    NewSheet {
+        index: u32,
+        name: String,
+    },
+    RenameSheet {
+        index: u32,
+        old_value: String,
+        new_value: String,
+    },
+    SetSheetColor {
+        index: u32,
+        old_value: String,
+        new_value: String,
+    },
+    SetShowGridLines {
+        sheet: u32,
+        old_value: bool,
+        new_value: bool,
+    }, // FIXME: we are missing SetViewDiffs
+}
+
+pub(crate) type DiffList = Vec<Diff>;
+
+#[derive(Default)]
+pub(crate) struct History {
+    pub(crate) undo_stack: Vec<DiffList>,
+    pub(crate) redo_stack: Vec<DiffList>,
+}
+
+impl History {
+    pub fn push(&mut self, diff_list: DiffList) {
+        self.undo_stack.push(diff_list);
+        self.redo_stack = vec![];
+    }
+
+    pub fn undo(&mut self) -> Option<Vec<Diff>> {
+        match self.undo_stack.pop() {
+            Some(diff_list) => {
+                self.redo_stack.push(diff_list.clone());
+                Some(diff_list)
+            }
+            None => None,
+        }
+    }
+
+    pub fn redo(&mut self) -> Option<Vec<Diff>> {
+        match self.redo_stack.pop() {
+            Some(diff_list) => {
+                self.undo_stack.push(diff_list.clone());
+                Some(diff_list)
+            }
+            None => None,
+        }
+    }
+
+    pub fn clear(&mut self) {
+        self.redo_stack = vec![];
+        self.undo_stack = vec![];
+    }
+}
+
+#[derive(Clone, Encode, Decode)]
+pub enum DiffType {
+    Undo,
+    Redo,
+}
+
+#[derive(Clone, Encode, Decode)]
+pub struct QueueDiffs {
+    pub r#type: DiffType,
+    pub list: DiffList,
+}

base/src/user_model/mod.rs

@@ -0,0 +1,12 @@
+#![deny(missing_docs)]
+
+mod common;
+mod history;
+mod ui;
+
+pub use common::UserModel;
+
+#[cfg(test)]
+pub use ui::SelectedView;
+
+pub use common::BorderArea;

base/src/user_model/ui.rs

@@ -0,0 +1,671 @@
+#![deny(missing_docs)]
+
+use serde::{Deserialize, Serialize};
+
+use crate::expressions::utils::{is_valid_column_number, is_valid_row};
+
+use super::common::UserModel;
+
+#[derive(Serialize, Deserialize)]
+#[cfg_attr(test, derive(PartialEq, Debug))]
+pub struct SelectedView {
+    pub sheet: u32,
+    pub row: i32,
+    pub column: i32,
+    pub range: [i32; 4],
+    pub top_row: i32,
+    pub left_column: i32,
+}
+
+impl UserModel {
+    /// Returns the selected sheet index
+    pub fn get_selected_sheet(&self) -> u32 {
+        if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            0
+        }
+    }
+
+    /// Returns the selected cell
+    pub fn get_selected_cell(&self) -> (u32, i32, i32) {
+        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            0
+        };
+        if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
+            if let Some(view) = worksheet.views.get(&self.model.view_id) {
+                return (sheet, view.row, view.column);
+            }
+        }
+        // return a safe default
+        (0, 1, 1)
+    }
+
+    /// Returns selected view
+    pub fn get_selected_view(&self) -> SelectedView {
+        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            0
+        };
+        if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
+            if let Some(view) = worksheet.views.get(&self.model.view_id) {
+                return SelectedView {
+                    sheet,
+                    row: view.row,
+                    column: view.column,
+                    range: view.range,
+                    top_row: view.top_row,
+                    left_column: view.left_column,
+                };
+            }
+        }
+        // return a safe default
+        SelectedView {
+            sheet: 0,
+            row: 1,
+            column: 1,
+            range: [1, 1, 1, 1],
+            top_row: 1,
+            left_column: 1,
+        }
+    }
+
+    /// Sets the the selected sheet
+    pub fn set_selected_sheet(&mut self, sheet: u32) -> Result<(), String> {
+        if self.model.workbook.worksheet(sheet).is_err() {
+            return Err(format!("Invalid worksheet index {}", sheet));
+        }
+        if let Some(view) = self.model.workbook.views.get_mut(&0) {
+            view.sheet = sheet;
+        }
+        Ok(())
+    }
+
+    /// Sets the selected cell
+    pub fn set_selected_cell(&mut self, row: i32, column: i32) -> Result<(), String> {
+        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            0
+        };
+        if !is_valid_column_number(column) {
+            return Err(format!("Invalid column: '{column}'"));
+        }
+        if !is_valid_row(row) {
+            return Err(format!("Invalid row: '{row}'"));
+        }
+        if self.model.workbook.worksheet(sheet).is_err() {
+            return Err(format!("Invalid worksheet index {}", sheet));
+        }
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&0) {
+                view.row = row;
+                view.column = column;
+                view.range = [row, column, row, column];
+            }
+        }
+        Ok(())
+    }
+
+    /// Sets the selected range
+    pub fn set_selected_range(
+        &mut self,
+        start_row: i32,
+        start_column: i32,
+        end_row: i32,
+        end_column: i32,
+    ) -> Result<(), String> {
+        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            0
+        };
+
+        if !is_valid_column_number(start_column) {
+            return Err(format!("Invalid column: '{start_column}'"));
+        }
+        if !is_valid_row(start_row) {
+            return Err(format!("Invalid row: '{start_row}'"));
+        }
+
+        if !is_valid_column_number(end_column) {
+            return Err(format!("Invalid column: '{end_column}'"));
+        }
+        if !is_valid_row(end_row) {
+            return Err(format!("Invalid row: '{end_row}'"));
+        }
+        if self.model.workbook.worksheet(sheet).is_err() {
+            return Err(format!("Invalid worksheet index {}", sheet));
+        }
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&0) {
+                view.range = [start_row, start_column, end_row, end_column];
+            }
+        }
+        Ok(())
+    }
+
+    /// The selected range is expanded with the keyboard
+    pub fn on_expand_selected_range(&mut self, key: &str) -> Result<(), String> {
+        let (sheet, window_width, window_height) =
+            if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+                (
+                    view.sheet,
+                    view.window_width as f64,
+                    view.window_height as f64,
+                )
+            } else {
+                return Ok(());
+            };
+        let (selected_row, selected_column, range, top_row, left_column) =
+            if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
+                if let Some(view) = worksheet.views.get(&self.model.view_id) {
+                    (
+                        view.row,
+                        view.column,
+                        view.range,
+                        view.top_row,
+                        view.left_column,
+                    )
+                } else {
+                    return Ok(());
+                }
+            } else {
+                return Ok(());
+            };
+        let [row_start, column_start, row_end, column_end] = range;
+
+        match key {
+            "ArrowRight" => {
+                if selected_column > column_start {
+                    let new_column = column_start + 1;
+                    if !(is_valid_column_number(new_column)) {
+                        return Ok(());
+                    }
+                    self.set_selected_range(row_start, new_column, row_end, column_end)?;
+                } else {
+                    let new_column = column_end + 1;
+                    if !is_valid_column_number(new_column) {
+                        return Ok(());
+                    }
+                    // if the column is not fully visible we 'scroll' right until it is
+                    let mut width = 0.0;
+                    let mut c = left_column;
+                    while c <= new_column {
+                        width += self.model.get_column_width(sheet, c)?;
+                        c += 1;
+                    }
+                    if width > window_width {
+                        self.set_top_left_visible_cell(top_row, left_column + 1)?;
+                    }
+                    self.set_selected_range(row_start, column_start, row_end, column_end + 1)?;
+                }
+            }
+            "ArrowLeft" => {
+                if selected_column < column_end {
+                    let new_column = column_end - 1;
+                    if !is_valid_column_number(new_column) {
+                        return Ok(());
+                    }
+                    if new_column < left_column {
+                        self.set_top_left_visible_cell(top_row, new_column)?;
+                    }
+                    self.set_selected_range(row_start, column_start, row_end, new_column)?;
+                } else {
+                    let new_column = column_start - 1;
+                    if !is_valid_column_number(new_column) {
+                        return Ok(());
+                    }
+                    if new_column < left_column {
+                        self.set_top_left_visible_cell(top_row, new_column)?;
+                    }
+                    self.set_selected_range(row_start, new_column, row_end, column_end)?;
+                }
+            }
+            "ArrowUp" => {
+                if selected_row < row_end {
+                    let new_row = row_end - 1;
+                    if !is_valid_row(new_row) {
+                        return Ok(());
+                    }
+                    self.set_selected_range(row_start, column_start, new_row, column_end)?;
+                } else {
+                    let new_row = row_start - 1;
+                    if !is_valid_row(new_row) {
+                        return Ok(());
+                    }
+                    if new_row < top_row {
+                        self.set_top_left_visible_cell(new_row, left_column)?;
+                    }
+                    self.set_selected_range(new_row, column_start, row_end, column_end)?;
+                }
+            }
+            "ArrowDown" => {
+                if selected_row > row_start {
+                    let new_row = row_start + 1;
+                    if !is_valid_row(new_row) {
+                        return Ok(());
+                    }
+                    self.set_selected_range(new_row, column_start, row_end, column_end)?;
+                } else {
+                    let new_row = row_end + 1;
+                    if !is_valid_row(new_row) {
+                        return Ok(());
+                    }
+                    let mut height = 0.0;
+                    let mut r = top_row;
+                    while r <= new_row + 1 {
+                        height += self.model.get_row_height(sheet, r)?;
+                        r += 1;
+                    }
+                    if height >= window_height {
+                        self.set_top_left_visible_cell(top_row + 1, left_column)?;
+                    }
+                    self.set_selected_range(row_start, column_start, new_row, column_end)?;
+                }
+            }
+            _ => {}
+        }
+
+        Ok(())
+    }
+
+    /// Sets the value of the first visible cell
+    pub fn set_top_left_visible_cell(
+        &mut self,
+        top_row: i32,
+        left_column: i32,
+    ) -> Result<(), String> {
+        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            0
+        };
+
+        if !is_valid_column_number(left_column) {
+            return Err(format!("Invalid column: '{left_column}'"));
+        }
+        if !is_valid_row(top_row) {
+            return Err(format!("Invalid row: '{top_row}'"));
+        }
+        if self.model.workbook.worksheet(sheet).is_err() {
+            return Err(format!("Invalid worksheet index {}", sheet));
+        }
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&0) {
+                view.top_row = top_row;
+                view.left_column = left_column;
+            }
+        }
+        Ok(())
+    }
+
+    /// Sets the width of the window
+    pub fn set_window_width(&mut self, window_width: f64) {
+        if let Some(view) = self.model.workbook.views.get_mut(&self.model.view_id) {
+            view.window_width = window_width as i64;
+        };
+    }
+
+    /// Gets the width of the window
+    pub fn get_window_width(&mut self) -> Result<i64, String> {
+        if let Some(view) = self.model.workbook.views.get_mut(&self.model.view_id) {
+            return Ok(view.window_width);
+        };
+        Err("View not found".to_string())
+    }
+
+    /// Sets the height of the window
+    pub fn set_window_height(&mut self, window_height: f64) {
+        if let Some(view) = self.model.workbook.views.get_mut(&self.model.view_id) {
+            view.window_height = window_height as i64;
+        };
+    }
+
+    /// Gets the height of the window
+    pub fn get_window_height(&mut self) -> Result<i64, String> {
+        if let Some(view) = self.model.workbook.views.get_mut(&self.model.view_id) {
+            return Ok(view.window_height);
+        };
+        Err("View not found".to_string())
+    }
+
+    /// User presses right arrow
+    pub fn on_arrow_right(&mut self) -> Result<(), String> {
+        let (sheet, window_width) =
+            if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+                (view.sheet, view.window_width)
+            } else {
+                return Err("View not found".to_string());
+            };
+        let worksheet = match self.model.workbook.worksheet(sheet) {
+            Ok(s) => s,
+            Err(_) => return Err("Worksheet not found".to_string()),
+        };
+        let view = match worksheet.views.get(&self.model.view_id) {
+            Some(s) => s,
+            None => return Err("View not found".to_string()),
+        };
+        let new_column = view.column + 1;
+        if !is_valid_column_number(new_column) {
+            return Ok(());
+        }
+        // if the column is not fully visible we 'scroll' right until it is
+        let mut width = 0.0;
+        let mut column = view.left_column;
+        while column <= new_column {
+            width += self.model.get_column_width(sheet, column)?;
+            column += 1;
+        }
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
+                view.column = new_column;
+                view.range = [view.row, new_column, view.row, new_column];
+                if width > window_width as f64 {
+                    view.left_column += 1;
+                }
+            }
+        }
+        Ok(())
+    }
+
+    /// User presses left arrow
+    pub fn on_arrow_left(&mut self) -> Result<(), String> {
+        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            return Err("View not found".to_string());
+        };
+        let worksheet = match self.model.workbook.worksheet(sheet) {
+            Ok(s) => s,
+            Err(_) => return Err("Worksheet not found".to_string()),
+        };
+        let view = match worksheet.views.get(&self.model.view_id) {
+            Some(s) => s,
+            None => return Err("View not found".to_string()),
+        };
+        let new_column = view.column - 1;
+        if !is_valid_column_number(new_column) {
+            return Ok(());
+        }
+        // if the column is not fully visible we 'scroll' right until it is
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
+                view.column = new_column;
+                view.range = [view.row, new_column, view.row, new_column];
+                if new_column < view.left_column {
+                    view.left_column = new_column;
+                }
+            }
+        }
+        Ok(())
+    }
+
+    /// User presses up arrow key
+    pub fn on_arrow_up(&mut self) -> Result<(), String> {
+        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            return Err("View not found".to_string());
+        };
+        let worksheet = match self.model.workbook.worksheet(sheet) {
+            Ok(s) => s,
+            Err(_) => return Err("Worksheet not found".to_string()),
+        };
+        let view = match worksheet.views.get(&self.model.view_id) {
+            Some(s) => s,
+            None => return Err("View not found".to_string()),
+        };
+        let new_row = view.row - 1;
+        if !is_valid_row(new_row) {
+            return Ok(());
+        }
+        // if the column is not fully visible we 'scroll' right until it is
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
+                view.row = new_row;
+                view.range = [new_row, view.column, new_row, view.column];
+                if new_row < view.top_row {
+                    view.top_row = new_row;
+                }
+            }
+        }
+        Ok(())
+    }
+
+    /// User presses down arrow key
+    pub fn on_arrow_down(&mut self) -> Result<(), String> {
+        let (sheet, window_height) =
+            if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+                (view.sheet, view.window_height)
+            } else {
+                return Err("View not found".to_string());
+            };
+        let worksheet = match self.model.workbook.worksheet(sheet) {
+            Ok(s) => s,
+            Err(_) => return Err("Worksheet not found".to_string()),
+        };
+        let view = match worksheet.views.get(&self.model.view_id) {
+            Some(s) => s,
+            None => return Err("View not found".to_string()),
+        };
+        let new_row = view.row + 1;
+        if !is_valid_row(new_row) {
+            return Ok(());
+        }
+        // if the row is not fully visible we 'scroll' down until it is
+        let mut height = 0.0;
+        let mut row = view.top_row;
+        while row <= new_row + 1 {
+            height += self.model.get_row_height(sheet, row)?;
+            row += 1;
+        }
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
+                view.row = new_row;
+                view.range = [new_row, view.column, new_row, view.column];
+                if height > window_height as f64 {
+                    view.top_row += 1;
+                }
+            }
+        }
+        Ok(())
+    }
+
+    // TODO: This function should be memoized
+    /// Returns the x-coordinate of the cell in the top left corner
+    pub fn get_scroll_x(&self) -> Result<f64, String> {
+        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            return Err("View not found".to_string());
+        };
+        let worksheet = match self.model.workbook.worksheet(sheet) {
+            Ok(s) => s,
+            Err(_) => return Err("Worksheet not found".to_string()),
+        };
+        let view = match worksheet.views.get(&self.model.view_id) {
+            Some(s) => s,
+            None => return Err("View not found".to_string()),
+        };
+        let mut scroll_x = 0.0;
+        for column in 1..view.left_column {
+            scroll_x += self.model.get_column_width(sheet, column)?;
+        }
+        Ok(scroll_x)
+    }
+
+    // TODO: This function should be memoized
+    /// Returns the y-coordinate of the cell in the top left corner
+    pub fn get_scroll_y(&self) -> Result<f64, String> {
+        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            return Err("View not found".to_string());
+        };
+        let worksheet = match self.model.workbook.worksheet(sheet) {
+            Ok(s) => s,
+            Err(_) => return Err("Worksheet not found".to_string()),
+        };
+        let view = match worksheet.views.get(&self.model.view_id) {
+            Some(s) => s,
+            None => return Err("View not found".to_string()),
+        };
+        let mut scroll_y = 0.0;
+        for row in 1..view.top_row {
+            scroll_y += self.model.get_row_height(sheet, row)?;
+        }
+        Ok(scroll_y)
+    }
+
+    /// User presses page down
+    pub fn on_page_down(&mut self) -> Result<(), String> {
+        let (sheet, window_height) =
+            if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+                (view.sheet, view.window_height)
+            } else {
+                return Err("View not found".to_string());
+            };
+        let worksheet = match self.model.workbook.worksheet(sheet) {
+            Ok(s) => s,
+            Err(_) => return Err("Worksheet not found".to_string()),
+        };
+        let view = match worksheet.views.get(&self.model.view_id) {
+            Some(s) => s,
+            None => return Err("View not found".to_string()),
+        };
+
+        let mut height = 0.0;
+        let mut last_row = view.top_row;
+        while height <= window_height as f64 {
+            height += self.model.get_row_height(sheet, last_row)?;
+            last_row += 1;
+        }
+        if !is_valid_row(last_row) {
+            return Ok(());
+        }
+        let row_delta = view.row - view.top_row;
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
+                view.top_row = last_row;
+                view.row = view.top_row + row_delta;
+                view.range = [view.row, view.column, view.row, view.column];
+            }
+        }
+        Ok(())
+    }
+
+    /// On page up
+    pub fn on_page_up(&mut self) -> Result<(), String> {
+        let (sheet, window_height) =
+            if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+                (view.sheet, view.window_height)
+            } else {
+                return Err("View not found".to_string());
+            };
+        let worksheet = match self.model.workbook.worksheet(sheet) {
+            Ok(s) => s,
+            Err(_) => return Err("Worksheet not found".to_string()),
+        };
+        let view = match worksheet.views.get(&self.model.view_id) {
+            Some(s) => s,
+            None => return Err("View not found".to_string()),
+        };
+
+        let mut height = 0.0;
+        let mut last_row = view.top_row;
+        while height <= window_height as f64 && last_row > 1 {
+            height += self.model.get_row_height(sheet, last_row)?;
+            last_row -= 1;
+        }
+        let row_delta = view.row - view.top_row;
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
+                view.top_row = last_row;
+                view.row = view.top_row + row_delta;
+                view.range = [view.row, view.column, view.row, view.column];
+            }
+        }
+        Ok(())
+    }
+
+    /// We extend the selection to cell (target_row, target_column)
+    pub fn on_area_selecting(&mut self, target_row: i32, target_column: i32) -> Result<(), String> {
+        let (sheet, window_width, window_height) =
+            if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+                (
+                    view.sheet,
+                    view.window_width as f64,
+                    view.window_height as f64,
+                )
+            } else {
+                return Ok(());
+            };
+        let (selected_row, selected_column, range, top_row, left_column) =
+            if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
+                if let Some(view) = worksheet.views.get(&self.model.view_id) {
+                    (
+                        view.row,
+                        view.column,
+                        view.range,
+                        view.top_row,
+                        view.left_column,
+                    )
+                } else {
+                    return Ok(());
+                }
+            } else {
+                return Ok(());
+            };
+        let [row_start, column_start, _row_end, _column_end] = range;
+
+        let mut new_left_column = left_column;
+        if target_column >= selected_column {
+            let mut width = 0.0;
+            let mut column = left_column;
+            while column <= target_column {
+                width += self.model.get_column_width(sheet, column)?;
+                column += 1;
+            }
+
+            while width > window_width {
+                width -= self.model.get_column_width(sheet, new_left_column)?;
+                new_left_column += 1;
+            }
+        } else if target_column < new_left_column {
+            new_left_column = target_column;
+        }
+        let mut new_top_row = top_row;
+        if target_row >= selected_row {
+            let mut height = 0.0;
+            let mut row = top_row;
+            while row <= target_row {
+                height += self.model.get_row_height(sheet, row)?;
+                row += 1;
+            }
+            while height > window_height {
+                height -= self.model.get_row_height(sheet, new_top_row)?;
+                new_top_row += 1;
+            }
+        } else if target_row < new_top_row {
+            new_top_row = target_row;
+        }
+
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
+                view.range = [row_start, column_start, target_row, target_column];
+                if new_top_row != top_row {
+                    view.top_row = new_top_row;
+                }
+                if new_left_column != left_column {
+                    view.left_column = new_left_column;
+                }
+            }
+        }
+
+        Ok(())
+    }
+}

bindings/wasm/fix_types.py

@@ -107,6 +107,36 @@ autofill_columns_types = r"""
   autoFillColumns(source_area: Area, to_column: number): void;
 """
 
+set_cell_style = r"""
+/**
+* @param {any} styles
+*/
+  onPasteStyles(styles: any): void;
+"""
+
+set_cell_style_types = r"""
+/**
+* @param {CellStyle[][]} styles
+*/
+  onPasteStyles(styles: CellStyle[][]): void;
+"""
+
+set_area_border = r"""
+/**
+* @param {any} area
+* @param {any} border_area
+*/
+  setAreaWithBorder(area: any, border_area: any): void;
+"""
+
+set_area_border_types = r"""
+/**
+* @param {Area} area
+* @param {BorderArea} border_area
+*/
+  setAreaWithBorder(area: Area, border_area: BorderArea): void;
+"""
+
 def fix_types(text):
     text = text.replace(get_tokens_str, get_tokens_str_types)
     text = text.replace(update_style_str, update_style_str_types)
@@ -115,6 +145,8 @@ def fix_types(text):
     text = text.replace(view, view_types)
     text = text.replace(autofill_rows, autofill_rows_types)
     text = text.replace(autofill_columns, autofill_columns_types)
+    text = text.replace(set_cell_style, set_cell_style_types)
+    text = text.replace(set_area_border, set_area_border_types)
     with open("types.ts") as f:
         types_str = f.read()
         header_types = "{}\n\n{}".format(header, types_str)

bindings/wasm/src/lib.rs

@@ -5,8 +5,8 @@ use wasm_bindgen::{
 
 use ironcalc_base::{
     expressions::{lexer::util::get_tokens as tokenizer, types::Area},
-    types::CellType,
+    types::{CellType, Style},
-    UserModel as BaseModel,
+    BorderArea, UserModel as BaseModel,
 };
 
 fn to_js_error(error: String) -> JsError {
@@ -102,6 +102,13 @@ impl Model {
         self.model.rename_sheet(sheet, name).map_err(to_js_error)
     }
 
+    #[wasm_bindgen(js_name = "setSheetColor")]
+    pub fn set_sheet_color(&mut self, sheet: u32, color: &str) -> Result<(), JsError> {
+        self.model
+            .set_sheet_color(sheet, color)
+            .map_err(to_js_error)
+    }
+
     #[wasm_bindgen(js_name = "rangeClearAll")]
     pub fn range_clear_all(
         &mut self,
@@ -264,6 +271,12 @@ impl Model {
             .map(|x| serde_wasm_bindgen::to_value(&x).unwrap())
     }
 
+    #[wasm_bindgen(js_name = "onPasteStyles")]
+    pub fn on_paste_styles(&mut self, styles: JsValue) -> Result<(), JsError> {
+        let styles: &Vec<Vec<Style>> = &serde_wasm_bindgen::from_value(styles).unwrap();
+        self.model.on_paste_styles(styles).map_err(to_js_error)
+    }
+
     #[wasm_bindgen(js_name = "getCellType")]
     pub fn get_cell_type(&self, sheet: u32, row: i32, column: i32) -> Result<i32, JsError> {
         Ok(
@@ -376,4 +389,88 @@ impl Model {
             .auto_fill_columns(&area, to_column)
             .map_err(to_js_error)
     }
+
+    #[wasm_bindgen(js_name = "onArrowRight")]
+    pub fn on_arrow_right(&mut self) -> Result<(), JsError> {
+        self.model.on_arrow_right().map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "onArrowLeft")]
+    pub fn on_arrow_left(&mut self) -> Result<(), JsError> {
+        self.model.on_arrow_left().map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "onArrowUp")]
+    pub fn on_arrow_up(&mut self) -> Result<(), JsError> {
+        self.model.on_arrow_up().map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "onArrowDown")]
+    pub fn on_arrow_down(&mut self) -> Result<(), JsError> {
+        self.model.on_arrow_down().map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "onPageDown")]
+    pub fn on_page_down(&mut self) -> Result<(), JsError> {
+        self.model.on_page_down().map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "onPageUp")]
+    pub fn on_page_up(&mut self) -> Result<(), JsError> {
+        self.model.on_page_up().map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "setWindowWidth")]
+    pub fn set_window_width(&mut self, window_width: f64) {
+        self.model.set_window_width(window_width);
+    }
+
+    #[wasm_bindgen(js_name = "setWindowHeight")]
+    pub fn set_window_height(&mut self, window_height: f64) {
+        self.model.set_window_height(window_height);
+    }
+
+    #[wasm_bindgen(js_name = "getScrollX")]
+    pub fn get_scroll_x(&self) -> Result<f64, JsError> {
+        self.model.get_scroll_x().map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "getScrollY")]
+    pub fn get_scroll_y(&self) -> Result<f64, JsError> {
+        self.model.get_scroll_y().map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "onExpandSelectedRange")]
+    pub fn on_expand_selected_range(&mut self, key: &str) -> Result<(), JsError> {
+        self.model
+            .on_expand_selected_range(key)
+            .map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "onAreaSelecting")]
+    pub fn on_area_selecting(
+        &mut self,
+        target_row: i32,
+        target_column: i32,
+    ) -> Result<(), JsError> {
+        self.model
+            .on_area_selecting(target_row, target_column)
+            .map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "setAreaWithBorder")]
+    pub fn set_area_with_border(
+        &mut self,
+        area: JsValue,
+        border_area: JsValue,
+    ) -> Result<(), JsError> {
+        let range: Area =
+            serde_wasm_bindgen::from_value(area).map_err(|e| to_js_error(e.to_string()))?;
+        let border: BorderArea =
+            serde_wasm_bindgen::from_value(border_area).map_err(|e| to_js_error(e.to_string()))?;
+        self.model
+            .set_area_with_border(&range, &border)
+            .map_err(|e| to_js_error(e.to_string()))?;
+        Ok(())
+    }
 }

bindings/wasm/types.ts

@@ -6,6 +6,24 @@ export interface Area {
   height: number;
 }
 
+export enum BorderType {
+  All = "All",
+  Inner = "Inner",
+  Outer = "Outer",
+  Top = "Top",
+  Right = "Right",
+  Bottom = "Bottom",
+  Left = "Left",
+  CenterH = "CenterH",
+  CenterV = "CenterV",
+  None = "None",
+}
+
+export interface BorderArea {
+  item: BorderItem;
+  type: BorderType;
+}
+
 type ErrorType =
   | "REF"
   | "NAME"
@@ -115,19 +133,19 @@ interface CellStyleFont {
   scheme: string;
 }
 
-export enum BorderType {
+// export enum BorderType {
-  BorderAll,
+//   BorderAll,
-  BorderInner,
+//   BorderInner,
-  BorderCenterH,
+//   BorderCenterH,
-  BorderCenterV,
+//   BorderCenterV,
-  BorderOuter,
+//   BorderOuter,
-  BorderNone,
+//   BorderNone,
-  BorderTop,
+//   BorderTop,
-  BorderRight,
+//   BorderRight,
-  BorderBottom,
+//   BorderBottom,
-  BorderLeft,
+//   BorderLeft,
-  None,
+//   None,
-}
+// }
 
 export interface BorderOptions {
   color: string;
@@ -192,3 +210,12 @@ export interface CellStyle {
   num_fmt: string;
   alignment?: Alignment;
 }
+
+export interface SelectedView {
+  sheet: number;
+  row: number;
+  column: number;
+  range: [number, number, number, number];
+  top_row: number;
+  left_column: number;
+}

webapp/.gitignore

@@ -0,0 +1,3 @@
+node_modules/*
+dist/*
+example.json

webapp/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    '@storybook/addon-mdx-gfm',
+    '@chromatic-com/storybook'
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

webapp/.storybook/preview.tsx

@@ -0,0 +1,29 @@
+import type { Preview } from '@storybook/react';
+import i18n from '../src/i18n';
+import { I18nextProvider } from 'react-i18next';
+import React from 'react';
+
+
+const withI18next = (Story: any) => {
+  return (
+      <I18nextProvider i18n={i18n}>
+        <Story />
+      </I18nextProvider>
+  );
+};
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+
+export const decorators = [withI18next];
+export default preview;

webapp/README.md

@@ -0,0 +1,21 @@
+# IronCalc Web App
+
+## Build
+
+```bash
+npm install
+```
+
+## Local development
+
+```bash
+npm run dev
+```
+
+# Deploy
+
+```bash
+npm install
+npm run build
+```
+

webapp/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- <meta name="theme-color" content="#1bb566"> -->
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#F2994A" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
+    <title>IronCalc Spreadsheet</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

webapp/jest.config.ts

@@ -0,0 +1,15 @@
+import type { Config } from "jest";
+// import {defaults} from 'jest-config';
+
+const config: Config = {
+  // testMatch:["**.jest.mjs"],
+  moduleFileExtensions: ["js", "ts", "mts", "mjs"],
+  transform: {
+    "^.+\\.[jt]s?$": "ts-jest",
+  },
+  moduleNameMapper: {
+    "^@ironcalc/wasm$": "<rootDir>/node_modules/@ironcalc/nodejs/"
+  },
+};
+
+export default config;

webapp/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.1.3",
+  "type": "module",
+  "scripts": {
+    "restore": "cp node_modules/@ironcalc/wasm/wasm_bg.wasm node_modules/.vite/deps/",
+    "dev": "vite",
+    "test": "jest",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@ironcalc/wasm": "file:../bindings/wasm/pkg",
+    "@mui/material": "^5.15.15",
+    "@storybook/test": "^8.0.8",
+    "i18next": "^23.11.1",
+    "lucide-react": "^0.375.0",
+    "react": "^18.2.0",
+    "react-colorful": "^5.6.1",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^13.5.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.2",
+    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-interactions": "^8.0.8",
+    "@storybook/addon-links": "^8.0.8",
+    "@storybook/addon-mdx-gfm": "^8.0.8",
+    "@storybook/addon-onboarding": "^8.0.8",
+    "@storybook/blocks": "^8.0.8",
+    "@storybook/react": "^8.0.8",
+    "@storybook/react-vite": "^8.0.8",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.75",
+    "@types/react-dom": "^18.2.24",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-storybook": "^0.6.15",
+    "jest": "^29.7.0",
+    "storybook": "^8.0.8",
+    "ts-jest": "^29.1.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.8",
+    "vite-plugin-svgr": "^4.2.0"
+  }
+}

webapp/src/App.css

@@ -0,0 +1,6 @@
+#root {
+    position: absolute;
+    inset: 10px;
+    border: 1px solid #AAA;
+    border-radius: 4px;
+}

webapp/src/App.tsx

@@ -0,0 +1,37 @@
+import "./App.css";
+import Workbook from "./components/workbook";
+import "./i18n";
+import { useEffect, useState } from "react";
+import init, { Model } from "@ironcalc/wasm";
+import { WorkbookState } from "./components/workbookState";
+
+function App() {
+  const [model, setModel] = useState<Model | null>(null);
+  const [workbookState, setWorkbookState] = useState<WorkbookState | null>(
+    null
+  );
+  useEffect(() => {
+    async function start() {
+      await init();
+      const model_bytes = new Uint8Array(await (await fetch("./example.ic")).arrayBuffer());
+      const _model = Model.from_bytes(model_bytes);
+      // const _model = new Model("en", "UTC");
+      if (!model) setModel(_model);
+      if (!workbookState) setWorkbookState(new WorkbookState());
+    }
+    start();
+  }, []);
+
+  if (!model || !workbookState) {
+    return <div>Loading</div>;
+  }
+
+  // We could use context for model, but the problem is that it should initialized to null.
+  // Passing the property down makes sure it is always defined.
+  return (
+    <Workbook model={model} workbookState={workbookState} />
+  );
+}
+
+export default App;
+

webapp/src/components/README.md

@@ -0,0 +1,12 @@
+# Keyboard and mouse events architecture
+
+This document describes the architecture of the keyboard navigation and mouse events in IronCalc Web
+
+There are two modes for mouse events:
+
+* Normal mode: clicking a cell selects it, clicking on a sheet opens it
+* Browse mode: clicking on a cell updates the formula, etc
+
+While in browse mode some mouse events might end the browse mode
+
+We follow Excel's way of navigating a spreadsheet

webapp/src/components/WorksheetCanvas/constants.ts

@@ -0,0 +1,18 @@
+export const headerCornerBackground = '#FFF';
+export const headerTextColor = '#333';
+export const headerBackground = '#FFF';
+export const headerGlobalSelectorColor = '#EAECF4';
+export const headerSelectedBackground = '#EEEEEE';
+export const headerFullSelectedBackground = '#D3D6E9';
+export const headerSelectedColor = '#333';
+export const headerBorderColor = '#DEE0EF';
+
+export const gridColor = '#D3D6E9';
+export const gridSeparatorColor = '#D3D6E9';
+export const defaultTextColor = '#2E414D';
+
+export const outlineColor = '#F2994A';
+export const outlineBackgroundColor = '#F2994A1A';
+
+export const LAST_COLUMN = 16_384;
+export const LAST_ROW = 1_048_576;

webapp/src/components/WorksheetCanvas/types.ts

@@ -0,0 +1,23 @@
+export interface Cell {
+  row: number;
+  column: number;
+}
+
+export interface Area {
+  rowStart: number;
+  rowEnd: number;
+  columnStart: number;
+  columnEnd: number;
+}
+
+export interface SheetArea extends Area {
+  sheet: number;
+  color: string;
+}
+
+interface AreaWithBorderInterface extends Area {
+  border: "left" | "top" | "right" | "bottom";
+}
+
+export type AreaWithBorder = AreaWithBorderInterface | null;
+

webapp/src/components/WorksheetCanvas/util.ts

@@ -0,0 +1,396 @@
+const letters = [
+    'A',
+    'B',
+    'C',
+    'D',
+    'E',
+    'F',
+    'G',
+    'H',
+    'I',
+    'J',
+    'K',
+    'L',
+    'M',
+    'N',
+    'O',
+    'P',
+    'Q',
+    'R',
+    'S',
+    'T',
+    'U',
+    'V',
+    'W',
+    'X',
+    'Y',
+    'Z',
+  ];
+  interface Reference {
+    row: number;
+    column: number;
+    absoluteRow: boolean;
+    absoluteColumn: boolean;
+  }
+  
+  export function referenceToString(rf: Reference): string {
+    const absC = rf.absoluteColumn ? '$' : '';
+    const absR = rf.absoluteRow ? '$' : '';
+    return absC + columnNameFromNumber(rf.column) + absR + rf.row;
+  }
+  
+  export function columnNameFromNumber(column: number): string {
+    let columnName = '';
+    let index = column;
+    while (index > 0) {
+      columnName = `${letters[(index - 1) % 26]}${columnName}`;
+      index = Math.floor((index - 1) / 26);
+    }
+    return columnName;
+  }
+  
+  export function columnNumberFromName(columnName: string): number {
+    let column = 0;
+    for (const character of columnName) {
+      const index = (character.codePointAt(0) ?? 0) - 64;
+      column = column * 26 + index;
+    }
+    return column;
+  }
+  
+  // EqualTo Color Palette
+  export function getColor(index: number, alpha = 1): string {
+    const colors = [
+      {
+        name: 'Cyan',
+        rgba: [89, 185, 188, 1],
+        hex: '#59B9BC',
+      },
+      {
+        name: 'Flamingo',
+        rgba: [236, 87, 83, 1],
+        hex: '#EC5753',
+      },
+      {
+        hex: '#3358B7',
+        rgba: [51, 88, 183, 1],
+        name: 'Blue',
+      },
+      {
+        hex: '#F8CD3C',
+        rgba: [248, 205, 60, 1],
+        name: 'Yellow',
+      },
+      {
+        hex: '#3BB68A',
+        rgba: [59, 182, 138, 1],
+        name: 'Emerald',
+      },
+      {
+        hex: '#523E93',
+        rgba: [82, 62, 147, 1],
+        name: 'Violet',
+      },
+      {
+        hex: '#A23C52',
+        rgba: [162, 60, 82, 1],
+        name: 'Burgundy',
+      },
+      {
+        hex: '#8CB354',
+        rgba: [162, 60, 82, 1],
+        name: 'Wasabi',
+      },
+      {
+        hex: '#D03627',
+        rgba: [208, 54, 39, 1],
+        name: 'Red',
+      },
+      {
+        hex: '#1B717E',
+        rgba: [27, 113, 126, 1],
+        name: 'Teal',
+      },
+    ];
+    if (alpha === 1) {
+      return colors[index % 10].hex;
+    }
+    const { rgba } = colors[index % 10];
+    return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${alpha})`;
+  }
+  
+  export function mergedAreas(area1: Area, area2: Area): Area {
+    return {
+      rowStart: Math.min(area1.rowStart, area2.rowStart, area1.rowEnd, area2.rowEnd),
+      rowEnd: Math.max(area1.rowStart, area2.rowStart, area1.rowEnd, area2.rowEnd),
+      columnStart: Math.min(area1.columnStart, area2.columnStart, area1.columnEnd, area2.columnEnd),
+      columnEnd: Math.max(area1.columnStart, area2.columnStart, area1.columnEnd, area2.columnEnd),
+    };
+  }
+  
+  export function getExpandToArea(area: Area, cell: Cell): AreaWithBorder {
+    let { rowStart, rowEnd, columnStart, columnEnd } = area;
+    if (rowStart > rowEnd) {
+      [rowStart, rowEnd] = [rowEnd, rowStart];
+    }
+    if (columnStart > columnEnd) {
+      [columnStart, columnEnd] = [columnEnd, columnStart];
+    }
+    const { row, column } = cell;
+    if (row <= rowEnd && row >= rowStart && column >= columnStart && column <= columnEnd) {
+      return null;
+    }
+    // Two rules:
+    //   * The extendTo area must be larger than the selected area
+    //   * The extendTo area must be of the same width or the same height as the selected area
+    if (row >= rowEnd && column >= columnStart) {
+      // Normal case: we are expanding down and right
+      if (row - rowEnd > column - columnEnd) {
+        // Expanding by rows (down)
+        return {
+          rowStart: rowEnd + 1,
+          rowEnd: row,
+          columnStart,
+          columnEnd,
+          border: 'top',
+        };
+      }
+      // expanding by columns (right)
+      return {
+        rowStart,
+        rowEnd,
+        columnStart: columnEnd + 1,
+        columnEnd: column,
+        border: 'left',
+      };
+    }
+    if (row >= rowEnd && column <= columnStart) {
+      // We are expanding down and left
+      if (row - rowEnd > columnStart - column) {
+        // Expanding by rows (down)
+        return {
+          rowStart: rowEnd + 1,
+          rowEnd: row,
+          columnStart,
+          columnEnd,
+          border: 'top',
+        };
+      }
+      // Expanding by columns (left)
+      return {
+        rowStart,
+        rowEnd,
+        columnStart: column,
+        columnEnd: columnStart - 1,
+        border: 'right',
+      };
+    }
+    if (row <= rowEnd && column >= columnEnd) {
+      // We are expanding up and right
+      if (rowStart - row > column - columnEnd) {
+        // Expanding by rows (up)
+        return {
+          rowStart: row,
+          rowEnd: rowStart - 1,
+          columnStart,
+          columnEnd,
+          border: 'bottom',
+        };
+      }
+      // Expanding by columns (right)
+      return {
+        rowStart,
+        rowEnd,
+        columnStart: columnEnd + 1,
+        columnEnd: column,
+        border: 'left',
+      };
+    }
+    if (row <= rowEnd && column <= columnStart) {
+      // We are expanding up and left
+      if (rowStart - row > columnStart - column) {
+        // Expanding by rows (up)
+        return {
+          rowStart: row,
+          rowEnd: rowStart - 1,
+          columnStart,
+          columnEnd,
+          border: 'bottom',
+        };
+      }
+      // Expanding by columns (left)
+      return {
+        rowStart,
+        rowEnd,
+        columnStart: column,
+        columnEnd: columnStart - 1,
+        border: 'right',
+      };
+    }
+    return null;
+  }
+  
+  /**
+   *  Returns true if the keypress should start editing
+   */
+  export function isEditingKey(key: string): boolean {
+    if (key.length !== 1) {
+      return false;
+    }
+    const code = key.codePointAt(0) ?? 0;
+    if (code > 0 && code < 255) {
+      return true;
+    }
+    return false;
+  }
+  
+  // /  Common types
+  
+  export interface Area {
+    rowStart: number;
+    rowEnd: number;
+    columnStart: number;
+    columnEnd: number;
+  }
+  
+  interface AreaWithBorderInterface extends Area {
+    border: 'left' | 'top' | 'right' | 'bottom';
+  }
+  
+  export type AreaWithBorder = AreaWithBorderInterface | null;
+  
+  export interface Cell {
+    row: number;
+    column: number;
+  }
+  
+  export interface ScrollPosition {
+    left: number;
+    top: number;
+  }
+  
+  export interface StateSettings {
+    selectedCell: Cell;
+    selectedArea: Area;
+    scrollPosition: ScrollPosition;
+    extendToArea: AreaWithBorder;
+  }
+  
+  export type Dispatch<A> = (value: A) => void;
+  export type SetStateAction<S> = S | ((prevState: S) => S);
+  
+  export enum FocusType {
+    Cell = 'cell',
+    FormulaBar = 'formula-bar',
+  }
+  
+  /**
+   *  In Excel there are two "modes" of editing
+   *   * `init`: When you start typing in a cell. In this mode arrow keys will move away from the cell
+   *   * `edit`: If you double click on a cell or click in the cell while editing.
+   *     In this mode arrow keys will move within the cell.
+   *
+   * In a formula bar mode is always `edit`.
+   */
+  export type CellEditMode = 'init' | 'edit';
+  export interface CellEditingType {
+    /**
+     * ID of cell editing. Useful when one edit transforms into another and some code needs to run
+     * when target changes.
+     *
+     * Due to problems with focus management (see #339) it's possible to start a new cell editing
+     * without properly cleaning up previous one (lose focus in workbook, regain focus NOT in
+     * the input and then use the keyboard.
+     */
+    id: number;
+    sheet: number;
+    row: number;
+    column: number;
+    text: string;
+    base: string;
+    mode: CellEditMode;
+    focus: FocusType;
+  }
+  
+  export type NavigationKey = 'ArrowRight' | 'ArrowLeft' | 'ArrowDown' | 'ArrowUp' | 'Home' | 'End';
+  
+  export const isNavigationKey = (key: string): key is NavigationKey =>
+    ['ArrowRight', 'ArrowLeft', 'ArrowDown', 'ArrowUp', 'Home', 'End'].includes(key);
+  
+  function nameNeedsQuoting(name: string): boolean {
+    const chars = [' ', '(', ')', "'", '$', ',', ';', '-', '+', '{', '}'];
+    const l = chars.length;
+    for (let index = 0; index < l; index += 1) {
+      if (name.includes(chars[index])) {
+        return true;
+      }
+    }
+    return false;
+  }
+  
+  // FIXME: We should use the function of a similar name in the rust code.
+  export const quoteSheetName = (name: string): string => {
+    if (nameNeedsQuoting(name)) {
+      return `'${name.replace("'", "''")}'`;
+    }
+    return name;
+  };
+  
+  export function cellReprToRowColumn(cellRepr: string): { row: number; column: number } {
+    let row = 0;
+    let column = 0;
+    for (const character of cellRepr) {
+      if (Number.isNaN(Number.parseInt(character, 10))) {
+        column *= 26;
+        const characterCode = character.codePointAt(0);
+        const ACharacterCode = 'A'.codePointAt(0);
+        if (typeof characterCode === 'undefined' || typeof ACharacterCode === 'undefined') {
+          throw new TypeError('Failed to find character code');
+        }
+        const deltaCodes = characterCode - ACharacterCode;
+        if (deltaCodes < 0) {
+          throw new Error('Incorrect character');
+        }
+        column += deltaCodes + 1;
+      } else {
+        row *= 10;
+        row += Number.parseInt(character, 10);
+      }
+    }
+    return { row, column };
+  }
+  
+  export const getMessageCellText = (
+    cell: string,
+    getMessageSheetNumber: (sheet: string) => number | undefined,
+    getCellText?: (sheet: number, row: number, column: number) => string | undefined,
+  ) => {
+    const messageMatch = /^=?(?<sheet>\w+)!(?<cell>\w+)/.exec(cell);
+    if (messageMatch && messageMatch.groups) {
+      const messageSheet = getMessageSheetNumber(messageMatch.groups.sheet);
+      const dynamicIconCell = cellReprToRowColumn(messageMatch.groups.cell);
+      if (messageSheet !== undefined && getCellText) {
+        return getCellText(messageSheet, dynamicIconCell.row, dynamicIconCell.column) || '';
+      }
+    }
+    return '';
+  };
+  
+  export const getCellAddress = (selectedArea: Area, selectedCell?: Cell) => {
+    const isSingleCell =
+      selectedArea.rowStart === selectedArea.rowEnd &&
+      selectedArea.columnEnd === selectedArea.columnStart;
+  
+    return isSingleCell && selectedCell
+      ? `${columnNameFromNumber(selectedCell.column)}${selectedCell.row}`
+      : `${columnNameFromNumber(selectedArea.columnStart)}${
+          selectedArea.rowStart
+        }:${columnNameFromNumber(selectedArea.columnEnd)}${selectedArea.rowEnd}`;
+  };
+  
+  export enum Border {
+    Top = 'top',
+    Bottom = 'bottom',
+    Right = 'right',
+    Left = 'left',
+  }

webapp/src/components/borderPicker.tsx

@@ -0,0 +1,566 @@
+import React, { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  BorderBottomIcon,
+  BorderCenterHIcon,
+  BorderCenterVIcon,
+  BorderInnerIcon,
+  BorderLeftIcon,
+  BorderOuterIcon,
+  BorderRightIcon,
+  BorderTopIcon,
+  BorderNoneIcon,
+  BorderStyleIcon,
+} from "../icons";
+import ColorPicker from "./colorPicker";
+import Popover, { PopoverOrigin } from "@mui/material/Popover";
+import {
+  Check,
+  ChevronDown,
+  Grid2X2 as BorderAllIcon,
+  PencilLine,
+  ChevronRight,
+} from "lucide-react";
+import { styled } from "@mui/material/styles";
+import { theme } from "../theme";
+import { BorderOptions, BorderStyle, BorderType } from "@ironcalc/wasm";
+
+type BorderPickerProps = {
+  className?: string;
+  onChange: (border: BorderOptions) => void;
+  anchorEl: React.RefObject<HTMLElement>;
+  anchorOrigin?: PopoverOrigin;
+  transformOrigin?: PopoverOrigin;
+  open: boolean;
+};
+
+const BorderPicker = (properties: BorderPickerProps) => {
+  const { t } = useTranslation();
+
+  const [borderSelected, setBorderSelected] = useState(BorderType.None);
+  const [borderColor, setBorderColor] = useState("#000000");
+  const [borderStyle, setBorderStyle] = useState(BorderStyle.Thin);
+  const [colorPickerOpen, setColorPickerOpen] = useState(false);
+  const [stylePickerOpen, setStylePickerOpen] = useState(false);
+  const closePicker = (): void => {
+    properties.onChange({
+      color: borderColor,
+      style: borderStyle,
+      border: borderSelected,
+    });
+  };
+  const borderColorButton = useRef(null);
+  const borderStyleButton = useRef(null);
+  return (
+    <>
+      <StyledPopover
+        open={properties.open}
+        onClose={(): void => closePicker()}
+        anchorEl={properties.anchorEl.current}
+        anchorOrigin={
+          properties.anchorOrigin || { vertical: "bottom", horizontal: "left" }
+        }
+        transformOrigin={
+          properties.transformOrigin || { vertical: "top", horizontal: "left" }
+        }
+      >
+        <BorderPickerDialog>
+          <Borders>
+            <Line>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.All}
+                onClick={() => {
+                  if (borderSelected === BorderType.All) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.All);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderAllIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.Inner}
+                onClick={() => {
+                  if (borderSelected === BorderType.Inner) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.Inner);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderInnerIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.CenterH}
+                onClick={() => {
+                  if (borderSelected === BorderType.CenterH) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.CenterH);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderCenterHIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.CenterV}
+                onClick={() => {
+                  if (borderSelected === BorderType.CenterV) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.CenterV);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderCenterVIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.Outer}
+                onClick={() => {
+                  if (borderSelected === BorderType.Outer) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.Outer);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderOuterIcon />
+              </Button>
+            </Line>
+            <Line>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.None}
+                onClick={() => {
+                  if (borderSelected === BorderType.None) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.None);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderNoneIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.Top}
+                onClick={() => {
+                  if (borderSelected === BorderType.Top) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.Top);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderTopIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.Right}
+                onClick={() => {
+                  if (borderSelected === BorderType.Right) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.Right);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderRightIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.Bottom}
+                onClick={() => {
+                  if (borderSelected === BorderType.Bottom) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.Bottom);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderBottomIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.Left}
+                onClick={() => {
+                  if (borderSelected === BorderType.Left) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.Left);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderLeftIcon />
+              </Button>
+            </Line>
+          </Borders>
+          <Divider />
+          <Styles>
+            <ButtonWrapper onClick={() => setColorPickerOpen(true)}>
+              <Button
+                type="button"
+                $pressed={false}
+                disabled={false}
+                ref={borderColorButton}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <PencilLine />
+              </Button>
+              <div style={{flexGrow:2}}>Border color</div>
+              <ChevronRightStyled />
+            </ButtonWrapper>
+            <ButtonWrapper onClick={() => setStylePickerOpen(true)} ref={borderStyleButton}>
+              <Button
+                type="button"
+                $pressed={false}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderStyleIcon />
+              </Button>
+              <div style={{flexGrow:2}}>Border style</div>
+              <ChevronRightStyled />
+            </ButtonWrapper>
+          </Styles>
+        </BorderPickerDialog>
+        <ColorPicker
+          color={borderColor}
+          onChange={(color): void => {
+            setBorderColor(color);
+            setColorPickerOpen(false);
+          }}
+          anchorEl={borderColorButton}
+          open={colorPickerOpen}
+        />
+        <StyledPopover
+          open={stylePickerOpen}
+          onClose={(): void => {
+            setStylePickerOpen(false);
+          }}
+          anchorEl={borderStyleButton.current}
+          anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+          transformOrigin={{ vertical: 38, horizontal: -6 }}
+        >
+          <BorderStyleDialog>
+          <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Dashed);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.None}
+            >
+              <BorderDescription>None</BorderDescription>
+              <NoneLine />
+            </LineWrapper>
+            <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Thin);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.Thin}
+            >
+              <BorderDescription>Thin</BorderDescription>
+              <SolidLine />
+            </LineWrapper>
+            <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Medium);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.Medium}
+            >
+              <BorderDescription>Medium</BorderDescription>
+              <MediumLine />
+            </LineWrapper>
+            <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Thick);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.Thick}
+            >
+              <BorderDescription>Thick</BorderDescription>
+              <ThickLine />
+            </LineWrapper>
+            <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Dotted);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.Dotted}
+            >
+              <BorderDescription>Dotted</BorderDescription>
+              <DottedLine />
+            </LineWrapper>
+            <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Dashed);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.Dashed}
+            >
+              <BorderDescription>Dashed</BorderDescription>
+              <DashedLine />
+            </LineWrapper>
+            <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Dashed);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.Double}
+            >
+              <BorderDescription>Double</BorderDescription>
+              <DoubleLine />
+            </LineWrapper>
+          </BorderStyleDialog>
+        </StyledPopover>
+      </StyledPopover>
+    </>
+  );
+};
+
+type LineWrapperProperties = { $checked: boolean };
+const LineWrapper = styled("div")<LineWrapperProperties>`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: ${({ $checked }): string => {
+    if ($checked) {
+      return '#EEEEEE;';
+    } else {
+      return 'inherit;';
+    }
+  }};
+  &:hover {
+    border: 1px solid #EEEEEE;
+  }
+  padding:8px;
+  cursor: pointer;
+  border-radius: 4px;
+  border: 1px solid white;
+`;
+
+const CheckIconWrapper = styled("div")`
+  width: 12px;
+`;
+
+type CheckIconProperties = { $checked: boolean };
+const CheckIcon = styled("div")<CheckIconProperties>`
+  width: 2px;
+  background-color: #EEE;
+  height: 28px;
+  visibility: ${({ $checked }): string => {
+    if ($checked) {
+      return "visible";
+    }
+    return "hidden";
+  }};
+`;
+const NoneLine = styled("div")`
+  width: 68px;
+  border-top: 1px solid #E0E0E0;
+`;
+const SolidLine = styled("div")`
+  width: 68px;
+  border-top: 1px solid #333333;
+`;
+const MediumLine = styled("div")`
+  width: 68px;
+  border-top: 2px solid #333333;
+`;
+const ThickLine = styled("div")`
+  width: 68px;
+  border-top: 3px solid #333333;
+`;
+const DashedLine = styled("div")`
+  width: 68px;
+  border-top: 1px dashed #333333;
+`;
+const DottedLine = styled("div")`
+  width: 68px;
+  border-top: 1px dotted #333333;
+`;
+const DoubleLine = styled('div')`
+  width: 68px;
+  border-top: 3px double #333333;
+`;
+
+const Divider = styled("div")`
+  display: inline-flex;
+  heigh: 1px;
+  border-bottom: 1px solid #EEE;
+  margin-left: 0px;
+  margin-right: 0px;
+`;
+
+const Borders = styled("div")`
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 4px;
+`;
+
+const Styles = styled("div")`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Line = styled("div")`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+const ButtonWrapper = styled("div")`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  &:hover {
+    background-color: #EEE;
+    border-top-color: ${(): string => theme.palette.grey["400"]};
+  }
+  cursor: pointer;
+  padding: 8px
+`;
+
+const BorderStyleDialog = styled("div")`
+  background: ${({ theme }): string => theme.palette.background.default};
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const StyledPopover = styled(Popover)`
+  .MuiPopover-paper {
+    border-radius: 10px;
+    border: 0px solid ${({ theme }): string => theme.palette.background.default};
+    box-shadow: 1px 2px 8px rgba(139, 143, 173, 0.5);
+  }
+  .MuiPopover-padding {
+    padding: 0px;
+  }
+  .MuiList-padding {
+    padding: 0px;
+  }
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  font-size: 13px;
+`;
+
+const BorderPickerDialog = styled("div")`
+  background: ${({ theme }): string => theme.palette.background.default};
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+`;
+
+const BorderDescription = styled("div")`
+width: 70px;
+`;
+
+// type TypeButtonProperties = { $pressed: boolean; $underlinedColor?: string };
+// const Button = styled.button<TypeButtonProperties>`
+//   width: 23px;
+//   height: 23px;
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+//   font-size: 14px;
+//   border-radius: 2px;
+//   margin-right: 5px;
+//   transition: all 0.2s;
+
+//   ${({ theme, disabled, $pressed, $underlinedColor }): string => {
+//     if (disabled) {
+//       return `
+//       color: ${theme.palette.grey['600']};
+//       cursor: default;
+//     `;
+//     }
+//     return `
+//       border-top: ${$underlinedColor ? '3px solid #FFF' : 'none'};
+//       border-bottom: ${$underlinedColor ? `3px solid ${$underlinedColor}` : 'none'};
+//       color: ${theme.palette.text.primary};
+//       background-color: ${$pressed ? theme.palette.grey['600'] : '#FFF'};
+//       &:hover {
+//         background-color: ${theme.palette.grey['400']};
+//         border-top-color: ${theme.palette.grey['400']};
+//       }
+//     `;
+//   }}
+// `;
+
+type TypeButtonProperties = { $pressed: boolean; $underlinedColor?: string };
+const Button = styled("button")<TypeButtonProperties>(
+  ({ disabled, $pressed, $underlinedColor }) => {
+    let result: Record<string, any> = {
+      width: "24px",
+      height: "24px",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      // fontSize: "26px",
+      border: "0px solid #fff",
+      borderRadius: "2px",
+      marginRight: "5px",
+      transition: "all 0.2s",
+      cursor: "pointer",
+      padding: "0px",
+    };
+    if (disabled) {
+      result.color = theme.palette.grey["600"];
+      result.cursor = "default";
+    } else {
+      result.borderTop = $underlinedColor ? "3px solid #FFF" : "none";
+      result.borderBottom = $underlinedColor
+        ? `3px solid ${$underlinedColor}`
+        : "none";
+      (result.color = "#21243A"),
+        (result.backgroundColor = $pressed
+          ? theme.palette.grey["600"]
+          : "inherit");
+      result["&:hover"] = {
+        backgroundColor: "#F1F2F8",
+        borderTopColor: "#F1F2F8",
+      };
+      result["svg"] = {
+        width: "16px",
+        height: "16px",
+      };
+    }
+    return result;
+  }
+);
+
+const ChevronRightStyled = styled(ChevronRight)`
+  width: 16px;
+  height: 16px;
+`;
+
+export default BorderPicker;

webapp/src/components/colorPicker.tsx

@@ -0,0 +1,262 @@
+import styled from "@emotion/styled";
+import Popover, { PopoverOrigin } from "@mui/material/Popover";
+import React, { useEffect, useRef, useState } from "react";
+import { HexColorInput, HexColorPicker } from "react-colorful";
+import { theme } from "../theme";
+
+type ColorPickerProps = {
+  className?: string;
+  color: string;
+  onChange: (color: string) => void;
+  anchorEl: React.RefObject<HTMLElement>;
+  anchorOrigin?: PopoverOrigin;
+  transformOrigin?: PopoverOrigin;
+  open: boolean;
+};
+
+const colorPickerWidth = 240;
+const colorfulHeight = 185; // 150 + 15 + 20
+
+const ColorPicker = (properties: ColorPickerProps) => {
+  const [color, setColor] = useState<string>(properties.color);
+  const recentColors = useRef<string[]>([]);
+
+  const closePicker = (newColor: string): void => {
+    const maxRecentColors = 14;
+    properties.onChange(newColor);
+    const colors = recentColors.current.filter((c) => c !== newColor);
+    recentColors.current = [newColor, ...colors].slice(0, maxRecentColors);
+  };
+
+  useEffect(() => {
+    setColor(properties.color);
+  }, [properties.color]);
+
+  const presetColors = [
+    "#FFFFFF",
+    "#1B717E",
+    "#59B9BC",
+    "#3BB68A",
+    "#8CB354",
+    "#F8CD3C",
+    "#EC5753",
+    "#A23C52",
+    "#D03627",
+    "#523E93",
+    "#3358B7",
+  ];
+
+  return (
+    <Popover
+      open={properties.open}
+      onClose={(): void => closePicker(color)}
+      anchorEl={properties.anchorEl.current}
+      anchorOrigin={
+        properties.anchorOrigin || { vertical: "bottom", horizontal: "left" }
+      }
+      transformOrigin={
+        properties.transformOrigin || { vertical: "top", horizontal: "left" }
+      }
+    >
+      <ColorPickerDialog>
+        <HexColorPicker
+          color={color}
+          onChange={(newColor): void => {
+            setColor(newColor);
+          }}
+        />
+        <ColorPickerInput>
+          <HexWrapper>
+            <HexLabel>{"Hex"}</HexLabel>
+            <HexColorInputBox>
+              <HashLabel>{"#"}</HashLabel>
+              <HexColorInput
+                color={color}
+                onChange={(newColor): void => {
+                  setColor(newColor);
+                }}
+              />
+            </HexColorInputBox>
+          </HexWrapper>
+          <Swatch $color={color} onClick={(): void => {
+                closePicker(color);
+              }} />
+        </ColorPickerInput>
+        <HorizontalDivider />
+        <ColorList>
+          {presetColors.map((presetColor) => (
+            <Button
+              key={presetColor}
+              $color={presetColor}
+              onClick={(): void => {
+                closePicker(presetColor);
+              }}
+            />
+          ))}
+        </ColorList>
+        <HorizontalDivider />
+        <RecentLabel>{"Recent"}</RecentLabel>
+        <ColorList>
+          {recentColors.current.map((recentColor) => (
+            <Button
+              key={recentColor}
+              $color={recentColor}
+              onClick={(): void => {
+                closePicker(recentColor);
+              }}
+            />
+          ))}
+        </ColorList>
+      </ColorPickerDialog>
+    </Popover>
+  );
+};
+
+const RecentLabel = styled.div`
+  font-size: 12px;
+  color: ${theme.palette.text.secondary};
+`;
+
+const ColorList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+`;
+
+const Button = styled.button<{ $color: string }>`
+  width: 20px;
+  height: 20px;
+  ${({ $color }): string => {
+    if ($color.toUpperCase() === "#FFFFFF") {
+      return `border: 1px solid ${theme.palette.grey["600"]};`;
+    }
+    return `border: 1px solid ${$color};`;
+  }}
+  background-color: ${({ $color }): string => {
+    return $color;
+  }};
+  box-sizing: border-box;
+  margin-top: 10px;
+  margin-right: 10px;
+  border-radius: 2px;
+`;
+
+const HorizontalDivider = styled.div`
+  height: 0px;
+  width: 100%;
+  border-top: 1px solid ${theme.palette.grey["400"]};
+  margin-top: 15px;
+  margin-bottom: 5px;
+`;
+
+// const StyledPopover = styled(Popover)`
+//   .MuiPopover-paper {
+//     border-radius: 10px;
+//     border: 0px solid ${theme.palette.background.default};
+//     box-shadow: 1px 2px 8px rgba(139, 143, 173, 0.5);
+//   }
+//   .MuiPopover-padding {
+//     padding: 0px;
+//   }
+//   .MuiList-padding {
+//     padding: 0px;
+//   }
+// `;
+
+const ColorPickerDialog = styled.div`
+  background: ${theme.palette.background.default};
+  width: ${colorPickerWidth}px;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+
+  & .react-colorful {
+    height: ${colorfulHeight}px;
+    width: ${colorPickerWidth}px;
+  }
+  & .react-colorful__saturation {
+    border-bottom: none;
+    border-radius: 5px;
+  }
+  & .react-colorful__hue {
+    height: 20px;
+    margin-top: 15px;
+    border-radius: 5px;
+  }
+  & .react-colorful__saturation-pointer {
+    width: 14px;
+    height: 14px;
+  }
+  & .react-colorful__hue-pointer {
+    width: 7px;
+    border-radius: 3px;
+  }
+`;
+
+const HashLabel = styled.div`
+  margin: auto 0px auto 10px;
+  font-size: 13px;
+  color: #7d8ec2;
+  font-family: ${theme.typography.button.fontFamily};
+`;
+
+const HexLabel = styled.div`
+  margin: auto 10px auto 0px;
+  font-size: 12px;
+  display: inline-flex;
+  font-family: ${theme.typography.button.fontFamily};
+`;
+
+const HexColorInputBox = styled.div`
+  display: inline-flex;
+  flex-grow: 1;
+  margin-right: 10px;
+  width: 140px;
+  height: 28px;
+  border: 1px solid ${theme.palette.grey["600"]};
+  border-radius: 5px;
+`;
+
+const HexWrapper = styled.div`
+  display: flex;
+  flex-grow: 1;
+  & input {
+    min-width: 0px;
+    border: 0px;
+    background: ${theme.palette.background.default};
+    outline: none;
+    font-family: ${theme.typography.button.fontFamily};
+    font-size: 12px;
+    text-transform: uppercase;
+    text-align: right;
+    padding-right: 10px;
+    border-radius: 5px;
+  }
+
+  & input:focus {
+    border-color: #4298ef;
+  }
+`;
+
+const Swatch = styled.div<{ $color: string }>`
+  display: inline-flex;
+  ${({ $color }): string => {
+    if ($color.toUpperCase() === "#FFFFFF") {
+      return `border: 1px solid ${theme.palette.grey["600"]};`;
+    }
+    return `border: 1px solid ${$color};`;
+  }}
+  background-color: ${({ $color }): string => $color};
+  width: 28px;
+  height: 28px;
+  border-radius: 5px;
+`;
+
+const ColorPickerInput = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 15px;
+`;
+
+export default ColorPicker;

webapp/src/components/editor/editor.tsx

@@ -0,0 +1,420 @@
+import {
+  CSSProperties,
+  useCallback,
+  useEffect,
+  useState,
+  KeyboardEvent,
+  useContext,
+} from "react";
+import { useRef } from "react";
+import EditorContext, { Area } from "./editorContext";
+import { getStringRange } from "./util";
+
+/**
+ * This is the Cell Editor for IronCalc
+ * I uses a transparent textarea and a styled mask. What you see is the HTML styled content of the mask
+ * and the caret from the textarea. The alternative would be to have a 'contenteditable' div.
+ * That turns out to be a much more difficult implementation.
+ *
+ * The editor grows horizontally with text if it fits in the screen.
+ * If it doesn't fit, it wraps and grows vertically. If it doesn't fit vertically it scrolls.
+ *
+ * Many keyboard and mouse events are handled gracefully by the textarea in full or in part.
+ * For example letter key strokes like 'q' or '1' are handled full by the textarea.
+ * Some keyboard events like "RightArrow" might need to be handled separately and let them bubble up,
+ * or might be handled by the textarea, depending on the "editor mode".
+ * Some other like "Enter" we need to intercept and change the normal behaviour.
+ */
+
+const commonCSS: CSSProperties = {
+  fontWeight: "inherit",
+  fontFamily: "inherit",
+  fontSize: "inherit",
+  position: "absolute",
+  left: 0,
+  top: 0,
+  whiteSpace: "pre",
+  width: "100%",
+  padding: 0,
+};
+
+interface Cell {
+  sheet: number;
+  row: number;
+  column: number;
+}
+
+interface EditorOptions {
+  minimalWidth: number;
+  minimalHeight: number;
+  textColor: string;
+  originalText: string;
+  getStyledText: (
+    text: string,
+    insertRangeText: string
+  ) => {
+    html: JSX.Element[];
+    isInReferenceMode: boolean;
+  };
+  onEditEnd: (text: string) => void;
+  display: boolean;
+  cell: Cell;
+  sheetNames: string[];
+}
+
+// You can either be editing a formula or content.
+// When editing content (behaviour is common to Excel and Google Sheets):
+// * If you start editing by typing you are in *accept* mode
+// * If you start editing by F2 you are in *cruise* mode
+// * If you start editing by double click you are in *cruise* mode
+// In Google Sheets "Enter" starts editing and puts you in *cruise* mode. We do not do that
+// Once you are in cruise mode it is not possible to switch to accept mode
+// The only way to go from accept mode to cruise mode is clicking in the content somewhere
+
+// When editing a formula.
+// In Google Sheets you are either in insert mode or cruise mode.
+// You can get back to accept mode if you delete the whole formula
+// In Excel you can be either in insert or accept but if you click in the formula body
+// you switch to cruise mode. Once in cruise mode you can go to insert mode by selecting a range.
+// Then you are back in accept/insert modes
+
+const Editor = (options: EditorOptions) => {
+  const {
+    minimalWidth,
+    minimalHeight,
+    textColor,
+    onEditEnd,
+    originalText,
+    display,
+    cell,
+    sheetNames,
+  } = options;
+
+  const [width, setWidth] = useState(minimalWidth);
+  const [height, setHeight] = useState(minimalHeight);
+
+  const { editorContext, setEditorContext } = useContext(EditorContext);
+
+  const setBaseText = (newText: string) => {
+    console.log('Calling setBaseText');
+    setEditorContext((c) => {
+      return {
+        ...c,
+        baseText: newText,
+      };
+    });
+  };
+
+  const insertRangeText = editorContext.insertRange
+    ? getStringRange(editorContext.insertRange, sheetNames)
+    : "";
+
+  const baseText = editorContext.baseText;
+  const text = baseText + insertRangeText;
+  // console.log('baseText', baseText, 'insertRange:', insertRangeText);
+
+  const formulaRef = useRef<HTMLDivElement>(null);
+  const maskRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // useEffect(() => {
+  //   setBaseText(originalText);
+  // }, [cell]);
+
+  const { html: styledFormula, isInReferenceMode } = options.getStyledText(
+    baseText,
+    insertRangeText
+  );
+
+  if (display && textareaRef.current) {
+    textareaRef.current.focus();
+  }
+
+  useEffect(() => {
+    if (formulaRef.current) {
+      const scrollWidth = formulaRef.current.scrollWidth;
+      if (scrollWidth > width) {
+        setWidth(scrollWidth);
+      } else if (scrollWidth <= minimalWidth) {
+        setWidth(minimalWidth);
+      }
+      const scrollHeight = formulaRef.current.scrollHeight;
+      if (scrollHeight > height) {
+        setHeight(scrollHeight);
+      }
+    }
+  }, [text]);
+
+  useEffect(() => {
+    if (isInReferenceMode) {
+      setEditorContext((c) => {
+        return {
+          ...c,
+          mode: "insert",
+        };
+      });
+    } else {
+      setEditorContext((c) => {
+        return {
+          ...c,
+          mode: "cruise",
+          insertRange: null,
+        };
+      });
+    }
+  }, [isInReferenceMode]);
+
+  useEffect(() => {
+    if (display && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [display]);
+
+  // console.log("Ok, this is running", text, editorContext.id);
+
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      const { key, shiftKey, altKey } = event;
+      const textarea = textareaRef.current;
+      const mode = editorContext.mode;
+      if (!textarea) {
+        return;
+      }
+      switch (key) {
+        case "Enter": {
+          if (altKey) {
+            // new line
+            const start = textarea.selectionStart;
+            const end = textarea.selectionEnd;
+            const newText = text.slice(0, start) + "\n" + text.slice(end);
+            setBaseText(newText);
+            setTimeout(() => {
+              textarea.setSelectionRange(start + 1, start + 1);
+            }, 1);
+            event.stopPropagation();
+            event.preventDefault();
+            return;
+          } else {
+            // end edit
+            onEditEnd(text);
+            textarea.blur();
+            // event bubbles up
+            return;
+          }
+          break;
+        }
+        case "Escape": {
+          setBaseText(originalText);
+          textarea.blur();
+          event.stopPropagation();
+          event.preventDefault();
+          break;
+        }
+        case "ArrowLeft": {
+          if (mode === "accept") {
+            onEditEnd(text);
+            textarea.blur();
+            // event bubbles up
+            return;
+          } else if (mode == "insert") {
+            if (shiftKey) {
+              // increase the inserted range to the left
+              if (!editorContext.insertRange) {
+                setEditorContext((c) => {
+                  return {
+                    ...c,
+                    insertRange: {
+                      absoluteColumnEnd: false,
+                      absoluteColumnStart: false,
+                      absoluteRowEnd: false,
+                      absoluteRowStart: false,
+                      sheet: cell.sheet,
+                      rowStart: cell.row,
+                      rowEnd: cell.row,
+                      columnStart: cell.column,
+                      columnEnd: cell.column,
+                    },
+                  };
+                });
+              } else {
+                // const r = insertRage;
+                // r.columnStart = Math.max(r.columnStart - 1, 1);
+                // setInsertRange(r);
+              }
+            } else {
+              // move inserted cell to the left
+              if (!editorContext.insertRange) {
+                setEditorContext((c) => {
+                  return {
+                    ...c,
+                    insertRange: {
+                      absoluteColumnEnd: false,
+                      absoluteColumnStart: false,
+                      absoluteRowEnd: false,
+                      absoluteRowStart: false,
+                      sheet: cell.sheet,
+                      rowStart: cell.row,
+                      rowEnd: cell.row,
+                      columnStart: cell.column,
+                      columnEnd: cell.column,
+                    },
+                  };
+                });
+              } else {
+                setEditorContext((c) => {
+                  const range = c.insertRange as Area;
+                  const row = range.rowStart;
+                  let column = range.columnStart - 1;
+                  if (column < 1) {
+                    column = 1;
+                  }
+                  return {
+                    ...c,
+                    insertRange: {
+                      absoluteColumnEnd: false,
+                      absoluteColumnStart: false,
+                      absoluteRowEnd: false,
+                      absoluteRowStart: false,
+                      sheet: range.sheet,
+                      rowStart: row,
+                      rowEnd: row,
+                      columnStart: column,
+                      columnEnd: column,
+                    },
+                  };
+                });
+              }
+            }
+            event.stopPropagation();
+            event.preventDefault();
+            return;
+          }
+          // We don't do anything in "cruise mode" and rely on the textarea default behaviour
+          break;
+        }
+        case "ArrowDown": {
+          if (mode === "accept") {
+            onEditEnd(text);
+            textarea.blur();
+          }
+          break;
+        }
+        case "ArrowRight": {
+          if (mode === "accept") {
+            onEditEnd(text);
+            textarea.blur();
+          }
+          break;
+        }
+        case "ArrowUp": {
+          if (mode === "accept") {
+            onEditEnd(text);
+            textarea.blur();
+          }
+          break;
+        }
+        case "Tab": {
+          onEditEnd(text);
+          textarea.blur();
+          // event bubbles up
+        }
+      }
+      if (editorContext.mode === "insert") {
+        setBaseText(text);
+        setEditorContext((context) => {
+          return {
+            ...context,
+            mode: "cruise",
+            insertRange: null,
+          };
+        });
+      }
+    },
+    [text, editorContext]
+  );
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        width,
+        height,
+        overflow: "hidden",
+        background: "#FFF",
+        display: display ? "block" : "none",
+      }}
+      onClick={(_event) => {
+        console.log("Click on wrapper");
+      }}
+      onPointerDown={() => {
+        console.log("On pointer down wrapper");
+      }}
+    >
+      <div
+        ref={maskRef}
+        style={{
+          ...commonCSS,
+          textAlign: "left",
+          pointerEvents: "none",
+          height,
+        }}
+        onClick={(_event) => {
+          console.log("Click on mask");
+        }}
+        onPointerDown={() => {
+          console.log("On pointer down mask");
+        }}
+      >
+        <div ref={formulaRef}>{styledFormula}</div>
+      </div>
+      <textarea
+        ref={textareaRef}
+        rows={1}
+        style={{
+          ...commonCSS,
+          color: "transparent",
+          backgroundColor: "transparent",
+          caretColor: textColor,
+          outline: "none",
+          resize: "none",
+          border: "none",
+          height,
+        }}
+        spellCheck="false"
+        value={text}
+        onChange={(event) => {
+          console.log("onChange", event.target.value);
+          setBaseText(event.target.value);
+        }}
+        onScroll={() => {
+          if (maskRef.current && textareaRef.current) {
+            maskRef.current.style.left = `-${textareaRef.current.scrollLeft}px`;
+            maskRef.current.style.top = `-${textareaRef.current.scrollTop}px`;
+          }
+        }}
+        onKeyDown={onKeyDown}
+        onClick={(event) => {
+          console.log("Setting mode");
+          setEditorContext((c) => {
+            return {
+              ...c,
+              mode: "cruise",
+            };
+          });
+          console.log("here");
+          // if (display) {
+          event.stopPropagation();
+          // }
+        }}
+        onBlur={() => {
+          // on blur
+        }}
+        onPointerDown={(event) => {
+          event.stopPropagation();
+        }}
+      ></textarea>
+    </div>
+  );
+};
+
+export default Editor;

webapp/src/components/editor/editorContext.ts

@@ -0,0 +1,45 @@
+import { Dispatch, SetStateAction, createContext } from "react";
+
+export interface Area {
+  sheet: number | null;
+  rowStart: number;
+  rowEnd: number;
+  columnStart: number;
+  columnEnd: number;
+  absoluteRowStart: boolean;
+  absoluteRowEnd: boolean;
+  absoluteColumnStart: boolean;
+  absoluteColumnEnd: boolean;
+}
+
+// Arrow keys behave in different ways depending on the "edit mode":
+// * In _cruise_ mode arrowy keys navigate within the editor
+// * In _accept_ mode pressing an arrow key will end editing
+// * In _insert_ mode arrow keys will change the selected range
+export type EditorMode = "cruise" | "accept" | "insert";
+
+export interface EditorState {
+  mode: EditorMode;
+  insertRange: null | Area;
+  baseText: string;
+  id: number;
+}
+
+interface EditorContextType {
+  editorContext: EditorState;
+  setEditorContext: Dispatch<
+    SetStateAction<{ mode: EditorMode; insertRange: null | Area }>
+  >;
+}
+
+const EditorContext = createContext<EditorContextType>({
+  editorContext: {
+    mode: "accept",
+    insertRange: null,
+    baseText: '',
+    id: Math.floor(Math.random()*1000),
+  },
+  setEditorContext: () => {},
+});
+
+export default EditorContext;

webapp/src/components/editor/index.tsx

@@ -0,0 +1,3 @@
+export { default } from './editor';
+
+

webapp/src/components/editor/tokenTypes.ts

@@ -0,0 +1,92 @@
+type ErrorType =
+  | 'REF'
+  | 'NAME'
+  | 'VALUE'
+  | 'DIV'
+  | 'NA'
+  | 'NUM'
+  | 'ERROR'
+  | 'NIMPL'
+  | 'SPILL'
+  | 'CALC'
+  | 'CIRC';
+
+type OpCompareType =
+  | 'LessThan'
+  | 'GreaterThan'
+  | 'Equal'
+  | 'LessOrEqualThan'
+  | 'GreaterOrEqualThan'
+  | 'NonEqual';
+
+type OpSumType = 'Add' | 'Minus';
+
+type OpProductType = 'Times' | 'Divide';
+
+interface ReferenceType {
+  sheet: string | null;
+  row: number;
+  column: number;
+  absolute_column: boolean;
+  absolute_row: boolean;
+}
+
+interface ParsedReferenceType {
+  column: number;
+  row: number;
+  absolute_column: boolean;
+  absolute_row: boolean;
+}
+
+interface Reference {
+  Reference: ReferenceType;
+}
+
+interface Range {
+  Range: {
+    sheet: string | null;
+    left: ParsedReferenceType;
+    right: ParsedReferenceType;
+  };
+}
+
+export type TokenType =
+  | 'Illegal'
+  | 'Eof'
+  | { Ident: string }
+  | { String: string }
+  | { Boolean: boolean }
+  | { Number: number }
+  | { ERROR: ErrorType }
+  | { COMPARE: OpCompareType }
+  | { SUM: OpSumType }
+  | { PRODUCT: OpProductType }
+  | 'POWER'
+  | 'LPAREN'
+  | 'RPAREN'
+  | 'COLON'
+  | 'SEMICOLON'
+  | 'LBRACKET'
+  | 'RBRACKET'
+  | 'LBRACE'
+  | 'RBRACE'
+  | 'COMMA'
+  | 'BANG'
+  | 'PERCENT'
+  | 'AND'
+  | Reference
+  | Range;
+
+export interface MarkedToken {
+  token: TokenType;
+  start: number;
+  end: number;
+}
+
+export function tokenIsReferenceType(token: TokenType): token is Reference {
+  return typeof token === 'object' && 'Reference' in token;
+}
+
+export function tokenIsRangeType(token: TokenType): token is Range {
+  return typeof token === 'object' && 'Range' in token;
+}

webapp/src/components/editor/useEditorKeyDown.ts

@@ -0,0 +1,108 @@
+import { useCallback, KeyboardEvent } from "react";
+import { WorkbookState } from "../workbookState";
+import { Model } from "@ironcalc/wasm";
+
+interface Options {
+  // onMoveCaretToStart: () => void;
+  // onMoveCaretToEnd: () => void;
+  // onEditEnd: (delta: { deltaRow: number; deltaColumn: number }) => void;
+  // onEditEscape: () => void;
+  // onReferenceCycle: () => void;
+  // text: string;
+  // setText: (text: string) => void;
+  model: Model;
+  state: WorkbookState;
+  refresh: () => void;
+}
+
+const useEditorKeydown = (
+  options: Options
+): {
+  onKeyDown: (event: KeyboardEvent) => void;
+} => {
+  const { state, model } = options;
+  const onKeyDown = useCallback((event: KeyboardEvent) => {
+    const { key, shiftKey } = event;
+    const { mode, text } = state.getEditor() ?? { mode: "init", text: "" };
+    switch (key) {
+      // case "Enter":
+      //   // options.onEditEnd({ deltaRow: 1, deltaColumn: 0 });
+      //   const { row, column } = state.getSelectedCell();
+      //   const sheet = state.getSelectedSheet();
+      //   model.setUserInput(sheet, row, column, text);
+      //   state.selectCell({ row: row + 1, column });
+      //   event.preventDefault();
+      //   event.stopPropagation();
+      //   options.refresh();
+      //   break;
+      // case 'ArrowUp': {
+      //   if (mode === 'init') {
+      //     options.onEditEnd({ deltaRow: -1, deltaColumn: 0 });
+      //   } else {
+      //     options.onMoveCaretToStart();
+      //   }
+      //   event.preventDefault();
+      //   event.stopPropagation();
+      //   break;
+      // }
+      // case 'ArrowDown': {
+      //   if (mode === 'init') {
+      //     options.onEditEnd({ deltaRow: 1, deltaColumn: 0 });
+      //   } else {
+      //     options.onMoveCaretToEnd();
+      //   }
+      //   event.preventDefault();
+      //   event.stopPropagation();
+      //   break;
+      // }
+      // case 'Tab': {
+      //   if (event.shiftKey) {
+      //     options.onEditEnd({ deltaRow: 0, deltaColumn: -1 });
+      //   } else {
+      //     options.onEditEnd({ deltaRow: 0, deltaColumn: 1 });
+      //   }
+      //   event.preventDefault();
+      //   event.stopPropagation();
+
+      //   break;
+      // }
+      // case 'Escape': {
+      //   options.onEditEscape();
+      //   event.preventDefault();
+      //   event.stopPropagation();
+
+      //   break;
+      // }
+      // case 'ArrowLeft': {
+      //   if (mode === 'init') {
+      //     options.onEditEnd({ deltaRow: 0, deltaColumn: -1 });
+      //     event.preventDefault();
+      //     event.stopPropagation();
+      //   }
+
+      //   break;
+      // }
+      // case 'ArrowRight': {
+      //   if (mode === 'init') {
+      //     options.onEditEnd({ deltaRow: 0, deltaColumn: 1 });
+      //     event.preventDefault();
+      //     event.stopPropagation();
+      //   }
+
+      //   break;
+      // }
+      // case 'F4': {
+      //   options.onReferenceCycle();
+      //   event.preventDefault();
+      //   event.stopPropagation();
+
+      //   break;
+      // }
+      default:
+        break;
+    }
+  }, [model, state]);
+  return { onKeyDown };
+};
+
+export default useEditorKeydown;

webapp/src/components/editor/util.tsx

@@ -0,0 +1,334 @@
+import { getTokens } from "@ironcalc/wasm";
+import { tokenIsRangeType, tokenIsReferenceType } from "./tokenTypes";
+import { Area } from "./editorContext";
+
+const letters = [
+  "A",
+  "B",
+  "C",
+  "D",
+  "E",
+  "F",
+  "G",
+  "H",
+  "I",
+  "J",
+  "K",
+  "L",
+  "M",
+  "N",
+  "O",
+  "P",
+  "Q",
+  "R",
+  "S",
+  "T",
+  "U",
+  "V",
+  "W",
+  "X",
+  "Y",
+  "Z",
+];
+interface Reference {
+  row: number;
+  column: number;
+  absoluteRow: boolean;
+  absoluteColumn: boolean;
+}
+
+export function referenceToString(rf: Reference): string {
+  const absC = rf.absoluteColumn ? "$" : "";
+  const absR = rf.absoluteRow ? "$" : "";
+  return absC + columnNameFromNumber(rf.column) + absR + rf.row;
+}
+
+export function columnNameFromNumber(column: number): string {
+  let columnName = "";
+  let index = column;
+  while (index > 0) {
+    columnName = `${letters[(index - 1) % 26]}${columnName}`;
+    index = Math.floor((index - 1) / 26);
+  }
+  return columnName;
+}
+
+export function columnNumberFromName(columnName: string): number {
+  let column = 0;
+  for (const character of columnName) {
+    const index = (character.codePointAt(0) ?? 0) - 64;
+    column = column * 26 + index;
+  }
+  return column;
+}
+interface Range {
+  sheet: number | null;
+  rowStart: number;
+  rowEnd: number;
+  columnStart: number;
+  columnEnd: number;
+  absoluteRowStart: boolean;
+  absoluteRowEnd: boolean;
+  absoluteColumnStart: boolean;
+  absoluteColumnEnd: boolean;
+}
+
+export function getStringRange(range: Range, sheetNames: string[]) {
+  const name = range.sheet ? `${sheetNames[range.sheet]}!` : "";
+  const left = referenceToString({
+    row: range.rowStart,
+    column: range.columnStart,
+    absoluteRow: range.absoluteRowStart,
+    absoluteColumn: range.absoluteColumnStart,
+  });
+  if (
+    range.rowStart === range.rowEnd &&
+    range.columnStart === range.columnEnd
+  ) {
+    return `${name}${left}`;
+  }
+  const right = referenceToString({
+    row: range.rowEnd,
+    column: range.columnEnd,
+    absoluteRow: range.absoluteRowEnd,
+    absoluteColumn: range.absoluteColumnEnd,
+  });
+  return `${name}${left}:${right}`;
+}
+
+interface ActiveRange {
+  sheet: number;
+  rowStart: number;
+  rowEnd: number;
+  columnStart: number;
+  columnEnd: number;
+  color: string;
+}
+
+// IronCalc Color Palette
+export function getColor(index: number, alpha = 1): string {
+  const colors = [
+    {
+      name: "Cyan",
+      rgba: [89, 185, 188, 1],
+      hex: "#59B9BC",
+    },
+    {
+      name: "Flamingo",
+      rgba: [236, 87, 83, 1],
+      hex: "#EC5753",
+    },
+    {
+      hex: "#3358B7",
+      rgba: [51, 88, 183, 1],
+      name: "Blue",
+    },
+    {
+      hex: "#F8CD3C",
+      rgba: [248, 205, 60, 1],
+      name: "Yellow",
+    },
+    {
+      hex: "#3BB68A",
+      rgba: [59, 182, 138, 1],
+      name: "Emerald",
+    },
+    {
+      hex: "#523E93",
+      rgba: [82, 62, 147, 1],
+      name: "Violet",
+    },
+    {
+      hex: "#A23C52",
+      rgba: [162, 60, 82, 1],
+      name: "Burgundy",
+    },
+    {
+      hex: "#8CB354",
+      rgba: [162, 60, 82, 1],
+      name: "Wasabi",
+    },
+    {
+      hex: "#D03627",
+      rgba: [208, 54, 39, 1],
+      name: "Red",
+    },
+    {
+      hex: "#1B717E",
+      rgba: [27, 113, 126, 1],
+      name: "Teal",
+    },
+  ];
+  if (alpha === 1) {
+    return colors[index % 10].hex;
+  }
+  const { rgba } = colors[index % 10];
+  return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${alpha})`;
+}
+
+/**
+ *
+ * This function get a formula like `=A1*SUM(B5:C6)` and transforms it to:
+ *
+ * `<span>=</span><span>A1</span><span>SUM</span><span>(</span><span>B5:C6</span><span>)</span>`
+ *
+ * While also returning the set of ranges [A1, B5:C6] with specific color assignments for each range
+ */
+export function getFormulaHTML(
+  text: string,
+  sheet: number,
+  sheetList: string[],
+  insertRage: Area | null,
+  insertRangeText: string
+): {
+  html: JSX.Element[];
+  activeRanges: ActiveRange[];
+  isInReferenceMode: boolean;
+} {
+  let html = [];
+  const activeRanges: ActiveRange[] = [];
+  let colorCount = 0;
+  if (text.startsWith("=")) {
+    const formula = text.slice(1);
+
+    const tokens = getTokens(formula);
+    const tokenCount = tokens.length;
+    const usedColors: Record<string, string> = {};
+    for (let index = 0; index < tokenCount; index += 1) {
+      const { token, start, end } = tokens[index];
+      if (tokenIsReferenceType(token)) {
+        const { sheet: refSheet, row, column } = token.Reference;
+        const sheetIndex = refSheet ? sheetList.indexOf(refSheet) : sheet;
+        const key = `${sheetIndex}-${row}-${column}`;
+        let color = usedColors[key];
+        if (!color) {
+          color = getColor(colorCount);
+          usedColors[key] = color;
+          colorCount += 1;
+        }
+        html.push(
+          <span key={index} style={{ color }}>
+            {formula.slice(start, end)}
+          </span>
+        );
+        activeRanges.push({
+          sheet: sheetIndex,
+          rowStart: row,
+          columnStart: column,
+          rowEnd: row,
+          columnEnd: column,
+          color,
+        });
+      } else if (tokenIsRangeType(token)) {
+        let {
+          sheet: refSheet,
+          left: { row: rowStart, column: columnStart },
+          right: { row: rowEnd, column: columnEnd },
+        } = token.Range;
+        const sheetIndex = refSheet ? sheetList.indexOf(refSheet) : sheet;
+
+        const key = `${sheetIndex}-${rowStart}-${columnStart}:${rowEnd}-${columnEnd}`;
+        let color = usedColors[key];
+        if (!color) {
+          color = getColor(colorCount);
+          usedColors[key] = color;
+          colorCount += 1;
+        }
+
+        if (rowStart > rowEnd) {
+          [rowStart, rowEnd] = [rowEnd, rowStart];
+        }
+        if (columnStart > columnEnd) {
+          [columnStart, columnEnd] = [columnEnd, columnStart];
+        }
+        html.push(
+          <span key={index} style={{ color }}>
+            {formula.slice(start, end)}
+          </span>
+        );
+        colorCount += 1;
+
+        activeRanges.push({
+          sheet: sheetIndex,
+          rowStart,
+          columnStart,
+          rowEnd,
+          columnEnd,
+          color,
+        });
+      } else {
+        html.push(<span key={index}>{formula.slice(start, end)}</span>);
+      }
+    }
+    if (tokenCount > 0) {
+      const lastToken = tokens[tokens.length - 1];
+      if (lastToken.end < text.length - 1) {
+        html.push(
+          <span key="rest">{text.slice(lastToken.end + 1, text.length)}</span>
+        );
+      }
+    }
+    html = [<span key="equals">=</span>].concat(html);
+  } else {
+    html = [<span key="single">{text}</span>];
+  }
+  const isRefMode = isInReferenceMode(text, text.length);
+  if (isRefMode) {
+    if (insertRage) {
+      const color = getColor(colorCount);
+      activeRanges.push({
+        sheet: insertRage.sheet || sheet,
+        rowStart: insertRage.rowStart,
+        rowEnd: insertRage.rowEnd,
+        columnStart: insertRage.columnStart,
+        columnEnd: insertRage.columnEnd,
+        color,
+      });
+      colorCount += 1;
+      html.push(
+        <span key="insert-range" style={{ color, textDecoration: "underline" }}>
+          {insertRangeText}
+        </span>
+      );
+    } else {
+      html.push(
+        <span
+          key="insert-cue"
+          style={{
+            border: "1px solid #d5d5d5",
+            height: "2px",
+            width: "7px",
+            borderTop: 0,
+            display: "inline-block",
+          }}
+        />
+      );
+    }
+  }
+  // We add a clickable element that spans the rest of the available space
+  html.push(<span key="spacer" style={{ flexGrow: 1 }}></span>);
+  return { html, activeRanges, isInReferenceMode: isRefMode };
+}
+
+export function isInReferenceMode(text: string, cursor: number): boolean {
+  // FIXME
+  // This is a gross oversimplification
+  // Returns true if both are true:
+  // 1. Cursor is at the end
+  // 2. Last char is one of [',', '(', '+', '*', '-', '/', '<', '>', '=', '&']
+  // This has many false positives like '="1+' and also likely some false negatives
+  // The right way of doing this is to have a partial parse of the formula tree
+  // and check if the next token could be a reference
+  if (!text.startsWith("=")) {
+    return false;
+  }
+  if (text === "=") {
+    return true;
+  }
+  const l = text.length;
+  const chars = [",", "(", "+", "*", "-", "/", "<", ">", "=", "&"];
+  if (cursor === l && chars.includes(text[l - 1])) {
+    return true;
+  }
+  return false;
+}

webapp/src/components/formatMenu.tsx

@@ -0,0 +1,109 @@
+import { useState, useRef, ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
+import { NumberFormats } from './formatUtil';
+import { Menu, MenuItem, styled } from '@mui/material';
+import FormatPicker from './formatPicker';
+
+type FormatMenuProps = {
+  children: any; //ReactI18NextChild | Iterable<ReactI18NextChild>;
+  numFmt: string;
+  onChange: (numberFmt: string) => void;
+  onExited?: () => void;
+  anchorOrigin?: ComponentProps<typeof Menu>['anchorOrigin'];
+};
+
+const FormatMenu = (properties: FormatMenuProps) => {
+  const { t } = useTranslation();
+  const { onChange } = properties;
+  const [isMenuOpen, setMenuOpen] = useState(false);
+  const [isPickerOpen, setPickerOpen] = useState(false);
+  const anchorElement = useRef<HTMLDivElement>(null);
+
+  return (
+    <>
+      <ChildrenWrapper onClick={(): void => setMenuOpen(true)} ref={anchorElement}>
+        {properties.children}
+      </ChildrenWrapper>
+      <Menu
+        open={isMenuOpen}
+        onClose={(): void => setMenuOpen(false)}
+        // onExited={properties.onExited}
+        anchorEl={anchorElement.current}
+        anchorOrigin={properties.anchorOrigin}
+      >
+        <MenuItemWrapper onClick={(): void => onChange(NumberFormats.AUTO)}>
+          <MenuItemText>{t('toolbar.format_menu.auto')}</MenuItemText>
+        </MenuItemWrapper>
+        {/** TODO: Text option that transforms into plain text */}
+        <MenuDivider />
+        <MenuItemWrapper onClick={(): void => onChange(NumberFormats.NUMBER)}>
+          <MenuItemText>{t('toolbar.format_menu.number')}</MenuItemText>
+          <MenuItemExample>{t('toolbar.format_menu.number_example')}</MenuItemExample>
+        </MenuItemWrapper>
+        <MenuItemWrapper onClick={(): void => onChange(NumberFormats.PERCENTAGE)}>
+          <MenuItemText>{t('toolbar.format_menu.percentage')}</MenuItemText>
+          <MenuItemExample>{t('toolbar.format_menu.percentage_example')}</MenuItemExample>
+        </MenuItemWrapper>
+
+        <MenuDivider />
+        <MenuItemWrapper onClick={(): void => onChange(NumberFormats.CURRENCY_EUR)}>
+          <MenuItemText>{t('toolbar.format_menu.currency_eur')}</MenuItemText>
+          <MenuItemExample>{t('toolbar.format_menu.currency_eur_example')}</MenuItemExample>
+        </MenuItemWrapper>
+        <MenuItemWrapper onClick={(): void => onChange(NumberFormats.CURRENCY_USD)}>
+          <MenuItemText>{t('toolbar.format_menu.currency_usd')}</MenuItemText>
+          <MenuItemExample>{t('toolbar.format_menu.currency_usd_example')}</MenuItemExample>
+        </MenuItemWrapper>
+        <MenuItemWrapper onClick={(): void => onChange(NumberFormats.CURRENCY_GBP)}>
+          <MenuItemText>{t('toolbar.format_menu.currency_gbp')}</MenuItemText>
+          <MenuItemExample>{t('toolbar.format_menu.currency_gbp_example')}</MenuItemExample>
+        </MenuItemWrapper>
+
+        <MenuDivider />
+        <MenuItemWrapper onClick={(): void => onChange(NumberFormats.DATE_SHORT)}>
+          <MenuItemText>{t('toolbar.format_menu.date_short')}</MenuItemText>
+          <MenuItemExample>{t('toolbar.format_menu.date_short_example')}</MenuItemExample>
+        </MenuItemWrapper>
+        <MenuItemWrapper onClick={(): void => onChange(NumberFormats.DATE_LONG)}>
+          <MenuItemText>{t('toolbar.format_menu.date_long')}</MenuItemText>
+          <MenuItemExample>{t('toolbar.format_menu.date_long_example')}</MenuItemExample>
+        </MenuItemWrapper>
+
+        <MenuDivider />
+        <MenuItemWrapper onClick={(): void => setPickerOpen(true)}>
+          <MenuItemText>{t('toolbar.format_menu.custom')}</MenuItemText>
+        </MenuItemWrapper>
+      </Menu>
+      <FormatPicker
+        numFmt={properties.numFmt}
+        onChange={properties.onChange}
+        open={isPickerOpen}
+        onClose={(): void => setPickerOpen(false)}
+        onExited={properties.onExited}
+      />
+    </>
+  );
+};
+
+const MenuItemWrapper = styled(MenuItem)`
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  width: 100%;
+`;
+
+const ChildrenWrapper = styled('div')`
+  display: flex;
+`;
+
+const MenuDivider = styled('div')``;
+
+const MenuItemText = styled('div')`
+  color: #000;
+`;
+
+const MenuItemExample = styled('div')`
+  margin-left: 20px;
+`;
+
+export default FormatMenu;

webapp/src/components/formatPicker.tsx

@@ -0,0 +1,46 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from '@mui/material';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type FormatPickerProps = {
+  className?: string;
+  open: boolean;
+  onClose: () => void;
+  onExited?: () => void;
+  numFmt: string;
+  onChange: (numberFmt: string) => void;
+};
+
+const FormatPicker = (properties: FormatPickerProps) => {
+  const { t } = useTranslation();
+  const [formatCode, setFormatCode] = useState(properties.numFmt);
+
+  const onSubmit = (format_code: string): void => {
+    properties.onChange(format_code);
+    properties.onClose();
+  };
+  return (
+    <Dialog
+      open={properties.open}
+      onClose={properties.onClose}
+    >
+      <DialogTitle>{t('num_fmt.title')}</DialogTitle>
+      <DialogContent dividers>
+        <TextField
+          defaultValue={properties.numFmt}
+          label={t('num_fmt.label')}
+          name="format_code"
+          onChange={(event) => setFormatCode(event.target.value)}
+        />
+      </DialogContent>
+      <DialogActions>
+          <Button onClick={() => onSubmit(formatCode)}>
+            {t('num_fmt.save')}
+          </Button>
+        </DialogActions>
+    </Dialog>
+  );
+};
+
+
+export default FormatPicker;

webapp/src/components/formatUtil.ts

@@ -0,0 +1,36 @@
+export function increaseDecimalPlaces(numberFormat: string): string {
+    // FIXME: Should it be done in the Rust? How should it work?
+    // Increase decimal places for existing numbers with decimals
+    const newNumberFormat = numberFormat.replace(/\.0/g, '.00');
+    // If no decimal places declared, add 0.0
+    if (!newNumberFormat.includes('.')) {
+      if (newNumberFormat.includes('0')) {
+        return newNumberFormat.replace(/0/g, '0.0');
+      }
+      if (newNumberFormat.includes('#')) {
+        return newNumberFormat.replace(/#([^#,]|$)/g, '0.0$1');
+      }
+      return '0.0';
+    }
+    return newNumberFormat;
+  }
+  
+  export function decreaseDecimalPlaces(numberFormat: string): string {
+    // FIXME: Should it be done in the Rust? How should it work?
+    // Decrease decimal places for existing numbers with decimals
+    let newNumberFormat = numberFormat.replace(/\.0/g, '.');
+    // Fix leftover dots
+    newNumberFormat = newNumberFormat.replace(/0\.([^0]|$)/, '0$1');
+    return newNumberFormat;
+  }
+  
+  export enum NumberFormats {
+    AUTO = 'general',
+    CURRENCY_EUR = '"€"#,##0.00',
+    CURRENCY_USD = '"$"#,##0.00',
+    CURRENCY_GBP = '"£"#,##0.00',
+    DATE_SHORT = 'dd"/"mm"/"yyyy',
+    DATE_LONG = 'dddd"," mmmm dd"," yyyy',
+    PERCENTAGE = '0.00%',
+    NUMBER = '#,##0.00',
+  }

webapp/src/components/formulaDialog.tsx

@@ -0,0 +1,51 @@
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    styled,
+    TextField,
+  } from "@mui/material";
+  import { useTranslation } from "react-i18next";
+  import { useState } from "react";
+  
+  interface FormulaDialogProps {
+    isOpen: boolean;
+    close: () => void;
+    onFormulaChanged: (name: string) => void;
+    defaultName: string;
+  }
+  
+  export const FormulaDialog = (properties: FormulaDialogProps) => {
+    const { t } = useTranslation();
+    const [name, setName] = useState(properties.defaultName);
+    return (
+      <Dialog open={properties.isOpen} onClose={properties.close}>
+        <DialogTitle>{t("sheet_rename.title")}</DialogTitle>
+        <DialogContent dividers>
+          <TextField
+            defaultValue={name}
+            label={t("sheet_rename.label")}
+            onClick={(event) => event.stopPropagation()}
+            onKeyDown={(event) => {
+              event.stopPropagation();
+            }}
+            onChange={(event) => {
+              setName(event.target.value);
+            }}
+            spellCheck="false"
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button
+            onClick={() => {
+              properties.onFormulaChanged(name);
+            }}
+          >
+            {t("sheet_rename.rename")}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  };

webapp/src/components/formulabar.tsx

@@ -0,0 +1,132 @@
+import { Button, styled } from "@mui/material";
+import { ChevronDown } from "lucide-react";
+import { Fx } from "../icons";
+import { useState } from "react";
+import { FormulaDialog } from "./formulaDialog";
+
+type FormulaBarProps = {
+  cellAddress: string;
+  formulaValue: string;
+  onChange: (value: string) => void;
+};
+
+const formulaBarHeight = 30;
+const headerColumnWidth = 30;
+
+function FormulaBar(properties: FormulaBarProps) {
+  const [formulaDialogOpen, setFormulaDialogOpen] = useState(false);
+  const handleCloseFormulaDialog = () => {
+    setFormulaDialogOpen(false);
+  };
+
+  return (
+    <Container>
+      <AddressContainer>
+        <CellBarAddress>{properties.cellAddress}</CellBarAddress>
+        <StyledButton>
+          <ChevronDown />
+        </StyledButton>
+      </AddressContainer>
+      <Divider />
+      <FormulaContainer>
+        <FormulaSymbolButton>
+          <Fx />
+        </FormulaSymbolButton>
+        <Editor
+          onClick={() => {
+            setFormulaDialogOpen(true);
+          }}
+        >
+          {properties.formulaValue}
+        </Editor>
+      </FormulaContainer>
+      <FormulaDialog
+        isOpen={formulaDialogOpen}
+        close={handleCloseFormulaDialog}
+        defaultName={properties.formulaValue}
+        onFormulaChanged={(newName) => {
+          properties.onChange(newName);
+          setFormulaDialogOpen(false);
+        }}
+      />
+    </Container>
+  );
+}
+
+const StyledButton = styled(Button)`
+  width: 15px;
+  min-width: 0px;
+  padding: 0px;
+  color: inherit;
+  font-weight: inherit;
+  svg {
+    width: 15px;
+    height: 15px;
+  }
+`;
+
+const FormulaSymbolButton = styled(StyledButton)`
+  margin-right: 8px;
+`;
+
+const Divider = styled("div")`
+  background-color: #e0e0e0;
+  width: 1px;
+  height: 20px;
+  margin-left: 16px;
+  margin-right: 16px;
+`;
+
+const FormulaContainer = styled("div")`
+  margin-left: 10px;
+  line-height: 22px;
+  font-weight: normal;
+  width: 100%;
+  height: 22px;
+  display: flex;
+`;
+
+const Container = styled("div")`
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: ${(properties): string =>
+    properties.theme.palette.background.default};
+  height: ${formulaBarHeight}px;
+`;
+
+const AddressContainer = styled("div")`
+  padding-left: 16px;
+  color: #333;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 11px;
+  display: flex;
+  font-weight: 600;
+  flex-grow: row;
+  min-width: ${headerColumnWidth}px;
+`;
+
+const CellBarAddress = styled("div")`
+  width: 100%;
+  text-align: "center";
+`;
+
+const Editor = styled("div")`
+  position: relative;
+  width: 100%;
+  padding: 0px;
+  border-width: 0px;
+  outline: none;
+  resize: none;
+  white-space: pre-wrap;
+  vertical-align: bottom;
+  overflow: hidden;
+  text-align: left;
+  span {
+    min-width: 1px;
+  }
+`;
+
+export default FormulaBar;

webapp/src/components/navigation/index.ts

@@ -0,0 +1,2 @@
+export { default } from './navigation';
+export type { NavigationProps } from './navigation';

webapp/src/components/navigation/menus.tsx

@@ -0,0 +1,122 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  styled,
+  TextField,
+} from "@mui/material";
+import { SheetOptions } from "./types";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+
+interface SheetRenameDialogProps {
+  isOpen: boolean;
+  close: () => void;
+  onNameChanged: (name: string) => void;
+  defaultName: string;
+}
+
+export const SheetRenameDialog = (properties: SheetRenameDialogProps) => {
+  const { t } = useTranslation();
+  const [name, setName] = useState(properties.defaultName);
+  return (
+    <Dialog open={properties.isOpen} onClose={properties.close}>
+      <DialogTitle>{t("sheet_rename.title")}</DialogTitle>
+      <DialogContent dividers>
+        <TextField
+          defaultValue={name}
+          label={t("sheet_rename.label")}
+          onClick={(event) => event.stopPropagation()}
+          onKeyDown={(event) => {
+            event.stopPropagation();
+          }}
+          onChange={(event) => {
+            setName(event.target.value);
+          }}
+          spellCheck="false"
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          onClick={() => {
+            properties.onNameChanged(name);
+          }}
+        >
+          {t("sheet_rename.rename")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+interface SheetListMenuProps {
+  isOpen: boolean;
+  close: () => void;
+  anchorEl: HTMLButtonElement | null;
+  onSheetSelected: (index: number) => void;
+  sheetOptionsList: SheetOptions[];
+}
+
+const SheetListMenu = (properties: SheetListMenuProps) => {
+  const { isOpen, close, anchorEl, onSheetSelected, sheetOptionsList } =
+    properties;
+
+  return (
+    <StyledMenu
+      open={isOpen}
+      onClose={close}
+      anchorEl={anchorEl}
+      anchorOrigin={{
+        vertical: "top",
+        horizontal: "left",
+      }}
+      transformOrigin={{
+        vertical: "bottom",
+        horizontal: 6,
+      }}
+    >
+      {sheetOptionsList.map((tab, index) => (
+        <StyledMenuItem
+          key={tab.sheetId}
+          onClick={(): void => onSheetSelected(index)}
+        >
+          <ItemColor style={{ backgroundColor: tab.color }} />
+          <ItemName>{tab.name}</ItemName>
+        </StyledMenuItem>
+      ))}
+    </StyledMenu>
+  );
+};
+
+const StyledMenu = styled(Menu)({
+  "& .MuiPaper-root": {
+    borderRadius: 8,
+    padding: 4,
+  },
+  "& .MuiList-padding": {
+    padding: 0,
+  },
+});
+
+const StyledMenuItem = styled(MenuItem)({
+  padding: 8,
+  borderRadius: 4,
+});
+
+const ItemColor = styled("div")`
+  width: 12px;
+  height: 12px;
+  border-radius: 4px;
+  margin-right: 8px;
+`;
+
+const ItemName = styled("div")`
+  font-size: 13px;
+  color: #333;
+`;
+
+export default SheetListMenu;

webapp/src/components/navigation/navigation.tsx

@@ -0,0 +1,141 @@
+import { styled } from "@mui/material";
+import { ChevronLeft, ChevronRight, Menu, Plus } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { SheetOptions } from "./types";
+import SheetListMenu, { SheetRenameDialog } from "./menus";
+import Sheet from "./sheet";
+import { StyledButton } from "../toolbar";
+
+export interface NavigationProps {
+  sheets: SheetOptions[];
+  selectedIndex: number;
+  onSheetSelected: (index: number) => void;
+  onAddBlankSheet: () => void;
+  onSheetColorChanged: (hex: string) => void;
+  onSheetRenamed: (name: string) => void;
+  onSheetDeleted: () => void;
+}
+
+function Navigation(props: NavigationProps) {
+  const { t } = useTranslation();
+  const { onSheetSelected, sheets, selectedIndex } = props;
+  const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <Container>
+      <StyledButton title={t("navigation.add_sheet")} $pressed={false}>
+        <Plus />
+      </StyledButton>
+      <StyledButton
+        onClick={handleClick}
+        title={t("navigation.sheet_list")}
+        $pressed={false}
+      >
+        <Menu />
+      </StyledButton>
+      <Sheets>
+        <SheetInner>
+          {sheets.map((tab, index) => (
+            <Sheet
+              key={tab.sheetId}
+              name={tab.name}
+              color={tab.color}
+              selected={index === selectedIndex}
+              onSelected={() => onSheetSelected(index)}
+              onColorChanged={function (hex: string): void {
+                props.onSheetColorChanged(hex);
+              }}
+              onRenamed={function (name: string): void {
+                props.onSheetRenamed(name);
+              }}
+              onDeleted={function (): void {
+                props.onSheetDeleted();
+              }}
+            />
+          ))}
+        </SheetInner>
+      </Sheets>
+      <LeftDivider />
+      <ChevronLeftStyled />
+      <ChevronRightStyled />
+      <RightDivider />
+      <Advert>ironcalc.com</Advert>
+      <SheetListMenu
+        anchorEl={anchorEl}
+        isOpen={open}
+        close={handleClose}
+        sheetOptionsList={sheets}
+        onSheetSelected={onSheetSelected}
+      />
+    </Container>
+  );
+}
+
+const ChevronLeftStyled = styled(ChevronLeft)`
+  color: #333333;
+  width: 16px;
+  height: 16px;
+  padding: 4px;
+  cursor: pointer;
+`;
+
+const ChevronRightStyled = styled(ChevronRight)`
+  color: #333333;
+  width: 16px;
+  height: 16px;
+  padding: 4px;
+  cursor: pointer;
+`;
+
+// Note I have to specify the font-family in every component that can be considered stand-alone
+const Container = styled("div")`
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  display: flex;
+  height: 40px;
+  align-items: center;
+  padding-left: 12px;
+  font-family: Inter;
+  background-color: #fff;
+`;
+
+const Sheets = styled("div")`
+  flex-grow: 2;
+  overflow: hidden;
+`;
+
+const SheetInner = styled("div")`
+  display: flex;
+`;
+
+const LeftDivider = styled("div")`
+  height: 10px;
+  width: 1px;
+  background-color: #eee;
+  margin: 0px 10px 0px 0px;
+`;
+
+const RightDivider = styled("div")`
+  height: 10px;
+  width: 1px;
+  background-color: #eee;
+  margin: 0px 20px 0px 10px;
+`;
+
+const Advert = styled("div")`
+  color: #f2994a;
+  margin-right: 12px;
+  font-size: 12px;
+`;
+
+export default Navigation;

webapp/src/components/navigation/sheet.tsx

@@ -0,0 +1,127 @@
+import { Button, Menu, MenuItem, styled } from "@mui/material";
+import { ChevronDown } from "lucide-react";
+import { useRef, useState } from "react";
+import { SheetRenameDialog } from "./menus";
+import ColorPicker from "../colorPicker";
+interface SheetProps {
+  name: string;
+  color: string;
+  selected: boolean;
+  onSelected: () => void;
+  onColorChanged: (hex: string) => void;
+  onRenamed: (name: string) => void;
+  onDeleted: () => void;
+}
+function Sheet(props: SheetProps) {
+  const { name, color, selected, onSelected } = props;
+  const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null);
+  const [colorPickerOpen, setColorPickerOpen] = useState(false);
+  const colorButton = useRef(null);
+  const open = Boolean(anchorEl);
+  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const [renameDialogOpen, setRenameDialogOpen] = useState(false);
+  const handleCloseRenameDialog = () => {
+    setRenameDialogOpen(false);
+  };
+  const handleOpenRenameDialog = () => {
+    setRenameDialogOpen(true);
+  };
+  return (
+    <Wrapper
+      style={{ borderBottomColor: color, fontWeight: selected ? 600 : 400 }}
+      onClick={onSelected}
+      ref={colorButton}
+    >
+      <Name>{name}</Name>
+      <StyledButton onClick={handleOpen}>
+        <ChevronDown />
+      </StyledButton>
+      <StyledMenu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "left",
+        }}
+        transformOrigin={{
+          vertical: "bottom",
+          horizontal: 6,
+        }}
+      >
+        <MenuItem
+          onClick={() => {
+            handleOpenRenameDialog();
+            handleClose();
+          }}
+        >
+          Rename
+        </MenuItem>
+        <MenuItem
+          onClick={() => {
+            setColorPickerOpen(true);
+            handleClose();
+          }}
+        >
+          Change Color
+        </MenuItem>
+        <MenuItem onClick={() => props.onDeleted()}> Delete</MenuItem>
+      </StyledMenu>
+      <SheetRenameDialog
+        isOpen={renameDialogOpen}
+        close={handleCloseRenameDialog}
+        defaultName={name}
+        onNameChanged={(newName) => {
+          props.onRenamed(newName);
+          setRenameDialogOpen(false);
+        }}
+      />
+      <ColorPicker
+        color={color}
+        onChange={(color): void => {
+          props.onColorChanged(color);
+          setColorPickerOpen(false);
+        }}
+        anchorEl={colorButton}
+        open={colorPickerOpen}
+      />
+    </Wrapper>
+  );
+}
+
+const StyledMenu = styled(Menu)``;
+
+const StyledButton = styled(Button)`
+  width: 15px;
+  height: 24px;
+  min-width: 0px;
+  padding: 0px;
+  color: inherit;
+  font-weight: inherit;
+  svg {
+    width: 15px;
+    height: 15px;
+  }
+`;
+
+const Wrapper = styled("div")`
+  display: flex;
+  margin-left: 20px;
+  border-bottom: 3px solid;
+  border-top: 3px solid white;
+  line-height: 34px;
+  align-items: center;
+`;
+
+const Name = styled("div")`
+  font-size: 12px;
+  margin-right: 5px;
+  text-wrap: nowrap;
+`;
+
+export default Sheet;

webapp/src/components/navigation/types.ts

@@ -0,0 +1,5 @@
+export interface SheetOptions {
+  name: string;
+  color: string;
+  sheetId: number;
+}

webapp/src/components/toolbar.tsx

@@ -0,0 +1,445 @@
+import {
+  AlignCenter,
+  AlignLeft,
+  AlignRight,
+  Bold,
+  ChevronDown,
+  Euro,
+  Italic,
+  PaintBucket,
+  Paintbrush2,
+  Percent,
+  Redo2,
+  Strikethrough,
+  Underline,
+  Undo2,
+  Grid2X2,
+  Type,
+  ArrowDownToLine,
+  ArrowUpToLine,
+  Grid2x2Check,
+  Grid2x2X,
+} from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useRef, useState } from "react";
+import ColorPicker from "./colorPicker";
+import BorderPicker from "./borderPicker";
+import {
+  ArrowMiddleFromLine,
+  DecimalPlacesDecreaseIcon,
+  DecimalPlacesIncreaseIcon,
+} from "../icons";
+import {
+  NumberFormats,
+  decreaseDecimalPlaces,
+  increaseDecimalPlaces,
+} from "./formatUtil";
+import FormatMenu from "./formatMenu";
+import { styled } from "@mui/material/styles";
+import { theme } from "../theme";
+import {
+  BorderOptions,
+  HorizontalAlignment,
+  VerticalAlignment,
+} from "@ironcalc/wasm";
+
+type ToolbarProperties = {
+  canUndo: boolean;
+  canRedo: boolean;
+  onRedo: () => void;
+  onUndo: () => void;
+  onToggleUnderline: (u: boolean) => void;
+  onToggleBold: (v: boolean) => void;
+  onToggleItalic: (v: boolean) => void;
+  onToggleStrike: (v: boolean) => void;
+  onToggleHorizontalAlign: (v: string) => void;
+  onToggleVerticalAlign: (v: string) => void;
+  onCopyStyles: () => void;
+  onTextColorPicked: (hex: string) => void;
+  onFillColorPicked: (hex: string) => void;
+  onNumberFormatPicked: (numberFmt: string) => void;
+  onBorderChanged: (border: BorderOptions) => void;
+  fillColor: string;
+  fontColor: string;
+  bold: boolean;
+  underline: boolean;
+  italic: boolean;
+  strike: boolean;
+  horizontalAlign: HorizontalAlignment;
+  verticalAlign: VerticalAlignment;
+  canEdit: boolean;
+  numFmt: string;
+  showGridLines: boolean;
+  onToggleShowGridLines: (show: boolean) => void;
+};
+
+function Toolbar(properties: ToolbarProperties) {
+  const [fontColorPickerOpen, setFontColorPickerOpen] = useState(false);
+  const [fillColorPickerOpen, setFillColorPickerOpen] = useState(false);
+  const [borderPickerOpen, setBorderPickerOpen] = useState(false);
+
+  const fontColorButton = useRef(null);
+  const fillColorButton = useRef(null);
+  const borderButton = useRef(null);
+
+  const { t } = useTranslation();
+
+  const { canEdit } = properties;
+
+  return (
+    <ToolbarContainer>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={properties.onUndo}
+        disabled={!properties.canUndo}
+        title={t("toolbar.undo")}
+      >
+        <Undo2 />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={properties.onRedo}
+        disabled={!properties.canRedo}
+        title={t("toolbar.redo")}
+      >
+        <Redo2 />
+      </StyledButton>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={properties.onCopyStyles}
+        title={t("toolbar.copy_styles")}
+      >
+        <Paintbrush2 />
+      </StyledButton>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={(): void => {
+          properties.onNumberFormatPicked(NumberFormats.CURRENCY_EUR);
+        }}
+        disabled={!canEdit}
+        title={t("toolbar.euro")}
+      >
+        <Euro />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={(): void => {
+          properties.onNumberFormatPicked(NumberFormats.PERCENTAGE);
+        }}
+        disabled={!canEdit}
+        title={t("toolbar.percentage")}
+      >
+        <Percent />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={(): void => {
+          properties.onNumberFormatPicked(
+            decreaseDecimalPlaces(properties.numFmt)
+          );
+        }}
+        disabled={!canEdit}
+        title={t("toolbar.decimal_places_decrease")}
+      >
+        <DecimalPlacesDecreaseIcon />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={(): void => {
+          properties.onNumberFormatPicked(
+            increaseDecimalPlaces(properties.numFmt)
+          );
+        }}
+        disabled={!canEdit}
+        title={t("toolbar.decimal_places_increase")}
+      >
+        <DecimalPlacesIncreaseIcon />
+      </StyledButton>
+      <FormatMenu
+        numFmt={properties.numFmt}
+        onChange={(numberFmt): void => {
+          properties.onNumberFormatPicked(numberFmt);
+        }}
+        onExited={(): void => {}}
+        anchorOrigin={{
+          horizontal: 20, // Aligning the menu to the middle of FormatButton
+          vertical: "bottom",
+        }}
+      >
+        <StyledButton
+          type="button"
+          $pressed={false}
+          disabled={!canEdit}
+          title={t("toolbar.format_number")}
+          sx={{
+            width: "40px", // Keep in sync with anchorOrigin in FormatMenu above
+            fontSize: "13px",
+            fontWeight: 400,
+          }}
+        >
+          {"123"}
+          <ChevronDown />
+        </StyledButton>
+      </FormatMenu>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={properties.bold}
+        onClick={() => properties.onToggleBold(!properties.bold)}
+        disabled={!canEdit}
+        title={t("toolbar.bold")}
+      >
+        <Bold />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.italic}
+        onClick={() => properties.onToggleItalic(!properties.italic)}
+        disabled={!canEdit}
+        title={t("toolbar.italic")}
+      >
+        <Italic />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.underline}
+        onClick={() => properties.onToggleUnderline(!properties.underline)}
+        disabled={!canEdit}
+        title={t("toolbar.underline")}
+      >
+        <Underline />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.strike}
+        onClick={() => properties.onToggleStrike(!properties.strike)}
+        disabled={!canEdit}
+        title={t("toolbar.strike_trough")}
+      >
+        <Strikethrough />
+      </StyledButton>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={false}
+        disabled={!canEdit}
+        title={t("toolbar.font_color")}
+        ref={fontColorButton}
+        $underlinedColor={properties.fontColor}
+        onClick={() => setFontColorPickerOpen(true)}
+      >
+        <Type />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        disabled={!canEdit}
+        title={t("toolbar.fill_color")}
+        ref={fillColorButton}
+        $underlinedColor={properties.fillColor}
+        onClick={() => setFillColorPickerOpen(true)}
+      >
+        <PaintBucket />
+      </StyledButton>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={properties.horizontalAlign === "left"}
+        onClick={() =>
+          properties.onToggleHorizontalAlign(
+            properties.horizontalAlign === "left" ? "general" : "left"
+          )
+        }
+        disabled={!canEdit}
+        title={t("toolbar.align_left")}
+      >
+        <AlignLeft />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.horizontalAlign === "center"}
+        onClick={() =>
+          properties.onToggleHorizontalAlign(
+            properties.horizontalAlign === "center" ? "general" : "center"
+          )
+        }
+        disabled={!canEdit}
+        title={t("toolbar.align_center")}
+      >
+        <AlignCenter />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.horizontalAlign === "right"}
+        onClick={() =>
+          properties.onToggleHorizontalAlign(
+            properties.horizontalAlign === "right" ? "general" : "right"
+          )
+        }
+        disabled={!canEdit}
+        title={t("toolbar.align_right")}
+      >
+        <AlignRight />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.verticalAlign === "top"}
+        onClick={() =>
+          properties.onToggleVerticalAlign(
+            properties.verticalAlign === "top" ? "bottom" : "top"
+          )
+        }
+        disabled={!canEdit}
+        title={t("toolbar.vertical_align_top")}
+      >
+        <ArrowUpToLine />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.verticalAlign === "center"}
+        onClick={() =>
+          properties.onToggleVerticalAlign(
+            properties.verticalAlign === "center" ? "bottom" : "center"
+          )
+        }
+        disabled={!canEdit}
+        title={t("toolbar.vertical_align_center")}
+      >
+        <ArrowMiddleFromLine />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.verticalAlign === "bottom"}
+        onClick={() => properties.onToggleVerticalAlign("bottom")}
+        disabled={!canEdit}
+        title={t("toolbar.vertical_align_bottom")}
+      >
+        <ArrowDownToLine />
+      </StyledButton>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={() => setBorderPickerOpen(true)}
+        ref={borderButton}
+        disabled={!canEdit}
+        title={t("toolbar.borders")}
+      >
+        <Grid2X2 />
+      </StyledButton>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={() => properties.onToggleShowGridLines(!properties.showGridLines)}
+        disabled={!canEdit}
+        title={t("toolbar.show_hide_grid_lines")}
+      >
+        {properties.showGridLines ? <Grid2x2Check /> : <Grid2x2X />}
+      </StyledButton>
+
+      <ColorPicker
+        color={properties.fontColor}
+        onChange={(color): void => {
+          properties.onTextColorPicked(color);
+          setFontColorPickerOpen(false);
+        }}
+        anchorEl={fontColorButton}
+        open={fontColorPickerOpen}
+      />
+      <ColorPicker
+        color={properties.fillColor}
+        onChange={(color): void => {
+          properties.onFillColorPicked(color);
+          setFillColorPickerOpen(false);
+        }}
+        anchorEl={fillColorButton}
+        open={fillColorPickerOpen}
+      />
+      <BorderPicker
+        onChange={(border): void => {
+          properties.onBorderChanged(border);
+          setBorderPickerOpen(false);
+        }}
+        anchorEl={borderButton}
+        open={borderPickerOpen}
+      />
+    </ToolbarContainer>
+  );
+}
+const toolbarHeight = 40;
+
+const ToolbarContainer = styled("div")`
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  background: ${({ }) => theme.palette.background.paper};
+  height: ${toolbarHeight}px;
+  line-height: ${toolbarHeight}px;
+  border-bottom: 1px solid ${({}) => theme.palette.grey["600"]};
+  font-family: Inter;
+  border-radius: 4px 4px 0px 0px;
+  overflow-x: auto;
+`;
+
+type TypeButtonProperties = { $pressed: boolean; $underlinedColor?: string };
+export const StyledButton = styled("button")<TypeButtonProperties>(({
+  disabled,
+  $pressed,
+  $underlinedColor,
+}) => {
+  let result: Record<string, any> = {
+    width: "24px",
+    height: "24px",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "26px",
+    border: "0px solid #fff",
+    borderRadius: "2px",
+    marginRight: "5px",
+    transition: "all 0.2s",
+    cursor: "pointer",
+    backgroundColor: "white",
+    padding: "0px",
+  };
+  if (disabled) {
+    result.color = theme.palette.grey["600"];
+    result.cursor = "default";
+  } else {
+    result.borderTop = $underlinedColor ? "3px solid #FFF" : "none";
+    result.borderBottom = $underlinedColor
+      ? `3px solid ${$underlinedColor}`
+      : "none";
+    (result.color = "#21243A"), //theme.palette.text.primary;
+      (result.backgroundColor = $pressed ? "#EEE" : "#FFF");
+    result["&:hover"] = {
+      backgroundColor: "#F1F2F8",
+      borderTopColor: "#F1F2F8",
+    };
+  }
+  result["svg"] = {
+    width: "16px",
+    height: "16px",
+  };
+  return result;
+});
+
+const Divider = styled("div")({
+  width: "0px",
+  height: "10px",
+  borderLeft: "1px solid #D3D6E9",
+  marginLeft: "5px",
+  marginRight: "10px",
+});
+
+export default Toolbar;

webapp/src/components/useKeyboardNavigation.ts

@@ -0,0 +1,229 @@
+import { useCallback, KeyboardEvent, RefObject } from "react";
+import {
+  isEditingKey,
+  isNavigationKey,
+  NavigationKey,
+} from "./WorksheetCanvas/util";
+
+export enum Border {
+  Top = "top",
+  Bottom = "bottom",
+  Right = "right",
+  Left = "left",
+}
+
+interface Options {
+  onCellsDeleted: () => void;
+  onExpandAreaSelectedKeyboard: (
+    key: "ArrowRight" | "ArrowLeft" | "ArrowUp" | "ArrowDown"
+  ) => void;
+  onEditKeyPressStart: (initText: string) => void;
+  onCellEditStart: () => void;
+  onBold: () => void;
+  onItalic: () => void;
+  onUnderline: () => void;
+  onNavigationToEdge: (direction: NavigationKey) => void;
+  onPageDown: () => void;
+  onPageUp: () => void;
+  onArrowDown: () => void;
+  onArrowUp: () => void;
+  onArrowLeft: () => void;
+  onArrowRight: () => void;
+  onKeyHome: () => void;
+  onKeyEnd: () => void;
+  onUndo: () => void;
+  onRedo: () => void;
+  onNextSheet: () => void;
+  onPreviousSheet: () => void;
+  root: RefObject<HTMLDivElement>;
+}
+
+// # IronCalc Keyboard accessibility:
+// * ArrowKeys: navigation
+// * Enter: ArrowDown (Excel behaviour not g-sheets)
+// * Tab: arrow right
+// * Shift+Tab: arrow left
+// * Home/End: First/last column
+// * Shift+Arrows: selection
+// * Ctrl+Arrows: navigating to edge
+// * Ctrl+Home/End: navigation to end
+// * PagDown/Up scroll Down/Up
+// * Alt+ArrowDown/Up: next/previous sheet 
+//   (NB: Excel uses Ctrl+PageUp/Down for this but that highjacks a browser behaviour,
+//    go to next/previous tab)
+// * Ctrl+u/i/b: style
+// * Ctrl+z/y: undo/redo
+// * F2: start editing
+
+// References:
+// In Google Sheets: Ctrl+/ shows the list of keyboard shortcuts
+// https://support.google.com/docs/answer/181110
+// https://support.microsoft.com/en-us/office/keyboard-shortcuts-in-excel-1798d9d5-842a-42b8-9c99-9b7213f0040f
+
+const useKeyboardNavigation = (
+  options: Options
+): { onKeyDown: (event: KeyboardEvent) => void } => {
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      const { key } = event;
+      const { root } = options;
+      console.log(key);
+      // Silence the linter
+      if (!root.current) {
+        return;
+      }
+      if (event.target !== root.current) {
+        return;
+      }
+      if (event.metaKey || event.ctrlKey) {
+        switch (key) {
+          case "z": {
+            options.onUndo();
+            event.stopPropagation();
+            event.preventDefault();
+
+            break;
+          }
+          case "y": {
+            options.onRedo();
+            event.stopPropagation();
+            event.preventDefault();
+
+            break;
+          }
+          case "b": {
+            options.onBold();
+            event.stopPropagation();
+            event.preventDefault();
+
+            break;
+          }
+          case "i": {
+            options.onItalic();
+            event.stopPropagation();
+            event.preventDefault();
+
+            break;
+          }
+          case "u": {
+            options.onUnderline();
+            event.stopPropagation();
+            event.preventDefault();
+
+            break;
+          }
+          // No default
+        }
+        if (isNavigationKey(key)) {
+          // Ctrl+Arrows, Ctrl+Home/End
+          options.onNavigationToEdge(key);
+          event.stopPropagation();
+          event.preventDefault();
+        }
+        return;
+      } else if (event.altKey) {
+        switch (key) {
+          case "ArrowDown": {
+            // select next sheet
+            options.onNextSheet();
+            event.stopPropagation();
+            event.preventDefault();
+            break;
+          }
+          case "ArrowUp": {
+            // select previous sheet
+            options.onPreviousSheet();
+            event.stopPropagation();
+            event.preventDefault();
+            break;
+          }
+        }
+      }
+      if (key === "F2") {
+        options.onCellEditStart();
+        event.stopPropagation();
+        event.preventDefault();
+        return;
+      }
+      if (isEditingKey(key) || key === "Backspace") {
+        const initText = key === "Backspace" ? "" : key;
+        options.onEditKeyPressStart(initText);
+        event.stopPropagation();
+        event.preventDefault();
+        return;
+      }
+      // Worksheet Navigation
+      if (event.shiftKey) {
+        if (
+          key === "ArrowRight" ||
+          key === "ArrowLeft" ||
+          key === "ArrowUp" ||
+          key === "ArrowDown"
+        ) {
+          options.onExpandAreaSelectedKeyboard(key);
+        } else if (key === "Tab") {
+          options.onArrowLeft();
+          event.stopPropagation();
+          event.preventDefault();
+        }
+        return;
+      }
+      switch (key) {
+        case "ArrowRight":
+        case "Tab": {
+          options.onArrowRight();
+
+          break;
+        }
+        case "ArrowLeft": {
+          options.onArrowLeft();
+
+          break;
+        }
+        case "ArrowDown":
+        case "Enter": {
+          options.onArrowDown();
+
+          break;
+        }
+        case "ArrowUp": {
+          options.onArrowUp();
+
+          break;
+        }
+        case "End": {
+          options.onKeyEnd();
+
+          break;
+        }
+        case "Home": {
+          options.onKeyHome();
+
+          break;
+        }
+        case "Delete": {
+          options.onCellsDeleted();
+
+          break;
+        }
+        case "PageDown": {
+          options.onPageDown();
+
+          break;
+        }
+        case "PageUp": {
+          options.onPageUp();
+
+          break;
+        }
+        // No default
+      }
+      event.stopPropagation();
+      event.preventDefault();
+    },
+    [options]
+  );
+  return { onKeyDown };
+};
+
+export default useKeyboardNavigation;

webapp/src/components/usePointer.ts

@@ -0,0 +1,227 @@
+import { useCallback, RefObject, PointerEvent, useRef } from 'react';
+import WorksheetCanvas, { headerColumnWidth, headerRowHeight } from './WorksheetCanvas/worksheetCanvas';
+import { Cell } from './WorksheetCanvas/util';
+
+interface PointerSettings {
+  canvasElement: RefObject<HTMLCanvasElement>;
+  worksheetCanvas: RefObject<WorksheetCanvas | null>;
+  worksheetElement: RefObject<HTMLDivElement>;
+  // rowContextMenuAnchorElement: RefObject<HTMLDivElement>;
+  // columnContextMenuAnchorElement: RefObject<HTMLDivElement>;
+  onCellSelected: (cell: Cell, event: React.MouseEvent) => void;
+  onAreaSelecting: (cell: Cell) => void;
+  onAreaSelected: () => void;
+  onExtendToCell: (cell: Cell) => void;
+  onExtendToEnd: () => void;
+  // onRowContextMenu: (row: number) => void;
+  // onColumnContextMenu: (column: number) => void;
+}
+
+interface PointerEvents {
+  onPointerDown: (event: PointerEvent) => void;
+  onPointerMove: (event: PointerEvent) => void;
+  onPointerUp: (event: PointerEvent) => void;
+  onPointerHandleDown: (event: PointerEvent) => void;
+  // onContextMenu: (event: React.MouseEvent) => void;
+}
+
+const usePointer = (options: PointerSettings): PointerEvents => {
+  const isSelecting = useRef(false);
+  const isExtending = useRef(false);
+
+  // const onContextMenu = useCallback(
+  //   (event: React.MouseEvent): void => {
+  //     let x = event.clientX;
+  //     let y = event.clientY;
+  //     const {
+  //       canvasElement,
+  //       worksheetElement,
+  //       worksheetCanvas,
+  //       onRowContextMenu,
+  //       rowContextMenuAnchorElement,
+  //       onColumnContextMenu,
+  //       columnContextMenuAnchorElement,
+  //     } = options;
+  //     const worksheet = worksheetCanvas.current;
+  //     const canvas = canvasElement.current;
+  //     const worksheetWrapper = worksheetElement.current;
+  //     // Silence the linter
+  //     if (!canvas || !worksheet || !worksheetWrapper) {
+  //       return;
+  //     }
+  //     const canvasRect = canvas.getBoundingClientRect();
+  //     x -= canvasRect.x;
+  //     y -= canvasRect.y;
+  //     const menuAnchorOffsetY = 10;
+  //     if (x > 0 && x < headerColumnWidth && y > headerRowHeight && y < canvasRect.height) {
+  //       // Click on a row number
+  //       const cell = worksheet.getCellByCoordinates(headerColumnWidth, y);
+  //       if (cell) {
+  //         event.preventDefault();
+  //         event.stopPropagation();
+  //         if (rowContextMenuAnchorElement.current) {
+  //           const scrollPosition = worksheet.getScrollPosition();
+  //           rowContextMenuAnchorElement.current.style.left = `${x + scrollPosition.left}px`;
+  //           rowContextMenuAnchorElement.current.style.top = `${
+  //             y + scrollPosition.top + menuAnchorOffsetY
+  //           }px`;
+  //         }
+  //         options.onPointerDownAtCell(cell, event);
+  //         onRowContextMenu(cell.row);
+  //       }
+  //     }
+  //     if (x > headerColumnWidth && x < canvas.width && y > 0 && y < headerRowHeight) {
+  //       // Click on a column number
+  //       const cell = worksheet.getCellByCoordinates(x, headerRowHeight);
+  //       if (cell) {
+  //         event.preventDefault();
+  //         event.stopPropagation();
+  //         if (columnContextMenuAnchorElement.current) {
+  //           const scrollPosition = worksheet.getScrollPosition();
+  //           columnContextMenuAnchorElement.current.style.left = `${x + scrollPosition.left}px`;
+  //           columnContextMenuAnchorElement.current.style.top = `${
+  //             y + scrollPosition.top + menuAnchorOffsetY
+  //           }px`;
+  //         }
+  //         options.onPointerDownAtCell(cell, event);
+  //         onColumnContextMenu(cell.column);
+  //       }
+  //     }
+  //   },
+  //   [options],
+  // );
+
+  const onPointerMove = useCallback(
+    (event: PointerEvent): void => {
+      // Range selections are disabled on non-mouse devices. Use touch move only
+      // to scroll for now.
+      if (event.pointerType !== 'mouse') {
+        return;
+      }
+
+      if (isSelecting.current) {
+        const { canvasElement, worksheetCanvas } = options;
+        const canvas = canvasElement.current;
+        const worksheet = worksheetCanvas.current;
+        // Silence the linter
+        if (!worksheet || !canvas) {
+          return;
+        }
+        let x = event.clientX;
+        let y = event.clientY;
+        const canvasRect = canvas.getBoundingClientRect();
+        x -= canvasRect.x;
+        y -= canvasRect.y;
+        const cell = worksheet.getCellByCoordinates(x, y);
+        if (cell) {
+          options.onAreaSelecting(cell);
+        } else {
+          console.log('Failed');
+        }
+      } else if (isExtending.current) {
+        const { canvasElement, worksheetCanvas } = options;
+        const canvas = canvasElement.current;
+        const worksheet = worksheetCanvas.current;
+        // Silence the linter
+        if (!worksheet || !canvas) {
+          return;
+        }
+        let x = event.clientX;
+        let y = event.clientY;
+        const canvasRect = canvas.getBoundingClientRect();
+        x -= canvasRect.x;
+        y -= canvasRect.y;
+        const cell = worksheet.getCellByCoordinates(x, y);
+        if (!cell) {
+          return;
+        }
+        options.onExtendToCell(cell);
+      }
+    },
+    [options],
+  );
+
+  const onPointerUp = useCallback(
+    (event: PointerEvent): void => {
+      if (isSelecting.current) {
+        const { worksheetElement } = options;
+        isSelecting.current = false;
+        worksheetElement.current?.releasePointerCapture(event.pointerId);
+        options.onAreaSelected();
+      } else if (isExtending.current) {
+        const { worksheetElement } = options;
+        isExtending.current = false;
+        worksheetElement.current?.releasePointerCapture(event.pointerId);
+        options.onExtendToEnd();
+      }
+    },
+    [options],
+  );
+
+  const onPointerDown = useCallback(
+    (event: PointerEvent) => {
+      let x = event.clientX;
+      let y = event.clientY;
+      const { canvasElement, worksheetElement, worksheetCanvas } = options;
+      const worksheet = worksheetCanvas.current;
+      const canvas = canvasElement.current;
+      const worksheetWrapper = worksheetElement.current;
+      // Silence the linter
+      if (!canvas || !worksheet || !worksheetWrapper) {
+        return;
+      }
+      const canvasRect = canvas.getBoundingClientRect();
+      x -= canvasRect.x;
+      y -= canvasRect.y;
+      // Makes sure is in the sheet area
+      if (
+        x > canvasRect.width ||
+        x < headerColumnWidth ||
+        y < headerRowHeight ||
+        y > canvasRect.height
+      ) {
+        if (x > 0 && x < headerColumnWidth && y > headerRowHeight && y < canvasRect.height) {
+          // Click on a row number
+          const cell = worksheet.getCellByCoordinates(headerColumnWidth, y);
+          if (cell) {
+            // TODO
+            // Row selected
+          }
+        }
+        return;
+      }
+      const cell = worksheet.getCellByCoordinates(x, y);
+      if (cell) {
+        options.onCellSelected(cell, event);
+        isSelecting.current = true;
+        worksheetWrapper.setPointerCapture(event.pointerId);
+      }
+    },
+    [options],
+  );
+
+  const onPointerHandleDown = useCallback(
+    (event: PointerEvent) => {
+      const worksheetWrapper = options.worksheetElement.current;
+      // Silence the linter
+      if (!worksheetWrapper) {
+        return;
+      }
+      isExtending.current = true;
+      worksheetWrapper.setPointerCapture(event.pointerId);
+      event.stopPropagation();
+      event.preventDefault();
+    },
+    [options],
+  );
+
+  return {
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onPointerHandleDown,
+    // onContextMenu,
+  };
+};
+
+export default usePointer;

webapp/src/components/workbook.tsx

@@ -0,0 +1,377 @@
+import Toolbar from "./toolbar";
+import FormulaBar from "./formulabar";
+import Navigation from "./navigation/navigation";
+import Worksheet from "./worksheet";
+import { styled } from "@mui/material/styles";
+import { useEffect, useRef, useState } from "react";
+import useKeyboardNavigation from "./useKeyboardNavigation";
+import { NavigationKey, getCellAddress } from "./WorksheetCanvas/util";
+import { LAST_COLUMN, LAST_ROW } from "./WorksheetCanvas/constants";
+import { WorkbookState } from "./workbookState";
+import { BorderOptions, Model, WorksheetProperties } from "@ironcalc/wasm";
+
+const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
+  const { model, workbookState } = props;
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [_redrawId, setRedrawId] = useState(0);
+  const info = model
+    .getWorksheetsProperties()
+    .map(({ name, color, sheet_id }: WorksheetProperties) => {
+      return { name, color: color ? color : "#FFF", sheetId: sheet_id };
+    });
+
+  const onRedo = () => {
+    model.redo();
+    setRedrawId((id) => id + 1);
+  };
+
+  const onUndo = () => {
+    model.undo();
+    setRedrawId((id) => id + 1);
+  };
+
+  const updateRangeStyle = (stylePath: string, value: string) => {
+    const {
+      sheet,
+      range: [rowStart, columnStart, rowEnd, columnEnd],
+    } = model.getSelectedView();
+    const row = Math.min(rowStart, rowEnd);
+    const column = Math.min(columnStart, columnEnd);
+    const range = {
+      sheet,
+      row,
+      column,
+      width: Math.abs(columnEnd - columnStart) + 1,
+      height: Math.abs(rowEnd - rowStart) + 1,
+    };
+    model.updateRangeStyle(range, stylePath, value);
+    setRedrawId((id) => id + 1);
+  };
+
+  const onToggleUnderline = (value: boolean) => {
+    updateRangeStyle("font.u", `${value}`);
+  };
+
+  const onToggleItalic = (value: boolean) => {
+    updateRangeStyle("font.i", `${value}`);
+  };
+
+  const onToggleBold = (value: boolean) => {
+    updateRangeStyle("font.b", `${value}`);
+  };
+
+  const onToggleStrike = (value: boolean) => {
+    updateRangeStyle("font.strike", `${value}`);
+  };
+
+  const onToggleHorizontalAlign = (value: string) => {
+    updateRangeStyle("alignment.horizontal", value);
+  };
+
+  const onToggleVerticalAlign = (value: string) => {
+    updateRangeStyle("alignment.vertical", value);
+  };
+
+  const onTextColorPicked = (hex: string) => {
+    updateRangeStyle("font.color", hex);
+  };
+
+  const onFillColorPicked = (hex: string) => {
+    updateRangeStyle("fill.fg_color", hex);
+  };
+
+  const onNumberFormatPicked = (numberFmt: string) => {
+    updateRangeStyle("num_fmt", numberFmt);
+  };
+
+  const onCopyStyles = () => {
+    const {
+      sheet,
+      range: [rowStart, columnStart, rowEnd, columnEnd],
+    } = model.getSelectedView();
+    const row1 = Math.min(rowStart, rowEnd);
+    const column1 = Math.min(columnStart, columnEnd);
+    const row2 = Math.max(rowStart, rowEnd);
+    const column2 = Math.max(columnStart, columnEnd);
+
+    const styles = [];
+    for (let row = row1; row <= row2; row++) {
+      const styleRow = [];
+      for (let column = column1; column <= column2; column++) {
+        styleRow.push(model.getCellStyle(sheet, row, column));
+      }
+      styles.push(styleRow);
+    }
+    console.log("set styles", styles);
+    workbookState.setCopyStyles(styles);
+    const el = rootRef.current?.getElementsByClassName("sheet-container")[0];
+    if (el) {
+      (el as HTMLElement).style.cursor =
+        `url('data:image/svg+xml;utf8,<svg data-v-56bd7dfc="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-paintbrush-vertical"><path d="M10 2v2"></path><path d="M14 2v4"></path><path d="M17 2a1 1 0 0 1 1 1v9H6V3a1 1 0 0 1 1-1z"></path><path d="M6 12a1 1 0 0 0-1 1v1a2 2 0 0 0 2 2h2a1 1 0 0 1 1 1v2.9a2 2 0 1 0 4 0V17a1 1 0 0 1 1-1h2a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1"></path></svg>'), auto`;
+    }
+  };
+
+  // FIXME: My gut tells me that we should have only one on onKeyPressed function that goes to
+  // the Rust end
+  const { onKeyDown } = useKeyboardNavigation({
+    onCellsDeleted: function (): void {
+      const {
+        sheet,
+        range: [rowStart, columnStart, rowEnd, columnEnd],
+      } = model.getSelectedView();
+      const row = Math.min(rowStart, rowEnd);
+      const column = Math.min(columnStart, columnEnd);
+
+      const width = Math.abs(columnEnd - columnStart) + 1;
+      const height = Math.abs(rowEnd - rowStart) + 1;
+      model.rangeClearContents(
+        sheet,
+        row,
+        column,
+        row + height,
+        column + width
+      );
+      setRedrawId((id) => id + 1);
+    },
+    onExpandAreaSelectedKeyboard: function (
+      key: "ArrowRight" | "ArrowLeft" | "ArrowUp" | "ArrowDown"
+    ): void {
+      model.onExpandSelectedRange(key);
+      setRedrawId((id) => id + 1);
+    },
+    onEditKeyPressStart: function (initText: string): void {
+      console.log(initText);
+      throw new Error("Function not implemented.");
+    },
+    onCellEditStart: function (): void {
+      throw new Error("Function not implemented.");
+    },
+    onBold: () => {
+      let { sheet, row, column } = model.getSelectedView();
+      let value = !model.getCellStyle(sheet, row, column).font.b;
+      onToggleBold(!value);
+    },
+    onItalic: () => {
+      let { sheet, row, column } = model.getSelectedView();
+      let value = !model.getCellStyle(sheet, row, column).font.i;
+      onToggleItalic(!value);
+    },
+    onUnderline: () => {
+      let { sheet, row, column } = model.getSelectedView();
+      let value = !model.getCellStyle(sheet, row, column).font.u;
+      onToggleUnderline(!value);
+    },
+    onNavigationToEdge: function (direction: NavigationKey): void {
+      console.log(direction);
+      // const newSelectedCell = model.getNavigationEdge(
+      //   key,
+      //   selectedSheet,
+      //   selectedCell.row,
+      //   selectedCell.column,
+      //   canvas.lastRow,
+      //   canvas.lastColumn,
+      // );
+      setRedrawId((id) => id + 1);
+    },
+    onPageDown: function (): void {
+      model.onPageDown();
+      setRedrawId((id) => id + 1);
+    },
+    onPageUp: function (): void {
+      model.onPageUp();
+      setRedrawId((id) => id + 1);
+    },
+    onArrowDown: function (): void {
+      model.onArrowDown();
+      setRedrawId((id) => id + 1);
+    },
+    onArrowUp: function (): void {
+      model.onArrowUp();
+      setRedrawId((id) => id + 1);
+    },
+    onArrowLeft: function (): void {
+      model.onArrowLeft();
+      setRedrawId((id) => id + 1);
+    },
+    onArrowRight: function (): void {
+      model.onArrowRight();
+      setRedrawId((id) => id + 1);
+    },
+    onKeyHome: function (): void {
+      const view = model.getSelectedView();
+      const cell = model.getSelectedCell();
+      model.setSelectedCell(cell[1], 1);
+      model.setTopLeftVisibleCell(view.top_row, 1);
+      setRedrawId((id) => id + 1);
+    },
+    onKeyEnd: function (): void {
+      const view = model.getSelectedView();
+      const cell = model.getSelectedCell();
+      model.setSelectedCell(cell[1], LAST_COLUMN);
+      model.setTopLeftVisibleCell(view.top_row, LAST_COLUMN - 5);
+      setRedrawId((id) => id + 1);
+    },
+    onUndo: function (): void {
+      model.undo();
+      setRedrawId((id) => id + 1);
+    },
+    onRedo: function (): void {
+      model.redo();
+      setRedrawId((id) => id + 1);
+    },
+    onNextSheet: function (): void {
+      const nextSheet = model.getSelectedSheet() + 1;
+      if (nextSheet >= model.getWorksheetsProperties().length) {
+        model.setSelectedSheet(0);
+      } else {
+        model.setSelectedSheet(nextSheet);
+      }
+    },
+    onPreviousSheet: function (): void {
+      const nextSheet = model.getSelectedSheet() - 1;
+      if (nextSheet < 0) {
+        model.setSelectedSheet(model.getWorksheetsProperties().length - 1);
+      } else {
+        model.setSelectedSheet(nextSheet);
+      }
+    },
+    root: rootRef,
+  });
+
+  useEffect(() => {
+    if (!rootRef.current) {
+      return;
+    }
+    rootRef.current.focus();
+  });
+
+  const {
+    sheet,
+    row,
+    column,
+    range: [rowStart, columnStart, rowEnd, columnEnd],
+  } = model.getSelectedView();
+
+  const cellAddress = getCellAddress(
+    { rowStart, rowEnd, columnStart, columnEnd },
+    { row, column }
+  );
+  const formulaValue = model.getCellContent(sheet, row, column);
+
+  const style = model.getCellStyle(sheet, row, column);
+
+  return (
+    <Container ref={rootRef} onKeyDown={onKeyDown} tabIndex={0}>
+      <Toolbar
+        canUndo={model.canUndo()}
+        canRedo={model.canRedo()}
+        onRedo={onRedo}
+        onUndo={onUndo}
+        onToggleUnderline={onToggleUnderline}
+        onToggleBold={onToggleBold}
+        onToggleItalic={onToggleItalic}
+        onToggleStrike={onToggleStrike}
+        onToggleHorizontalAlign={onToggleHorizontalAlign}
+        onToggleVerticalAlign={onToggleVerticalAlign}
+        onCopyStyles={onCopyStyles}
+        onTextColorPicked={onTextColorPicked}
+        onFillColorPicked={onFillColorPicked}
+        onNumberFormatPicked={onNumberFormatPicked}
+        onBorderChanged={function (border: BorderOptions): void {
+          const {
+            sheet,
+            range: [rowStart, columnStart, rowEnd, columnEnd],
+          } = model.getSelectedView();
+          const row = Math.min(rowStart, rowEnd);
+          const column = Math.min(columnStart, columnEnd);
+
+          const width = Math.abs(columnEnd - columnStart) + 1;
+          const height = Math.abs(rowEnd - rowStart) + 1;
+          const borderArea = {
+            type: border.border,
+            item: border,
+          };
+          model.setAreaWithBorder(
+            { sheet, row, column, width, height },
+            borderArea
+          );
+          setRedrawId((id) => id + 1);
+        }}
+        fillColor={style.fill.fg_color || "#FFF"}
+        fontColor={style.font.color}
+        bold={style.font.b}
+        underline={style.font.u}
+        italic={style.font.i}
+        strike={style.font.strike}
+        horizontalAlign={
+          style.alignment ? style.alignment.horizontal : "general"
+        }
+        verticalAlign={style.alignment ? style.alignment.vertical : "center"}
+        canEdit={true}
+        numFmt={""}
+        showGridLines={model.getShowGridLines(sheet)}
+        onToggleShowGridLines={(show) => {
+          model.setShowGridLines(sheet, show);
+          setRedrawId((id) => id + 1);
+        }}
+      />
+      <FormulaBar
+        cellAddress={cellAddress}
+        formulaValue={formulaValue}
+        onChange={(value) => {
+          console.log('set', sheet, row, column, value);
+          model.setUserInput(sheet, row, column, value);
+          setRedrawId((id) => id + 1);
+        }}
+      />
+      <Worksheet
+        model={model}
+        workbookState={workbookState}
+        refresh={(): void => {
+          setRedrawId((id) => id + 1);
+        }}
+      />
+      <Navigation
+        sheets={info}
+        selectedIndex={model.getSelectedSheet()}
+        onSheetSelected={function (sheet: number): void {
+          model.setSelectedSheet(sheet);
+          setRedrawId((value) => value + 1);
+        }}
+        onAddBlankSheet={function (): void {
+          model.newSheet();
+        }}
+        onSheetColorChanged={function (hex: string): void {
+          try {
+            model.setSheetColor(model.getSelectedSheet(), hex);
+          } catch (e) {
+            alert(`${e}`);
+          }
+        }}
+        onSheetRenamed={function (name: string): void {
+          try {
+            model.renameSheet(model.getSelectedSheet(), name);
+          } catch (e) {
+            alert(`${e}`);
+          }
+        }}
+        onSheetDeleted={function (): void {
+          model.deleteSheet(model.getSelectedSheet());
+        }}
+      />
+    </Container>
+  );
+};
+
+const Container = styled("div")`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+export default Workbook;

webapp/src/components/workbookContext.ts

@@ -0,0 +1,62 @@
+import { createContext } from "react";
+
+export interface Cell {
+  row: number;
+  column: number;
+}
+
+export interface Area {
+  rowStart: number;
+  rowEnd: number;
+  columnStart: number;
+  columnEnd: number;
+}
+
+interface Scroll {
+  left: number;
+  top: number;
+}
+
+type FocusType = "cell" | "formula-bar";
+
+/**
+ *  In Excel there are two "modes" of editing
+ *   * `init`: When you start typing in a cell. In this mode arrow keys will move away from the cell
+ *   * `edit`: If you double click on a cell or click in the cell while editing.
+ *     In this mode arrow keys will move within the cell.
+ *
+ * In a formula bar mode is always `edit`.
+ */
+type CellEditMode = "init" | "edit";
+
+const WorkbookContext = createContext<{
+    selectedSheet: number;
+    selectedCell: Cell;
+    selectedArea: Area;
+    scroll: Scroll;
+    extendToArea: Area | null;
+    editor: Editor | null;
+  }>({
+    selectedSheet: 0,
+    selectedCell: {row: 1, column: 1},
+    selectedArea: {rowStart:1, rowEnd: 1, columnStart:1, columnEnd: 1},
+    scroll: {top: 0, left: 0},
+    extendToArea: null,
+    editor: null
+  });
+
+
+
+interface Editor {
+    id: number;
+    sheet: number;
+    row: number;
+    column: number;
+    text: string;
+    base: string;
+    mode: CellEditMode;
+    focus: FocusType;
+  }
+
+
+  export default WorkbookContext;

webapp/src/components/workbookState.ts

@@ -0,0 +1,125 @@
+import { CellStyle } from "@ironcalc/wasm";
+
+export interface Cell {
+  row: number;
+  column: number;
+}
+
+export enum AreaType {
+  rowsDown,
+  columnsRight,
+  rowsUp,
+  columnsLeft,
+}
+
+export interface Area {
+  type: AreaType;
+  rowStart: number;
+  rowEnd: number;
+  columnStart: number;
+  columnEnd: number;
+}
+
+type FocusType = "cell" | "formula-bar";
+
+/**
+ *  In Excel there are two "modes" of editing
+ *   * `init`: When you start typing in a cell. In this mode arrow keys will move away from the cell
+ *   * `edit`: If you double click on a cell or click in the cell while editing.
+ *     In this mode arrow keys will move within the cell.
+ *
+ * In a formula bar mode is always `edit`.
+ */
+type CellEditMode = "init" | "edit";
+
+interface Editor {
+  id: number;
+  sheet: number;
+  row: number;
+  column: number;
+  text: string;
+  base: string;
+  mode: CellEditMode;
+  focus: FocusType;
+}
+
+interface Cells {
+  topLeftCell: { row: number; column: number };
+  bottomRightCell: { row: number; column: number };
+}
+
+type AreaStyles = CellStyle[][];
+
+export class WorkbookState {
+  private extendToArea: Area | null;
+  private editor: Editor | null;
+  private visibleCells: Cells | null;
+  private id;
+  private copyStyles: AreaStyles | null;
+
+  constructor() {
+    this.extendToArea = null;
+    this.visibleCells = null;
+    this.editor = null;
+    this.id = Math.floor(Math.random() * 1000);
+    this.copyStyles = null;
+  }
+
+  startEditing(_focus: FocusType, _text: string) {
+    // const {row, column} = this.selectedCell;
+    // this.editor = {
+    //   id: 0,
+    //   sheet: this.selectedSheet,
+    //   row,
+    //   column,
+    //   base: '',
+    //   text,
+    //   mode: 'init',
+    //   focus
+    // }
+  }
+
+  setEditorText(text: string) {
+    if (!this.editor) {
+      return;
+    }
+    this.editor.text = text;
+  }
+
+  setVisibleCells(cells: Cells) {
+    this.visibleCells = cells;
+  }
+
+  getVisibleCells(): Cells | null {
+    return this.visibleCells;
+  }
+
+  endEditing() {
+    this.editor = null;
+  }
+
+  getEditor(): Editor | null {
+    console.log("getEditor", this.id);
+    return this.editor;
+  }
+
+  getExtendToArea(): Area | null {
+    return this.extendToArea;
+  }
+
+  clearExtendToArea(): void {
+    this.extendToArea = null;
+  }
+
+  setExtendToArea(area: Area): void {
+    this.extendToArea = area;
+  }
+
+  setCopyStyles(styles: AreaStyles | null): void {
+    this.copyStyles = styles;
+  }
+
+  getCopyStyles(): AreaStyles | null {
+    return this.copyStyles;
+  }
+}

webapp/src/components/worksheet.tsx

@@ -0,0 +1,523 @@
+import { styled } from "@mui/material/styles";
+import { useEffect, useRef, useState } from "react";
+import WorksheetCanvas from "./WorksheetCanvas/worksheetCanvas";
+import {
+  outlineBackgroundColor,
+  outlineColor,
+} from "./WorksheetCanvas/constants";
+import usePointer from "./usePointer";
+import { AreaType, WorkbookState } from "./workbookState";
+import { Cell } from "./WorksheetCanvas/types";
+import Editor from "./editor";
+import EditorContext, { EditorState } from "./editor/editorContext";
+import { getFormulaHTML } from "./editor/util";
+import { Model } from "@ironcalc/wasm";
+
+function Worksheet(props: {
+  model: Model;
+  workbookState: WorkbookState;
+  refresh: () => void;
+}) {
+  const canvasElement = useRef<HTMLCanvasElement>(null);
+
+  const worksheetElement = useRef<HTMLDivElement>(null);
+  const scrollElement = useRef<HTMLDivElement>(null);
+  // const rootElement = useRef<HTMLDivElement>(null);
+  const spacerElement = useRef<HTMLDivElement>(null);
+  const cellOutline = useRef<HTMLDivElement>(null);
+  const areaOutline = useRef<HTMLDivElement>(null);
+  const cellOutlineHandle = useRef<HTMLDivElement>(null);
+  const extendToOutline = useRef<HTMLDivElement>(null);
+  const columnResizeGuide = useRef<HTMLDivElement>(null);
+  const rowResizeGuide = useRef<HTMLDivElement>(null);
+  // const contextMenuAnchorElement = useRef<HTMLDivElement>(null);
+  const columnHeaders = useRef<HTMLDivElement>(null);
+  const worksheetCanvas = useRef<WorksheetCanvas | null>(null);
+
+  const [isEditing, setEditing] = useState(false);
+  const ignoreScrollEventRef = useRef(false);
+
+  const [editorContext, setEditorContext] = useState<EditorState>({
+    mode: "accept",
+    insertRange: null,
+    baseText: "",
+    id: Math.floor(Math.random() * 1000),
+  });
+
+  const { model, workbookState, refresh } = props;
+  useEffect(() => {
+    const canvasRef = canvasElement.current;
+    const columnGuideRef = columnResizeGuide.current;
+    const rowGuideRef = rowResizeGuide.current;
+    const columnHeadersRef = columnHeaders.current;
+    const worksheetRef = worksheetElement.current;
+
+    const outline = cellOutline.current;
+    const handle = cellOutlineHandle.current;
+    const area = areaOutline.current;
+    const extendTo = extendToOutline.current;
+
+    if (
+      !canvasRef ||
+      !columnGuideRef ||
+      !rowGuideRef ||
+      !columnHeadersRef ||
+      !worksheetRef ||
+      !outline ||
+      !handle ||
+      !area ||
+      !extendTo ||
+      !scrollElement.current
+    )
+      return;
+    model.setWindowWidth(worksheetRef.clientWidth);
+    model.setWindowHeight(worksheetRef.clientHeight);
+    const canvas = new WorksheetCanvas({
+      width: worksheetRef.clientWidth,
+      height: worksheetRef.clientHeight,
+      model,
+      workbookState,
+      elements: {
+        canvas: canvasRef,
+        columnGuide: columnGuideRef,
+        rowGuide: rowGuideRef,
+        columnHeaders: columnHeadersRef,
+        cellOutline: outline,
+        cellOutlineHandle: handle,
+        areaOutline: area,
+        extendToOutline: extendTo,
+      },
+      onColumnWidthChanges(sheet, column, width) {
+        model.setColumnWidth(sheet, column, width);
+        worksheetCanvas.current?.renderSheet();
+      },
+      onRowHeightChanges(sheet, row, height) {
+        model.setRowHeight(sheet, row, height);
+        worksheetCanvas.current?.renderSheet();
+      },
+    });
+    const scrollX = model.getScrollX();
+    const scrollY = model.getScrollY();
+    const [sheetWidth, sheetHeight] = [scrollX + 100_000, scrollY + 500_000]; //canvas.getSheetDimensions();
+    if (spacerElement.current) {
+      spacerElement.current.style.height = `${sheetHeight}px`;
+      spacerElement.current.style.width = `${sheetWidth}px`;
+    }
+    const left = scrollElement.current.scrollLeft;
+    const top = scrollElement.current.scrollTop;
+    if (scrollX !== left) {
+      ignoreScrollEventRef.current = true;
+      scrollElement.current.scrollLeft = scrollX;
+      setTimeout(() => {
+        ignoreScrollEventRef.current = false;
+      }, 0);
+    }
+
+    if (scrollY !== top) {
+      ignoreScrollEventRef.current = true;
+      scrollElement.current.scrollTop = scrollY;
+      setTimeout(() => {
+        ignoreScrollEventRef.current = false;
+      }, 0);
+    }
+
+    canvas.renderSheet();
+    worksheetCanvas.current = canvas;
+  });
+
+  const sheetNames = model
+    .getWorksheetsProperties()
+    .map((s: { name: string }) => s.name);
+
+  const {
+    onPointerMove,
+    onPointerDown,
+    onPointerHandleDown,
+    onPointerUp,
+    // onContextMenu,
+  } = usePointer({
+    onCellSelected: (cell: Cell, event: React.MouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      model.setSelectedCell(cell.row, cell.column);
+      refresh();
+    },
+    onAreaSelecting: (cell: Cell) => {
+      const canvas = worksheetCanvas.current;
+      if (!canvas) {
+        return;
+      }
+      const { row, column } = cell;
+      model.onAreaSelecting(row, column);
+      canvas.renderSheet();
+    },
+    onAreaSelected: () => {
+      let styles = workbookState.getCopyStyles();
+      if (styles && styles.length) {
+        model.onPasteStyles(styles);
+        const canvas = worksheetCanvas.current;
+        if (!canvas) {
+          return;
+        }
+        canvas.renderSheet();
+      }
+      workbookState.setCopyStyles(null);
+      if (worksheetElement.current) {
+        worksheetElement.current.style.cursor = "auto";
+      }
+    },
+    onExtendToCell: (cell) => {
+      const canvas = worksheetCanvas.current;
+      if (!canvas) {
+        return;
+      }
+      const { row, column } = cell;
+      const {
+        sheet,
+        range: [rowStart, columnStart, rowEnd, columnEnd],
+      } = model.getSelectedView();
+      // We are either extending by rows or by columns
+      // And we could be doing it in the positive direction (downwards or right)
+      // or the negative direction (upwards or left)
+
+      if (
+        row > rowEnd &&
+        ((column <= columnEnd && column >= columnStart) ||
+          (column < columnStart && columnStart - column < row - rowEnd) ||
+          (column > columnEnd && column - columnEnd < row - rowEnd))
+      ) {
+        // rows downwards
+        const area = {
+          type: AreaType.rowsDown,
+          rowStart: rowEnd + 1,
+          rowEnd: row,
+          columnStart,
+          columnEnd,
+        };
+        workbookState.setExtendToArea(area);
+        canvas.renderSheet();
+      } else if (
+        row < rowStart &&
+        ((column <= columnEnd && column >= columnStart) ||
+          (column < columnStart && columnStart - column < rowStart - row) ||
+          (column > columnEnd && column - columnEnd < rowStart - row))
+      ) {
+        // rows upwards
+        const area = {
+          type: AreaType.rowsUp,
+          rowStart: row,
+          rowEnd: rowStart,
+          columnStart,
+          columnEnd,
+        };
+        workbookState.setExtendToArea(area);
+        canvas.renderSheet();
+      } else if (
+        column > columnEnd &&
+        ((row <= rowEnd && row >= rowStart) ||
+          (row < rowStart && rowStart - row < column - columnEnd) ||
+          (row > rowEnd && row - rowEnd < column - columnEnd))
+      ) {
+        // columns right
+        const area = {
+          type: AreaType.columnsRight,
+          rowStart,
+          rowEnd,
+          columnStart: columnEnd + 1,
+          columnEnd: column,
+        };
+        workbookState.setExtendToArea(area);
+        canvas.renderSheet();
+      } else if (
+        column < columnStart &&
+        ((row <= rowEnd && row >= rowStart) ||
+          (row < rowStart && rowStart - row < columnStart - column) ||
+          (row > rowEnd && row - rowEnd < columnStart - column))
+      ) {
+        // columns left
+        const area = {
+          type: AreaType.columnsLeft,
+          rowStart,
+          rowEnd,
+          columnStart: column,
+          columnEnd: columnStart,
+        };
+        workbookState.setExtendToArea(area);
+        canvas.renderSheet();
+      }
+    },
+    onExtendToEnd: () => {
+      const canvas = worksheetCanvas.current;
+      if (!canvas) {
+        return;
+      }
+      const { sheet, range } = model.getSelectedView();
+      const extendedArea = workbookState.getExtendToArea();
+      if (!extendedArea) {
+        return;
+      }
+      const rowStart = Math.min(range[0], range[2]);
+      const height = Math.abs(range[2] - range[0]) + 1;
+      const width = Math.abs(range[3] - range[1]) + 1;
+      const columnStart = Math.min(range[1], range[3]);
+
+      const area = { sheet, row: rowStart, column: columnStart, width, height };
+
+      switch (extendedArea.type) {
+        case AreaType.rowsDown:
+          model.autoFillRows(area, extendedArea.rowEnd);
+          break;
+        case AreaType.rowsUp: {
+          model.autoFillRows(area, extendedArea.rowStart);
+          break;
+        }
+        case AreaType.columnsRight: {
+          model.autoFillColumns(area, extendedArea.columnEnd);
+          break;
+        }
+        case AreaType.columnsLeft: {
+          model.autoFillColumns(area, extendedArea.columnStart);
+          break;
+        }
+      }
+      workbookState.clearExtendToArea();
+      canvas.renderSheet();
+    },
+    canvasElement,
+    worksheetElement,
+    worksheetCanvas,
+    // rowContextMenuAnchorElement,
+    // columnContextMenuAnchorElement,
+    // onRowContextMenu,
+    // onColumnContextMenu,
+  });
+
+  const onScroll = (_event: any): void => {
+    if (!scrollElement.current || !worksheetCanvas.current) {
+      return;
+    }
+    if (ignoreScrollEventRef.current) {
+      // Programmatic scroll ignored
+      return;
+    }
+    const left = scrollElement.current.scrollLeft;
+    const top = scrollElement.current.scrollTop;
+
+    worksheetCanvas.current.setScrollPosition({ left, top });
+    worksheetCanvas.current.renderSheet();
+  };
+
+  const { row, column, sheet: selectedSheet } = model.getSelectedView();
+
+  return (
+    // <EditorContext.Provider value={{editorContext}}>
+    <Wrapper ref={scrollElement} onScroll={onScroll} className="scroll">
+      <Spacer ref={spacerElement} />
+      <SheetContainer
+        className="sheet-container"
+        ref={worksheetElement}
+        onPointerDown={(event) => {
+          if (isEditing === true && editorContext.mode !== "insert") {
+            setEditing(false);
+            model.setUserInput(
+              selectedSheet,
+              row,
+              column,
+              editorContext.baseText
+            );
+          }
+          onPointerDown(event);
+        }}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+        onDoubleClick={(event) => {
+          const { sheet, row, column } = model.getSelectedView();
+          const text = model.getCellContent(sheet, row, column) || "";
+          console.log("dbclick", text);
+
+          workbookState.startEditing("cell", `${text}`);
+          setEditorContext((c: EditorState) => {
+            console.log("text", text, c.id);
+            return {
+              mode: c.mode,
+              insertRange: c.insertRange,
+              baseText: text,
+              dontChange: true,
+              id: c.id,
+            };
+          });
+
+          setEditing(true);
+          event.stopPropagation();
+          event.preventDefault();
+          // refresh();
+        }}
+      >
+        <SheetCanvas ref={canvasElement} />
+        <CellOutline ref={cellOutline}>
+          {
+            <Editor
+              minimalWidth={200}
+              minimalHeight={90}
+              textColor="#333"
+              getStyledText={(text: string, insertRangeText: string) => {
+                return getFormulaHTML(
+                  text,
+                  0,
+                  sheetNames,
+                  editorContext.insertRange,
+                  insertRangeText
+                );
+              }}
+              onEditEnd={(text: string) => {
+                console.log(text);
+                setEditing(false);
+                model.setUserInput(selectedSheet, row, column, text);
+              }}
+              originalText={
+                model.getCellContent(selectedSheet, row, column) || ""
+              }
+              display={isEditing}
+              cell={{ sheet: selectedSheet, row, column }}
+              sheetNames={sheetNames}
+            />
+          }
+        </CellOutline>
+        <AreaOutline ref={areaOutline} />
+        <ExtendToOutline ref={extendToOutline} />
+        <CellOutlineHandle
+          ref={cellOutlineHandle}
+          onPointerDown={onPointerHandleDown}
+        />
+        <ColumnResizeGuide ref={columnResizeGuide} />
+        <RowResizeGuide ref={rowResizeGuide} />
+        <ColumnHeaders ref={columnHeaders} />
+      </SheetContainer>
+    </Wrapper>
+    // </EditorContext.Provider>
+  );
+}
+
+const Spacer = styled("div")`
+  position: absolute;
+  height: 5000px;
+  width: 5000px;
+`;
+
+const SheetContainer = styled("div")`
+  position: sticky;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+
+  .column-resize-handle {
+    position: absolute;
+    top: 0px;
+    width: 3px;
+    opacity: 0;
+    background: ${outlineColor};
+    border-radius: 5px;
+    cursor: col-resize;
+  }
+
+  .column-resize-handle:hover {
+    opacity: 1;
+  }
+  .row-resize-handle {
+    position: absolute;
+    left: 0px;
+    height: 3px;
+    opacity: 0;
+    background: ${outlineColor};
+    border-radius: 5px;
+    cursor: row-resize;
+  }
+
+  .row-resize-handle:hover {
+    opacity: 1;
+  }
+`;
+
+const Wrapper = styled("div")({
+  position: "absolute",
+  overflow: "scroll",
+  top: 71,
+  left: 0,
+  right: 0,
+  bottom: 41,
+});
+
+const SheetCanvas = styled("canvas")`
+  position: relative;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 40px;
+`;
+
+const ColumnResizeGuide = styled("div")`
+  position: absolute;
+  top: 0px;
+  display: none;
+  height: 100%;
+  width: 0px;
+  border-left: 1px dashed ${outlineColor};
+`;
+
+const ColumnHeaders = styled("div")`
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  overflow: hidden;
+  display: flex;
+  & .column-header {
+    display: inline-block;
+    text-align: center;
+    overflow: hidden;
+    height: 100%;
+    user-select: none;
+  }
+`;
+
+const RowResizeGuide = styled("div")`
+  position: absolute;
+  display: none;
+  left: 0px;
+  height: 0px;
+  width: 100%;
+  border-top: 1px dashed ${outlineColor};
+`;
+
+const AreaOutline = styled("div")`
+  position: absolute;
+  border: 1px solid ${outlineColor};
+  border-radius: 3px;
+  background-color: ${outlineBackgroundColor};
+`;
+
+const CellOutline = styled("div")`
+  position: absolute;
+  border: 2px solid ${outlineColor};
+  border-radius: 3px;
+  word-break: break-word;
+  font-size: 13px;
+  display: flex;
+`;
+
+const CellOutlineHandle = styled("div")`
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  background: ${outlineColor};
+  cursor: crosshair;
+  // border: 1px solid white;
+  border-radius: 1px;
+`;
+
+const ExtendToOutline = styled("div")`
+  position: absolute;
+  border: 1px dashed ${outlineColor};
+  border-radius: 3px;
+`;
+
+export default Worksheet;

webapp/src/fonts.css

@@ -0,0 +1,16 @@
+/* inter-regular - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    src: url('fonts/inter-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* inter-600 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    src: url('fonts/inter-v13-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}

webapp/src/i18n.ts

@@ -0,0 +1,18 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import translationEN from './locale/en_us.json';
+
+const resources = {
+  'en-US': { translation: translationEN },
+};
+
+i18n.use(initReactI18next).init({
+  resources,
+  lng: 'en-US',
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+export default i18n;

webapp/src/icons/arrow-middle-from-line.svg

@@ -0,0 +1,14 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="arrow-middle-from-line" clip-path="url(#clip0_107_4135)">
+<path id="Vector" d="M8 14.6667V10.6667" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M8 5.33333V1.33333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M14.6667 8H1.33334" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M10 12.6667L8 10.6667L6 12.6667" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" d="M10 3.33333L8 5.33333L6 3.33333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_107_4135">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

webapp/src/icons/border-bottom.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 14H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 8H14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V11.3333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 11.3333V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V11.3333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

webapp/src/icons/border-center-h.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 5.33333V3.33333C14 2.59695 13.403 2 12.6667 2H8M14 10.6667V12.6667C14 13.403 13.403 14 12.6667 14H8M2 10.6667V12.6667C2 13.403 2.59695 14 3.33333 14H8M2 5.33333V3.33333C2 2.59695 2.59695 2 3.33333 2H8M8 14V10.6667M8 2V5.33333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 8H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

webapp/src/icons/border-center-v.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6667 2H12.6667C13.403 2 14 2.59695 14 3.33333V8M5.33333 2H3.33333C2.59695 2 2 2.59695 2 3.33333V8M5.33333 14H3.33333C2.59695 14 2 13.403 2 12.6667V8M10.6667 14H12.6667C13.403 14 14 13.403 14 12.6667V8M2 8H5.33333M14 8H10.6667" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

webapp/src/icons/border-inner.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 5.33333V3.33333C14 2.59695 13.403 2 12.6667 2H10.6667M14 10.6667V12.6667C14 13.403 13.403 14 12.6667 14H10.6667M2 10.6667V12.6667C2 13.403 2.59695 14 3.33333 14H5.33333M2 5.33333V3.33333C2 2.59695 2.59695 2 3.33333 2H5.33333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 8H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

webapp/src/icons/border-left.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.66667 2H12.6667C13.403 2 14 2.59695 14 3.33333V12.6667C14 13.403 13.403 14 12.6667 14H4.66667" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.66667 8H14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 2V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

webapp/src/icons/border-none.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 8H14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

webapp/src/icons/border-outer.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.66667 8H11.3333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 4.66667L8 11.3333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

webapp/src/icons/border-right.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3333 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H11.3333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 8H11.3333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 2V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

webapp/src/icons/border-style.svg

@@ -0,0 +1,15 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<!-- <path d="M14 4H2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 8H2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 2"/>
+<path d="M14 12H2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="0.01 2"/> -->
+<style>
+    line {
+      stroke: black;
+    }
+  </style>
+<line x1="0" y1="2" x2="16" y2="2" />
+  <!-- Dashes and gaps of the same size -->
+<line x1="0" y1="8" x2="16" y2="8" stroke-dasharray="2.28 2.28" />
+  <!-- Dashes and gaps of different sizes -->
+<line x1="0" y1="14" x2="16" y2="14" stroke-dasharray="1 2" />
+</svg>

webapp/src/icons/border-top.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 4.66667V12.6667C14 13.403 13.403 14 12.6667 14H3.33333C2.59695 14 2 13.403 2 12.6667V4.66667" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 2H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 8H14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 4.66667V14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

webapp/src/icons/decrease-decimal.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 11.3333H5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 9.33333L5 11.3333L7 13.3333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.66667 4.33333C7.66667 3.59695 7.06971 3 6.33333 3C5.59695 3 5 3.59695 5 4.33333V5.66667C5 6.40305 5.59695 7 6.33333 7C7.06971 7 7.66667 6.40305 7.66667 5.66667V4.33333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 7H3.00667" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

webapp/src/icons/delete-column.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 3.33333L2 12.6667C2 13.403 2.59695 14 3.33333 14L3.66667 14C4.40305 14 5 13.403 5 12.6667L5 3.33333C5 2.59695 4.40305 2 3.66667 2L3.33333 2C2.59695 2 2 2.59695 2 3.33333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 6L2 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 6L11 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 10L2 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 10L11 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 3.33333L11 12.6667C11 13.403 11.597 14 12.3333 14L12.6667 14C13.403 14 14 13.403 14 12.6667L14 3.33333C14 2.59695 13.403 2 12.6667 2L12.3333 2C11.597 2 11 2.59695 11 3.33333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.58578 9.41422L9.41421 6.58579" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.58578 6.58578L9.41421 9.41421" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

webapp/src/icons/delete-row.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V3.66667C2 4.40305 2.59695 5 3.33333 5H12.6667C13.403 5 14 4.40305 14 3.66667V3.33333C14 2.59695 13.403 2 12.6667 2Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.6667 11H3.33333C2.59695 11 2 11.597 2 12.3333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V12.3333C14 11.597 13.403 11 12.6667 11Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 11V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.58578 6.58578L9.41421 9.41421" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.41422 6.58578L6.58579 9.41421" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

webapp/src/icons/fx.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.182 13.305C0.303333 13.3917 0.468 13.435 0.676 13.435C0.962 13.435 1.24367 13.3483 1.521 13.175C1.79833 13.0103 2.05833 12.7937 2.301 12.525C2.55233 12.2563 2.77333 11.9703 2.964 11.667C3.16333 11.3637 3.32367 11.069 3.445 10.783C3.575 10.5057 3.653 10.276 3.679 10.094L4.459 5.011H5.954V4.439H4.537L4.706 3.36C4.80133 2.75334 4.96167 2.281 5.187 1.943C5.421 1.59634 5.73733 1.423 6.136 1.423C6.422 1.423 6.67767 1.488 6.903 1.618L7.189 1.787H7.293L7.566 1.28C7.592 1.23667 7.61367 1.189 7.631 1.137C7.657 1.085 7.67 1.04167 7.67 1.007C7.67 0.93767 7.64833 0.881336 7.605 0.838003C7.57033 0.786003 7.49233 0.72967 7.371 0.669003C7.30167 0.643003 7.22367 0.621336 7.137 0.604003C7.05033 0.578003 6.95933 0.565002 6.864 0.565002C6.53467 0.565002 6.20967 0.651669 5.889 0.825003C5.56833 0.98967 5.265 1.21067 4.979 1.488C4.693 1.75667 4.43733 2.047 4.212 2.359C3.98667 2.66234 3.80033 2.957 3.653 3.243C3.51433 3.52034 3.432 3.75434 3.406 3.945L3.328 4.439H2.249V5.011H3.25L2.405 10.692C2.31833 11.2813 2.17533 11.745 1.976 12.083C1.77667 12.4297 1.508 12.603 1.17 12.603C0.953333 12.603 0.788667 12.564 0.676 12.486L0.39 12.278H0.312L0.0779999 12.746C0.026 12.85 0 12.9367 0 13.006C0 13.1187 0.0606667 13.2183 0.182 13.305ZM5.90545 9.98999C5.82745 10.1027 5.78845 10.211 5.78845 10.315H6.65945C6.70279 10.211 6.75045 10.1113 6.80245 10.016C6.85445 9.91199 6.93245 9.78199 7.03645 9.62599C7.14045 9.46132 7.30079 9.23166 7.51745 8.93699C7.73412 8.64232 8.03312 8.25232 8.41445 7.76699L9.45445 10.341H9.49345L11.2745 9.92499V9.82099L10.3385 9.44399L9.37645 6.98699C9.80112 6.50166 10.1521 6.11166 10.4295 5.81699C10.7068 5.52232 10.9235 5.29266 11.0795 5.12799C11.2441 4.96332 11.3568 4.83332 11.4175 4.73799C11.4868 4.63399 11.5215 4.53432 11.5215 4.43899H10.7025C10.6678 4.52566 10.6288 4.61666 10.5855 4.71199C10.5421 4.79866 10.4728 4.91566 10.3775 5.06299C10.2908 5.20166 10.1565 5.39666 9.97445 5.64799C9.79245 5.89932 9.54545 6.22866 9.23345 6.63599L8.31045 4.30899H8.27145L6.43845 4.72499V4.82899L7.38745 5.21899L8.27145 7.40299C7.78612 7.95766 7.38312 8.40399 7.06245 8.74199C6.74179 9.07999 6.48612 9.34432 6.29545 9.53499C6.11345 9.72566 5.98345 9.87732 5.90545 9.98999Z" fill="#828282"/>
+</svg>

webapp/src/icons/increase-decimal.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 11.3333H5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.5 9.33333L12.5 11.3333L10.5 13.3333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.66667 4.33333C7.66667 3.59695 7.06971 3 6.33333 3C5.59695 3 5 3.59695 5 4.33333V5.66667C5 6.40305 5.59695 7 6.33333 7C7.06971 7 7.66667 6.40305 7.66667 5.66667V4.33333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.3333 4.33333C12.3333 3.59695 11.7364 3 11 3C10.2636 3 9.66667 3.59695 9.66667 4.33333V5.66667C9.66667 6.40305 10.2636 7 11 7C11.7364 7 12.3333 6.40305 12.3333 5.66667V4.33333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 7H3.00667" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

webapp/src/icons/index.ts

@@ -0,0 +1,46 @@
+import DecimalPlacesDecreaseIcon from "./decrease-decimal.svg?react";
+import DecimalPlacesIncreaseIcon from "./increase-decimal.svg?react";
+
+import BorderBottomIcon from "./border-bottom.svg?react";
+import BorderCenterHIcon from "./border-center-h.svg?react";
+import BorderCenterVIcon from "./border-center-v.svg?react";
+import BorderInnerIcon from "./border-inner.svg?react";
+import BorderLeftIcon from "./border-left.svg?react";
+import BorderOuterIcon from "./border-outer.svg?react";
+import BorderRightIcon from "./border-right.svg?react";
+import BorderTopIcon from "./border-top.svg?react";
+import BorderNoneIcon from "./border-none.svg?react";
+import BorderStyleIcon from "./border-style.svg?react";
+
+import DeleteColumnIcon from "./delete-column.svg?react";
+import DeleteRowIcon from "./delete-row.svg?react";
+import InsertColumnLeftIcon from "./insert-column-left.svg?react";
+import InsertColumnRightIcon from "./insert-column-right.svg?react";
+import InsertRowAboveIcon from "./insert-row-above.svg?react";
+import InsertRowBelow from "./insert-row-below.svg?react";
+import ArrowMiddleFromLine from "./arrow-middle-from-line.svg?react";
+
+import Fx from "./fx.svg?react";
+
+export {
+  ArrowMiddleFromLine,
+  DecimalPlacesDecreaseIcon,
+  DecimalPlacesIncreaseIcon,
+  BorderBottomIcon,
+  BorderCenterHIcon,
+  BorderCenterVIcon,
+  BorderInnerIcon,
+  BorderLeftIcon,
+  BorderOuterIcon,
+  BorderRightIcon,
+  BorderTopIcon,
+  BorderNoneIcon,
+  BorderStyleIcon,
+  DeleteColumnIcon,
+  DeleteRowIcon,
+  InsertColumnLeftIcon,
+  InsertColumnRightIcon,
+  InsertRowAboveIcon,
+  InsertRowBelow,
+  Fx,
+};

webapp/src/icons/insert-column-left.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 12.6667L14 3.33333C14 2.59695 13.403 2 12.6667 2L9.33333 2C8.59695 2 8 2.59695 8 3.33333L8 12.6667C8 13.403 8.59695 14 9.33333 14L12.6667 14C13.403 14 14 13.403 14 12.6667Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 6L8 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 10L8 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 6L4 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 8L2 8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

webapp/src/icons/insert-column-right.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 3.33333L2 12.6667C2 13.403 2.59695 14 3.33333 14L6.66667 14C7.40305 14 8 13.403 8 12.6667L8 3.33333C8 2.59695 7.40305 2 6.66667 2L3.33333 2C2.59695 2 2 2.59695 2 3.33333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 10L8 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 6L8 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 10L12 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 8L14 8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

webapp/src/icons/insert-row-above.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 8H3.33333C2.59695 8 2 8.59695 2 9.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V9.33333C14 8.59695 13.403 8 12.6667 8Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 11H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 8V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 4H10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

webapp/src/icons/insert-row-below.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V6.66667C2 7.40305 2.59695 8 3.33333 8H12.6667C13.403 8 14 7.40305 14 6.66667V3.33333C14 2.59695 13.403 2 12.6667 2Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 5H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 12H10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 10V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

webapp/src/index.css

@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  padding: 0;
+}

webapp/src/locale/en_us.json

@@ -0,0 +1,50 @@
+{
+    "toolbar": {
+        "redo": "Redo",
+        "undo": "Undo",
+        "copy_styles": "Copy styles",
+        "euro": "Format as Euro",
+        "percentage": "Format as Percentage",
+        "bold": "Bold",
+        "italic": "Italic",
+        "underline": "Underline",
+        "strike_through": "Strikethrough",
+        "align_left": "Align left",
+        "align_right": "Align right",
+        "align_center": "Align center",
+        "format_number": "Format number",
+        "font_color": "Font color",
+        "fill_color": "Fill color",
+        "borders": "Borders",
+        "decimal_places_increase": "Increase decimal places",
+        "decimal_places_decrease": "Decrease decimal places",
+        "format_menu": {
+            "auto": "Auto",
+            "number": "Number",
+            "percentage": "Percentage",
+            "currency_eur": "Euro (EUR)",
+            "currency_usd": "Dollar (USD",
+            "currency_gbp": "British Pound (GBD)",
+            "date_short": "Short date",
+            "date_long": "Long date",
+            "custom": "Custom",
+            "number_example": "1,000.00",
+            "percentage_example": "10%",
+            "currency_eur_example": "€",
+            "currency_usd_example": "$",
+            "currency_gbp_example": "£",
+            "date_short_example": "09/24/2024",
+            "date_long_example": "Tuesday, September 24, 2024"
+        }
+    },
+    "num_fmt" :{
+        "title": "Custom number format",
+        "label": "Number format",
+        "save": "Save"
+    },
+    "sheet_rename": {
+        "rename": "Save",
+        "label": "New name",
+        "title": "Rename Sheet"
+    }
+}

webapp/src/main.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+import { theme } from './theme.ts';
+import ThemeProvider from '@mui/material/styles/ThemeProvider';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <ThemeProvider theme={theme}>
+      <App />
+    </ThemeProvider>
+  </React.StrictMode>,
+);

webapp/src/theme.ts

@@ -0,0 +1,66 @@
+import { createTheme } from "@mui/material/styles";
+import './fonts.css';
+
+export const theme = createTheme({
+  typography: {
+    fontFamily: "Inter",
+  },
+  palette: {
+    common: {
+      black: "#272525",
+      white: "#FFF",
+    },
+    primary: {
+      main: "#F2994A",
+      light: "#EFAA6D",
+      dark: "#D68742",
+      contrastText: "#FFF",
+    },
+    secondary: {
+      main: "#2F80ED",
+      light: "#4E92EC",
+      dark: "#2B6EC8",
+      contrastText: "#FFF",
+    },
+    error: {
+      main: "#EB5757",
+      light: "#E77A7A",
+      dark: "#CB4C4C",
+      contrastText: "#FFF",
+    },
+    warning: {
+      main: "#F2C94C",
+      light: "#EED384",
+      dark: "#D6B244",
+      contrastText: "#FFF",
+    },
+    info: {
+      main: "#9E9E9E",
+      light: "#E0E0E0",
+      dark: "#757575",
+      contrastText: "#FFF",
+    },
+    success: {
+      main: "#27AE60",
+      light: "#57BD82",
+      dark: "#239152",
+      contrastText: "#FFF",
+    },
+    grey: {
+      "50": "#F2F2F2",
+      "100": "#F5F5F5",
+      "200": "#EEEEEE",
+      "300": "#E0E0E0",
+      "400": "#BDBDBD",
+      "500": "#9E9E9E",
+      "600": "#757575",
+      "700": "#616161",
+      "800": "#424242",
+      "900": "#333333",
+      A100: "#F2F2F2",
+      A200: "#EEEEEE",
+      A400: "#bdbdbd",
+      A700: "#616161",
+    },
+  },
+});

webapp/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

webapp/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

webapp/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

webapp/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import svgr from 'vite-plugin-svgr';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), svgr()],
+  server: {
+    fs: {
+      // Allow serving files from one level up to the project root
+      allow: ['..'],
+    },
+  },
+});

xlsx/src/import/mod.rs

@@ -93,6 +93,8 @@ fn load_xlsx_from_reader<R: Read + std::io::Seek>(
         0,
         WorkbookView {
             sheet: selected_sheet,
+            window_width: 800,
+            window_height: 600,
         },
     );
     Ok(Workbook {