@updog/data-editor-wc 0.1.72 → 0.1.73

package/index.d.ts

@@ -166,6 +166,8 @@ declare var export_default = {
       filteredRows_other: "{{filtered}} of {{total}} rows",
     },
     toast: {
+      clipboardWriteFailed:
+        "The browser blocked the copy to the clipboard. You can paste inside this table.",
       dismiss: "Dismiss",
       rowMayNotBeVisible:
         "Row has been added but may not be visible due to active filters or sorting",

package/index.js

@@ -8157,6 +8157,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			filteredRows_other: "{{filtered}} of {{total}} rows"
 		},
 		toast: {
+			clipboardWriteFailed: "The browser blocked the copy to the clipboard. You can paste inside this table.",
 			dismiss: "Dismiss",
 			rowMayNotBeVisible: "Row has been added but may not be visible due to active filters or sorting"
 		},
@@ -33036,14 +33037,14 @@ var pv = class {
 			return;
 		}
 		let s = nv(e);
-		t.fillStyle = n.cellBgIdle, D_(t, 0, 0, a, o), this.paintBodyPane(s, s.panes.scrollable), this.selectionPainter.paintSelectionOutlines(s, null), this.selectionPainter.paintFocusBorder(s, null), this.lastFillHandleRect = this.selectionPainter.paintFillHandle(s, null), this.overlayPainter.paintClipboardOverlay(s), this.overlayPainter.paintFillOverlay(s);
+		t.fillStyle = n.cellBgIdle, D_(t, 0, 0, a, o), this.paintBodyPane(s, s.panes.scrollable), this.selectionPainter.paintSelectionOutlines(s, null), this.selectionPainter.paintFocusBorder(s, null), this.overlayPainter.paintClipboardOverlay(s), this.overlayPainter.paintFillOverlay(s), this.lastFillHandleRect = this.selectionPainter.paintFillHandle(s, null);
 		let c = s.panes.pinned;
 		if (c?.clip) {
 			t.fillStyle = n.cellBgIdle, D_(t, c.clip.x, c.clip.y, c.clip.w, c.clip.h), t.save(), t.beginPath(), t.rect(c.clip.x, c.clip.y, c.clip.w, c.clip.h), t.clip(), this.paintBodyPane(s, c), t.restore(), t.save(), t.beginPath();
 			let e = Math.min(s.totalRows * 34, o - 36);
-			t.rect(c.clip.x, 36, c.clip.w, e), t.clip(), this.selectionPainter.paintSelectionOutlines(s, c), this.selectionPainter.paintFocusBorder(s, c);
+			t.rect(c.clip.x, 36, c.clip.w, e), t.clip(), this.selectionPainter.paintSelectionOutlines(s, c), this.selectionPainter.paintFocusBorder(s, c), this.overlayPainter.paintClipboardOverlay(s);
 			let r = this.selectionPainter.paintFillHandle(s, c);
-			r && (this.lastFillHandleRect = r), this.overlayPainter.paintClipboardOverlay(s), t.restore();
+			r && (this.lastFillHandleRect = r), t.restore();
 		}
 		this.markerPainter.paint(s), this.headerPainter.paintHeaderRow(s), this.headerPainter.paintCornerCell(s), s.resizeGuideX >= 0 && this.overlayPainter.paintResizeGuide(s), this.hasSkeletons = s.hasSkeletons, this.hasPendingCells = s.hasPendingCells;
 	}
@@ -43918,12 +43919,17 @@ function Tj(e, t, n) {
 		}
 		o.push(r.map((e) => String(t[e.id] ?? "")).join("	"));
 	}
-	navigator.clipboard.writeText(o.join("\n"));
+	let s = o.join("\n");
+	return {
+		text: s,
+		written: navigator.clipboard.writeText(s).then(() => !0).catch(() => !1)
+	};
 }
 //#endregion
 //#region src/components/DataEditor/DataEditorGrid/controller/ClipboardManager.ts
 var Ej = {
 	clipboard: null,
+	marqueeVisible: !1,
 	version: 0
 }, Dj = class {
 	_store;
@@ -43940,6 +43946,9 @@ var Ej = {
 	_clipboardMaxRow = -1;
 	_sourceMinRowIndex = -1;
 	_sourceMaxRowIndex = -1;
+	_marqueeVisible = !1;
+	_osText = null;
+	_osWrite = null;
 	_sortState = null;
 	_t = (e) => e;
 	_version = 0;
@@ -43967,7 +43976,7 @@ var Ej = {
 			operation: "copy",
 			columnIds: e.columnIds,
 			rowIds: e.rowIds
-		}, this.precomputeLookup(), this.notify(), Tj(this._clipboard, this._columns, this._store));
+		}, this._marqueeVisible = !0, this.precomputeLookup(), this.notify(), this.writeToOs(this._clipboard));
 	}
 	cut() {
 		let e = this.buildClipboardFromSnapshot();
@@ -43975,10 +43984,11 @@ var Ej = {
 			operation: "cut",
 			columnIds: e.columnIds,
 			rowIds: e.rowIds
-		}, this.precomputeLookup(), this.notify(), Tj(this._clipboard, this._columns, this._store));
+		}, this._marqueeVisible = !0, this.precomputeLookup(), this.notify(), this.writeToOs(this._clipboard));
 	}
 	async paste() {
-		if (this._clipboard) {
+		let e = await this.readOsClipboard();
+		if (this._clipboard && (!e.ok || e.ours)) {
 			let e = this.resolveTargetFromSnapshot();
 			if (!e) return;
 			let t = this._clipboard, n = this._store, r = Dm(t.columnIds, e.columnIds, t.rowIds ?? null, e.rowIds, this._columns, (e) => n.getRowId(e), n.getSnapshot().filteredCount, t.operation === "cut"), i = await n.pasteInternal(r, e.rowIds, {
@@ -43988,27 +43998,28 @@ var Ej = {
 			i && (this.syncInternalPasteToServer(i, t, e), this._sortState && Xd.info(this._t("dataEditor.toast.rowMayNotBeVisible")), this.clear());
 			return;
 		}
-		let e;
-		try {
-			e = await navigator.clipboard.readText();
-		} catch (e) {
+		if (!e.ok) {
 			this._store.errorHandler.handleError({
 				code: "OPERATION_ERROR",
 				message: "Failed to read clipboard",
 				source: "clipboard-manager",
-				originalError: e
+				originalError: e.error
 			});
 			return;
 		}
-		if (!e) return;
-		let { row: t, col: n } = this.resolveAnchor(), r = await this._store.pasteFromText(e, t, n, this._validator);
-		r && this.syncExternalPasteToServer(r, t, n, e);
+		let t = e.text;
+		if (!t) return;
+		let { row: n, col: r } = this.resolveAnchor(), i = await this._store.pasteFromText(t, n, r, this._validator);
+		i && this.syncExternalPasteToServer(i, n, r, t);
 	}
 	clear() {
-		this._clipboard && (this._clipboard = null, this._clipboardColIndices = null, this._clipboardRowSet = null, this._clipboardIsWholeColumn = !1, this._clipboardMinCol = -1, this._clipboardMaxCol = -1, this._clipboardMinRow = -1, this._clipboardMaxRow = -1, this._sourceMinRowIndex = -1, this._sourceMaxRowIndex = -1, this.notify());
+		this._clipboard && (this._clipboard = null, this._clipboardColIndices = null, this._clipboardRowSet = null, this._clipboardIsWholeColumn = !1, this._clipboardMinCol = -1, this._clipboardMaxCol = -1, this._clipboardMinRow = -1, this._clipboardMaxRow = -1, this._sourceMinRowIndex = -1, this._sourceMaxRowIndex = -1, this._marqueeVisible = !1, this._osText = null, this._osWrite = null, this.notify());
+	}
+	hideMarquee() {
+		this._marqueeVisible && (this._marqueeVisible = !1, this.notify());
 	}
 	isCellInClipboard(e, t) {
-		if (!this._clipboard || !this._clipboardColIndices || !this._clipboardColIndices.has(e)) return !1;
+		if (!this._marqueeVisible || !this._clipboard || !this._clipboardColIndices || !this._clipboardColIndices.has(e)) return !1;
 		if (this._clipboardIsWholeColumn) return !0;
 		if (!this._clipboardRowSet) return !1;
 		let n = this._store.getRowId(t);
@@ -44018,7 +44029,7 @@ var Ej = {
 		return this._clipboard?.operation ?? null;
 	}
 	getClipboardBounds() {
-		if (!this._clipboard) return null;
+		if (!this._clipboard || !this._marqueeVisible) return null;
 		let e = this._clipboardIsWholeColumn ? this._store.getSnapshot().filteredCount - 1 : this._clipboardMaxRow;
 		return {
 			minCol: this._clipboardMinCol,
@@ -44027,6 +44038,32 @@ var Ej = {
 			maxRow: e
 		};
 	}
+	writeToOs(e) {
+		let t = Tj(e, this._columns, this._store);
+		this._osText = t.text, this._osWrite = t.written, t.written.then((e) => {
+			e || (this._store.errorHandler.handleError({
+				code: "OPERATION_ERROR",
+				message: "Failed to write clipboard",
+				source: "clipboard-manager"
+			}), Xd.error(this._t("dataEditor.toast.clipboardWriteFailed")));
+		});
+	}
+	async readOsClipboard() {
+		let e = this._osWrite ? await this._osWrite : !0;
+		try {
+			let t = await navigator.clipboard.readText();
+			return {
+				ok: !0,
+				text: t,
+				ours: !e || t === this._osText
+			};
+		} catch (e) {
+			return {
+				ok: !1,
+				error: e
+			};
+		}
+	}
 	buildClipboardFromSnapshot() {
 		let e = f_(this._selection.getSelection(), this.resolveContext());
 		return e === null ? null : {
@@ -44129,6 +44166,7 @@ var Ej = {
 	notify() {
 		this._version++, this._snapshot = {
 			clipboard: this._clipboard,
+			marqueeVisible: this._marqueeVisible,
 			version: this._version
 		};
 		for (let e of this._listeners) e();
@@ -44516,8 +44554,8 @@ var Bj = class {
 			return;
 		}
 		if (e.key === "Escape") {
-			if (this._clipboard.getSnapshot().clipboard) {
-				this._clipboard.clear();
+			if (this._clipboard.getSnapshot().marqueeVisible) {
+				this._clipboard.hideMarquee();
 				return;
 			}
 			this._selection.clear();
@@ -45330,6 +45368,8 @@ var Qj = {
 	}, [b]), (0, y.useEffect)(() => {
 		R.clipboard.setSortState(m);
 	}, [R, m]), (0, y.useEffect)(() => {
+		R.clipboard.hideMarquee();
+	}, [R, b]), (0, y.useEffect)(() => {
 		R.clipboard.setTranslate(S);
 	}, [R, S]), (0, y.useEffect)(() => {
 		R.setBounds(p, B.columns.length);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@updog/data-editor-wc",
-  "version": "0.1.72",
+  "version": "0.1.73",
   "description": "Client-side CSV importer and spreadsheet editor as a Web Component. Drop into Vue, Angular, Svelte, or vanilla JS. Import CSV, Excel, JSON; edit 1M+ rows entirely in the browser.",
   "author": "Mikhail Kutateladze <admin@updog.tech>",
   "homepage": "https://updog.tech",