@visactor/vtable 1.22.6-alpha.3 → 1.22.7-alpha.0

package/es/event/event.d.ts

@@ -43,6 +43,10 @@ export declare class EventManager {
     private cutOperationTime;
     lastClipboardContent: string;
     cutCellRange: CellInfo[][] | null;
+    copySourceRange: {
+        startCol: number;
+        startRow: number;
+    } | null;
     constructor(table: BaseTableAPI);
     bindOuterEvent(): void;
     updateEventBinder(): void;
@@ -68,14 +72,19 @@ export declare class EventManager {
     enableScroll(): void;
     disableScroll(): void;
     handleCopy(e: KeyboardEvent, isCut?: boolean): Promise<void>;
+    private fallbackCopyToClipboard;
     handleCut(e: KeyboardEvent): Promise<void>;
     handlePaste(e: KeyboardEvent): void;
     private executePaste;
+    private fallbackPasteFromClipboard;
+    private processPastedText;
     private clearCutArea;
     private checkClipboardChanged;
     private saveClipboardContent;
     private pasteHtmlToTable;
     private _pasteValue;
     private pasteTextToTable;
+    private parsePastedData;
+    private processCellValue;
     private handlePasteValues;
 }

package/es/event/event.js

@@ -44,6 +44,8 @@ import { bindContainerDomListener } from "./listener/container-dom";
 
 import { bindTouchListener } from "./listener/touch";
 
+import { setDataToHTML } from "./util";
+
 import { bindAxisClickEvent } from "./self-event-listener/pivot-chart/axis-click";
 
 import { bindAxisHoverEvent } from "./self-event-listener/pivot-chart/axis-hover";
@@ -66,16 +68,15 @@ import { bindDropdownMenuEvent } from "./self-event-listener/base-table/dropdown
 
 import { bindDBClickAutoColumnWidthEvent } from "./self-event-listener/base-table/dbclick-auto-column-width";
 
-import { browser } from "../tools/helper";
-
 import { clearActiveCellRangeState, setActiveCellRangeState } from "../tools/style";
 
 export class EventManager {
     constructor(table) {
         this.isDown = !1, this.isDraging = !1, this.globalEventListeners = [], this._enableTableScroll = !0, 
         this.cutWaitPaste = !1, this.clipboardCheckTimer = null, this.cutOperationTime = 0, 
-        this.lastClipboardContent = "", this.cutCellRange = null, this.table = table, this.handleTextStickBindId = [], 
-        this.inertiaScroll = new InertiaScroll(table.stateManager), "node" === Env.mode || table.options.disableInteraction || (this.bindOuterEvent(), 
+        this.lastClipboardContent = "", this.cutCellRange = null, this.copySourceRange = null, 
+        this.table = table, this.handleTextStickBindId = [], this.inertiaScroll = new InertiaScroll(table.stateManager), 
+        "node" === Env.mode || table.options.disableInteraction || (this.bindOuterEvent(), 
         setTimeout((() => {
             this.bindSelfEvent();
         }), 0));
@@ -287,46 +288,80 @@ export class EventManager {
         this._enableTableScroll = !1;
     }
     handleCopy(e, isCut = !1) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         return __awaiter(this, void 0, void 0, (function*() {
             const table = this.table;
-            !isCut && (this.cutWaitPaste = !1);
-            const data = this.table.getCopyValue();
+            !isCut && (this.cutWaitPaste = !1), this.copySourceRange = null;
+            const sourceRanges = table.stateManager.select.ranges;
+            if (sourceRanges && 1 === sourceRanges.length) {
+                const sourceRange = sourceRanges[0];
+                this.copySourceRange = {
+                    startCol: Math.min(sourceRange.start.col, sourceRange.end.col),
+                    startRow: Math.min(sourceRange.start.row, sourceRange.end.row)
+                };
+            } else if (!(null == sourceRanges ? void 0 : sourceRanges.length)) return void (this.copySourceRange = null);
+            const data = this.table.getCopyValue(null === (_b = null === (_a = table.options.keyboardOptions) || void 0 === _a ? void 0 : _a.getCopyCellValue) || void 0 === _b ? void 0 : _b.value);
             if (isValid(data)) {
                 e.preventDefault();
-                const permissionState = yield navigator.permissions.query({
-                    name: "clipboard-write"
-                });
-                if ((null === (_a = navigator.clipboard) || void 0 === _a ? void 0 : _a.write) && "granted" === permissionState.state) {
-                    const setDataToHTML = data => {
-                        const result = [ "<table>" ], META_HEAD = [ '<meta name="author" content="Visactor"/>', '<style type="text/css">td{white-space:normal}br{mso-data-placement:same-cell}</style>' ].join(""), rows = data.split("\r\n");
-                        return rows.forEach((function(rowCells, rowIndex) {
-                            const cells = rowCells.split("\t"), rowValues = [];
-                            0 === rowIndex && result.push("<tbody>"), cells.forEach((function(cell, cellIndex) {
-                                const parsedCellData = cell ? cell.toString().replace(/&/g, "&amp;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\n/g, "<br>").replace(/(<br(\s*|\/)>(\r\n|\n)?|\r\n|\n)/g, "<br>\r\n").replace(/\x20{2,}/gi, (substring => `<span style="mso-spacerun: yes">${"&nbsp;".repeat(substring.length - 1)} </span>`)).replace(/\t/gi, "&#9;") : " ";
-                                rowValues.push(`<td>${parsedCellData}</td>`);
-                            })), result.push("<tr>", ...rowValues, "</tr>"), rowIndex === rows.length - 1 && result.push("</tbody>");
-                        })), result.push("</table>"), [ META_HEAD, result.join("") ].join("");
-                    }, dataHTML = setDataToHTML(data);
-                    navigator.clipboard.write([ new ClipboardItem({
-                        "text/html": new Blob([ dataHTML ], {
-                            type: "text/html"
-                        }),
-                        "text/plain": new Blob([ data ], {
-                            type: "text/plain"
-                        })
-                    }) ]);
-                } else browser.IE ? window.clipboardData.setData("Text", data) : e.clipboardData.setData("text/plain", data);
-                table.fireListeners(TABLE_EVENT_TYPE.COPY_DATA, {
-                    cellRange: table.stateManager.select.ranges,
-                    copyData: data,
-                    isCut: isCut
-                });
+                const element = table.getElement();
+                element && element !== document.activeElement && (element.focus(), yield new Promise((resolve => setTimeout(resolve, 10))));
+                try {
+                    if (navigator.clipboard && navigator.clipboard.writeText) {
+                        let hasPermission = !0;
+                        if (navigator.permissions && navigator.permissions.query) try {
+                            hasPermission = "granted" === (yield navigator.permissions.query({
+                                name: "clipboard-write"
+                            })).state;
+                        } catch (permissionError) {
+                            hasPermission = !0;
+                        }
+                        if (hasPermission) try {
+                            if (window.ClipboardItem) {
+                                let htmlValues = data;
+                                1 === table.stateManager.select.ranges.length && (null === (_d = null === (_c = table.options.keyboardOptions) || void 0 === _c ? void 0 : _c.getCopyCellValue) || void 0 === _d ? void 0 : _d.html) && (htmlValues = this.table.getCopyValue(null === (_e = table.options.keyboardOptions) || void 0 === _e ? void 0 : _e.getCopyCellValue.html));
+                                const dataHTML = setDataToHTML(htmlValues);
+                                yield navigator.clipboard.write([ new ClipboardItem({
+                                    "text/html": new Blob([ dataHTML ], {
+                                        type: "text/html"
+                                    }),
+                                    "text/plain": new Blob([ data ], {
+                                        type: "text/plain"
+                                    })
+                                }) ]);
+                            } else yield navigator.clipboard.writeText(data);
+                        } catch (clipboardError) {
+                            this.fallbackCopyToClipboard(data, e);
+                        } else this.fallbackCopyToClipboard(data, e);
+                    } else this.fallbackCopyToClipboard(data, e);
+                    table.fireListeners(TABLE_EVENT_TYPE.COPY_DATA, {
+                        cellRange: table.stateManager.select.ranges,
+                        copyData: data,
+                        isCut: isCut
+                    });
+                } catch (error) {
+                    this.fallbackCopyToClipboard(data, e);
+                }
             }
-            (null === (_b = table.keyboardOptions) || void 0 === _b ? void 0 : _b.showCopyCellBorder) && (setActiveCellRangeState(table), 
+            (null === (_f = table.keyboardOptions) || void 0 === _f ? void 0 : _f.showCopyCellBorder) && (setActiveCellRangeState(table), 
             table.clearSelected());
         }));
     }
+    fallbackCopyToClipboard(data, e) {
+        try {
+            if (e.clipboardData) return void e.clipboardData.setData("text/plain", data);
+            document.activeElement && document.activeElement !== document.body && document.activeElement.blur();
+            const textArea = document.createElement("textarea");
+            textArea.value = data, textArea.style.position = "fixed", textArea.style.left = "-999999px", 
+            textArea.style.top = "-999999px", textArea.style.opacity = "0", textArea.setAttribute("readonly", ""), 
+            textArea.setAttribute("aria-hidden", "true"), document.body.appendChild(textArea), 
+            textArea.focus(), textArea.select(), textArea.setSelectionRange(0, data.length);
+            try {
+                document.execCommand("copy");
+            } catch (execError) {} finally {
+                document.body.removeChild(textArea);
+            }
+        } catch (error) {}
+    }
     handleCut(e) {
         return __awaiter(this, void 0, void 0, (function*() {
             this.handleCopy(e, !0), this.cutWaitPaste = !0, this.cutCellRange = this.table.getSelectedCellInfos(), 
@@ -346,31 +381,67 @@ export class EventManager {
         })) : this.executePaste(e);
     }
     executePaste(e) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         return __awaiter(this, void 0, void 0, (function*() {
             const table = this.table;
-            if (table.changeCellValues) {
-                if (null === (_a = table.editorManager) || void 0 === _a ? void 0 : _a.editingEditor) return;
-                if ((null === (_b = table.stateManager.select.ranges) || void 0 === _b ? void 0 : _b.length) > 0) if (null === (_c = navigator.clipboard) || void 0 === _c ? void 0 : _c.read) navigator.clipboard.read().then((clipboardItems => {
-                    for (const item of clipboardItems) item.types.includes("text/html") ? this.pasteHtmlToTable(item) : 1 === item.types.length && "text/plain" === item.types[0] && this.pasteTextToTable(item);
-                })); else {
-                    const ranges = table.stateManager.select.ranges, col = Math.min(ranges[0].start.col, ranges[0].end.col), row = Math.min(ranges[0].start.row, ranges[0].end.row), rows = (e.clipboardData || window.Clipboard).getData("text").split("\n"), values = [];
-                    rows.forEach((function(rowCells, rowIndex) {
-                        const cells = rowCells.split("\t"), rowValues = [];
-                        values.push(rowValues), cells.forEach((function(cell, cellIndex) {
-                            cellIndex === cells.length - 1 && (cell = cell.trim()), rowValues.push(cell);
-                        }));
-                    }));
-                    const changedCellResults = yield table.changeCellValues(col, row, values, !0);
-                    table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA) && table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
-                        col: col,
-                        row: row,
-                        pasteData: values,
-                        changedCellResults: changedCellResults
-                    });
+            if (!(null === (_a = table.editorManager) || void 0 === _a ? void 0 : _a.editingEditor)) {
+                if (table.changeCellValues && (null === (_b = table.stateManager.select.ranges) || void 0 === _b ? void 0 : _b.length) > 0) try {
+                    if (navigator.clipboard && navigator.clipboard.read) try {
+                        const clipboardItems = yield navigator.clipboard.read();
+                        let handled = !1;
+                        for (const item of clipboardItems) {
+                            if (item.types.includes("text/html")) {
+                                yield this.pasteHtmlToTable(item), handled = !0;
+                                break;
+                            }
+                            if (item.types.includes("text/plain")) {
+                                yield this.pasteTextToTable(item), handled = !0;
+                                break;
+                            }
+                        }
+                        handled || (yield this.fallbackPasteFromClipboard(e));
+                    } catch (clipboardError) {
+                        yield this.fallbackPasteFromClipboard(e);
+                    } else yield this.fallbackPasteFromClipboard(e);
+                } catch (error) {
+                    yield this.fallbackPasteFromClipboard(e);
                 }
+                (null === (_c = table.keyboardOptions) || void 0 === _c ? void 0 : _c.showCopyCellBorder) && clearActiveCellRangeState(table);
             }
-            (null === (_d = table.keyboardOptions) || void 0 === _d ? void 0 : _d.showCopyCellBorder) && clearActiveCellRangeState(table);
+        }));
+    }
+    fallbackPasteFromClipboard(e) {
+        return __awaiter(this, void 0, void 0, (function*() {
+            const table = this.table, ranges = table.stateManager.select.ranges, col = Math.min(ranges[0].start.col, ranges[0].end.col), row = Math.min(ranges[0].start.row, ranges[0].end.row);
+            try {
+                const element = table.getElement();
+                element && element !== document.activeElement && (element.focus(), yield new Promise((resolve => setTimeout(resolve, 10))));
+                const clipboardData = e.clipboardData || window.clipboardData || window.Clipboard;
+                if (clipboardData) {
+                    const pastedData = clipboardData.getData("text") || clipboardData.getData("Text");
+                    if (pastedData) return void (yield this.processPastedText(pastedData, col, row));
+                }
+            } catch (error) {}
+        }));
+    }
+    processPastedText(pastedData, col, row) {
+        var _a;
+        return __awaiter(this, void 0, void 0, (function*() {
+            const table = this.table, rows = pastedData.split("\n"), values = [];
+            let processedValues;
+            rows.forEach((function(rowCells) {
+                const cells = rowCells.split("\t"), rowValues = [];
+                values.push(rowValues), cells.forEach((function(cell, cellIndex) {
+                    cellIndex === cells.length - 1 && (cell = cell.trim()), rowValues.push(cell);
+                }));
+            })), (null === (_a = table.options.keyboardOptions) || void 0 === _a ? void 0 : _a.processFormulaBeforePaste) && this.copySourceRange && (processedValues = table.options.keyboardOptions.processFormulaBeforePaste(values, this.copySourceRange.startCol, this.copySourceRange.startRow, col, row));
+            const changedCellResults = yield table.changeCellValues(col, row, processedValues || values, !0);
+            table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA) && table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
+                col: col,
+                row: row,
+                pasteData: processedValues || values,
+                changedCellResults: changedCellResults
+            });
         }));
     }
     clearCutArea(table) {
@@ -402,19 +473,21 @@ export class EventManager {
         let pasteValuesColCount = 0, pasteValuesRowCount = 0, values = [];
         item.getType("text/html").then((blob => {
             blob.text().then((pastedData => __awaiter(this, void 0, void 0, (function*() {
-                var _a, _b;
+                var _a, _b, _c;
                 if (pastedData && /(<table)|(<TABLE)/g.test(pastedData)) {
                     const matches = Array.from(pastedData.matchAll(regex));
                     for (const match of matches) {
                         const rowContent = match[1], rowValues = Array.from(rowContent.matchAll(cellRegex)).map((cellMatch => cellMatch[1].replace(/(<(?!br)([^>]+)>)/gi, "").replace(/<br(\s*|\/)>[\r\n]?/gim, "\n").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&#9;/gi, "\t").replace(/&nbsp;/g, " ")));
                         values.push(rowValues), pasteValuesColCount = Math.max(pasteValuesColCount, null !== (_a = null == rowValues ? void 0 : rowValues.length) && void 0 !== _a ? _a : 0);
                     }
-                    pasteValuesRowCount = null !== (_b = values.length) && void 0 !== _b ? _b : 0, values = this.handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
-                    const changedCellResults = yield table.changeCellValues(col, row, values, !0);
+                    let processedValues;
+                    pasteValuesRowCount = null !== (_b = values.length) && void 0 !== _b ? _b : 0, values = this.handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1), 
+                    (null === (_c = table.options.keyboardOptions) || void 0 === _c ? void 0 : _c.processFormulaBeforePaste) && this.copySourceRange && (processedValues = table.options.keyboardOptions.processFormulaBeforePaste(values, this.copySourceRange.startCol, this.copySourceRange.startRow, col, row));
+                    const changedCellResults = yield table.changeCellValues(col, row, processedValues || values, !0);
                     table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA) && table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
                         col: col,
                         row: row,
-                        pasteData: values,
+                        pasteData: processedValues || values,
                         changedCellResults: changedCellResults
                     });
                 } else navigator.clipboard.read().then((clipboardItems => {
@@ -426,10 +499,11 @@ export class EventManager {
         }));
     }
     _pasteValue(pastedData) {
-        var _a;
+        var _a, _b;
         return __awaiter(this, void 0, void 0, (function*() {
             const table = this.table, ranges = table.stateManager.select.ranges, selectRangeLength = ranges.length, col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col), row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row), maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col), maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
             let pasteValuesColCount = 0, pasteValuesRowCount = 0, values = [];
+            let processedValues;
             pastedData.split("\n").forEach((function(rowCells, rowIndex) {
                 var _a;
                 const cells = rowCells.split("\t"), rowValues = [];
@@ -437,43 +511,43 @@ export class EventManager {
                     cellIndex === cells.length - 1 && (cell = cell.trim()), rowValues.push(cell);
                 })), pasteValuesColCount = Math.max(pasteValuesColCount, null !== (_a = null == rowValues ? void 0 : rowValues.length) && void 0 !== _a ? _a : 0);
             })), pasteValuesRowCount = null !== (_a = values.length) && void 0 !== _a ? _a : 0, 
-            values = this.handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
-            const changedCellResults = yield table.changeCellValues(col, row, values, !0);
+            values = this.handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1), 
+            (null === (_b = table.options.keyboardOptions) || void 0 === _b ? void 0 : _b.processFormulaBeforePaste) && this.copySourceRange && (processedValues = table.options.keyboardOptions.processFormulaBeforePaste(values, this.copySourceRange.startCol, this.copySourceRange.startRow, col, row));
+            const changedCellResults = yield table.changeCellValues(col, row, processedValues || values, !0);
             table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA) && table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
                 col: col,
                 row: row,
-                pasteData: values,
+                pasteData: processedValues || values,
                 changedCellResults: changedCellResults
             });
         }));
     }
     pasteTextToTable(item) {
-        const table = this.table, ranges = table.stateManager.select.ranges, selectRangeLength = ranges.length, col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col), row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row), maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col), maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
-        let pasteValuesColCount = 0, pasteValuesRowCount = 0;
-        item.getType("text/plain").then((blob => {
-            blob.text().then((pastedData => __awaiter(this, void 0, void 0, (function*() {
-                var _a;
-                const rows = pastedData.replace(/\r(?!\n)/g, "\r\n").split("\r\n");
-                let values = [];
-                rows.length > 1 && "" === rows[rows.length - 1] && rows.pop(), rows.forEach((function(rowCells, rowIndex) {
-                    var _a;
-                    const cells = rowCells.split("\t"), rowValues = [];
-                    values.push(rowValues), cells.forEach((function(cell, cellIndex) {
-                        cell.includes("\n") && (cell = cell.replace(/^"(.*)"$/, "$1").replace(/["]*/g, (match => new Array(Math.floor(match.length / 2)).fill('"').join("")))), 
-                        rowValues.push(cell);
-                    })), pasteValuesColCount = Math.max(pasteValuesColCount, null !== (_a = null == rowValues ? void 0 : rowValues.length) && void 0 !== _a ? _a : 0);
-                })), pasteValuesRowCount = null !== (_a = values.length) && void 0 !== _a ? _a : 0, 
-                values = this.handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
-                const changedCellResults = yield table.changeCellValues(col, row, values, !0);
+        return __awaiter(this, void 0, void 0, (function*() {
+            const table = this.table, ranges = table.stateManager.select.ranges, selectRangeLength = ranges.length, col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col), row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row), maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col), maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+            try {
+                const blob = yield item.getType("text/plain"), pastedData = yield blob.text(), values = this.parsePastedData(pastedData), pasteValuesRowCount = values.length, pasteValuesColCount = Math.max(...values.map((row => row.length)), 0), processedValues = this.handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1), changedCellResults = yield table.changeCellValues(col, row, processedValues, !0);
                 table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA) && table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
                     col: col,
                     row: row,
-                    pasteData: values,
+                    pasteData: processedValues,
                     changedCellResults: changedCellResults
                 });
-            }))));
+            } catch (error) {}
         }));
     }
+    parsePastedData(pastedData) {
+        const rows = pastedData.replace(/\r(?!\n)/g, "\r\n").split("\r\n"), values = [];
+        return rows.length > 1 && "" === rows[rows.length - 1] && rows.pop(), rows.forEach((rowCells => {
+            const rowValues = rowCells.split("\t").map((cell => this.processCellValue(cell)));
+            values.push(rowValues);
+        })), values;
+    }
+    processCellValue(cell) {
+        cell.includes("\n") && (cell = cell.replace(/^"(.*)"$/, "$1").replace(/["]*/g, (match => new Array(Math.floor(match.length / 2)).fill('"').join(""))));
+        const numValue = Number(cell);
+        return isNaN(numValue) ? cell : numValue;
+    }
     handlePasteValues(values, rowCount, colCount, selectedRowCount, selectedColCount) {
         if (selectedColCount > colCount || selectedRowCount > rowCount) {
             if (selectedColCount % colCount == 0 && selectedRowCount % rowCount == 0) {