From 13433258dafcc23cab9357a67a02c44d32755c10 Mon Sep 17 00:00:00 2001
From: Nanashi <sevenc7c@sevenc7c.com>
Date: Sat, 2 Sep 2023 07:32:50 +0900
Subject: [PATCH] =?UTF-8?q?=E8=A4=87=E6=95=B0=E9=81=B8=E6=8A=9E=EF=BC=9A?=
 =?UTF-8?q?=E9=81=B8=E6=8A=9E=E3=81=A0=E3=81=91=E5=AE=9F=E8=A3=85=20(#1470?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>
Co-authored-by: Hiroshiba <Hiroshiba@users.noreply.github.com>
---
 src/components/AudioCell.vue                  | 253 ++++++++++++++----
 src/components/SettingDialog.vue              |  28 ++
 src/store/audio.ts                            |  33 +++
 src/store/setting.ts                          |   1 +
 src/store/type.ts                             |  10 +
 src/type/preload.ts                           |   2 +
 src/views/EditorHome.vue                      |  20 +-
 ...6\225\260\351\201\270\346\212\236.spec.ts" | 194 ++++++++++++++
 tests/e2e/navigators.ts                       |  21 ++
 tests/unit/store/Vuex.spec.ts                 |   1 +
 10 files changed, 511 insertions(+), 52 deletions(-)
 create mode 100644 "tests/e2e/browser/\350\244\207\346\225\260\351\201\270\346\212\236.spec.ts"

diff --git a/src/components/AudioCell.vue b/src/components/AudioCell.vue
index c71e5f6637..0d6bcfc03f 100644
--- a/src/components/AudioCell.vue
+++ b/src/components/AudioCell.vue
@@ -1,5 +1,23 @@
 <template>
-  <div class="audio-cell">
+  <div
+    ref="root"
+    class="audio-cell"
+    tabindex="-1"
+    :class="{
+      active: isActiveAudioCell,
+      selected: isSelectedAudioCell && isMultiSelectEnabled,
+    }"
+    @keydown.prevent.up="moveUpCell"
+    @keydown.prevent.down="moveDownCell"
+    @focus="onRootFocus"
+  >
+    <!-- 複数選択用のヒットボックス -->
+    <div
+      v-if="(isCtrlOrCommandKeyDown || isShiftKeyDown) && isMultiSelectEnabled"
+      class="click-hitbox"
+      tabindex="-1"
+      @click="onClickWithModifierKey"
+    />
     <q-icon
       v-if="isActiveAudioCell"
       name="arrow_right"
@@ -20,14 +38,18 @@
       :loading="isInitializingSpeaker"
       :show-engine-info="isMultipleEngine"
       :ui-locked="uiLocked"
-      @focus="setActiveAudioKey()"
+      @focus="
+        if (!isSelectedAudioCell) {
+          selectAndSetActiveAudioKey();
+        }
+      "
     />
-    <!-- 
+    <!--
       input.valueをスクリプトから変更した場合は@changeが発火しないため、
       @blurと@keydown.prevent.enter.exactに分けている
     -->
     <q-input
-      ref="textfield"
+      ref="textField"
       filled
       dense
       hide-bottom-space
@@ -40,12 +62,10 @@
       @update:model-value="setAudioTextBuffer"
       @focus="
         clearInputSelection();
-        setActiveAudioKey();
+        selectAndSetActiveAudioKey();
       "
       @blur="pushAudioTextIfNeeded()"
       @paste="pasteOnAudioCell"
-      @keydown.prevent.up.exact="moveUpCell"
-      @keydown.prevent.down.exact="moveDownCell"
       @keydown.prevent.enter.exact="pushAudioTextIfNeeded"
     >
       <template #error>
@@ -78,7 +98,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch, ref, nextTick } from "vue";
+import { computed, watch, ref, nextTick, onMounted, onUnmounted } from "vue";
 import { QInput } from "quasar";
 import CharacterButton from "./CharacterButton.vue";
 import { MenuItemButton, MenuItemSeparator } from "./MenuBar.vue";
@@ -86,6 +106,7 @@ import ContextMenu from "./ContextMenu.vue";
 import { useStore } from "@/store";
 import { AudioKey, SplitTextWhenPasteType, Voice } from "@/type/preload";
 import { SelectionHelperForQInput } from "@/helpers/SelectionHelperForQInput";
+import { isOnCommandOrCtrlKeyDown } from "@/store/utility";
 
 const props =
   defineProps<{
@@ -94,13 +115,28 @@ const props =
 
 const emit =
   defineEmits<{
-    (e: "focusCell", payload: { audioKey: AudioKey }): void;
+    // focusTarget：
+    //   textField: テキストフィールドにフォーカス。複数選択が解除される。特別な理由がない限りはこちらを使う。
+    //   root: AudioCell自体にフォーカス。こちらは複数選択を解除しない。
+    (
+      e: "focusCell",
+      payload: { audioKey: AudioKey; focusTarget?: "textField" | "root" }
+    ): void;
   }>();
 
 defineExpose({
   audioKey: computed(() => props.audioKey),
-  focusTextField: () => {
-    textfield.value?.focus();
+  focusCell: ({
+    focusTarget: baseFocusTarget,
+  }: {
+    focusTarget?: "textField" | "root";
+  }) => {
+    const focusTarget = baseFocusTarget ?? "textField";
+    if (focusTarget === "textField") {
+      textField.value?.focus();
+    } else {
+      root.value?.focus();
+    }
   },
   removeCell: () => {
     removeCell();
@@ -121,6 +157,92 @@ const audioItem = computed(() => store.state.audioItems[props.audioKey]);
 
 const uiLocked = computed(() => store.getters.UI_LOCKED);
 
+const isMultiSelectEnabled = computed(
+  () => store.state.experimentalSetting.enableMultiSelect
+);
+
+const selectAndSetActiveAudioKey = () => {
+  store.dispatch("SET_ACTIVE_AUDIO_KEY", { audioKey: props.audioKey });
+  store.dispatch("SET_SELECTED_AUDIO_KEYS", { audioKeys: [props.audioKey] });
+};
+
+const onRootFocus = () => {
+  selectAndSetActiveAudioKey();
+};
+// 複数選択：Ctrl（Cmd）またはShiftキーが押されている時のクリック処理
+const onClickWithModifierKey = (event: MouseEvent) => {
+  if (uiLocked.value) return;
+  const currentActiveAudioKey = store.getters.ACTIVE_AUDIO_KEY;
+  const currentSelectedAudioKeys = store.getters.SELECTED_AUDIO_KEYS;
+  let newActiveAudioKey: AudioKey | undefined = currentActiveAudioKey;
+  let newSelectedAudioKeys: AudioKey[] = [...currentSelectedAudioKeys];
+  if (event.shiftKey) {
+    if (currentActiveAudioKey) {
+      const currentAudioIndex = store.state.audioKeys.indexOf(
+        currentActiveAudioKey
+      );
+      const clickedAudioIndex = store.state.audioKeys.indexOf(props.audioKey);
+      const minIndex = Math.min(currentAudioIndex, clickedAudioIndex);
+      const maxIndex = Math.max(currentAudioIndex, clickedAudioIndex);
+      const audioKeysBetween = store.state.audioKeys.slice(
+        minIndex,
+        maxIndex + 1
+      );
+      newActiveAudioKey = props.audioKey;
+      newSelectedAudioKeys = [...currentSelectedAudioKeys, ...audioKeysBetween];
+    }
+  } else if (isOnCommandOrCtrlKeyDown(event)) {
+    // Ctrlキーを押しながらクリックしたとき：
+    //   activeなAudioCellなら：
+    //     selectedが複数ある場合はactiveを次のselectedに移動し、selectedから除外する。
+    //     selectedが1つの場合はなにもしない。
+    //   選択していないAudioCellならactiveを移動し、以前の選択をselectedに追加する。
+    //   選択しているAudioCellならselectedから除外する。activeは変更しない。
+    if (props.audioKey === currentActiveAudioKey) {
+      if (currentSelectedAudioKeys.length > 1) {
+        const currentAudioIndex = currentSelectedAudioKeys.indexOf(
+          currentActiveAudioKey
+        );
+        newActiveAudioKey =
+          currentSelectedAudioKeys[
+            (currentAudioIndex + 1) % currentSelectedAudioKeys.length
+          ];
+        newSelectedAudioKeys = currentSelectedAudioKeys.filter(
+          (audioKey) => audioKey !== props.audioKey
+        );
+      }
+    } else if (currentSelectedAudioKeys.includes(props.audioKey)) {
+      newActiveAudioKey = currentActiveAudioKey;
+      newSelectedAudioKeys = currentSelectedAudioKeys.filter(
+        (audioKey) => audioKey !== props.audioKey
+      );
+    } else {
+      newActiveAudioKey = props.audioKey;
+      newSelectedAudioKeys = [...currentSelectedAudioKeys, props.audioKey];
+    }
+  }
+  store.dispatch("SET_ACTIVE_AUDIO_KEY", { audioKey: newActiveAudioKey });
+  store.dispatch("SET_SELECTED_AUDIO_KEYS", {
+    audioKeys: newSelectedAudioKeys,
+  });
+};
+
+const isCtrlOrCommandKeyDown = ref(false);
+const isShiftKeyDown = ref(false);
+
+const keyEventListener = (e: KeyboardEvent) => {
+  isCtrlOrCommandKeyDown.value = isOnCommandOrCtrlKeyDown(e);
+  isShiftKeyDown.value = e.shiftKey;
+};
+onMounted(() => {
+  window.addEventListener("keydown", keyEventListener);
+  window.addEventListener("keyup", keyEventListener);
+});
+onUnmounted(() => {
+  window.removeEventListener("keydown", keyEventListener);
+  window.removeEventListener("keyup", keyEventListener);
+});
+
 const selectedVoice = computed<Voice | undefined>({
   get() {
     const { engineId, styleId } = audioItem.value.voice;
@@ -150,6 +272,9 @@ const selectedVoice = computed<Voice | undefined>({
 const isActiveAudioCell = computed(
   () => props.audioKey === store.getters.ACTIVE_AUDIO_KEY
 );
+const isSelectedAudioCell = computed(() =>
+  store.getters.SELECTED_AUDIO_KEYS.includes(props.audioKey)
+);
 
 const audioTextBuffer = ref(audioItem.value.text);
 const isChangeFlag = ref(false);
@@ -184,14 +309,10 @@ const pushAudioTextIfNeeded = async (event?: KeyboardEvent) => {
 // see https://github.com/VOICEVOX/voicevox/pull/1364#issuecomment-1620594931
 const clearInputSelection = () => {
   if (!willFocusOrBlur.value) {
-    textfieldSelection.toEmpty();
+    textFieldSelection.toEmpty();
   }
 };
 
-const setActiveAudioKey = () => {
-  store.dispatch("SET_ACTIVE_AUDIO_KEY", { audioKey: props.audioKey });
-};
-
 // コピペしたときに句点と改行で区切る
 const textSplitType = computed(() => store.state.splitTextWhenPaste);
 const pasteOnAudioCell = async (event: ClipboardEvent) => {
@@ -226,11 +347,11 @@ const paste = async (options?: { text?: string }) => {
   }
 
   const beforeLength = audioTextBuffer.value.length;
-  const end = textfieldSelection.selectionEnd ?? 0;
-  setAudioTextBuffer(textfieldSelection.getReplacedStringTo(text));
+  const end = textFieldSelection.selectionEnd ?? 0;
+  setAudioTextBuffer(textFieldSelection.getReplacedStringTo(text));
   await nextTick();
   // 自動的に削除される改行などの文字数を念のため考慮している
-  textfieldSelection.setCursorPosition(
+  textFieldSelection.setCursorPosition(
     end + audioTextBuffer.value.length - beforeLength
   );
 };
@@ -254,7 +375,9 @@ const putMultilineText = async (texts: string[]) => {
     prevAudioKey,
   });
   if (audioKeys.length > 0) {
-    emit("focusCell", { audioKey: audioKeys[audioKeys.length - 1] });
+    emit("focusCell", {
+      audioKey: audioKeys[audioKeys.length - 1],
+    });
   }
 };
 
@@ -273,20 +396,33 @@ const textLineNumberWidth = computed(() => {
 
 // 上下に移動
 const audioKeys = computed(() => store.state.audioKeys);
-const moveUpCell = (e?: KeyboardEvent) => {
+const moveCell = (offset: number) => (e?: KeyboardEvent) => {
   if (e && e.isComposing) return;
-  const index = audioKeys.value.indexOf(props.audioKey) - 1;
-  if (index >= 0) {
-    emit("focusCell", { audioKey: audioKeys.value[index] });
-  }
-};
-const moveDownCell = (e?: KeyboardEvent) => {
-  if (e && e.isComposing) return;
-  const index = audioKeys.value.indexOf(props.audioKey) + 1;
-  if (index < audioKeys.value.length) {
-    emit("focusCell", { audioKey: audioKeys.value[index] });
+  const index = audioKeys.value.indexOf(props.audioKey) + offset;
+  if (index >= 0 && index < audioKeys.value.length) {
+    const selectedAudioKeys = store.getters.SELECTED_AUDIO_KEYS;
+    if (isMultiSelectEnabled.value && e?.shiftKey) {
+      emit("focusCell", {
+        audioKey: audioKeys.value[index],
+        focusTarget: "root",
+      });
+      store.dispatch("SET_SELECTED_AUDIO_KEYS", {
+        audioKeys: [
+          ...selectedAudioKeys,
+          props.audioKey,
+          audioKeys.value[index],
+        ],
+      });
+    } else {
+      emit("focusCell", {
+        audioKey: audioKeys.value[index],
+        focusTarget: "textField",
+      });
+    }
   }
 };
+const moveUpCell = moveCell(-1);
+const moveDownCell = moveCell(1);
 
 // 消去
 const willRemove = ref(false);
@@ -300,9 +436,13 @@ const removeCell = async () => {
 
     const index = audioKeys.value.indexOf(props.audioKey);
     if (index > 0) {
-      emit("focusCell", { audioKey: audioKeys.value[index - 1] });
+      emit("focusCell", {
+        audioKey: audioKeys.value[index - 1],
+      });
     } else {
-      emit("focusCell", { audioKey: audioKeys.value[index + 1] });
+      emit("focusCell", {
+        audioKey: audioKeys.value[index + 1],
+      });
     }
 
     store.dispatch("COMMAND_REMOVE_AUDIO_ITEM", {
@@ -339,14 +479,14 @@ const contextMenudata = ref<
     label: "切り取り",
     onClick: async () => {
       contextMenu.value?.hide();
-      if (textfieldSelection.isEmpty) return;
+      if (textFieldSelection.isEmpty) return;
 
-      const text = textfieldSelection.getAsString();
-      const start = textfieldSelection.selectionStart;
-      setAudioTextBuffer(textfieldSelection.getReplacedStringTo(""));
+      const text = textFieldSelection.getAsString();
+      const start = textFieldSelection.selectionStart;
+      setAudioTextBuffer(textFieldSelection.getReplacedStringTo(""));
       await nextTick();
       navigator.clipboard.writeText(text);
-      textfieldSelection.setCursorPosition(start);
+      textFieldSelection.setCursorPosition(start);
     },
     disableWhenUiLocked: true,
   },
@@ -355,9 +495,9 @@ const contextMenudata = ref<
     label: "コピー",
     onClick: () => {
       contextMenu.value?.hide();
-      if (textfieldSelection.isEmpty) return;
+      if (textFieldSelection.isEmpty) return;
 
-      navigator.clipboard.writeText(textfieldSelection.getAsString());
+      navigator.clipboard.writeText(textFieldSelection.getAsString());
     },
     disableWhenUiLocked: true,
   },
@@ -376,7 +516,7 @@ const contextMenudata = ref<
     label: "全選択",
     onClick: async () => {
       contextMenu.value?.hide();
-      textfield.value?.select();
+      textField.value?.select();
     },
     disableWhenUiLocked: true,
   },
@@ -391,7 +531,7 @@ const contextMenudata = ref<
         audioKey: props.audioKey,
         text: audioTextBuffer.value,
       });
-      textfield.value?.blur();
+      textField.value?.blur();
     },
     disableWhenUiLocked: true,
   },
@@ -416,7 +556,7 @@ const readyForContextMenu = () => {
   const SHORTED_HEADER_FRAGMENT_LENGTH = 5;
 
   // 選択範囲を1行目に表示
-  const selectionText = textfieldSelection.getAsString();
+  const selectionText = textFieldSelection.getAsString();
   if (selectionText.length === 0) {
     isRangeSelected.value = false;
     getMenuItemButton("切り取り").disabled = true;
@@ -446,9 +586,11 @@ const endContextMenuOperation = async () => {
   willFocusOrBlur.value = false;
 };
 
+const root = ref<HTMLElement>();
+
 // テキスト欄
-const textfield = ref<QInput>();
-const textfieldSelection = new SelectionHelperForQInput(textfield);
+const textField = ref<QInput>();
+const textFieldSelection = new SelectionHelperForQInput(textField);
 
 // 複数エンジン
 const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
@@ -460,8 +602,16 @@ const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
 
 .audio-cell {
   display: flex;
+  position: relative;
   padding: 0.4rem 0.5rem;
   margin: 0.2rem 0.5rem;
+  &:focus {
+    // divはフォーカスするとデフォルトで青い枠が出るので消す
+    outline: none;
+  }
+  &.selected {
+    background-color: rgba(colors.$active-point-focus-rgb, 0.5);
+  }
 
   &:first-child {
     margin-top: 0.6rem;
@@ -474,7 +624,7 @@ const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
   gap: 0px 1rem;
 
   .active-arrow {
-    left: -5px;
+    left: -1rem;
     height: 2rem;
   }
 
@@ -523,4 +673,15 @@ const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
     color: colors.$display;
   }
 }
+
+.click-hitbox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: none;
+  z-index: 1;
+  cursor: default;
+}
 </style>
diff --git a/src/components/SettingDialog.vue b/src/components/SettingDialog.vue
index d400b0cf63..3e58e07020 100644
--- a/src/components/SettingDialog.vue
+++ b/src/components/SettingDialog.vue
@@ -857,6 +857,33 @@
                 >
                 </q-toggle>
               </q-card-actions>
+              <q-card-actions
+                v-if="!isProduction"
+                class="q-px-md q-py-none bg-surface"
+              >
+                <div>複数選択</div>
+                <div aria-label="複数のテキスト欄を選択できるようにします。">
+                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
+                    <q-tooltip
+                      :delay="500"
+                      anchor="center right"
+                      self="center left"
+                      transition-show="jump-right"
+                      transition-hide="jump-left"
+                    >
+                      複数のテキスト欄を選択できるようにします。
+                    </q-tooltip>
+                  </q-icon>
+                </div>
+                <q-space />
+                <q-toggle
+                  :model-value="experimentalSetting.enableMultiSelect"
+                  @update:model-value="
+                    changeExperimentalSetting('enableMultiSelect', $event)
+                  "
+                >
+                </q-toggle>
+              </q-card-actions>
             </q-card>
             <q-card flat class="setting-card">
               <q-card-actions>
@@ -895,6 +922,7 @@ import { computed, ref } from "vue";
 import FileNamePatternDialog from "./FileNamePatternDialog.vue";
 import { useStore } from "@/store";
 import {
+  isProduction,
   SavingSetting,
   EngineSetting,
   ExperimentalSetting,
diff --git a/src/store/audio.ts b/src/store/audio.ts
index 0669ac11e1..a92de141c6 100644
--- a/src/store/audio.ts
+++ b/src/store/audio.ts
@@ -274,6 +274,17 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
     },
   },
 
+  SELECTED_AUDIO_KEYS: {
+    getter(state) {
+      return (
+        //  undo/redoで消えていることがあるためフィルタする
+        state._selectedAudioKeys?.filter((audioKey) =>
+          state.audioKeys.includes(audioKey)
+        ) || []
+      );
+    },
+  },
+
   HAVE_AUDIO_QUERY: {
     getter: (state) => (audioKey: AudioKey) => {
       return state.audioItems[audioKey]?.query != undefined;
@@ -521,6 +532,28 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
     },
   },
 
+  SET_SELECTED_AUDIO_KEYS: {
+    mutation(state, { audioKeys }: { audioKeys?: AudioKey[] }) {
+      state._selectedAudioKeys = audioKeys;
+    },
+    action(
+      { state, commit, getters },
+      { audioKeys }: { audioKeys?: AudioKey[] }
+    ) {
+      const uniqueAudioKeys = new Set(audioKeys);
+      if (
+        getters.ACTIVE_AUDIO_KEY &&
+        !uniqueAudioKeys.has(getters.ACTIVE_AUDIO_KEY)
+      ) {
+        throw new Error("selectedAudioKeys must include activeAudioKey");
+      }
+      const sortedAudioKeys = state.audioKeys.filter((audioKey) =>
+        uniqueAudioKeys.has(audioKey)
+      );
+      commit("SET_SELECTED_AUDIO_KEYS", { audioKeys: sortedAudioKeys });
+    },
+  },
+
   SET_AUDIO_PLAY_START_POINT: {
     mutation(state, { startPoint }: { startPoint?: number }) {
       state.audioPlayStartPoint = startPoint;
diff --git a/src/store/setting.ts b/src/store/setting.ts
index 45ce06f83f..ef8cf5e0a8 100644
--- a/src/store/setting.ts
+++ b/src/store/setting.ts
@@ -50,6 +50,7 @@ export const settingStoreState: SettingStoreState = {
     enableInterrogativeUpspeak: false,
     enableMorphing: false,
     enableMultiEngine: false,
+    enableMultiSelect: false,
   },
   splitTextWhenPaste: "PERIOD_AND_NEW_LINE",
   splitterPosition: {
diff --git a/src/store/type.ts b/src/store/type.ts
index d963d2d128..55a5b5bcc9 100644
--- a/src/store/type.ts
+++ b/src/store/type.ts
@@ -130,6 +130,7 @@ export type AudioStoreState = {
   audioKeys: AudioKey[];
   audioStates: Record<AudioKey, AudioState>;
   _activeAudioKey?: AudioKey;
+  _selectedAudioKeys?: AudioKey[];
   audioPlayStartPoint?: number;
   nowPlayingContinuously: boolean;
 };
@@ -139,6 +140,10 @@ export type AudioStoreTypes = {
     getter: AudioKey | undefined;
   };
 
+  SELECTED_AUDIO_KEYS: {
+    getter: AudioKey[];
+  };
+
   HAVE_AUDIO_QUERY: {
     getter(audioKey: AudioKey): boolean;
   };
@@ -192,6 +197,11 @@ export type AudioStoreTypes = {
     action(payload: { audioKey?: AudioKey }): void;
   };
 
+  SET_SELECTED_AUDIO_KEYS: {
+    mutation: { audioKeys?: AudioKey[] };
+    action(payload: { audioKeys?: AudioKey[] }): void;
+  };
+
   SET_AUDIO_PLAY_START_POINT: {
     mutation: { startPoint?: number };
     action(payload: { startPoint?: number }): void;
diff --git a/src/type/preload.ts b/src/type/preload.ts
index 164d7ee44b..b98c6373fa 100644
--- a/src/type/preload.ts
+++ b/src/type/preload.ts
@@ -3,6 +3,7 @@ import { IpcSOData } from "./ipc";
 import { AltPortInfos } from "@/store/type";
 import { Result } from "@/type/result";
 
+export const isProduction = import.meta.env.MODE === "production";
 export const isElectron = import.meta.env.VITE_TARGET === "electron";
 export const isBrowser = import.meta.env.VITE_TARGET === "browser";
 
@@ -497,6 +498,7 @@ export const experimentalSettingSchema = z.object({
   enableInterrogativeUpspeak: z.boolean().default(false),
   enableMorphing: z.boolean().default(false),
   enableMultiEngine: z.boolean().default(false),
+  enableMultiSelect: z.boolean().default(false),
 });
 
 export type ExperimentalSetting = z.infer<typeof experimentalSettingSchema>;
diff --git a/src/views/EditorHome.vue b/src/views/EditorHome.vue
index ab6d189364..a0a61c47b5 100644
--- a/src/views/EditorHome.vue
+++ b/src/views/EditorHome.vue
@@ -227,7 +227,7 @@ const hotkeyMap = new Map<HotkeyAction, () => HotkeyReturnType>([
     "テキスト欄にフォーカスを戻す",
     () => {
       if (activeAudioKey.value !== undefined) {
-        focusCell({ audioKey: activeAudioKey.value });
+        focusCell({ audioKey: activeAudioKey.value, focusTarget: "textField" });
       }
       return false; // this is the same with event.preventDefault()
     },
@@ -406,7 +406,7 @@ const addAudioItem = async () => {
     audioItem,
     prevAudioKey: activeAudioKey.value,
   });
-  audioCellRefs[newAudioKey].focusTextField();
+  audioCellRefs[newAudioKey].focusCell({ focusTarget: "textField" });
 };
 const duplicateAudioItem = async () => {
   const prevAudioKey = activeAudioKey.value;
@@ -420,7 +420,7 @@ const duplicateAudioItem = async () => {
     audioItem: cloneDeep(prevAudioItem),
     prevAudioKey: activeAudioKey.value,
   });
-  audioCellRefs[newAudioKey].focusTextField();
+  audioCellRefs[newAudioKey].focusCell({ focusTarget: "textField" });
 };
 
 // Pane
@@ -472,8 +472,16 @@ watch(shouldShowPanes, (val, old) => {
 });
 
 // セルをフォーカス
-const focusCell = ({ audioKey }: { audioKey: AudioKey }) => {
-  audioCellRefs[audioKey].focusTextField();
+const focusCell = ({
+  audioKey,
+  focusTarget,
+}: {
+  audioKey: AudioKey;
+  focusTarget?: "root" | "textField";
+}) => {
+  audioCellRefs[audioKey].focusCell({
+    focusTarget: focusTarget ?? "textField",
+  });
 };
 
 // Electronのデフォルトのundo/redoを無効化
@@ -562,7 +570,7 @@ onMounted(async () => {
     const newAudioKey = await store.dispatch("REGISTER_AUDIO_ITEM", {
       audioItem,
     });
-    focusCell({ audioKey: newAudioKey });
+    focusCell({ audioKey: newAudioKey, focusTarget: "textField" });
 
     // 最初の話者を初期化
     store.dispatch("SETUP_SPEAKER", {
diff --git "a/tests/e2e/browser/\350\244\207\346\225\260\351\201\270\346\212\236.spec.ts" "b/tests/e2e/browser/\350\244\207\346\225\260\351\201\270\346\212\236.spec.ts"
new file mode 100644
index 0000000000..4918969730
--- /dev/null
+++ "b/tests/e2e/browser/\350\244\207\346\225\260\351\201\270\346\212\236.spec.ts"
@@ -0,0 +1,194 @@
+import { test, expect, Page } from "@playwright/test";
+import { toggleSetting, navigateToMain } from "../navigators";
+
+test.beforeEach(async ({ page }) => {
+  const BASE_URL = "http://localhost:5173/#/home";
+  await page.setViewportSize({ width: 800, height: 600 });
+  await page.goto(BASE_URL);
+
+  await navigateToMain(page);
+  await page.waitForTimeout(100);
+  await toggleSetting(page, "複数選択");
+
+  await addAudioCells(page, 3);
+});
+
+const ctrlLike = process.platform === "darwin" ? "Meta" : "Control";
+
+type SelectedStatus = {
+  active: number;
+  selected: number[];
+};
+/**
+ * アクティブなAudioCellと選択されているAudioCellを取得する。
+ * 戻り値のインデックスは1から始まる。（nth-childのインデックスと揃えるため）
+ */
+async function getSelectedStatus(page: Page): Promise<SelectedStatus> {
+  const selectedAudioKeys = await page.evaluate(() => {
+    const audioCells = [...document.querySelectorAll(".audio-cell")];
+    let active: number | undefined;
+    const selected: number[] = [];
+    for (let i = 0; i < audioCells.length; i++) {
+      const audioCell = audioCells[i];
+      if (audioCell.classList.contains("active")) {
+        active = i + 1;
+      }
+      if (audioCell.classList.contains("selected")) {
+        selected.push(i + 1);
+      }
+    }
+    if (active === undefined) {
+      throw new Error("No active audio cell");
+    }
+
+    return { active, selected };
+  });
+  return selectedAudioKeys;
+}
+
+async function addAudioCells(page: Page, count: number) {
+  for (let i = 0; i < count; i++) {
+    await page.getByRole("button", { name: "テキストを追加" }).click();
+    await page.waitForTimeout(100);
+  }
+}
+
+test("複数選択：マウス周り", async ({ page }) => {
+  let selectedStatus: SelectedStatus;
+
+  // 複数選択していない状態でactiveのAudioCellをクリックしても何も起こらない
+  await page.locator(".audio-cell:nth-child(1)").click();
+
+  await page.waitForTimeout(100);
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(1);
+  expect(selectedStatus.selected).toEqual([1]);
+
+  // Shift+クリックは前回選択していたAudioCellから今回クリックしたAudioCellまでを選択する
+  await page.locator(".audio-cell:nth-child(2)").click();
+  await page.keyboard.down("Shift");
+  await page.locator(".audio-cell:nth-child(4)").click();
+  await page.keyboard.up("Shift");
+
+  await page.waitForTimeout(100);
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(4);
+  expect(selectedStatus.selected).toEqual([2, 3, 4]);
+
+  // ただのクリックはactiveAudioKeyとselectedAudioKeysをクリックしたAudioCellだけにする
+  await page.locator(".audio-cell:nth-child(2)").click();
+
+  await page.waitForTimeout(100);
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(2);
+  expect(selectedStatus.selected).toEqual([2]);
+
+  if (process.platform === "darwin" && !!process.env.CI) {
+    // なぜかCmd(Meta)+クリックが動かないのでスキップする
+    // FIXME: 動くようにする
+    return;
+  }
+
+  // Ctrl+クリックは選択範囲を追加する
+  await page.keyboard.down(ctrlLike);
+  await page.locator(".audio-cell:nth-child(4)").click();
+  await page.keyboard.up(ctrlLike);
+  await page.waitForTimeout(100);
+
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(4);
+  expect(selectedStatus.selected).toEqual([2, 4]);
+
+  // Ctrl+クリックは選択範囲から削除する
+  await page.keyboard.down(ctrlLike);
+  await page.locator(".audio-cell:nth-child(2)").click();
+  await page.keyboard.up(ctrlLike);
+  await page.waitForTimeout(100);
+
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(4);
+  expect(selectedStatus.selected).toEqual([4]);
+
+  // activeのAudioCellをCtrl+クリックすると選択範囲から削除して次のselectedのAudioCellをactiveにする
+  await page.keyboard.down(ctrlLike);
+  await page.locator(".audio-cell:nth-child(2)").click();
+  await page.locator(".audio-cell:nth-child(2)").click();
+  await page.keyboard.up(ctrlLike);
+  await page.waitForTimeout(100);
+
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(4);
+  expect(selectedStatus.selected).toEqual([4]);
+
+  // selected内のCharacterButtonをクリックしても選択範囲は変わらない
+  await page.locator(".audio-cell:nth-child(2)").click();
+  await page.keyboard.down("Shift");
+  await page.locator(".audio-cell:nth-child(4)").click();
+  await page.keyboard.up("Shift");
+
+  await page.locator(".audio-cell:nth-child(2) .character-button").click();
+
+  await page.waitForTimeout(100);
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(4);
+  expect(selectedStatus.selected).toEqual([2, 3, 4]);
+
+  // selected外のCharacterButtonをクリックすると選択範囲をそのAudioCellだけにする
+  await page.locator(".audio-cell:nth-child(1)").click();
+
+  await page.waitForTimeout(100);
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(1);
+  expect(selectedStatus.selected).toEqual([1]);
+});
+
+test("複数選択：キーボード", async ({ page }) => {
+  let selectedStatus: SelectedStatus;
+  // Shift+下で下方向を選択範囲にする
+  await page.locator(".audio-cell:nth-child(2)").click();
+  await page.keyboard.down("Shift");
+  await page.keyboard.press("ArrowDown");
+  await page.keyboard.up("Shift");
+  await page.waitForTimeout(100);
+
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(3);
+  expect(selectedStatus.selected).toEqual([2, 3]);
+
+  // ただの下で下方向をactiveにして他の選択を解除する
+  await page.keyboard.press("ArrowDown");
+
+  await page.waitForTimeout(100);
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(4);
+  expect(selectedStatus.selected).toEqual([4]);
+
+  // Shift+上で上方向を選択範囲にする
+  await page.keyboard.down("Shift");
+  await page.keyboard.press("ArrowUp");
+  await page.keyboard.up("Shift");
+  await page.waitForTimeout(100);
+
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(3);
+  expect(selectedStatus.selected).toEqual([3, 4]);
+
+  // ただの上で上方向をactiveにして他の選択を解除する
+  await page.keyboard.press("ArrowUp");
+  await page.waitForTimeout(100);
+
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(2);
+  expect(selectedStatus.selected).toEqual([2]);
+
+  // EnterでactiveのAudioCellのテキストフィールドにフォーカスし、複数選択を解除する
+  await page.keyboard.down("Shift");
+  await page.keyboard.press("ArrowDown");
+  await page.keyboard.up("Shift");
+  await page.keyboard.press("Enter");
+
+  await page.waitForTimeout(100);
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(3);
+  expect(selectedStatus.selected).toEqual([3]);
+});
diff --git a/tests/e2e/navigators.ts b/tests/e2e/navigators.ts
index 5e50675638..915cb88280 100644
--- a/tests/e2e/navigators.ts
+++ b/tests/e2e/navigators.ts
@@ -14,6 +14,27 @@ export async function navigateToMain(page: Page) {
   await page.getByRole("button", { name: "許可" }).click();
 }
 
+/**
+ * 特定の設定をトグルする
+ */
+export async function toggleSetting(page: Page, settingName: string) {
+  await page.getByRole("button", { name: "設定" }).click();
+  await page.waitForTimeout(100);
+  // FIXME: なぜかariaで取得できない
+  // await page.getByRole("listitem", { name: "オプション" }).click();
+  await page.getByText("オプション").click();
+  await page.waitForTimeout(100);
+  await page
+    .locator(".q-card__actions", {
+      has: page.getByText(settingName),
+    })
+    .locator(".q-toggle")
+    .click();
+  await page.waitForTimeout(100);
+  await page.getByRole("button", { name: "設定を閉じる" }).click();
+  await page.waitForTimeout(100);
+}
+
 /**
  * ヘルプダイアログの表示まで移動
  */
diff --git a/tests/unit/store/Vuex.spec.ts b/tests/unit/store/Vuex.spec.ts
index 8598a7a9b3..a50f59ceca 100644
--- a/tests/unit/store/Vuex.spec.ts
+++ b/tests/unit/store/Vuex.spec.ts
@@ -129,6 +129,7 @@ describe("store/vuex.js test", () => {
           enableInterrogativeUpspeak: false,
           enableMorphing: false,
           enableMultiEngine: false,
+          enableMultiSelect: false,
         },
         splitTextWhenPaste: "PERIOD_AND_NEW_LINE",
         splitterPosition: {