@rowsncolumns/spreadsheet 10.2.68

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

@@ -0,0 +1,257 @@
+import { Image } from "@rowsncolumns/grid";
+import { getContrastColor, isNil } from "@rowsncolumns/utils";
+import React, { memo, useCallback } from "react";
+import { Group, Label, Rect, Shape, Tag, Text } from "react-konva";
+import { CELL_HORIZONTAL_ALIGNMENT, CELL_VERTICAL_ALIGNMENT, CF_ICON_SPACING, CF_ICON_WIDTH, CHIP_HEIGHT, CHIP_RADIUS, CHIP_SPACING, COMMENT_COLOR, DEFAULT_CELL_SPACING, ERROR_COLOR, INDENT_SPACING, INVALID_COLOR, NOTE_COLOR, } from "../../config";
+import { getChipVerticalPosition, normalizeDisplayText, pointToPixel, } from "../../helpers";
+import { getStringifiedColor } from "../../themes";
+import { CellArrow } from "../cell-arrow";
+import { CellCalculated } from "../cell-calculated";
+import { CellCheckbox } from "../cell-checkbox";
+import { CellError, ERROR_TAG_WIDTH } from "../cell-error";
+import { CellExpand } from "../cell-expand";
+import { CellFilter } from "../cell-filter";
+import { CellGroup } from "../cell-group";
+import { CellTextRuns } from "./cell-text-runs";
+import { hasRenderableRuns } from "./rich-text";
+import { computeShrinkToFitFontSize, getKonvaRotationDegrees, getRotatedTextLayout, stackTextVertically, } from "./alignment";
+import { getLeftSpacing, getRightSpacing } from "./helpers";
+const LOADING_VALUE = "Loading...";
+// CSS-equivalent scale for sup/sub baseline offset (matches browser default).
+const BASELINE_OFFSET_FONT_SCALE = 0.58;
+// Vertical inset of data-bar rect from cell edges (top/bottom).
+const CF_DATABAR_INSET_Y = 2;
+export const Cell = memo((props) => {
+    const { x, y, width, height, value, padding = 2, scale = 1, lineHeight = 1.2, imageUrl, cellFormat, chipBackgroundColor, defaultColor, defaultBackgroundColor, sheetId, rowIndex, columnIndex, onRequestEdit, isChecked, isInvalid, isError, showCheckbox, showArrow, showFilter, showChip, showNote, showComment, isFilterActive, filterIconColor, onFilterClick, onCheckboxClick, enableOverflow, cellWidth, textWidth: _textWidth, theme, showCalculatedColumnIcon, isCalculatedColumn, expandable, expanded, columnSpans, overflowRight, showGridLines, structuredValue, defaultFontSizePoint, sortOrder, textFormatRuns, StructuredResult, readonly = false, onExpandCollapse, getDefaultHorizontalAlignment, } = props;
+    const { textFormat, wrapStrategy } = cellFormat ?? {};
+    // openpyxl's `relativeIndent` is an additive delta on top of `indent`.
+    const indent = (cellFormat?.indent ?? 0) + (cellFormat?.relativeIndent ?? 0);
+    const conditionalIcon = cellFormat?.conditionalIcon ?? null;
+    const conditionalDataBar = cellFormat?.conditionalDataBar ?? 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.
+    const isLoading = value === LOADING_VALUE;
+    const horizontalAlignment = isLoading
+        ? "center"
+        : cellFormat?.horizontalAlignment ??
+            (getDefaultHorizontalAlignment(sheetId, rowIndex, columnIndex) ||
+                CELL_HORIZONTAL_ALIGNMENT);
+    const verticalAlignment = cellFormat?.verticalAlignment || CELL_VERTICAL_ALIGNMENT;
+    // Text format
+    const { color: colorObject, bold, italic, strikethrough, underline, baselineOffset, } = textFormat ?? {};
+    const fontSizePt = textFormat?.fontSize ?? defaultFontSizePoint;
+    // Fall back to the theme's body font so the painter agrees with the
+    // sizer (AutoSizerCanvas measures with theme.primaryFontFamily).
+    const fontFamily = textFormat?.fontFamily ?? theme?.primaryFontFamily;
+    const color = getStringifiedColor(colorObject, theme);
+    // Text decoration
+    const textDecoration = `${underline ? "underline" : ""} ${strikethrough ? "line-through" : ""}`;
+    /* Because of 1px + 0.5px (gridline width + spacing )*/
+    const borderWidth = 1;
+    const cellSpacingY = borderWidth;
+    const baseFontSize = pointToPixel(fontSizePt) * scale;
+    const fontSize = baselineOffset
+        ? baseFontSize * BASELINE_OFFSET_FONT_SCALE
+        : baseFontSize;
+    const effectiveVerticalAlignment = baselineOffset === "superscript"
+        ? "top"
+        : baselineOffset === "subscript"
+            ? "bottom"
+            : verticalAlignment;
+    const textStyle = `${bold ? "bold" : "normal"} ${italic ? "italic" : "normal"}`;
+    const showText = !isNil(structuredValue) ? false : !isNil(value);
+    // Overflow line
+    const overflowFillFunc = useCallback((context, shape) => {
+        for (const [_, columnOffset, columnWidth, cellBackground,] of columnSpans) {
+            context.beginPath();
+            const x = columnOffset - shape.x() + (overflowRight ? columnWidth : 0) + 0.5;
+            const strokeColor = cellBackground
+                ? getStringifiedColor(cellBackground, theme)
+                : defaultBackgroundColor;
+            context.moveTo(x, 1);
+            context.lineTo(x, shape.height());
+            context.setAttr("strokeStyle", strokeColor);
+            context.setAttr("lineWidth", 1 * scale);
+            context.stroke();
+            context.closePath();
+        }
+    }, [defaultBackgroundColor, columnSpans, theme, overflowRight, scale]);
+    // Show error tag
+    const showError = isError || isInvalid;
+    // Calculated
+    const isCalculatedCell = showCalculatedColumnIcon && isCalculatedColumn;
+    // Alignment
+    const isRightAligned = horizontalAlignment === "right";
+    // Spacing
+    const indentSpacing = indent ? indent * INDENT_SPACING : 0;
+    const iconSpacing = DEFAULT_CELL_SPACING;
+    const showExpand = false;
+    const leftSpacing = getLeftSpacing(isCalculatedCell, expandable, isRightAligned ? showExpand : false, iconSpacing, scale);
+    const rightSpacing = getRightSpacing(showFilter, showArrow, isRightAligned ? false : showExpand, iconSpacing, scale);
+    // final cell width
+    const finalCellWidth = cellWidth ?? 0;
+    // text
+    const 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.
+    const cfIconReserve = conditionalIcon
+        ? (CF_ICON_WIDTH + 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.
+    const finalTextWidth = (overflowRight
+        ? Math.max(textWidth, width)
+        : (enableOverflow ? finalCellWidth : width) -
+            rightSpacing -
+            leftSpacing -
+            indentSpacing) - cfIconReserve;
+    // Right aligned x
+    const textX = overflowRight
+        ? textWidth > width
+            ? x - (textWidth - width)
+            : x
+        : x +
+            (isRightAligned ? -indentSpacing - Math.floor((padding * scale) / 2) : 0);
+    // Text left padding
+    const textLeftPadding = textX +
+        leftSpacing +
+        borderWidth +
+        cfIconReserve +
+        (overflowRight
+            ? -leftSpacing - indentSpacing - rightSpacing - padding // Additional space
+            : indentSpacing);
+    // Overflow
+    const overflowX = overflowRight
+        ? enableOverflow
+            ? textX + (textWidth - finalCellWidth)
+            : textX
+        : textX;
+    const overflowWidth = finalCellWidth;
+    // Clip
+    const clipX = (enableOverflow ? overflowX : x) +
+        padding +
+        (overflowRight ? leftSpacing : 0);
+    const 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.
+    const textRotation = cellFormat?.textRotation;
+    const isStackedVertical = textRotation === "vertical";
+    const 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.
+    const shrinkEnabled = !!cellFormat?.shrinkToFit && !isStackedVertical;
+    const shrinkAvailableWidth = finalTextWidth - 2 * padding;
+    const effectiveFontSize = shrinkEnabled
+        ? computeShrinkToFitFontSize(textWidth, shrinkAvailableWidth, fontSize, true)
+        : fontSize;
+    // Wrap — disabled in stacked, shrink, or rotated modes.
+    const textWrapStrategy = isStackedVertical || shrinkEnabled || hasNumericRotation
+        ? "none"
+        : wrapStrategy === "wrap"
+            ? "word"
+            : "none";
+    const shouldWrap = wrapStrategy === "wrap" &&
+        !isStackedVertical &&
+        !shrinkEnabled &&
+        !hasNumericRotation;
+    const baseDisplayValue = normalizeDisplayText(value, shouldWrap);
+    const displayValue = isStackedVertical
+        ? stackTextVertically(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).
+    const approxTextHeight = effectiveFontSize * lineHeight;
+    const rotatedLayout = hasNumericRotation && typeof textRotation === "number"
+        ? getRotatedTextLayout({
+            cellX: x,
+            cellY: y,
+            cellWidth: width,
+            cellHeight: height,
+            paddingLeft: padding,
+            paddingRight: padding,
+            paddingTop: padding,
+            paddingBottom: padding,
+            naturalTextWidth: textWidth,
+            textHeight: approxTextHeight,
+            rotation: textRotation,
+            horizontalAlignment,
+            verticalAlignment: effectiveVerticalAlignment,
+        })
+        : undefined;
+    const rotationDegrees = rotatedLayout?.rotation ?? 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.
+    const dataBarHeight = Math.max(0, height - 2 * CF_DATABAR_INSET_Y * scale);
+    const dataBarMaxWidth = Math.max(0, width - 2);
+    const dataBarFill = conditionalDataBar
+        ? Math.max(0, Math.min(1, conditionalDataBar.fillFraction))
+        : 0;
+    const dataBarWidth = dataBarMaxWidth * dataBarFill;
+    const dataBarFromRight = 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).
+    const useRichTextRunPath = !showChip &&
+        !shrinkEnabled &&
+        !isStackedVertical &&
+        !hasNumericRotation &&
+        hasRenderableRuns(textFormatRuns ?? undefined);
+    return (React.createElement(React.Fragment, null,
+        enableOverflow && showGridLines ? (React.createElement(Shape, { x: x, y: y, width: width, height: height, sceneFunc: overflowFillFunc, listening: false })) : null,
+        conditionalDataBar && dataBarWidth > 0 ? (React.createElement(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.createElement(Text, { x: x + 2, y: y, width: CF_ICON_WIDTH * scale, height: height, text: conditionalIcon.glyph, fill: conditionalIcon.color ?? color ?? defaultColor, verticalAlign: "middle", align: "center", fontSize: fontSize, listening: false, perfectDrawEnabled: false })) : null,
+        showCheckbox ? (React.createElement(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.createElement(Group, { clipY: y + borderWidth, clipHeight: height, clipX: clipX, clipWidth: clipWidth }, showChip ? (React.createElement(Label, { width: width - CHIP_SPACING * scale, height: CHIP_HEIGHT * scale, x: textLeftPadding, y: getChipVerticalPosition(y, height, scale, verticalAlignment), offsetX: -CHIP_SPACING * scale, offsetY: -CHIP_SPACING * scale },
+            React.createElement(Tag, { height: CHIP_HEIGHT * scale, fill: chipBackgroundColor, cornerRadius: CHIP_RADIUS * scale, perfectDrawEnabled: false, hitStrokeWidth: 0 }),
+            React.createElement(Text, { text: displayValue, fill: 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.createElement(CellTextRuns, { x: textLeftPadding, y: y + cellSpacingY, width: finalTextWidth, height: height, padding: padding, value: displayValue ?? "", runs: textFormatRuns ?? [], baseColor: 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 ?? undefined, horizontalAlign: horizontalAlignment, verticalAlign: effectiveVerticalAlignment, lineHeight: lineHeight, wrap: shouldWrap, theme: theme })) : (React.createElement(Text, { x: rotatedLayout?.x ?? textLeftPadding, y: rotatedLayout?.y ?? y + cellSpacingY, offsetX: rotatedLayout?.offsetX, offsetY: rotatedLayout?.offsetY, height: rotatedLayout ? approxTextHeight : height, width: rotatedLayout?.width ?? finalTextWidth, text: displayValue, fill: 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.createElement(Image, { x: x, y: y, spacing: 1, width: width, height: height, url: imageUrl, perfectDrawEnabled: false, horizontalAlignment: horizontalAlignment, verticalAlignment: verticalAlignment })) : null,
+        showFilter ? (React.createElement(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.createElement(CellArrow, { scale: scale, onClick: onRequestEdit, rowIndex: rowIndex, columnIndex: columnIndex, x: x, y: y, height: height, width: width, verticalAlignment: verticalAlignment })) : null,
+        expandable ? (React.createElement(CellGroup, { scale: scale, onClick: (cell) => {
+                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.createElement(CellCalculated, { x: x, y: y, scale: scale, width: width, height: height, verticalAlignment: verticalAlignment, color: color })) : null,
+        showError ? (React.createElement(CellError, { color: isError ? ERROR_COLOR : INVALID_COLOR, x: x + width - ERROR_TAG_WIDTH * scale, y: y + 1, scale: scale })) : null,
+        showNote ? (React.createElement(CellError, { color: NOTE_COLOR, x: x + width - ERROR_TAG_WIDTH * scale, y: y + 1, scale: scale })) : null,
+        showComment ? (React.createElement(CellError, { color: COMMENT_COLOR, x: x + width - ERROR_TAG_WIDTH * scale, y: y + 1, scale: scale })) : null,
+        structuredValue ? (React.createElement(StructuredResult, { x: x, y: y, width: width, height: height, 
+            // Text props
+            textX: textLeftPadding, textY: y + cellSpacingY, textWidth: finalTextWidth, textFill: color ?? defaultColor, textVerticalAlign: verticalAlignment, textAlign: horizontalAlignment, textFontFamily: fontFamily, textFontStyle: textStyle, textFontSize: fontSize, textDecoration: textDecoration, textPadding: padding, textWrap: textWrapStrategy, textLineHeight: lineHeight, 
+            // / Text props
+            color: defaultBackgroundColor
+                ? getContrastColor(getStringifiedColor(defaultBackgroundColor, theme), getStringifiedColor({ theme: 1 }, theme), getStringifiedColor({ theme: 1, tint: 1 }, theme))
+                : undefined, structuredValue: structuredValue })) : null,
+        showExpand ? (React.createElement(CellExpand, { scale: scale, onClick: onRequestEdit, rowIndex: rowIndex, columnIndex: columnIndex, x: x, y: y, height: height, width: width, verticalAlignment: verticalAlignment, horizontalAlignment: horizontalAlignment })) : null));
+});
+Cell.displayName = "Cell";

package/dist/esm/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/esm/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/esm/components/cell/rich-text.js

@@ -0,0 +1,167 @@
+/**
+ * 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.
+ */
+const VISUAL_FORMAT_KEYS = [
+    "bold",
+    "italic",
+    "underline",
+    "strikethrough",
+    "color",
+    "fontFamily",
+    "fontSize",
+    "baselineOffset",
+];
+const isRenderableFormat = (format) => !!format && VISUAL_FORMAT_KEYS.some((k) => 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.
+ */
+export const hasRenderableRuns = (runs) => {
+    if (!runs || runs.length === 0)
+        return false;
+    for (const run of runs) {
+        if (run.nodeType === "mention")
+            return true;
+        if (isRenderableFormat(run.format))
+            return true;
+    }
+    return false;
+};
+/**
+ * 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 const buildRichTextSegments = (value, runs) => {
+    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.)
+    const sorted = [...runs].sort((a, b) => a.startIndex - b.startIndex);
+    const segments = [];
+    let cursor = 0;
+    const len = value.length;
+    for (const run of sorted) {
+        const start = Math.max(0, Math.min(len, run.startIndex));
+        const 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: run.format ?? {},
+                });
+            }
+        }
+        if (end > cursor)
+            cursor = end;
+    }
+    // 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;
+};
+/**
+ * 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 const segmentsToLines = (segments) => {
+    if (segments.length === 0)
+        return [[]];
+    const lines = [[]];
+    for (const seg of segments) {
+        if (!seg.text)
+            continue;
+        const parts = seg.text.split("\n");
+        for (let i = 0; i < parts.length; i++) {
+            if (i > 0)
+                lines.push([]);
+            const piece = parts[i];
+            if (piece) {
+                lines[lines.length - 1].push({ text: piece, format: seg.format });
+            }
+        }
+    }
+    return lines;
+};
+/**
+ * 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 const segmentToAtoms = (seg) => {
+    if (!seg.text)
+        return [];
+    const atoms = [];
+    // Tokenise into alternating whitespace / non-whitespace runs.
+    let i = 0;
+    while (i < seg.text.length) {
+        const ch = seg.text[i];
+        const isWs = ch === " " || ch === "\t";
+        let j = i + 1;
+        while (j < seg.text.length) {
+            const next = seg.text[j];
+            const 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;
+};