@glideappsfinal/glide-data-grid 6.0.9

package/src/cells/index.ts

@@ -0,0 +1,31 @@
+import { type InnerGridCell } from "../internal/data-grid/data-grid-types.js";
+import { booleanCellRenderer } from "./boolean-cell.js";
+import { bubbleCellRenderer } from "./bubble-cell.js";
+import type { InternalCellRenderer } from "./cell-types.js";
+import { drilldownCellRenderer } from "./drilldown-cell.js";
+import { imageCellRenderer } from "./image-cell.js";
+import { loadingCellRenderer } from "./loading-cell.js";
+import { markdownCellRenderer } from "./markdown-cell.js";
+import { markerCellRenderer } from "./marker-cell.js";
+import { newRowCellRenderer } from "./new-row-cell.js";
+import { numberCellRenderer } from "./number-cell.js";
+import { protectedCellRenderer } from "./protected-cell.js";
+import { rowIDCellRenderer } from "./row-id-cell.js";
+import { textCellRenderer } from "./text-cell.js";
+import { uriCellRenderer } from "./uri-cell.js";
+
+export const AllCellRenderers = [
+    markerCellRenderer,
+    newRowCellRenderer,
+    booleanCellRenderer,
+    bubbleCellRenderer,
+    drilldownCellRenderer,
+    imageCellRenderer,
+    loadingCellRenderer,
+    markdownCellRenderer,
+    numberCellRenderer,
+    protectedCellRenderer,
+    rowIDCellRenderer,
+    textCellRenderer,
+    uriCellRenderer,
+] as InternalCellRenderer<InnerGridCell>[];

package/src/cells/loading-cell.tsx

@@ -0,0 +1,56 @@
+import { withAlpha } from "../internal/data-grid/color-parser.js";
+import { roundedRect } from "../internal/data-grid/render/data-grid-lib.js";
+import { GridCellKind, type LoadingCell } from "../internal/data-grid/data-grid-types.js";
+import type { InternalCellRenderer } from "./cell-types.js";
+
+// returns a "random" number between -1 and 1
+function getRandomNumber(x: number, y: number): number {
+    let seed = x * 49_632 + y * 325_176;
+
+    // Inline Xorshift algorithm
+    seed ^= seed << 13;
+    seed ^= seed >> 17;
+    seed ^= seed << 5;
+
+    // eslint-disable-next-line unicorn/number-literal-case
+    return (seed / 0xff_ff_ff_ff) * 2;
+}
+
+export const loadingCellRenderer: InternalCellRenderer<LoadingCell> = {
+    getAccessibilityString: () => "",
+    kind: GridCellKind.Loading,
+    needsHover: false,
+    useLabel: false,
+    needsHoverPosition: false,
+    measure: () => 120,
+    draw: a => {
+        const { cell, col, row, ctx, rect, theme } = a;
+        if (cell.skeletonWidth === undefined || cell.skeletonWidth === 0) {
+            return;
+        }
+
+        let width = cell.skeletonWidth;
+        if (cell.skeletonWidthVariability !== undefined && cell.skeletonWidthVariability > 0) {
+            width += Math.round(getRandomNumber(col, row) * cell.skeletonWidthVariability);
+        }
+
+        const hpad = theme.cellHorizontalPadding;
+        if (width + hpad * 2 >= rect.width) {
+            width = rect.width - hpad * 2 - 1;
+        }
+
+        const rectHeight = cell.skeletonHeight ?? Math.min(18, rect.height - 2 * theme.cellVerticalPadding);
+
+        roundedRect(
+            ctx,
+            rect.x + hpad,
+            rect.y + (rect.height - rectHeight) / 2,
+            width,
+            rectHeight,
+            theme.roundingRadius ?? 3
+        );
+        ctx.fillStyle = withAlpha(theme.textDark, 0.1);
+        ctx.fill();
+    },
+    onPaste: () => undefined,
+};

package/src/cells/markdown-cell.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable react/display-name */
+import * as React from "react";
+import { MarkdownOverlayEditor } from "../internal/data-grid-overlay-editor/private/markdown-overlay-editor.js";
+import { drawTextCell, prepTextCell } from "../internal/data-grid/render/data-grid-lib.js";
+import { GridCellKind, type MarkdownCell } from "../internal/data-grid/data-grid-types.js";
+import type { InternalCellRenderer } from "./cell-types.js";
+
+export const markdownCellRenderer: InternalCellRenderer<MarkdownCell> = {
+    getAccessibilityString: c => c.data?.toString() ?? "",
+    kind: GridCellKind.Markdown,
+    needsHover: false,
+    needsHoverPosition: false,
+    drawPrep: prepTextCell,
+    measure: (ctx, cell, t) => {
+        const firstLine = cell.data.split("\n")[0];
+        return ctx.measureText(firstLine).width + 2 * t.cellHorizontalPadding;
+    },
+    draw: a => drawTextCell(a, a.cell.data, a.cell.contentAlign),
+    onDelete: c => ({
+        ...c,
+        data: "",
+    }),
+    provideEditor: () => p => {
+        const { onChange, value, target, onFinishedEditing, markdownDivCreateNode, forceEditMode, validatedSelection } =
+            p;
+        return (
+            <MarkdownOverlayEditor
+                onFinish={onFinishedEditing}
+                targetRect={target}
+                value={value}
+                validatedSelection={validatedSelection}
+                onChange={e =>
+                    onChange({
+                        ...value,
+                        data: e.target.value,
+                    })
+                }
+                forceEditMode={forceEditMode}
+                createNode={markdownDivCreateNode}
+            />
+        );
+    },
+    onPaste: (toPaste, cell) => (toPaste === cell.data ? undefined : { ...cell, data: toPaste }),
+};

package/src/cells/marker-cell.tsx

@@ -0,0 +1,110 @@
+import { getMiddleCenterBias } from "../internal/data-grid/render/data-grid-lib.js";
+import { InnerGridCellKind, type MarkerCell } from "../internal/data-grid/data-grid-types.js";
+import { drawCheckbox } from "../internal/data-grid/render/draw-checkbox.js";
+import type { BaseDrawArgs, InternalCellRenderer, PrepResult } from "./cell-types.js";
+
+export const markerCellRenderer: InternalCellRenderer<MarkerCell> = {
+    getAccessibilityString: c => c.row.toString(),
+    kind: InnerGridCellKind.Marker,
+    needsHover: true,
+    needsHoverPosition: false,
+    drawPrep: prepMarkerRowCell,
+    measure: () => 44,
+    draw: a =>
+        drawMarkerRowCell(a, a.cell.row, a.cell.checked, a.cell.markerKind, a.cell.drawHandle, a.cell.checkboxStyle),
+    onClick: e => {
+        const { bounds, cell, posX: x, posY: y } = e;
+        const { width, height } = bounds;
+
+        const centerX = cell.drawHandle ? 7 + (width - 7) / 2 : width / 2;
+        const centerY = height / 2;
+
+        if (Math.abs(x - centerX) <= 10 && Math.abs(y - centerY) <= 10) {
+            return {
+                ...cell,
+                checked: !cell.checked,
+            };
+        }
+        return undefined;
+    },
+    onPaste: () => undefined,
+};
+
+function prepMarkerRowCell(args: BaseDrawArgs, lastPrep: PrepResult | undefined): Partial<PrepResult> {
+    const { ctx, theme } = args;
+    const newFont = theme.markerFontFull;
+    const result: Partial<PrepResult> = lastPrep ?? {};
+    if (result?.font !== newFont) {
+        ctx.font = newFont;
+        result.font = newFont;
+    }
+    result.deprep = deprepMarkerRowCell;
+    ctx.textAlign = "center";
+    return result;
+}
+
+function deprepMarkerRowCell(args: Pick<BaseDrawArgs, "ctx">) {
+    const { ctx } = args;
+    ctx.textAlign = "start";
+}
+
+function drawMarkerRowCell(
+    args: BaseDrawArgs,
+    index: number,
+    checked: boolean,
+    markerKind: "checkbox" | "both" | "number" | "checkbox-visible",
+    drawHandle: boolean,
+    style: "circle" | "square"
+) {
+    const { ctx, rect, hoverAmount, theme } = args;
+    const { x, y, width, height } = rect;
+    const checkedboxAlpha = checked ? 1 : markerKind === "checkbox-visible" ? 0.6 + 0.4 * hoverAmount : hoverAmount;
+    if (markerKind !== "number" && checkedboxAlpha > 0) {
+        ctx.globalAlpha = checkedboxAlpha;
+        const offsetAmount = 7 * (checked ? hoverAmount : 1);
+        drawCheckbox(
+            ctx,
+            theme,
+            checked,
+            drawHandle ? x + offsetAmount : x,
+            y,
+            drawHandle ? width - offsetAmount : width,
+            height,
+            true,
+            undefined,
+            undefined,
+            theme.checkboxMaxSize,
+            "center",
+            style
+        );
+        if (drawHandle) {
+            ctx.globalAlpha = hoverAmount;
+            ctx.beginPath();
+            for (const xOffset of [3, 6]) {
+                for (const yOffset of [-5, -1, 3]) {
+                    ctx.rect(x + xOffset, y + height / 2 + yOffset, 2, 2);
+                }
+            }
+
+            ctx.fillStyle = theme.textLight;
+            ctx.fill();
+            ctx.beginPath();
+        }
+        ctx.globalAlpha = 1;
+    }
+    if (markerKind === "number" || (markerKind === "both" && !checked)) {
+        const text = index.toString();
+        const fontStyle = theme.markerFontFull;
+
+        const start = x + width / 2;
+        if (markerKind === "both" && hoverAmount !== 0) {
+            ctx.globalAlpha = 1 - hoverAmount;
+        }
+        ctx.fillStyle = theme.textLight;
+        ctx.font = fontStyle;
+        ctx.fillText(text, start, y + height / 2 + getMiddleCenterBias(ctx, fontStyle));
+        if (hoverAmount !== 0) {
+            ctx.globalAlpha = 1;
+        }
+    }
+}

package/src/cells/new-row-cell.tsx

@@ -0,0 +1,60 @@
+import { getMiddleCenterBias } from "../internal/data-grid/render/data-grid-lib.js";
+import { InnerGridCellKind, type NewRowCell } from "../internal/data-grid/data-grid-types.js";
+import type { BaseDrawArgs, InternalCellRenderer } from "./cell-types.js";
+
+export const newRowCellRenderer: InternalCellRenderer<NewRowCell> = {
+    getAccessibilityString: () => "",
+    kind: InnerGridCellKind.NewRow,
+    needsHover: true,
+    needsHoverPosition: false,
+    measure: () => 200,
+    draw: a => drawNewRowCell(a, a.cell.hint, a.cell.icon),
+    onPaste: () => undefined,
+};
+
+function drawNewRowCell(args: BaseDrawArgs, data: string, icon?: string) {
+    const { ctx, rect, hoverAmount, theme, spriteManager } = args;
+    const { x, y, width: w, height: h } = rect;
+    ctx.beginPath();
+    ctx.globalAlpha = hoverAmount;
+    ctx.rect(x + 1, y + 1, w, h - 2);
+    ctx.fillStyle = theme.bgHeaderHovered;
+    ctx.fill();
+    ctx.globalAlpha = 1;
+    ctx.beginPath();
+
+    const alwaysShowIcon = data !== "";
+
+    let textX = 0;
+
+    if (icon !== undefined) {
+        const padding = 8;
+        const size = h - padding;
+        const px = x + padding / 2;
+        const py = y + padding / 2;
+
+        spriteManager.drawSprite(icon, "normal", ctx, px, py, size, theme, alwaysShowIcon ? 1 : hoverAmount);
+        textX = size;
+    } else {
+        textX = 24;
+        const finalLineSize = 12;
+        const lineSize = alwaysShowIcon ? finalLineSize : hoverAmount * finalLineSize;
+        const xTranslate = alwaysShowIcon ? 0 : (1 - hoverAmount) * finalLineSize * 0.5;
+
+        const padPlus = theme.cellHorizontalPadding + 4;
+        if (lineSize > 0) {
+            ctx.moveTo(x + padPlus + xTranslate, y + h / 2);
+            ctx.lineTo(x + padPlus + xTranslate + lineSize, y + h / 2);
+            ctx.moveTo(x + padPlus + xTranslate + lineSize * 0.5, y + h / 2 - lineSize * 0.5);
+            ctx.lineTo(x + padPlus + xTranslate + lineSize * 0.5, y + h / 2 + lineSize * 0.5);
+            ctx.lineWidth = 2;
+            ctx.strokeStyle = theme.bgIconHeader;
+            ctx.lineCap = "round";
+            ctx.stroke();
+        }
+    }
+
+    ctx.fillStyle = theme.textMedium;
+    ctx.fillText(data, textX + x + theme.cellHorizontalPadding + 0.5, y + h / 2 + getMiddleCenterBias(ctx, theme));
+    ctx.beginPath();
+}

package/src/cells/number-cell.tsx

@@ -0,0 +1,64 @@
+/* eslint-disable react/display-name */
+import * as React from "react";
+import { drawTextCell, prepTextCell } from "../internal/data-grid/render/data-grid-lib.js";
+import { GridCellKind, type NumberCell } from "../internal/data-grid/data-grid-types.js";
+import type { InternalCellRenderer } from "./cell-types.js";
+import { drawEditHoverIndicator } from "../internal/data-grid/render/draw-edit-hover-indicator.js";
+
+const NumberOverlayEditor = React.lazy(
+    async () => await import("../internal/data-grid-overlay-editor/private/number-overlay-editor.js")
+);
+
+export const numberCellRenderer: InternalCellRenderer<NumberCell> = {
+    getAccessibilityString: c => c.data?.toString() ?? "",
+    kind: GridCellKind.Number,
+    needsHover: cell => cell.hoverEffect === true,
+    needsHoverPosition: false,
+    useLabel: true,
+    drawPrep: prepTextCell,
+    draw: a => {
+        const { hoverAmount, cell, ctx, theme, rect, overrideCursor } = a;
+        const { hoverEffect, displayData, hoverEffectTheme } = cell;
+
+        if (hoverEffect === true && hoverAmount > 0) {
+            drawEditHoverIndicator(ctx, theme, hoverEffectTheme, displayData, rect, hoverAmount, overrideCursor);
+        }
+        drawTextCell(a, a.cell.displayData, a.cell.contentAlign);
+    },
+    measure: (ctx, cell, theme) => ctx.measureText(cell.displayData).width + theme.cellHorizontalPadding * 2,
+    onDelete: c => ({
+        ...c,
+        data: undefined,
+    }),
+    provideEditor: () => p => {
+        const { isHighlighted, onChange, value, validatedSelection } = p;
+        return (
+            <React.Suspense fallback={null}>
+                <NumberOverlayEditor
+                    highlight={isHighlighted}
+                    disabled={value.readonly === true}
+                    value={value.data}
+                    fixedDecimals={value.fixedDecimals}
+                    allowNegative={value.allowNegative}
+                    thousandSeparator={value.thousandSeparator}
+                    decimalSeparator={value.decimalSeparator}
+                    validatedSelection={validatedSelection}
+                    onChange={x =>
+                        onChange({
+                            ...value,
+                            data: Number.isNaN(x.floatValue ?? 0) ? 0 : x.floatValue,
+                        })
+                    }
+                />
+            </React.Suspense>
+        );
+    },
+    onPaste: (toPaste, cell, details) => {
+        const newNumber =
+            typeof details.rawValue === "number"
+                ? details.rawValue
+                : Number.parseFloat(typeof details.rawValue === "string" ? details.rawValue : toPaste);
+        if (Number.isNaN(newNumber) || cell.data === newNumber) return undefined;
+        return { ...cell, data: newNumber, displayData: details.formattedString ?? cell.displayData };
+    },
+};

package/src/cells/protected-cell.tsx

@@ -0,0 +1,42 @@
+import { degreesToRadians } from "../common/utils.js";
+import { GridCellKind, type ProtectedCell } from "../internal/data-grid/data-grid-types.js";
+import type { BaseDrawArgs, InternalCellRenderer } from "./cell-types.js";
+
+export const protectedCellRenderer: InternalCellRenderer<ProtectedCell> = {
+    getAccessibilityString: () => "",
+    measure: () => 108,
+    kind: GridCellKind.Protected,
+    needsHover: false,
+    needsHoverPosition: false,
+    draw: drawProtectedCell,
+    onPaste: () => undefined,
+};
+
+function drawProtectedCell(args: BaseDrawArgs) {
+    const { ctx, theme, rect } = args;
+    const { x, y, height: h } = rect;
+
+    ctx.beginPath();
+
+    const radius = 2.5;
+    let xStart = x + theme.cellHorizontalPadding + radius;
+    const center = y + h / 2;
+    const p = Math.cos(degreesToRadians(30)) * radius;
+    const q = Math.sin(degreesToRadians(30)) * radius;
+
+    for (let i = 0; i < 12; i++) {
+        ctx.moveTo(xStart, center - radius);
+        ctx.lineTo(xStart, center + radius);
+
+        ctx.moveTo(xStart + p, center - q);
+        ctx.lineTo(xStart - p, center + q);
+
+        ctx.moveTo(xStart - p, center - q);
+        ctx.lineTo(xStart + p, center + q);
+        xStart += 8;
+    }
+    ctx.lineWidth = 1.1;
+    ctx.lineCap = "square";
+    ctx.strokeStyle = theme.textLight;
+    ctx.stroke();
+}

package/src/cells/row-id-cell.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { GrowingEntry } from "../internal/growing-entry/growing-entry.js";
+import { drawTextCell, prepTextCell } from "../internal/data-grid/render/data-grid-lib.js";
+import { GridCellKind, type RowIDCell } from "../internal/data-grid/data-grid-types.js";
+import type { InternalCellRenderer } from "./cell-types.js";
+
+export const rowIDCellRenderer: InternalCellRenderer<RowIDCell> = {
+    getAccessibilityString: c => c.data?.toString() ?? "",
+    kind: GridCellKind.RowID,
+    needsHover: false,
+    needsHoverPosition: false,
+    drawPrep: (a, b) => prepTextCell(a, b, a.theme.textLight),
+    draw: a => drawTextCell(a, a.cell.data, a.cell.contentAlign),
+    measure: (ctx, cell, theme) => ctx.measureText(cell.data).width + theme.cellHorizontalPadding * 2,
+    // eslint-disable-next-line react/display-name
+    provideEditor: () => p => {
+        const { isHighlighted, onChange, value, validatedSelection } = p;
+        return (
+            <GrowingEntry
+                highlight={isHighlighted}
+                autoFocus={value.readonly !== true}
+                disabled={value.readonly !== false}
+                value={value.data}
+                validatedSelection={validatedSelection}
+                onChange={e =>
+                    onChange({
+                        ...value,
+                        data: e.target.value,
+                    })
+                }
+            />
+        );
+    },
+    onPaste: () => undefined,
+};

package/src/cells/text-cell.tsx

@@ -0,0 +1,63 @@
+/* eslint-disable react/display-name */
+import * as React from "react";
+import { GrowingEntry } from "../internal/growing-entry/growing-entry.js";
+import { drawTextCell, prepTextCell } from "../internal/data-grid/render/data-grid-lib.js";
+import { GridCellKind, type TextCell } from "../internal/data-grid/data-grid-types.js";
+import type { InternalCellRenderer } from "./cell-types.js";
+import { drawEditHoverIndicator } from "../internal/data-grid/render/draw-edit-hover-indicator.js";
+
+export const textCellRenderer: InternalCellRenderer<TextCell> = {
+    getAccessibilityString: c => c.data?.toString() ?? "",
+    kind: GridCellKind.Text,
+    needsHover: textCell => textCell.hoverEffect === true,
+    needsHoverPosition: false,
+    drawPrep: prepTextCell,
+    useLabel: true,
+    draw: a => {
+        const { cell, hoverAmount, hyperWrapping, ctx, rect, theme, overrideCursor } = a;
+        const { displayData, contentAlign, hoverEffect, allowWrapping, hoverEffectTheme } = cell;
+        if (hoverEffect === true && hoverAmount > 0) {
+            drawEditHoverIndicator(ctx, theme, hoverEffectTheme, displayData, rect, hoverAmount, overrideCursor);
+        }
+        drawTextCell(a, displayData, contentAlign, allowWrapping, hyperWrapping);
+    },
+    measure: (ctx, cell, t) => {
+        const lines = cell.displayData.split("\n", cell.allowWrapping === true ? undefined : 1);
+        let maxLineWidth = 0;
+        for (const line of lines) {
+            maxLineWidth = Math.max(maxLineWidth, ctx.measureText(line).width);
+        }
+        return maxLineWidth + 2 * t.cellHorizontalPadding;
+    },
+    onDelete: c => ({
+        ...c,
+        data: "",
+    }),
+    provideEditor: cell => ({
+        disablePadding: cell.allowWrapping === true,
+        editor: p => {
+            const { isHighlighted, onChange, value, validatedSelection } = p;
+            return (
+                <GrowingEntry
+                    style={cell.allowWrapping === true ? { padding: "3px 8.5px" } : undefined}
+                    highlight={isHighlighted}
+                    autoFocus={value.readonly !== true}
+                    disabled={value.readonly === true}
+                    altNewline={true}
+                    value={value.data}
+                    validatedSelection={validatedSelection}
+                    onChange={e =>
+                        onChange({
+                            ...value,
+                            data: e.target.value,
+                        })
+                    }
+                />
+            );
+        },
+    }),
+    onPaste: (toPaste, cell, details) =>
+        toPaste === cell.data
+            ? undefined
+            : { ...cell, data: toPaste, displayData: details.formattedString ?? cell.displayData },
+};

package/src/cells/uri-cell.tsx

@@ -0,0 +1,155 @@
+/* eslint-disable react/display-name */
+import * as React from "react";
+import UriOverlayEditor from "../internal/data-grid-overlay-editor/private/uri-overlay-editor.js";
+import {
+    drawTextCell,
+    getMeasuredTextCache,
+    getMiddleCenterBias,
+    measureTextCached,
+    prepTextCell,
+} from "../internal/data-grid/render/data-grid-lib.js";
+import {
+    GridCellKind,
+    type BaseGridCell,
+    type Rectangle,
+    type UriCell,
+} from "../internal/data-grid/data-grid-types.js";
+import type { InternalCellRenderer } from "./cell-types.js";
+import type { FullTheme } from "../common/styles.js";
+import { pointInRect } from "../common/math.js";
+
+function getTextRect(
+    metrics: TextMetrics,
+    rect: Rectangle,
+    theme: FullTheme,
+    contentAlign: BaseGridCell["contentAlign"]
+): Rectangle {
+    let x = theme.cellHorizontalPadding;
+    const y = rect.height / 2 - metrics.actualBoundingBoxAscent / 2;
+    const width = metrics.width;
+    const height = metrics.actualBoundingBoxAscent;
+
+    if (contentAlign === "right") {
+        x = rect.width - width - theme.cellHorizontalPadding;
+    } else if (contentAlign === "center") {
+        x = rect.width / 2 - width / 2;
+    }
+
+    return { x, y, width, height };
+}
+
+function isOverLinkText(e: {
+    readonly cell: UriCell;
+    readonly posX: number;
+    readonly posY: number;
+    readonly bounds: Rectangle;
+    readonly theme: FullTheme;
+}): boolean {
+    const { cell, bounds, posX, posY, theme } = e;
+    const txt = cell.displayData ?? cell.data;
+    if (cell.hoverEffect !== true || cell.onClickUri === undefined) return false;
+
+    const m = getMeasuredTextCache(txt, theme.baseFontFull);
+    if (m === undefined) return false;
+    const textRect = getTextRect(m, bounds, theme, cell.contentAlign);
+    return pointInRect(
+        {
+            x: textRect.x - 4,
+            y: textRect.y - 4,
+            width: textRect.width + 8,
+            height: textRect.height + 8,
+        },
+        posX,
+        posY
+    );
+}
+
+export const uriCellRenderer: InternalCellRenderer<UriCell> = {
+    getAccessibilityString: c => c.data?.toString() ?? "",
+    kind: GridCellKind.Uri,
+    needsHover: uriCell => uriCell.hoverEffect === true,
+    needsHoverPosition: true,
+    useLabel: true,
+    drawPrep: prepTextCell,
+    draw: a => {
+        const { cell, theme, overrideCursor, hoverX, hoverY, rect, ctx } = a;
+        const txt = cell.displayData ?? cell.data;
+        const isLinky = cell.hoverEffect === true;
+        if (overrideCursor !== undefined && isLinky && hoverX !== undefined && hoverY !== undefined) {
+            const m = measureTextCached(txt, ctx, theme.baseFontFull);
+            const textRect = getTextRect(m, rect, theme, cell.contentAlign);
+
+            const { x, y, width: w, height: h } = textRect;
+
+            // check if hoverX and hoverY inside the box
+            if (hoverX >= x - 4 && hoverX <= x - 4 + w + 8 && hoverY >= y - 4 && hoverY <= y - 4 + h + 8) {
+                const middleCenterBias = getMiddleCenterBias(ctx, theme.baseFontFull);
+                overrideCursor("pointer");
+                const underlineOffset = 5;
+                const drawY = y - middleCenterBias;
+
+                ctx.beginPath();
+                ctx.moveTo(rect.x + x, Math.floor(rect.y + drawY + h + underlineOffset) + 0.5);
+                ctx.lineTo(rect.x + x + w, Math.floor(rect.y + drawY + h + underlineOffset) + 0.5);
+
+                ctx.strokeStyle = theme.linkColor;
+                ctx.stroke();
+
+                ctx.save();
+                ctx.fillStyle = a.cellFillColor;
+                drawTextCell({ ...a, rect: { ...rect, x: rect.x - 1 } }, txt, cell.contentAlign);
+                drawTextCell({ ...a, rect: { ...rect, x: rect.x - 2 } }, txt, cell.contentAlign);
+                drawTextCell({ ...a, rect: { ...rect, x: rect.x + 1 } }, txt, cell.contentAlign);
+                drawTextCell({ ...a, rect: { ...rect, x: rect.x + 2 } }, txt, cell.contentAlign);
+                ctx.restore();
+            }
+        }
+
+        ctx.fillStyle = isLinky ? theme.linkColor : theme.textDark;
+        drawTextCell(a, txt, cell.contentAlign);
+    },
+    onSelect: e => {
+        if (isOverLinkText(e)) {
+            e.preventDefault();
+        }
+    },
+    onClick: a => {
+        const { cell } = a;
+        const didClick = isOverLinkText(a);
+        if (didClick) {
+            cell.onClickUri?.(a);
+        }
+        return undefined;
+    },
+    measure: (ctx, cell, theme) =>
+        ctx.measureText(cell.displayData ?? cell.data).width + theme.cellHorizontalPadding * 2,
+    onDelete: c => ({
+        ...c,
+        data: "",
+    }),
+    provideEditor: cell => p => {
+        const { onChange, value, forceEditMode, validatedSelection } = p;
+        return (
+            <UriOverlayEditor
+                forceEditMode={
+                    value.readonly !== true &&
+                    (forceEditMode || (cell.hoverEffect === true && cell.onClickUri !== undefined))
+                }
+                uri={value.data}
+                preview={value.displayData ?? value.data}
+                validatedSelection={validatedSelection}
+                readonly={value.readonly === true}
+                onChange={e =>
+                    onChange({
+                        ...value,
+                        data: e.target.value,
+                    })
+                }
+            />
+        );
+    },
+    onPaste: (toPaste, cell, details) =>
+        toPaste === cell.data
+            ? undefined
+            : { ...cell, data: toPaste, displayData: details.formattedString ?? cell.displayData },
+};