Add Copy With Headers to grid cell popup. (#1208)

* Add "Copy with headers" to grid cell popup.

This is what you want when you're going to paste into e.g. an email.

Tested just by manually trying copy and paste into an editor and an
email, and then again using the new variant to confirm the headers show
up.

https://github.com/gristlabs/grist-core/pull/1208

app/client/components/Clipboard.js

@@ -107,6 +107,7 @@ Base.setBaseFor(Clipboard);
 
 Clipboard.commands = {
   contextMenuCopy: function() { this._doContextMenuCopy(); },
+  contextMenuCopyWithHeaders: function() { this._doContextMenuCopyWithHeaders(); },
   contextMenuCut: function() { this._doContextMenuCut(); },
   contextMenuPaste: function() { this._doContextMenuPaste(); },
 };
@@ -126,7 +127,13 @@ Clipboard.prototype._onCopy = function(elem, event) {
 Clipboard.prototype._doContextMenuCopy = function() {
   let pasteObj = commands.allCommands.copy.run();
 
-  this._copyToClipboard(pasteObj, 'copy');
+  this._copyToClipboard(pasteObj, 'copy', false);
+};
+
+Clipboard.prototype._doContextMenuCopyWithHeaders = function() {
+  let pasteObj = commands.allCommands.copy.run();
+
+  this._copyToClipboard(pasteObj, 'copy', true);
 };
 
 Clipboard.prototype._onCut = function(elem, event) {
@@ -146,21 +153,21 @@ Clipboard.prototype._doContextMenuCut = function() {
 Clipboard.prototype._setCBdata = function(pasteObj, clipboardData) {
   if (!pasteObj) { return; }
 
-  const plainText = tableUtil.makePasteText(pasteObj.data, pasteObj.selection);
+  const plainText = tableUtil.makePasteText(pasteObj.data, pasteObj.selection, false);
   clipboardData.setData('text/plain', plainText);
-  const htmlText = tableUtil.makePasteHtml(pasteObj.data, pasteObj.selection);
+  const htmlText = tableUtil.makePasteHtml(pasteObj.data, pasteObj.selection, false);
   clipboardData.setData('text/html', htmlText);
 
   this._setCutCallback(pasteObj, plainText);
 };
 
-Clipboard.prototype._copyToClipboard = async function(pasteObj, action) {
+Clipboard.prototype._copyToClipboard = async function(pasteObj, action, includeColHeaders) {
   if (!pasteObj) { return; }
 
-  const plainText = tableUtil.makePasteText(pasteObj.data, pasteObj.selection);
+  const plainText = tableUtil.makePasteText(pasteObj.data, pasteObj.selection, includeColHeaders);
   let data;
   if (typeof ClipboardItem === 'function') {
-    const htmlText = tableUtil.makePasteHtml(pasteObj.data, pasteObj.selection);
+    const htmlText = tableUtil.makePasteHtml(pasteObj.data, pasteObj.selection, includeColHeaders);
     // eslint-disable-next-line no-undef
     data = new ClipboardItem({
       // eslint-disable-next-line no-undef

app/client/components/commandList.ts

@@ -63,6 +63,7 @@ export type CommandName =
   | 'cut'
   | 'paste'
   | 'contextMenuCopy'
+  | 'contextMenuCopyWithHeaders'
   | 'contextMenuCut'
   | 'contextMenuPaste'
   | 'fillSelectionDown'
@@ -470,6 +471,10 @@ export const groups: CommendGroupDef[] = [{
       keys: ['Mod+C'],
       desc: 'Copy current selection to clipboard',
       bindKeys: false,
+    }, {
+      name: 'contextMenuCopyWithHeaders',
+      keys: [],
+      desc: 'Copy current selection to clipboard including headers',
     }, {
       name: 'contextMenuCut',
       keys: ['Mod+X'],

app/client/lib/tableUtil.ts

@@ -30,12 +30,16 @@ export function fieldInsertPositions(viewFields: KoArray<ViewFieldRec>, index: n
  * @param {CopySelection} selection - a CopySelection instance
  * @return {String}
  **/
-export function makePasteText(tableData: TableData, selection: CopySelection) {
+export function makePasteText(tableData: TableData, selection: CopySelection, includeColHeaders: boolean) {
   // tsvEncode expects data as a 2-d array with each a array representing a row
   // i.e. [["1-1", "1-2", "1-3"],["2-1", "2-2", "2-3"]]
-  const values = selection.rowIds.map(rowId =>
-    selection.columns.map(col => col.fmtGetter(rowId)));
-  return tsvEncode(values);
+  const result = [];
+  if (includeColHeaders) {
+    result.push(selection.fields.map(f => f.label()));
+  }
+  result.push(...selection.rowIds.map(rowId =>
+    selection.columns.map(col => col.fmtGetter(rowId))));
+  return tsvEncode(result);
 }
 
 /**
@@ -70,7 +74,7 @@ export function makePasteHtml(tableData: TableData, selection: CopySelection, in
     )),
     // Include column headers if requested.
     (includeColHeaders ?
-      dom('tr', selection.colIds.map(colId => dom('th', colId))) :
+      dom('tr', selection.fields.map(field => dom('th', field.label()))) :
       null
     ),
     // Fill with table cells.

app/client/ui/CellContextMenu.ts

@@ -38,6 +38,7 @@ export function CellContextMenu(cellOptions: ICellContextMenu, colOptions: IMult
   result.push(
     menuItemCmd(allCommands.contextMenuCut, t('Cut'), disableForReadonlyColumn),
     menuItemCmd(allCommands.contextMenuCopy, t('Copy')),
+    menuItemCmd(allCommands.contextMenuCopyWithHeaders, t('Copy with headers')),
     menuItemCmd(allCommands.contextMenuPaste, t('Paste'), disableForReadonlyColumn),
     menuDivider(),
     colOptions.isFormula ?