イベントの整理

packages/frontend/src/components/grid/MkDataCell.vue

@@ -99,6 +99,10 @@ watch(() => cell.value.selected, () => {
 	}
 });
 
+watch(() => cell.value.value, (newValue, oldValue) => {
+	emitValueChange(newValue);
+});
+
 function onCellDoubleClick(ev: MouseEvent) {
 	switch (ev.type) {
 		case 'dblclick': {
@@ -119,6 +123,7 @@ function onCellKeyDown(ev: KeyboardEvent) {
 	if (!editing.value) {
 		ev.preventDefault();
 		switch (ev.code) {
+			case 'NumpadEnter':
 			case 'Enter':
 			case 'F2': {
 				beginEditing();
@@ -131,6 +136,7 @@ function onCellKeyDown(ev: KeyboardEvent) {
 				endEditing(false);
 				break;
 			}
+			case 'NumpadEnter':
 			case 'Enter': {
 				if (!ev.isComposing) {
 					endEditing(true);

packages/frontend/src/components/grid/MkGrid.vue

@@ -3,9 +3,9 @@
 	ref="rootEl"
 	tabindex="-1"
 	:class="[$style.grid, $style.border]"
-	@mousedown="onMouseDown"
+	@mousedown.prevent="onMouseDown"
 	@keydown="onKeyDown"
-	@contextmenu="onContextMenu"
+	@contextmenu.prevent.stop="onContextMenu"
 >
 	<thead>
 		<MkHeaderRow
@@ -39,7 +39,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, toRefs, watch } from 'vue';
 import {
-	CellValueChangedEvent,
 	ColumnSetting,
 	DataSource,
 	GridColumn,
@@ -51,12 +50,12 @@ import {
 } from '@/components/grid/grid.js';
 import MkDataRow from '@/components/grid/MkDataRow.vue';
 import MkHeaderRow from '@/components/grid/MkHeaderRow.vue';
-import copyToClipboard from '@/scripts/copy-to-clipboard.js';
+import { cellValidation } from '@/components/grid/cell-validators.js';
-import { cellValidation, ValidateViolation } from '@/components/grid/cell-validators.js';
 import { CELL_ADDRESS_NONE, CellAddress, CellValue, GridCell } from '@/components/grid/cell.js';
 import { calcCellWidth, equalCellAddress, getCellAddress } from '@/components/grid/utils.js';
 import { MenuItem } from '@/types/menu.js';
 import * as os from '@/os.js';
+import { GridCurrentState, GridEvent } from '@/components/grid/grid-event.js';
 
 const props = withDefaults(defineProps<{
 	gridSetting?: GridSetting,
@@ -69,14 +68,11 @@ const props = withDefaults(defineProps<{
 });
 
 const emit = defineEmits<{
-	(ev: 'operation:cellValidation', violation: ValidateViolation): void;
+	(ev: 'event', event: GridEvent, current: GridCurrentState): void;
-	(ev: 'operation:rowDeleting', rows: GridRow[]): void;
-	(ev: 'operation:cellContextMenu', cells: GridCell[], menuItems: MenuItem[]): void;
-	(ev: 'change:cellValue', event: CellValueChangedEvent): void;
 }>();
 
 /**
- * grid -> 各子コンポーネントのイベント経路を担う{@link GridEventEmitter}。
+ * grid -> 各子コンポーネントのイベント経路を担う{@link GridEventEmitter}。おもにpropsでの伝搬が難しいイベントを伝搬するために使用する。
  * 子コンポーネント -> gridのイベントでは原則使用せず、{@link emit}を使用する。
  */
 const bus = new GridEventEmitter();
@@ -110,14 +106,18 @@ const selectedCell = computed(() => {
 const rangedCells = computed(() => cells.value.flat().filter(it => it.ranged));
 const rangedBounds = computed(() => {
 	const _cells = rangedCells.value;
+	const cols = _cells.map(it => it.address.col);
+	const rows = _cells.map(it => it.address.row);
+
 	const leftTop = {
-		col: Math.min(..._cells.map(it => it.address.col)),
+		col: Math.min(...cols),
-		row: Math.min(..._cells.map(it => it.address.row)),
+		row: Math.min(...rows),
 	};
 	const rightBottom = {
-		col: Math.max(..._cells.map(it => it.address.col)),
+		col: Math.max(...cols),
-		row: Math.max(..._cells.map(it => it.address.row)),
+		row: Math.max(...rows),
 	};
+
 	return {
 		leftTop,
 		rightBottom,
@@ -136,8 +136,8 @@ const availableBounds = computed(() => {
 });
 const rangedRows = computed(() => rows.value.filter(it => it.ranged));
 
-watch(columnSettings, refreshColumnsSetting);
+watch(columnSettings, refreshColumnsSetting, { immediate: true });
-watch(data, refreshData);
+watch(data, refreshData, { immediate: true, deep: true });
 
 if (_DEV_) {
 	watch(state, (value, oldValue) => {
@@ -232,16 +232,8 @@ function onKeyDown(ev: KeyboardEvent) {
 					unSelectionOutOfRange(newBounds.leftTop, newBounds.rightBottom);
 					expandCellRange(newBounds.leftTop, newBounds.rightBottom);
 				} else {
-					switch (ev.code) {
+					// その他のキーは外部にゆだねる
-						case 'KeyC': {
+					emitGridEvent({ type: 'keydown', event: ev });
-							rangeCopyToClipboard();
-							break;
-						}
-						case 'KeyV': {
-							pasteFromClipboard();
-							break;
-						}
-					}
 				}
 			} else {
 				if (ev.shiftKey) {
@@ -348,19 +340,10 @@ function onKeyDown(ev: KeyboardEvent) {
 							selectionCell({ col: selectedCellAddress.col, row: selectedCellAddress.row + 1 });
 							break;
 						}
-						case 'Delete': {
-							if (rangedRows.value.length > 0) {
-								emit('operation:rowDeleting', [...rangedRows.value]);
-							} else {
-								const ranges = rangedCells.value;
-								for (const range of ranges) {
-									range.value = undefined;
-								}
-							}
-							break;
-						}
 						default: {
-							return;
+							// その他のキーは外部にゆだねる
+							emitGridEvent({ type: 'keydown', event: ev });
+							break;
 						}
 					}
 				}
@@ -386,11 +369,9 @@ function onMouseDown(ev: MouseEvent) {
 function onLeftMouseDown(ev: MouseEvent) {
 	const cellAddress = getCellAddress(ev.target as HTMLElement);
 	if (_DEV_) {
-		console.log(`[grid][mouse-left] button: ${ev.button}, cell: ${cellAddress.row}x${cellAddress.col}`);
+		console.log(`[grid][mouse-left] state:${state.value}, button: ${ev.button}, cell: ${cellAddress.row}x${cellAddress.col}`);
 	}
 
-	ev.preventDefault();
-
 	switch (state.value) {
 		case 'cellEditing': {
 			if (availableCellAddress(cellAddress) && !equalCellAddress(editingCellAddress.value, cellAddress)) {
@@ -423,6 +404,8 @@ function onLeftMouseDown(ev: MouseEvent) {
 				const rowCells = cells.value[cellAddress.row];
 				selectionRange(...rowCells.map(cell => cell.address));
 
+				expandRowRange(cellAddress.row, cellAddress.row);
+
 				registerMouseUp();
 				registerMouseMove();
 				firstSelectionRowIdx.value = cellAddress.row;
@@ -441,8 +424,6 @@ function onRightMouseDown(ev: MouseEvent) {
 		console.log(`[grid][mouse-right] button: ${ev.button}, cell: ${cellAddress.row}x${cellAddress.col}`);
 	}
 
-	ev.preventDefault();
-
 	switch (state.value) {
 		case 'normal': {
 			if (!availableCellAddress(cellAddress)) {
@@ -462,10 +443,19 @@ function onRightMouseDown(ev: MouseEvent) {
 
 function onMouseMove(ev: MouseEvent) {
 	ev.preventDefault();
+
+	const targetCellAddress = getCellAddress(ev.target as HTMLElement);
+	if (equalCellAddress(previousCellAddress.value, targetCellAddress)) {
+		return;
+	}
+
+	if (_DEV_) {
+		console.log(`[grid][mouse-move] button: ${ev.button}, cell: ${targetCellAddress.row}x${targetCellAddress.col}`);
+	}
+
 	switch (state.value) {
 		case 'cellSelecting': {
 			const selectedCellAddress = selectedCell.value?.address;
-			const targetCellAddress = getCellAddress(ev.target as HTMLElement);
 			if (equalCellAddress(previousCellAddress.value, targetCellAddress) || !availableCellAddress(targetCellAddress) || !selectedCellAddress) {
 				return;
 			}
@@ -487,7 +477,6 @@ function onMouseMove(ev: MouseEvent) {
 			break;
 		}
 		case 'colSelecting': {
-			const targetCellAddress = getCellAddress(ev.target as HTMLElement);
 			if (!isColumnHeaderCellAddress(targetCellAddress) || previousCellAddress.value.col === targetCellAddress.col) {
 				return;
 			}
@@ -509,7 +498,6 @@ function onMouseMove(ev: MouseEvent) {
 			break;
 		}
 		case 'rowSelecting': {
-			const targetCellAddress = getCellAddress(ev.target as HTMLElement);
 			if (!isRowNumberCellAddress(targetCellAddress) || previousCellAddress.value.row === targetCellAddress.row) {
 				return;
 			}
@@ -560,24 +548,17 @@ function onContextMenu(ev: MouseEvent) {
 		console.log(`[grid][context-menu] button: ${ev.button}, cell: ${cellAddress.row}x${cellAddress.col}`);
 	}
 
-	if (!availableCellAddress(cellAddress)) {
+	const menuItems = Array.of<MenuItem>();
-		return;
+
+	// 外でメニュー項目を挿してもらう
+	if (availableCellAddress(cellAddress)) {
+		emitGridEvent({ type: 'cell-context-menu', event: ev, menuItems });
+	} else if (isRowNumberCellAddress(cellAddress)) {
+		emitGridEvent({ type: 'row-context-menu', event: ev, menuItems });
+	} else if (isColumnHeaderCellAddress(cellAddress)) {
+		emitGridEvent({ type: 'column-context-menu', event: ev, menuItems });
 	}
 
-	ev.preventDefault();
-
-	const _rangedCells = [...rangedCells.value];
-	const menuItems: MenuItem[] = [
-		{
-			text: 'コピー',
-			icon: 'ti ti-files',
-			action: () => rangeCopyToClipboard(),
-		},
-	];
-
-	// 外からメニューを挿せるようにイベントを投げる
-	emit('operation:cellContextMenu', _rangedCells, menuItems);
-
 	if (menuItems.length > 0) {
 		os.contextMenu(menuItems, ev);
 	}
@@ -600,7 +581,7 @@ function onCellEditEnd() {
 }
 
 function onChangeCellValue(sender: GridCell, newValue: CellValue) {
-	setCellValue(sender, newValue);
+	emitCellValue(sender, newValue);
 }
 
 function onChangeCellContentSize(sender: GridCell, contentSize: Size) {
@@ -679,23 +660,44 @@ function calcLargestCellWidth(column: GridColumn) {
 	column.width = `${Math.max(largestColumnWidth, largestCellWidth)}px`;
 }
 
-function setCellValue(sender: GridCell | CellAddress, newValue: CellValue) {
+function emitGridEvent(ev: GridEvent) {
+	const currentState: GridCurrentState = {
+		selectedCell: selectedCell.value,
+		rangedCells: rangedCells.value,
+		rangedRows: rangedRows.value,
+		randedBounds: rangedBounds.value,
+		availableBounds: availableBounds.value,
+		state: state.value,
+		rows: rows.value,
+		columns: columns.value,
+	};
+
+	emit(
+		'event',
+		ev,
+		// 直接書き換えられると状態が狂う可能性があるのでコピーを渡す
+		JSON.parse(JSON.stringify(currentState)),
+	);
+}
+
+function emitCellValue(sender: GridCell | CellAddress, newValue: CellValue) {
 	const cellAddress = 'address' in sender ? sender.address : sender;
 	const cell = cells.value[cellAddress.row][cellAddress.col];
 
 	const violation = cellValidation(cell, newValue);
-	emit('operation:cellValidation', violation);
+	emitGridEvent({ type: 'cell-validation', violation });
 
 	cell.validation = {
 		valid: violation.valid,
 		violations: violation.violations.filter(it => !it.valid),
 	};
-	cell.value = newValue;
 
-	emit('change:cellValue', {
+	emitGridEvent({
+		type: 'cell-value-change',
 		column: cell.column,
 		row: cell.row,
-		value: newValue,
+		oldValue: cell.value,
+		newValue: newValue,
 	});
 }
 
@@ -784,75 +786,6 @@ function isRowNumberCellAddress(cellAddress: CellAddress): boolean {
 	return cellAddress.row >= 0 && cellAddress.col === -1;
 }
 
-function rangeCopyToClipboard() {
-	const lines = Array.of<string>();
-	const bounds = rangedBounds.value;
-	for (let row = bounds.leftTop.row; row <= bounds.rightBottom.row; row++) {
-		const items = Array.of<string>();
-		for (let col = bounds.leftTop.col; col <= bounds.rightBottom.col; col++) {
-			const cell = cells.value[row][col];
-			items.push(cell.value?.toString() ?? '');
-		}
-		lines.push(items.join('\t'));
-	}
-
-	const text = lines.join('\n');
-	copyToClipboard(text);
-}
-
-async function pasteFromClipboard() {
-	function parseValue(value: string, type: ColumnSetting['type']): CellValue {
-		switch (type) {
-			case 'number': {
-				return Number(value);
-			}
-			case 'boolean': {
-				return value === 'true';
-			}
-			default: {
-				return value;
-			}
-		}
-	}
-
-	const clipBoardText = await navigator.clipboard.readText();
-
-	const bounds = rangedBounds.value;
-	const lines = clipBoardText.replace(/\r/g, '')
-		.split('\n')
-		.map(it => it.split('\t'));
-
-	if (lines.length === 1 && lines[0].length === 1) {
-		// 単独文字列の場合は選択範囲全体に同じテキストを貼り付ける
-		const ranges = rangedCells.value;
-		for (const cell of ranges) {
-			setCellValue(cell, parseValue(lines[0][0], cell.column.setting.type));
-		}
-	} else {
-		// 表形式文字列の場合は表形式にパースし、選択範囲に合うように貼り付ける
-		const offsetRow = bounds.leftTop.row;
-		const offsetCol = bounds.leftTop.col;
-		for (let row = bounds.leftTop.row; row <= bounds.rightBottom.row; row++) {
-			const rowIdx = row - offsetRow;
-			if (lines.length <= rowIdx) {
-				// クリップボードから読んだ二次元配列よりも選択範囲の方が大きい場合、貼り付け操作を打ち切る
-				break;
-			}
-
-			const items = lines[rowIdx];
-			for (let col = bounds.leftTop.col; col <= bounds.rightBottom.col; col++) {
-				const colIdx = col - offsetCol;
-				if (items.length <= colIdx) {
-					// クリップボードから読んだ二次元配列よりも選択範囲の方が大きい場合、貼り付け操作を打ち切る
-					break;
-				}
-
-				setCellValue(cells.value[row][col], parseValue(items[colIdx], cells.value[row][col].column.setting.type));
-			}
-		}
-	}
-}
-
 function refreshColumnsSetting() {
 	const bindToList = columnSettings.value.map(it => it.bindTo);
 	if (new Set(bindToList).size !== columnSettings.value.length) {
@@ -863,6 +796,10 @@ function refreshColumnsSetting() {
 }
 
 function refreshData() {
+	if (_DEV_) {
+		console.log('[grid][refresh-data]');
+	}
+
 	const _data: DataSource[] = data.value;
 	const _rows: GridRow[] = _data.map((_, index) => ({
 		index,
@@ -927,9 +864,6 @@ function unregisterMouseUp() {
 }
 
 onMounted(() => {
-	refreshColumnsSetting();
-	refreshData();
-
 	if (rootEl.value) {
 		resizeObserver.observe(rootEl.value);
 

packages/frontend/src/components/grid/MkNumberCell.vue

@@ -1,10 +1,6 @@
 <template>
 <th :class="[$style.cell]">
-	<div
+	<div :class="[$style.root]">
-		:class="[
-			$style.root,
-		]"
-	>
 		{{ content }}
 	</div>
 </th>

packages/frontend/src/components/grid/grid-event.ts

@@ -0,0 +1,73 @@
+import { CellAddress, CellValue, GridCell } from '@/components/grid/cell.js';
+import { GridColumn, GridRow, GridState } from '@/components/grid/grid.js';
+import { ValidateViolation } from '@/components/grid/cell-validators.js';
+import { MenuItem } from '@/types/menu.js';
+
+export type GridCurrentState = {
+	selectedCell?: GridCell;
+	rangedCells: GridCell[];
+	rangedRows: GridRow[];
+	randedBounds: {
+		leftTop: CellAddress;
+		rightBottom: CellAddress;
+	};
+	availableBounds: {
+		leftTop: CellAddress;
+		rightBottom: CellAddress;
+	};
+	state: GridState;
+	rows: GridRow[];
+	columns: GridColumn[];
+};
+
+export type GridEvent =
+	GridCellValueChangeEvent |
+	GridKeyDownEvent |
+	GridMouseDownEvent |
+	GridCellValidationEvent |
+	GridCellContextMenuEvent |
+	GridRowContextMenuEvent |
+	GridColumnContextMenuEvent
+	;
+
+export type GridCellValueChangeEvent = {
+	type: 'cell-value-change';
+	column: GridColumn;
+	row: GridRow;
+	oldValue: CellValue;
+	newValue: CellValue;
+};
+
+export type GridCellValidationEvent = {
+	type: 'cell-validation';
+	violation: ValidateViolation;
+};
+
+export type GridKeyDownEvent = {
+	type: 'keydown';
+	event: KeyboardEvent;
+};
+
+export type GridMouseDownEvent = {
+	type: 'mousedown';
+	event: MouseEvent;
+	clickedCellAddress: CellAddress;
+};
+
+export type GridCellContextMenuEvent = {
+	type: 'cell-context-menu';
+	event: MouseEvent;
+	menuItems: MenuItem[];
+};
+
+export type GridRowContextMenuEvent = {
+	type: 'row-context-menu';
+	event: MouseEvent;
+	menuItems: MenuItem[];
+};
+
+export type GridColumnContextMenuEvent = {
+	type: 'column-context-menu';
+	event: MouseEvent;
+	menuItems: MenuItem[];
+};

packages/frontend/src/components/grid/grid.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from 'eventemitter3';
 import { CellValidator } from '@/components/grid/cell-validators.js';
-import { CellValue, GridCell } from '@/components/grid/cell.js';
+import { CellValue } from '@/components/grid/cell.js';
 
 export type GridSetting = {
 	rowNumberVisible: boolean;
@@ -41,34 +41,6 @@ export type GridRow = {
 	ranged: boolean;
 }
 
-export type CellValueChangedEvent = {
-	column: GridColumn;
-	row: GridRow;
-	value: CellValue;
-}
-
-export type GridEvent = {
-	current: {
-		selectedCell: GridCell;
-		rangedCells: GridCell[];
-		rangedRows: GridRow[];
-		state: GridState;
-		rows: GridRow[];
-		columns: GridColumn[];
-	}
-}
-
-export type GridPreKeyDownEvent = {
-	type: 'pre-keydown';
-	event: KeyboardEvent;
-	prevent: boolean;
-} & GridEvent;
-
-export type GridKeyDownEvent = {
-	type: 'keydown';
-	event: KeyboardEvent;
-} & GridEvent;
-
 export class GridEventEmitter extends EventEmitter<{
 	'forceRefreshContentSize': void;
 }> {

packages/frontend/src/pages/admin/custom-emojis-grid.impl.ts

@@ -1,10 +1,11 @@
 import * as Misskey from 'misskey-js';
 
-export interface IGridItem {
+export type GridItem = {
 	readonly id?: string;
 	readonly fileId?: string;
 	readonly url: string;
 
+	checked: boolean;
 	name: string;
 	category: string;
 	aliases: string;
@@ -14,86 +15,34 @@ export interface IGridItem {
 	roleIdsThatCanBeUsedThisEmojiAsReaction: string;
 }
 
-export class GridItem implements IGridItem {
+export function fromEmojiDetailed(it: Misskey.entities.EmojiDetailed): GridItem {
-	readonly id?: string;
+	return {
-	readonly fileId?: string;
+		id: it.id,
-	readonly url: string;
+		fileId: undefined,
-
+		url: it.url,
-	public checked: boolean;
+		checked: false,
-	public name: string;
+		name: it.name,
-	public category: string;
+		category: it.category ?? '',
-	public aliases: string;
+		aliases: it.aliases.join(', '),
-	public license: string;
+		license: it.license ?? '',
-	public isSensitive: boolean;
+		isSensitive: it.isSensitive,
-	public localOnly: boolean;
+		localOnly: it.localOnly,
-	public roleIdsThatCanBeUsedThisEmojiAsReaction: string;
+		roleIdsThatCanBeUsedThisEmojiAsReaction: it.roleIdsThatCanBeUsedThisEmojiAsReaction.join(', '),
-
+	};
-	private readonly origin: string;
+}
-
+
-	constructor(
+export function fromDriveFile(it: Misskey.entities.DriveFile): GridItem {
-		id: string | undefined,
+	return {
-		fileId: string | undefined,
+		id: undefined,
-		url: string,
+		fileId: it.id,
-		name: string,
+		url: it.url,
-		category: string,
+		checked: false,
-		aliases: string,
+		name: it.name.replace(/\.[a-zA-Z0-9]+$/, ''),
-		license: string,
+		category: '',
-		isSensitive: boolean,
+		aliases: '',
-		localOnly: boolean,
+		license: '',
-		roleIdsThatCanBeUsedThisEmojiAsReaction: string,
+		isSensitive: it.isSensitive,
-	) {
+		localOnly: false,
-		this.id = id;
+		roleIdsThatCanBeUsedThisEmojiAsReaction: '',
-		this.fileId = fileId;
+	};
-		this.url = url;
-
-		this.checked = true;
-		this.aliases = aliases;
-		this.name = name;
-		this.category = category;
-		this.license = license;
-		this.isSensitive = isSensitive;
-		this.localOnly = localOnly;
-		this.roleIdsThatCanBeUsedThisEmojiAsReaction = roleIdsThatCanBeUsedThisEmojiAsReaction;
-
-		this.origin = JSON.stringify(this);
-	}
-
-	static fromEmojiDetailed(it: Misskey.entities.EmojiDetailed): GridItem {
-		return new GridItem(
-			it.id,
-			undefined,
-			it.url,
-			it.name,
-			it.category ?? '',
-			it.aliases.join(', '),
-			it.license ?? '',
-			it.isSensitive,
-			it.localOnly,
-			it.roleIdsThatCanBeUsedThisEmojiAsReaction.join(', '),
-		);
-	}
-
-	static fromDriveFile(it: Misskey.entities.DriveFile): GridItem {
-		return new GridItem(
-			undefined,
-			it.id,
-			it.url,
-			it.name.replace(/\.[a-zA-Z0-9]+$/, ''),
-			'',
-			'',
-			'',
-			it.isSensitive,
-			false,
-			'',
-		);
-	}
-
-	public get edited(): boolean {
-		const { origin, ..._this } = this;
-		return JSON.stringify(_this) !== origin;
-	}
-
-	public asRecord(): Record<string, never> {
-		return this as Record<string, never>;
-	}
 }

packages/frontend/src/pages/admin/custom-emojis-grid.list.vue

@@ -32,7 +32,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, toRefs, watch } from 'vue';
 import * as Misskey from 'misskey-js';
-import { GridItem } from '@/pages/admin/custom-emojis-grid.impl.js';
+import { fromEmojiDetailed, GridItem } from '@/pages/admin/custom-emojis-grid.impl.js';
 import MkGrid from '@/components/grid/MkGrid.vue';
 import { ColumnSetting } from '@/components/grid/grid.js';
 import { i18n } from '@/i18n.js';
@@ -65,7 +65,7 @@ const { customEmojis } = toRefs(props);
 const query = ref('');
 const gridItems = ref<GridItem[]>([]);
 
-const convertedGridItems = computed(() => gridItems.value.map(it => it.asRecord()));
+const convertedGridItems = computed(() => gridItems.value.map(it => it as Record<string, any>));
 
 watch(customEmojis, refreshGridItems);
 
@@ -74,7 +74,7 @@ function onSearchButtonClicked() {
 }
 
 function refreshGridItems() {
-	gridItems.value = customEmojis.value.map(it => GridItem.fromEmojiDetailed(it));
+	gridItems.value = customEmojis.value.map(it => fromEmojiDetailed(it));
 }
 
 onMounted(() => {

packages/frontend/src/pages/admin/custom-emojis-grid.register.vue

@@ -36,7 +36,7 @@
 			<div v-if="registerLogs.length > 0" style="overflow-y: scroll;">
 				<MkGrid
 					:gridSetting="{ rowNumberVisible: false }"
-					:data="convertedRegisterLogs"
+					:data="registerLogs"
 					:columnSettings="registerLogColumnSettings"
 				/>
 			</div>
@@ -66,12 +66,9 @@
 		style="overflow-y: scroll;"
 	>
 		<MkGrid
-			:data="convertedGridItems"
+			:data="gridItems"
 			:columnSettings="columnSettings"
-			@operation:rowDeleting="onRowDeleting"
+			@event="onGridEvent"
-			@operation:cellValidation="onCellValidation"
-			@operation:cellContextMenu="onCellContextMenu"
-			@change:cellValue="onChangeCellValue"
 		/>
 	</div>
 
@@ -89,11 +86,11 @@
 
 <script setup lang="ts">
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { computed, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
-import { GridItem, IGridItem } from '@/pages/admin/custom-emojis-grid.impl.js';
+import { fromDriveFile, GridItem } from '@/pages/admin/custom-emojis-grid.impl.js';
 import MkGrid from '@/components/grid/MkGrid.vue';
-import { CellValueChangedEvent, ColumnSetting, GridRow } from '@/components/grid/grid.js';
+import { ColumnSetting, GridRow } from '@/components/grid/grid.js';
 import { i18n } from '@/i18n.js';
 import MkSelect from '@/components/MkSelect.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
@@ -101,11 +98,19 @@ import { defaultStore } from '@/store.js';
 import MkFolder from '@/components/MkFolder.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
-import { required, ValidateViolation } from '@/components/grid/cell-validators.js';
+import { required } from '@/components/grid/cell-validators.js';
 import { chooseFileFromDrive, chooseFileFromPc } from '@/scripts/select-file.js';
 import { uploadFile } from '@/scripts/upload.js';
-import { GridCell } from '@/components/grid/cell.js';
+import {
-import { MenuItem } from '@/types/menu.js';
+	GridCellValidationEvent,
+	GridCellValueChangeEvent,
+	GridCurrentState,
+	GridEvent,
+	GridKeyDownEvent,
+	GridRowContextMenuEvent,
+} from '@/components/grid/grid-event.js';
+import copyToClipboard from '@/scripts/copy-to-clipboard.js';
+import { CellValue } from '@/components/grid/cell.js';
 
 type FolderItem = {
 	id?: string;
@@ -114,7 +119,7 @@ type FolderItem = {
 
 type UploadResult = {
 	key: string,
-	item: IGridItem,
+	item: GridItem,
 	success: boolean,
 	err?: Error
 };
@@ -163,7 +168,7 @@ const emit = defineEmits<{
 }>();
 
 const uploadFolders = ref<FolderItem[]>([]);
-const gridItems = ref<IGridItem[]>([]);
+const gridItems = ref<GridItem[]>([]);
 const selectedFolderId = ref(defaultStore.state.uploadFolder);
 const keepOriginalUploading = ref(defaultStore.state.keepOriginalUploading);
 const directoryToCategory = ref<boolean>(true);
@@ -171,9 +176,6 @@ const directoryToCategory = ref<boolean>(true);
 const registerButtonDisabled = ref<boolean>(false);
 const registerLogs = ref<RegisterLogItem[]>([]);
 
-const convertedGridItems = computed(() => gridItems.value.map(it => it as Record<string, any>));
-const convertedRegisterLogs = computed(() => registerLogs.value.map(it => it as Record<string, any>));
-
 async function onRegistryClicked() {
 	const dialogSelection = await os.confirm({
 		type: 'info',
@@ -185,7 +187,7 @@ async function onRegistryClicked() {
 		return;
 	}
 
-	const items = new Map<string, IGridItem>(gridItems.value.map(it => [`${it.fileId}|${it.name}`, it]));
+	const items = new Map<string, GridItem>(gridItems.value.map(it => [`${it.fileId}|${it.name}`, it]));
 	const upload = async (): Promise<UploadResult[]> => {
 		const result = Array.of<UploadResult>();
 		for (const [key, item] of items.entries()) {
@@ -243,9 +245,6 @@ async function onClearClicked() {
 }
 
 async function onDrop(ev: DragEvent) {
-	ev.preventDefault();
-	ev.stopPropagation();
-
 	const dropItems = ev.dataTransfer?.items;
 	if (!dropItems || dropItems.length === 0) {
 		return;
@@ -289,7 +288,7 @@ async function onDrop(ev: DragEvent) {
 	);
 
 	for (const { droppedFile, driveFile } of uploadedItems) {
-		const item = GridItem.fromDriveFile(driveFile);
+		const item = fromDriveFile(driveFile);
 		if (directoryToCategory.value) {
 			item.category = droppedFile.path
 				.replace(/^\//, '')
@@ -311,13 +310,13 @@ async function onFileSelectClicked(ev: MouseEvent) {
 			nameConverter: (file) => file.name.replace(/\.[a-zA-Z0-9]+$/, ''),
 		},
 	);
-	gridItems.value.push(...driveFiles.map(GridItem.fromDriveFile));
+	gridItems.value.push(...driveFiles.map(fromDriveFile));
 }
 
 async function onDriveSelectClicked(ev: MouseEvent) {
 	ev.preventDefault();
 	const driveFiles = await chooseFileFromDrive(true);
-	gridItems.value.push(...driveFiles.map(GridItem.fromDriveFile));
+	gridItems.value.push(...driveFiles.map(fromDriveFile));
 }
 
 function onRowDeleting(rows: GridRow[]) {
@@ -325,24 +324,65 @@ function onRowDeleting(rows: GridRow[]) {
 	gridItems.value = gridItems.value.filter((_, index) => !deletedIndexes.includes(index));
 }
 
-function onCellValidation(violation: ValidateViolation) {
+function onGridEvent(event: GridEvent, currentState: GridCurrentState) {
-	registerButtonDisabled.value = !violation.valid;
+	switch (event.type) {
+		case 'cell-validation':
+			onGridCellValidation(event, currentState);
+			break;
+		case 'row-context-menu':
+			onGridRowContextMenu(event, currentState);
+			break;
+		case 'cell-value-change':
+			onGridCellValueChange(event, currentState);
+			break;
+		case 'keydown':
+			onGridKeyDown(event, currentState);
+			break;
+	}
 }
 
-function onCellContextMenu(cells: GridCell[], menuItems: MenuItem[]) {
+function onGridCellValidation(event: GridCellValidationEvent, _: GridCurrentState) {
-	menuItems.push(
+	registerButtonDisabled.value = !event.violation.valid;
+}
+
+function onGridRowContextMenu(event: GridRowContextMenuEvent, currentState: GridCurrentState) {
+	event.menuItems.push(
 		{
 			type: 'button',
 			text: '行を削除',
 			icon: 'ti ti-trash',
-			action: (ev: MouseEvent) => onRowDeleting(cells.map(it => it.row)),
+			action: () => onRowDeleting(currentState.rangedRows),
 		},
 	);
 }
 
-function onChangeCellValue(event: CellValueChangedEvent) {
+function onGridCellValueChange(event: GridCellValueChangeEvent, currentState: GridCurrentState) {
 	const item = gridItems.value[event.row.index];
-	item[event.column.setting.bindTo] = event.value;
+	item[event.column.setting.bindTo] = event.newValue;
+}
+
+function onGridKeyDown(event: GridKeyDownEvent, currentState: GridCurrentState) {
+	switch (event.event.code) {
+		case 'KeyC': {
+			rangeCopyToClipboard(currentState);
+			break;
+		}
+		case 'KeyV': {
+			pasteFromClipboard(currentState);
+			break;
+		}
+		case 'Delete': {
+			if (currentState.rangedRows.length > 0) {
+				onRowDeleting(currentState.rangedRows);
+			} else {
+				const ranges = currentState.rangedCells;
+				for (const cell of ranges) {
+					gridItems.value[cell.row.index][cell.column.setting.bindTo] = undefined;
+				}
+			}
+			break;
+		}
+	}
 }
 
 async function eachDroppedItems(itemList: DataTransferItemList): Promise<DroppedItem[]> {
@@ -403,6 +443,77 @@ function flattenDroppedItems(items: DroppedItem[]): DroppedFile[] {
 	return result;
 }
 
+function rangeCopyToClipboard(currentState: GridCurrentState) {
+	const lines = Array.of<string>();
+	const bounds = currentState.randedBounds;
+
+	for (let row = bounds.leftTop.row; row <= bounds.rightBottom.row; row++) {
+		const items = Array.of<string>();
+		for (let col = bounds.leftTop.col; col <= bounds.rightBottom.col; col++) {
+			const cell = gridItems.value[row][col];
+			items.push(cell.value?.toString() ?? '');
+		}
+		lines.push(items.join('\t'));
+	}
+
+	const text = lines.join('\n');
+	copyToClipboard(text);
+}
+
+async function pasteFromClipboard(currentState: GridCurrentState) {
+	function parseValue(value: string, type: ColumnSetting['type']): CellValue {
+		switch (type) {
+			case 'number': {
+				return Number(value);
+			}
+			case 'boolean': {
+				return value === 'true';
+			}
+			default: {
+				return value;
+			}
+		}
+	}
+
+	const cells = currentState.rangedCells;
+	const clipBoardText = await navigator.clipboard.readText();
+
+	const bounds = currentState.randedBounds;
+	const lines = clipBoardText.replace(/\r/g, '')
+		.split('\n')
+		.map(it => it.split('\t'));
+
+	if (lines.length === 1 && lines[0].length === 1) {
+		// 単独文字列の場合は選択範囲全体に同じテキストを貼り付ける
+		const ranges = currentState.rangedCells;
+		for (const cell of ranges) {
+			gridItems.value[cell.row.index][cell.column.setting.bindTo] = parseValue(lines[0][0], cell.column.setting.type);
+		}
+	} else {
+		// 表形式文字列の場合は表形式にパースし、選択範囲に合うように貼り付ける
+		const offsetRow = bounds.leftTop.row;
+		const offsetCol = bounds.leftTop.col;
+		for (let row = bounds.leftTop.row; row <= bounds.rightBottom.row; row++) {
+			const rowIdx = row - offsetRow;
+			if (lines.length <= rowIdx) {
+				// クリップボードから読んだ二次元配列よりも選択範囲の方が大きい場合、貼り付け操作を打ち切る
+				break;
+			}
+
+			const items = lines[rowIdx];
+			for (let col = bounds.leftTop.col; col <= bounds.rightBottom.col; col++) {
+				const colIdx = col - offsetCol;
+				if (items.length <= colIdx) {
+					// クリップボードから読んだ二次元配列よりも選択範囲の方が大きい場合、貼り付け操作を打ち切る
+					break;
+				}
+
+				gridItems.value[row][col] = parseValue(items[colIdx], cells[row][col].column.setting.type);
+			}
+		}
+	}
+}
+
 async function refreshUploadFolders() {
 	const result = await misskeyApi('drive/folders', {});
 	uploadFolders.value = Array.of<FolderItem>({ name: '-' }, ...result);