辞書の単語・読み入力欄で右クリックメニューを使えるようにする

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">
@@ -129,9 +129,21 @@
                 class="word-input"
                 dense
                 :disable="uiLocked"
+                @focus="clearSurfaceInputSelection()"
                 @blur="setSurface(surface)"
                 @keydown.enter="yomiFocus"
-              />
+              >
+                <ContextMenu
+                  ref="surfaceContextMenu"
+                  :header="surfaceContextMenuHeader"
+                  :menudata="surfaceContextMenudata"
+                  @beforeShow="
+                    readyForSurfaceContextMenu();
+                    startSurfaceContextMenuOperation();
+                  "
+                  @beforeHide="endSurfaceContextMenuOperation()"
+                />
+              </QInput>
             </div>
             <div class="row q-pl-md q-pt-sm">
               <div class="text-h6">読み</div>
@@ -142,12 +154,23 @@
                 dense
                 :error="!isOnlyHiraOrKana"
                 :disable="uiLocked"
+                @focus="clearYomiInputSelection()"
                 @blur="setYomi(yomi)"
                 @keydown.enter="setYomiWhenEnter"
               >
                 <template #error>
                   読みに使える文字はひらがなとカタカナのみです。
                 </template>
+                <ContextMenu
+                  ref="yomiContextMenu"
+                  :header="yomiContextMenuHeader"
+                  :menudata="yomiContextMenudata"
+                  @beforeShow="
+                    readyForYomiContextMenu();
+                    startYomiContextMenuOperation();
+                  "
+                  @beforeHide="endYomiContextMenuOperation()"
+                />
               </QInput>
             </div>
             <div class="row q-pl-md q-mt-lg text-h6">アクセント調整</div>
@@ -272,6 +295,8 @@
 import { computed, ref, watch } from "vue";
 import { QInput } from "quasar";
 import AudioAccent from "@/components/Talk/AudioAccent.vue";
+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";
@@ -672,6 +697,26 @@ const toWordEditingState = () => {
 const toDialogClosedState = () => {
   dictionaryManageDialogOpenedComputed.value = false;
 };
+
+const {
+  contextMenu: surfaceContextMenu,
+  contextMenuHeader: surfaceContextMenuHeader,
+  contextMenudata: surfaceContextMenudata,
+  readyForContextMenu: readyForSurfaceContextMenu,
+  clearInputSelection: clearSurfaceInputSelection,
+  startContextMenuOperation: startSurfaceContextMenuOperation,
+  endContextMenuOperation: endSurfaceContextMenuOperation,
+} = useRightClickContextMenu(surfaceInput, surface);
+
+const {
+  contextMenu: yomiContextMenu,
+  contextMenuHeader: yomiContextMenuHeader,
+  contextMenudata: yomiContextMenudata,
+  readyForContextMenu: readyForYomiContextMenu,
+  clearInputSelection: clearYomiInputSelection,
+  startContextMenuOperation: startYomiContextMenuOperation,
+  endContextMenuOperation: endYomiContextMenuOperation,
+} = useRightClickContextMenu(yomiInput, yomi);
 </script>
 
 <style lang="scss" scoped>

src/composables/useRightClickContextMenu.ts

@@ -0,0 +1,167 @@
+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> に対して
+ * 切り取りやコピー、貼り付けの処理を行う
+ */
+export function useRightClickContextMenu(
+  qInputRef: Ref<QInput | undefined>,
+  inputText: Ref<string>,
+) {
+  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>("");
+  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,
+      MenuItemButton,
+      MenuItemButton,
+      MenuItemSeparator,
+      MenuItemButton,
+    ]
+  >([
+    {
+      type: "button",
+      label: "切り取り",
+      onClick: async () => {
+        contextMenu.value?.hide();
+        await handleCut();
+      },
+      disableWhenUiLocked: false,
+    },
+    {
+      type: "button",
+      label: "コピー",
+      onClick: async () => {
+        contextMenu.value?.hide();
+        if (inputSelection) {
+          await navigator.clipboard.writeText(inputSelection.getAsString());
+        }
+      },
+      disableWhenUiLocked: false,
+    },
+    {
+      type: "button",
+      label: "貼り付け",
+      onClick: async () => {
+        contextMenu.value?.hide();
+        await handlePaste();
+      },
+      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();
+    await navigator.clipboard.writeText(text);
+    inputSelection.setCursorPosition(start);
+  };
+
+  const setSurfaceOrYomiText = (text: string | number | null) => {
+    if (typeof text !== "string") throw new Error("typeof text !== 'string'");
+    inputText.value = text;
+  };
+
+  const handlePaste = async (options?: { text?: string }) => {
+    if (!inputSelection) return;
+
+    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));
+    await nextTick();
+    inputSelection.setCursorPosition(
+      end + inputText.value.length - beforeLength,
+    );
+  };
+
+  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,
+  };
+}