fix

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

@@ -62,7 +62,7 @@ import {
 	toRefs,
 	watch,
 } from 'vue';
-import { GridEventEmitter, Size } from '@/components/grid/grid.js';
+import { GridEventEmitter, GridSetting, Size } from '@/components/grid/grid.js';
 import { useTooltip } from '@/scripts/use-tooltip.js';
 import * as os from '@/os.js';
 import { CellValue, GridCell } from '@/components/grid/cell.js';
@@ -77,10 +77,11 @@ const emit = defineEmits<{
 }>();
 const props = defineProps<{
 	cell: GridCell,
+	gridSetting: GridSetting,
 	bus: GridEventEmitter,
 }>();
 
-const { cell, bus } = toRefs(props);
+const { cell, gridSetting, bus } = toRefs(props);
 
 const rootEl = shallowRef<InstanceType<typeof HTMLTableCellElement>>();
 const contentAreaEl = shallowRef<InstanceType<typeof HTMLDivElement>>();
@@ -126,7 +127,7 @@ function onCellDoubleClick(ev: MouseEvent) {
 
 function onOutsideMouseDown(ev: MouseEvent) {
 	const isOutside = ev.target instanceof Node && !rootEl.value?.contains(ev.target);
-	if (isOutside || !equalCellAddress(cell.value.address, getCellAddress(ev.target as HTMLElement))) {
+	if (isOutside || !equalCellAddress(cell.value.address, getCellAddress(ev.target as HTMLElement, gridSetting.value))) {
 		endEditing(true);
 	}
 }

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

@@ -424,7 +424,7 @@ function onMouseDown(ev: MouseEvent) {
 }
 
 function onLeftMouseDown(ev: MouseEvent) {
-	const cellAddress = getCellAddress(ev.target as HTMLElement);
+	const cellAddress = getCellAddress(ev.target as HTMLElement, gridSetting.value);
 	if (_DEV_) {
 		console.log(`[grid][mouse-left] state:${state.value}, button: ${ev.button}, cell: ${cellAddress.row}x${cellAddress.col}`);
 	}
@@ -476,7 +476,7 @@ function onLeftMouseDown(ev: MouseEvent) {
 }
 
 function onRightMouseDown(ev: MouseEvent) {
-	const cellAddress = getCellAddress(ev.target as HTMLElement);
+	const cellAddress = getCellAddress(ev.target as HTMLElement, gridSetting.value);
 	if (_DEV_) {
 		console.log(`[grid][mouse-right] button: ${ev.button}, cell: ${cellAddress.row}x${cellAddress.col}`);
 	}
@@ -501,7 +501,7 @@ function onRightMouseDown(ev: MouseEvent) {
 function onMouseMove(ev: MouseEvent) {
 	ev.preventDefault();
 
-	const targetCellAddress = getCellAddress(ev.target as HTMLElement);
+	const targetCellAddress = getCellAddress(ev.target as HTMLElement, gridSetting.value);
 	if (equalCellAddress(previousCellAddress.value, targetCellAddress)) {
 		return;
 	}
@@ -600,7 +600,7 @@ function onMouseUp(ev: MouseEvent) {
 }
 
 function onContextMenu(ev: MouseEvent) {
-	const cellAddress = getCellAddress(ev.target as HTMLElement);
+	const cellAddress = getCellAddress(ev.target as HTMLElement, gridSetting.value);
 	if (_DEV_) {
 		console.log(`[grid][context-menu] button: ${ev.button}, cell: ${cellAddress.row}x${cellAddress.col}`);
 	}
@@ -756,7 +756,6 @@ function emitCellValue(sender: GridCell | CellAddress, newValue: CellValue) {
 	const cellAddress = 'address' in sender ? sender.address : sender;
 	const cell = cells.value[cellAddress.row].cells[cellAddress.col];
 
-	if (cell.column.setting.editable) {
 	const violation = cellValidation(cell, newValue);
 	cell.violation = violation;
 	emitGridEvent({
@@ -779,7 +778,6 @@ function emitCellValue(sender: GridCell | CellAddress, newValue: CellValue) {
 		console.log(`[grid][cell-value] row:${cell.row}, col:${cell.column.index}, value:${newValue}`);
 	}
 }
-}
 
 /**
  * {@link selectedCell}のセル番地を取得する。
@@ -930,13 +928,18 @@ function refreshData() {
 	// 行・列の定義はそれぞれインデックスを持っており、そのインデックスは元データの配列番地に対応している。
 	const _cells: RowHolder[] = _rows.map((row, rowIndex) => (
 		{
-			cells: _cols.map(col =>
+			cells: _cols.map(col => {
-				createCell(
+				const cell = createCell(
 					col,
 					row,
 					(col.setting.bindTo in _data[rowIndex]) ? _data[rowIndex][col.setting.bindTo] : undefined,
-				),
+				);
-			),
+
+				// 元の値の時点で不正な場合もあり得るので、バリデーションを実行してすぐに警告できるようにしておく
+				cell.violation = cellValidation(cell, cell.value);
+
+				return cell;
+			}),
 			origin: _data[rowIndex],
 		}
 	));
@@ -1010,7 +1013,7 @@ function patchData(newItems: DataSource[]) {
 				const oldCell = oldCells[colIdx];
 				const newValue = newItem[_col.setting.bindTo];
 				if (oldCell.value !== newValue) {
-					oldCell.value = newValue;
+					emitCellValue(oldCell, newValue);
 				}
 			}
 		}

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

@@ -176,7 +176,8 @@ $handleWidth: 5px;
 
 	.contentArea {
 		display: flex;
-		padding: 4px 0;
+		padding: 6px 4px;
+		box-sizing: border-box;
 		overflow: hidden;
 		white-space: nowrap;
 		text-align: center;

packages/frontend/src/components/grid/cell-validators.ts

@@ -57,7 +57,9 @@ export function cellValidation(cell: GridCell, newValue: CellValue): ValidateVio
 	};
 }
 
-export const required: CellValidator = {
+class ValidatorPreset {
+	required(): CellValidator {
+		return {
 			name: 'required',
 			validate: (params: ValidatorParams): ValidatorResult => {
 				const { value } = params;
@@ -67,4 +69,27 @@ export const required: CellValidator = {
 				};
 			},
 		};
+	}
 
+	regex(pattern: RegExp): CellValidator {
+		return {
+			name: 'regex',
+			validate: (params: ValidatorParams): ValidatorResult => {
+				const { value, column } = params;
+				if (column.setting.type !== 'text') {
+					return {
+						valid: false,
+						message: 'Regex validation is only available for text type.',
+					};
+				}
+
+				return {
+					valid: pattern.test(value?.toString() ?? ''),
+					message: 'Not an allowed format. Please check the input. (Allowed format: ' + pattern.source + ')',
+				};
+			},
+		};
+	}
+}
+
+export const validators = new ValidatorPreset();

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

@@ -1,4 +1,4 @@
-import { SizeStyle } from '@/components/grid/grid.js';
+import { GridSetting, SizeStyle } from '@/components/grid/grid.js';
 import { CELL_ADDRESS_NONE, CellAddress } from '@/components/grid/cell.js';
 
 export function isCellElement(elem: any): elem is HTMLTableCellElement {
@@ -21,7 +21,7 @@ export function calcCellWidth(widthSetting: SizeStyle): string {
 	}
 }
 
-export function getCellAddress(elem: HTMLElement, parentNodeCount = 10): CellAddress {
+export function getCellAddress(elem: HTMLElement, gridSetting: GridSetting, parentNodeCount = 10): CellAddress {
 	let node = elem;
 	for (let i = 0; i < parentNodeCount; i++) {
 		if (isCellElement(node) && isRowElement(node.parentElement)) {
@@ -29,7 +29,7 @@ export function getCellAddress(elem: HTMLElement, parentNodeCount = 10): CellAdd
 				// ヘッダ行ぶんを除く
 				row: node.parentElement.rowIndex - 1,
 				// 数値列ぶんを除く
-				col: node.cellIndex - 1,
+				col: gridSetting.rowNumberVisible ? node.cellIndex - 1 : node.cellIndex,
 			};
 		}
 

packages/frontend/src/components/grid/optin-utils.ts

@@ -1,17 +1,12 @@
 import { Ref } from 'vue';
-import { GridCellValueChangeEvent, GridCurrentState, GridKeyDownEvent } from '@/components/grid/grid-event.js';
+import { GridCurrentState, GridKeyDownEvent } from '@/components/grid/grid-event.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 import { ColumnSetting } from '@/components/grid/column.js';
 import { CellValue } from '@/components/grid/cell.js';
 import { DataSource } from '@/components/grid/grid.js';
 
 class OptInGridUtils {
-	async applyCellValueFromEvent(gridItems: Ref<DataSource[]>, event: GridCellValueChangeEvent) {
+	async defaultKeyDownHandler(gridItems: Ref<DataSource[]>, event: GridKeyDownEvent, currentState: GridCurrentState) {
-		const { row, column, newValue } = event;
-		gridItems.value[row.index][column.setting.bindTo] = newValue;
-	}
-
-	async commonKeyDownHandler(gridItems: Ref<DataSource[]>, event: GridKeyDownEvent, currentState: GridCurrentState) {
 		const { ctrlKey, shiftKey, code } = event.event;
 
 		switch (true) {
@@ -21,7 +16,7 @@ class OptInGridUtils {
 			case ctrlKey: {
 				switch (code) {
 					case 'KeyC': {
-						this.rangeCopyToClipboard(gridItems, currentState);
+						this.copyToClipboard(gridItems, currentState);
 						break;
 					}
 					case 'KeyV': {
@@ -46,7 +41,7 @@ class OptInGridUtils {
 		}
 	}
 
-	rangeCopyToClipboard(gridItems: Ref<DataSource[]>, currentState: GridCurrentState) {
+	copyToClipboard(gridItems: Ref<DataSource[]>, currentState: GridCurrentState) {
 		const lines = Array.of<string>();
 		const bounds = currentState.randedBounds;
 

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

@@ -1,5 +1,12 @@
 import * as Misskey from 'misskey-js';
 
+export type RegisterLogItem = {
+	failed: boolean;
+	url: string;
+	name: string;
+	error?: string;
+};
+
 export type GridItem = {
 	readonly id?: string;
 	readonly fileId?: string;
@@ -37,7 +44,7 @@ export function fromDriveFile(it: Misskey.entities.DriveFile): GridItem {
 		fileId: it.id,
 		url: it.url,
 		checked: false,
-		name: it.name.replace(/\.[a-zA-Z0-9]+$/, ''),
+		name: it.name.replace(/(\.[a-zA-Z0-9]+)+$/, ''),
 		category: '',
 		aliases: '',
 		license: '',

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

@@ -36,10 +36,11 @@ import { fromEmojiDetailed, GridItem } from '@/pages/admin/custom-emojis-grid.im
 import MkGrid from '@/components/grid/MkGrid.vue';
 import { i18n } from '@/i18n.js';
 import MkInput from '@/components/MkInput.vue';
-import { required } from '@/components/grid/cell-validators.js';
 import MkButton from '@/components/MkButton.vue';
 import { ColumnSetting } from '@/components/grid/column.js';
+import { validators } from '@/components/grid/cell-validators.js';
 
+const required = validators.required();
 const columnSettings: ColumnSetting[] = [
 	{ bindTo: 'selected', icon: 'ti-trash', type: 'boolean', editable: true, width: 34 },
 	{ bindTo: 'url', icon: 'ti-icons', type: 'image', editable: false, width: 'auto', validators: [required] },

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

@@ -0,0 +1,101 @@
+<template>
+<div>
+	<div v-if="logs.length > 0" style="overflow-y: scroll;">
+		<MkGrid
+			:gridSetting="{ rowNumberVisible: false }"
+			:data="logs"
+			:columnSettings="columnSettings"
+			@event="onGridEvent"
+		/>
+	</div>
+	<div v-else>
+		ログはありません。
+	</div>
+</div>
+</template>
+
+<script setup lang="ts">
+
+import { toRefs } from 'vue';
+import { ColumnSetting } from '@/components/grid/column.js';
+import { RegisterLogItem } from '@/pages/admin/custom-emojis-grid.impl.js';
+import {
+	GridCellContextMenuEvent,
+	GridCurrentState,
+	GridEvent,
+	GridKeyDownEvent,
+	GridRowContextMenuEvent,
+} from '@/components/grid/grid-event.js';
+import { optInGridUtils } from '@/components/grid/optin-utils.js';
+import MkGrid from '@/components/grid/MkGrid.vue';
+
+const columnSettings: ColumnSetting[] = [
+	{ bindTo: 'failed', title: 'failed', type: 'boolean', editable: false, width: 50 },
+	{ bindTo: 'url', icon: 'ti-icons', type: 'image', editable: false, width: 'auto' },
+	{ bindTo: 'name', title: 'name', type: 'text', editable: false, width: 140 },
+	{ bindTo: 'error', title: 'log', type: 'text', editable: false, width: 'auto' },
+];
+
+const props = defineProps<{
+	logs: RegisterLogItem[];
+}>();
+
+const { logs } = toRefs(props);
+
+function onGridEvent(event: GridEvent, currentState: GridCurrentState) {
+	switch (event.type) {
+		case 'row-context-menu':
+			onGridRowContextMenu(event, currentState);
+			break;
+		case 'cell-context-menu':
+			onGridCellContextMenu(event, currentState);
+			break;
+		case 'keydown':
+			onGridKeyDown(event, currentState);
+			break;
+	}
+}
+
+function onGridRowContextMenu(event: GridRowContextMenuEvent, currentState: GridCurrentState) {
+	event.menuItems.push(
+		{
+			type: 'button',
+			text: '選択行をコピー',
+			icon: 'ti ti-copy',
+			action: () => optInGridUtils.copyToClipboard(logs, currentState),
+		},
+		{
+			type: 'button',
+			text: '選択行を削除',
+			icon: 'ti ti-trash',
+			action: () => optInGridUtils.deleteSelectionRange(logs, currentState),
+		},
+	);
+}
+
+function onGridCellContextMenu(event: GridCellContextMenuEvent, currentState: GridCurrentState) {
+	event.menuItems.push(
+		{
+			type: 'button',
+			text: '選択範囲をコピー',
+			icon: 'ti ti-copy',
+			action: () => optInGridUtils.copyToClipboard(logs, currentState),
+		},
+		{
+			type: 'button',
+			text: '選択行を削除',
+			icon: 'ti ti-trash',
+			action: () => optInGridUtils.deleteSelectionRange(logs, currentState),
+		},
+	);
+}
+
+function onGridKeyDown(event: GridKeyDownEvent, currentState: GridCurrentState) {
+	optInGridUtils.defaultKeyDownHandler(logs, event, currentState);
+}
+
+</script>
+
+<style module lang="scss">
+
+</style>

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

@@ -32,23 +32,13 @@
 			絵文字登録時のログが表示されます。登録操作を行ったり、ページをリロードすると消えます。
 		</template>
 
-		<div>
+		<XRegisterLogs :logs="registerLogs"/>
-			<div v-if="registerLogs.length > 0" style="overflow-y: scroll;">
-				<MkGrid
-					:gridSetting="{ rowNumberVisible: false }"
-					:data="registerLogs"
-					:columnSettings="registerLogColumnSettings"
-				/>
-			</div>
-			<div v-else>
-				ログはありません。
-			</div>
-		</div>
 	</MkFolder>
 
 	<div
-		:class="$style.uploadBox"
+		:class="[$style.uploadBox, [isDragOver ? $style.dragOver : {}]]"
-		@dragover.prevent
+		@dragover.prevent="isDragOver = true"
+		@dragleave.prevent="isDragOver = false"
 		@drop.prevent.stop="onDrop"
 	>
 		<div style="margin-top: 1em">
@@ -61,10 +51,7 @@
 		</ul>
 	</div>
 
-	<div
+	<div v-if="gridItems.length > 0" style="overflow-y: scroll;">
-		v-if="gridItems.length > 0"
-		style="overflow-y: scroll;"
-	>
 		<MkGrid
 			:data="gridItems"
 			:columnSettings="columnSettings"
@@ -72,10 +59,7 @@
 		/>
 	</div>
 
-	<div
+	<div v-if="gridItems.length > 0" :class="$style.buttons">
-		v-if="gridItems.length > 0"
-		:class="$style.buttons"
-	>
 		<MkButton primary :disabled="registerButtonDisabled" @click="onRegistryClicked">
 			{{ i18n.ts.registration }}
 		</MkButton>
@@ -90,7 +74,7 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { onMounted, ref } from 'vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
-import { fromDriveFile, GridItem } from '@/pages/admin/custom-emojis-grid.impl.js';
+import { fromDriveFile, GridItem, RegisterLogItem } from '@/pages/admin/custom-emojis-grid.impl.js';
 import MkGrid from '@/components/grid/MkGrid.vue';
 import { i18n } from '@/i18n.js';
 import MkSelect from '@/components/MkSelect.vue';
@@ -99,7 +83,7 @@ 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 } from '@/components/grid/cell-validators.js';
+import { validators } from '@/components/grid/cell-validators.js';
 import { chooseFileFromDrive, chooseFileFromPc } from '@/scripts/select-file.js';
 import { uploadFile } from '@/scripts/upload.js';
 import {
@@ -114,6 +98,7 @@ import {
 import { ColumnSetting } from '@/components/grid/column.js';
 import { extractDroppedItems, flattenDroppedFiles } from '@/scripts/file-drop.js';
 import { optInGridUtils } from '@/components/grid/optin-utils.js';
+import XRegisterLogs from '@/pages/admin/custom-emojis-grid.register.logs.vue';
 
 const MAXIMUM_EMOJI_COUNT = 100;
 
@@ -129,16 +114,11 @@ type UploadResult = {
 	err?: Error
 };
 
-type RegisterLogItem = {
+const required = validators.required();
-	failed: boolean;
+const regex = validators.regex(/^[a-zA-Z0-9_]+$/);
-	url: string;
-	name: string;
-	error?: string;
-};
-
 const columnSettings: ColumnSetting[] = [
 	{ bindTo: 'url', icon: 'ti-icons', type: 'image', editable: false, width: 'auto', validators: [required] },
-	{ bindTo: 'name', title: 'name', type: 'text', editable: true, width: 140, validators: [required] },
+	{ bindTo: 'name', title: 'name', type: 'text', editable: true, width: 140, validators: [required, regex] },
 	{ bindTo: 'category', title: 'category', type: 'text', editable: true, width: 140 },
 	{ bindTo: 'aliases', title: 'aliases', type: 'text', editable: true, width: 140 },
 	{ bindTo: 'license', title: 'license', type: 'text', editable: true, width: 140 },
@@ -147,13 +127,6 @@ const columnSettings: ColumnSetting[] = [
 	{ bindTo: 'roleIdsThatCanBeUsedThisEmojiAsReaction', title: 'role', type: 'text', editable: true, width: 100 },
 ];
 
-const registerLogColumnSettings: ColumnSetting[] = [
-	{ bindTo: 'failed', title: 'failed', type: 'boolean', editable: false, width: 50 },
-	{ bindTo: 'url', icon: 'ti-icons', type: 'image', editable: false, width: 'auto' },
-	{ bindTo: 'name', title: 'name', type: 'text', editable: false, width: 140 },
-	{ bindTo: 'error', title: 'log', type: 'text', editable: false, width: 'auto' },
-];
-
 const emit = defineEmits<{
 	(ev: 'operation:registered'): void;
 }>();
@@ -163,15 +136,15 @@ const gridItems = ref<GridItem[]>([]);
 const selectedFolderId = ref(defaultStore.state.uploadFolder);
 const keepOriginalUploading = ref(defaultStore.state.keepOriginalUploading);
 const directoryToCategory = ref<boolean>(true);
-
 const registerButtonDisabled = ref<boolean>(false);
 const registerLogs = ref<RegisterLogItem[]>([]);
+const isDragOver = ref<boolean>(false);
 
 async function onRegistryClicked() {
 	const dialogSelection = await os.confirm({
 		type: 'info',
 		title: '確認',
-		text: 'リストに表示されている絵文字を新たなカスタム絵文字として登録します。よろしいですか？',
+		text: `リストに表示されている絵文字を新たなカスタム絵文字として登録します。よろしいですか？（負荷を避けるため、一度の操作で登録可能な絵文字は${MAXIMUM_EMOJI_COUNT}件までです）`,
 	});
 
 	if (dialogSelection.canceled) {
@@ -181,7 +154,7 @@ async function onRegistryClicked() {
 	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()) {
+		for (const [key, item] of [...items.entries()].slice(0, MAXIMUM_EMOJI_COUNT)) {
 			try {
 				await misskeyApi('admin/emoji/add', {
 					name: item.name,
@@ -218,7 +191,10 @@ async function onRegistryClicked() {
 		name: it.item.name,
 		error: it.err ? JSON.stringify(it.err) : undefined,
 	}));
-	gridItems.value = failedItems.map(it => it.item);
+
+	// 登録に成功したものは一覧から除く
+	const successItems = result.filter(it => it.success).map(it => it.item);
+	gridItems.value = gridItems.value.filter(it => !successItems.includes(it));
 
 	emit('operation:registered');
 }
@@ -237,14 +213,6 @@ async function onClearClicked() {
 
 async function onDrop(ev: DragEvent) {
 	const droppedFiles = await extractDroppedItems(ev).then(it => flattenDroppedFiles(it));
-	if (droppedFiles.length + gridItems.value.length >= MAXIMUM_EMOJI_COUNT) {
-		await os.alert({
-			type: 'warning',
-			title: '確認',
-			text: `一度に登録できる絵文字の数は${MAXIMUM_EMOJI_COUNT}件までです。この数を超過した分はリストアップされずに切り捨てられます。`,
-		});
-	}
-
 	const uploadedItems = await Promise.all(
 		droppedFiles.map(async (it) => ({
 			droppedFile: it,
@@ -271,7 +239,7 @@ async function onDrop(ev: DragEvent) {
 		return item;
 	});
 
-	await pushToGridItems(items);
+	gridItems.value.push(...items);
 }
 
 async function onFileSelectClicked(ev: MouseEvent) {
@@ -287,12 +255,12 @@ async function onFileSelectClicked(ev: MouseEvent) {
 		),
 	);
 
-	await pushToGridItems(driveFiles.map(fromDriveFile));
+	gridItems.value.push(...driveFiles.map(fromDriveFile));
 }
 
 async function onDriveSelectClicked(ev: MouseEvent) {
 	const driveFiles = await os.promiseDialog(chooseFileFromDrive(true));
-	await pushToGridItems(driveFiles.map(fromDriveFile));
+	gridItems.value.push(...driveFiles.map(fromDriveFile));
 }
 
 function onGridEvent(event: GridEvent, currentState: GridCurrentState) {
@@ -325,7 +293,7 @@ function onGridRowContextMenu(event: GridRowContextMenuEvent, currentState: Grid
 			type: 'button',
 			text: '選択行をコピー',
 			icon: 'ti ti-copy',
-			action: () => optInGridUtils.rangeCopyToClipboard(gridItems, currentState),
+			action: () => optInGridUtils.copyToClipboard(gridItems, currentState),
 		},
 		{
 			type: 'button',
@@ -342,7 +310,7 @@ function onGridCellContextMenu(event: GridCellContextMenuEvent, currentState: Gr
 			type: 'button',
 			text: '選択範囲をコピー',
 			icon: 'ti ti-copy',
-			action: () => optInGridUtils.rangeCopyToClipboard(gridItems, currentState),
+			action: () => optInGridUtils.copyToClipboard(gridItems, currentState),
 		},
 		{
 			type: 'button',
@@ -354,25 +322,12 @@ function onGridCellContextMenu(event: GridCellContextMenuEvent, currentState: Gr
 }
 
 function onGridCellValueChange(event: GridCellValueChangeEvent, currentState: GridCurrentState) {
-	optInGridUtils.applyCellValueFromEvent(gridItems, event);
+	const { row, column, newValue } = event;
+	gridItems.value[row.index][column.setting.bindTo] = newValue;
 }
 
 function onGridKeyDown(event: GridKeyDownEvent, currentState: GridCurrentState) {
-	optInGridUtils.commonKeyDownHandler(gridItems, event, currentState);
+	optInGridUtils.defaultKeyDownHandler(gridItems, event, currentState);
-}
-
-async function pushToGridItems(items: GridItem[]) {
-	for (const item of items) {
-		if (gridItems.value.length < 100) {
-			gridItems.value.push(item);
-		} else {
-			await os.alert({
-				type: 'error',
-				text: `一度に登録できる絵文字は${MAXIMUM_EMOJI_COUNT}件までです。`,
-			});
-			break;
-		}
-	}
 }
 
 async function refreshUploadFolders() {
@@ -397,6 +352,10 @@ onMounted(async () => {
 	border-radius: var(--border-radius);
 	background-color: var(--accentedBg);
 	box-sizing: border-box;
+
+	&.dragOver {
+		cursor: copy;
+	}
 }
 
 .buttons {