From 5a9a0e0794b8f0a5cd0eac7caeb73e5daa504997 Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Thu, 27 Jun 2024 22:01:22 +0900
Subject: [PATCH 01/20] =?UTF-8?q?=E5=8F=B3=E3=82=AF=E3=83=AA=E3=83=83?=
 =?UTF-8?q?=E3=82=AF=E3=81=AB=E3=82=88=E3=82=8B=E3=82=B3=E3=83=B3=E3=83=86?=
 =?UTF-8?q?=E3=82=AD=E3=82=B9=E3=83=88=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryManageDialog.vue         | 54 ++++++++++++++++++-
 1 file changed, 53 insertions(+), 1 deletion(-)

diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index 682a61c8fa..c1cf0fd8db 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -125,7 +125,13 @@
                 :disable="uiLocked"
                 @blur="setSurface(surface)"
                 @keydown.enter="yomiFocus"
-              />
+              >
+                <ContextMenu
+                  ref="contextMenu"
+                  :header="contextMenuHeader"
+                  :menudata="contextMenudata"
+                />
+              </QInput>
             </div>
             <div class="row q-pl-md q-pt-sm">
               <div class="text-h6">読み</div>
@@ -142,6 +148,11 @@
                 <template #error>
                   読みに使える文字はひらがなとカタカナのみです。
                 </template>
+                <ContextMenu
+                  ref="contextMenu"
+                  :header="contextMenuHeader"
+                  :menudata="contextMenudata"
+                />
               </QInput>
             </div>
             <div class="row q-pl-md q-mt-lg text-h6">アクセント調整</div>
@@ -266,6 +277,8 @@
 import { computed, ref, watch } from "vue";
 import { QInput } from "quasar";
 import AudioAccent from "@/components/Talk/AudioAccent.vue";
+import { MenuItemButton, MenuItemSeparator } from "@/components/Menu/type";
+import ContextMenu from "@/components/Menu/ContextMenu.vue";
 import { useStore } from "@/store";
 import type { FetchAudioResult } from "@/store/type";
 import { AccentPhrase, UserDictWord } from "@/openapi";
@@ -666,6 +679,45 @@ const toWordEditingState = () => {
 const toDialogClosedState = () => {
   dictionaryManageDialogOpenedComputed.value = false;
 };
+
+// テキスト編集エリアの右クリック
+const contextMenu = ref<InstanceType<typeof ContextMenu>>();
+const contextMenuHeader = ref<string | undefined>("");
+const contextMenudata = ref<
+  [
+    MenuItemButton,
+    MenuItemButton,
+    MenuItemButton,
+    MenuItemSeparator,
+    MenuItemButton,
+  ]
+>([
+  {
+    type: "button",
+    label: "切り取り",
+    onClick: async () => {},
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "コピー",
+    onClick: () => {},
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "貼り付け",
+    onClick: async () => {},
+    disableWhenUiLocked: true,
+  },
+  { type: "separator" },
+  {
+    type: "button",
+    label: "全選択",
+    onClick: async () => {},
+    disableWhenUiLocked: true,
+  },
+]);
 </script>
 
 <style lang="scss" scoped>

From 1f5bb84f1e23595e775e93d25ebb63dceb21b86f Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Thu, 4 Jul 2024 04:38:18 +0900
Subject: [PATCH 02/20] =?UTF-8?q?=E8=BE=9E=E6=9B=B8=E3=81=AE=E5=8D=98?=
 =?UTF-8?q?=E8=AA=9E=E3=81=A8=E8=AA=AD=E3=81=BF=E3=81=AB=E5=85=A8=E9=81=B8?=
 =?UTF-8?q?=E6=8A=9E=E6=93=8D=E4=BD=9C=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryManageDialog.vue         | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index c1cf0fd8db..68ab444713 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -123,6 +123,7 @@
                 class="word-input"
                 dense
                 :disable="uiLocked"
+                @focus="handleFocus('surface')"
                 @blur="setSurface(surface)"
                 @keydown.enter="yomiFocus"
               >
@@ -142,6 +143,7 @@
                 dense
                 :error="!isOnlyHiraOrKana"
                 :disable="uiLocked"
+                @focus="handleFocus('yomi')"
                 @blur="setYomi(yomi)"
                 @keydown.enter="setYomiWhenEnter"
               >
@@ -714,10 +716,23 @@ const contextMenudata = ref<
   {
     type: "button",
     label: "全選択",
-    onClick: async () => {},
-    disableWhenUiLocked: true,
+    onClick: async () => {
+      contextMenu.value?.hide();
+      if (focusInputElement.value === "surface") {
+        surfaceInput.value?.select();
+      } else if (focusInputElement.value === "yomi") {
+        yomiInput.value?.select();
+      }
+    },
+    disableWhenUiLocked: false,
   },
 ]);
+
+// surface と yomi のどちらを選択しているか
+const focusInputElement = ref("");
+const handleFocus = (inputName: string) => {
+  focusInputElement.value = inputName;
+};
 </script>
 
 <style lang="scss" scoped>

From b32ecf1f529bfa5390234e84a269b4edabb74e0f Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Thu, 4 Jul 2024 05:40:53 +0900
Subject: [PATCH 03/20] =?UTF-8?q?=E8=BE=9E=E6=9B=B8=E3=81=AE=E5=8D=98?=
 =?UTF-8?q?=E8=AA=9E=E3=81=A8=E8=AA=AD=E3=81=BF=E3=81=AB=E3=82=B3=E3=83=94?=
 =?UTF-8?q?=E3=83=BC=E6=93=8D=E4=BD=9C=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryManageDialog.vue         | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index 68ab444713..7b3a48f200 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -123,7 +123,8 @@
                 class="word-input"
                 dense
                 :disable="uiLocked"
-                @focus="handleFocus('surface')"
+                @select="handleInteraction('surface')"
+                @focus="handleInteraction('surface')"
                 @blur="setSurface(surface)"
                 @keydown.enter="yomiFocus"
               >
@@ -143,7 +144,8 @@
                 dense
                 :error="!isOnlyHiraOrKana"
                 :disable="uiLocked"
-                @focus="handleFocus('yomi')"
+                @select="handleInteraction('yomi')"
+                @focus="handleInteraction('yomi')"
                 @blur="setYomi(yomi)"
                 @keydown.enter="setYomiWhenEnter"
               >
@@ -289,6 +291,7 @@ import {
   convertLongVowel,
   createKanaRegex,
 } from "@/domain/japanese";
+import { SelectionHelperForQInput } from "@/helpers/SelectionHelperForQInput";
 
 const defaultDictPriority = 5;
 
@@ -703,8 +706,17 @@ const contextMenudata = ref<
   {
     type: "button",
     label: "コピー",
-    onClick: () => {},
-    disableWhenUiLocked: true,
+    onClick: () => {
+      contextMenu.value?.hide();
+      if (inputElement.value === "surface") {
+        if (surfaceInputSelection.isEmpty) return;
+        navigator.clipboard.writeText(surfaceInputSelection.getAsString());
+      } else if (inputElement.value === "yomi") {
+        if (yomiInputSelection.isEmpty) return;
+        navigator.clipboard.writeText(yomiInputSelection.getAsString());
+      }
+    },
+    disableWhenUiLocked: false,
   },
   {
     type: "button",
@@ -718,9 +730,9 @@ const contextMenudata = ref<
     label: "全選択",
     onClick: async () => {
       contextMenu.value?.hide();
-      if (focusInputElement.value === "surface") {
+      if (inputElement.value === "surface") {
         surfaceInput.value?.select();
-      } else if (focusInputElement.value === "yomi") {
+      } else if (inputElement.value === "yomi") {
         yomiInput.value?.select();
       }
     },
@@ -728,10 +740,13 @@ const contextMenudata = ref<
   },
 ]);
 
+const surfaceInputSelection = new SelectionHelperForQInput(surfaceInput);
+const yomiInputSelection = new SelectionHelperForQInput(yomiInput);
+
 // surface と yomi のどちらを選択しているか
-const focusInputElement = ref("");
-const handleFocus = (inputName: string) => {
-  focusInputElement.value = inputName;
+const inputElement = ref("");
+const handleInteraction = (inputName: string) => {
+  inputElement.value = inputName;
 };
 </script>
 

From 439cafd0d78f573f9d3e400c94f058a2dce36df9 Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Thu, 4 Jul 2024 06:44:06 +0900
Subject: [PATCH 04/20] =?UTF-8?q?=E8=BE=9E=E6=9B=B8=E3=81=AE=E5=8D=98?=
 =?UTF-8?q?=E8=AA=9E=E3=81=A8=E8=AA=AD=E3=81=BF=E3=81=AB=E5=88=87=E3=82=8A?=
 =?UTF-8?q?=E5=8F=96=E3=82=8A=E6=93=8D=E4=BD=9C=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryManageDialog.vue         | 40 +++++++++++++++++--
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index 7b3a48f200..0edca5a1ce 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -123,6 +123,7 @@
                 class="word-input"
                 dense
                 :disable="uiLocked"
+                @update:modelValue="setSurfaceOrYomiText"
                 @select="handleInteraction('surface')"
                 @focus="handleInteraction('surface')"
                 @blur="setSurface(surface)"
@@ -144,6 +145,7 @@
                 dense
                 :error="!isOnlyHiraOrKana"
                 :disable="uiLocked"
+                @update:modelValue="setSurfaceOrYomiText"
                 @select="handleInteraction('yomi')"
                 @focus="handleInteraction('yomi')"
                 @blur="setYomi(yomi)"
@@ -278,7 +280,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 import { QInput } from "quasar";
 import AudioAccent from "@/components/Talk/AudioAccent.vue";
 import { MenuItemButton, MenuItemSeparator } from "@/components/Menu/type";
@@ -700,8 +702,29 @@ const contextMenudata = ref<
   {
     type: "button",
     label: "切り取り",
-    onClick: async () => {},
-    disableWhenUiLocked: true,
+    onClick: async () => {
+      contextMenu.value?.hide();
+      if (inputElement.value === "surface") {
+        if (surfaceInputSelection.isEmpty) return;
+
+        const text = surfaceInputSelection.getAsString();
+        const start = surfaceInputSelection.selectionStart;
+        setSurfaceOrYomiText(surfaceInputSelection.getReplacedStringTo(""));
+        await nextTick();
+        navigator.clipboard.writeText(text);
+        surfaceInputSelection.setCursorPosition(start);
+      } else if (inputElement.value === "yomi") {
+        if (yomiInputSelection.isEmpty) return;
+
+        const text = yomiInputSelection.getAsString();
+        const start = yomiInputSelection.selectionStart;
+        setSurfaceOrYomiText(yomiInputSelection.getReplacedStringTo(""));
+        await nextTick();
+        navigator.clipboard.writeText(text);
+        yomiInputSelection.setCursorPosition(start);
+      }
+    },
+    disableWhenUiLocked: false,
   },
   {
     type: "button",
@@ -710,9 +733,11 @@ const contextMenudata = ref<
       contextMenu.value?.hide();
       if (inputElement.value === "surface") {
         if (surfaceInputSelection.isEmpty) return;
+
         navigator.clipboard.writeText(surfaceInputSelection.getAsString());
       } else if (inputElement.value === "yomi") {
         if (yomiInputSelection.isEmpty) return;
+
         navigator.clipboard.writeText(yomiInputSelection.getAsString());
       }
     },
@@ -748,6 +773,15 @@ const inputElement = ref("");
 const handleInteraction = (inputName: string) => {
   inputElement.value = inputName;
 };
+
+const setSurfaceOrYomiText = (text: string | number | null) => {
+  if (typeof text !== "string") throw new Error("typeof text !== 'string'");
+  if (inputElement.value === "surface") {
+    surface.value = text;
+  } else if (inputElement.value === "yomi") {
+    yomi.value = text;
+  }
+};
 </script>
 
 <style lang="scss" scoped>

From 0d1160f9d0b0b70fa895de362dbd3d93a26d601c Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Thu, 4 Jul 2024 07:27:39 +0900
Subject: [PATCH 05/20] =?UTF-8?q?=E8=BE=9E=E6=9B=B8=E3=81=AE=E5=8D=98?=
 =?UTF-8?q?=E8=AA=9E=E3=81=A8=E8=AA=AD=E3=81=BF=E3=81=AB=E8=B2=BC=E3=82=8A?=
 =?UTF-8?q?=E4=BB=98=E3=81=91=E6=93=8D=E4=BD=9C=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryManageDialog.vue         | 44 +++++++++++++++++--
 1 file changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index 0edca5a1ce..217ac13582 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -127,6 +127,7 @@
                 @select="handleInteraction('surface')"
                 @focus="handleInteraction('surface')"
                 @blur="setSurface(surface)"
+                @paste="pasteOnDictionary"
                 @keydown.enter="yomiFocus"
               >
                 <ContextMenu
@@ -149,6 +150,7 @@
                 @select="handleInteraction('yomi')"
                 @focus="handleInteraction('yomi')"
                 @blur="setYomi(yomi)"
+                @paste="pasteOnDictionary"
                 @keydown.enter="setYomiWhenEnter"
               >
                 <template #error>
@@ -688,6 +690,7 @@ const toDialogClosedState = () => {
 };
 
 // テキスト編集エリアの右クリック
+// 参考実装: https://github.com/VOICEVOX/voicevox/pull/1374/files#diff-444f263f72d4db11fe82c672d5c232eb4c29d29dbc1ffd20e279d586b1b2c180R371-R379
 const contextMenu = ref<InstanceType<typeof ContextMenu>>();
 const contextMenuHeader = ref<string | undefined>("");
 const contextMenudata = ref<
@@ -746,8 +749,11 @@ const contextMenudata = ref<
   {
     type: "button",
     label: "貼り付け",
-    onClick: async () => {},
-    disableWhenUiLocked: true,
+    onClick: async () => {
+      contextMenu.value?.hide();
+      paste();
+    },
+    disableWhenUiLocked: false,
   },
   { type: "separator" },
   {
@@ -768,7 +774,11 @@ const contextMenudata = ref<
 const surfaceInputSelection = new SelectionHelperForQInput(surfaceInput);
 const yomiInputSelection = new SelectionHelperForQInput(yomiInput);
 
-// surface と yomi のどちらを選択しているか
+/**
+ * surface と yomi のどちらを選択しているかを取得する。
+ * inputElement.value をもとに、単語か読み、どちらの <QInput> であるかを区別し、
+ * それに対する切り取りやコピー、貼り付けの処理を行う
+ */
 const inputElement = ref("");
 const handleInteraction = (inputName: string) => {
   inputElement.value = inputName;
@@ -782,6 +792,34 @@ const setSurfaceOrYomiText = (text: string | number | null) => {
     yomi.value = text;
   }
 };
+
+const pasteOnDictionary = async (event: ClipboardEvent) => {
+  event.preventDefault();
+  paste({ text: event.clipboardData?.getData("text/plain") });
+};
+
+const paste = async (options?: { text?: string }) => {
+  const text = options ? options.text : await navigator.clipboard.readText();
+  if (text == undefined) return;
+
+  if (inputElement.value === "surface") {
+    const beforeLength = surface.value.length;
+    const end = surfaceInputSelection.selectionEnd ?? 0;
+    setSurfaceOrYomiText(surfaceInputSelection.getReplacedStringTo(text));
+    await nextTick();
+    surfaceInputSelection.setCursorPosition(
+      end + surface.value.length - beforeLength,
+    );
+  } else if (inputElement.value === "yomi") {
+    const beforeLength = yomi.value.length;
+    const end = yomiInputSelection.selectionEnd ?? 0;
+    setSurfaceOrYomiText(yomiInputSelection.getReplacedStringTo(text));
+    await nextTick();
+    yomiInputSelection.setCursorPosition(
+      end + yomi.value.length - beforeLength,
+    );
+  }
+};
 </script>
 
 <style lang="scss" scoped>

From 330ab5acf9d075a63f202138797229bc19cce5dd Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Sat, 20 Jul 2024 03:56:53 +0900
Subject: [PATCH 06/20] =?UTF-8?q?=E5=8F=B3=E3=82=AF=E3=83=AA=E3=83=83?=
 =?UTF-8?q?=E3=82=AF=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC=E3=81=AB=E9=96=A2?=
 =?UTF-8?q?=E3=81=99=E3=82=8B=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=82=B6?=
 =?UTF-8?q?=E3=83=96=E3=83=AB=E3=82=92=E8=BF=BD=E5=8A=A0=E3=81=97=E3=80=81?=
 =?UTF-8?q?=E5=87=A6=E7=90=86=E3=82=92=E3=81=9D=E3=81=A1=E3=82=89=E3=81=AB?=
 =?UTF-8?q?=E5=A7=94=E8=AD=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryManageDialog.vue         | 181 ++++--------------
 src/composables/useRightClickContextMenu.ts   | 122 ++++++++++++
 2 files changed, 155 insertions(+), 148 deletions(-)
 create mode 100644 src/composables/useRightClickContextMenu.ts

diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index 217ac13582..4cbbcb9f26 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -123,17 +123,16 @@
                 class="word-input"
                 dense
                 :disable="uiLocked"
-                @update:modelValue="setSurfaceOrYomiText"
-                @select="handleInteraction('surface')"
-                @focus="handleInteraction('surface')"
+                @update:modelValue="setSurfaceText"
+                @focus="surfaceHandleFocus"
                 @blur="setSurface(surface)"
-                @paste="pasteOnDictionary"
+                @paste="surfacePaste"
                 @keydown.enter="yomiFocus"
               >
                 <ContextMenu
-                  ref="contextMenu"
-                  :header="contextMenuHeader"
-                  :menudata="contextMenudata"
+                  ref="surfaceContextMenu"
+                  :header="surfaceContextMenuHeader"
+                  :menudata="surfaceContextMenudata"
                 />
               </QInput>
             </div>
@@ -146,20 +145,19 @@
                 dense
                 :error="!isOnlyHiraOrKana"
                 :disable="uiLocked"
-                @update:modelValue="setSurfaceOrYomiText"
-                @select="handleInteraction('yomi')"
-                @focus="handleInteraction('yomi')"
+                @update:modelValue="setYomiText"
+                @focus="yomiHandleFocus"
                 @blur="setYomi(yomi)"
-                @paste="pasteOnDictionary"
+                @paste="yomiPaste"
                 @keydown.enter="setYomiWhenEnter"
               >
                 <template #error>
                   読みに使える文字はひらがなとカタカナのみです。
                 </template>
                 <ContextMenu
-                  ref="contextMenu"
-                  :header="contextMenuHeader"
-                  :menudata="contextMenudata"
+                  ref="yomiContextMenu"
+                  :header="yomiContextMenuHeader"
+                  :menudata="yomiContextMenudata"
                 />
               </QInput>
             </div>
@@ -282,11 +280,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { QInput } from "quasar";
 import AudioAccent from "@/components/Talk/AudioAccent.vue";
-import { MenuItemButton, MenuItemSeparator } from "@/components/Menu/type";
 import ContextMenu from "@/components/Menu/ContextMenu.vue";
+import { useRightClickContextMenu } from "@/composables/useRightClickContextMenu";
 import { useStore } from "@/store";
 import type { FetchAudioResult } from "@/store/type";
 import { AccentPhrase, UserDictWord } from "@/openapi";
@@ -295,7 +293,6 @@ import {
   convertLongVowel,
   createKanaRegex,
 } from "@/domain/japanese";
-import { SelectionHelperForQInput } from "@/helpers/SelectionHelperForQInput";
 
 const defaultDictPriority = 5;
 
@@ -689,137 +686,25 @@ const toDialogClosedState = () => {
   dictionaryManageDialogOpenedComputed.value = false;
 };
 
-// テキスト編集エリアの右クリック
-// 参考実装: https://github.com/VOICEVOX/voicevox/pull/1374/files#diff-444f263f72d4db11fe82c672d5c232eb4c29d29dbc1ffd20e279d586b1b2c180R371-R379
-const contextMenu = ref<InstanceType<typeof ContextMenu>>();
-const contextMenuHeader = ref<string | undefined>("");
-const contextMenudata = ref<
-  [
-    MenuItemButton,
-    MenuItemButton,
-    MenuItemButton,
-    MenuItemSeparator,
-    MenuItemButton,
-  ]
->([
-  {
-    type: "button",
-    label: "切り取り",
-    onClick: async () => {
-      contextMenu.value?.hide();
-      if (inputElement.value === "surface") {
-        if (surfaceInputSelection.isEmpty) return;
-
-        const text = surfaceInputSelection.getAsString();
-        const start = surfaceInputSelection.selectionStart;
-        setSurfaceOrYomiText(surfaceInputSelection.getReplacedStringTo(""));
-        await nextTick();
-        navigator.clipboard.writeText(text);
-        surfaceInputSelection.setCursorPosition(start);
-      } else if (inputElement.value === "yomi") {
-        if (yomiInputSelection.isEmpty) return;
-
-        const text = yomiInputSelection.getAsString();
-        const start = yomiInputSelection.selectionStart;
-        setSurfaceOrYomiText(yomiInputSelection.getReplacedStringTo(""));
-        await nextTick();
-        navigator.clipboard.writeText(text);
-        yomiInputSelection.setCursorPosition(start);
-      }
-    },
-    disableWhenUiLocked: false,
-  },
-  {
-    type: "button",
-    label: "コピー",
-    onClick: () => {
-      contextMenu.value?.hide();
-      if (inputElement.value === "surface") {
-        if (surfaceInputSelection.isEmpty) return;
-
-        navigator.clipboard.writeText(surfaceInputSelection.getAsString());
-      } else if (inputElement.value === "yomi") {
-        if (yomiInputSelection.isEmpty) return;
-
-        navigator.clipboard.writeText(yomiInputSelection.getAsString());
-      }
-    },
-    disableWhenUiLocked: false,
-  },
-  {
-    type: "button",
-    label: "貼り付け",
-    onClick: async () => {
-      contextMenu.value?.hide();
-      paste();
-    },
-    disableWhenUiLocked: false,
-  },
-  { type: "separator" },
-  {
-    type: "button",
-    label: "全選択",
-    onClick: async () => {
-      contextMenu.value?.hide();
-      if (inputElement.value === "surface") {
-        surfaceInput.value?.select();
-      } else if (inputElement.value === "yomi") {
-        yomiInput.value?.select();
-      }
-    },
-    disableWhenUiLocked: false,
-  },
-]);
-
-const surfaceInputSelection = new SelectionHelperForQInput(surfaceInput);
-const yomiInputSelection = new SelectionHelperForQInput(yomiInput);
-
-/**
- * surface と yomi のどちらを選択しているかを取得する。
- * inputElement.value をもとに、単語か読み、どちらの <QInput> であるかを区別し、
- * それに対する切り取りやコピー、貼り付けの処理を行う
- */
-const inputElement = ref("");
-const handleInteraction = (inputName: string) => {
-  inputElement.value = inputName;
-};
-
-const setSurfaceOrYomiText = (text: string | number | null) => {
-  if (typeof text !== "string") throw new Error("typeof text !== 'string'");
-  if (inputElement.value === "surface") {
-    surface.value = text;
-  } else if (inputElement.value === "yomi") {
-    yomi.value = text;
-  }
-};
-
-const pasteOnDictionary = async (event: ClipboardEvent) => {
-  event.preventDefault();
-  paste({ text: event.clipboardData?.getData("text/plain") });
-};
-
-const paste = async (options?: { text?: string }) => {
-  const text = options ? options.text : await navigator.clipboard.readText();
-  if (text == undefined) return;
-
-  if (inputElement.value === "surface") {
-    const beforeLength = surface.value.length;
-    const end = surfaceInputSelection.selectionEnd ?? 0;
-    setSurfaceOrYomiText(surfaceInputSelection.getReplacedStringTo(text));
-    await nextTick();
-    surfaceInputSelection.setCursorPosition(
-      end + surface.value.length - beforeLength,
-    );
-  } else if (inputElement.value === "yomi") {
-    const beforeLength = yomi.value.length;
-    const end = yomiInputSelection.selectionEnd ?? 0;
-    setSurfaceOrYomiText(yomiInputSelection.getReplacedStringTo(text));
-    await nextTick();
-    yomiInputSelection.setCursorPosition(
-      end + yomi.value.length - beforeLength,
-    );
-  }
-};
+const inputElementRef = ref("");
+
+const {
+  handleFocus: surfaceHandleFocus,
+  contextMenu: surfaceContextMenu,
+  contextMenuHeader: surfaceContextMenuHeader,
+  contextMenudata: surfaceContextMenudata,
+  setSurfaceOrYomiText: setSurfaceText,
+  pasteOnDic: surfacePaste,
+} = useRightClickContextMenu(surfaceInput, inputElementRef);
+
+const {
+  handleFocus: yomiHandleFocus,
+  contextMenu: yomiContextMenu,
+  contextMenuHeader: yomiContextMenuHeader,
+  contextMenudata: yomiContextMenudata,
+  setSurfaceOrYomiText: setYomiText,
+  pasteOnDic: yomiPaste,
+} = useRightClickContextMenu(yomiInput, inputElementRef);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/composables/useRightClickContextMenu.ts b/src/composables/useRightClickContextMenu.ts
new file mode 100644
index 0000000000..c24b6c3d89
--- /dev/null
+++ b/src/composables/useRightClickContextMenu.ts
@@ -0,0 +1,122 @@
+import { QInput } from "quasar";
+import { ref, Ref, nextTick } from "vue";
+import { MenuItemButton, MenuItemSeparator } from "@/components/Menu/type";
+import ContextMenu from "@/components/Menu/ContextMenu.vue";
+import { SelectionHelperForQInput } from "@/helpers/SelectionHelperForQInput";
+
+// テキスト編集エリアの右クリック
+// 参考実装: https://github.com/VOICEVOX/voicevox/pull/1374/files#diff-444f263f72d4db11fe82c672d5c232eb4c29d29dbc1ffd20e279d586b1b2c180R371-R379
+
+/**
+ * surface と yomi のどちらを選択しているかを取得する。
+ * 単語か読み、どちらの <QInput> であるかを区別し、
+ * それに対する切り取りやコピー、貼り付けの処理を行う
+ */
+export function useRightClickContextMenu(
+  qInputRef: Ref<QInput | undefined>,
+  inputElement: Ref<string>,
+) {
+  const inputSelection = new SelectionHelperForQInput(qInputRef);
+
+  const handleFocus = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    inputElement.value = target.name;
+    qInputRef.value = target as unknown as QInput;
+  };
+
+  const contextMenu = ref<InstanceType<typeof ContextMenu>>();
+  const contextMenuHeader = ref<string | undefined>("");
+  const contextMenudata = ref<
+    [
+      MenuItemButton,
+      MenuItemButton,
+      MenuItemButton,
+      MenuItemSeparator,
+      MenuItemButton,
+    ]
+  >([
+    {
+      type: "button",
+      label: "切り取り",
+      onClick: async () => {
+        contextMenu.value?.hide();
+        handleCut();
+      },
+      disableWhenUiLocked: false,
+    },
+    {
+      type: "button",
+      label: "コピー",
+      onClick: () => {
+        contextMenu.value?.hide();
+        if (inputSelection) {
+          navigator.clipboard.writeText(inputSelection.getAsString());
+        }
+      },
+      disableWhenUiLocked: false,
+    },
+    {
+      type: "button",
+      label: "貼り付け",
+      onClick: async () => {
+        contextMenu.value?.hide();
+        paste();
+      },
+      disableWhenUiLocked: false,
+    },
+    { type: "separator" },
+    {
+      type: "button",
+      label: "全選択",
+      onClick: async () => {
+        contextMenu.value?.hide();
+        qInputRef.value?.select();
+      },
+      disableWhenUiLocked: false,
+    },
+  ]);
+
+  const handleCut = async () => {
+    if (!inputSelection || inputSelection.isEmpty) return;
+
+    const text = inputSelection.getAsString();
+    const start = inputSelection.selectionStart;
+    setSurfaceOrYomiText(inputSelection.getReplacedStringTo(""));
+    await nextTick();
+    navigator.clipboard.writeText(text);
+    inputSelection.setCursorPosition(start);
+  };
+
+  const setSurfaceOrYomiText = (text: string | number | null) => {
+    if (typeof text !== "string") throw new Error("typeof text !== 'string'");
+    inputElement.value = text;
+  };
+
+  const paste = async (options?: { text?: string }) => {
+    if (!inputSelection) return;
+
+    const text = options ? options.text : await navigator.clipboard.readText();
+    if (text == undefined) return;
+    const beforeLength = inputElement.value.length;
+    const end = inputSelection.selectionEnd ?? 0;
+    setSurfaceOrYomiText(inputSelection.getReplacedStringTo(text));
+    await nextTick();
+    inputSelection.setCursorPosition(
+      end + inputElement.value.length - beforeLength,
+    );
+  };
+
+  const pasteOnDic = async (event: ClipboardEvent) => {
+    event.preventDefault();
+    paste({ text: event.clipboardData?.getData("text/plain") });
+  };
+
+  return {
+    handleFocus,
+    contextMenu,
+    contextMenuHeader,
+    contextMenudata,
+    setSurfaceOrYomiText,
+    pasteOnDic,
+  };
+}

From ba201cc21bebbb7a62e088e938798de0d66323d4 Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Fri, 2 Aug 2024 14:27:22 +0900
Subject: [PATCH 07/20] =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC?=
 =?UTF-8?q?=E3=82=B6=E3=83=96=E3=83=AB=E3=82=92=E4=BF=AE=E6=AD=A3=E3=81=97?=
 =?UTF-8?q?=E3=80=81=E5=88=87=E3=82=8A=E5=8F=96=E3=82=8A=E3=82=84=E3=82=B3?=
 =?UTF-8?q?=E3=83=94=E3=83=BC=E3=83=9A=E3=83=BC=E3=82=B9=E3=83=88=E3=81=8C?=
 =?UTF-8?q?=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=99?=
 =?UTF-8?q?=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryManageDialog.vue         | 18 +-------
 src/composables/useRightClickContextMenu.ts   | 45 +++++++++----------
 2 files changed, 24 insertions(+), 39 deletions(-)

diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index 4cbbcb9f26..ee13833a80 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -123,10 +123,7 @@
                 class="word-input"
                 dense
                 :disable="uiLocked"
-                @update:modelValue="setSurfaceText"
-                @focus="surfaceHandleFocus"
                 @blur="setSurface(surface)"
-                @paste="surfacePaste"
                 @keydown.enter="yomiFocus"
               >
                 <ContextMenu
@@ -145,10 +142,7 @@
                 dense
                 :error="!isOnlyHiraOrKana"
                 :disable="uiLocked"
-                @update:modelValue="setYomiText"
-                @focus="yomiHandleFocus"
                 @blur="setYomi(yomi)"
-                @paste="yomiPaste"
                 @keydown.enter="setYomiWhenEnter"
               >
                 <template #error>
@@ -686,25 +680,17 @@ const toDialogClosedState = () => {
   dictionaryManageDialogOpenedComputed.value = false;
 };
 
-const inputElementRef = ref("");
-
 const {
-  handleFocus: surfaceHandleFocus,
   contextMenu: surfaceContextMenu,
   contextMenuHeader: surfaceContextMenuHeader,
   contextMenudata: surfaceContextMenudata,
-  setSurfaceOrYomiText: setSurfaceText,
-  pasteOnDic: surfacePaste,
-} = useRightClickContextMenu(surfaceInput, inputElementRef);
+} = useRightClickContextMenu(surfaceInput, surface, ref("surface"));
 
 const {
-  handleFocus: yomiHandleFocus,
   contextMenu: yomiContextMenu,
   contextMenuHeader: yomiContextMenuHeader,
   contextMenudata: yomiContextMenudata,
-  setSurfaceOrYomiText: setYomiText,
-  pasteOnDic: yomiPaste,
-} = useRightClickContextMenu(yomiInput, inputElementRef);
+} = useRightClickContextMenu(yomiInput, yomi, ref("yomi"));
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/composables/useRightClickContextMenu.ts b/src/composables/useRightClickContextMenu.ts
index c24b6c3d89..36e2bf05f7 100644
--- a/src/composables/useRightClickContextMenu.ts
+++ b/src/composables/useRightClickContextMenu.ts
@@ -14,16 +14,11 @@ import { SelectionHelperForQInput } from "@/helpers/SelectionHelperForQInput";
  */
 export function useRightClickContextMenu(
   qInputRef: Ref<QInput | undefined>,
-  inputElement: Ref<string>,
+  inputText: Ref<string>,
+  inputField: Ref<string>,
 ) {
   const inputSelection = new SelectionHelperForQInput(qInputRef);
 
-  const handleFocus = (event: Event) => {
-    const target = event.target as HTMLInputElement;
-    inputElement.value = target.name;
-    qInputRef.value = target as unknown as QInput;
-  };
-
   const contextMenu = ref<InstanceType<typeof ContextMenu>>();
   const contextMenuHeader = ref<string | undefined>("");
   const contextMenudata = ref<
@@ -60,7 +55,7 @@ export function useRightClickContextMenu(
       label: "貼り付け",
       onClick: async () => {
         contextMenu.value?.hide();
-        paste();
+        await handlePaste();
       },
       disableWhenUiLocked: false,
     },
@@ -81,42 +76,46 @@ export function useRightClickContextMenu(
 
     const text = inputSelection.getAsString();
     const start = inputSelection.selectionStart;
-    setSurfaceOrYomiText(inputSelection.getReplacedStringTo(""));
+    setSurfaceOrYomiText(
+      inputSelection.getReplacedStringTo(""),
+      inputField.value,
+    );
     await nextTick();
     navigator.clipboard.writeText(text);
     inputSelection.setCursorPosition(start);
   };
 
-  const setSurfaceOrYomiText = (text: string | number | null) => {
+  const setSurfaceOrYomiText = (
+    text: string | number | null,
+    field: string,
+  ) => {
     if (typeof text !== "string") throw new Error("typeof text !== 'string'");
-    inputElement.value = text;
+    if (field !== "surface" && field !== "yomi") {
+      throw new Error("field must be 'surface' or 'yomi'");
+    }
+    inputText.value = text;
   };
 
-  const paste = async (options?: { text?: string }) => {
+  const handlePaste = async (options?: { text?: string }) => {
     if (!inputSelection) return;
 
     const text = options ? options.text : await navigator.clipboard.readText();
     if (text == undefined) return;
-    const beforeLength = inputElement.value.length;
+    const beforeLength = inputText.value.length;
     const end = inputSelection.selectionEnd ?? 0;
-    setSurfaceOrYomiText(inputSelection.getReplacedStringTo(text));
+    setSurfaceOrYomiText(
+      inputSelection.getReplacedStringTo(text),
+      inputField.value,
+    );
     await nextTick();
     inputSelection.setCursorPosition(
-      end + inputElement.value.length - beforeLength,
+      end + inputText.value.length - beforeLength,
     );
   };
 
-  const pasteOnDic = async (event: ClipboardEvent) => {
-    event.preventDefault();
-    paste({ text: event.clipboardData?.getData("text/plain") });
-  };
-
   return {
-    handleFocus,
     contextMenu,
     contextMenuHeader,
     contextMenudata,
-    setSurfaceOrYomiText,
-    pasteOnDic,
   };
 }

From 9bdb2e533cf80ab2a9dad7fa149163e33a331501 Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Fri, 2 Aug 2024 16:07:27 +0900
Subject: [PATCH 08/20] =?UTF-8?q?=E9=81=B8=E6=8A=9E=E3=81=97=E3=81=9Finput?=
 =?UTF-8?q?=E3=83=86=E3=82=AD=E3=82=B9=E3=83=88=E3=82=92=E3=82=B3=E3=83=B3?=
 =?UTF-8?q?=E3=83=86=E3=82=AD=E3=82=B9=E3=83=88=E3=83=A1=E3=83=8B=E3=83=A5?=
 =?UTF-8?q?=E3=83=BC=E3=83=98=E3=83=83=E3=83=80=E3=83=BC=E3=81=AB=E8=A1=A8?=
 =?UTF-8?q?=E7=A4=BA=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryManageDialog.vue         |  4 +++
 src/composables/useRightClickContextMenu.ts   | 36 +++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index ee13833a80..3775064df5 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -130,6 +130,7 @@
                   ref="surfaceContextMenu"
                   :header="surfaceContextMenuHeader"
                   :menudata="surfaceContextMenudata"
+                  @beforeShow="readyForSurfaceContextMenu"
                 />
               </QInput>
             </div>
@@ -152,6 +153,7 @@
                   ref="yomiContextMenu"
                   :header="yomiContextMenuHeader"
                   :menudata="yomiContextMenudata"
+                  @beforeShow="readyForYomiContextMenu"
                 />
               </QInput>
             </div>
@@ -684,12 +686,14 @@ const {
   contextMenu: surfaceContextMenu,
   contextMenuHeader: surfaceContextMenuHeader,
   contextMenudata: surfaceContextMenudata,
+  readyForContextMenu: readyForSurfaceContextMenu,
 } = useRightClickContextMenu(surfaceInput, surface, ref("surface"));
 
 const {
   contextMenu: yomiContextMenu,
   contextMenuHeader: yomiContextMenuHeader,
   contextMenudata: yomiContextMenudata,
+  readyForContextMenu: readyForYomiContextMenu,
 } = useRightClickContextMenu(yomiInput, yomi, ref("yomi"));
 </script>
 
diff --git a/src/composables/useRightClickContextMenu.ts b/src/composables/useRightClickContextMenu.ts
index 36e2bf05f7..ab24912136 100644
--- a/src/composables/useRightClickContextMenu.ts
+++ b/src/composables/useRightClickContextMenu.ts
@@ -20,7 +20,42 @@ export function useRightClickContextMenu(
   const inputSelection = new SelectionHelperForQInput(qInputRef);
 
   const contextMenu = ref<InstanceType<typeof ContextMenu>>();
+
   const contextMenuHeader = ref<string | undefined>("");
+  const readyForContextMenu = () => {
+    const MAX_HEADER_LENGTH = 15;
+    const SHORTED_HEADER_FRAGMENT_LENGTH = 5;
+
+    const getMenuItemButton = (label: string) => {
+      const item = contextMenudata.value.find((item) => item.label === label);
+      if (item?.type !== "button")
+        throw new Error("コンテキストメニューアイテムの取得に失敗しました。");
+      return item;
+    };
+
+    const text = inputSelection.getAsString();
+    if (text.length === 0) {
+      getMenuItemButton("切り取り").disabled = true;
+      getMenuItemButton("コピー").disabled = true;
+    } else {
+      getMenuItemButton("切り取り").disabled = false;
+      getMenuItemButton("コピー").disabled = false;
+      if (text.length > MAX_HEADER_LENGTH) {
+        contextMenuHeader.value =
+          text.length <= MAX_HEADER_LENGTH
+            ? text
+            : `${text.substring(
+                0,
+                SHORTED_HEADER_FRAGMENT_LENGTH,
+              )} ... ${text.substring(
+                text.length - SHORTED_HEADER_FRAGMENT_LENGTH,
+              )}`;
+      } else {
+        contextMenuHeader.value = text;
+      }
+    }
+  };
+
   const contextMenudata = ref<
     [
       MenuItemButton,
@@ -117,5 +152,6 @@ export function useRightClickContextMenu(
     contextMenu,
     contextMenuHeader,
     contextMenudata,
+    readyForContextMenu,
   };
 }

From 3ce1f1f242c32ab9e4eea4158a5eb5dc2e626344 Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Mon, 5 Aug 2024 23:49:06 +0900
Subject: [PATCH 09/20] =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=86=E3=82=AD?=
 =?UTF-8?q?=E3=82=B9=E3=83=88=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC=E3=81=AE?=
 =?UTF-8?q?=E9=96=8B=E9=96=89=E3=81=AB=E3=82=88=E3=82=8Bfocus=E3=82=84blur?=
 =?UTF-8?q?=E3=81=AB=E5=AF=BE=E3=81=99=E3=82=8B=E5=87=A6=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryManageDialog.vue         | 20 ++++++++++--
 src/composables/useRightClickContextMenu.ts   | 32 ++++++++++++++++---
 2 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index 3775064df5..40ec440c65 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -123,6 +123,7 @@
                 class="word-input"
                 dense
                 :disable="uiLocked"
+                @focus="clearSurfaceInputSelection()"
                 @blur="setSurface(surface)"
                 @keydown.enter="yomiFocus"
               >
@@ -130,7 +131,11 @@
                   ref="surfaceContextMenu"
                   :header="surfaceContextMenuHeader"
                   :menudata="surfaceContextMenudata"
-                  @beforeShow="readyForSurfaceContextMenu"
+                  @beforeShow="
+                    readyForSurfaceContextMenu();
+                    startSurfaceContextMenuOperation();
+                  "
+                  @beforeHide="endSurfaceContextMenuOperation()"
                 />
               </QInput>
             </div>
@@ -143,6 +148,7 @@
                 dense
                 :error="!isOnlyHiraOrKana"
                 :disable="uiLocked"
+                @focus="clearYomiInputSelection()"
                 @blur="setYomi(yomi)"
                 @keydown.enter="setYomiWhenEnter"
               >
@@ -153,7 +159,11 @@
                   ref="yomiContextMenu"
                   :header="yomiContextMenuHeader"
                   :menudata="yomiContextMenudata"
-                  @beforeShow="readyForYomiContextMenu"
+                  @beforeShow="
+                    readyForYomiContextMenu();
+                    startYomiContextMenuOperation();
+                  "
+                  @beforeHide="endYomiContextMenuOperation()"
                 />
               </QInput>
             </div>
@@ -687,6 +697,9 @@ const {
   contextMenuHeader: surfaceContextMenuHeader,
   contextMenudata: surfaceContextMenudata,
   readyForContextMenu: readyForSurfaceContextMenu,
+  clearInputSelection: clearSurfaceInputSelection,
+  startContextMenuOperation: startSurfaceContextMenuOperation,
+  endContextMenuOperation: endSurfaceContextMenuOperation,
 } = useRightClickContextMenu(surfaceInput, surface, ref("surface"));
 
 const {
@@ -694,6 +707,9 @@ const {
   contextMenuHeader: yomiContextMenuHeader,
   contextMenudata: yomiContextMenudata,
   readyForContextMenu: readyForYomiContextMenu,
+  clearInputSelection: clearYomiInputSelection,
+  startContextMenuOperation: startYomiContextMenuOperation,
+  endContextMenuOperation: endYomiContextMenuOperation,
 } = useRightClickContextMenu(yomiInput, yomi, ref("yomi"));
 </script>
 
diff --git a/src/composables/useRightClickContextMenu.ts b/src/composables/useRightClickContextMenu.ts
index ab24912136..71576bcc38 100644
--- a/src/composables/useRightClickContextMenu.ts
+++ b/src/composables/useRightClickContextMenu.ts
@@ -19,6 +19,12 @@ export function useRightClickContextMenu(
 ) {
   const inputSelection = new SelectionHelperForQInput(qInputRef);
 
+  /**
+   * コンテキストメニューの開閉によりFocusやBlurが発生する可能性のある間は`true`
+   * no-focusを付けた場合と付けてない場合でタイミングが異なるため、両方に対応
+   */
+  const willFocusOrBlur = ref(false);
+
   const contextMenu = ref<InstanceType<typeof ContextMenu>>();
 
   const contextMenuHeader = ref<string | undefined>("");
@@ -70,17 +76,17 @@ export function useRightClickContextMenu(
       label: "切り取り",
       onClick: async () => {
         contextMenu.value?.hide();
-        handleCut();
+        await handleCut();
       },
       disableWhenUiLocked: false,
     },
     {
       type: "button",
       label: "コピー",
-      onClick: () => {
+      onClick: async () => {
         contextMenu.value?.hide();
         if (inputSelection) {
-          navigator.clipboard.writeText(inputSelection.getAsString());
+          await navigator.clipboard.writeText(inputSelection.getAsString());
         }
       },
       disableWhenUiLocked: false,
@@ -116,7 +122,7 @@ export function useRightClickContextMenu(
       inputField.value,
     );
     await nextTick();
-    navigator.clipboard.writeText(text);
+    await navigator.clipboard.writeText(text);
     inputSelection.setCursorPosition(start);
   };
 
@@ -148,10 +154,28 @@ export function useRightClickContextMenu(
     );
   };
 
+  const clearInputSelection = () => {
+    if (!willFocusOrBlur.value) {
+      inputSelection.toEmpty();
+    }
+  };
+
+  const startContextMenuOperation = () => {
+    willFocusOrBlur.value = true;
+  };
+
+  const endContextMenuOperation = async () => {
+    await nextTick();
+    willFocusOrBlur.value = false;
+  };
+
   return {
     contextMenu,
     contextMenuHeader,
     contextMenudata,
     readyForContextMenu,
+    clearInputSelection,
+    startContextMenuOperation,
+    endContextMenuOperation,
   };
 }

From 36701c39a1261ffa03673bb28426e27d87df49b7 Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Fri, 9 Aug 2024 01:42:49 +0900
Subject: [PATCH 10/20] =?UTF-8?q?=E5=8F=B3=E5=81=B4=E3=81=AE=E3=83=91?=
 =?UTF-8?q?=E3=83=8D=E3=83=AB=E6=8F=8F=E7=94=BB=E3=82=92v-if=E3=81=8B?=
 =?UTF-8?q?=E3=82=89v-show=E3=81=AB=E3=82=88=E3=82=8B=E5=88=87=E3=82=8A?=
 =?UTF-8?q?=E6=9B=BF=E3=81=88=E3=81=AB=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dialog/DictionaryManageDialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index 5fe4ac608e..40136ce6f5 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -118,7 +118,7 @@
 
           <!-- 右側のpane -->
           <div
-            v-if="wordEditing"
+            v-show="wordEditing"
             class="col-8 no-wrap text-no-wrap word-editor"
           >
             <div class="row q-pl-md q-mt-md">

From c6c0a88dec75ea73590da17a339482b417759625 Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Wed, 14 Aug 2024 23:07:59 +0900
Subject: [PATCH 11/20] =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC?=
 =?UTF-8?q?=E3=82=B6=E3=83=96=E3=83=AB=E3=81=A7=E4=B8=8D=E8=A6=81=E3=81=AA?=
 =?UTF-8?q?inputField=E5=BC=95=E6=95=B0=E3=81=AE=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryManageDialog.vue         |  4 ++--
 src/composables/useRightClickContextMenu.ts   | 24 ++++---------------
 2 files changed, 7 insertions(+), 21 deletions(-)

diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index 40136ce6f5..fadc5775ed 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -706,7 +706,7 @@ const {
   clearInputSelection: clearSurfaceInputSelection,
   startContextMenuOperation: startSurfaceContextMenuOperation,
   endContextMenuOperation: endSurfaceContextMenuOperation,
-} = useRightClickContextMenu(surfaceInput, surface, ref("surface"));
+} = useRightClickContextMenu(surfaceInput, surface);
 
 const {
   contextMenu: yomiContextMenu,
@@ -716,7 +716,7 @@ const {
   clearInputSelection: clearYomiInputSelection,
   startContextMenuOperation: startYomiContextMenuOperation,
   endContextMenuOperation: endYomiContextMenuOperation,
-} = useRightClickContextMenu(yomiInput, yomi, ref("yomi"));
+} = useRightClickContextMenu(yomiInput, yomi);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/composables/useRightClickContextMenu.ts b/src/composables/useRightClickContextMenu.ts
index 71576bcc38..3dda51c89f 100644
--- a/src/composables/useRightClickContextMenu.ts
+++ b/src/composables/useRightClickContextMenu.ts
@@ -8,14 +8,12 @@ import { SelectionHelperForQInput } from "@/helpers/SelectionHelperForQInput";
 // 参考実装: https://github.com/VOICEVOX/voicevox/pull/1374/files#diff-444f263f72d4db11fe82c672d5c232eb4c29d29dbc1ffd20e279d586b1b2c180R371-R379
 
 /**
- * surface と yomi のどちらを選択しているかを取得する。
- * 単語か読み、どちらの <QInput> であるかを区別し、
- * それに対する切り取りやコピー、貼り付けの処理を行う
+ * コンポーネントの中で呼ばれた <QInput> に対して
+ * 切り取りやコピー、貼り付けの処理を行う
  */
 export function useRightClickContextMenu(
   qInputRef: Ref<QInput | undefined>,
   inputText: Ref<string>,
-  inputField: Ref<string>,
 ) {
   const inputSelection = new SelectionHelperForQInput(qInputRef);
 
@@ -117,23 +115,14 @@ export function useRightClickContextMenu(
 
     const text = inputSelection.getAsString();
     const start = inputSelection.selectionStart;
-    setSurfaceOrYomiText(
-      inputSelection.getReplacedStringTo(""),
-      inputField.value,
-    );
+    setSurfaceOrYomiText(inputSelection.getReplacedStringTo(""));
     await nextTick();
     await navigator.clipboard.writeText(text);
     inputSelection.setCursorPosition(start);
   };
 
-  const setSurfaceOrYomiText = (
-    text: string | number | null,
-    field: string,
-  ) => {
+  const setSurfaceOrYomiText = (text: string | number | null) => {
     if (typeof text !== "string") throw new Error("typeof text !== 'string'");
-    if (field !== "surface" && field !== "yomi") {
-      throw new Error("field must be 'surface' or 'yomi'");
-    }
     inputText.value = text;
   };
 
@@ -144,10 +133,7 @@ export function useRightClickContextMenu(
     if (text == undefined) return;
     const beforeLength = inputText.value.length;
     const end = inputSelection.selectionEnd ?? 0;
-    setSurfaceOrYomiText(
-      inputSelection.getReplacedStringTo(text),
-      inputField.value,
-    );
+    setSurfaceOrYomiText(inputSelection.getReplacedStringTo(text));
     await nextTick();
     inputSelection.setCursorPosition(
       end + inputText.value.length - beforeLength,

From 7f653589d79b433d2b8d2d0e3aa0d4d3721bbb27 Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Thu, 15 Aug 2024 02:59:17 +0900
Subject: [PATCH 12/20] =?UTF-8?q?=E3=83=86=E3=82=AD=E3=82=B9=E3=83=88?=
 =?UTF-8?q?=E6=9C=AA=E9=81=B8=E6=8A=9E=E6=99=82=E3=81=AE=E3=82=B3=E3=83=B3?=
 =?UTF-8?q?=E3=83=86=E3=82=AD=E3=82=B9=E3=83=88=E3=83=A1=E3=83=8B=E3=83=A5?=
 =?UTF-8?q?=E3=83=BC=E3=83=98=E3=83=83=E3=83=80=E3=83=BC=E3=81=AB=E3=83=86?=
 =?UTF-8?q?=E3=82=AD=E3=82=B9=E3=83=88=E3=82=92=E8=A1=A8=E7=A4=BA=E3=81=95?=
 =?UTF-8?q?=E3=81=9B=E3=81=AA=E3=81=8F=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composables/useRightClickContextMenu.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/composables/useRightClickContextMenu.ts b/src/composables/useRightClickContextMenu.ts
index 3dda51c89f..32a41df20e 100644
--- a/src/composables/useRightClickContextMenu.ts
+++ b/src/composables/useRightClickContextMenu.ts
@@ -41,6 +41,7 @@ export function useRightClickContextMenu(
     if (text.length === 0) {
       getMenuItemButton("切り取り").disabled = true;
       getMenuItemButton("コピー").disabled = true;
+      contextMenuHeader.value = "";
     } else {
       getMenuItemButton("切り取り").disabled = false;
       getMenuItemButton("コピー").disabled = false;

From 97bd8ebe90be02ea4b78cc5428caccb9014d4e53 Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Thu, 15 Aug 2024 03:03:13 +0900
Subject: [PATCH 13/20] =?UTF-8?q?eslint=E3=81=AE=E3=82=A8=E3=83=A9?=
 =?UTF-8?q?=E3=83=BC=E3=82=92=E5=9B=9E=E9=81=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composables/useRightClickContextMenu.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/composables/useRightClickContextMenu.ts b/src/composables/useRightClickContextMenu.ts
index 32a41df20e..cec5a5390c 100644
--- a/src/composables/useRightClickContextMenu.ts
+++ b/src/composables/useRightClickContextMenu.ts
@@ -74,6 +74,7 @@ export function useRightClickContextMenu(
       type: "button",
       label: "切り取り",
       onClick: async () => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
         contextMenu.value?.hide();
         await handleCut();
       },
@@ -83,6 +84,7 @@ export function useRightClickContextMenu(
       type: "button",
       label: "コピー",
       onClick: async () => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
         contextMenu.value?.hide();
         if (inputSelection) {
           await navigator.clipboard.writeText(inputSelection.getAsString());
@@ -94,6 +96,7 @@ export function useRightClickContextMenu(
       type: "button",
       label: "貼り付け",
       onClick: async () => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
         contextMenu.value?.hide();
         await handlePaste();
       },
@@ -104,6 +107,7 @@ export function useRightClickContextMenu(
       type: "button",
       label: "全選択",
       onClick: async () => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
         contextMenu.value?.hide();
         qInputRef.value?.select();
       },

From 068059574f9c0c90e8e374b4d28817caffdda6ac Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Sat, 17 Aug 2024 01:11:06 +0900
Subject: [PATCH 14/20] =?UTF-8?q?=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=81=AE=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composables/useRightClickContextMenu.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/composables/useRightClickContextMenu.ts b/src/composables/useRightClickContextMenu.ts
index cec5a5390c..e4e76ce31a 100644
--- a/src/composables/useRightClickContextMenu.ts
+++ b/src/composables/useRightClickContextMenu.ts
@@ -1,12 +1,14 @@
+/**
+ * テキスト編集エリアの右クリック
+ * 参考実装: https://github.com/VOICEVOX/voicevox/pull/1374/files#diff-444f263f72d4db11fe82c672d5c232eb4c29d29dbc1ffd20e279d586b1b2c180
+ */
+
 import { QInput } from "quasar";
 import { ref, Ref, nextTick } from "vue";
 import { MenuItemButton, MenuItemSeparator } from "@/components/Menu/type";
 import ContextMenu from "@/components/Menu/ContextMenu.vue";
 import { SelectionHelperForQInput } from "@/helpers/SelectionHelperForQInput";
 
-// テキスト編集エリアの右クリック
-// 参考実装: https://github.com/VOICEVOX/voicevox/pull/1374/files#diff-444f263f72d4db11fe82c672d5c232eb4c29d29dbc1ffd20e279d586b1b2c180R371-R379
-
 /**
  * コンポーネントの中で呼ばれた <QInput> に対して
  * 切り取りやコピー、貼り付けの処理を行う

From e483d4a7bfafa6aba0cc02dcdbe826a8b792d4c6 Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Sat, 17 Aug 2024 01:23:02 +0900
Subject: [PATCH 15/20] =?UTF-8?q?=E9=96=A2=E6=95=B0=E3=81=AE=E7=B5=B1?=
 =?UTF-8?q?=E5=90=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dialog/DictionaryManageDialog.vue | 12 ++----------
 src/composables/useRightClickContextMenu.ts      | 11 ++++++-----
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index a2e1d158a3..fac8a81b7a 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -137,10 +137,7 @@
                   ref="surfaceContextMenu"
                   :header="surfaceContextMenuHeader"
                   :menudata="surfaceContextMenudata"
-                  @beforeShow="
-                    readyForSurfaceContextMenu();
-                    startSurfaceContextMenuOperation();
-                  "
+                  @beforeShow="readyForSurfaceContextMenu()"
                   @beforeHide="endSurfaceContextMenuOperation()"
                 />
               </QInput>
@@ -165,10 +162,7 @@
                   ref="yomiContextMenu"
                   :header="yomiContextMenuHeader"
                   :menudata="yomiContextMenudata"
-                  @beforeShow="
-                    readyForYomiContextMenu();
-                    startYomiContextMenuOperation();
-                  "
+                  @beforeShow="readyForYomiContextMenu()"
                   @beforeHide="endYomiContextMenuOperation()"
                 />
               </QInput>
@@ -704,7 +698,6 @@ const {
   contextMenudata: surfaceContextMenudata,
   readyForContextMenu: readyForSurfaceContextMenu,
   clearInputSelection: clearSurfaceInputSelection,
-  startContextMenuOperation: startSurfaceContextMenuOperation,
   endContextMenuOperation: endSurfaceContextMenuOperation,
 } = useRightClickContextMenu(surfaceInput, surface);
 
@@ -714,7 +707,6 @@ const {
   contextMenudata: yomiContextMenudata,
   readyForContextMenu: readyForYomiContextMenu,
   clearInputSelection: clearYomiInputSelection,
-  startContextMenuOperation: startYomiContextMenuOperation,
   endContextMenuOperation: endYomiContextMenuOperation,
 } = useRightClickContextMenu(yomiInput, yomi);
 </script>
diff --git a/src/composables/useRightClickContextMenu.ts b/src/composables/useRightClickContextMenu.ts
index e4e76ce31a..07fa3ab76d 100644
--- a/src/composables/useRightClickContextMenu.ts
+++ b/src/composables/useRightClickContextMenu.ts
@@ -32,6 +32,8 @@ export function useRightClickContextMenu(
     const MAX_HEADER_LENGTH = 15;
     const SHORTED_HEADER_FRAGMENT_LENGTH = 5;
 
+    willFocusOrBlur.value = true;
+
     const getMenuItemButton = (label: string) => {
       const item = contextMenudata.value.find((item) => item.label === label);
       if (item?.type !== "button")
@@ -147,16 +149,16 @@ export function useRightClickContextMenu(
     );
   };
 
+  /**
+   * バグ修正用
+   * 参考: https://github.com/VOICEVOX/voicevox/pull/1364#issuecomment-1620594931
+   */
   const clearInputSelection = () => {
     if (!willFocusOrBlur.value) {
       inputSelection.toEmpty();
     }
   };
 
-  const startContextMenuOperation = () => {
-    willFocusOrBlur.value = true;
-  };
-
   const endContextMenuOperation = async () => {
     await nextTick();
     willFocusOrBlur.value = false;
@@ -168,7 +170,6 @@ export function useRightClickContextMenu(
     contextMenudata,
     readyForContextMenu,
     clearInputSelection,
-    startContextMenuOperation,
     endContextMenuOperation,
   };
 }

From 6ea3e37a40dbccb121514ee2a06b1b0a5d43afe2 Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Sat, 17 Aug 2024 01:41:15 +0900
Subject: [PATCH 16/20] =?UTF-8?q?=E9=81=B8=E6=8A=9E=E3=81=97=E3=81=9F?=
 =?UTF-8?q?=E3=83=86=E3=82=AD=E3=82=B9=E3=83=88=E3=81=AE=E8=A1=A8=E7=A4=BA?=
 =?UTF-8?q?=E3=83=BB=E9=9D=9E=E8=A1=A8=E7=A4=BA=E5=87=A6=E7=90=86=E3=82=92?=
 =?UTF-8?q?=E3=83=AA=E3=83=95=E3=82=A1=E3=82=AF=E3=82=BF=E3=83=AA=E3=83=B3?=
 =?UTF-8?q?=E3=82=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composables/useRightClickContextMenu.ts | 31 +++++++++++----------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/composables/useRightClickContextMenu.ts b/src/composables/useRightClickContextMenu.ts
index 07fa3ab76d..770119259e 100644
--- a/src/composables/useRightClickContextMenu.ts
+++ b/src/composables/useRightClickContextMenu.ts
@@ -42,26 +42,27 @@ export function useRightClickContextMenu(
     };
 
     const text = inputSelection.getAsString();
-    if (text.length === 0) {
+
+    if (text.length > MAX_HEADER_LENGTH) {
+      contextMenuHeader.value =
+        text.length <= MAX_HEADER_LENGTH
+          ? text
+          : `${text.substring(
+              0,
+              SHORTED_HEADER_FRAGMENT_LENGTH,
+            )} ... ${text.substring(
+              text.length - SHORTED_HEADER_FRAGMENT_LENGTH,
+            )}`;
+    } else {
+      contextMenuHeader.value = text;
+    }
+
+    if (inputSelection.isEmpty) {
       getMenuItemButton("切り取り").disabled = true;
       getMenuItemButton("コピー").disabled = true;
-      contextMenuHeader.value = "";
     } else {
       getMenuItemButton("切り取り").disabled = false;
       getMenuItemButton("コピー").disabled = false;
-      if (text.length > MAX_HEADER_LENGTH) {
-        contextMenuHeader.value =
-          text.length <= MAX_HEADER_LENGTH
-            ? text
-            : `${text.substring(
-                0,
-                SHORTED_HEADER_FRAGMENT_LENGTH,
-              )} ... ${text.substring(
-                text.length - SHORTED_HEADER_FRAGMENT_LENGTH,
-              )}`;
-      } else {
-        contextMenuHeader.value = text;
-      }
     }
   };
 

From 58b04317e90be649e79a6db3dcb21205ff8a55b3 Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Sat, 17 Aug 2024 18:37:16 +0900
Subject: [PATCH 17/20] =?UTF-8?q?nativeEl=E3=82=92=E3=82=AD=E3=83=A3?=
 =?UTF-8?q?=E3=83=83=E3=82=B7=E3=83=A5=E3=81=9B=E3=81=9A=E3=80=81=E5=B8=B8?=
 =?UTF-8?q?=E3=81=AB=E6=96=B0=E3=81=97=E3=81=8F=E5=8F=96=E5=BE=97=E3=81=97?=
 =?UTF-8?q?=E7=9B=B4=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/helpers/SelectionHelperForQInput.ts | 41 ++++++++++++++-----------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/helpers/SelectionHelperForQInput.ts b/src/helpers/SelectionHelperForQInput.ts
index b49a26ba6b..d66078f1c2 100644
--- a/src/helpers/SelectionHelperForQInput.ts
+++ b/src/helpers/SelectionHelperForQInput.ts
@@ -5,15 +5,14 @@ import { Ref } from "vue";
  * QInput の選択範囲への操作を簡単にできるようにするクラス
  */
 export class SelectionHelperForQInput {
-  private _nativeEl: HTMLInputElement | undefined = undefined;
-
   constructor(private textfield: Ref<QInput | undefined>) {}
 
   // this.start が number | null なので null も受け付ける
   setCursorPosition(index: number | null) {
     if (index == undefined) return;
 
-    this.nativeEl.selectionStart = this.nativeEl.selectionEnd = index;
+    const nativeEl = this.getNativeEl();
+    nativeEl.selectionStart = nativeEl.selectionEnd = index;
   }
 
   getReplacedStringTo(str: string) {
@@ -21,48 +20,54 @@ export class SelectionHelperForQInput {
   }
 
   getAsString() {
-    return this.nativeEl.value.substring(
-      this.nativeEl.selectionStart ?? 0,
-      this.nativeEl.selectionEnd ?? 0,
+    const nativeEl = this.getNativeEl();
+    return nativeEl.value.substring(
+      nativeEl.selectionStart ?? 0,
+      nativeEl.selectionEnd ?? 0,
     );
   }
 
   toEmpty() {
-    this.nativeEl.selectionEnd = this.nativeEl.selectionStart;
+    const nativeEl = this.getNativeEl();
+    nativeEl.selectionEnd = nativeEl.selectionStart;
   }
 
   get selectionStart() {
-    return this.nativeEl.selectionStart;
+    const nativeEl = this.getNativeEl();
+    return nativeEl.selectionStart;
   }
 
   get selectionEnd() {
-    return this.nativeEl.selectionEnd;
+    const nativeEl = this.getNativeEl();
+    return nativeEl.selectionEnd;
   }
 
   get substringBefore() {
-    return this.nativeEl.value.substring(0, this.nativeEl.selectionStart ?? 0);
+    const nativeEl = this.getNativeEl();
+    return nativeEl.value.substring(0, nativeEl.selectionStart ?? 0);
   }
 
   get substringAfter() {
-    return this.nativeEl.value.substring(this.nativeEl.selectionEnd ?? 0);
+    const nativeEl = this.getNativeEl();
+    return nativeEl.value.substring(nativeEl.selectionEnd ?? 0);
   }
 
   get isEmpty() {
-    const start = this.nativeEl.selectionStart;
-    const end = this.nativeEl.selectionEnd;
+    const nativeEl = this.getNativeEl();
+    const start = nativeEl.selectionStart;
+    const end = nativeEl.selectionEnd;
     return start == undefined || end == undefined || start === end;
   }
 
-  private get nativeEl() {
-    return this._nativeEl ?? this.getNativeEl();
-  }
-
+  /**
+   * 不具合修正のため、nativeElはキャッシュせず、常に新しく取得し直す
+   * 参照: https://github.com/VOICEVOX/voicevox/pull/2156#discussion_r1718659808
+   */
   private getNativeEl() {
     const nativeEl = this.textfield.value?.nativeEl;
     if (!(nativeEl instanceof HTMLInputElement)) {
       throw new Error("nativeElの取得に失敗しました。");
     }
-    this._nativeEl = nativeEl;
     return nativeEl;
   }
 }

From beb591e1a6af0ca50251f7a1d43b4dd7e71b091a Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Mon, 19 Aug 2024 00:54:45 +0900
Subject: [PATCH 18/20] =?UTF-8?q?=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0=E3=82=84=E9=96=A2=E6=95=B0=E5=90=8D=E3=81=AE?=
 =?UTF-8?q?=E5=A4=89=E6=9B=B4=E3=81=AA=E3=81=A9=E3=80=81=E7=B4=B0=E3=81=8B?=
 =?UTF-8?q?=E3=81=84=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryManageDialog.vue         | 17 +++++-----
 src/composables/useRightClickContextMenu.ts   | 31 +++++++++----------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index fac8a81b7a..56dc6cde38 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -137,7 +137,7 @@
                   ref="surfaceContextMenu"
                   :header="surfaceContextMenuHeader"
                   :menudata="surfaceContextMenudata"
-                  @beforeShow="readyForSurfaceContextMenu()"
+                  @beforeShow="startSurfaceContextMenuOperation()"
                   @beforeHide="endSurfaceContextMenuOperation()"
                 />
               </QInput>
@@ -162,7 +162,7 @@
                   ref="yomiContextMenu"
                   :header="yomiContextMenuHeader"
                   :menudata="yomiContextMenudata"
-                  @beforeShow="readyForYomiContextMenu()"
+                  @beforeShow="startYomiContextMenuOperation()"
                   @beforeHide="endYomiContextMenuOperation()"
                 />
               </QInput>
@@ -692,23 +692,24 @@ const toDialogClosedState = () => {
   dictionaryManageDialogOpenedComputed.value = false;
 };
 
+const surfaceContextMenu = ref<InstanceType<typeof ContextMenu>>();
+const yomiContextMenu = ref<InstanceType<typeof ContextMenu>>();
+
 const {
-  contextMenu: surfaceContextMenu,
   contextMenuHeader: surfaceContextMenuHeader,
   contextMenudata: surfaceContextMenudata,
-  readyForContextMenu: readyForSurfaceContextMenu,
+  startContextMenuOperation: startSurfaceContextMenuOperation,
   clearInputSelection: clearSurfaceInputSelection,
   endContextMenuOperation: endSurfaceContextMenuOperation,
-} = useRightClickContextMenu(surfaceInput, surface);
+} = useRightClickContextMenu(surfaceContextMenu, surfaceInput, surface);
 
 const {
-  contextMenu: yomiContextMenu,
   contextMenuHeader: yomiContextMenuHeader,
   contextMenudata: yomiContextMenudata,
-  readyForContextMenu: readyForYomiContextMenu,
+  startContextMenuOperation: startYomiContextMenuOperation,
   clearInputSelection: clearYomiInputSelection,
   endContextMenuOperation: endYomiContextMenuOperation,
-} = useRightClickContextMenu(yomiInput, yomi);
+} = useRightClickContextMenu(yomiContextMenu, yomiInput, yomi);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/composables/useRightClickContextMenu.ts b/src/composables/useRightClickContextMenu.ts
index 770119259e..92a209a63b 100644
--- a/src/composables/useRightClickContextMenu.ts
+++ b/src/composables/useRightClickContextMenu.ts
@@ -14,6 +14,8 @@ import { SelectionHelperForQInput } from "@/helpers/SelectionHelperForQInput";
  * 切り取りやコピー、貼り付けの処理を行う
  */
 export function useRightClickContextMenu(
+  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+  contextMenuRef: Ref<InstanceType<typeof ContextMenu> | undefined>,
   qInputRef: Ref<QInput | undefined>,
   inputText: Ref<string>,
 ) {
@@ -25,10 +27,8 @@ export function useRightClickContextMenu(
    */
   const willFocusOrBlur = ref(false);
 
-  const contextMenu = ref<InstanceType<typeof ContextMenu>>();
-
   const contextMenuHeader = ref<string | undefined>("");
-  const readyForContextMenu = () => {
+  const startContextMenuOperation = () => {
     const MAX_HEADER_LENGTH = 15;
     const SHORTED_HEADER_FRAGMENT_LENGTH = 5;
 
@@ -80,7 +80,7 @@ export function useRightClickContextMenu(
       label: "切り取り",
       onClick: async () => {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-        contextMenu.value?.hide();
+        contextMenuRef.value?.hide();
         await handleCut();
       },
       disableWhenUiLocked: false,
@@ -90,10 +90,8 @@ export function useRightClickContextMenu(
       label: "コピー",
       onClick: async () => {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-        contextMenu.value?.hide();
-        if (inputSelection) {
-          await navigator.clipboard.writeText(inputSelection.getAsString());
-        }
+        contextMenuRef.value?.hide();
+        await navigator.clipboard.writeText(inputSelection.getAsString());
       },
       disableWhenUiLocked: false,
     },
@@ -102,7 +100,7 @@ export function useRightClickContextMenu(
       label: "貼り付け",
       onClick: async () => {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-        contextMenu.value?.hide();
+        contextMenuRef.value?.hide();
         await handlePaste();
       },
       disableWhenUiLocked: false,
@@ -113,7 +111,7 @@ export function useRightClickContextMenu(
       label: "全選択",
       onClick: async () => {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-        contextMenu.value?.hide();
+        contextMenuRef.value?.hide();
         qInputRef.value?.select();
       },
       disableWhenUiLocked: false,
@@ -125,13 +123,13 @@ export function useRightClickContextMenu(
 
     const text = inputSelection.getAsString();
     const start = inputSelection.selectionStart;
-    setSurfaceOrYomiText(inputSelection.getReplacedStringTo(""));
+    setText(inputSelection.getReplacedStringTo(""));
     await nextTick();
-    await navigator.clipboard.writeText(text);
+    void navigator.clipboard.writeText(text);
     inputSelection.setCursorPosition(start);
   };
 
-  const setSurfaceOrYomiText = (text: string | number | null) => {
+  const setText = (text: string | number | null) => {
     if (typeof text !== "string") throw new Error("typeof text !== 'string'");
     inputText.value = text;
   };
@@ -139,11 +137,13 @@ export function useRightClickContextMenu(
   const handlePaste = async (options?: { text?: string }) => {
     if (!inputSelection) return;
 
+    // NOTE: 自動的に削除される文字があることを念の為考慮している
+    // FIXME: 考慮は要らないかも
     const text = options ? options.text : await navigator.clipboard.readText();
     if (text == undefined) return;
     const beforeLength = inputText.value.length;
     const end = inputSelection.selectionEnd ?? 0;
-    setSurfaceOrYomiText(inputSelection.getReplacedStringTo(text));
+    setText(inputSelection.getReplacedStringTo(text));
     await nextTick();
     inputSelection.setCursorPosition(
       end + inputText.value.length - beforeLength,
@@ -166,10 +166,9 @@ export function useRightClickContextMenu(
   };
 
   return {
-    contextMenu,
     contextMenuHeader,
     contextMenudata,
-    readyForContextMenu,
+    startContextMenuOperation,
     clearInputSelection,
     endContextMenuOperation,
   };

From d4b518d7deeb01e65c40131824ce2f8bdd8d3935 Mon Sep 17 00:00:00 2001
From: Hiroshiba <hihokaruta@gmail.com>
Date: Tue, 20 Aug 2024 02:25:07 +0900
Subject: [PATCH 19/20] Apply suggestions from code review

---
 src/composables/useRightClickContextMenu.ts | 7 ++-----
 src/helpers/SelectionHelperForQInput.ts     | 3 +--
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/composables/useRightClickContextMenu.ts b/src/composables/useRightClickContextMenu.ts
index 92a209a63b..6e63bc7a7f 100644
--- a/src/composables/useRightClickContextMenu.ts
+++ b/src/composables/useRightClickContextMenu.ts
@@ -1,5 +1,5 @@
 /**
- * テキスト編集エリアの右クリック
+ * テキスト編集エリアの右クリックメニュー用の処理
  * 参考実装: https://github.com/VOICEVOX/voicevox/pull/1374/files#diff-444f263f72d4db11fe82c672d5c232eb4c29d29dbc1ffd20e279d586b1b2c180
  */
 
@@ -10,8 +10,7 @@ import ContextMenu from "@/components/Menu/ContextMenu.vue";
 import { SelectionHelperForQInput } from "@/helpers/SelectionHelperForQInput";
 
 /**
- * コンポーネントの中で呼ばれた <QInput> に対して
- * 切り取りやコピー、貼り付けの処理を行う
+ * <QInput> に対して切り取りやコピー、貼り付けの処理を行う
  */
 export function useRightClickContextMenu(
   // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
@@ -135,8 +134,6 @@ export function useRightClickContextMenu(
   };
 
   const handlePaste = async (options?: { text?: string }) => {
-    if (!inputSelection) return;
-
     // NOTE: 自動的に削除される文字があることを念の為考慮している
     // FIXME: 考慮は要らないかも
     const text = options ? options.text : await navigator.clipboard.readText();
diff --git a/src/helpers/SelectionHelperForQInput.ts b/src/helpers/SelectionHelperForQInput.ts
index d66078f1c2..fd742b7c23 100644
--- a/src/helpers/SelectionHelperForQInput.ts
+++ b/src/helpers/SelectionHelperForQInput.ts
@@ -60,8 +60,7 @@ export class SelectionHelperForQInput {
   }
 
   /**
-   * 不具合修正のため、nativeElはキャッシュせず、常に新しく取得し直す
-   * 参照: https://github.com/VOICEVOX/voicevox/pull/2156#discussion_r1718659808
+   * NOTE: 最新のtextfieldを反映すべきなのでnativeElはキャッシュしない
    */
   private getNativeEl() {
     const nativeEl = this.textfield.value?.nativeEl;

From f9c6f20b6cd3f7b2149d4a3e4e8c1f1be341aefd Mon Sep 17 00:00:00 2001
From: Hiroshiba <hihokaruta@gmail.com>
Date: Tue, 20 Aug 2024 02:26:10 +0900
Subject: [PATCH 20/20] Apply suggestions from code review

---
 src/helpers/SelectionHelperForQInput.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/helpers/SelectionHelperForQInput.ts b/src/helpers/SelectionHelperForQInput.ts
index fd742b7c23..b07aa83696 100644
--- a/src/helpers/SelectionHelperForQInput.ts
+++ b/src/helpers/SelectionHelperForQInput.ts
@@ -60,7 +60,7 @@ export class SelectionHelperForQInput {
   }
 
   /**
-   * NOTE: 最新のtextfieldを反映すべきなのでnativeElはキャッシュしない
+   * NOTE: 最新の textfield を反映すべきなので nativeEl はキャッシュしない
    */
   private getNativeEl() {
     const nativeEl = this.textfield.value?.nativeEl;