FIX: Fixes for the CI builds

.github/workflows/pypi.yml

@@ -32,7 +32,7 @@ jobs:
           manylinux: auto
           working-directory: bindings/python
       - name: Upload wheels
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: wheels
           path: bindings/python/dist
@@ -56,7 +56,7 @@ jobs:
           sccache: 'true'
           working-directory: bindings/python
       - name: Upload wheels
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: wheels
           path: bindings/python/dist
@@ -79,7 +79,7 @@ jobs:
           sccache: 'true'
           working-directory: bindings/python
       - name: Upload wheels
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: wheels
           path: bindings/python/dist
@@ -95,7 +95,7 @@ jobs:
           args: --out dist
           working-directory: bindings/python
       - name: Upload sdist
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: wheels
           path: bindings/python/dist

Cargo.lock

@@ -414,7 +414,7 @@ dependencies = [
 
 [[package]]
 name = "ironcalc"
-version = "0.3.0"
+version = "0.5.0"
 dependencies = [
  "bitcode",
  "chrono",
@@ -430,7 +430,7 @@ dependencies = [
 
 [[package]]
 name = "ironcalc_base"
-version = "0.3.0"
+version = "0.5.0"
 dependencies = [
  "bitcode",
  "chrono",
@@ -448,7 +448,7 @@ dependencies = [
 
 [[package]]
 name = "ironcalc_nodejs"
-version = "0.3.1"
+version = "0.5.0"
 dependencies = [
  "ironcalc",
  "napi",
@@ -784,7 +784,7 @@ dependencies = [
 
 [[package]]
 name = "pyroncalc"
-version = "0.3.0"
+version = "0.5.0"
 dependencies = [
  "ironcalc",
  "pyo3",
@@ -1070,7 +1070,7 @@ checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"
 
 [[package]]
 name = "wasm"
-version = "0.3.2"
+version = "0.5.0"
 dependencies = [
  "ironcalc_base",
  "serde",

README.md

@@ -77,7 +77,7 @@ And visit <http://0.0.0.0:8000/ironcalc/>
 Add the dependency to `Cargo.toml`:
 ```toml
 [dependencies]
-ironcalc = { git = "https://github.com/ironcalc/IronCalc", version = "0.1"}
+ironcalc = { git = "https://github.com/ironcalc/IronCalc", version = "0.5"}
 ```
 
 And then use this code in `main.rs`:

base/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "ironcalc_base"
-version = "0.3.0"
+version = "0.5.0"
 authors = ["Nicolás Hatcher <nicolas@theuniverse.today>"]
 edition = "2021"
 homepage = "https://www.ironcalc.com"

base/src/test/user_model/test_row_column.rs

@@ -170,7 +170,7 @@ fn row_heigh_increases_automatically() {
     model
         .set_user_input(0, 1, 1, "My home in Canada had horses\nAnd monkeys!")
         .unwrap();
-    assert_eq!(model.get_row_height(0, 1), Ok(2.0 * DEFAULT_ROW_HEIGHT));
+    assert_eq!(model.get_row_height(0, 1), Ok(40.5));
 }
 
 #[test]

base/src/user_model/common.rs

@@ -6,7 +6,7 @@ use csv::{ReaderBuilder, WriterBuilder};
 use serde::{Deserialize, Serialize};
 
 use crate::{
-    constants::{self, DEFAULT_ROW_HEIGHT, LAST_COLUMN, LAST_ROW},
+    constants::{self, LAST_COLUMN, LAST_ROW},
     expressions::{
         types::{Area, CellReferenceIndex},
         utils::{is_valid_column_number, is_valid_row},
@@ -430,10 +430,14 @@ impl UserModel {
             new_value: value.to_string(),
             old_value: Box::new(old_value),
         }];
+        let style = self.model.get_style_for_cell(sheet, row, column)?;
 
-        let line_count = value.split('\n').count();
+        let line_count = value.split('\n').count() as f64;
         let row_height = self.model.get_row_height(sheet, row)?;
-        let cell_height = (line_count as f64) * DEFAULT_ROW_HEIGHT;
+        // This is in sync with the front-end auto fit row
+        let font_size = style.font.sz as f64;
+        let line_height = font_size * 1.5;
+        let cell_height = (line_count - 1.0) * line_height + 8.0 + font_size;
         if cell_height > row_height {
             diff_list.push(Diff::SetRowHeight {
                 sheet,

bindings/nodejs/Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 edition = "2021"
 name = "ironcalc_nodejs"
-version = "0.3.1"
+version = "0.5.0"
 
 [lib]
 crate-type = ["cdylib"]
@@ -10,7 +10,7 @@ crate-type = ["cdylib"]
 # Default enable napi4 feature, see https://nodejs.org/api/n-api.html#node-api-version-matrix
 napi = { version = "2.12.2", default-features = false, features = ["napi4", "serde-json"] }
 napi-derive = "2.12.2"
-ironcalc = { path = "../../xlsx", version = "0.3.0" }
+ironcalc = { path = "../../xlsx", version = "0.5.0" }
 serde = { version = "1.0", features = ["derive"] }
 
 [build-dependencies]

bindings/nodejs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironcalc/nodejs",
-  "version": "0.3.1",
+  "version": "0.5.1",
   "main": "index.js",
   "types": "index.d.ts",
   "napi": {

bindings/python/Cargo.toml

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

bindings/python/pyproject.toml

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

bindings/wasm/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "wasm"
-version = "0.3.2"
+version = "0.5.0"
 authors = ["Nicolas Hatcher <nicolas@theuniverse.today>"]
 description = "IronCalc Web bindings"
 license = "MIT/Apache-2.0"
@@ -14,7 +14,7 @@ crate-type = ["cdylib"]
 # Uses `../ironcalc/base` when used locally, and uses
 # the inicated version from crates.io when published.
 # https://doc.rust-lang.org/cargo/reference/specifying-dependencies.html#multiple-locations
-ironcalc_base = { path = "../../base", version = "0.3", features = ["use_regex_lite"] }
+ironcalc_base = { path = "../../base", version = "0.5", features = ["use_regex_lite"] }
 serde = { version = "1.0", features = ["derive"] }
 wasm-bindgen = "0.2.92"
 serde-wasm-bindgen = "0.4"

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

@@ -7,8 +7,6 @@ import type {
 import { styled } from "@mui/material/styles";
 import type {} from "@mui/system";
 import {
-  AArrowDown,
-  AArrowUp,
   AlignCenter,
   AlignLeft,
   AlignRight,
@@ -22,9 +20,11 @@ import {
   Grid2x2X,
   ImageDown,
   Italic,
+  Minus,
   PaintBucket,
   PaintRoller,
   Percent,
+  Plus,
   Redo2,
   RemoveFormatting,
   Strikethrough,
@@ -32,6 +32,7 @@ import {
   Type,
   Underline,
   Undo2,
+  WrapText,
 } from "lucide-react";
 import { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -64,6 +65,7 @@ type ToolbarProperties = {
   onToggleStrike: (v: boolean) => void;
   onToggleHorizontalAlign: (v: string) => void;
   onToggleVerticalAlign: (v: string) => void;
+  onToggleWrapText: (v: boolean) => void;
   onCopyStyles: () => void;
   onTextColorPicked: (hex: string) => void;
   onFillColorPicked: (hex: string) => void;
@@ -74,12 +76,14 @@ type ToolbarProperties = {
   onDownloadPNG: () => void;
   fillColor: string;
   fontColor: string;
+  fontSize: number;
   bold: boolean;
   underline: boolean;
   italic: boolean;
   strike: boolean;
   horizontalAlign: HorizontalAlignment;
   verticalAlign: VerticalAlignment;
+  wrapText: boolean;
   canEdit: boolean;
   numFmt: string;
   showGridLines: boolean;
@@ -205,6 +209,30 @@ function Toolbar(properties: ToolbarProperties) {
         </StyledButton>
       </FormatMenu>
       <Divider />
+      <StyledButton
+        type="button"
+        $pressed={false}
+        disabled={!canEdit}
+        onClick={() => {
+          properties.onIncreaseFontSize(-1);
+        }}
+        title={t("toolbar.decrease_font_size")}
+      >
+        <Minus />
+      </StyledButton>
+      <FontSizeBox>{properties.fontSize}</FontSizeBox>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        disabled={!canEdit}
+        onClick={() => {
+          properties.onIncreaseFontSize(1);
+        }}
+        title={t("toolbar.increase_font_size")}
+      >
+        <Plus />
+      </StyledButton>
+      <Divider />
       <StyledButton
         type="button"
         $pressed={properties.bold}
@@ -253,28 +281,6 @@ function Toolbar(properties: ToolbarProperties) {
       >
         <Type />
       </StyledButton>
-      <StyledButton
-        type="button"
-        $pressed={false}
-        disabled={!canEdit}
-        onClick={() => {
-          properties.onIncreaseFontSize(1);
-        }}
-        title={t("toolbar.increase_font_size")}
-      >
-        <AArrowUp />
-      </StyledButton>
-      <StyledButton
-        type="button"
-        $pressed={false}
-        disabled={!canEdit}
-        onClick={() => {
-          properties.onIncreaseFontSize(-1);
-        }}
-        title={t("toolbar.decrease_font_size")}
-      >
-        <AArrowDown />
-      </StyledButton>
       <StyledButton
         type="button"
         $pressed={false}
@@ -363,6 +369,17 @@ function Toolbar(properties: ToolbarProperties) {
       >
         <ArrowDownToLine />
       </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.wrapText === true}
+        onClick={() => {
+          properties.onToggleWrapText(!properties.wrapText);
+        }}
+        disabled={!canEdit}
+        title={t("toolbar.wrap_text")}
+      >
+        <WrapText />
+      </StyledButton>
 
       <Divider />
       <StyledButton
@@ -534,4 +551,16 @@ const Divider = styled("div")({
   margin: "0px 12px",
 });
 
+const FontSizeBox = styled("div")({
+  width: "24px",
+  height: "24px",
+  lineHeight: "24px",
+  textAlign: "center",
+  fontFamily: "Inter",
+  fontSize: "11px",
+  border: `1px solid ${theme.palette.grey["300"]}`,
+  borderRadius: "4px",
+  minWidth: "24px",
+});
+
 export default Toolbar;

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

@@ -112,6 +112,10 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
     updateRangeStyle("alignment.vertical", value);
   };
 
+  const onToggleWrapText = (value: boolean) => {
+    updateRangeStyle("alignment.wrap_text", `${value}`);
+  };
+
   const onTextColorPicked = (hex: string) => {
     updateRangeStyle("font.color", hex);
   };
@@ -532,6 +536,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
         onToggleStrike={onToggleStrike}
         onToggleHorizontalAlign={onToggleHorizontalAlign}
         onToggleVerticalAlign={onToggleVerticalAlign}
+        onToggleWrapText={onToggleWrapText}
         onCopyStyles={onCopyStyles}
         onTextColorPicked={onTextColorPicked}
         onFillColorPicked={onFillColorPicked}
@@ -628,6 +633,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
         }}
         fillColor={style.fill.fg_color || "#FFFFFF"}
         fontColor={style.font.color}
+        fontSize={style.font.sz}
         bold={style.font.b}
         underline={style.font.u}
         italic={style.font.i}
@@ -638,6 +644,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
         verticalAlign={
           style.alignment?.vertical ? style.alignment.vertical : "bottom"
         }
+        wrapText={style.alignment?.wrap_text || false}
         canEdit={true}
         numFmt={style.num_fmt}
         showGridLines={model.getShowGridLines(model.getSelectedSheet())}

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

@@ -70,6 +70,52 @@ function hexToRGBA10Percent(colorHex: string): 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 (const word of words) {
+      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;
 
@@ -371,6 +417,7 @@ export default class WorksheetCanvas {
     if (style.alignment?.vertical) {
       verticalAlign = style.alignment.vertical;
     }
+    const wrapText = style.alignment?.wrap_text || false;
 
     const context = this.ctx;
     context.font = font;
@@ -496,9 +543,14 @@ export default class WorksheetCanvas {
     context.rect(x, y, width, height);
     context.clip();
 
-    // Is there any better parameter?
+    // Is there any better to determine the line height?
-    const lineHeight = 22;
+    const lineHeight = fontSize * 1.5;
-    const lines = fullText.split("\n");
+    const lines = computeWrappedLines(
+      fullText,
+      wrapText,
+      context,
+      width - padding,
+    );
     const lineCount = lines.length;
 
     lines.forEach((text, line) => {
@@ -608,14 +660,16 @@ export default class WorksheetCanvas {
       const sheet = this.model.getSelectedSheet();
       const rows = this.model.getRowsWithData(sheet, column);
       let width = 0;
-      // This is a bit of a HACK. We should use the actual font size and weather is bold or not
-      const fontSize = 13;
-      this.ctx.font = `${fontSize}px ${defaultCellFontFamily}`;
       for (const row of rows) {
         const fullText = this.model.getFormattedCellValue(sheet, row, column);
         if (fullText === "") {
           continue;
         }
+        const style = this.model.getCellStyle(sheet, row, column);
+        const fontSize = style.font.sz;
+        let font = `${fontSize}px ${defaultCellFontFamily}`;
+        font = style.font.b ? `bold ${font}` : `400 ${font}`;
+        this.ctx.font = font;
         const lines = fullText.split("\n");
         for (const line of lines) {
           const textWidth = this.ctx.measureText(line).width;
@@ -675,18 +729,26 @@ export default class WorksheetCanvas {
       const sheet = this.model.getSelectedSheet();
       const columns = this.model.getColumnsWithData(sheet, row);
       let height = 0;
-      const lineHeight = 22;
-      // This is a bit of a HACK. We should use the actual font size and weather is bold or not
-      const fontSize = 13;
-      this.ctx.font = `${fontSize}px ${defaultCellFontFamily}`;
       for (const column of columns) {
         const fullText = this.model.getFormattedCellValue(sheet, row, column);
         if (fullText === "") {
           continue;
         }
-        const lines = fullText.split("\n");
+        const width = this.getColumnWidth(sheet, column);
+        const style = this.model.getCellStyle(sheet, row, column);
+        const fontSize = style.font.sz;
+        const lineHeight = fontSize * 1.5;
+        let font = `${fontSize}px ${defaultCellFontFamily}`;
+        font = style.font.b ? `bold ${font}` : `400 ${font}`;
+        this.ctx.font = font;
+        const lines = computeWrappedLines(
+          fullText,
+          style.alignment?.wrap_text || false,
+          this.ctx,
+          width,
+        );
         const lineCount = lines.length;
-        // This si computed so that the y position of the text is independent of the vertical alignment
+        // This is computed so that the y position of the text is independent of the vertical alignment
         const textHeight = (lineCount - 1) * lineHeight + 8 + fontSize;
         height = Math.max(height, textHeight);
       }

webapp/IronCalc/src/locale/en_us.json

@@ -26,6 +26,7 @@
     "vertical_align_middle": " Align middle",
     "vertical_align_top": "Align top",
     "selected_png": "Export Selected area as PNG",
+    "wrap_text": "Wrap text",
     "format_menu": {
       "auto": "Auto",
       "number": "Number",

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

@@ -13,6 +13,7 @@
         "@ironcalc/workbook": "file:../../IronCalc/",
         "@mui/material": "^6.4",
         "lucide-react": "^0.473.0",
+        "qrcode.react": "^4.2.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
       },
@@ -2487,6 +2488,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/qrcode.react": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.2.0.tgz",
+      "integrity": "sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react": {
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",

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

@@ -16,6 +16,7 @@
     "@ironcalc/workbook": "file:../../IronCalc/",
     "@mui/material": "^6.4",
     "lucide-react": "^0.473.0",
+    "qrcode.react": "^4.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

webapp/app.ironcalc.com/frontend/src/components/FileBar.tsx

@@ -1,13 +1,12 @@
 import styled from "@emotion/styled";
 import type { Model } from "@ironcalc/workbook";
 import { IronCalcIcon, IronCalcLogo } from "@ironcalc/workbook";
-import { CircleCheck } from "lucide-react";
 import { useRef, useState } from "react";
-// import { IronCalcIcon, IronCalcLogo } from "./../icons";
 import { FileMenu } from "./FileMenu";
 import { ShareButton } from "./ShareButton";
+import ShareWorkbookDialog from "./ShareWorkbookDialog";
 import { WorkbookTitle } from "./WorkbookTitle";
-import { downloadModel, shareModel } from "./rpc";
+import { downloadModel } from "./rpc";
 import { updateNameSelectedWorkbook } from "./storage";
 
 export function FileBar(properties: {
@@ -18,7 +17,8 @@ export function FileBar(properties: {
   onDelete: () => void;
 }) {
   const hiddenInputRef = useRef<HTMLInputElement>(null);
-  const [toast, setToast] = useState(false);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
   return (
     <FileBarWrapper>
       <StyledDesktopLogo />
@@ -53,37 +53,17 @@ export function FileBar(properties: {
         type="text"
         style={{ position: "absolute", left: -9999, top: -9999 }}
       />
-      <div style={{ marginLeft: "auto" }}>
+      <div style={{ marginLeft: "auto" }} />
-        {toast ? (
+      <DialogContainer>
-          <Toast>
+        <ShareButton onClick={() => setIsDialogOpen(true)} />
-            <CircleCheck style={{ width: 12 }} />
+        {isDialogOpen && (
-            <span
+          <ShareWorkbookDialog
-              style={{ marginLeft: 8, marginRight: 12, fontFamily: "Inter" }}
+            onClose={() => setIsDialogOpen(false)}
-            >
+            onModelUpload={properties.onModelUpload}
-              URL copied to clipboard
+            model={properties.model}
-            </span>
+          />
-          </Toast>
-        ) : (
-          ""
         )}
-      </div>
+      </DialogContainer>
-      <ShareButton
-        onClick={async () => {
-          const model = properties.model;
-          const bytes = model.toBytes();
-          const fileName = model.getName();
-          const hash = await shareModel(bytes, fileName);
-          const value = `${location.origin}/?model=${hash}`;
-          if (hiddenInputRef.current) {
-            hiddenInputRef.current.value = value;
-            hiddenInputRef.current.select();
-            document.execCommand("copy");
-            setToast(true);
-            setTimeout(() => setToast(false), 5000);
-          }
-          console.log(value);
-        }}
-      />
     </FileBarWrapper>
   );
 }
@@ -117,14 +97,6 @@ const HelpButton = styled("div")`
   }
 `;
 
-const Toast = styled("div")`
-  font-weight: 400;
-  font-size: 12px;
-  color: #9e9e9e;
-  display: flex;
-  align-items: center;
-`;
-
 const Divider = styled("div")`
   margin: 0px 8px 0px 16px;
   height: 12px;
@@ -141,3 +113,17 @@ const FileBarWrapper = styled("div")`
   position: relative;
   justify-content: space-between;
 `;
+
+const DialogContainer = styled("div")`
+  position: relative;
+  display: inline-block;
+  button {
+    margin-bottom: 8px;
+  }
+  .MuiDialog-root {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    transform: translateY(8px);
+  }
+`;

webapp/app.ironcalc.com/frontend/src/components/ShareWorkbookDialog.tsx

@@ -0,0 +1,202 @@
+import type { Model } from "@ironcalc/workbook";
+import { Button, Dialog, TextField, styled } from "@mui/material";
+import { Check, Copy, GlobeLock } from "lucide-react";
+import { QRCodeSVG } from "qrcode.react";
+import { useEffect, useState } from "react";
+import { shareModel } from "./rpc";
+
+function ShareWorkbookDialog(properties: {
+  onClose: () => void;
+  onModelUpload: (blob: ArrayBuffer, fileName: string) => Promise<void>;
+  model?: Model;
+}) {
+  const [url, setUrl] = useState<string>("");
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    const generateUrl = async () => {
+      if (properties.model) {
+        const bytes = properties.model.toBytes();
+        const fileName = properties.model.getName();
+        const hash = await shareModel(bytes, fileName);
+        setUrl(`${location.origin}/?model=${hash}`);
+      }
+    };
+    generateUrl();
+  }, [properties.model]);
+
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+    if (copied) {
+      timeoutId = setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    }
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [copied]);
+
+  const handleClose = () => {
+    properties.onClose();
+  };
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+    }
+  };
+
+  return (
+    <DialogWrapper
+      open={true}
+      tabIndex={0}
+      onClose={handleClose}
+      onKeyDown={(event) => {
+        if (event.code === "Escape") {
+          handleClose();
+        }
+      }}
+    >
+      <DialogContent>
+        <QRCodeWrapper>
+          <QRCodeSVG value={url} size={80} />{" "}
+        </QRCodeWrapper>
+        <URLWrapper>
+          <StyledTextField
+            hiddenLabel
+            disabled
+            value={url}
+            variant="outlined"
+            fullWidth
+            margin="normal"
+            size="small"
+          />
+          <StyledButton
+            variant="contained"
+            color="primary"
+            size="small"
+            onClick={handleCopy}
+          >
+            {copied ? <StyledCheck /> : <StyledCopy />}
+            {copied ? "Copied!" : "Copy URL"}
+          </StyledButton>
+        </URLWrapper>
+      </DialogContent>
+
+      <UploadFooter>
+        <GlobeLock />
+        Anyone with the link will be able to access a copy of this workbook
+      </UploadFooter>
+    </DialogWrapper>
+  );
+}
+
+const DialogWrapper = styled(Dialog)`
+  .MuiDialog-paper {
+    width: 440px;
+    position: absolute;
+    top: 44px;
+    right: 0px;
+    margin: 10px;
+    max-width: calc(100% - 20px);
+  }
+  .MuiBackdrop-root {
+    background-color: transparent;
+  }
+`;
+
+const DialogContent = styled("div")`
+  padding: 20px;
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  height: 80px;
+`;
+
+const URLWrapper = styled("div")`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  justify-content: space-between;
+`;
+
+const StyledTextField = styled(TextField)`
+  margin: 0px;
+  .MuiInputBase-root {
+    max-height: 36px;
+    font-size: 14px;
+    padding-top: 0px;
+  }
+  .MuiOutlinedInput-input {
+    text-overflow: ellipsis;
+    padding: 8px;
+  }
+`;
+
+const StyledButton = styled(Button)`
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  background-color: #eeeeee;
+  height: 36px;
+  color: #616161;
+  box-shadow: none;
+  font-size: 14px;
+  text-transform: capitalize;
+  gap: 10px;
+  &:hover {
+    background-color: #e0e0e0;
+    box-shadow: none;
+  }
+  &:active {
+    background-color: #d4d4d4;
+    box-shadow: none;
+  }
+`;
+
+const StyledCopy = styled(Copy)`
+  width: 16px;
+`;
+
+const StyledCheck = styled(Check)`
+  width: 16px;
+`;
+
+const QRCodeWrapper = styled("div")`
+  min-height: 80px;
+  min-width: 80px;
+  background-color: grey;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @media (max-width: 600px) {
+    display: none;
+  }
+`;
+
+const UploadFooter = styled("div")`
+  height: 44px;
+  border-top: 1px solid #e0e0e0;
+  font-size: 12px;
+  font-weight: 400;
+  color: #757575;
+  display: flex;
+  align-items: center;
+  font-family: Inter;
+  gap: 8px;
+  padding: 0px 12px;
+  svg {
+    max-width: 16px;
+  }
+`;
+
+export default ShareWorkbookDialog;

webapp/app.ironcalc.com/server/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "ironcalc_server"
-version = "0.3.0"
+version = "0.5.0"
 edition = "2021"
 
 [dependencies]

xlsx/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "ironcalc"
-version = "0.3.0"
+version = "0.5.0"
 authors = ["Nicolás Hatcher <nicolas@theuniverse.today>"]
 edition = "2021"
 homepage = "https://www.ironcalc.com"
@@ -20,7 +20,7 @@ thiserror = "1.0"
 # Uses `../base` when used locally, and uses
 # the inicated version from crates.io when published.
 # https://doc.rust-lang.org/cargo/reference/specifying-dependencies.html#multiple-locations
-ironcalc_base = { path = "../base", version = "0.3" }
+ironcalc_base = { path = "../base", version = "0.5" }
 itertools = "0.12"
 chrono = "0.4"
 bitcode = "0.6.0"

xlsx/src/lib.rs

@@ -9,11 +9,9 @@
 //!
 //! ```toml
 //! [dependencies]
-//! ironcalc = { git = "https://github.com/ironcalc/IronCalc" }
+//! ironcalc = { git = "https://github.com/ironcalc/IronCalc", tag = "v0.5.0" }
 //! ```
 //!
-//! <small> until version 0.5.0 you should use the git dependencies as stated </small>
-//!
 //! A simple example with some numbers, a new sheet and a formula:
 //!
 //!