FIX: adds create user_model_from_bytes

.github/workflows/pypi.yml

@@ -117,7 +117,7 @@ jobs:
           MATURIN_REPOSITORY_URL: "https://test.pypi.org/legacy/"
         with:
           command: upload
-          args: "--skip-existing **/*.whl"
+          args: "--skip-existing **/*.whl **/*.tar.gz"
           working-directory: bindings/python
 
   publish-pypi:
@@ -137,5 +137,5 @@ jobs:
           MATURIN_REPOSITORY_URL: "https://upload.pypi.org/legacy/"
         with:
           command: upload
-          args: "--skip-existing **/*.whl"
+          args: "--skip-existing **/*.whl **/*.tar.gz"
           working-directory: bindings/python

Cargo.lock

@@ -721,11 +721,10 @@ dependencies = [
 
 [[package]]
 name = "pyo3"
-version = "0.23.4"
+version = "0.25.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "57fe09249128b3173d092de9523eaa75136bf7ba85e0d69eca241c7939c933cc"
+checksum = "f239d656363bcee73afef85277f1b281e8ac6212a1d42aa90e55b90ed43c47a4"
 dependencies = [
- "cfg-if",
  "indoc",
  "libc",
  "memoffset",
@@ -739,9 +738,9 @@ dependencies = [
 
 [[package]]
 name = "pyo3-build-config"
-version = "0.23.4"
+version = "0.25.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1cd3927b5a78757a0d71aa9dff669f903b1eb64b54142a9bd9f757f8fde65fd7"
+checksum = "755ea671a1c34044fa165247aaf6f419ca39caa6003aee791a0df2713d8f1b6d"
 dependencies = [
  "once_cell",
  "target-lexicon",
@@ -749,9 +748,9 @@ dependencies = [
 
 [[package]]
 name = "pyo3-ffi"
-version = "0.23.4"
+version = "0.25.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dab6bb2102bd8f991e7749f130a70d05dd557613e39ed2deeee8e9ca0c4d548d"
+checksum = "fc95a2e67091e44791d4ea300ff744be5293f394f1bafd9f78c080814d35956e"
 dependencies = [
  "libc",
  "pyo3-build-config",
@@ -759,9 +758,9 @@ dependencies = [
 
 [[package]]
 name = "pyo3-macros"
-version = "0.23.4"
+version = "0.25.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "91871864b353fd5ffcb3f91f2f703a22a9797c91b9ab497b1acac7b07ae509c7"
+checksum = "a179641d1b93920829a62f15e87c0ed791b6c8db2271ba0fd7c2686090510214"
 dependencies = [
  "proc-macro2",
  "pyo3-macros-backend",
@@ -771,9 +770,9 @@ dependencies = [
 
 [[package]]
 name = "pyo3-macros-backend"
-version = "0.23.4"
+version = "0.25.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "43abc3b80bc20f3facd86cd3c60beed58c3e2aa26213f3cda368de39c60a27e4"
+checksum = "9dff85ebcaab8c441b0e3f7ae40a6963ecea8a9f5e74f647e33fcf5ec9a1e89e"
 dependencies = [
  "heck",
  "proc-macro2",
@@ -784,8 +783,9 @@ dependencies = [
 
 [[package]]
 name = "pyroncalc"
-version = "0.5.0"
+version = "0.5.6"
 dependencies = [
+ "bitcode",
  "ironcalc",
  "pyo3",
  "serde",
@@ -979,9 +979,9 @@ dependencies = [
 
 [[package]]
 name = "target-lexicon"
-version = "0.12.16"
+version = "0.13.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "61c41af27dd6d1e27b1b16b489db798443478cef1f06a660c96db617ba5de3b1"
+checksum = "e502f78cdbb8ba4718f566c418c52bc729126ffd16baee5baa718cf25dd5a69a"
 
 [[package]]
 name = "thiserror"
@@ -1070,7 +1070,7 @@ checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"
 
 [[package]]
 name = "wasm"
-version = "0.5.0"
+version = "0.5.3"
 dependencies = [
  "ironcalc_base",
  "serde",

base/src/model.rs

@@ -1931,32 +1931,16 @@ impl Model {
     }
 
     /// Returns markup representation of the given `sheet`.
-    pub fn get_sheet_markup(
+    pub fn get_sheet_markup(&self, sheet: u32) -> Result<String, String> {
-        &self,
+        let worksheet = self.workbook.worksheet(sheet)?;
-        sheet: u32,
+        let dimension = worksheet.dimension();
-        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());
-        }
 
-        // a mutable vector to store the column widths of length `width + 1`
+        let mut rows = Vec::new();
-        let mut column_widths: Vec<f64> = vec![0.0; (width + 1) as usize];
 
-        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 +1949,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"))
     }
 

base/src/new_empty.rs

@@ -405,6 +405,7 @@ impl Model {
             },
             tables: HashMap::new(),
             views,
+            users: Vec::new(),
         };
         let parsed_formulas = Vec::new();
         let worksheets = &workbook.worksheets;

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

@@ -39,6 +39,14 @@ pub struct WorkbookView {
     pub window_height: i64,
 }
 
+#[derive(Encode, Decode, Debug, PartialEq, Eq, Clone, Serialize, Deserialize)]
+pub struct WebUser {
+    pub id: String,
+    pub sheet: u32,
+    pub row: i32,
+    pub column: i32,
+}
+
 /// An internal representation of an IronCalc Workbook
 #[derive(Encode, Decode, Debug, PartialEq, Clone)]
 pub struct Workbook {
@@ -51,6 +59,7 @@ pub struct Workbook {
     pub metadata: Metadata,
     pub tables: HashMap<String, Table>,
     pub views: HashMap<u32, WorkbookView>,
+    pub users: Vec<WebUser>
 }
 
 /// A defined name. The `sheet_id` is the sheet index in case the name is local
@@ -303,14 +312,7 @@ impl Default for Styles {
         Styles {
             num_fmts: vec![],
             fonts: vec![Default::default()],
-            fills: vec![
+            fills: vec![Default::default()],
-                Default::default(),
-                Fill {
-                    pattern_type: "gray125".to_string(),
-                    fg_color: None,
-                    bg_color: None,
-                },
-            ],
             borders: vec![Default::default()],
             cell_style_xfs: vec![Default::default()],
             cell_xfs: vec![Default::default()],

base/src/user_model/common.rs

@@ -14,7 +14,7 @@ use crate::{
     model::Model,
     types::{
         Alignment, BorderItem, CellType, Col, HorizontalAlignment, SheetProperties, SheetState,
-        Style, VerticalAlignment,
+        Style, VerticalAlignment, WebUser,
     },
     utils::is_valid_hex_color,
 };
@@ -293,17 +293,9 @@ impl UserModel {
         self.model.workbook.name = name.to_string();
     }
 
-    /// Get area markdown
+    /// Set users
-    pub fn get_sheet_markup(
+    pub fn set_users(&mut self, users: &[WebUser]) {
-        &self,
+        self.model.workbook.users = users.to_vec();
-        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

bindings/python/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "pyroncalc"
-version = "0.5.0"
+version = "0.5.6"
 edition = "2021"
 
 
@@ -13,7 +13,8 @@ crate-type = ["cdylib"]
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
 xlsx = { package= "ironcalc", path = "../../xlsx", version = "0.5.0" }
-pyo3 = { version = "0.23", features = ["extension-module"] }
+pyo3 = { version = "0.25", features = ["extension-module"] }
+bitcode = "0.6.3"
 
 
 [features]

bindings/python/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "ironcalc"
-version = "0.5.0"
+version = "0.5.6"
 description = "Create, edit and evaluate Excel spreadsheets"
 requires-python = ">=3.10"
 keywords = [

bindings/python/src/lib.rs

@@ -2,8 +2,8 @@ use pyo3::exceptions::PyException;
 use pyo3::{create_exception, prelude::*, wrap_pyfunction};
 
 use types::{PySheetProperty, PyStyle};
-use xlsx::base::types::Style;
+use xlsx::base::types::{Style, Workbook};
-use xlsx::base::Model;
+use xlsx::base::{Model, UserModel};
 
 use xlsx::export::{save_to_icalc, save_to_xlsx};
 use xlsx::import;
@@ -14,6 +14,60 @@ use crate::types::PyCellType;
 
 create_exception!(_ironcalc, WorkbookError, PyException);
 
+#[pyclass]
+pub struct PyUserModel {
+    /// The user model, which is a wrapper around the Model
+    pub model: UserModel,
+}
+
+#[pymethods]
+impl PyUserModel {
+    /// Saves the user model to an xlsx file
+    pub fn save_to_xlsx(&self, file: &str) -> PyResult<()> {
+        let model = self.model.get_model();
+        save_to_xlsx(model, file).map_err(|e| WorkbookError::new_err(e.to_string()))
+    }
+
+    /// Saves the user model to file in the internal binary ic format
+    pub fn save_to_icalc(&self, file: &str) -> PyResult<()> {
+        let model = self.model.get_model();
+        save_to_icalc(model, file).map_err(|e| WorkbookError::new_err(e.to_string()))
+    }
+
+    pub fn apply_external_diffs(&mut self, external_diffs: &[u8]) -> PyResult<()> {
+        self.model
+            .apply_external_diffs(external_diffs)
+            .map_err(|e| WorkbookError::new_err(e.to_string()))
+    }
+
+    pub fn flush_send_queue(&mut self) -> Vec<u8> {
+        self.model.flush_send_queue()
+    }
+
+    pub fn set_user_input(
+        &mut self,
+        sheet: u32,
+        row: i32,
+        column: i32,
+        value: &str,
+    ) -> PyResult<()> {
+        self.model
+            .set_user_input(sheet, row, column, value)
+            .map_err(|e| WorkbookError::new_err(e.to_string()))
+    }
+
+    pub fn get_formatted_cell_value(&self, sheet: u32, row: i32, column: i32) -> PyResult<String> {
+        self.model
+            .get_formatted_cell_value(sheet, row, column)
+            .map_err(|e| WorkbookError::new_err(e.to_string()))
+    }
+
+    pub fn to_bytes(&self) -> PyResult<Vec<u8>> {
+        let bytes = self.model.to_bytes();
+        Ok(bytes)
+    }
+}
+
 /// This is a model implementing the 'raw' API
 #[pyclass]
 pub struct PyModel {
@@ -32,6 +86,12 @@ impl PyModel {
         save_to_icalc(&self.model, file).map_err(|e| WorkbookError::new_err(e.to_string()))
     }
 
+    /// To bytes
+    pub fn to_bytes(&self) -> PyResult<Vec<u8>> {
+        let bytes = self.model.to_bytes();
+        Ok(bytes)
+    }
+
     /// Evaluates the workbook
     pub fn evaluate(&mut self) {
         self.model.evaluate()
@@ -249,6 +309,15 @@ pub fn load_from_icalc(file_name: &str) -> PyResult<PyModel> {
     Ok(PyModel { model })
 }
 
+#[pyfunction]
+pub fn load_from_bytes(bytes: &[u8]) -> PyResult<PyModel> {
+    let workbook: Workbook =
+        bitcode::decode(bytes).map_err(|e| WorkbookError::new_err(e.to_string()))?;
+    let model =
+        Model::from_workbook(workbook).map_err(|e| WorkbookError::new_err(e.to_string()))?;
+    Ok(PyModel { model })
+}
+
 /// Creates an empty model
 #[pyfunction]
 pub fn create(name: &str, locale: &str, tz: &str) -> PyResult<PyModel> {
@@ -257,6 +326,43 @@ pub fn create(name: &str, locale: &str, tz: &str) -> PyResult<PyModel> {
     Ok(PyModel { model })
 }
 
+#[pyfunction]
+pub fn create_user_model(name: &str, locale: &str, tz: &str) -> PyResult<PyUserModel> {
+    let model = UserModel::new_empty(name, locale, tz)
+        .map_err(|e| WorkbookError::new_err(e.to_string()))?;
+    Ok(PyUserModel { model })
+}
+
+#[pyfunction]
+pub fn create_user_model_from_xlsx(
+    file_path: &str,
+    locale: &str,
+    tz: &str,
+) -> PyResult<PyUserModel> {
+    let model = import::load_from_xlsx(file_path, locale, tz)
+        .map_err(|e| WorkbookError::new_err(e.to_string()))?;
+    let model = UserModel::from_model(model);
+    Ok(PyUserModel { model })
+}
+
+#[pyfunction]
+pub fn create_user_model_from_icalc(file_name: &str) -> PyResult<PyUserModel> {
+    let model =
+        import::load_from_icalc(file_name).map_err(|e| WorkbookError::new_err(e.to_string()))?;
+    let model = UserModel::from_model(model);
+    Ok(PyUserModel { model })
+}
+
+#[pyfunction]
+pub fn create_user_model_from_bytes(bytes: &[u8]) -> PyResult<PyUserModel> {
+    let workbook: Workbook =
+        bitcode::decode(bytes).map_err(|e| WorkbookError::new_err(e.to_string()))?;
+    let model =
+        Model::from_workbook(workbook).map_err(|e| WorkbookError::new_err(e.to_string()))?;
+    let user_model = UserModel::from_model(model);
+    Ok(PyUserModel { model: user_model })
+}
+
 #[pyfunction]
 #[allow(clippy::panic)]
 pub fn test_panic() {
@@ -272,7 +378,14 @@ fn ironcalc(m: &Bound<'_, PyModule>) -> PyResult<()> {
     m.add_function(wrap_pyfunction!(create, m)?)?;
     m.add_function(wrap_pyfunction!(load_from_xlsx, m)?)?;
     m.add_function(wrap_pyfunction!(load_from_icalc, m)?)?;
+    m.add_function(wrap_pyfunction!(load_from_bytes, m)?)?;
     m.add_function(wrap_pyfunction!(test_panic, m)?)?;
 
+    // User model functions
+    m.add_function(wrap_pyfunction!(create_user_model, m)?)?;
+    m.add_function(wrap_pyfunction!(create_user_model_from_bytes, m)?)?;
+    m.add_function(wrap_pyfunction!(create_user_model_from_xlsx, m)?)?;
+    m.add_function(wrap_pyfunction!(create_user_model_from_icalc, m)?)?;
+
     Ok(())
 }

bindings/python/tests/test_create.py

@@ -6,3 +6,24 @@ def test_simple():
     model.evaluate()
 
     assert model.get_formatted_cell_value(0, 1, 1) == "3"
+
+    bytes = model.to_bytes()
+
+    model2 = ic.load_from_bytes(bytes)
+    assert model2.get_formatted_cell_value(0, 1, 1) == "3"
+
+
+def test_simple_user():
+    model = ic.create_user_model("model", "en", "UTC")
+    model.set_user_input(0, 1, 1, "=1+2")
+    model.set_user_input(0, 1, 2, "=A1+3")
+
+    assert model.get_formatted_cell_value(0, 1, 1) == "3"
+    assert model.get_formatted_cell_value(0, 1, 2) == "6"
+
+    diffs = model.flush_send_queue()
+
+    model2 = ic.create_user_model("model", "en", "UTC")
+    model2.apply_external_diffs(diffs)
+    assert model2.get_formatted_cell_value(0, 1, 1) == "3"
+    assert model2.get_formatted_cell_value(0, 1, 2) == "6"

bindings/wasm/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "wasm"
-version = "0.5.0"
+version = "0.5.3"
 authors = ["Nicolas Hatcher <nicolas@theuniverse.today>"]
 description = "IronCalc Web bindings"
 license = "MIT/Apache-2.0"

bindings/wasm/fix_types.py

@@ -201,6 +201,36 @@ defined_name_list_types = r"""
   getDefinedNameList(): DefinedName[];
 """
 
+set_users = r"""
+/**
+* @param {any} users
+*/
+  setUsers(users: any): void;
+"""
+
+set_users_types = r"""
+/**
+* @param {WebUser[]} users
+*/
+  setUsers(users: WebUser[]): void;
+"""
+
+get_users = r"""
+/**
+* @returns {any}
+*/
+  getUsers(): any;
+}
+"""
+
+get_users_types = r"""
+/**
+* @returns {WebUser[]}
+*/
+  getUsers(): WebUser[];
+}
+"""
+
 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 +245,8 @@ 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(set_users, set_users_types)
+    text = text.replace(get_users, get_users_types)
     with open("types.ts") as f:
         types_str = f.read()
         header_types = "{}\n\n{}".format(header, types_str)

bindings/wasm/src/lib.rs

@@ -6,7 +6,7 @@ use wasm_bindgen::{
 
 use ironcalc_base::{
     expressions::{lexer::util::get_tokens as tokenizer, types::Area, utils::number_to_column},
-    types::{CellType, Style},
+    types::{CellType, Style, WebUser},
     BorderArea, ClipboardData, UserModel as BaseModel,
 };
 
@@ -673,17 +673,17 @@ impl Model {
             .map_err(|e| to_js_error(e.to_string()))
     }
 
-    #[wasm_bindgen(js_name = "getSheetMarkup")]
+    #[wasm_bindgen(js_name = "setUsers")]
-    pub fn get_sheet_markup(
+    pub fn set_users(&mut self, users: JsValue) -> Result<(), JsError> {
-        &self,
+        let users: Vec<WebUser> =
-        sheet: u32,
+            serde_wasm_bindgen::from_value(users).map_err(|e| to_js_error(e.to_string()))?;
-        start_row: i32,
+        self.model.set_users(&users);
-        start_column: i32,
+        Ok(())
-        end_row: i32,
+    }
-        end_column: i32,
+
-    ) -> Result<String, JsError> {
+    #[wasm_bindgen(js_name = "getUsers")]
-        self.model
+    pub fn get_users(&self) -> Result<JsValue, JsError> {
-            .get_sheet_markup(sheet, start_row, start_column, end_row, end_column)
+        let users = self.model.get_model().workbook.users.clone();
-            .map_err(to_js_error)
+        serde_wasm_bindgen::to_value(&users).map_err(|e| to_js_error(e.to_string()))
     }
 }

bindings/wasm/types.ts

@@ -234,3 +234,10 @@ export interface DefinedName {
   scope?: number;
   formula: string;
 }
+
+export interface WebUser {
+  id: string;
+  sheet: number;
+  row: number;
+  column: 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

@@ -1,6 +1,6 @@
 {
   "name": "@ironcalc/workbook",
-  "version": "0.3.2",
+  "version": "0.5.5",
   "type": "module",
   "main": "./dist/ironcalc.js",
   "module": "./dist/ironcalc.js",
@@ -17,27 +17,32 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@ironcalc/wasm": "file:../../bindings/wasm/pkg",
+    "@ironcalc/wasm": "0.5.3",
-    "@mui/material": "^7.1.1",
+    "@mui/material": "^6.4",
-    "@mui/system": "^7.1.1",
+    "@mui/system": "^6.4",
-    "i18next": "^25.2.1",
+    "i18next": "^23.11.1",
-    "lucide-react": "^0.513.0",
+    "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",
+    "@chromatic-com/storybook": "^3.2.4",
-    "@storybook/react-vite": "^9.0.5",
+    "@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": "^19.0.0",
-    "react-dom": "^19.1.0",
+    "react-dom": "^19.0.0",
-    "storybook": "^9.0.5",
+    "storybook": "^8.6.0",
     "ts-node": "^10.9.2",
-    "typescript": "~5.8.3",
+    "typescript": "~5.6.2",
-    "vite": "^6.3.5",
+    "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,6 @@ import {
   ArrowMiddleFromLine,
   DecimalPlacesDecreaseIcon,
   DecimalPlacesIncreaseIcon,
-  Markdown,
 } from "../../icons";
 import { theme } from "../../theme";
 import BorderPicker from "../BorderPicker/BorderPicker";
@@ -75,7 +74,6 @@ type ToolbarProperties = {
   onClearFormatting: () => void;
   onIncreaseFontSize: (delta: number) => void;
   onDownloadPNG: () => void;
-  onCopyMarkdown: () => void;
   fillColor: string;
   fontColor: string;
   fontSize: number;
@@ -431,17 +429,6 @@ function Toolbar(properties: ToolbarProperties) {
       >
         <ImageDown />
       </StyledButton>
-      <StyledButton
-        type="button"
-        $pressed={false}
-        onClick={() => {
-          properties.onCopyMarkdown();
-        }}
-        disabled={!canEdit}
-        title={t("toolbar.selected_markdown")}
-      >
-        <Markdown />
-      </StyledButton>
 
       <ColorPicker
         color={properties.fontColor}

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();

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,7 +191,8 @@ const Worksheet = forwardRef(
       worksheetCanvas.current = canvas;
     });
 
-    const { onPointerMove, onPointerDown, onPointerUp } = usePointer({
+    const { onPointerMove, onPointerDown, onPointerHandleDown, onPointerUp } =
+      usePointer({
         model,
         workbookState,
         refresh,
@@ -251,6 +256,134 @@ const Worksheet = forwardRef(
           }
           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,
@@ -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 {
@@ -242,10 +251,26 @@ const usePointer = (options: PointerSettings): PointerEvents => {
     [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,13 @@ import {
   headerTextColor,
   outlineColor,
 } from "./constants";
-import { attachOutlineHandle } from "./outlineHandle";
+
-import { computeWrappedLines, hexToRGBA10Percent } from "./util";
+export interface UserSelection {
+  userId: string;
+  color: string;
+  selection: [number, number, number, number, number]; // [sheet, rowStart, columnStart, rowEnd, columnEnd]
+  div: HTMLDivElement;
+}
 
 export interface CanvasSettings {
   model: Model;
@@ -30,6 +35,7 @@ export interface CanvasSettings {
     canvas: HTMLCanvasElement;
     cellOutline: HTMLDivElement;
     areaOutline: HTMLDivElement;
+    cellOutlineHandle: HTMLDivElement;
     extendToOutline: HTMLDivElement;
     columnGuide: HTMLDivElement;
     rowGuide: HTMLDivElement;
@@ -54,6 +60,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 +176,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 +186,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 {
@@ -1181,6 +1251,33 @@ export default class WorksheetCanvas {
     editor.style.height = `${height - 1}px`;
   }
 
+  private drawUsersSelection(): void {
+    const users = this.model.getUsers();
+    for (const handle of document.querySelectorAll(
+      ".user-selection-ironcalc",
+    ))
+      handle.remove();
+    users.forEach((user, index) => {
+      const { sheet, row, column } = user;
+      if (sheet !== this.model.getSelectedSheet()) {
+        return;
+      }
+      const [x, y] = this.getCoordinatesByCell(row, column);
+      const width = this.getColumnWidth(sheet, column);
+      const height = this.getRowHeight(sheet, row);
+      const div = document.createElement("div");
+      const color = getColor(index + 1);
+      div.className = "user-selection-ironcalc";
+      div.style.left = `${x}px`;
+      div.style.top = `${y}px`;
+      div.style.width = `${width}px`;
+      div.style.height = `${height}px`;
+      div.style.border = `1px solid ${color}`;
+      div.style.position = "absolute";
+      this.canvas.parentElement?.appendChild(div);
+    });
+  }
+
   private drawCellOutline(): void {
     const { cellOutline, areaOutline, cellOutlineHandle } = this;
     if (this.workbookState.getEditingCell()) {
@@ -1532,6 +1629,7 @@ export default class WorksheetCanvas {
     context.stroke();
 
     this.drawCellOutline();
+    this.drawUsersSelection();
     this.drawCellEditor();
     this.drawExtendToArea();
     this.drawActiveRanges(topLeftCell, bottomRightCell);

webapp/IronCalc/src/icons/index.ts

@@ -19,7 +19,6 @@ 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";
@@ -49,5 +48,4 @@ export {
   IronCalcIcon,
   IronCalcLogo,
   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/locale/en_us.json

@@ -26,7 +26,6 @@
     "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",
     "format_menu": {
       "auto": "Auto",

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",
+    "@mui/material": "^6.4",
-    "lucide-react": "^0.513.0",
+    "lucide-react": "^0.473.0",
     "qrcode.react": "^4.2.0",
-    "react": "^19.1.0",
+    "react": "^19.0.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@types/react": "^19.1.0",
+    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.1.0",
+    "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "typescript": "~5.8.3",
+    "typescript": "~5.6.2",
-    "vite": "^6.3.5",
+    "vite": "^6.0.5",
     "vite-plugin-svgr": "^4.2.0"
   }
 }

xlsx/src/import/mod.rs

@@ -110,6 +110,7 @@ fn load_xlsx_from_reader<R: Read + std::io::Seek>(
         metadata,
         tables,
         views,
+        users: Vec::new(),
     })
 }