@glideappsfinal/glide-data-grid 6.0.9

package/src/data-editor/copy-paste.ts

@@ -0,0 +1,320 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { assertNever } from "../common/support.js";
+import {
+    BooleanEmpty,
+    BooleanIndeterminate,
+    GridCellKind,
+    type GridCell,
+} from "../internal/data-grid/data-grid-types.js";
+
+type StringArrayCellBuffer = {
+    formatted: string[];
+    rawValue: string[];
+    format: "string-array";
+    doNotEscape?: boolean;
+};
+
+type BasicCellBuffer = {
+    formatted: string;
+    rawValue: string | number | boolean | BooleanEmpty | BooleanIndeterminate | undefined;
+    format: "string" | "number" | "boolean" | "url";
+    doNotEscape?: boolean;
+};
+export type CellBuffer = StringArrayCellBuffer | BasicCellBuffer;
+export type CopyBuffer = CellBuffer[][];
+
+function convertCellToBuffer(cell: GridCell): CellBuffer {
+    if (cell.copyData !== undefined) {
+        return {
+            formatted: cell.copyData,
+            rawValue: cell.copyData,
+            format: "string",
+            // Do not escape the copy value if it was explicitly specified via copyData:
+            doNotEscape: true,
+        };
+    }
+    switch (cell.kind) {
+        case GridCellKind.Boolean:
+            return {
+                formatted:
+                    cell.data === true
+                        ? "TRUE"
+                        : cell.data === false
+                        ? "FALSE"
+                        : cell.data === BooleanIndeterminate
+                        ? "INDETERMINATE"
+                        : "",
+                rawValue: cell.data,
+                format: "boolean",
+            };
+        case GridCellKind.Custom:
+            return {
+                formatted: cell.copyData,
+                rawValue: cell.copyData,
+                format: "string",
+            };
+        case GridCellKind.Image:
+        case GridCellKind.Bubble:
+            return {
+                formatted: cell.data,
+                rawValue: cell.data,
+                format: "string-array",
+            };
+        case GridCellKind.Drilldown:
+            return {
+                formatted: cell.data.map(x => x.text),
+                rawValue: cell.data.map(x => x.text),
+                format: "string-array",
+            };
+        case GridCellKind.Text:
+            return {
+                formatted: cell.displayData ?? cell.data,
+                rawValue: cell.data,
+                format: "string",
+            };
+        case GridCellKind.Uri:
+            return {
+                formatted: cell.displayData ?? cell.data,
+                rawValue: cell.data,
+                format: "url",
+            };
+        case GridCellKind.Markdown:
+        case GridCellKind.RowID:
+            return {
+                formatted: cell.data,
+                rawValue: cell.data,
+                format: "string",
+            };
+        case GridCellKind.Number:
+            return {
+                formatted: cell.displayData,
+                rawValue: cell.data,
+                format: "number",
+            };
+        case GridCellKind.Loading:
+            return {
+                formatted: "#LOADING",
+                rawValue: "",
+                format: "string",
+            };
+        case GridCellKind.Protected:
+            return {
+                formatted: "************",
+                rawValue: "",
+                format: "string",
+            };
+        default:
+            assertNever(cell);
+    }
+}
+
+function createBufferFromGridCells(
+    cells: readonly (readonly GridCell[])[],
+    columnIndexes: readonly number[]
+): CopyBuffer {
+    const copyBuffer: CopyBuffer = cells.map((row, index) => {
+        const mappedIndex = columnIndexes[index];
+        return row.map(cell => {
+            if (cell.span !== undefined && cell.span[0] !== mappedIndex)
+                return {
+                    formatted: "",
+                    rawValue: "",
+                    format: "string",
+                };
+            return convertCellToBuffer(cell);
+        });
+    });
+    return copyBuffer;
+}
+
+function escapeIfNeeded(str: string, withComma: boolean): string {
+    if ((withComma ? /[\t\n",]/ : /[\t\n"]/).test(str)) {
+        str = `"${str.replace(/"/g, '""')}"`;
+    }
+    return str;
+}
+
+function createTextBuffer(copyBuffer: CopyBuffer): string {
+    const lines: string[] = [];
+    for (const row of copyBuffer) {
+        const line: string[] = [];
+        for (const cell of row) {
+            if (cell.format === "url") {
+                line.push(cell.rawValue?.toString() ?? "");
+            } else if (cell.format === "string-array") {
+                line.push(cell.formatted.map(x => escapeIfNeeded(x, true)).join(","));
+            } else {
+                line.push(cell.doNotEscape === true ? cell.formatted : escapeIfNeeded(cell.formatted, false));
+            }
+        }
+        lines.push(line.join("\t"));
+    }
+    return lines.join("\n");
+}
+
+function formatHtmlTextContent(text: string): string {
+    // The following formatting for the `html` variable ensures that when pasting,
+    // spaces are preserved in both Google Sheets and Excel. This is done by:
+    // 1. Replacing tabs with four spaces for consistency. Also google sheets disallows any tabs.
+    // 2. Wrapping each space with a span element to prevent them from being collapsed or ignored during the
+    //    paste operation
+    return text.replace(/\t/g, "    ").replace(/ {2,}/g, match => "<span> </span>".repeat(match.length));
+}
+
+function formatHtmlAttributeContent(attrText: string): string {
+    // Escape all quotes, lt, gt, and other special characters
+    return (
+        '"' + attrText.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;") + '"'
+    );
+}
+
+function restoreHtmlEntities(str: string): string {
+    // Unescape all quotes, lt, gt, and other special characters
+    return str
+        .replace(/&quot;/g, '"')
+        .replace(/&lt;/g, "<")
+        .replace(/&gt;/g, ">")
+        .replace(/&amp;/g, "&");
+}
+
+function createHtmlBuffer(copyBuffer: CopyBuffer): string {
+    const lines: string[] = [];
+    lines.push(`<style type="text/css"><!--br {mso-data-placement:same-cell;}--></style>`, "<table><tbody>");
+    for (const row of copyBuffer) {
+        lines.push("<tr>");
+        for (const cell of row) {
+            const formatStr = `gdg-format="${cell.format}"`;
+            if (cell.format === "url") {
+                lines.push(
+                    `<td ${formatStr}><a href="${cell.rawValue}">${formatHtmlTextContent(cell.formatted)}</a></td>`
+                );
+            } else {
+                if (cell.format === "string-array") {
+                    lines.push(
+                        `<td ${formatStr}><ol>${cell.formatted
+                            .map(
+                                (x, ind) =>
+                                    `<li gdg-raw-value=${formatHtmlAttributeContent(cell.rawValue[ind])}>` +
+                                    formatHtmlTextContent(x) +
+                                    "</li>"
+                            )
+                            .join("")}</ol></td>`
+                    );
+                } else {
+                    lines.push(
+                        `<td gdg-raw-value=${formatHtmlAttributeContent(
+                            cell.rawValue?.toString() ?? ""
+                        )} ${formatStr}>${formatHtmlTextContent(cell.formatted)}</td>`
+                    );
+                }
+            }
+        }
+        lines.push("</tr>");
+    }
+    lines.push("</tbody></table>");
+    return lines.join("");
+}
+
+// This function encodes grid cells to a table object.
+// Each td in the table contains one of 3 things
+// - A string directly and the td has a `gdg-raw-value` attribute with the raw value
+// - An anchor tag with a href and the text is the formatted value
+// - An ordered list with each item containing a `gdg-raw-value` attribute with the raw value
+export function getCopyBufferContents(
+    cells: readonly (readonly GridCell[])[],
+    columnIndexes: readonly number[]
+): {
+    readonly textPlain: string;
+    readonly textHtml: string;
+} {
+    const copyBuffer = createBufferFromGridCells(cells, columnIndexes);
+    const textPlain = createTextBuffer(copyBuffer);
+    const textHtml = createHtmlBuffer(copyBuffer);
+    return {
+        textPlain,
+        textHtml,
+    };
+}
+
+export function decodeHTML(html: string): CopyBuffer | undefined {
+    const fragment = document.createElement("html");
+    // we dont want to retain the pasted non-breaking spaces
+    fragment.innerHTML = html.replace(/&nbsp;/g, " ");
+    const tableEl = fragment.querySelector("table");
+    if (tableEl === null) return undefined;
+    const walkEl: Element[] = [tableEl];
+    const result: CellBuffer[][] = [];
+    let current: CellBuffer[] | undefined;
+
+    while (walkEl.length > 0) {
+        const el = walkEl.pop();
+
+        if (el === undefined) break;
+
+        if (el instanceof HTMLTableElement || el.nodeName === "TBODY") {
+            walkEl.push(...[...el.children].reverse());
+        } else if (el instanceof HTMLTableRowElement) {
+            if (current !== undefined) {
+                result.push(current);
+            }
+            current = [];
+            walkEl.push(...[...el.children].reverse());
+        } else if (el instanceof HTMLTableCellElement) {
+            // be careful not to use innerText here as its behavior is not well defined for non DOM attached nodes
+            const clone: HTMLTableCellElement = el.cloneNode(true) as HTMLTableCellElement;
+
+            // Apple numbers seems to always wrap the cell in a p tag and a font tag. It also puts both <br> and \n
+            // linebreak markers in the code. This is both unneeded and causes issues with the paste code.
+            const firstTagIsPara = clone.children.length === 1 && clone.children[0].nodeName === "P";
+            const para = firstTagIsPara ? clone.children[0] : null;
+            const isAppleNumbers = para?.children.length === 1 && para.children[0].nodeName === "FONT";
+
+            const brs = clone.querySelectorAll("br");
+            for (const br of brs) {
+                br.replaceWith("\n");
+            }
+
+            const attributeValue = clone.getAttribute("gdg-raw-value");
+            const formatValue = (clone.getAttribute("gdg-format") ?? "string") as any; // fix me at some point
+            if (clone.querySelector("a") !== null) {
+                current?.push({
+                    // raw value is the href
+                    rawValue: clone.querySelector("a")?.getAttribute("href") ?? "",
+                    formatted: clone.textContent ?? "",
+                    format: formatValue,
+                });
+            } else if (clone.querySelector("ol") !== null) {
+                const rawValues = clone.querySelectorAll("li");
+                current?.push({
+                    rawValue: [...rawValues].map(x => x.getAttribute("gdg-raw-value") ?? ""),
+                    formatted: [...rawValues].map(x => x.textContent ?? ""),
+                    format: "string-array",
+                });
+            } else if (attributeValue !== null) {
+                current?.push({
+                    rawValue: restoreHtmlEntities(attributeValue),
+                    formatted: clone.textContent ?? "",
+                    format: formatValue,
+                });
+            } else {
+                let textContent = clone.textContent ?? "";
+                if (isAppleNumbers) {
+                    // replace any newline not preceded by a newline
+                    textContent = textContent.replace(/\n(?!\n)/g, "");
+                }
+
+                current?.push({
+                    rawValue: textContent ?? "",
+                    formatted: textContent ?? "",
+                    format: formatValue,
+                });
+            }
+        }
+    }
+
+    if (current !== undefined) {
+        result.push(current);
+    }
+
+    return result;
+}

package/src/data-editor/data-editor-fns.ts

@@ -0,0 +1,227 @@
+import type { DataGridSearchProps } from "../internal/data-grid-search/data-grid-search.js";
+import { type GridCell, type GridSelection, type Rectangle } from "../internal/data-grid/data-grid-types.js";
+import { getCopyBufferContents, type CopyBuffer } from "./copy-paste.js";
+
+export function expandSelection(
+    newVal: GridSelection,
+    getCellsForSelection: DataGridSearchProps["getCellsForSelection"],
+    rowMarkerOffset: number,
+    spanRangeBehavior: "allowPartial" | "default",
+    abortController: AbortController
+): GridSelection {
+    const origVal = newVal;
+    if (spanRangeBehavior === "allowPartial" || newVal.current === undefined || getCellsForSelection === undefined)
+        return newVal;
+    let isFilled = false;
+    do {
+        if (newVal?.current === undefined) break;
+        const r: Rectangle = newVal.current?.range;
+        const cells: (readonly GridCell[])[] = [];
+        if (r.width > 2) {
+            const leftCells = getCellsForSelection(
+                {
+                    x: r.x,
+                    y: r.y,
+                    width: 1,
+                    height: r.height,
+                },
+                abortController.signal
+            );
+
+            if (typeof leftCells === "function") {
+                return origVal;
+            }
+
+            cells.push(...leftCells);
+
+            const rightCells = getCellsForSelection(
+                {
+                    x: r.x + r.width - 1,
+                    y: r.y,
+                    width: 1,
+                    height: r.height,
+                },
+                abortController.signal
+            );
+
+            if (typeof rightCells === "function") {
+                return origVal;
+            }
+
+            cells.push(...rightCells);
+        } else {
+            const rCells = getCellsForSelection(
+                {
+                    x: r.x,
+                    y: r.y,
+                    width: r.width,
+                    height: r.height,
+                },
+                abortController.signal
+            );
+            if (typeof rCells === "function") {
+                return origVal;
+            }
+            cells.push(...rCells);
+        }
+
+        let left = r.x - rowMarkerOffset;
+        let right = r.x + r.width - 1 - rowMarkerOffset;
+        for (const row of cells) {
+            for (const cell of row) {
+                if (cell.span === undefined) continue;
+                left = Math.min(cell.span[0], left);
+                right = Math.max(cell.span[1], right);
+            }
+        }
+
+        if (left === r.x - rowMarkerOffset && right === r.x + r.width - 1 - rowMarkerOffset) {
+            isFilled = true;
+        } else {
+            newVal = {
+                current: {
+                    cell: newVal.current.cell ?? [0, 0],
+                    range: {
+                        x: left + rowMarkerOffset,
+                        y: r.y,
+                        width: right - left + 1,
+                        height: r.height,
+                    },
+                    rangeStack: newVal.current.rangeStack,
+                },
+                columns: newVal.columns,
+                rows: newVal.rows,
+            };
+        }
+    } while (!isFilled);
+    return newVal;
+}
+
+function descape(s: string): string {
+    if (s.startsWith('"') && s.endsWith('"')) {
+        s = s.slice(1, -1).replace(/""/g, '"');
+    }
+    return s;
+}
+
+export function unquote(str: string): CopyBuffer {
+    const enum State {
+        None,
+        inString,
+        inStringPostQuote,
+    }
+
+    const result: string[][] = [];
+    let current: string[] = [];
+
+    let start = 0;
+    let state = State.None;
+    str = str.replace(/\r\n/g, "\n");
+    let index = 0;
+    for (const char of str) {
+        switch (state) {
+            case State.None:
+                if (char === "\t" || char === "\n") {
+                    current.push(str.slice(start, index));
+                    start = index + 1;
+
+                    if (char === "\n") {
+                        result.push(current);
+                        current = [];
+                    }
+                } else if (char === `"`) {
+                    state = State.inString;
+                }
+                break;
+            case State.inString:
+                if (char === `"`) {
+                    state = State.inStringPostQuote;
+                }
+                break;
+            case State.inStringPostQuote:
+                if (char === '"') {
+                    state = State.inString;
+                } else if (char === "\t" || char === "\n") {
+                    current.push(descape(str.slice(start, index)));
+                    start = index + 1;
+
+                    if (char === "\n") {
+                        result.push(current);
+                        current = [];
+                    }
+                    state = State.None;
+                } else {
+                    state = State.None;
+                }
+                break;
+        }
+
+        index++;
+    }
+    if (start < str.length) {
+        current.push(descape(str.slice(start, str.length)));
+    }
+    result.push(current);
+    return result.map(r => r.map(c => ({ rawValue: c, formatted: c, format: "string" })));
+}
+
+export function copyToClipboard(
+    cells: readonly (readonly GridCell[])[],
+    columnIndexes: readonly number[],
+    e?: ClipboardEvent
+) {
+    const copyBuffer = getCopyBufferContents(cells, columnIndexes);
+
+    // eslint-disable-next-line unicorn/consistent-function-scoping
+    const copyWithWriteText = (s: string) => {
+        void window.navigator.clipboard?.writeText(s);
+    };
+
+    const copyWithWrite = (s: string, html: string): boolean => {
+        if (window.navigator.clipboard?.write === undefined) return false;
+        void window.navigator.clipboard.write([
+            new ClipboardItem({
+                // eslint-disable-next-line sonarjs/no-duplicate-string
+                "text/plain": new Blob([s], { type: "text/plain" }),
+                "text/html": new Blob([html], {
+                    type: "text/html",
+                }),
+            }),
+        ]);
+        return true;
+    };
+
+    const copyWithClipboardData = (s: string, html: string) => {
+        try {
+            if (e === undefined || e.clipboardData === null) throw new Error("No clipboard data");
+
+            // This might fail if we had to await the thunk
+            e?.clipboardData?.setData("text/plain", s);
+            e?.clipboardData?.setData("text/html", html);
+        } catch {
+            if (!copyWithWrite(s, html)) {
+                copyWithWriteText(s);
+            }
+        }
+    };
+
+    if (window.navigator.clipboard?.write !== undefined || e?.clipboardData !== undefined) {
+        void copyWithClipboardData(copyBuffer.textPlain, copyBuffer.textHtml);
+    } else {
+        void copyWithWriteText(copyBuffer.textPlain);
+    }
+
+    e?.preventDefault();
+}
+
+/**
+ * Checkbox behavior:
+ *
+ * true + click -> unchecked
+ * false + click -> checked
+ * indeterminate + click -> checked
+ * empty + click -> checked
+ */
+export function toggleBoolean(data: boolean | null | undefined): boolean | null | undefined {
+    return data !== true;
+}