コンテキストメニューのVue化

src/background.ts

@@ -21,7 +21,6 @@ import dayjs from "dayjs";
 import windowStateKeeper from "electron-window-state";
 import zodToJsonSchema from "zod-to-json-schema";
 import { hasSupportedGpu } from "./electron/device";
-import { textEditContextMenu } from "./electron/contextMenu";
 import {
   HotkeySetting,
   ThemeConf,
@@ -736,10 +735,6 @@ ipcMainHandle("SHOW_IMPORT_FILE_DIALOG", (_, { title }) => {
   })?.[0];
 });
 
-ipcMainHandle("OPEN_TEXT_EDIT_CONTEXT_MENU", () => {
-  textEditContextMenu.popup({ window: win });
-});
-
 ipcMainHandle("IS_AVAILABLE_GPU_MODE", () => {
   return hasSupportedGpu(process.platform);
 });

src/components/AudioCell.vue

@@ -33,12 +33,13 @@
       :model-value="audioTextBuffer"
       :aria-label="`${textLineNumberIndex}行目`"
       @update:model-value="setAudioTextBuffer"
-      @change="willRemove || pushAudioText()"
+      @blur="pushAudioTextIfNeeded()"
       @paste="pasteOnAudioCell"
       @focus="setActiveAudioKey()"
       @keydown.prevent.up.exact="moveUpCell"
       @keydown.prevent.down.exact="moveDownCell"
-      @mouseup.right="onRightClickTextField"
+      @keydown.prevent.enter.exact="pushAudioTextIfNeeded()"
+      :aria-label="`${textLineNumberIndex}行目`"
     >
       <template #error>
         文章が長いと正常に動作しない可能性があります。
@@ -55,16 +56,19 @@
           @click="removeCell"
         />
       </template>
+      <context-menu :menudata="contextMenudata" />
     </q-input>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, watch, ref } from "vue";
+import { computed, watch, ref, nextTick } from "vue";
 import { QInput } from "quasar";
-import CharacterButton from "./CharacterButton.vue";
+import CharacterButton from "@/components/CharacterButton.vue";
+import ContextMenu, { ContextMenuItemData } from "@/components/ContextMenu.vue";
 import { useStore } from "@/store";
-import { AudioKey, Voice } from "@/type/preload";
+import { AudioKey, SplitTextWhenPasteType, Voice } from "@/type/preload";
+import { QInputSelectionHelper } from "@/helpers/QInputSelectionHelper";
 
 const props =
   defineProps<{
@@ -148,8 +152,8 @@ watch(
   }
 );
 
-const pushAudioText = async () => {
-  if (isChangeFlag.value) {
+const pushAudioTextIfNeeded = async () => {
+  if (!willRemove.value && isChangeFlag.value) {
     isChangeFlag.value = false;
     await store.dispatch("COMMAND_CHANGE_AUDIO_TEXT", {
       audioKey: props.audioKey,
@@ -158,46 +162,56 @@ const pushAudioText = async () => {
   }
 };
 
+let willSelectAll = false;
+// NOTE: コンテキストメニューアイテムのonClick実行後も再フォーカスされるため発火する
 const setActiveAudioKey = () => {
+  if (willSelectAll) {
+    willSelectAll = false;
+    textfield.value?.select();
+  }
+
   store.dispatch("SET_ACTIVE_AUDIO_KEY", { audioKey: props.audioKey });
 };
-const isEnableSplitText = computed(() => store.state.splitTextWhenPaste);
+
 // コピペしたときに句点と改行で区切る
+const textSplitType = computed(() => store.state.splitTextWhenPaste);
+const textSplitter: Record<SplitTextWhenPasteType, (text: string) => string[]> =
+  {
+    PERIOD_AND_NEW_LINE: (text) =>
+      text.replaceAll("。", "。\n\r").split(/[\n\r]/),
+    NEW_LINE: (text) => text.split(/[\n\r]/),
+    OFF: (text) => [text],
+  };
 const pasteOnAudioCell = async (event: ClipboardEvent) => {
-  if (event.clipboardData && isEnableSplitText.value !== "OFF") {
-    let texts: string[] = [];
+  if (event.clipboardData && textSplitType.value !== "OFF") {
     const clipBoardData = event.clipboardData.getData("text/plain");
-    switch (isEnableSplitText.value) {
-      case "PERIOD_AND_NEW_LINE":
-        texts = clipBoardData.replaceAll("。", "。\n\r").split(/[\n\r]/);
-        break;
-      case "NEW_LINE":
-        texts = clipBoardData.split(/[\n\r]/);
-        break;
-    }
+    const texts = textSplitter[textSplitType.value](clipBoardData);
 
     if (texts.length > 1) {
       event.preventDefault();
-      blurCell(); // フォーカスを外して編集中のテキスト内容を確定させる
-
-      const prevAudioKey = props.audioKey;
-      if (audioTextBuffer.value == "") {
-        const text = texts.shift();
-        if (text == undefined) return;
-        setAudioTextBuffer(text);
-        await pushAudioText();
-      }
-
-      const audioKeys = await store.dispatch("COMMAND_PUT_TEXTS", {
-        texts,
-        voice: audioItem.value.voice,
-        prevAudioKey,
-      });
-      if (audioKeys)
-        emit("focusCell", { audioKey: audioKeys[audioKeys.length - 1] });
+      await putMultilineText(texts);
     }
   }
 };
+const putMultilineText = async (texts: string[]) => {
+  blurCell(); // フォーカスを外して編集中のテキスト内容を確定させる
+
+  const prevAudioKey = props.audioKey;
+  if (audioTextBuffer.value == "") {
+    const text = texts.shift();
+    if (text == undefined) return;
+    setAudioTextBuffer(text);
+    await pushAudioTextIfNeeded();
+  }
+
+  const audioKeys = await store.dispatch("COMMAND_PUT_TEXTS", {
+    texts,
+    voice: audioItem.value.voice,
+    prevAudioKey,
+  });
+  if (audioKeys)
+    emit("focusCell", { audioKey: audioKeys[audioKeys.length - 1] });
+};
 
 // 行番号を表示するかどうか
 const showTextLineNumber = computed(() => store.state.showTextLineNumber);
@@ -258,9 +272,76 @@ const deleteButtonEnable = computed(() => {
 });
 
 // テキスト編集エリアの右クリック
-const onRightClickTextField = () => {
-  store.dispatch("OPEN_TEXT_EDIT_CONTEXT_MENU");
-};
+// input.valueをスクリプトから変更した場合は@changeが発火しないため、
+// @blurと@keydown.prevent.enter.exactに分けている
+const contextMenudata = ref<ContextMenuItemData[]>([
+  {
+    type: "button",
+    label: "切り取り",
+    onClick: async () => {
+      if (textfieldSelection.isEmpty) return;
+
+      const text = textfieldSelection.getAsString();
+      const start = textfieldSelection.start;
+      setAudioTextBuffer(textfieldSelection.getReplacedStringTo(""));
+      await navigator.clipboard.writeText(text);
+      // FIXME: <input>への反映までにラグがあるのを、
+      //        裏技的に上の行にawaitを追加して、await後に実行することで回避している。
+      //        await nextTick()を利用すべきだがなぜか意図したとおりに動かない。
+      textfieldSelection.setCursorPosition(start);
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "コピー",
+    onClick: () => {
+      if (textfieldSelection.isEmpty) return;
+
+      navigator.clipboard.writeText(textfieldSelection.getAsString());
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "貼り付け",
+    onClick: async () => {
+      const text = await navigator.clipboard.readText();
+
+      // 複数行貼り付け
+      if (textSplitType.value !== "OFF") {
+        const texts = textSplitter[textSplitType.value](text);
+        if (texts.length > 1) {
+          await putMultilineText(texts);
+          return;
+        }
+      }
+
+      const beforeLength = textfieldSelection.nativeEl.value.length;
+      const end = textfieldSelection.end ?? 0;
+      setAudioTextBuffer(textfieldSelection.getReplacedStringTo(text, true));
+      await nextTick();
+      textfieldSelection.setCursorPosition(
+        // 自動的に削除される改行などの文字数を念のため考慮している
+        end + textfieldSelection.nativeEl.value.length - beforeLength
+      );
+    },
+    disableWhenUiLocked: true,
+  },
+  { type: "separator" },
+  {
+    type: "button",
+    label: "全選択",
+    onClick: async () => {
+      // コンテキストメニューを閉じた場合、多分Quasarの内部処理として
+      // コンテキストメニューを開いた時点の選択範囲が復元(再選択)される模様。
+      // その後に選択範囲を変更しないと反映されないため、フラグを立てて後から処理する。
+      willSelectAll = true;
+    },
+    disableWhenUiLocked: true,
+  },
+]);
+// TODO: (MAY)コンテキストメニューを開いたときに選択範囲が外れる現象の原因調査・修正
 
 const blurCell = (event?: KeyboardEvent) => {
   if (event?.isComposing) {
@@ -274,6 +355,8 @@ const blurCell = (event?: KeyboardEvent) => {
 // フォーカス
 const textfield = ref<QInput>();
 
+const textfieldSelection = new QInputSelectionHelper(textfield);
+
 // 複数エンジン
 const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
 </script>

src/components/ContextMenu.vue

@@ -0,0 +1,32 @@
+<template>
+  <q-menu touch-position context-menu no-focus>
+    <q-list dense>
+      <menu-item
+        v-for="(menu, index) of menudata"
+        :key="index"
+        :menudata="menu"
+        :disable="
+          uiLocked && menu.type !== 'separator' && menu.disableWhenUiLocked
+        "
+      ></menu-item>
+    </q-list>
+  </q-menu>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import MenuItem from "@/components/MenuItem.vue";
+import { MenuItemButton, MenuItemSeparator } from "@/components/MenuBar.vue";
+import { useStore } from "@/store";
+
+defineProps<{
+  menudata: ContextMenuItemData[];
+}>();
+
+const store = useStore();
+const uiLocked = computed(() => store.getters.UI_LOCKED);
+
+export type ContextMenuItemData = MenuItemSeparator | MenuItemButton;
+</script>
+
+<style lang="scss" scoped></style>

src/electron/preload.ts

@@ -134,10 +134,6 @@ const api: Sandbox = {
     return await ipcRendererInvoke("READ_FILE", { filePath });
   },
 
-  openTextEditContextMenu: () => {
-    return ipcRendererInvoke("OPEN_TEXT_EDIT_CONTEXT_MENU");
-  },
-
   isAvailableGPUMode: () => {
     return ipcRendererInvoke("IS_AVAILABLE_GPU_MODE");
   },

src/helpers/QInputSelectionHelper.ts

@@ -0,0 +1,70 @@
+import { QInput } from "quasar";
+import { Ref } from "vue";
+
+/**
+ * QInput の選択範囲への操作を簡単にできるようにするクラス
+ */
+export class QInputSelectionHelper {
+  private _nativeEl: HTMLInputElement | undefined = undefined;
+
+  constructor(private textfield: Ref<QInput | undefined>) {}
+
+  // this.start が number | null なので null も受け付ける
+  setCursorPosition(index: number | null) {
+    if (index === null) return;
+
+    this.nativeEl.selectionStart = this.nativeEl.selectionEnd = index;
+  }
+
+  getReplacedStringTo(string: string, allowInsertOnly = false) {
+    if (!allowInsertOnly && this.isEmpty) {
+      return this.nativeEl.value;
+    }
+
+    const start = this.nativeEl.selectionStart ?? 0;
+    const end = this.nativeEl.selectionEnd ?? 0;
+
+    return `${this.nativeEl.value.substring(
+      0,
+      start
+    )}${string}${this.nativeEl.value.substring(end)}`;
+  }
+
+  getAsString() {
+    return this.nativeEl.value.substring(
+      this.nativeEl.selectionStart ?? 0,
+      this.nativeEl.selectionEnd ?? 0
+    );
+  }
+
+  empty() {
+    this.nativeEl.selectionEnd = this.nativeEl.selectionStart;
+  }
+
+  get nativeEl() {
+    return this._nativeEl ?? this.getNativeEl();
+  }
+
+  get start() {
+    return this.nativeEl.selectionStart;
+  }
+
+  get end() {
+    return this.nativeEl.selectionEnd;
+  }
+
+  get isEmpty() {
+    const start = this.nativeEl.selectionStart;
+    const end = this.nativeEl.selectionEnd;
+    return start === null || end === null || start === end;
+  }
+
+  private getNativeEl() {
+    const nativeEl = this.textfield.value?.nativeEl;
+    if (!(nativeEl instanceof HTMLInputElement)) {
+      throw new Error("nativeElの取得に失敗しました。");
+    }
+    this._nativeEl = nativeEl;
+    return nativeEl;
+  }
+}

src/store/audio.ts

@@ -1897,12 +1897,6 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
     },
   },
 
-  OPEN_TEXT_EDIT_CONTEXT_MENU: {
-    action() {
-      window.electron.openTextEditContextMenu();
-    },
-  },
-
   CHECK_FILE_EXISTS: {
     action(_, { file }: { file: string }) {
       return window.electron.checkFileExists(file);

src/store/type.ts

@@ -470,10 +470,6 @@ export type AudioStoreTypes = {
     action(): void;
   };
 
-  OPEN_TEXT_EDIT_CONTEXT_MENU: {
-    action(): void;
-  };
-
   CHECK_FILE_EXISTS: {
     action(payload: { file: string }): Promise<boolean>;
   };