@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/components/cell/index.js

@@ -0,0 +1,272 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cell = void 0;
+var tslib_1 = require("tslib");
+var grid_1 = require("@rowsncolumns/grid");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_konva_1 = require("react-konva");
+var config_1 = require("../../config");
+var helpers_1 = require("../../helpers");
+var themes_1 = require("../../themes");
+var cell_arrow_1 = require("../cell-arrow");
+var cell_calculated_1 = require("../cell-calculated");
+var cell_checkbox_1 = require("../cell-checkbox");
+var cell_error_1 = require("../cell-error");
+var cell_expand_1 = require("../cell-expand");
+var cell_filter_1 = require("../cell-filter");
+var cell_group_1 = require("../cell-group");
+var cell_text_runs_1 = require("./cell-text-runs");
+var rich_text_1 = require("./rich-text");
+var alignment_1 = require("./alignment");
+var helpers_2 = require("./helpers");
+var LOADING_VALUE = "Loading...";
+// CSS-equivalent scale for sup/sub baseline offset (matches browser default).
+var BASELINE_OFFSET_FONT_SCALE = 0.58;
+// Vertical inset of data-bar rect from cell edges (top/bottom).
+var CF_DATABAR_INSET_Y = 2;
+exports.Cell = (0, react_1.memo)(function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var x = props.x, y = props.y, width = props.width, height = props.height, value = props.value, _p = props.padding, padding = _p === void 0 ? 2 : _p, _q = props.scale, scale = _q === void 0 ? 1 : _q, _r = props.lineHeight, lineHeight = _r === void 0 ? 1.2 : _r, imageUrl = props.imageUrl, cellFormat = props.cellFormat, chipBackgroundColor = props.chipBackgroundColor, defaultColor = props.defaultColor, defaultBackgroundColor = props.defaultBackgroundColor, sheetId = props.sheetId, rowIndex = props.rowIndex, columnIndex = props.columnIndex, onRequestEdit = props.onRequestEdit, isChecked = props.isChecked, isInvalid = props.isInvalid, isError = props.isError, showCheckbox = props.showCheckbox, showArrow = props.showArrow, showFilter = props.showFilter, showChip = props.showChip, showNote = props.showNote, showComment = props.showComment, isFilterActive = props.isFilterActive, filterIconColor = props.filterIconColor, onFilterClick = props.onFilterClick, onCheckboxClick = props.onCheckboxClick, enableOverflow = props.enableOverflow, cellWidth = props.cellWidth, _textWidth = props.textWidth, theme = props.theme, showCalculatedColumnIcon = props.showCalculatedColumnIcon, isCalculatedColumn = props.isCalculatedColumn, expandable = props.expandable, expanded = props.expanded, columnSpans = props.columnSpans, overflowRight = props.overflowRight, showGridLines = props.showGridLines, structuredValue = props.structuredValue, defaultFontSizePoint = props.defaultFontSizePoint, sortOrder = props.sortOrder, textFormatRuns = props.textFormatRuns, StructuredResult = props.StructuredResult, _s = props.readonly, readonly = _s === void 0 ? false : _s, onExpandCollapse = props.onExpandCollapse, getDefaultHorizontalAlignment = props.getDefaultHorizontalAlignment;
+    var _t = cellFormat !== null && cellFormat !== void 0 ? cellFormat : {}, textFormat = _t.textFormat, wrapStrategy = _t.wrapStrategy;
+    // openpyxl's `relativeIndent` is an additive delta on top of `indent`.
+    var indent = ((_a = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.indent) !== null && _a !== void 0 ? _a : 0) + ((_b = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.relativeIndent) !== null && _b !== void 0 ? _b : 0);
+    var conditionalIcon = (_c = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.conditionalIcon) !== null && _c !== void 0 ? _c : null;
+    var conditionalDataBar = (_d = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.conditionalDataBar) !== null && _d !== void 0 ? _d : null;
+    // Keep in sync with `LOADING_VALUE` in spreadsheet-state/sheet-cell.ts —
+    // we cross-package-duplicate the sentinel so apps/spreadsheet doesn't
+    // depend on spreadsheet-state.
+    var isLoading = value === LOADING_VALUE;
+    var horizontalAlignment = isLoading
+        ? "center"
+        : (_e = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.horizontalAlignment) !== null && _e !== void 0 ? _e : (getDefaultHorizontalAlignment(sheetId, rowIndex, columnIndex) ||
+            config_1.CELL_HORIZONTAL_ALIGNMENT);
+    var verticalAlignment = (cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.verticalAlignment) || config_1.CELL_VERTICAL_ALIGNMENT;
+    // Text format
+    var _u = textFormat !== null && textFormat !== void 0 ? textFormat : {}, colorObject = _u.color, bold = _u.bold, italic = _u.italic, strikethrough = _u.strikethrough, underline = _u.underline, baselineOffset = _u.baselineOffset;
+    var fontSizePt = (_f = textFormat === null || textFormat === void 0 ? void 0 : textFormat.fontSize) !== null && _f !== void 0 ? _f : defaultFontSizePoint;
+    // Fall back to the theme's body font so the painter agrees with the
+    // sizer (AutoSizerCanvas measures with theme.primaryFontFamily).
+    var fontFamily = (_g = textFormat === null || textFormat === void 0 ? void 0 : textFormat.fontFamily) !== null && _g !== void 0 ? _g : theme === null || theme === void 0 ? void 0 : theme.primaryFontFamily;
+    var color = (0, themes_1.getStringifiedColor)(colorObject, theme);
+    // Text decoration
+    var textDecoration = "".concat(underline ? "underline" : "", " ").concat(strikethrough ? "line-through" : "");
+    /* Because of 1px + 0.5px (gridline width + spacing )*/
+    var borderWidth = 1;
+    var cellSpacingY = borderWidth;
+    var baseFontSize = (0, helpers_1.pointToPixel)(fontSizePt) * scale;
+    var fontSize = baselineOffset
+        ? baseFontSize * BASELINE_OFFSET_FONT_SCALE
+        : baseFontSize;
+    var effectiveVerticalAlignment = baselineOffset === "superscript"
+        ? "top"
+        : baselineOffset === "subscript"
+            ? "bottom"
+            : verticalAlignment;
+    var textStyle = "".concat(bold ? "bold" : "normal", " ").concat(italic ? "italic" : "normal");
+    var showText = !(0, utils_1.isNil)(structuredValue) ? false : !(0, utils_1.isNil)(value);
+    // Overflow line
+    var overflowFillFunc = (0, react_1.useCallback)(function (context, shape) {
+        var e_1, _a;
+        try {
+            for (var columnSpans_1 = tslib_1.__values(columnSpans), columnSpans_1_1 = columnSpans_1.next(); !columnSpans_1_1.done; columnSpans_1_1 = columnSpans_1.next()) {
+                var _b = tslib_1.__read(columnSpans_1_1.value, 4), _1 = _b[0], columnOffset = _b[1], columnWidth = _b[2], cellBackground = _b[3];
+                context.beginPath();
+                var x_1 = columnOffset - shape.x() + (overflowRight ? columnWidth : 0) + 0.5;
+                var strokeColor = cellBackground
+                    ? (0, themes_1.getStringifiedColor)(cellBackground, theme)
+                    : defaultBackgroundColor;
+                context.moveTo(x_1, 1);
+                context.lineTo(x_1, shape.height());
+                context.setAttr("strokeStyle", strokeColor);
+                context.setAttr("lineWidth", 1 * scale);
+                context.stroke();
+                context.closePath();
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (columnSpans_1_1 && !columnSpans_1_1.done && (_a = columnSpans_1.return)) _a.call(columnSpans_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    }, [defaultBackgroundColor, columnSpans, theme, overflowRight, scale]);
+    // Show error tag
+    var showError = isError || isInvalid;
+    // Calculated
+    var isCalculatedCell = showCalculatedColumnIcon && isCalculatedColumn;
+    // Alignment
+    var isRightAligned = horizontalAlignment === "right";
+    // Spacing
+    var indentSpacing = indent ? indent * config_1.INDENT_SPACING : 0;
+    var iconSpacing = config_1.DEFAULT_CELL_SPACING;
+    var showExpand = false;
+    var leftSpacing = (0, helpers_2.getLeftSpacing)(isCalculatedCell, expandable, isRightAligned ? showExpand : false, iconSpacing, scale);
+    var rightSpacing = (0, helpers_2.getRightSpacing)(showFilter, showArrow, isRightAligned ? false : showExpand, iconSpacing, scale);
+    // final cell width
+    var finalCellWidth = cellWidth !== null && cellWidth !== void 0 ? cellWidth : 0;
+    // text
+    var textWidth = _textWidth + indentSpacing;
+    // Reserve room for the CF icon on the left side of the cell. Only adds
+    // spacing when the cell actually has an iconSet rule painting a glyph.
+    var cfIconReserve = conditionalIcon
+        ? (config_1.CF_ICON_WIDTH + config_1.CF_ICON_SPACING) * scale
+        : 0;
+    // final width — must subtract the icon reserve so right-aligned text
+    // doesn't render past the cell's right edge when an iconSet is present.
+    var finalTextWidth = (overflowRight
+        ? Math.max(textWidth, width)
+        : (enableOverflow ? finalCellWidth : width) -
+            rightSpacing -
+            leftSpacing -
+            indentSpacing) - cfIconReserve;
+    // Right aligned x
+    var textX = overflowRight
+        ? textWidth > width
+            ? x - (textWidth - width)
+            : x
+        : x +
+            (isRightAligned ? -indentSpacing - Math.floor((padding * scale) / 2) : 0);
+    // Text left padding
+    var textLeftPadding = textX +
+        leftSpacing +
+        borderWidth +
+        cfIconReserve +
+        (overflowRight
+            ? -leftSpacing - indentSpacing - rightSpacing - padding // Additional space
+            : indentSpacing);
+    // Overflow
+    var overflowX = overflowRight
+        ? enableOverflow
+            ? textX + (textWidth - finalCellWidth)
+            : textX
+        : textX;
+    var overflowWidth = finalCellWidth;
+    // Clip
+    var clipX = (enableOverflow ? overflowX : x) +
+        padding +
+        (overflowRight ? leftSpacing : 0);
+    var clipWidth = enableOverflow ? overflowWidth : width;
+    // Text rotation: Excel encodes counter-clockwise rotation; Konva uses
+    // clockwise. `vertical` is Excel's "stacked text" mode — characters laid
+    // out top-to-bottom without rotation.
+    var textRotation = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.textRotation;
+    var isStackedVertical = textRotation === "vertical";
+    var hasNumericRotation = typeof textRotation === "number" &&
+        Number.isFinite(textRotation) &&
+        textRotation !== 0;
+    // shrinkToFit scales the font down when text overflows the cell.
+    // Excel disables wrapping when shrinkToFit is on; we mirror that.
+    // Konva's Text uses `padding` for inner spacing on each side, so the
+    // actual glyph-rendering width is the box width minus 2*padding.
+    // Subtracting it here keeps the trailing characters from getting clipped.
+    var shrinkEnabled = !!(cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.shrinkToFit) && !isStackedVertical;
+    var shrinkAvailableWidth = finalTextWidth - 2 * padding;
+    var effectiveFontSize = shrinkEnabled
+        ? (0, alignment_1.computeShrinkToFitFontSize)(textWidth, shrinkAvailableWidth, fontSize, true)
+        : fontSize;
+    // Wrap — disabled in stacked, shrink, or rotated modes.
+    var textWrapStrategy = isStackedVertical || shrinkEnabled || hasNumericRotation
+        ? "none"
+        : wrapStrategy === "wrap"
+            ? "word"
+            : "none";
+    var shouldWrap = wrapStrategy === "wrap" &&
+        !isStackedVertical &&
+        !shrinkEnabled &&
+        !hasNumericRotation;
+    var baseDisplayValue = (0, helpers_1.normalizeDisplayText)(value, shouldWrap);
+    var displayValue = isStackedVertical
+        ? (0, alignment_1.stackTextVertically)(baseDisplayValue !== null && baseDisplayValue !== void 0 ? baseDisplayValue : "")
+        : baseDisplayValue;
+    // For rotated text, anchor the rotation pivot to an alignment-aware
+    // corner of the cell so the text stays inside instead of sliding off
+    // (Konva otherwise rotates around the Text's top-left at x/y).
+    var approxTextHeight = effectiveFontSize * lineHeight;
+    var rotatedLayout = hasNumericRotation && typeof textRotation === "number"
+        ? (0, alignment_1.getRotatedTextLayout)({
+            cellX: x,
+            cellY: y,
+            cellWidth: width,
+            cellHeight: height,
+            paddingLeft: padding,
+            paddingRight: padding,
+            paddingTop: padding,
+            paddingBottom: padding,
+            naturalTextWidth: textWidth,
+            textHeight: approxTextHeight,
+            rotation: textRotation,
+            horizontalAlignment: horizontalAlignment,
+            verticalAlignment: effectiveVerticalAlignment,
+        })
+        : undefined;
+    var rotationDegrees = (_h = rotatedLayout === null || rotatedLayout === void 0 ? void 0 : rotatedLayout.rotation) !== null && _h !== void 0 ? _h : (0, alignment_1.getKonvaRotationDegrees)(textRotation);
+    // CF data-bar geometry. Painted behind the text Group so the cell value
+    // remains readable on top of the bar. We inset 2px vertically so the bar
+    // doesn't touch the borders.
+    var dataBarHeight = Math.max(0, height - 2 * CF_DATABAR_INSET_Y * scale);
+    var dataBarMaxWidth = Math.max(0, width - 2);
+    var dataBarFill = conditionalDataBar
+        ? Math.max(0, Math.min(1, conditionalDataBar.fillFraction))
+        : 0;
+    var dataBarWidth = dataBarMaxWidth * dataBarFill;
+    var dataBarFromRight = (conditionalDataBar === null || conditionalDataBar === void 0 ? void 0 : conditionalDataBar.direction) === "rightToLeft";
+    // Use the segment-based renderer only when per-segment formatting
+    // exists AND none of the unsupported display modes are active.
+    // Rotation, stacked-vertical, shrink-to-fit, and chips stay on the
+    // single-style Konva Text path — those involve layout transforms
+    // the segment renderer doesn't yet replicate. Wrap IS supported by
+    // the segment renderer (whitespace-only break, like Konva's "word"
+    // wrap). A cell-level baselineOffset (sup/sub) is supported too:
+    // it seeds the segment renderer's base style so runs keep their
+    // own styling instead of being flattened; plain no-run cells with
+    // a cell-level baselineOffset keep the single-style approximation
+    // below (scaled font + top/bottom alignment).
+    var useRichTextRunPath = !showChip &&
+        !shrinkEnabled &&
+        !isStackedVertical &&
+        !hasNumericRotation &&
+        (0, rich_text_1.hasRenderableRuns)(textFormatRuns !== null && textFormatRuns !== void 0 ? textFormatRuns : undefined);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        enableOverflow && showGridLines ? (react_1.default.createElement(react_konva_1.Shape, { x: x, y: y, width: width, height: height, sceneFunc: overflowFillFunc, listening: false })) : null,
+        conditionalDataBar && dataBarWidth > 0 ? (react_1.default.createElement(react_konva_1.Rect, { x: dataBarFromRight ? x + width - 1 - dataBarWidth : x + 1, y: y + CF_DATABAR_INSET_Y * scale, width: dataBarWidth, height: dataBarHeight, fill: conditionalDataBar.color, stroke: conditionalDataBar.borderColor, strokeWidth: conditionalDataBar.borderColor ? 1 : 0, listening: false, perfectDrawEnabled: false })) : null,
+        conditionalIcon ? (react_1.default.createElement(react_konva_1.Text, { x: x + 2, y: y, width: config_1.CF_ICON_WIDTH * scale, height: height, text: conditionalIcon.glyph, fill: (_k = (_j = conditionalIcon.color) !== null && _j !== void 0 ? _j : color) !== null && _k !== void 0 ? _k : defaultColor, verticalAlign: "middle", align: "center", fontSize: fontSize, listening: false, perfectDrawEnabled: false })) : null,
+        showCheckbox ? (react_1.default.createElement(cell_checkbox_1.CellCheckbox, { x: x, y: y, scale: scale, width: width, height: height, checked: isChecked, onChange: onCheckboxClick, rowIndex: props.rowIndex, columnIndex: props.columnIndex, verticalAlignment: verticalAlignment, horizontalAlignment: horizontalAlignment })) : showText ? (react_1.default.createElement(react_konva_1.Group, { clipY: y + borderWidth, clipHeight: height, clipX: clipX, clipWidth: clipWidth }, showChip ? (react_1.default.createElement(react_konva_1.Label, { width: width - config_1.CHIP_SPACING * scale, height: config_1.CHIP_HEIGHT * scale, x: textLeftPadding, y: (0, helpers_1.getChipVerticalPosition)(y, height, scale, verticalAlignment), offsetX: -config_1.CHIP_SPACING * scale, offsetY: -config_1.CHIP_SPACING * scale },
+            react_1.default.createElement(react_konva_1.Tag, { height: config_1.CHIP_HEIGHT * scale, fill: chipBackgroundColor, cornerRadius: config_1.CHIP_RADIUS * scale, perfectDrawEnabled: false, hitStrokeWidth: 0 }),
+            react_1.default.createElement(react_konva_1.Text, { text: displayValue, fill: color !== null && color !== void 0 ? color : defaultColor, verticalAlign: effectiveVerticalAlignment, align: horizontalAlignment, fontFamily: fontFamily, fontStyle: textStyle, fontSize: fontSize, textDecoration: textDecoration, padding: padding, lineHeight: 1, offsetY: -1, perfectDrawEnabled: false, wrap: "none" }))) : useRichTextRunPath ? (
+        // Per-segment styled paint. Bounded by the same clip rect
+        // and padding the default Text path uses, so cell chrome
+        // (filter button, expand caret, error tag) overlays at
+        // the same coordinates.
+        //
+        // Pass the RAW value (not `displayValue`) — the segment
+        // builder needs original `\n` characters to split into
+        // lines, and `textFormatRuns` indices reference the raw
+        // string. `normalizeDisplayText` is bypassed because the
+        // renderer handles multi-line layout itself.
+        react_1.default.createElement(cell_text_runs_1.CellTextRuns, { x: textLeftPadding, y: y + cellSpacingY, width: finalTextWidth, height: height, padding: padding, value: displayValue !== null && displayValue !== void 0 ? displayValue : "", runs: textFormatRuns !== null && textFormatRuns !== void 0 ? textFormatRuns : [], baseColor: color !== null && color !== void 0 ? color : defaultColor, baseFontFamily: fontFamily, 
+            // UN-scaled size on purpose: when the cell carries a
+            // baselineOffset the segment resolver applies the
+            // sup/sub font scale itself (exactly once). Shrink-to-
+            // fit never reaches this path, so `baseFontSize` equals
+            // `effectiveFontSize` for every other cell.
+            baseFontSize: baseFontSize, baseBold: !!bold, baseItalic: !!italic, baseUnderline: !!underline, baseStrikethrough: !!strikethrough, baseBaselineOffset: baselineOffset !== null && baselineOffset !== void 0 ? baselineOffset : undefined, horizontalAlign: horizontalAlignment, verticalAlign: effectiveVerticalAlignment, lineHeight: lineHeight, wrap: shouldWrap, theme: theme })) : (react_1.default.createElement(react_konva_1.Text, { x: (_l = rotatedLayout === null || rotatedLayout === void 0 ? void 0 : rotatedLayout.x) !== null && _l !== void 0 ? _l : textLeftPadding, y: (_m = rotatedLayout === null || rotatedLayout === void 0 ? void 0 : rotatedLayout.y) !== null && _m !== void 0 ? _m : y + cellSpacingY, offsetX: rotatedLayout === null || rotatedLayout === void 0 ? void 0 : rotatedLayout.offsetX, offsetY: rotatedLayout === null || rotatedLayout === void 0 ? void 0 : rotatedLayout.offsetY, height: rotatedLayout ? approxTextHeight : height, width: (_o = rotatedLayout === null || rotatedLayout === void 0 ? void 0 : rotatedLayout.width) !== null && _o !== void 0 ? _o : finalTextWidth, text: displayValue, fill: color !== null && color !== void 0 ? color : defaultColor, verticalAlign: rotatedLayout ? "top" : effectiveVerticalAlignment, align: rotatedLayout ? "left" : horizontalAlignment, fontFamily: fontFamily, fontStyle: textStyle, fontSize: effectiveFontSize, textDecoration: textDecoration, padding: padding, wrap: textWrapStrategy, lineHeight: lineHeight, rotation: rotationDegrees, hitStrokeWidth: 0, perfectDrawEnabled: false })))) : imageUrl ? (react_1.default.createElement(grid_1.Image, { x: x, y: y, spacing: 1, width: width, height: height, url: imageUrl, perfectDrawEnabled: false, horizontalAlignment: horizontalAlignment, verticalAlignment: verticalAlignment })) : null,
+        showFilter ? (react_1.default.createElement(cell_filter_1.CellFilter, { scale: scale, isActive: isFilterActive, onClick: readonly ? undefined : onFilterClick, rowIndex: props.rowIndex, columnIndex: props.columnIndex, x: x, y: y, height: height, width: width, filterIconColor: filterIconColor, verticalAlignment: verticalAlignment, backgroundColor: defaultBackgroundColor, sortOrder: sortOrder })) : showArrow && !readonly ? (react_1.default.createElement(cell_arrow_1.CellArrow, { scale: scale, onClick: onRequestEdit, rowIndex: rowIndex, columnIndex: columnIndex, x: x, y: y, height: height, width: width, verticalAlignment: verticalAlignment })) : null,
+        expandable ? (react_1.default.createElement(cell_group_1.CellGroup, { scale: scale, onClick: function (cell) {
+                onExpandCollapse === null || onExpandCollapse === void 0 ? void 0 : onExpandCollapse(cell, !expanded);
+            }, rowIndex: rowIndex, columnIndex: columnIndex, x: x + indentSpacing, y: y, height: height, width: width, verticalAlignment: verticalAlignment, expanded: expanded, theme: theme })) : null,
+        showCalculatedColumnIcon && isCalculatedColumn ? (react_1.default.createElement(cell_calculated_1.CellCalculated, { x: x, y: y, scale: scale, width: width, height: height, verticalAlignment: verticalAlignment, color: color })) : null,
+        showError ? (react_1.default.createElement(cell_error_1.CellError, { color: isError ? config_1.ERROR_COLOR : config_1.INVALID_COLOR, x: x + width - cell_error_1.ERROR_TAG_WIDTH * scale, y: y + 1, scale: scale })) : null,
+        showNote ? (react_1.default.createElement(cell_error_1.CellError, { color: config_1.NOTE_COLOR, x: x + width - cell_error_1.ERROR_TAG_WIDTH * scale, y: y + 1, scale: scale })) : null,
+        showComment ? (react_1.default.createElement(cell_error_1.CellError, { color: config_1.COMMENT_COLOR, x: x + width - cell_error_1.ERROR_TAG_WIDTH * scale, y: y + 1, scale: scale })) : null,
+        structuredValue ? (react_1.default.createElement(StructuredResult, { x: x, y: y, width: width, height: height, 
+            // Text props
+            textX: textLeftPadding, textY: y + cellSpacingY, textWidth: finalTextWidth, textFill: color !== null && color !== void 0 ? color : defaultColor, textVerticalAlign: verticalAlignment, textAlign: horizontalAlignment, textFontFamily: fontFamily, textFontStyle: textStyle, textFontSize: fontSize, textDecoration: textDecoration, textPadding: padding, textWrap: textWrapStrategy, textLineHeight: lineHeight, 
+            // / Text props
+            color: defaultBackgroundColor
+                ? (0, utils_1.getContrastColor)((0, themes_1.getStringifiedColor)(defaultBackgroundColor, theme), (0, themes_1.getStringifiedColor)({ theme: 1 }, theme), (0, themes_1.getStringifiedColor)({ theme: 1, tint: 1 }, theme))
+                : undefined, structuredValue: structuredValue })) : null,
+        showExpand ? (react_1.default.createElement(cell_expand_1.CellExpand, { scale: scale, onClick: onRequestEdit, rowIndex: rowIndex, columnIndex: columnIndex, x: x, y: y, height: height, width: width, verticalAlignment: verticalAlignment, horizontalAlignment: horizontalAlignment })) : null));
+});
+exports.Cell.displayName = "Cell";

package/dist/cjs/components/cell/rich-text.d.ts

@@ -0,0 +1,82 @@
+import type { TextFormat } from "@rowsncolumns/common-types";
+/**
+ * A run-flattened text segment ready for paint. Built from the source
+ * value + ProseMirror-style `TextFormatRun[]`. Every character in the
+ * source value is covered by exactly one segment (gaps between runs
+ * become unformatted segments with `format: {}`).
+ *
+ * The renderer walks these segments left-to-right, mutating the canvas
+ * font / fillStyle / underline state per segment.
+ */
+export type RichTextSegment = {
+    text: string;
+    /** Subset of `TextFormat` that overrides the base cell text format. */
+    format: Partial<TextFormat>;
+};
+export type TextFormatRunInput = {
+    startIndex: number;
+    endIndex: number;
+    nodeType: "text" | "mention";
+    format?: Partial<TextFormat>;
+    mention?: {
+        label?: string;
+        value?: unknown;
+    };
+};
+/**
+ * Returns `true` when at least one supplied run carries a visually
+ * meaningful format. Used by the cell renderer to decide whether to
+ * fall back to single-style Konva `Text` (cheap, no per-segment work)
+ * or run the rich-text paint path.
+ *
+ * Mention runs are treated as renderable when present — the renderer
+ * paints them as plain text using the run's `mention.label`, but the
+ * separator between mention and surrounding text still needs the
+ * segment walker.
+ */
+export declare const hasRenderableRuns: (runs: TextFormatRunInput[] | null | undefined) => boolean;
+/**
+ * Build a left-to-right, gap-free segmentation of `value` honoring
+ * `runs`. Characters not covered by any run are emitted as
+ * unformatted (`format: {}`) segments.
+ *
+ * Mention runs replace their text span with `mention.label ?? ""` —
+ * the underlying value already contains the label characters because
+ * `serializeEditorValue` writes them out that way, but we still pull
+ * from the mention object so callers that pass raw text + runs from
+ * elsewhere (e.g. xlsx import) get sensible output too.
+ *
+ * Runs are assumed non-overlapping. Overlapping runs would produce
+ * undefined ordering — the function does not validate or merge them.
+ * Out-of-range indices are clamped to `[0, value.length]`.
+ */
+export declare const buildRichTextSegments: (value: string, runs: TextFormatRunInput[] | null | undefined) => RichTextSegment[];
+/**
+ * Splits each segment on `\n` so the renderer can emit one segment
+ * per visual line. The newline character itself is dropped — callers
+ * advance Y between consecutive output entries that share an input
+ * line break.
+ *
+ * Output is grouped: `[[lineSegments...], [lineSegments...], ...]`.
+ */
+export declare const segmentsToLines: (segments: RichTextSegment[]) => RichTextSegment[][];
+/**
+ * A single word-or-whitespace atom carrying its own format. Used by
+ * the wrap algorithm to decide line breaks between atoms.
+ *
+ * A "word" includes leading/trailing whitespace runs as separate
+ * atoms so wrap boundaries land between words, not in the middle of
+ * a contiguous letter run.
+ */
+export type RichTextAtom = {
+    text: string;
+    format: Partial<TextFormat>;
+    isWhitespace: boolean;
+};
+/**
+ * Split a single segment into atoms — words and whitespace runs.
+ * Tabs and spaces both count as whitespace and stay attached as
+ * their own atoms so the wrap algorithm can prefer breaks there.
+ */
+export declare const segmentToAtoms: (seg: RichTextSegment) => RichTextAtom[];
+//# sourceMappingURL=rich-text.d.ts.map

package/dist/cjs/components/cell/rich-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text.d.ts","sourceRoot":"","sources":["../../../../components/cell/rich-text.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAE7D;;;;;;;;GAQG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,MAAM,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;CAC7B,CAAC;AAwBF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CAC/C,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iBAAiB,GAC5B,MAAM,kBAAkB,EAAE,GAAG,IAAI,GAAG,SAAS,KAC5C,OAOF,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,qBAAqB,GAChC,OAAO,MAAM,EACb,MAAM,kBAAkB,EAAE,GAAG,IAAI,GAAG,SAAS,KAC5C,eAAe,EAyDjB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAC1B,UAAU,eAAe,EAAE,KAC1B,eAAe,EAAE,EAenB,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5B,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,eAAe,KAAG,YAAY,EAuBjE,CAAC"}

package/dist/cjs/components/cell/rich-text.js

@@ -0,0 +1,211 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.segmentToAtoms = exports.segmentsToLines = exports.buildRichTextSegments = exports.hasRenderableRuns = void 0;
+var tslib_1 = require("tslib");
+/**
+ * Per the schema (libs/ui/editor-pm/schema.ts) `bold`, `italic`,
+ * `underline`, `strikethrough`, `color` and `baselineOffset`
+ * (sup/sub marks) survive editor round-trips and cause distinct
+ * visual paint. `fontFamily` / `fontSize` are not yet reachable from
+ * the editor but the data type allows them; treat them as renderable
+ * if/when they appear so xlsx-imported runs work.
+ */
+var VISUAL_FORMAT_KEYS = [
+    "bold",
+    "italic",
+    "underline",
+    "strikethrough",
+    "color",
+    "fontFamily",
+    "fontSize",
+    "baselineOffset",
+];
+var isRenderableFormat = function (format) {
+    return !!format && VISUAL_FORMAT_KEYS.some(function (k) { return format[k] != null; });
+};
+/**
+ * Returns `true` when at least one supplied run carries a visually
+ * meaningful format. Used by the cell renderer to decide whether to
+ * fall back to single-style Konva `Text` (cheap, no per-segment work)
+ * or run the rich-text paint path.
+ *
+ * Mention runs are treated as renderable when present — the renderer
+ * paints them as plain text using the run's `mention.label`, but the
+ * separator between mention and surrounding text still needs the
+ * segment walker.
+ */
+var hasRenderableRuns = function (runs) {
+    var e_1, _a;
+    if (!runs || runs.length === 0)
+        return false;
+    try {
+        for (var runs_1 = tslib_1.__values(runs), runs_1_1 = runs_1.next(); !runs_1_1.done; runs_1_1 = runs_1.next()) {
+            var run = runs_1_1.value;
+            if (run.nodeType === "mention")
+                return true;
+            if (isRenderableFormat(run.format))
+                return true;
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (runs_1_1 && !runs_1_1.done && (_a = runs_1.return)) _a.call(runs_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return false;
+};
+exports.hasRenderableRuns = hasRenderableRuns;
+/**
+ * Build a left-to-right, gap-free segmentation of `value` honoring
+ * `runs`. Characters not covered by any run are emitted as
+ * unformatted (`format: {}`) segments.
+ *
+ * Mention runs replace their text span with `mention.label ?? ""` —
+ * the underlying value already contains the label characters because
+ * `serializeEditorValue` writes them out that way, but we still pull
+ * from the mention object so callers that pass raw text + runs from
+ * elsewhere (e.g. xlsx import) get sensible output too.
+ *
+ * Runs are assumed non-overlapping. Overlapping runs would produce
+ * undefined ordering — the function does not validate or merge them.
+ * Out-of-range indices are clamped to `[0, value.length]`.
+ */
+var buildRichTextSegments = function (value, runs) {
+    var e_2, _a;
+    var _b;
+    if (!value)
+        return [];
+    if (!runs || runs.length === 0) {
+        return [{ text: value, format: {} }];
+    }
+    // Stable sort by startIndex so a caller passing unsorted runs still
+    // gets the same visual order. (The PM extractor emits them sorted.)
+    var sorted = tslib_1.__spreadArray([], tslib_1.__read(runs), false).sort(function (a, b) { return a.startIndex - b.startIndex; });
+    var segments = [];
+    var cursor = 0;
+    var len = value.length;
+    try {
+        for (var sorted_1 = tslib_1.__values(sorted), sorted_1_1 = sorted_1.next(); !sorted_1_1.done; sorted_1_1 = sorted_1.next()) {
+            var run = sorted_1_1.value;
+            var start = Math.max(0, Math.min(len, run.startIndex));
+            var end = Math.max(start, Math.min(len, run.endIndex));
+            // Emit any unformatted text between the previous run and this one.
+            if (start > cursor) {
+                segments.push({
+                    text: value.slice(cursor, start),
+                    format: {},
+                });
+            }
+            if (start < end) {
+                if (run.nodeType === "mention") {
+                    // Mentions render as their label using the underlying cell
+                    // format (no special inline styling yet). We still emit a
+                    // distinct segment so future mention chrome (e.g. background
+                    // pill) can hook on this.
+                    segments.push({
+                        text: value.slice(start, end),
+                        format: {},
+                    });
+                }
+                else {
+                    segments.push({
+                        text: value.slice(start, end),
+                        format: (_b = run.format) !== null && _b !== void 0 ? _b : {},
+                    });
+                }
+            }
+            if (end > cursor)
+                cursor = end;
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (sorted_1_1 && !sorted_1_1.done && (_a = sorted_1.return)) _a.call(sorted_1);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    // Trailing unformatted tail (common case: short underline at start
+    // of a longer cell value).
+    if (cursor < len) {
+        segments.push({
+            text: value.slice(cursor),
+            format: {},
+        });
+    }
+    return segments;
+};
+exports.buildRichTextSegments = buildRichTextSegments;
+/**
+ * Splits each segment on `\n` so the renderer can emit one segment
+ * per visual line. The newline character itself is dropped — callers
+ * advance Y between consecutive output entries that share an input
+ * line break.
+ *
+ * Output is grouped: `[[lineSegments...], [lineSegments...], ...]`.
+ */
+var segmentsToLines = function (segments) {
+    var e_3, _a;
+    if (segments.length === 0)
+        return [[]];
+    var lines = [[]];
+    try {
+        for (var segments_1 = tslib_1.__values(segments), segments_1_1 = segments_1.next(); !segments_1_1.done; segments_1_1 = segments_1.next()) {
+            var seg = segments_1_1.value;
+            if (!seg.text)
+                continue;
+            var parts = seg.text.split("\n");
+            for (var i = 0; i < parts.length; i++) {
+                if (i > 0)
+                    lines.push([]);
+                var piece = parts[i];
+                if (piece) {
+                    lines[lines.length - 1].push({ text: piece, format: seg.format });
+                }
+            }
+        }
+    }
+    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+    finally {
+        try {
+            if (segments_1_1 && !segments_1_1.done && (_a = segments_1.return)) _a.call(segments_1);
+        }
+        finally { if (e_3) throw e_3.error; }
+    }
+    return lines;
+};
+exports.segmentsToLines = segmentsToLines;
+/**
+ * Split a single segment into atoms — words and whitespace runs.
+ * Tabs and spaces both count as whitespace and stay attached as
+ * their own atoms so the wrap algorithm can prefer breaks there.
+ */
+var segmentToAtoms = function (seg) {
+    if (!seg.text)
+        return [];
+    var atoms = [];
+    // Tokenise into alternating whitespace / non-whitespace runs.
+    var i = 0;
+    while (i < seg.text.length) {
+        var ch = seg.text[i];
+        var isWs = ch === " " || ch === "\t";
+        var j = i + 1;
+        while (j < seg.text.length) {
+            var next = seg.text[j];
+            var nextIsWs = next === " " || next === "\t";
+            if (nextIsWs !== isWs)
+                break;
+            j++;
+        }
+        atoms.push({
+            text: seg.text.slice(i, j),
+            format: seg.format,
+            isWhitespace: isWs,
+        });
+        i = j;
+    }
+    return atoms;
+};
+exports.segmentToAtoms = segmentToAtoms;