fix(context): change copy cell command to make it work in SF (#8)

- also simplified the code a lot with this new approach
ghiscoding · Jul 9, 2020 · c0b8ad9 · c0b8ad9
1 parent eb8aee7
commit c0b8ad9
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -109,23 +109,7 @@ npm run test:watch
   - [x] Row Selection
 - [x] Grouping Formatters (12)
 - [x] SortComparers (5)
-- [ ] Services
-  - [x] Collection
-  - [x] Excel Export (**separate package**)
-  - [x] Export Text (**separate package**)
-  - [x] Extension
-  - [x] Filter
-  - [x] GraphQL (**separate package**)
-  - [x] OData (**separate package**)
-  - [x] Grid Event
-  - [x] Grid Service (helper)
-  - [x] Grid State
-  - [x] Grouping & Col Span
-  - [x] Pagination
-  - [ ] Resizer
-    - moved the Service to an Extension
-  - [x] Shared
-  - [x] Sort
+- [x] Services (14)
 - [ ] Others / Vanilla Implementation
   - [x] Custom Footer
   - [x] Backend Services + Pagination
@@ -161,5 +145,5 @@ npm run test:watch
 - [x] Add possibility to use SVG instead of Font Family
 - [x] Add Typings (interfaces) for Slick Grid & DataView objects
   - [x] Add interfaces to all SlickGrid core lib classes & plugins (basically add Types to everything)
-- [ ] Copy text from cell doesn't work in SF
+- [x] Copy text from cell doesn't work in SF
 - [ ] Remove all Services init method 2nd argument (we can get DataView directly from the Grid object)
diff --git a/packages/common/src/extensions/contextMenuExtension.ts b/packages/common/src/extensions/contextMenuExtension.ts
@@ -190,7 +190,7 @@ export class ContextMenuExtension implements Extension {
             disabled: false,
             command: commandName,
             positionOrder: 50,
-            action: (e: Event, args: MenuCommandItemCallbackArgs) => {
+            action: (_e: Event, args: MenuCommandItemCallbackArgs) => {
               this.copyToClipboard(args);
             },
             itemUsabilityOverride: (args: MenuCallbackArgs) => {
@@ -409,25 +409,18 @@ export class ContextMenuExtension implements Extension {
         const exportOptions = gridOptions && (gridOptions.excelExportOptions || gridOptions.exportOptions);
         const textToCopy = exportWithFormatterWhenDefined(row, cell, dataContext, column, grid, exportOptions);
 
-        // create fake <div> to copy into clipboard & delete it from the DOM once we're done
-        const range = document.createRange();
-        const tmpElem = document.createElement('div') as HTMLDivElement;
-        const body = document.querySelector('body') as HTMLElement;
-        if (tmpElem && body) {
+        // create fake <textarea> (positioned outside of the screen) to copy into clipboard & delete it from the DOM once we're done
+        const tmpElem = document.createElement('textarea') as HTMLTextAreaElement;
+        if (tmpElem && document.body) {
           tmpElem.style.position = 'absolute';
           tmpElem.style.left = '-1000px';
           tmpElem.style.top = '-1000px';
-          tmpElem.textContent = textToCopy;
-          body.appendChild(tmpElem);
-          range.selectNodeContents(tmpElem);
-          const selection = window.getSelection();
-          if (selection && selection.addRange && selection.removeAllRanges) {
-            selection.removeAllRanges();
-            selection.addRange(range);
-            const success = document.execCommand('copy', false, textToCopy);
-            if (success) {
-              tmpElem.remove();
-            }
+          tmpElem.value = textToCopy;
+          document.body.appendChild(tmpElem);
+          tmpElem.select();
+          const success = document.execCommand('copy', false, textToCopy);
+          if (success) {
+            tmpElem.remove();
           }
         }
       }

diff --git a/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip b/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip
diff --git a/packages/vanilla-bundle/src/salesforce-global-grid-options.ts b/packages/vanilla-bundle/src/salesforce-global-grid-options.ts
@@ -8,9 +8,6 @@ export const SalesforceGlobalGridOptions: GridOption = {
   exportOptions: {
     exportWithFormatter: true
   },
-  contextMenu: {
-    hideCopyCellValueCommand: true
-  },
   enableCellNavigation: true,
   formatterOptions: {
     minDecimal: 0,

diff --git a/packages/web-demo-vanilla-bundle/src/examples/example01.ts b/packages/web-demo-vanilla-bundle/src/examples/example01.ts
@@ -42,8 +42,8 @@ export class Example1 {
       { id: 'title', name: 'Title', field: 'title', sortable: true, minWidth: 100, filterable: true },
       { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, minWidth: 100, filterable: true },
       { id: '%', name: '% Complete', field: 'percentComplete', sortable: true, minWidth: 100, filterable: true },
-      { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, filterable: true },
-      { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, filterable: true },
+      { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, exportWithFormatter: true, filterable: true },
+      { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, exportWithFormatter: true, filterable: true },
       { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true, minWidth: 100, filterable: true }
     ];
     this.gridOptions1 = {