@ai-table/grid 0.2.5 → 0.3.0

package/fesm2022/ai-table-grid.mjs

@@ -2414,7 +2414,7 @@ const isClipboardReadSupported = () => {
 const isClipboardReadTextSupported = () => {
     return 'clipboard' in navigator && 'readText' in navigator.clipboard;
 };
-const writeToClipboard = async (data) => {
+const writeToClipboard = async (data, dataTransfer) => {
     try {
         const { text, html } = data;
         if (isClipboardWriteSupported()) {
@@ -2423,24 +2423,24 @@ const writeToClipboard = async (data) => {
                 'text/html': new Blob([html], { type: 'text/html' })
             });
             await navigator.clipboard.write([clipboardItem]);
+            return;
         }
-        else if (isClipboardWriteTextSupported()) {
-            await navigator.clipboard.writeText(text);
+        if (dataTransfer) {
+            dataTransfer.setData(`text/html`, html);
+            dataTransfer.setData(`text/plain`, text);
+            window.dataTransfer = dataTransfer;
+            return;
         }
-        else {
-            const textarea = document.createElement('textarea');
-            textarea.value = text;
-            document.body.appendChild(textarea);
-            textarea.select();
-            document.execCommand('copy');
-            document.body.removeChild(textarea);
+        if (isClipboardWriteTextSupported()) {
+            await navigator.clipboard.writeText(text);
+            return;
         }
     }
     catch (error) {
         console.warn('Failed to write clipboard:', error);
     }
 };
-const readFromClipboard = async () => {
+const readFromClipboard = async (dataTransfer) => {
     try {
         let clipboardData = {};
         if (isClipboardReadSupported()) {
@@ -2457,32 +2457,28 @@ const readFromClipboard = async () => {
                     }
                 }
             }
+            const { html, text } = clipboardData;
+            if (html || text) {
+                return clipboardData;
+            }
         }
-        else if (isClipboardReadTextSupported()) {
-            const clipboardText = await navigator.clipboard.readText();
-            clipboardData.text = clipboardText;
+        if (dataTransfer) {
+            const html = dataTransfer.getData(`text/html`);
+            const text = dataTransfer.getData(`text/plain`);
+            html && (clipboardData.html = html);
+            text && (clipboardData.text = text);
+            if (html || text) {
+                return clipboardData;
+            }
         }
-        else {
-            const pastePromise = new Promise((resolve) => {
-                const textarea = document.createElement('textarea');
-                document.body.appendChild(textarea);
-                const handlePaste = (e) => {
-                    const text = e.clipboardData?.getData('text') || '';
-                    const html = e.clipboardData?.getData('text/html') || '';
-                    resolve({
-                        text,
-                        html: html || undefined
-                    });
-                    textarea.removeEventListener('paste', handlePaste);
-                };
-                textarea.addEventListener('paste', handlePaste);
-                textarea.focus();
-                document.execCommand('paste');
-                document.body.removeChild(textarea);
-            });
-            clipboardData = await pastePromise;
+        if (isClipboardReadTextSupported()) {
+            const text = await navigator.clipboard.readText();
+            text && (clipboardData.text = text);
+            if (text) {
+                return clipboardData;
+            }
         }
-        return clipboardData;
+        return null;
     }
     catch (error) {
         console.warn('Failed to read clipboard:', error);
@@ -3666,8 +3662,8 @@ function extractAITableContentFromClipboardHtml(clipboardHtml) {
     }
     return null;
 }
-const readClipboardData = async () => {
-    const clipboardData = await readFromClipboard();
+const readClipboardData = async (dataTransfer) => {
+    const clipboardData = await readFromClipboard(dataTransfer);
     let clipboardContent = [];
     let aiTableContent = null;
     if (clipboardData) {
@@ -3737,7 +3733,7 @@ function appendField(aiTable, originField, actions) {
         defaultValue: defaultFieldValue
     });
 }
-const writeToAITable = async (aiTable, actions) => {
+const writeToAITable = async (aiTable, actions, dataTransfer) => {
     const selectedCells = Array.from(aiTable.selection().selectedCells);
     const result = {
         isPasteSuccess: false,
@@ -3747,7 +3743,7 @@ const writeToAITable = async (aiTable, actions) => {
     if (!selectedCells.length) {
         return result;
     }
-    const { clipboardContent, aiTableContent } = await readClipboardData();
+    const { clipboardContent, aiTableContent } = await readClipboardData(dataTransfer);
     if (!clipboardContent.length) {
         return result;
     }
@@ -10849,11 +10845,16 @@ class AITableCellText extends CoverCellBase {
             const { columnWidth } = render;
             if (isExpand) {
                 return {
+                    name: generateTargetName({
+                        targetName: AI_TABLE_CELL,
+                        fieldId: field._id,
+                        recordId
+                    }),
                     width: columnWidth - AI_TABLE_CELL_BORDER / 2,
                     height: this.height(),
                     stroke: Colors.primary,
                     strokeWidth: 2,
-                    listening: false
+                    listening: true
                 };
             }
             return null;
@@ -13258,6 +13259,8 @@ class AITableGrid extends AITableGridBase {
             this.bindGlobalMousedown();
             this.containerResizeListener();
             this.bindShortcuts();
+            this.subscribeCopyEvent();
+            this.subscribePasteEvent();
         });
         effect(() => {
             if (this.hasContainerRect() && this.horizontalBarRef() && this.verticalBarRef()) {
@@ -13749,6 +13752,30 @@ class AITableGrid extends AITableGridBase {
             clearCoverCell(this.aiTable);
         });
     }
+    subscribeCopyEvent() {
+        fromEvent(document, 'copy')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            if (this.aiReadonly()) {
+                return;
+            }
+            const dataTransfer = event.clipboardData;
+            this.copyCells(dataTransfer);
+            event.preventDefault();
+        });
+    }
+    subscribePasteEvent() {
+        fromEvent(document, 'paste')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            if (this.aiReadonly()) {
+                return;
+            }
+            const dataTransfer = event.clipboardData;
+            this.pasteCells(dataTransfer);
+            event.preventDefault();
+        });
+    }
     updateDragSelectState(isDragging, startCell) {
         this.dragSelectState = {
             isDragging: isDragging,
@@ -13865,7 +13892,6 @@ class AITableGrid extends AITableGridBase {
             if (hasContentEditable) {
                 return;
             }
-            const isCopyOrPaste = (event.ctrlKey || event.metaKey) && (event.key === 'c' || event.key === 'v');
             const isDeleteOrBackspace = event.key === 'Backspace' || event.key === 'Delete';
             const isDirectionKey = event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight';
             const isShiftDirectionKey = event.shiftKey &&
@@ -13908,16 +13934,6 @@ class AITableGrid extends AITableGridBase {
                 event.preventDefault();
                 return;
             }
-            if (isCopyOrPaste) {
-                if (event.key === 'c') {
-                    this.copyCells();
-                }
-                else if (event.key === 'v') {
-                    this.pasteCells();
-                }
-                event.preventDefault();
-                return;
-            }
             if (isDeleteOrBackspace) {
                 clearCells(this.aiTable, this.actions);
                 event.preventDefault();
@@ -13945,10 +13961,10 @@ class AITableGrid extends AITableGridBase {
             }
         });
     }
-    copyCells() {
+    copyCells(dataTransfer) {
         const clipboardData = buildClipboardData(this.aiTable);
         if (clipboardData) {
-            writeToClipboard(clipboardData).then(() => {
+            writeToClipboard(clipboardData, dataTransfer).then(() => {
                 const copiedCellsCount = this.aiTable.selection().selectedCells.size;
                 const message = getI18nTextByKey(this.aiTable, AITableGridI18nKey.copiedCells).replace('{count}', copiedCellsCount.toString());
                 this.notifyService.success(message, undefined, {
@@ -13957,8 +13973,8 @@ class AITableGrid extends AITableGridBase {
             });
         }
     }
-    pasteCells() {
-        writeToAITable(this.aiTable, this.actions).then((result) => {
+    pasteCells(dataTransfer) {
+        writeToAITable(this.aiTable, this.actions, dataTransfer).then((result) => {
             if (result.isPasteOverMaxRecords || result.isPasteOverMaxFields) {
                 return;
             }