socialcalc-ai 1.0.1 → 1.0.2

package/README.md

@@ -530,6 +530,17 @@ import {
 
 ---
 
+## 📦 Release Notes
+
+### v1.0.2
+- **Cell Edit Modal Fix**: Fixed cell click interceptor and mouse delegates so clicking any cell reliably triggers the `CellEditModal` bottom sheet.
+- **Scroll Distortion Fix**: Resolved table border collapse and column misalignment when scrolling past multi-row (`rowspan`) and multi-column (`colspan`) blocks.
+- **Formula Support**: Enhanced modal editing to support formula values (`=SUM(...)`) seamlessly alongside raw numbers, text, and HTML formatting.
+- **Strict Column Sizing**: Enforced CSS pixel widths and `box-sizing: border-box` containment across `<colgroup>` and sizing rows to preserve layout integrity.
+- **Safety Guards**: Added null guards and try/catch protection across SocialCalc workbook control callbacks.
+
+---
+
 ## 📜 License & Acknowledgments
 
 - **Original SocialCalc Engine**: Created by Dan Bricklin (co-creator of VisiCalc) and Socialtext.

package/core/core.js

@@ -5186,6 +5186,7 @@
         if (context.showRCHeaders) {
             newcol = document.createElement("col");
             newcol.width = context.rownamewidth;
+            newcol.style.width = context.rownamewidth + "px";
             result.appendChild(newcol);
         }
 
@@ -5197,12 +5198,16 @@
             ) {
                 newcol = document.createElement("col");
                 t = context.colwidth[colnum];
-                if (t) newcol.width = t;
+                if (t) {
+                    newcol.width = t;
+                    newcol.style.width = t + "px";
+                }
                 result.appendChild(newcol);
             }
             if (colpane < context.colpanes.length - 1) {
                 newcol = document.createElement("col");
                 newcol.width = context.defaultpanedividerwidth;
+                newcol.style.width = context.defaultpanedividerwidth + "px";
                 result.appendChild(newcol);
             }
         }
@@ -5218,6 +5223,8 @@
         if (context.showRCHeaders) {
             newcell = document.createElement("td");
             newcell.style.width = context.rownamewidth + "px";
+            newcell.style.minWidth = context.rownamewidth + "px";
+            newcell.style.maxWidth = context.rownamewidth + "px";
             newcell.height = "1";
             result.appendChild(newcell);
         }
@@ -5230,13 +5237,21 @@
             ) {
                 newcell = document.createElement("td");
                 t = context.colwidth[colnum];
-                if (t) newcell.width = t;
+                if (t) {
+                    newcell.width = t;
+                    newcell.style.width = t + "px";
+                    newcell.style.minWidth = t + "px";
+                    newcell.style.maxWidth = t + "px";
+                }
                 newcell.height = "1";
                 result.appendChild(newcell);
             }
             if (colpane < context.colpanes.length - 1) {
                 newcell = document.createElement("td");
                 newcell.width = context.defaultpanedividerwidth;
+                newcell.style.width = context.defaultpanedividerwidth + "px";
+                newcell.style.minWidth = context.defaultpanedividerwidth + "px";
+                newcell.style.maxWidth = context.defaultpanedividerwidth + "px";
                 newcell.height = "1";
                 result.appendChild(newcell);
             }
@@ -5289,8 +5304,8 @@
                 if (rownum === firstVisibleRow && colnum === firstVisibleCol) {
                     // This is the visible start of the scrolled spanned cell in this pane!
                     isSpanContinuation = true;
-                    spanColSpan = Math.min(spanEndCol, panecollimits ? panecollimits.last : spanEndCol) - firstVisibleCol + 1;
-                    spanRowSpan = Math.min(spanEndRow, panerowlimits ? panerowlimits.last : spanEndRow) - firstVisibleRow + 1;
+                    spanColSpan = Math.max(1, Math.min(spanEndCol, panecollimits ? panecollimits.last : spanEndCol) - firstVisibleCol + 1);
+                    spanRowSpan = Math.max(1, Math.min(spanEndRow, panerowlimits ? panerowlimits.last : spanEndRow) - firstVisibleRow + 1);
                     cell = originCell;
                 } else {
                     // Covered by the visible span in this pane -- skip
@@ -5416,6 +5431,9 @@
             } else stylestr += "text-align:left;";
         }
 
+        var activeColSpan = isSpanContinuation ? spanColSpan : (result.colSpan || cell.colspan || 1);
+        var activeRowSpan = isSpanContinuation ? spanRowSpan : (result.rowSpan || cell.rowspan || 1);
+
         num = cell.bt;
         if (num && (!isSpanContinuation || (originCR && rownum === originCR.row))) {
             stylestr += "border-top:" + sheetobj.borderstyles[num] + ";";
@@ -5428,12 +5446,12 @@
             if (
                 context.CellInPane(
                     rownum,
-                    colnum + (isSpanContinuation ? spanColSpan : (cell.colspan || 1)),
+                    colnum + activeColSpan,
                     rowpane,
                     colpane
                 )
             )
-                t = SocialCalc.crToCoord(colnum + (isSpanContinuation ? spanColSpan : (cell.colspan || 1)), rownum);
+                t = SocialCalc.crToCoord(colnum + activeColSpan, rownum);
             else t = "nomatch";
             if (context.cellskip[t]) t = context.cellskip[t];
             if (!sheetobj.cells[t] || !sheetobj.cells[t].bl)
@@ -5446,13 +5464,13 @@
         } else if (context.showGrid) {
             if (
                 context.CellInPane(
-                    rownum + (isSpanContinuation ? spanRowSpan : (cell.rowspan || 1)),
+                    rownum + activeRowSpan,
                     colnum,
                     rowpane,
                     colpane
                 )
             )
-                t = SocialCalc.crToCoord(colnum, rownum + (isSpanContinuation ? spanRowSpan : (cell.rowspan || 1)));
+                t = SocialCalc.crToCoord(colnum, rownum + activeRowSpan);
             else t = "nomatch";
             if (context.cellskip[t]) t = context.cellskip[t];
             if (!sheetobj.cells[t] || !sheetobj.cells[t].bt)
@@ -5483,6 +5501,8 @@
         }
 
         result.style.cssText = stylestr;
+        result.style.boxSizing = "border-box";
+        result.style.overflow = "hidden";
 
         //!!!!!!!!!
         // NOTE: csss and cssc are not supported yet.

package/core/spreadsheet-control.js

@@ -7014,8 +7014,13 @@ SocialCalc.SpreadsheetCmdTable = {
   // this is for checkmark toggling
   SocialCalc.Callbacks.ToggleCell = function (cellname) {
     var control = SocialCalc.GetCurrentWorkBookControl();
+    if (!control || !control.currentSheetButton || !control.workbook || !control.workbook.sheetArr) {
+      return;
+    }
     var sheetid = control.currentSheetButton.id;
+    if (!control.workbook.sheetArr[sheetid]) return;
     var sheetobj = control.workbook.sheetArr[sheetid].sheet;
+    if (!sheetobj || !sheetobj.cells) return;
     var cell = sheetobj.cells[cellname];
     var sheetname = sheetobj.sheetname;
 

package/core/table-editor.js

@@ -1582,22 +1582,33 @@
             mouseinfo.registeredElements.push({ element: element, editor: editor });
         }
 
+        if (!SocialCalc.ProcessEditorMouseDownHandler) {
+            SocialCalc.ProcessEditorMouseDownHandler = function (e) {
+                return SocialCalc.ProcessEditorMouseDown(e);
+            };
+        }
+        if (!SocialCalc.ProcessEditorDblClickHandler) {
+            SocialCalc.ProcessEditorDblClickHandler = function (e) {
+                return SocialCalc.ProcessEditorDblClick(e);
+            };
+        }
+
         if (element.addEventListener) {
             // DOM Level 2 -- Firefox, et al
             element.addEventListener(
                 "mousedown",
-                SocialCalc.ProcessEditorMouseDown,
+                SocialCalc.ProcessEditorMouseDownHandler,
                 false
             );
             element.addEventListener(
                 "dblclick",
-                SocialCalc.ProcessEditorDblClick,
+                SocialCalc.ProcessEditorDblClickHandler,
                 false
             );
         } else if (element.attachEvent) {
             // IE 5+
-            element.attachEvent("onmousedown", SocialCalc.ProcessEditorMouseDown);
-            element.attachEvent("ondblclick", SocialCalc.ProcessEditorDblClick);
+            element.attachEvent("onmousedown", SocialCalc.ProcessEditorMouseDownHandler);
+            element.attachEvent("ondblclick", SocialCalc.ProcessEditorDblClickHandler);
         } else {
             // don't handle this
             throw "Browser not supported";
@@ -1629,21 +1640,21 @@
                 // DOM Level 2
                 oldelement.removeEventListener(
                     "mousedown",
-                    SocialCalc.ProcessEditorMouseDown,
+                    SocialCalc.ProcessEditorMouseDownHandler || SocialCalc.ProcessEditorMouseDown,
                     false
                 );
                 oldelement.removeEventListener(
                     "dblclick",
-                    SocialCalc.ProcessEditorDblClick,
+                    SocialCalc.ProcessEditorDblClickHandler || SocialCalc.ProcessEditorDblClick,
                     false
                 );
             } else if (oldelement.detachEvent) {
                 // IE
                 oldelement.detachEvent(
                     "onmousedown",
-                    SocialCalc.ProcessEditorMouseDown
+                    SocialCalc.ProcessEditorMouseDownHandler || SocialCalc.ProcessEditorMouseDown
                 );
-                oldelement.detachEvent("ondblclick", SocialCalc.ProcessEditorDblClick);
+                oldelement.detachEvent("ondblclick", SocialCalc.ProcessEditorDblClickHandler || SocialCalc.ProcessEditorDblClick);
             }
             mouseinfo.registeredElements.splice(i, 1);
         }
@@ -3772,18 +3783,6 @@
             return;
         }
 
-        if ((vamount == 1 || vamount == -1) && hamount == 0) {
-            // special case quick scrolls
-            if (vamount == 1) {
-                editor.ScrollTableUpOneRow();
-            } else {
-                editor.ScrollTableDownOneRow();
-            }
-            if (editor.ecell) editor.SetECellHeaders("selected");
-            editor.SchedulePositionCalculations();
-            return;
-        }
-
         // Do a gross move and render
 
         if (vamount != 0 || hamount != 0) {
@@ -3874,215 +3873,13 @@
     };
 
     SocialCalc.ScrollTableUpOneRow = function (editor) {
-        var toprow,
-            rowpane,
-            rownum,
-            colnum,
-            colpane,
-            cell,
-            oldrownum,
-            maxspan,
-            newbottomrow,
-            newrow,
-            oldchild,
-            bottomrownum;
-        var rowneedsrefresh = {};
-
-        var context = editor.context;
-        var sheetobj = context.sheetobj;
-        var tableobj = editor.fullgrid;
-
-        var tbodyobj;
-
-        tbodyobj = tableobj.lastChild;
-
-        toprow = context.showRCHeaders ? 2 : 1;
-        for (rowpane = 0; rowpane < context.rowpanes.length - 1; rowpane++) {
-            toprow +=
-                context.rowpanes[rowpane].last - context.rowpanes[rowpane].first + 2; // skip pane and spacing row
-        }
-
-        tbodyobj.removeChild(tbodyobj.childNodes[toprow]);
-
-        context.rowpanes[rowpane].first++;
-        context.rowpanes[rowpane].last++;
-        editor.FitToEditTable();
-        context.CalculateColWidthData(); // Just in case, since normally done in RenderSheet
-
-        newbottomrow = context.RenderRow(context.rowpanes[rowpane].last, rowpane);
-        tbodyobj.appendChild(newbottomrow);
-
-        // if scrolled off a row with starting rowspans, replace rows for the largest rowspan
-
-        var maxrowspan = 1;
-        oldrownum = context.rowpanes[rowpane].first - 1;
-
-        for (colpane = 0; colpane < context.colpanes.length; colpane++) {
-            for (
-                colnum = context.colpanes[colpane].first;
-                colnum <= context.colpanes[colpane].last;
-                colnum++
-            ) {
-                var coord = SocialCalc.crToCoord(colnum, oldrownum);
-                if (context.cellskip[coord]) continue;
-                cell = sheetobj.cells[coord];
-                if (cell && cell.rowspan > maxrowspan) maxrowspan = cell.rowspan;
-            }
-        }
-
-        if (maxrowspan > 1) {
-            for (rownum = 1; rownum < maxrowspan; rownum++) {
-                if (rownum + oldrownum >= context.rowpanes[rowpane].last) break;
-                newrow = context.RenderRow(rownum + oldrownum, rowpane);
-                oldchild = tbodyobj.childNodes[toprow + rownum - 1];
-                tbodyobj.replaceChild(newrow, oldchild);
-            }
-        }
-
-        // if added a row that includes rowspans from above, update the size of those to include new row
-
-        bottomrownum = context.rowpanes[rowpane].last;
-
-        for (colpane = 0; colpane < context.colpanes.length; colpane++) {
-            for (
-                colnum = context.colpanes[colpane].first;
-                colnum <= context.colpanes[colpane].last;
-                colnum++
-            ) {
-                coord = context.cellskip[SocialCalc.crToCoord(colnum, bottomrownum)];
-                if (!coord) continue; // only look at spanned cells
-                rownum = context.coordToCR[coord].row - 0;
-                if (
-                    rownum == context.rowpanes[rowpane].last ||
-                    rownum < context.rowpanes[rowpane].first
-                )
-                    continue; // this row (colspan) or starts above pane
-                cell = sheetobj.cells[coord];
-                if (cell && cell.rowspan > 1) rowneedsrefresh[rownum] = true; // remember row num to update
-            }
-        }
-
-        for (rownum in rowneedsrefresh) {
-            newrow = context.RenderRow(rownum, rowpane);
-            oldchild =
-                tbodyobj.childNodes[
-                toprow + (rownum - context.rowpanes[rowpane].first)
-                ];
-            tbodyobj.replaceChild(newrow, oldchild);
-        }
-
-        return tableobj;
+        SocialCalc.ScrollRelativeBoth(editor, 1, 0);
+        return editor.fullgrid;
     };
 
     SocialCalc.ScrollTableDownOneRow = function (editor) {
-        var toprow,
-            rowpane,
-            rownum,
-            colnum,
-            colpane,
-            cell,
-            newrownum,
-            maxspan,
-            newbottomrow,
-            newrow,
-            oldchild,
-            bottomrownum,
-            maxrowspan,
-            coord;
-        var rowneedsrefresh = {};
-
-        var context = editor.context;
-        var sheetobj = context.sheetobj;
-        var tableobj = editor.fullgrid;
-
-        var tbodyobj;
-
-        tbodyobj = tableobj.lastChild;
-
-        toprow = context.showRCHeaders ? 2 : 1;
-        for (rowpane = 0; rowpane < context.rowpanes.length - 1; rowpane++) {
-            toprow +=
-                context.rowpanes[rowpane].last - context.rowpanes[rowpane].first + 2; // skip pane and spacing row
-        }
-
-        tbodyobj.removeChild(
-            tbodyobj.childNodes[
-            toprow +
-            (context.rowpanes[rowpane].last - context.rowpanes[rowpane].first)
-            ]
-        );
-
-        context.rowpanes[rowpane].first--;
-        context.rowpanes[rowpane].last--;
-        editor.FitToEditTable();
-        context.CalculateColWidthData(); // Just in case, since normally done in RenderSheet
-
-        newrow = context.RenderRow(context.rowpanes[rowpane].first, rowpane);
-        tbodyobj.insertBefore(newrow, tbodyobj.childNodes[toprow]);
-
-        // if inserted a row with starting rowspans, replace rows for the largest rowspan
-
-        maxrowspan = 1;
-        newrownum = context.rowpanes[rowpane].first;
-
-        for (colpane = 0; colpane < context.colpanes.length; colpane++) {
-            for (
-                colnum = context.colpanes[colpane].first;
-                colnum <= context.colpanes[colpane].last;
-                colnum++
-            ) {
-                coord = SocialCalc.crToCoord(colnum, newrownum);
-                if (context.cellskip[coord]) continue;
-                cell = sheetobj.cells[coord];
-                if (cell && cell.rowspan > maxrowspan) maxrowspan = cell.rowspan;
-            }
-        }
-
-        if (maxrowspan > 1) {
-            for (rownum = 1; rownum < maxrowspan; rownum++) {
-                if (rownum + newrownum > context.rowpanes[rowpane].last) break;
-                newrow = context.RenderRow(rownum + newrownum, rowpane);
-                oldchild = tbodyobj.childNodes[toprow + rownum];
-                tbodyobj.replaceChild(newrow, oldchild);
-            }
-        }
-
-        // if last row now includes rowspans or rowspans from above, update the size of those to remove deleted row
-
-        bottomrownum = context.rowpanes[rowpane].last;
-
-        for (colpane = 0; colpane < context.colpanes.length; colpane++) {
-            for (
-                colnum = context.colpanes[colpane].first;
-                colnum <= context.colpanes[colpane].last;
-                colnum++
-            ) {
-                coord = SocialCalc.crToCoord(colnum, bottomrownum);
-                cell = sheetobj.cells[coord];
-                if (cell && cell.rowspan > 1) {
-                    rowneedsrefresh[bottomrownum] = true; // need to update this row
-                    continue;
-                }
-                coord = context.cellskip[SocialCalc.crToCoord(colnum, bottomrownum)];
-                if (!coord) continue; // only look at spanned cells
-                rownum = context.coordToCR[coord].row - 0;
-                if (rownum == bottomrownum || rownum < context.rowpanes[rowpane].first)
-                    continue; // this row (colspan) or starts above pane
-                cell = sheetobj.cells[coord];
-                if (cell && cell.rowspan > 1) rowneedsrefresh[rownum] = true; // remember row num to update
-            }
-        }
-
-        for (rownum in rowneedsrefresh) {
-            newrow = context.RenderRow(rownum, rowpane);
-            oldchild =
-                tbodyobj.childNodes[
-                toprow + (rownum - context.rowpanes[rowpane].first)
-                ];
-            tbodyobj.replaceChild(newrow, oldchild);
-        }
-
-        return tableobj;
+        SocialCalc.ScrollRelativeBoth(editor, -1, 0);
+        return editor.fullgrid;
     };
 
     // *************************************

package/modules/init.js

@@ -8,9 +8,10 @@ if (typeof window !== "undefined" && window.SocialCalc) {
   SocialCalc = global.SocialCalc;
 } else {
   console.error("SocialCalc not found in global scope");
-  SocialCalc = {}; // Fallback to prevent errors
 }
 
+import { setupMouseListener } from "./listeners.js";
+
 export function initializeApp(data) {
   /* Initializes the spreadsheet */
   // Try multiple candidate IDs so the renderer can namespace its elements
@@ -91,4 +92,5 @@ export function initializeApp(data) {
   }
 
   spreadsheet.DoOnResize();
+  setupMouseListener();
 }

package/modules/listeners.js

@@ -30,6 +30,7 @@ export function enableCellEditModal() {
   if (typeof window !== "undefined" && window.SocialCalc) {
     window.SocialCalc.isCellEditModalEnabled = () => true;
   }
+  setupMouseListener();
 }
 
 /**
@@ -57,6 +58,9 @@ export function toggleCellEditModal(show) {
   if (typeof window !== "undefined" && window.SocialCalc) {
     window.SocialCalc.isCellEditModalEnabled = () => _cellEditModalEnabled;
   }
+  if (_cellEditModalEnabled) {
+    setupMouseListener();
+  }
   return _cellEditModalEnabled;
 }
 
@@ -167,7 +171,15 @@ export function setupMouseListener() {
   if (typeof window !== "undefined" && window.SocialCalc) {
     SocialCalc = window.SocialCalc;
   }
-  if (!SocialCalc || !SocialCalc.EditorMouseInfo) return;
+  if (!SocialCalc || !SocialCalc.EditorMouseInfo) {
+    if (typeof window !== "undefined") {
+      setTimeout(setupMouseListener, 50);
+    }
+    return;
+  }
+
+  if (SocialCalc._customMouseListenerInstalled) return;
+  SocialCalc._customMouseListenerInstalled = true;
 
   const originalDblClick = SocialCalc.ProcessEditorDblClick;
 
@@ -292,7 +304,11 @@ export function setupMouseListener() {
 
     // Toggle Cell Callback
     if (SocialCalc.Callbacks && SocialCalc.Callbacks.ToggleCell) {
-      SocialCalc.Callbacks.ToggleCell(result.coord);
+      try {
+        SocialCalc.Callbacks.ToggleCell(result.coord);
+      } catch (err) {
+        // Ignore toggle cell errors in custom environments
+      }
     }
 
     // Move ECell (Updates Selection)
@@ -367,7 +383,7 @@ export function setupMouseListener() {
   const originalKeyPress = SocialCalc.ProcessKeyPress;
 
   SocialCalc.ProcessKeyDown = function (e) {
-    const isModalOpen = !!document.querySelector(".sc-cell-edit-backdrop");
+    const isModalOpen = !!document.querySelector(".sc-cell-modal-backdrop, .sc-cell-edit-backdrop, .sc-modal-container");
     const activeElement = document.activeElement;
     const isTypingInInput =
       activeElement &&
@@ -386,7 +402,7 @@ export function setupMouseListener() {
   };
 
   SocialCalc.ProcessKeyPress = function (e) {
-    const isModalOpen = !!document.querySelector(".sc-cell-edit-backdrop");
+    const isModalOpen = !!document.querySelector(".sc-cell-modal-backdrop, .sc-cell-edit-backdrop, .sc-modal-container");
     const activeElement = document.activeElement;
     const isTypingInInput =
       activeElement &&
@@ -416,8 +432,8 @@ function triggerCustomModal(editor) {
   if (!editor || !editor.ecell) return;
 
   const coord = editor.ecell.coord;
-  const sheet = editor.context.sheetobj;
-  const cell = sheet.GetAssuredCell(coord);
+  const sheet = editor.context ? editor.context.sheetobj : null;
+  const cell = sheet && sheet.GetAssuredCell ? sheet.GetAssuredCell(coord) : null;
 
   // Hide the native input box and cancel its timer
   if (editor.inputBox) {
@@ -442,25 +458,35 @@ function triggerCustomModal(editor) {
 
   // Determine initial text
   let initialText = "";
-  if (cell.datavalue !== undefined && cell.datavalue !== null) {
-    initialText = String(cell.datavalue);
-  } else if (cell.displaystring !== undefined && cell.displaystring !== null) {
-    initialText = String(cell.displaystring);
+  if (cell) {
+    if (cell.formula) {
+      initialText = "=" + cell.formula;
+    } else if (cell.datavalue !== undefined && cell.datavalue !== null) {
+      initialText = String(cell.datavalue);
+    } else if (cell.displaystring !== undefined && cell.displaystring !== null) {
+      initialText = String(cell.displaystring);
+    }
+  }
+  if (!initialText && SocialCalc && SocialCalc.GetCellContents && sheet) {
+    initialText = SocialCalc.GetCellContents(sheet, coord) || "";
   }
 
   // Callback when user confirms edit in Modal
   const handleOk = (newValue) => {
     let cmd = "";
-    const isNum = !isNaN(Number(newValue)) && newValue.trim() !== "";
-
-    if (isNum) {
-      cmd = `set ${coord} value n ${newValue}`;
+    if (typeof newValue === "string" && newValue.startsWith("=")) {
+      cmd = `set ${coord} formula ${newValue.slice(1)}`;
     } else {
-      const isHtml = /<[a-z][\s\S]*>/i.test(newValue);
-      if (isHtml) {
-        cmd = `set ${coord} text th ${newValue}\nset ${coord} textvalueformat text-html`;
+      const isNum = !isNaN(Number(newValue)) && newValue.trim() !== "";
+      if (isNum) {
+        cmd = `set ${coord} value n ${newValue}`;
       } else {
-        cmd = `set ${coord} text t ${newValue}`;
+        const isHtml = /<[a-z][\s\S]*>/i.test(newValue);
+        if (isHtml) {
+          cmd = `set ${coord} text th ${newValue}\nset ${coord} textvalueformat text-html`;
+        } else {
+          cmd = `set ${coord} text t ${newValue}`;
+        }
       }
     }
 
@@ -529,3 +555,8 @@ export function setupCellChangeListener(callback) {
   };
 }
 
+// Auto-initialize mouse listener if in browser environment
+if (typeof window !== "undefined") {
+  setupMouseListener();
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "socialcalc-ai",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Modernized, modular spreadsheet calculation engine and React/Ionic UI suite with AI formula and template capabilities.",
   "type": "module",
   "main": "index.js",