@productcloudos/editor 1.0.5 → 1.0.6

package/dist/pc-editor.esm.js

@@ -7737,6 +7737,9 @@ class TableObject extends BaseEmbeddedObject {
                 result.mergedCell.markReflowDirty();
             }
             this.clearSelection();
+            // Focus the anchor (top-left) cell of the merged range
+            const normalized = TableCellMerger.normalizeRange(mergeRange);
+            this.focusCell(normalized.start.row, normalized.start.col);
             this.emit('cells-merged', { range: mergeRange });
             this.emit('content-changed', {});
         }
@@ -14293,7 +14296,8 @@ class CanvasManager extends EventEmitter {
             const pageIndex = this.document.pages.findIndex(p => p.id === pageId);
             // Get the slice for this page (for multi-page tables)
             const slice = table.getRenderedSlice(pageIndex);
-            const tablePosition = slice?.position || table.renderedPosition;
+            const tablePosition = slice?.position ||
+                (table.renderedPageIndex === pageIndex ? table.renderedPosition : null);
             const sliceHeight = slice?.height || table.height;
             // Check if point is within the table slice on this page
             const isInsideTable = tablePosition &&
@@ -14326,6 +14330,7 @@ class CanvasManager extends EventEmitter {
                             end: cellAddr
                         });
                         this.render();
+                        this.emit('table-cell-selection-changed', { table });
                         e.preventDefault();
                         return;
                     }
@@ -14605,7 +14610,8 @@ class CanvasManager extends EventEmitter {
             const currentPageIndex = this.document.pages.findIndex(p => p.id === pageId);
             // Get the slice for the current page (for multi-page tables)
             const slice = table.getRenderedSlice(currentPageIndex);
-            const tablePosition = slice?.position || table.renderedPosition;
+            const tablePosition = slice?.position ||
+                (table.renderedPageIndex === currentPageIndex ? table.renderedPosition : null);
             const sliceHeight = slice?.height || table.height;
             if (tablePosition) {
                 // Check if point is within the table slice on this page
@@ -14635,6 +14641,7 @@ class CanvasManager extends EventEmitter {
                             end: cellAddr
                         });
                         this.render();
+                        this.emit('table-cell-selection-changed', { table });
                     }
                 }
             }
@@ -15178,40 +15185,46 @@ class CanvasManager extends EventEmitter {
                     canvas.style.cursor = 'move';
                     return;
                 }
-                // Show text cursor for text boxes
-                if (object instanceof TextBoxObject) {
-                    canvas.style.cursor = 'text';
-                    return;
+                // Show text cursor for objects in edit mode, arrow otherwise
+                if (object instanceof TextBoxObject && this.editingTextBox === object) {
+                    canvas.style.cursor = CanvasManager.TEXT_CURSOR;
+                }
+                else if (object instanceof TableObject && this._focusedControl === object) {
+                    canvas.style.cursor = CanvasManager.TEXT_CURSOR;
                 }
+                else {
+                    canvas.style.cursor = 'default';
+                }
+                return;
             }
         }
         // Check for table cells (show text cursor)
         const tableCellHit = hitTestManager.queryByType(pageIndex, point, 'table-cell');
         if (tableCellHit && tableCellHit.data.type === 'table-cell') {
-            canvas.style.cursor = 'text';
+            canvas.style.cursor = CanvasManager.TEXT_CURSOR;
             return;
         }
         // Check for text regions (body, header, footer - show text cursor)
         const textRegionHit = hitTestManager.queryByType(pageIndex, point, 'text-region');
         if (textRegionHit && textRegionHit.data.type === 'text-region') {
-            canvas.style.cursor = 'text';
+            canvas.style.cursor = CanvasManager.TEXT_CURSOR;
             return;
         }
         // Also check if point is within any editable region (body, header, footer)
         // This catches cases where text region hit targets may not cover empty space
         const bodyRegion = this.regionManager.getBodyRegion();
         if (bodyRegion && bodyRegion.containsPointInRegion(point, pageIndex)) {
-            canvas.style.cursor = 'text';
+            canvas.style.cursor = CanvasManager.TEXT_CURSOR;
             return;
         }
         const headerRegion = this.regionManager.getHeaderRegion();
         if (headerRegion && headerRegion.containsPointInRegion(point, pageIndex)) {
-            canvas.style.cursor = 'text';
+            canvas.style.cursor = CanvasManager.TEXT_CURSOR;
             return;
         }
         const footerRegion = this.regionManager.getFooterRegion();
         if (footerRegion && footerRegion.containsPointInRegion(point, pageIndex)) {
-            canvas.style.cursor = 'text';
+            canvas.style.cursor = CanvasManager.TEXT_CURSOR;
             return;
         }
         canvas.style.cursor = 'default';
@@ -15229,7 +15242,8 @@ class CanvasManager extends EventEmitter {
             const { table, dividerType, index } = target.data;
             // Get the table position from slice info
             const slice = table.getRenderedSlice(pageIndex);
-            const tablePosition = slice?.position || table.renderedPosition;
+            const tablePosition = slice?.position ||
+                (table.renderedPageIndex === pageIndex ? table.renderedPosition : null);
             if (tablePosition) {
                 // Calculate the divider position based on type and index
                 let position;
@@ -15957,7 +15971,9 @@ class CanvasManager extends EventEmitter {
                 if (obj instanceof TableObject) {
                     // For multi-page tables, check if this page has a rendered slice
                     const slice = obj.getRenderedSlice(pageIndex);
-                    const tablePosition = slice?.position || obj.renderedPosition;
+                    // Only use renderedPosition if the table was actually rendered on this page
+                    const tablePosition = slice?.position ||
+                        (obj.renderedPageIndex === pageIndex ? obj.renderedPosition : null);
                     if (tablePosition) {
                         // Check if point is inside the table slice on this page
                         const sliceHeight = slice?.height || obj.height;
@@ -16201,6 +16217,10 @@ class CanvasManager extends EventEmitter {
 }
 CanvasManager.CELL_SELECTION_THRESHOLD = 5; // Minimum pixels to drag before cell selection starts
 CanvasManager.RELATIVE_DRAG_THRESHOLD = 3; // Minimum pixels to drag before moving starts
+// Custom text cursor as a black I-beam SVG data URI.
+// The native 'text' cursor can render as white on Windows browsers,
+// making it invisible over the white canvas background.
+CanvasManager.TEXT_CURSOR = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M5 1h2v1h2V1h2v2h-2v6h2v2h-2v6h2v2h-2v-1H7v1H5v-2h2v-6H5V9h2V3H5z' fill='%23000'/%3E%3C/svg%3E\") 8 10, text";
 
 /**
  * DataBinder handles binding data to documents.
@@ -21489,6 +21509,10 @@ class PCEditor extends EventEmitter {
         this.canvasManager.on('tablecell-cursor-changed', (data) => {
             this.emit('tablecell-cursor-changed', data);
         });
+        // Forward table cell selection changes (multi-cell drag/shift-click)
+        this.canvasManager.on('table-cell-selection-changed', (data) => {
+            this.emit('table-cell-selection-changed', data);
+        });
         this.canvasManager.on('repeating-section-clicked', (data) => {
             // Repeating section clicked - update selection state
             if (data.section && data.section.id) {
@@ -23458,6 +23482,39 @@ class PCEditor extends EventEmitter {
         table.removeColumn(colIndex);
         this.canvasManager.render();
     }
+    /**
+     * Merge selected cells in a table.
+     * Uses the table's current cell selection range.
+     * @param table The table containing the cells to merge
+     * @returns true if cells were merged successfully
+     */
+    tableMergeCells(table) {
+        Logger.log('[pc-editor] tableMergeCells');
+        if (!this._isReady)
+            return false;
+        const result = table.mergeCells();
+        if (result.success) {
+            this.canvasManager.render();
+        }
+        return result.success;
+    }
+    /**
+     * Split a merged cell back into individual cells.
+     * @param table The table containing the merged cell
+     * @param row Row index of the merged cell
+     * @param col Column index of the merged cell
+     * @returns true if the cell was split successfully
+     */
+    tableSplitCell(table, row, col) {
+        Logger.log('[pc-editor] tableSplitCell', row, col);
+        if (!this._isReady)
+            return false;
+        const result = table.splitCell(row, col);
+        if (result.success) {
+            this.canvasManager.render();
+        }
+        return result.success;
+    }
     /**
      * Begin a compound operation. Groups multiple mutations into a single undo entry.
      * Call endCompoundOperation after making changes.
@@ -26500,9 +26557,15 @@ class FormattingPane extends BasePane {
                 this.bulletListBtn?.classList.toggle('pc-pane-button--active', listFormatting.listType === 'bullet');
                 this.numberedListBtn?.classList.toggle('pc-pane-button--active', listFormatting.listType === 'number');
             }
+            else {
+                this.bulletListBtn?.classList.remove('pc-pane-button--active');
+                this.numberedListBtn?.classList.remove('pc-pane-button--active');
+            }
         }
         catch {
             // No text editing active
+            this.bulletListBtn?.classList.remove('pc-pane-button--active');
+            this.numberedListBtn?.classList.remove('pc-pane-button--active');
         }
     }
     getSelection() {
@@ -27817,8 +27880,9 @@ class TablePane extends BasePane {
         // Default controls
         this.defaultPaddingInput = null;
         this.defaultBorderColorInput = null;
-        // Row loop controls
-        this.loopFieldInput = null;
+        // Merge/split buttons
+        this.mergeCellsBtn = null;
+        this.splitCellBtn = null;
         // Cell formatting controls
         this.cellBgColorInput = null;
         this.borderTopCheck = null;
@@ -27838,12 +27902,12 @@ class TablePane extends BasePane {
             // Listen for selection/focus changes
             const updateHandler = () => this.updateFromFocusedTable();
             this.editor.on('selection-change', updateHandler);
-            this.editor.on('table-cell-focus', updateHandler);
-            this.editor.on('table-cell-selection', updateHandler);
+            this.editor.on('tablecell-cursor-changed', updateHandler);
+            this.editor.on('table-cell-selection-changed', updateHandler);
             this.eventCleanup.push(() => {
                 this.editor?.off('selection-change', updateHandler);
-                this.editor?.off('table-cell-focus', updateHandler);
-                this.editor?.off('table-cell-selection', updateHandler);
+                this.editor?.off('tablecell-cursor-changed', updateHandler);
+                this.editor?.off('table-cell-selection-changed', updateHandler);
             });
             // Initial update
             this.updateFromFocusedTable();
@@ -27896,16 +27960,6 @@ class TablePane extends BasePane {
         this.addButtonListener(applyHeadersBtn, () => this.applyHeaders());
         headersSection.appendChild(applyHeadersBtn);
         container.appendChild(headersSection);
-        // Row Loop section
-        const loopSection = this.createSection('Row Loop');
-        this.loopFieldInput = this.createTextInput({ placeholder: 'items' });
-        loopSection.appendChild(this.createFormGroup('Array Field', this.loopFieldInput, {
-            hint: 'Creates a loop on the currently focused row'
-        }));
-        const createLoopBtn = this.createButton('Create Row Loop');
-        this.addButtonListener(createLoopBtn, () => this.createRowLoop());
-        loopSection.appendChild(createLoopBtn);
-        container.appendChild(loopSection);
         // Defaults section
         const defaultsSection = this.createSection('Defaults');
         const defaultsRow = this.createRow();
@@ -27922,6 +27976,17 @@ class TablePane extends BasePane {
         const cellSection = this.createSection('Cell Formatting');
         this.cellSelectionDisplay = this.createHint('No cell selected');
         cellSection.appendChild(this.cellSelectionDisplay);
+        // Merge/Split buttons
+        const mergeBtnGroup = this.createButtonGroup();
+        this.mergeCellsBtn = this.createButton('Merge Cells');
+        this.mergeCellsBtn.disabled = true;
+        this.splitCellBtn = this.createButton('Split Cell');
+        this.splitCellBtn.disabled = true;
+        this.addButtonListener(this.mergeCellsBtn, () => this.doMergeCells());
+        this.addButtonListener(this.splitCellBtn, () => this.doSplitCell());
+        mergeBtnGroup.appendChild(this.mergeCellsBtn);
+        mergeBtnGroup.appendChild(this.splitCellBtn);
+        cellSection.appendChild(mergeBtnGroup);
         // Background
         this.cellBgColorInput = this.createColorInput('#ffffff');
         cellSection.appendChild(this.createFormGroup('Background', this.cellBgColorInput));
@@ -28038,6 +28103,15 @@ class TablePane extends BasePane {
             return;
         const focusedCell = table.focusedCell;
         const selectedRange = table.selectedRange;
+        // Update merge/split button states
+        if (this.mergeCellsBtn) {
+            const canMerge = selectedRange ? table.canMergeRange(selectedRange).canMerge : false;
+            this.mergeCellsBtn.disabled = !canMerge;
+        }
+        if (this.splitCellBtn) {
+            const canSplit = focusedCell ? table.canSplitCell(focusedCell.row, focusedCell.col).canSplit : false;
+            this.splitCellBtn.disabled = !canSplit;
+        }
         if (selectedRange) {
             const count = (selectedRange.end.row - selectedRange.start.row + 1) *
                 (selectedRange.end.col - selectedRange.start.col + 1);
@@ -28195,20 +28269,20 @@ class TablePane extends BasePane {
     hasTable() {
         return this.currentTable !== null;
     }
-    createRowLoop() {
-        if (!this.editor || !this.currentTable) {
-            this.onApplyCallback?.(false, new Error('No table focused'));
+    doMergeCells() {
+        if (!this.editor || !this.currentTable)
             return;
-        }
-        const fieldPath = this.loopFieldInput?.value.trim() || '';
-        if (!fieldPath) {
-            this.onApplyCallback?.(false, new Error('Array field path is required'));
+        this.editor.tableMergeCells(this.currentTable);
+        this.updateFromFocusedTable();
+    }
+    doSplitCell() {
+        if (!this.editor || !this.currentTable)
             return;
-        }
-        // Uses the unified createRepeatingSection API which detects
-        // that a table is focused and creates a row loop on the focused row
-        this.editor.createRepeatingSection(0, 0, fieldPath);
-        this.onApplyCallback?.(true);
+        const focused = this.currentTable.focusedCell;
+        if (!focused)
+            return;
+        this.editor.tableSplitCell(this.currentTable, focused.row, focused.col);
+        this.updateFromFocusedTable();
     }
     /**
      * Update the pane from current editor state.