@productcloudos/editor 1.0.1 → 1.0.3

package/dist/pc-editor.esm.js

@@ -2543,11 +2543,14 @@ class TextLayout {
             const emptyLine = this.createEmptyLine(startIndex, formatting, alignment);
             // Add list marker to empty line if it's a list item
             if (listFormatting) {
+                // Get formatting for the empty line (inherited from previous position)
+                const markerFormatting = formatting.getFormattingAt(startIndex > 0 ? startIndex - 1 : startIndex);
                 emptyLine.listMarker = {
                     text: markerText,
                     width: markerWidth,
                     indent: listIndent,
-                    isFirstLineOfListItem: true
+                    isFirstLineOfListItem: true,
+                    formatting: markerFormatting
                 };
             }
             lines.push(emptyLine);
@@ -3836,6 +3839,7 @@ class ImageObject extends BaseEmbeddedObject {
         const imgHeight = this._image.naturalHeight;
         let sx = 0, sy = 0, sw = imgWidth, sh = imgHeight;
         let dx = 0, dy = 0, dw = width, dh = height;
+        let needsClipping = false;
         switch (this._fit) {
             case 'fill':
                 // Stretch to fill
@@ -3859,18 +3863,31 @@ class ImageObject extends BaseEmbeddedObject {
                 break;
             }
             case 'none':
-                // Original size, centered
+                // Original size, centered - clip to box bounds if image is larger
                 dw = imgWidth;
                 dh = imgHeight;
                 dx = (width - imgWidth) / 2;
                 dy = (height - imgHeight) / 2;
+                // Need clipping if image extends beyond bounds
+                if (imgWidth > width || imgHeight > height) {
+                    needsClipping = true;
+                }
                 break;
             case 'tile':
                 // Tile the image to fill bounds
                 this.drawTiledImage(ctx, width, height);
                 return; // Early return, tiling handles its own drawing
         }
+        if (needsClipping) {
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(0, 0, width, height);
+            ctx.clip();
+        }
         ctx.drawImage(this._image, sx, sy, sw, sh, dx, dy, dw, dh);
+        if (needsClipping) {
+            ctx.restore();
+        }
     }
     drawTiledImage(ctx, width, height) {
         if (!this._image)
@@ -6386,8 +6403,9 @@ class TableObject extends BaseEmbeddedObject {
             }
             x += width;
         }
-        if (targetCol === -1)
+        if (targetCol === -1) {
             return null;
+        }
         // Calculate row positions
         let y = 0;
         let targetRow = -1;
@@ -6525,6 +6543,18 @@ class TableObject extends BaseEmbeddedObject {
         for (const row of this._rows) {
             row.removeCell(colIndex);
         }
+        // Clear selection if it references the deleted column or is now out of bounds
+        if (this._selectedRange) {
+            const { start, end } = this._selectedRange;
+            if (start.col >= this._columns.length || end.col >= this._columns.length ||
+                (colIndex >= start.col && colIndex <= end.col)) {
+                this._selectedRange = null;
+            }
+        }
+        // Clear focused cell if it references the deleted column or is now out of bounds
+        if (this._focusedCell && this._focusedCell.col >= this._columns.length) {
+            this._focusedCell = null;
+        }
         this._layoutDirty = true;
         this.updateCoveredCells();
         this.updateSizeFromLayout();
@@ -6583,6 +6613,18 @@ class TableObject extends BaseEmbeddedObject {
         const [removed] = this._rows.splice(rowIndex, 1);
         // Adjust row loop indices
         this.shiftRowLoopIndices(rowIndex, -1);
+        // Clear selection if it references the deleted row or is now out of bounds
+        if (this._selectedRange) {
+            const { start, end } = this._selectedRange;
+            if (start.row >= this._rows.length || end.row >= this._rows.length ||
+                (rowIndex >= start.row && rowIndex <= end.row)) {
+                this._selectedRange = null;
+            }
+        }
+        // Clear focused cell if it references the deleted row or is now out of bounds
+        if (this._focusedCell && this._focusedCell.row >= this._rows.length) {
+            this._focusedCell = null;
+        }
         this._layoutDirty = true;
         this.updateCoveredCells();
         this.updateSizeFromLayout();
@@ -6754,6 +6796,18 @@ class TableObject extends BaseEmbeddedObject {
     removeRowsInRange(startIndex, endIndex) {
         const count = endIndex - startIndex + 1;
         const removed = this._rows.splice(startIndex, count);
+        // Clear selection if it overlaps with removed rows or is now out of bounds
+        if (this._selectedRange) {
+            const { start, end } = this._selectedRange;
+            if (start.row >= this._rows.length || end.row >= this._rows.length ||
+                (start.row <= endIndex && end.row >= startIndex)) {
+                this._selectedRange = null;
+            }
+        }
+        // Clear focused cell if it's now out of bounds
+        if (this._focusedCell && this._focusedCell.row >= this._rows.length) {
+            this._focusedCell = null;
+        }
         this._layoutDirty = true;
         this.updateCoveredCells();
         return removed;
@@ -7177,8 +7231,74 @@ class TableObject extends BaseEmbeddedObject {
             }
             y += row.calculatedHeight;
         }
+        // Render cell range selection highlight for this slice
+        if (this._selectedRange) {
+            this.renderRangeSelectionForSlice(ctx, slice, pageLayout);
+        }
         // Note: Selection border is drawn by FlowingTextRenderer with correct slice height
     }
+    /**
+     * Render range selection highlight for a specific slice.
+     * Only renders the portion of the selection that's visible in this slice.
+     */
+    renderRangeSelectionForSlice(ctx, slice, pageLayout) {
+        if (!this._selectedRange)
+            return;
+        const { start, end } = this._selectedRange;
+        const columnPositions = this.getColumnPositions();
+        const columnWidths = this.getColumnWidths();
+        // Calculate X bounds (same for all slices)
+        const x1 = columnPositions[start.col];
+        const x2 = columnPositions[end.col] + columnWidths[end.col];
+        // Build a map of row index -> Y position in this slice's coordinate system
+        const rowYInSlice = new Map();
+        let y = 0;
+        // On continuation pages, header rows are at the top
+        if (slice.isContinuation && pageLayout.headerRowIndices.length > 0) {
+            for (const headerRowIdx of pageLayout.headerRowIndices) {
+                const row = this._rows[headerRowIdx];
+                if (row) {
+                    rowYInSlice.set(headerRowIdx, y);
+                    y += row.calculatedHeight;
+                }
+            }
+        }
+        // Data rows for this slice
+        for (let rowIdx = slice.startRow; rowIdx < slice.endRow; rowIdx++) {
+            const row = this._rows[rowIdx];
+            if (!row)
+                continue;
+            if (slice.isContinuation && row.isHeader)
+                continue; // Skip headers, already added
+            rowYInSlice.set(rowIdx, y);
+            y += row.calculatedHeight;
+        }
+        // Check if any selected rows are visible in this slice
+        let y1 = null;
+        let y2 = null;
+        for (let rowIdx = start.row; rowIdx <= end.row; rowIdx++) {
+            const rowY = rowYInSlice.get(rowIdx);
+            if (rowY !== undefined) {
+                const row = this._rows[rowIdx];
+                if (row) {
+                    if (y1 === null)
+                        y1 = rowY;
+                    y2 = rowY + row.calculatedHeight;
+                }
+            }
+        }
+        // If no selected rows are visible in this slice, don't render
+        if (y1 === null || y2 === null)
+            return;
+        // Draw selection highlight
+        ctx.fillStyle = 'rgba(0, 120, 215, 0.2)';
+        ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
+        // Draw selection border
+        ctx.strokeStyle = 'rgba(0, 120, 215, 0.8)';
+        ctx.lineWidth = 2;
+        ctx.setLineDash([]);
+        ctx.strokeRect(x1 + 1, y1 + 1, x2 - x1 - 2, y2 - y1 - 2);
+    }
     /**
      * Get rows that should be rendered for a specific page slice.
      * Includes header rows on continuation pages.
@@ -7345,6 +7465,8 @@ class TableObject extends BaseEmbeddedObject {
     }
     blur() {
         this.editing = false;
+        // Clear cell range selection when table loses focus
+        this.clearSelection();
         this.emit('blur', {});
     }
     hasFocus() {
@@ -11411,7 +11533,9 @@ class FlowingTextRenderer extends EventEmitter {
         const maxWidth = this.getAvailableWidthForRegion(region, pageIndex);
         const flowingContent = region.flowingContent;
         // Get cursor position for field selection highlighting
-        const cursorTextIndex = flowingContent.getCursorPosition();
+        // Only use cursor position if the content has focus (otherwise fields stay "selected")
+        const hasFocus = flowingContent.hasFocus();
+        const cursorTextIndex = hasFocus ? flowingContent.getCursorPosition() : undefined;
         // Setup clipping if requested (useful for text boxes)
         if (clipToBounds) {
             ctx.save();
@@ -11448,7 +11572,7 @@ class FlowingTextRenderer extends EventEmitter {
         }
         // Render cursor if this region is active and cursor should be shown
         if (renderCursor && flowingContent.hasFocus() && flowingContent.isCursorVisible()) {
-            this.renderRegionCursor(flowedLines, ctx, bounds, maxWidth, cursorTextIndex);
+            this.renderRegionCursor(flowedLines, ctx, bounds, maxWidth, flowingContent.getCursorPosition());
         }
         if (clipToBounds) {
             ctx.restore();
@@ -11556,8 +11680,10 @@ class FlowingTextRenderer extends EventEmitter {
             this.pageTextOffsets.set(pageIndex, 0);
         }
         // Get cursor position from the specified FlowingTextContent, or fall back to body
+        // Only use cursor position for field selection if the content has focus
         const contentForCursor = flowingContent || this.document.bodyFlowingContent;
-        const cursorTextIndex = contentForCursor ? contentForCursor.getCursorPosition() : 0;
+        const hasFocus = contentForCursor?.hasFocus() ?? false;
+        const cursorTextIndex = hasFocus && contentForCursor ? contentForCursor.getCursorPosition() : undefined;
         // Get total page count for page count fields
         const firstPage = this.document.pages[0];
         const pageCount = firstPage ? (this.flowedPages.get(firstPage.id)?.length || 1) : 1;
@@ -11639,7 +11765,7 @@ class FlowingTextRenderer extends EventEmitter {
         ctx.textBaseline = 'alphabetic';
         // Render list marker if this is the first line of a list item
         if (line.listMarker?.isFirstLineOfListItem && line.listMarker.text) {
-            this.renderListMarker(line.listMarker, ctx, position, line.baseline, line.runs[0]?.formatting);
+            this.renderListMarker(line.listMarker, ctx, position, line.baseline, line.runs[0]?.formatting || line.listMarker.formatting);
         }
         // Create maps for quick lookup by text index
         const substitutionFieldMap = new Map();
@@ -12873,11 +12999,14 @@ class FlowingTextRenderer extends EventEmitter {
         for (const line of flowedPage.lines) {
             if (this.lineContainsSelection(line, this.selectedText)) {
                 const selectionBounds = this.getSelectionBoundsInLine(line, this.selectedText);
-                // Add alignment offset to position the selection correctly
-                const alignmentOffset = this.getAlignmentOffset(line, bounds.width);
-                // Account for list indentation
+                // Account for list indentation - must match renderFlowedLine calculation
                 const listIndent = line.listMarker?.indent ?? 0;
-                ctx.fillRect(bounds.x + alignmentOffset + listIndent + selectionBounds.x, y, selectionBounds.width, line.height);
+                // Calculate alignment offset using effective width (excluding list indent)
+                // This matches how renderFlowedLine calculates alignment
+                const effectiveMaxWidth = bounds.width - listIndent;
+                const alignmentOffset = this.getAlignmentOffset(line, effectiveMaxWidth);
+                const baseX = bounds.x + listIndent;
+                ctx.fillRect(baseX + alignmentOffset + selectionBounds.x, y, selectionBounds.width, line.height);
             }
             y += line.height;
         }
@@ -13350,15 +13479,34 @@ class FlowingTextRenderer extends EventEmitter {
     }
     /**
      * Get a complete snapshot of all flowed content for PDF export.
-     * Returns body pages, header, and footer content.
+     * Returns body pages, header, footer content, and hyperlinks.
      */
     getFlowedPagesSnapshot() {
         const firstPage = this.document.pages[0];
         const bodyPages = firstPage ? this.flowedPages.get(firstPage.id) || [] : [];
+        // Extract hyperlinks from each content area
+        const bodyHyperlinks = this.document.bodyFlowingContent?.getAllHyperlinks().map(h => ({
+            url: h.url,
+            startIndex: h.startIndex,
+            endIndex: h.endIndex
+        }));
+        const headerHyperlinks = this.document.headerFlowingContent?.getAllHyperlinks().map(h => ({
+            url: h.url,
+            startIndex: h.startIndex,
+            endIndex: h.endIndex
+        }));
+        const footerHyperlinks = this.document.footerFlowingContent?.getAllHyperlinks().map(h => ({
+            url: h.url,
+            startIndex: h.startIndex,
+            endIndex: h.endIndex
+        }));
         return {
             body: bodyPages,
             header: this.headerFlowedPage,
-            footer: this.footerFlowedPage
+            footer: this.footerFlowedPage,
+            bodyHyperlinks: bodyHyperlinks?.length ? bodyHyperlinks : undefined,
+            headerHyperlinks: headerHyperlinks?.length ? headerHyperlinks : undefined,
+            footerHyperlinks: footerHyperlinks?.length ? footerHyperlinks : undefined
         };
     }
     // ============================================
@@ -13788,6 +13936,25 @@ class CanvasManager extends EventEmitter {
         this.canvases.clear();
         this.contexts.clear();
     }
+    /**
+     * Update canvas sizes to match current page dimensions.
+     * Call this when page size or orientation changes.
+     */
+    updateCanvasSizes() {
+        this.document.pages.forEach(page => {
+            const canvas = this.canvases.get(page.id);
+            if (!canvas)
+                return;
+            const dimensions = page.getPageDimensions();
+            // Only update if dimensions have changed
+            if (canvas.width !== dimensions.width || canvas.height !== dimensions.height) {
+                canvas.width = dimensions.width;
+                canvas.height = dimensions.height;
+            }
+        });
+        // Update zoom scale to account for new dimensions
+        this.updateCanvasScale();
+    }
     render() {
         this.document.pages.forEach(page => {
             const ctx = this.contexts.get(page.id);
@@ -14127,6 +14294,12 @@ class CanvasManager extends EventEmitter {
         const embeddedObjectHit = hitTestManager.queryByType(mouseDownPageIndex, point, 'embedded-object');
         if (embeddedObjectHit && embeddedObjectHit.data.type === 'embedded-object') {
             const object = embeddedObjectHit.data.object;
+            // Check which section the object belongs to - only interact if in active section
+            const objectSection = this.getSectionForEmbeddedObject(object);
+            if (objectSection && objectSection !== this._activeSection) {
+                // Object is in a different section - ignore the interaction
+                return;
+            }
             // For relative-positioned objects, prepare for potential drag
             // Don't start drag immediately - wait for threshold to allow double-click
             if (object.position === 'relative') {
@@ -14295,19 +14468,40 @@ class CanvasManager extends EventEmitter {
         // Handle table cell selection drag
         if (this.isSelectingTableCells && this.tableCellSelectionStart && this.tableCellSelectionTable) {
             const table = this.tableCellSelectionTable;
-            if (table.renderedPosition) {
-                const localPoint = {
-                    x: point.x - table.renderedPosition.x,
-                    y: point.y - table.renderedPosition.y
-                };
-                const cellAddr = table.getCellAtPoint(localPoint);
-                if (cellAddr) {
-                    // Update selection range
-                    table.selectRange({
-                        start: this.tableCellSelectionStart,
-                        end: cellAddr
-                    });
-                    this.render();
+            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 sliceHeight = slice?.height || table.height;
+            if (tablePosition) {
+                // Check if point is within the table slice on this page
+                const isInsideTable = point.x >= tablePosition.x &&
+                    point.x <= tablePosition.x + table.width &&
+                    point.y >= tablePosition.y &&
+                    point.y <= tablePosition.y + sliceHeight;
+                if (isInsideTable) {
+                    const localPoint = {
+                        x: point.x - tablePosition.x,
+                        y: point.y - tablePosition.y
+                    };
+                    // If this is a continuation slice, adjust y for the slice offset
+                    if (slice && (slice.slicePosition === 'middle' || slice.slicePosition === 'last')) {
+                        const headerHeight = slice.headerHeight;
+                        if (localPoint.y >= headerHeight) {
+                            // Click is in the data rows area - transform coordinates
+                            localPoint.y = slice.yOffset + (localPoint.y - headerHeight);
+                        }
+                        // If y < headerHeight, click is in repeated header - no adjustment needed
+                    }
+                    const cellAddr = table.getCellAtPoint(localPoint);
+                    if (cellAddr) {
+                        // Update selection range
+                        table.selectRange({
+                            start: this.tableCellSelectionStart,
+                            end: cellAddr
+                        });
+                        this.render();
+                    }
                 }
             }
             e.preventDefault();
@@ -14416,6 +14610,10 @@ class CanvasManager extends EventEmitter {
                     });
                 }
             }
+            // Re-render to update rendered positions, then update resize handle hit targets
+            // This fixes the bug where resize handles don't work after a resize operation
+            this.render();
+            this.updateResizeHandleHitTargets();
         }
         this.isResizing = false;
         this.dragStart = null;
@@ -14584,13 +14782,21 @@ class CanvasManager extends EventEmitter {
         const hitTestManager = this.flowingTextRenderer.hitTestManager;
         const embeddedObjectHit = hitTestManager.queryByType(clickedPageIndex, point, 'embedded-object');
         if (embeddedObjectHit && embeddedObjectHit.data.type === 'embedded-object') {
-            // Clicked on embedded object - clear text selection and select it
+            const clickedObject = embeddedObjectHit.data.object;
+            // Check which section the object belongs to
+            const objectSection = this.getSectionForEmbeddedObject(clickedObject);
+            // Only allow selection if object is in the active section
+            if (objectSection && objectSection !== this._activeSection) {
+                // Object is in a different section - ignore the click
+                return;
+            }
+            // Clicked on embedded object in the active section - clear text selection and select it
             const activeFlowingContent = this.getFlowingContentForActiveSection();
             if (activeFlowingContent) {
                 activeFlowingContent.clearSelection();
             }
             this.clearSelection();
-            this.selectInlineElement(embeddedObjectHit.data.object);
+            this.selectInlineElement(clickedObject);
             return;
         }
         // First check if we clicked on a repeating section indicator
@@ -14830,11 +15036,50 @@ class CanvasManager extends EventEmitter {
         const embeddedObjectHit = hitTestManager.queryByType(pageIndex, point, 'embedded-object');
         if (embeddedObjectHit && embeddedObjectHit.data.type === 'embedded-object') {
             const object = embeddedObjectHit.data.object;
-            if (object.position === 'relative') {
-                canvas.style.cursor = 'move';
-                return;
+            // Only show interactive cursors for objects in the active section
+            const objectSection = this.getSectionForEmbeddedObject(object);
+            if (objectSection && objectSection !== this._activeSection) ;
+            else {
+                if (object.position === 'relative') {
+                    canvas.style.cursor = 'move';
+                    return;
+                }
+                // Show text cursor for text boxes
+                if (object instanceof TextBoxObject) {
+                    canvas.style.cursor = 'text';
+                    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';
+            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';
+            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';
+            return;
+        }
+        const headerRegion = this.regionManager.getHeaderRegion();
+        if (headerRegion && headerRegion.containsPointInRegion(point, pageIndex)) {
+            canvas.style.cursor = 'text';
+            return;
+        }
+        const footerRegion = this.regionManager.getFooterRegion();
+        if (footerRegion && footerRegion.containsPointInRegion(point, pageIndex)) {
+            canvas.style.cursor = 'text';
+            return;
+        }
         canvas.style.cursor = 'default';
     }
     /**
@@ -15011,6 +15256,9 @@ class CanvasManager extends EventEmitter {
         return this.selectedElements.size > 0;
     }
     selectBaseEmbeddedObject(embeddedObject, isPartOfRangeSelection = false) {
+        // Clear focus from any currently focused control (e.g., header/footer text)
+        // This ensures cursor stops blinking in the previous section
+        this.setFocus(null);
         // Mark the embedded object as selected
         const obj = embeddedObject.object || embeddedObject;
         obj.selected = true;
@@ -15477,6 +15725,27 @@ class CanvasManager extends EventEmitter {
             this.emit('section-focus-changed', { section, previousSection });
         }
     }
+    /**
+     * Determine which section (body/header/footer) an embedded object belongs to.
+     */
+    getSectionForEmbeddedObject(object) {
+        const sectionMappings = [
+            { content: this.document.bodyFlowingContent, section: 'body' },
+            { content: this.document.headerFlowingContent, section: 'header' },
+            { content: this.document.footerFlowingContent, section: 'footer' }
+        ];
+        for (const { content, section } of sectionMappings) {
+            if (!content)
+                continue;
+            const embeddedObjects = content.getEmbeddedObjects();
+            for (const [, embeddedObj] of embeddedObjects.entries()) {
+                if (embeddedObj.id === object.id) {
+                    return section;
+                }
+            }
+        }
+        return null;
+    }
     /**
      * Detect which section a point is in based on Y coordinate.
      * Uses full page width areas (not just content bounds).
@@ -16090,11 +16359,11 @@ class PDFGenerator {
                         width: headerRegion.size.width,
                         height: headerRegion.size.height
                     };
-                    await this.renderFlowedPage(pdfPage, flowedContent.header, headerBounds, dimensions.height, pageIndex, document.pages.length);
+                    await this.renderFlowedPage(pdfPage, flowedContent.header, headerBounds, dimensions.height, pageIndex, document.pages.length, flowedContent.headerHyperlinks);
                 }
                 // Render body content
                 if (flowedContent?.body && flowedContent.body[pageIndex]) {
-                    await this.renderFlowedPage(pdfPage, flowedContent.body[pageIndex], contentBounds, dimensions.height, pageIndex, document.pages.length);
+                    await this.renderFlowedPage(pdfPage, flowedContent.body[pageIndex], contentBounds, dimensions.height, pageIndex, document.pages.length, flowedContent.bodyHyperlinks);
                 }
                 // Render footer if present
                 if (flowedContent?.footer && document.footerFlowingContent) {
@@ -16105,7 +16374,7 @@ class PDFGenerator {
                         width: footerRegion.size.width,
                         height: footerRegion.size.height
                     };
-                    await this.renderFlowedPage(pdfPage, flowedContent.footer, footerBounds, dimensions.height, pageIndex, document.pages.length);
+                    await this.renderFlowedPage(pdfPage, flowedContent.footer, footerBounds, dimensions.height, pageIndex, document.pages.length, flowedContent.footerHyperlinks);
                 }
             }
             catch (pageError) {
@@ -16190,10 +16459,12 @@ class PDFGenerator {
     /**
      * Render a flowed page to PDF.
      */
-    async renderFlowedPage(pdfPage, flowedPage, bounds, pageHeight, pageIndex, totalPages) {
+    async renderFlowedPage(pdfPage, flowedPage, bounds, pageHeight, pageIndex, totalPages, hyperlinks) {
         let y = bounds.y;
         // Track relative objects to render after all lines (so they appear on top)
         const relativeObjects = [];
+        // Track rendered text positions for hyperlink annotations
+        const renderedRuns = [];
         for (const line of flowedPage.lines) {
             // Collect relative objects from this line
             if (line.embeddedObjects) {
@@ -16224,10 +16495,10 @@ class PDFGenerator {
                 const font = this.getFont(formatting);
                 const fontSize = formatting.fontSize || 14;
                 const color = parseColor(formatting.color || '#000000');
+                const textWidth = font.widthOfTextAtSize(safeText, fontSize);
                 // Draw background if present
                 if (formatting.backgroundColor) {
                     const bgColor = parseColor(formatting.backgroundColor);
-                    const textWidth = font.widthOfTextAtSize(safeText, fontSize);
                     drawFilledRect(pdfPage, runX, y, textWidth, line.height, bgColor, pageHeight);
                 }
                 // Draw text - position at baseline
@@ -16239,8 +16510,19 @@ class PDFGenerator {
                     size: fontSize,
                     color
                 });
+                // Track this run's position for hyperlink annotations
+                if (hyperlinks && hyperlinks.length > 0) {
+                    renderedRuns.push({
+                        x: runX,
+                        y: y,
+                        width: textWidth,
+                        height: line.height,
+                        startIndex: run.startIndex,
+                        endIndex: run.endIndex
+                    });
+                }
                 // Advance X position
-                runX += font.widthOfTextAtSize(safeText, fontSize);
+                runX += textWidth;
                 // Add extra word spacing for justified text
                 if (line.extraWordSpacing && safeText.includes(' ')) {
                     const spaceCount = (safeText.match(/ /g) || []).length;
@@ -16278,6 +16560,62 @@ class PDFGenerator {
         }
         // Render relative objects last (so they appear on top of text)
         await this.renderRelativeObjects(pdfPage, relativeObjects, pageHeight, pageIndex, totalPages);
+        // Create hyperlink annotations
+        if (hyperlinks && hyperlinks.length > 0 && renderedRuns.length > 0) {
+            this.createHyperlinkAnnotations(pdfPage, renderedRuns, hyperlinks, pageHeight);
+        }
+    }
+    /**
+     * Create PDF link annotations for hyperlinks.
+     * Matches hyperlink ranges with rendered text positions and creates clickable links.
+     */
+    createHyperlinkAnnotations(pdfPage, renderedRuns, hyperlinks, pageHeight) {
+        for (const hyperlink of hyperlinks) {
+            // Find all runs that overlap with this hyperlink
+            const overlappingRuns = renderedRuns.filter(run => run.startIndex < hyperlink.endIndex && run.endIndex > hyperlink.startIndex);
+            if (overlappingRuns.length === 0)
+                continue;
+            // Calculate bounding box for the hyperlink
+            // For multi-line hyperlinks, we create separate annotations for each line segment
+            // Group runs by their Y position (same line)
+            const runsByLine = new Map();
+            for (const run of overlappingRuns) {
+                const key = run.y;
+                if (!runsByLine.has(key)) {
+                    runsByLine.set(key, []);
+                }
+                runsByLine.get(key).push(run);
+            }
+            // Create an annotation for each line segment
+            for (const [lineY, lineRuns] of runsByLine) {
+                // Calculate bounds for this line's portion of the hyperlink
+                const minX = Math.min(...lineRuns.map(r => r.x));
+                const maxX = Math.max(...lineRuns.map(r => r.x + r.width));
+                const height = lineRuns[0].height;
+                // Transform to PDF coordinates (Y is inverted)
+                const pdfY = pageHeight - lineY - height;
+                // Create link annotation using pdf-lib
+                const linkAnnotation = pdfPage.doc.context.obj({
+                    Type: 'Annot',
+                    Subtype: 'Link',
+                    Rect: [minX, pdfY, maxX, pdfY + height],
+                    Border: [0, 0, 0], // No visible border
+                    A: {
+                        Type: 'Action',
+                        S: 'URI',
+                        URI: hyperlink.url
+                    }
+                });
+                // Add annotation to page
+                const annotations = pdfPage.node.get(pdfPage.doc.context.obj('Annots'));
+                if (annotations) {
+                    annotations.push(linkAnnotation);
+                }
+                else {
+                    pdfPage.node.set(pdfPage.doc.context.obj('Annots'), pdfPage.doc.context.obj([linkAnnotation]));
+                }
+            }
+        }
     }
     /**
      * Calculate alignment offset for a line.
@@ -20903,8 +21241,12 @@ class PCEditor extends EventEmitter {
             }
         });
         this.document.on('settings-changed', () => {
-            // When settings change (like margins), we need to check if pages need to be added/removed
+            // When settings change (like page size, orientation, margins), we need to:
+            // 1. Update canvas sizes to match new page dimensions
+            // 2. Re-render the content
+            // 3. Check if pages need to be added/removed
             if (this.canvasManager) {
+                this.canvasManager.updateCanvasSizes();
                 this.canvasManager.render();
                 // Defer the page check to allow reflow to complete
                 setTimeout(() => {