(core) Add cut, copy, and paste to context menu

Summary:
On supported browsers, the new context menu commands work exactly as they do
via keyboard shortcuts. On unsupported browsers, an unavailable command
modal is shown with a suggestion to use keyboard shortcuts instead.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D3867
This commit is contained in:
George Gevoian
2023-04-28 02:20:28 -07:00
parent c6ec8339f5
commit 18ad39cba3
17 changed files with 468 additions and 97 deletions

View File

@@ -32,9 +32,10 @@ export function CellContextMenu(rowOptions: IRowContextMenu, colOptions: IMultiC
const result: Array<Element|null> = [];
result.push(
// TODO: implement copy/paste actions
menuItemCmd(allCommands.contextMenuCut, t('Cut'), disableForReadonlyColumn),
menuItemCmd(allCommands.contextMenuCopy, t('Copy')),
menuItemCmd(allCommands.contextMenuPaste, t('Paste'), disableForReadonlyColumn),
menuDivider(),
colOptions.isFormula ?
null :
menuItemCmd(allCommands.clearValues, nameClearCells, disableForReadonlyColumn),
@@ -46,7 +47,7 @@ export function CellContextMenu(rowOptions: IRowContextMenu, colOptions: IMultiC
menuItemCmd(allCommands.copyLink, t("Copy anchor link")),
menuDivider(),
menuItemCmd(allCommands.filterByThisCellValue, t("Filter by this value")),
menuItemCmd(allCommands.openDiscussion, 'Comment', dom.cls('disabled', (
menuItemCmd(allCommands.openDiscussion, t('Comment'), dom.cls('disabled', (
isReadonly || numRows === 0 || numCols === 0
)), dom.hide(use => !use(COMMENTS()))) //TODO: i18next
]

View File

@@ -1,6 +1,6 @@
import * as Clipboard from 'app/client/components/Clipboard';
import * as commands from 'app/client/components/commands';
import {copyToClipboard} from 'app/client/lib/copyToClipboard';
import {copyToClipboard} from 'app/client/lib/clipboardUtils';
import {FocusLayer} from 'app/client/lib/FocusLayer';
import {makeT} from 'app/client/lib/localization';
import {setTestState} from 'app/client/lib/testState';

View File

@@ -5,7 +5,7 @@
import {GristDoc} from 'app/client/components/GristDoc';
import {ACIndexImpl} from 'app/client/lib/ACIndex';
import {ACSelectItem, buildACSelect} from 'app/client/lib/ACSelect';
import {copyToClipboard} from 'app/client/lib/copyToClipboard';
import {copyToClipboard} from 'app/client/lib/clipboardUtils';
import {makeT} from 'app/client/lib/localization';
import {reportError} from 'app/client/models/AppModel';
import {urlState} from 'app/client/models/gristUrlState';

View File

@@ -0,0 +1,27 @@
import {allCommands} from 'app/client/components/commands';
import {makeT} from 'app/client/lib/localization';
import {IRowContextMenu} from 'app/client/ui/RowContextMenu';
import {menuDivider, menuItemCmd} from 'app/client/ui2018/menus';
import {dom} from 'grainjs';
const t = makeT('FieldContextMenu');
export interface IFieldContextMenu {
disableModify: boolean;
isReadonly: boolean;
}
export function FieldContextMenu(_rowOptions: IRowContextMenu, fieldOptions: IFieldContextMenu) {
const {disableModify, isReadonly} = fieldOptions;
const disableForReadonlyColumn = dom.cls('disabled', disableModify || isReadonly);
return [
menuItemCmd(allCommands.contextMenuCut, t('Cut'), disableForReadonlyColumn),
menuItemCmd(allCommands.contextMenuCopy, t('Copy')),
menuItemCmd(allCommands.contextMenuPaste, t('Paste'), disableForReadonlyColumn),
menuDivider(),
menuItemCmd(allCommands.clearCardFields, t('Clear field'), disableForReadonlyColumn),
menuItemCmd(allCommands.hideCardFields, t('Hide field')),
menuDivider(),
menuItemCmd(allCommands.copyLink, t('Copy anchor link')),
];
}

View File

@@ -14,7 +14,7 @@ import {Computed, Disposable, dom, DomElementArg, Observable, observable, styled
import pick = require('lodash/pick');
import {ACIndexImpl, normalizeText} from 'app/client/lib/ACIndex';
import {copyToClipboard} from 'app/client/lib/copyToClipboard';
import {copyToClipboard} from 'app/client/lib/clipboardUtils';
import {setTestState} from 'app/client/lib/testState';
import {buildMultiUserManagerModal} from 'app/client/lib/MultiUserManager';
import {ACUserItem, buildACMemberEmail} from 'app/client/lib/ACUserManager';