UPDATE: Merge cells

base/src/cell.rs

@@ -89,6 +89,8 @@ impl Cell {
             Cell::CellFormulaNumber { s, .. } => *s = style,
             Cell::CellFormulaString { s, .. } => *s = style,
             Cell::CellFormulaError { s, .. } => *s = style,
+            // Should we throw an error here?
+            Cell::Merged { .. } => {}
         };
     }
 
@@ -104,6 +106,8 @@ impl Cell {
             Cell::CellFormulaNumber { s, .. } => *s,
             Cell::CellFormulaString { s, .. } => *s,
             Cell::CellFormulaError { s, .. } => *s,
+            // A merged cell has no style
+            Cell::Merged { .. } => 0,
         }
     }
 
@@ -119,6 +123,7 @@ impl Cell {
             Cell::CellFormulaNumber { .. } => CellType::Number,
             Cell::CellFormulaString { .. } => CellType::Text,
             Cell::CellFormulaError { .. } => CellType::ErrorValue,
+            Cell::Merged { .. } => CellType::Number,
         }
     }
 
@@ -156,6 +161,7 @@ impl Cell {
                 let v = ei.to_localized_error_string(language);
                 CellValue::String(v)
             }
+            Cell::Merged { .. } => CellValue::None,
         }
     }
 

base/src/lib.rs

@@ -59,6 +59,7 @@ pub mod mock_time;
 
 pub use model::get_milliseconds_since_epoch;
 pub use model::Model;
+pub use model::CellStructure;
 pub use user_model::BorderArea;
 pub use user_model::ClipboardData;
 pub use user_model::UserModel;

base/src/model.rs

@@ -31,6 +31,7 @@ use crate::{
 };
 
 use chrono_tz::Tz;
+use serde::{Deserialize, Serialize};
 
 #[cfg(test)]
 pub use crate::mock_time::get_milliseconds_since_epoch;
@@ -72,6 +73,27 @@ pub(crate) enum CellState {
     Evaluating,
 }
 
+/// Cell structure indicates if the cell is part of a merged cell or not
+#[derive(Clone, Serialize, Deserialize)]
+pub enum CellStructure {
+    /// The cell is not part of a merged cell
+    Simple,
+    /// The cell is part of a merged cell, and teh root cell is (row, column)
+    Merged {
+        /// Row of the root cell
+        row: i32,
+        /// Column of the root cell
+        column: i32,
+    },
+    /// The cell is the root of a merged cell of dimensions (width, height)
+    MergedRoot {
+        /// Width of the merged cell
+        width: i32,
+        /// Height of the merged cell
+        height: i32,
+    },
+}
+
 /// A parsed formula for a defined name
 #[derive(Clone)]
 pub(crate) enum ParsedDefinedName {
@@ -751,6 +773,7 @@ impl Model {
                     }
                 }
             }
+            Merged { .. } => CalcResult::EmptyCell,
         }
     }
 
@@ -1438,6 +1461,10 @@ impl Model {
         value: String,
     ) -> Result<(), String> {
         // If value starts with "'" then we force the style to be quote_prefix
+        let cell = self.workbook.worksheet(sheet)?.cell(row, column);
+        if matches!(cell, Some(Cell::Merged { .. })) {
+            return Err("Cannot set value on merged cell".to_string());
+        }
         let style_index = self.get_cell_style_index(sheet, row, column)?;
         if let Some(new_value) = value.strip_prefix('\'') {
             // First check if it needs quoting
@@ -1931,32 +1958,16 @@ impl Model {
     }
 
     /// Returns markup representation of the given `sheet`.
-    pub fn get_sheet_markup(
-        &self,
-        sheet: u32,
-        start_row: i32,
-        start_column: i32,
-        width: i32,
-        height: i32,
-    ) -> Result<String, String> {
-        let mut table: Vec<Vec<String>> = Vec::new();
-        if start_row < 1 || start_column < 1 {
-            return Err("Start row and column must be positive".to_string());
-        }
-        if start_row + height >= LAST_ROW || start_column + width >= LAST_COLUMN {
-            return Err("Start row and column exceed the maximum allowed".to_string());
-        }
-        if height <= 0 || width <= 0 {
-            return Err("Height must be positive and width must be positive".to_string());
-        }
+    pub fn get_sheet_markup(&self, sheet: u32) -> Result<String, String> {
+        let worksheet = self.workbook.worksheet(sheet)?;
+        let dimension = worksheet.dimension();
 
-        // a mutable vector to store the column widths of length `width + 1`
-        let mut column_widths: Vec<f64> = vec![0.0; (width + 1) as usize];
+        let mut rows = Vec::new();
 
-        for row in start_row..(start_row + height + 1) {
+        for row in 1..(dimension.max_row + 1) {
             let mut row_markup: Vec<String> = Vec::new();
 
-            for column in start_column..(start_column + width + 1) {
+            for column in 1..(dimension.max_column + 1) {
                 let mut cell_markup = match self.get_cell_formula(sheet, row, column)? {
                     Some(formula) => formula,
                     None => self.get_formatted_cell_value(sheet, row, column)?,
@@ -1965,34 +1976,12 @@ impl Model {
                 if style.font.b {
                     cell_markup = format!("**{cell_markup}**")
                 }
-                column_widths[(column - start_column) as usize] =
-                    column_widths[(column - start_column) as usize].max(cell_markup.len() as f64);
                 row_markup.push(cell_markup);
             }
 
-            table.push(row_markup);
+            rows.push(row_markup.join("|"));
         }
-        let mut rows = Vec::new();
-        for (j, row) in table.iter().enumerate() {
-            if j == 1 {
-                let mut row_markup = String::new();
-                for i in 0..(width + 1) {
-                    row_markup.push('|');
-                    let wide = column_widths[i as usize] as usize;
-                    row_markup.push_str(&"-".repeat(wide));
-                }
-                rows.push(row_markup);
-            }
-            let mut row_markup = String::new();
 
-            for (i, cell) in row.iter().enumerate() {
-                row_markup.push('|');
-                let wide = column_widths[i] as usize;
-                // Add padding to the cell content
-                row_markup.push_str(&format!("{:<wide$}", cell, wide = wide));
-            }
-            rows.push(row_markup);
-        }
         Ok(rows.join("\n"))
     }
 
@@ -2296,6 +2285,91 @@ impl Model {
     pub fn delete_row_style(&mut self, sheet: u32, row: i32) -> Result<(), String> {
         self.workbook.worksheet_mut(sheet)?.delete_row_style(row)
     }
+
+    /// Returns the geometric structure of a cell
+    pub fn get_cell_structure(
+        &self,
+        sheet: u32,
+        row: i32,
+        column: i32,
+    ) -> Result<CellStructure, String> {
+        let worksheet = self.workbook.worksheet(sheet)?;
+        worksheet.get_cell_structure(row, column)
+    }
+
+    /// Merges cells
+    pub fn merge_cells(
+        &mut self,
+        sheet: u32,
+        row: i32,
+        column: i32,
+        width: i32,
+        height: i32,
+    ) -> Result<(), String> {
+        let worksheet = self.workbook.worksheet_mut(sheet)?;
+        let sheet_data = &mut worksheet.sheet_data;
+        // First check that it is possible to merge the cells
+        for r in row..(row + height) {
+            for c in column..(column + width) {
+                if let Some(Cell::Merged { .. }) =
+                    sheet_data.get(&r).and_then(|row_data| row_data.get(&c))
+                {
+                    return Err("Cannot merge cells".to_string());
+                }
+            }
+        }
+        worksheet
+            .merged_cells
+            .insert((row, column), (width, height));
+        for r in row..(row + height) {
+            for c in column..(column + width) {
+                // We remove everything except the "root" cell:
+                if r == row && c == column {
+                    continue;
+                }
+                if let Some(row_data) = sheet_data.get_mut(&r) {
+                    row_data.remove(&c);
+                    row_data.insert(c, Cell::Merged { r: row, c: column });
+                } else {
+                    let mut row_data = HashMap::new();
+                    row_data.insert(c, Cell::Merged { r: row, c: column });
+                    sheet_data.insert(r, row_data);
+                }
+            }
+        }
+        Ok(())
+    }
+
+    /// Unmerges cells
+    pub fn unmerge_cells(&mut self, sheet: u32, row: i32, column: i32) -> Result<(), String> {
+        let s = self.get_cell_style_index(sheet, row, column)?;
+        let worksheet = self.workbook.worksheet_mut(sheet)?;
+        let sheet_data = &mut worksheet.sheet_data;
+        let (width, height) = match worksheet.merged_cells.get(&(row, column)) {
+            Some((w, h)) => (*w, *h),
+            None => return Ok(()),
+        };
+        worksheet.merged_cells.remove(&(row, column));
+        for r in row..(row + width) {
+            for c in column..(column + height) {
+                // We remove everything except the "root" cell:
+                if r == row && c == column {
+                    continue;
+                }
+                if let Some(row_data) = sheet_data.get_mut(&r) {
+                    row_data.remove(&c);
+                    if s != 0 {
+                        row_data.insert(c, Cell::EmptyCell { s });
+                    }
+                } else if s != 0 {
+                    let mut row_data = HashMap::new();
+                    row_data.insert(c, Cell::EmptyCell { s });
+                    sheet_data.insert(r, row_data);
+                }
+            }
+        }
+        Ok(())
+    }
 }
 
 #[cfg(test)]

base/src/new_empty.rs

@@ -58,10 +58,10 @@ impl Model {
             rows: vec![],
             comments: vec![],
             dimension: "A1".to_string(),
-            merge_cells: vec![],
             name: name.to_string(),
             shared_formulas: vec![],
             sheet_data: Default::default(),
+            merged_cells: HashMap::new(),
             sheet_id,
             state: SheetState::Visible,
             color: Default::default(),

base/src/test/test_sheet_markup.rs

@@ -21,7 +21,7 @@ fn test_sheet_markup() {
     model.set_cell_style(0, 4, 1, &style).unwrap();
 
     assert_eq!(
-        model.get_sheet_markup(0, 1, 1, 4, 2),
+        model.get_sheet_markup(0),
         Ok("**Item**|**Cost**\nRent|$600\nElectricity|$200\n**Total**|=SUM(B2:B3)".to_string()),
     )
 }

base/src/test/test_styles.rs

@@ -62,17 +62,3 @@ fn test_create_named_style() {
     let style = model.get_style_for_cell(0, 1, 1).unwrap();
     assert!(style.font.b);
 }
-
-#[test]
-fn empty_models_have_two_fills() {
-    let model = new_empty_model();
-    assert_eq!(model.workbook.styles.fills.len(), 2);
-    assert_eq!(
-        model.workbook.styles.fills[0].pattern_type,
-        "none".to_string()
-    );
-    assert_eq!(
-        model.workbook.styles.fills[1].pattern_type,
-        "gray125".to_string()
-    );
-}

base/src/types.rs

@@ -110,7 +110,7 @@ pub struct Worksheet {
     pub sheet_id: u32,
     pub state: SheetState,
     pub color: Option<String>,
-    pub merge_cells: Vec<String>,
+    pub merged_cells: HashMap<(i32, i32), (i32, i32)>,
     pub comments: Vec<Comment>,
     pub frozen_rows: i32,
     pub frozen_columns: i32,
@@ -217,7 +217,10 @@ pub enum Cell {
         // Error Message: "Not implemented function"
         m: String,
     },
-    // TODO: Array formulas
+    Merged {
+        r: i32,
+        c: i32,
+    }, // TODO: Array formulas
 }
 
 impl Default for Cell {
@@ -303,14 +306,7 @@ impl Default for Styles {
         Styles {
             num_fmts: vec![],
             fonts: vec![Default::default()],
-            fills: vec![
-                Default::default(),
-                Fill {
-                    pattern_type: "gray125".to_string(),
-                    fg_color: None,
-                    bg_color: None,
-                },
-            ],
+            fills: vec![Default::default()],
             borders: vec![Default::default()],
             cell_style_xfs: vec![Default::default()],
             cell_xfs: vec![Default::default()],

base/src/user_model/common.rs

@@ -11,7 +11,7 @@ use crate::{
         types::{Area, CellReferenceIndex},
         utils::{is_valid_column_number, is_valid_row},
     },
-    model::Model,
+    model::{CellStructure, Model},
     types::{
         Alignment, BorderItem, CellType, Col, HorizontalAlignment, SheetProperties, SheetState,
         Style, VerticalAlignment,
@@ -293,19 +293,6 @@ impl UserModel {
         self.model.workbook.name = name.to_string();
     }
 
-    /// Get area markdown
-    pub fn get_sheet_markup(
-        &self,
-        sheet: u32,
-        row_start: i32,
-        column_start: i32,
-        row_end: i32,
-        column_end: i32,
-    ) -> Result<String, String> {
-        self.model
-            .get_sheet_markup(sheet, row_start, column_start, row_end, column_end)
-    }
-
     /// Undoes last change if any, places the change in the redo list and evaluates the model if needed
     ///
     /// See also:
@@ -1882,6 +1869,57 @@ impl UserModel {
         Ok(())
     }
 
+    /// Merges cells
+    pub fn merge_cells(
+        &mut self,
+        sheet: u32,
+        row: i32,
+        column: i32,
+        width: i32,
+        height: i32,
+    ) -> Result<(), String> {
+        let old_data = Vec::new();
+        let diff_list = vec![Diff::MergeCells {
+            sheet,
+            row,
+            column,
+            width,
+            height,
+            old_data,
+        }];
+        self.model.merge_cells(sheet, row, column, width, height)?;
+        self.push_diff_list(diff_list);
+        self.evaluate_if_not_paused();
+        Ok(())
+    }
+
+    /// Check if cell is part of a merged cell
+    pub fn get_cell_structure(&self, sheet: u32, row: i32, column: i32) -> Result<CellStructure, String> {
+        self.model.get_cell_structure(sheet, row, column)
+    }
+
+    /// Unmerges cells
+    pub fn unmerge_cells(&mut self, sheet: u32, row: i32, column: i32) -> Result<(), String> {
+        let (width, height) = self
+            .model
+            .workbook
+            .worksheet(sheet)?
+            .merged_cells
+            .get(&(row, column))
+            .ok_or("No merged cells found")?;
+        let diff_list = vec![Diff::UnmergeCells {
+            sheet,
+            row,
+            column,
+            width: *width,
+            height: *height,
+        }];
+        self.model.unmerge_cells(sheet, row, column)?;
+        self.push_diff_list(diff_list);
+        self.evaluate_if_not_paused();
+        Ok(())
+    }
+
     // **** Private methods ****** //
 
     pub(crate) fn push_diff_list(&mut self, diff_list: DiffList) {
@@ -2125,7 +2163,6 @@ impl UserModel {
                     worksheet.frozen_rows = old_data.frozen_rows;
                     worksheet.state = old_data.state.clone();
                     worksheet.color = old_data.color.clone();
-                    worksheet.merge_cells = old_data.merge_cells.clone();
                     worksheet.shared_formulas = old_data.shared_formulas.clone();
                     self.model.reset_parsed_structures();
 
@@ -2176,6 +2213,34 @@ impl UserModel {
                         self.model.delete_row_style(*sheet, *row)?;
                     }
                 }
+                Diff::MergeCells {
+                    sheet,
+                    row,
+                    column,
+                    width,
+                    height,
+                    old_data,
+                } => {
+                    needs_evaluation = true;
+                    self.model.unmerge_cells(*sheet, *row, *column)?;
+                    // for (r, c, v) in old_data.iter() {
+                    //     self.model
+                    //         .workbook
+                    //         .worksheet_mut(*sheet)?
+                    //         .update_cell(*r, *c, v.clone())?;
+                    // }
+                }
+                Diff::UnmergeCells {
+                    sheet,
+                    row,
+                    column,
+                    width,
+                    height,
+                } => {
+                    needs_evaluation = true;
+                    self.model
+                        .merge_cells(*sheet, *row, *column, *width, *height)?;
+                }
             }
         }
         if needs_evaluation {
@@ -2377,6 +2442,34 @@ impl UserModel {
                 } => {
                     self.model.delete_row_style(*sheet, *row)?;
                 }
+                Diff::MergeCells {
+                    sheet,
+                    row,
+                    column,
+                    width,
+                    height,
+                    old_data: _,
+                } => {
+                    needs_evaluation = true;
+                    self.model
+                        .merge_cells(*sheet, *row, *column, *width, *height)?;
+                    // for (r, c, v) in old_data.iter() {
+                    //     self.model
+                    //         .workbook
+                    //         .worksheet_mut(*sheet)?
+                    //         .update_cell(*r, *c, v.clone())?;
+                    // }
+                }
+                Diff::UnmergeCells {
+                    sheet,
+                    row,
+                    column,
+                    width,
+                    height,
+                } => {
+                    needs_evaluation = true;
+                    self.model.unmerge_cells(*sheet, *row, *column)?;
+                }
             }
         }
 

base/src/user_model/history.rs

@@ -161,7 +161,21 @@ pub(crate) enum Diff {
         new_scope: Option<u32>,
         new_formula: String,
     },
-    // FIXME: we are missing SetViewDiffs
+    MergeCells {
+        sheet: u32,
+        row: i32,
+        column: i32,
+        width: i32,
+        height: i32,
+        old_data: Vec<(Cell, Style)>,
+    },
+    UnmergeCells {
+        sheet: u32,
+        row: i32,
+        column: i32,
+        width: i32,
+        height: i32,
+    }, // FIXME: we are missing SetViewDiffs
 }
 
 pub(crate) type DiffList = Vec<Diff>;

base/src/user_model/ui.rs

@@ -2,7 +2,10 @@
 
 use serde::{Deserialize, Serialize};
 
-use crate::expressions::utils::{is_valid_column_number, is_valid_row};
+use crate::{
+    expressions::utils::{is_valid_column_number, is_valid_row},
+    CellStructure,
+};
 
 use super::common::UserModel;
 
@@ -97,26 +100,47 @@ impl UserModel {
         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];
+        let worksheet = self.model.workbook.worksheet_mut(sheet)?;
+        let structure = worksheet.get_cell_structure(row, column)?;
+        // check if the selected cell is a merged cell
+        let [row_start, columns_start, row_end, columns_end] = match structure {
+            CellStructure::Simple => [row, column, row, column],
+            CellStructure::Merged {
+                row: row_start,
+                column: column_start,
+            } => {
+                let (width, height) = match worksheet.merged_cells.get(&(row_start, column_start)) {
+                    Some(s) => s,
+                    None => return Err(format!("Merged cell not found: ({row_start}, {column_start}) when clicking at ({row}, {column}).")),
+                };
+                let row_end = row_start + height - 1;
+                let column_end = column_start + width - 1;
+                [row_start, column_start, row_end, column_end]
             }
+            CellStructure::MergedRoot { width, height } => {
+                let row_start = row;
+                let columns_start = column;
+                let row_end = row + height - 1;
+                let columns_end = column + width - 1;
+                [row_start, columns_start, row_end, columns_end]
+            }
+        };
+        if let Some(view) = worksheet.views.get_mut(&0) {
+            view.row = row_start;
+            view.column = columns_start;
+            view.range = [row_start, columns_start, row_end, columns_end];
         }
+
         Ok(())
     }
 
     /// Sets the selected range. Note that the selected cell must be in one of the corners.
     pub fn set_selected_range(
         &mut self,
-        start_row: i32,
-        start_column: i32,
-        end_row: i32,
-        end_column: i32,
+        row_start: i32,
+        column_start: i32,
+        row_end: i32,
+        column_end: i32,
     ) -> Result<(), String> {
         let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
             view.sheet
@@ -124,42 +148,72 @@ impl UserModel {
             0
         };
 
-        if !is_valid_column_number(start_column) {
-            return Err(format!("Invalid column: '{start_column}'"));
+        if !is_valid_column_number(column_start) {
+            return Err(format!("Invalid column: '{column_start}'"));
         }
-        if !is_valid_row(start_row) {
-            return Err(format!("Invalid row: '{start_row}'"));
+        if !is_valid_row(row_start) {
+            return Err(format!("Invalid row: '{row_start}'"));
         }
 
-        if !is_valid_column_number(end_column) {
-            return Err(format!("Invalid column: '{end_column}'"));
+        if !is_valid_column_number(column_end) {
+            return Err(format!("Invalid column: '{column_end}'"));
         }
-        if !is_valid_row(end_row) {
-            return Err(format!("Invalid row: '{end_row}'"));
+        if !is_valid_row(row_end) {
+            return Err(format!("Invalid row: '{row_end}'"));
         }
-        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) {
-                let selected_row = view.row;
-                let selected_column = view.column;
-                // The selected cells must be on one of the corners of the selected range:
-                if selected_row != start_row && selected_row != end_row {
-                    return Err(format!(
-                        "The selected cells is not in one of the corners. Row: '{}' and row range '({}, {})'",
-                        selected_row, start_row, end_row
-                    ));
+        let mut start_row = row_start;
+        let mut start_column = column_start;
+        let mut end_row = row_end;
+        let mut end_column = column_end;
+        let worksheet = self.model.workbook.worksheet_mut(sheet)?;
+        let merged_cells = &worksheet.merged_cells;
+        if !merged_cells.is_empty() {
+            // We need to check if there are merged cells in the selected range
+            for row in row_start..=row_end {
+                for column in column_start..=column_end {
+                    let structure = &worksheet.get_cell_structure(row, column)?;
+                    match structure {
+                        CellStructure::Simple => {}
+                        CellStructure::Merged { row: r, column: c } => {
+                            // The selected range must contain the merged cell
+                            let (width, height) = match merged_cells.get(&(*r, *c)) {
+                                Some(s) => s,
+                                None => return Err(format!("Merged cell not found: ({r}, {c}) when selecting range ({start_row}, {start_column}, {end_row}, {end_column}).")),
+                            };
+                            start_row = start_row.min(*r);
+                            start_column = start_column.min(*c);
+                            end_row = end_row.max(*r + height - 1);
+                            end_column = end_column.max(*c + width - 1);
+
+                        }
+                        CellStructure::MergedRoot { width, height } => {
+                            // The selected range must contain the merged cell
+                            end_row = end_row.max(row + height - 1);
+                            end_column = end_column.max(column + width - 1);
+                        }
+                    }
                 }
-                if selected_column != start_column && selected_column != end_column {
-                    return Err(format!(
-                        "The selected cells is not in one of the corners. Column '{}' and column range '({}, {})'",
-                        selected_column, start_column, end_column
-                    ));
-                }
-                view.range = [start_row, start_column, end_row, end_column];
             }
         }
+        if let Some(view) = worksheet.views.get_mut(&0) {
+            // let selected_row = view.row;
+            // let selected_column = view.column;
+            // // The selected cells must be on one of the corners of the selected range:
+            // if selected_row != start_row && selected_row != end_row {
+            //     return Err(format!(
+            //             "The selected cells is not in one of the corners. Row: '{}' and row range '({}, {})'",
+            //             selected_row, start_row, end_row
+            //         ));
+            // }
+            // if selected_column != start_column && selected_column != end_column {
+            //     return Err(format!(
+            //             "The selected cells is not in one of the corners. Column '{}' and column range '({}, {})'",
+            //             selected_column, start_column, end_column
+            //         ));
+            // }
+            view.range = [start_row, start_column, end_row, end_column];
+        }
+
         Ok(())
     }
 

base/src/worksheet.rs

@@ -1,6 +1,7 @@
 use crate::constants::{self, LAST_COLUMN, LAST_ROW};
 use crate::expressions::types::CellReferenceIndex;
 use crate::expressions::utils::{is_valid_column_number, is_valid_row};
+use crate::CellStructure;
 use crate::{expressions::token::Error, types::*};
 
 use std::collections::HashMap;
@@ -38,6 +39,24 @@ impl Worksheet {
         self.sheet_data.get(&row)?.get(&column)
     }
 
+    pub fn get_cell_structure(&self, row: i32, column: i32) -> Result<CellStructure, String> {
+        if let Some((width, height)) = self.merged_cells.get(&(row, column)) {
+            return Ok(CellStructure::MergedRoot {
+                width: *width,
+                height: *height,
+            });
+        }
+        let cell = self.cell(row, column);
+        if let Some(Cell::Merged { r, c }) = cell {
+            return Ok(CellStructure::Merged {
+                row: *r,
+                column: *c,
+            });
+        }
+
+        Ok(CellStructure::Simple)
+    }
+
     pub(crate) fn cell_mut(&mut self, row: i32, column: i32) -> Option<&mut Cell> {
         self.sheet_data.get_mut(&row)?.get_mut(&column)
     }

bindings/wasm/fix_types.py

@@ -201,6 +201,26 @@ defined_name_list_types = r"""
   getDefinedNameList(): DefinedName[];
 """
 
+merged_cells = r"""
+/**
+* @param {number} sheet
+* @param {number} row
+* @param {number} column
+* @returns {any}
+*/
+  getCellStructure(sheet: number, row: number, column: number): any;
+"""
+
+merged_cells_types = r"""
+/**
+* @param {number} sheet
+* @param {number} row
+* @param {number} column
+* @returns {CellStructure}
+*/
+  getCellStructure(sheet: number, row: number, column: number): CellStructure;
+"""
+
 def fix_types(text):
     text = text.replace(get_tokens_str, get_tokens_str_types)
     text = text.replace(update_style_str, update_style_str_types)
@@ -215,6 +235,7 @@ def fix_types(text):
     text = text.replace(clipboard, clipboard_types)
     text = text.replace(paste_from_clipboard, paste_from_clipboard_types)
     text = text.replace(defined_name_list, defined_name_list_types)
+    text = text.replace(merged_cells, merged_cells_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,9 +5,7 @@ use wasm_bindgen::{
 };
 
 use ironcalc_base::{
-    expressions::{lexer::util::get_tokens as tokenizer, types::Area, utils::number_to_column},
-    types::{CellType, Style},
-    BorderArea, ClipboardData, UserModel as BaseModel,
+    expressions::{lexer::util::get_tokens as tokenizer, types::Area, utils::number_to_column}, types::{CellType, Style}, BorderArea, ClipboardData, UserModel as BaseModel
 };
 
 fn to_js_error(error: String) -> JsError {
@@ -673,17 +671,35 @@ impl Model {
             .map_err(|e| to_js_error(e.to_string()))
     }
 
-    #[wasm_bindgen(js_name = "getSheetMarkup")]
-    pub fn get_sheet_markup(
-        &self,
+    #[wasm_bindgen(js_name = "mergeCells")]
+    pub fn merge_cells(
+        &mut self,
         sheet: u32,
-        start_row: i32,
-        start_column: i32,
-        end_row: i32,
-        end_column: i32,
-    ) -> Result<String, JsError> {
+        row: i32,
+        column: i32,
+        width: i32,
+        height: i32,
+    ) -> Result<(), JsError> {
         self.model
-            .get_sheet_markup(sheet, start_row, start_column, end_row, end_column)
+            .merge_cells(sheet, row, column, width, height)
             .map_err(to_js_error)
     }
+
+    #[wasm_bindgen(js_name = "unmergeCells")]
+    pub fn unmerge_cells(&mut self, sheet: u32, row: i32, column: i32) -> Result<(), JsError> {
+        self.model
+            .unmerge_cells(sheet, row, column)
+            .map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "getCellStructure")]
+    pub fn get_cell_structure(
+        &self,
+        sheet: u32,
+        row: i32,
+        column: i32,
+    ) -> Result<JsValue, JsError> {
+        let data = self.model.get_cell_structure(sheet, row, column).map_err(|e| to_js_error(e.to_string()))?;
+        serde_wasm_bindgen::to_value(&data).map_err(|e| to_js_error(e.to_string()))
+    }
 }

bindings/wasm/types.ts

@@ -216,7 +216,7 @@ export interface SelectedView {
 // };
 
 // type ClipboardData = Record<string, Record <string, ClipboardCell>>;
-type ClipboardData = Map<number, Map <number, ClipboardCell>>;
+type ClipboardData = Map<number, Map<number, ClipboardCell>>;
 
 export interface ClipboardCell {
   text: string;
@@ -233,4 +233,9 @@ export interface DefinedName {
   name: string;
   scope?: number;
   formula: string;
-}
+}
+
+export type CellStructure =
+  | "Simple"
+  | { Merged: { row: number; column: number } }
+  | { MergedRoot: { width: number; height: number } };

webapp/IronCalc/.storybook/main.ts

@@ -2,7 +2,11 @@ import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [],
+  addons: [
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
   framework: {
     name: "@storybook/react-vite",
     options: {},

webapp/IronCalc/package.json

@@ -18,26 +18,31 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@ironcalc/wasm": "file:../../bindings/wasm/pkg",
-    "@mui/material": "^7.1.1",
-    "@mui/system": "^7.1.1",
-    "i18next": "^25.2.1",
-    "lucide-react": "^0.513.0",
+    "@mui/material": "^6.4",
+    "@mui/system": "^6.4",
+    "i18next": "^23.11.1",
+    "lucide-react": "^0.473.0",
     "react-colorful": "^5.6.1",
-    "react-i18next": "^15.5.2"
+    "react-i18next": "^15.4.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@storybook/react": "^9.0.5",
-    "@storybook/react-vite": "^9.0.5",
+    "@chromatic-com/storybook": "^3.2.4",
+    "@storybook/addon-essentials": "^8.6.0",
+    "@storybook/addon-interactions": "^8.6.0",
+    "@storybook/blocks": "^8.6.0",
+    "@storybook/react": "^8.6.0",
+    "@storybook/react-vite": "^8.6.0",
+    "@storybook/test": "^8.6.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "storybook": "^9.0.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^8.6.0",
     "ts-node": "^10.9.2",
-    "typescript": "~5.8.3",
-    "vite": "^6.3.5",
+    "typescript": "~5.6.2",
+    "vite": "^6.2.0",
     "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^3.2.2"
+    "vitest": "^3.0.7"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0 || ^19.0.0",

webapp/IronCalc/src/IronCalc.tsx

@@ -1,6 +1,6 @@
 import "./index.css";
 import type { Model } from "@ironcalc/wasm";
-import { ThemeProvider } from "@mui/material";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import Workbook from "./components/Workbook/Workbook.tsx";
 import { WorkbookState } from "./components/workbookState.ts";
 import { theme } from "./theme.ts";

webapp/IronCalc/src/components/Toolbar/Toolbar.tsx

@@ -40,7 +40,8 @@ import {
   ArrowMiddleFromLine,
   DecimalPlacesDecreaseIcon,
   DecimalPlacesIncreaseIcon,
-  Markdown,
+  MergeCellsIcon,
+  UnmergeCellsIcon,
 } from "../../icons";
 import { theme } from "../../theme";
 import BorderPicker from "../BorderPicker/BorderPicker";
@@ -75,7 +76,8 @@ type ToolbarProperties = {
   onClearFormatting: () => void;
   onIncreaseFontSize: (delta: number) => void;
   onDownloadPNG: () => void;
-  onCopyMarkdown: () => void;
+  onMergeCells: () => void;
+  onUnmergeCells: () => void;
   fillColor: string;
   fontColor: string;
   fontSize: number;
@@ -434,13 +436,24 @@ function Toolbar(properties: ToolbarProperties) {
       <StyledButton
         type="button"
         $pressed={false}
-        onClick={() => {
-          properties.onCopyMarkdown();
-        }}
         disabled={!canEdit}
-        title={t("toolbar.selected_markdown")}
+        onClick={() => {
+          properties.onMergeCells();
+        }}
+        title={t("toolbar.merge_cells")}
       >
-        <Markdown />
+        <MergeCellsIcon /> 
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        disabled={!canEdit}
+        onClick={() => {
+          properties.onUnmergeCells();
+        }}
+        title={t("toolbar.unmerge_cells")}
+      >
+        <UnmergeCellsIcon /> 
       </StyledButton>
 
       <ColorPicker

webapp/IronCalc/src/components/Workbook/Workbook.tsx

@@ -558,26 +558,6 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
         onIncreaseFontSize={(delta: number) => {
           onIncreaseFontSize(delta);
         }}
-        onCopyMarkdown={async () => {
-          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 markdown = model.getSheetMarkup(
-            sheet,
-            row,
-            column,
-            width,
-            height,
-          );
-          // Copy to clipboard
-          // NB: This will not work in non secure contexts or in iframes (i.e storybook)
-          await navigator.clipboard.writeText(markdown);
-        }}
         onDownloadPNG={() => {
           // creates a new canvas element in the visible part of the the selected area
           const worksheetCanvas = worksheetRef.current?.getCanvas();
@@ -587,15 +567,19 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
           const {
             range: [rowStart, columnStart, rowEnd, columnEnd],
           } = model.getSelectedView();
-          // NB: cells outside of the displayed area are not rendered
-          // I think the only reasonable way to do this would be server side.
+          const { topLeftCell, bottomRightCell } =
+            worksheetCanvas.getVisibleCells();
+          const firstRow = Math.max(rowStart, topLeftCell.row);
+          const firstColumn = Math.max(columnStart, topLeftCell.column);
+          const lastRow = Math.min(rowEnd, bottomRightCell.row);
+          const lastColumn = Math.min(columnEnd, bottomRightCell.column);
           let [x, y] = worksheetCanvas.getCoordinatesByCell(
-            rowStart,
-            columnStart,
+            firstRow,
+            firstColumn,
           );
           const [x1, y1] = worksheetCanvas.getCoordinatesByCell(
-            rowEnd + 1,
-            columnEnd + 1,
+            lastRow + 1,
+            lastColumn + 1,
           );
           const width = (x1 - x) * devicePixelRatio;
           const height = (y1 - y) * devicePixelRatio;
@@ -627,6 +611,29 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
           downloadLink.download = "ironcalc.png";
           downloadLink.click();
         }}
+        onMergeCells={() => {
+          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.mergeCells(sheet, row, column, width, height);
+          setRedrawId((id) => id + 1);
+        }}
+        onUnmergeCells={() => {
+          const {
+            sheet,
+            range: [rowStart, columnStart, rowEnd, columnEnd],
+          } = model.getSelectedView();
+          const row = Math.min(rowStart, rowEnd);
+          const column = Math.min(columnStart, columnEnd);
+          model.unmergeCells(sheet, row, column);
+          setRedrawId((id) => id + 1);
+        }}
         onBorderChanged={(border: BorderOptions): void => {
           const {
             sheet,

webapp/IronCalc/src/components/Worksheet/Worksheet.tsx

@@ -24,7 +24,7 @@ import {
   TOOLBAR_HEIGHT,
 } from "../constants";
 import type { Cell } from "../types";
-import type { WorkbookState } from "../workbookState";
+import { AreaType, type WorkbookState } from "../workbookState";
 import CellContextMenu from "./CellContextMenu";
 import usePointer from "./usePointer";
 
@@ -59,6 +59,7 @@ const Worksheet = forwardRef(
     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);
@@ -84,6 +85,7 @@ const Worksheet = forwardRef(
       const worksheetRef = worksheetElement.current;
 
       const outline = cellOutline.current;
+      const handle = cellOutlineHandle.current;
       const area = areaOutline.current;
       const extendTo = extendToOutline.current;
       const editor = editorElement.current;
@@ -95,6 +97,7 @@ const Worksheet = forwardRef(
         !columnHeadersRef ||
         !worksheetRef ||
         !outline ||
+        !handle ||
         !area ||
         !extendTo ||
         !scrollElement.current ||
@@ -115,6 +118,7 @@ const Worksheet = forwardRef(
           rowGuide: rowGuideRef,
           columnHeaders: columnHeadersRef,
           cellOutline: outline,
+          cellOutlineHandle: handle,
           areaOutline: area,
           extendToOutline: extendTo,
           editor: editor,
@@ -187,74 +191,203 @@ const Worksheet = forwardRef(
       worksheetCanvas.current = canvas;
     });
 
-    const { onPointerMove, onPointerDown, onPointerUp } = usePointer({
-      model,
-      workbookState,
-      refresh,
-      onColumnSelected: (column: number, shift: boolean) => {
-        let firstColumn = column;
-        let lastColumn = column;
-        if (shift) {
-          const { range } = model.getSelectedView();
-          firstColumn = Math.min(range[1], column, range[3]);
-          lastColumn = Math.max(range[3], column, range[1]);
-        }
-        model.setSelectedCell(1, firstColumn);
-        model.setSelectedRange(1, firstColumn, LAST_ROW, lastColumn);
-        refresh();
-      },
-      onRowSelected: (row: number, shift: boolean) => {
-        let firstRow = row;
-        let lastRow = row;
-        if (shift) {
-          const { range } = model.getSelectedView();
-          firstRow = Math.min(range[0], row, range[2]);
-          lastRow = Math.max(range[2], row, range[0]);
-        }
-        model.setSelectedCell(firstRow, 1);
-        model.setSelectedRange(firstRow, 1, lastRow, LAST_COLUMN);
-        refresh();
-      },
-      onAllSheetSelected: () => {
-        model.setSelectedCell(1, 1);
-        model.setSelectedRange(1, 1, LAST_ROW, LAST_COLUMN);
-      },
-      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();
-        refresh();
-      },
-      onAreaSelected: () => {
-        const styles = workbookState.getCopyStyles();
-        if (styles?.length) {
-          model.onPasteStyles(styles);
+    const { onPointerMove, onPointerDown, onPointerHandleDown, onPointerUp } =
+      usePointer({
+        model,
+        workbookState,
+        refresh,
+        onColumnSelected: (column: number, shift: boolean) => {
+          let firstColumn = column;
+          let lastColumn = column;
+          if (shift) {
+            const { range } = model.getSelectedView();
+            firstColumn = Math.min(range[1], column, range[3]);
+            lastColumn = Math.max(range[3], column, range[1]);
+          }
+          model.setSelectedCell(1, firstColumn);
+          model.setSelectedRange(1, firstColumn, LAST_ROW, lastColumn);
+          refresh();
+        },
+        onRowSelected: (row: number, shift: boolean) => {
+          let firstRow = row;
+          let lastRow = row;
+          if (shift) {
+            const { range } = model.getSelectedView();
+            firstRow = Math.min(range[0], row, range[2]);
+            lastRow = Math.max(range[2], row, range[0]);
+          }
+          model.setSelectedCell(firstRow, 1);
+          model.setSelectedRange(firstRow, 1, lastRow, LAST_COLUMN);
+          refresh();
+        },
+        onAllSheetSelected: () => {
+          model.setSelectedCell(1, 1);
+          model.setSelectedRange(1, 1, LAST_ROW, LAST_COLUMN);
+        },
+        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();
-        }
-        workbookState.setCopyStyles(null);
-        if (worksheetElement.current) {
-          worksheetElement.current.style.cursor = "auto";
-        }
-        refresh();
-      },
-      canvasElement,
-      worksheetElement,
-      worksheetCanvas,
-    });
+          refresh();
+        },
+        onAreaSelected: () => {
+          const styles = workbookState.getCopyStyles();
+          if (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";
+          }
+          refresh();
+        },
+        onExtendToCell: (cell) => {
+          const canvas = worksheetCanvas.current;
+          if (!canvas) {
+            return;
+          }
+          const { row, column } = cell;
+          const {
+            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;
+            }
+          }
+          model.setSelectedRange(
+            Math.min(rowStart, extendedArea.rowStart),
+            Math.min(columnStart, extendedArea.columnStart),
+            Math.max(rowStart + height - 1, extendedArea.rowEnd),
+            Math.max(columnStart + width - 1, extendedArea.columnEnd),
+          );
+          workbookState.clearExtendToArea();
+          canvas.renderSheet();
+        },
+        canvasElement,
+        worksheetElement,
+        worksheetCanvas,
+      });
 
     const onScroll = (): void => {
       if (!scrollElement.current || !worksheetCanvas.current) {
@@ -330,6 +463,10 @@ const Worksheet = forwardRef(
           </EditorWrapper>
           <AreaOutline ref={areaOutline} />
           <ExtendToOutline ref={extendToOutline} />
+          <CellOutlineHandle
+            ref={cellOutlineHandle}
+            onPointerDown={onPointerHandleDown}
+          />
           <ColumnResizeGuide ref={columnResizeGuide} />
           <RowResizeGuide ref={rowResizeGuide} />
           <ColumnHeaders ref={columnHeaders} />
@@ -503,6 +640,15 @@ const CellOutline = styled("div")`
   display: flex;
 `;
 
+const CellOutlineHandle = styled("div")`
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  background: ${outlineColor};
+  cursor: crosshair;
+  border-radius: 1px;
+`;
+
 const ExtendToOutline = styled("div")`
   position: absolute;
   border: 1px dashed ${outlineColor};

webapp/IronCalc/src/components/Worksheet/usePointer.ts

@@ -20,6 +20,8 @@ interface PointerSettings {
   onAllSheetSelected: () => void;
   onAreaSelecting: (cell: Cell) => void;
   onAreaSelected: () => void;
+  onExtendToCell: (cell: Cell) => void;
+  onExtendToEnd: () => void;
   model: Model;
   workbookState: WorkbookState;
   refresh: () => void;
@@ -29,10 +31,12 @@ interface PointerEvents {
   onPointerDown: (event: PointerEvent) => void;
   onPointerMove: (event: PointerEvent) => void;
   onPointerUp: (event: PointerEvent) => void;
+  onPointerHandleDown: (event: PointerEvent) => void;
 }
 
 const usePointer = (options: PointerSettings): PointerEvents => {
   const isSelecting = useRef(false);
+  const isExtending = useRef(false);
   const isInsertingRef = useRef(false);
 
   const onPointerMove = useCallback(
@@ -43,7 +47,9 @@ const usePointer = (options: PointerSettings): PointerEvents => {
         return;
       }
 
-      if (!(isSelecting.current || isInsertingRef.current)) {
+      if (
+        !(isSelecting.current || isExtending.current || isInsertingRef.current)
+      ) {
         return;
       }
       const { canvasElement, model, worksheetCanvas } = options;
@@ -64,6 +70,8 @@ const usePointer = (options: PointerSettings): PointerEvents => {
 
       if (isSelecting.current) {
         options.onAreaSelecting(cell);
+      } else if (isExtending.current) {
+        options.onExtendToCell(cell);
       } else if (isInsertingRef.current) {
         const { refresh, workbookState } = options;
         const editingCell = workbookState.getEditingCell();
@@ -95,6 +103,11 @@ const usePointer = (options: PointerSettings): PointerEvents => {
         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();
       } else if (isInsertingRef.current) {
         const { worksheetElement } = options;
         isInsertingRef.current = false;
@@ -107,14 +120,10 @@ const usePointer = (options: PointerSettings): PointerEvents => {
   const onPointerDown = useCallback(
     (event: PointerEvent) => {
       const target = event.target as HTMLElement;
-      if (target.className === "column-resize-handle") {
+      if (target !== null && target.className === "column-resize-handle") {
         // we are resizing a column
         return;
       }
-      if (target.className.includes("ironcalc-cell-handle")) {
-        // we are extending values
-        return;
-      }
       let x = event.clientX;
       let y = event.clientY;
       const {
@@ -227,25 +236,34 @@ const usePointer = (options: PointerSettings): PointerEvents => {
           );
           // we continue to select the new cell
         }
-        if (event.shiftKey) {
-          // We are extending the selection
-          options.onAreaSelecting(cell);
-          options.onAreaSelected();
-        } else {
-          // We are selecting a single cell
-          options.onCellSelected(cell, event);
-          isSelecting.current = true;
-          worksheetWrapper.setPointerCapture(event.pointerId);
-        }
+        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,
   };
 };
 

webapp/IronCalc/src/components/WorksheetCanvas/outlineHandle.ts

@@ -1,211 +0,0 @@
-import { AreaType } from "../workbookState";
-import { LAST_COLUMN, LAST_ROW, outlineColor } from "./constants";
-import type WorksheetCanvas from "./worksheetCanvas";
-
-export function attachOutlineHandle(
-  worksheet: WorksheetCanvas,
-): HTMLDivElement {
-  // There is *always* a parent
-  const parent = worksheet.canvas.parentElement as HTMLDivElement;
-
-  // Remove any existing cell outline handles
-  for (const handle of parent.querySelectorAll(".ironcalc-cell-handle")) {
-    handle.remove();
-  }
-
-  // Create a new cell outline handle
-  const cellOutlineHandle = document.createElement("div");
-  cellOutlineHandle.className = "ironcalc-cell-handle";
-  parent.appendChild(cellOutlineHandle);
-  worksheet.cellOutlineHandle = cellOutlineHandle;
-
-  Object.assign(cellOutlineHandle.style, {
-    position: "absolute",
-    width: "5px",
-    height: "5px",
-    background: outlineColor,
-    cursor: "crosshair",
-    borderRadius: "1px",
-  });
-
-  // cell handle events
-  const resizeHandleMove = (event: MouseEvent): void => {
-    const canvasRect = worksheet.canvas.getBoundingClientRect();
-    const x = event.clientX - canvasRect.x;
-    const y = event.clientY - canvasRect.y;
-
-    const cell = worksheet.getCellByCoordinates(x, y);
-    if (!cell) {
-      return;
-    }
-    const { row, column } = cell;
-    const {
-      range: [rowStart, columnStart, rowEnd, columnEnd],
-    } = worksheet.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,
-      };
-      worksheet.workbookState.setExtendToArea(area);
-      worksheet.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,
-      };
-      worksheet.workbookState.setExtendToArea(area);
-      worksheet.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,
-      };
-      worksheet.workbookState.setExtendToArea(area);
-      worksheet.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,
-      };
-      worksheet.workbookState.setExtendToArea(area);
-      worksheet.renderSheet();
-    }
-  };
-
-  const resizeHandleUp = (_event: MouseEvent): void => {
-    document.removeEventListener("pointermove", resizeHandleMove);
-    document.removeEventListener("pointerup", resizeHandleUp);
-
-    const { sheet, range } = worksheet.model.getSelectedView();
-    const extendedArea = worksheet.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:
-        worksheet.model.autoFillRows(area, extendedArea.rowEnd);
-        break;
-      case AreaType.rowsUp: {
-        worksheet.model.autoFillRows(area, extendedArea.rowStart);
-        break;
-      }
-      case AreaType.columnsRight: {
-        worksheet.model.autoFillColumns(area, extendedArea.columnEnd);
-        break;
-      }
-      case AreaType.columnsLeft: {
-        worksheet.model.autoFillColumns(area, extendedArea.columnStart);
-        break;
-      }
-    }
-    worksheet.model.setSelectedRange(
-      Math.min(rowStart, extendedArea.rowStart),
-      Math.min(columnStart, extendedArea.columnStart),
-      Math.max(rowStart + height - 1, extendedArea.rowEnd),
-      Math.max(columnStart + width - 1, extendedArea.columnEnd),
-    );
-    worksheet.workbookState.clearExtendToArea();
-    worksheet.renderSheet();
-  };
-
-  cellOutlineHandle.addEventListener("pointerdown", () => {
-    document.addEventListener("pointermove", resizeHandleMove);
-    document.addEventListener("pointerup", resizeHandleUp);
-  });
-
-  cellOutlineHandle.addEventListener("dblclick", (event) => {
-    // On double-click, we will auto-fill the rows below the selected cell
-    const [sheet, row, column] = worksheet.model.getSelectedCell();
-    let lastUsedRow = row + 1;
-    let testColumn = column - 1;
-
-    // The "test column" is the column to the left of the selected cell or the next column if the left one is empty
-    if (
-      testColumn < 1 ||
-      worksheet.model.getFormattedCellValue(sheet, row, column - 1) === ""
-    ) {
-      testColumn = column + 1;
-      if (
-        testColumn > LAST_COLUMN ||
-        worksheet.model.getFormattedCellValue(sheet, row, testColumn) === ""
-      ) {
-        return;
-      }
-    }
-
-    // Find the last used row in the "test column"
-    for (let r = row + 1; r <= LAST_ROW; r += 1) {
-      if (worksheet.model.getFormattedCellValue(sheet, r, testColumn) === "") {
-        break;
-      }
-      lastUsedRow = r;
-    }
-
-    const area = {
-      sheet,
-      row: row,
-      column: column,
-      width: 1,
-      height: 1,
-    };
-
-    worksheet.model.autoFillRows(area, lastUsedRow);
-    event.stopPropagation();
-    worksheet.renderSheet();
-  });
-  return cellOutlineHandle;
-}

webapp/IronCalc/src/components/WorksheetCanvas/util.ts

@@ -1,63 +0,0 @@
-// Get a 10% transparency of an hex color
-export function hexToRGBA10Percent(colorHex: string): string {
-  // Remove the leading hash (#) if present
-  const hex = colorHex.replace(/^#/, "");
-
-  // Parse the hex color
-  const red = Number.parseInt(hex.substring(0, 2), 16);
-  const green = Number.parseInt(hex.substring(2, 4), 16);
-  const blue = Number.parseInt(hex.substring(4, 6), 16);
-
-  // Set the alpha (opacity) to 0.1 (10%)
-  const alpha = 0.1;
-
-  // Return the RGBA color string
-  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
-}
-
-/**
- * Splits the given text into multiple lines. If `wrapText` is true, it applies word-wrapping
- * based on the specified canvas context, maximum width, and horizontal padding.
- *
- * - First, the text is split by newline characters so that explicit newlines are respected.
- * - If wrapping is enabled, each line is further split into words and measured against the
- *   available width. Whenever adding an extra word would exceed
- *   this limit, a new line is started.
- *
- * @param text     The text to split into lines.
- * @param wrapText Whether to apply word-wrapping or just return text split by newlines.
- * @param context  The `CanvasRenderingContext2D` used for measuring text width.
- * @param width    The maximum width for each line.
- * @returns        An array of lines (strings), each fitting within the specified width if wrapping is enabled.
- */
-export function computeWrappedLines(
-  text: string,
-  wrapText: boolean,
-  context: CanvasRenderingContext2D,
-  width: number,
-): string[] {
-  // Split the text into lines
-  const rawLines = text.split("\n");
-  if (!wrapText) {
-    // If there is no wrapping, return the raw lines
-    return rawLines;
-  }
-  const wrappedLines = [];
-  for (const line of rawLines) {
-    const words = line.split(" ");
-    let currentLine = words[0];
-    for (let i = 1; i < words.length; i += 1) {
-      const word = words[i];
-      const testLine = `${currentLine} ${word}`;
-      const textWidth = context.measureText(testLine).width;
-      if (textWidth < width) {
-        currentLine = testLine;
-      } else {
-        wrappedLines.push(currentLine);
-        currentLine = word;
-      }
-    }
-    wrappedLines.push(currentLine);
-  }
-  return wrappedLines;
-}

webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts

@@ -18,8 +18,6 @@ import {
   headerTextColor,
   outlineColor,
 } from "./constants";
-import { attachOutlineHandle } from "./outlineHandle";
-import { computeWrappedLines, hexToRGBA10Percent } from "./util";
 
 export interface CanvasSettings {
   model: Model;
@@ -30,6 +28,7 @@ export interface CanvasSettings {
     canvas: HTMLCanvasElement;
     cellOutline: HTMLDivElement;
     areaOutline: HTMLDivElement;
+    cellOutlineHandle: HTMLDivElement;
     extendToOutline: HTMLDivElement;
     columnGuide: HTMLDivElement;
     rowGuide: HTMLDivElement;
@@ -54,6 +53,70 @@ export const defaultCellFontFamily = fonts.regular;
 export const headerFontFamily = fonts.regular;
 export const frozenSeparatorWidth = 3;
 
+// Get a 10% transparency of an hex color
+function hexToRGBA10Percent(colorHex: string): string {
+  // Remove the leading hash (#) if present
+  const hex = colorHex.replace(/^#/, "");
+
+  // Parse the hex color
+  const red = Number.parseInt(hex.substring(0, 2), 16);
+  const green = Number.parseInt(hex.substring(2, 4), 16);
+  const blue = Number.parseInt(hex.substring(4, 6), 16);
+
+  // Set the alpha (opacity) to 0.1 (10%)
+  const alpha = 0.1;
+
+  // Return the RGBA color string
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+}
+
+/**
+ * Splits the given text into multiple lines. If `wrapText` is true, it applies word-wrapping
+ * based on the specified canvas context, maximum width, and horizontal padding.
+ *
+ * - First, the text is split by newline characters so that explicit newlines are respected.
+ * - If wrapping is enabled, each line is further split into words and measured against the
+ *   available width. Whenever adding an extra word would exceed
+ *   this limit, a new line is started.
+ *
+ * @param text     The text to split into lines.
+ * @param wrapText Whether to apply word-wrapping or just return text split by newlines.
+ * @param context  The `CanvasRenderingContext2D` used for measuring text width.
+ * @param width    The maximum width for each line.
+ * @returns        An array of lines (strings), each fitting within the specified width if wrapping is enabled.
+ */
+function computeWrappedLines(
+  text: string,
+  wrapText: boolean,
+  context: CanvasRenderingContext2D,
+  width: number,
+): string[] {
+  // Split the text into lines
+  const rawLines = text.split("\n");
+  if (!wrapText) {
+    // If there is no wrapping, return the raw lines
+    return rawLines;
+  }
+  const wrappedLines = [];
+  for (const line of rawLines) {
+    const words = line.split(" ");
+    let currentLine = words[0];
+    for (let i = 1; i < words.length; i += 1) {
+      const word = words[i];
+      const testLine = `${currentLine} ${word}`;
+      const textWidth = context.measureText(testLine).width;
+      if (textWidth < width) {
+        currentLine = testLine;
+      } else {
+        wrappedLines.push(currentLine);
+        currentLine = word;
+      }
+    }
+    wrappedLines.push(currentLine);
+  }
+  return wrappedLines;
+}
+
 export default class WorksheetCanvas {
   sheetWidth: number;
 
@@ -106,6 +169,7 @@ export default class WorksheetCanvas {
     this.refresh = options.refresh;
 
     this.cellOutline = options.elements.cellOutline;
+    this.cellOutlineHandle = options.elements.cellOutlineHandle;
     this.areaOutline = options.elements.areaOutline;
     this.extendToOutline = options.elements.extendToOutline;
     this.rowGuide = options.elements.rowGuide;
@@ -115,7 +179,6 @@ export default class WorksheetCanvas {
     this.onColumnWidthChanges = options.onColumnWidthChanges;
     this.onRowHeightChanges = options.onRowHeightChanges;
     this.resetHeaders();
-    this.cellOutlineHandle = attachOutlineHandle(this);
   }
 
   setScrollPosition(scrollPosition: { left: number; top: number }): void {
@@ -323,10 +386,29 @@ export default class WorksheetCanvas {
     column: number,
     x: number,
     y: number,
-    width: number,
-    height: number,
+    width1: number,
+    height1: number,
   ): void {
     const selectedSheet = this.model.getSelectedSheet();
+    const structure = this.model.getCellStructure(selectedSheet, row, column);
+    if (typeof structure === 'object' && 'Merged' in structure) {
+      // We don't render merged cells
+      return;
+    }
+    let width = width1;
+    let height = height1;
+    if (typeof structure === 'object' && 'MergedRoot' in structure) {
+      const root = structure.MergedRoot;
+      const columns = root.width;
+      const rows = root.height;
+      for (let i = 1; i < columns; i += 1) {
+        width += this.getColumnWidth(selectedSheet, column + i);
+      }
+      for (let i = 1; i < rows; i += 1) {
+        height += this.getRowHeight(selectedSheet, row + i);
+      }
+    };
+
     const style = this.model.getCellStyle(selectedSheet, row, column);
 
     let backgroundColor = "#FFFFFF";

webapp/IronCalc/src/icons/index.ts

@@ -19,11 +19,13 @@ 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 Markdown from "./markdown.svg?react";
 
 import IronCalcIcon from "./ironcalc_icon.svg?react";
 import IronCalcLogo from "./orange+black.svg?react";
 
+import MergeCellsIcon from "./merge-cells.svg?react";
+import UnmergeCellsIcon from "./unmerge-cells.svg?react";
+
 import Fx from "./fx.svg?react";
 
 export {
@@ -48,6 +50,7 @@ export {
   InsertRowBelow,
   IronCalcIcon,
   IronCalcLogo,
+  MergeCellsIcon,
+  UnmergeCellsIcon,
   Fx,
-  Markdown,
 };

webapp/IronCalc/src/icons/markdown.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <g>
-        <path fill="none" d="M0 0h24v24H0z"/>
-        <path fill-rule="nonzero" d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v14h16V5H4zm3 10.5H5v-7h2l2 2 2-2h2v7h-2v-4l-2 2-2-2v4zm11-3h2l-3 3-3-3h2v-4h2v4z"/>
-    </g>

webapp/IronCalc/src/icons/merge-cells.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="M8 2L3.33333 2C2.59695 2 2 2.59695 2 3.33333L2 5M8 2L12.6667 2C13.403 2 14 2.59695 14 3.33333L14 5M8 2L8 5M8 14L12.6667 14C13.403 14 14 13.403 14 12.6667L14 11M8 14L3.33333 14C2.59695 14 2 13.403 2 12.6667L2 11M8 14L8 11M2 5L2 11M2 5L14 5M2 11L14 11M14 5L14 11" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 8L11 8M5 8L6 9L6 7L5 8ZM11 8L10 7L10 9L11 8Z" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

webapp/IronCalc/src/icons/unmerge-cells.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="M8 2L3.33333 2C2.59695 2 2 2.59695 2 3.33333L2 5M8 2L12.6667 2C13.403 2 14 2.59695 14 3.33333L14 5M8 2L8 5M8 14L12.6667 14C13.403 14 14 13.403 14 12.6667L14 11M8 14L3.33333 14C2.59695 14 2 13.403 2 12.6667L2 11M8 14L8 11M2 5L2 11M2 5L14 5M2 11L14 11M14 5L14 11" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 8L6 8M6 8L5 7L5 9L6 8Z" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 8L10 8M10 8L11 7L11 9L10 8Z" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

webapp/IronCalc/src/locale/en_us.json

@@ -26,8 +26,9 @@
     "vertical_align_middle": " Align middle",
     "vertical_align_top": "Align top",
     "selected_png": "Export Selected area as PNG",
-    "selected_markdown": "Export Selected area as Markdown",
     "wrap_text": "Wrap text",
+    "merge_cells": "Merge cells",
+    "unmerge_cells": "Unmerge cells",
     "format_menu": {
       "auto": "Auto",
       "number": "Number",

webapp/app.ironcalc.com/frontend/package.json

@@ -14,19 +14,19 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@ironcalc/workbook": "file:../../IronCalc/",
-    "@mui/material": "^7.1.1",
-    "lucide-react": "^0.513.0",
+    "@mui/material": "^6.4",
+    "lucide-react": "^0.473.0",
     "qrcode.react": "^4.2.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "typescript": "~5.8.3",
-    "vite": "^6.3.5",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.5",
     "vite-plugin-svgr": "^4.2.0"
   }
 }

xlsx/src/export/worksheets.rs

@@ -220,6 +220,7 @@ pub(crate) fn get_worksheet_xml(
                         "<c r=\"{cell_name}\" t=\"e\"{style}><f>{formula}</f><v>{ei}</v></c>"
                     ));
                 }
+                Cell::Merged { .. } => { /* do nothing */ }
             }
         }
         let row_style_str = match row_style_dict.get(row_index) {
@@ -247,7 +248,7 @@ pub(crate) fn get_worksheet_xml(
     }
     let sheet_data = sheet_data_str.join("");
 
-    for merge_cell_ref in &worksheet.merge_cells {
+    for merge_cell_ref in &worksheet.merged_cells {
         merged_cells_str.push(format!("<mergeCell ref=\"{merge_cell_ref}\"/>"))
     }
     let merged_cells_count = merged_cells_str.len();

xlsx/src/import/worksheets.rs

@@ -989,7 +989,7 @@ pub(super) fn load_sheet<R: Read + std::io::Seek>(
         sheet_data.insert(row_index, data_row);
     }
 
-    let merge_cells = load_merge_cells(ws)?;
+    let merged_cells = load_merged_cells(ws)?;
 
     // Conditional Formatting
     // <conditionalFormatting sqref="B1:B9">
@@ -1028,7 +1028,7 @@ pub(super) fn load_sheet<R: Read + std::io::Seek>(
             sheet_id,
             state: state.to_owned(),
             color,
-            merge_cells,
+            merged_cells,
             comments: settings.comments,
             frozen_rows: sheet_view.frozen_rows,
             frozen_columns: sheet_view.frozen_columns,