From e640cd26e89f3deb6d48cdb55ae51f326fdc7bad Mon Sep 17 00:00:00 2001
From: Haruki Tazoe <40142697+jdkfx@users.noreply.github.com>
Date: Tue, 20 Aug 2024 02:52:26 +0900
Subject: [PATCH] =?UTF-8?q?=E8=BE=9E=E6=9B=B8=E3=81=AE=E5=8D=98=E8=AA=9E?=
 =?UTF-8?q?=E3=83=BB=E8=AA=AD=E3=81=BF=E5=85=A5=E5=8A=9B=E6=AC=84=E3=81=A7?=
 =?UTF-8?q?=E5=8F=B3=E3=82=AF=E3=83=AA=E3=83=83=E3=82=AF=E3=83=A1=E3=83=8B?=
 =?UTF-8?q?=E3=83=A5=E3=83=BC=E3=82=92=E4=BD=BF=E3=81=88=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB=E3=81=99=E3=82=8B=20(#2156)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 右クリックによるコンテキストメニュー表示

* 辞書の単語と読みに全選択操作を追加

* 辞書の単語と読みにコピー操作を追加

* 辞書の単語と読みに切り取り操作を追加

* 辞書の単語と読みに貼り付け操作を追加

* 右クリックメニューに関するコンポーザブルを追加し、処理をそちらに委譲

* コンポーザブルを修正し、切り取りやコピーペーストができるようにする

* 選択したinputテキストをコンテキストメニューヘッダーに表示する

* コンテキストメニューの開閉によるfocusやblurに対する処理

* 右側のパネル描画をv-ifからv-showによる切り替えに修正

* コンポーザブルで不要なinputField引数の削除

* テキスト未選択時のコンテキストメニューヘッダーにテキストを表示させなくする

* eslintのエラーを回避

* コメントの追加

* 関数の統合

* 選択したテキストの表示・非表示処理をリファクタリング

* nativeElをキャッシュせず、常に新しく取得し直す

* コメント追加や関数名の変更など、細かい修正

* Apply suggestions from code review

* Apply suggestions from code review

---------

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>
---
 .../Dialog/DictionaryManageDialog.vue         |  42 ++++-
 src/composables/useRightClickContextMenu.ts   | 172 ++++++++++++++++++
 src/helpers/SelectionHelperForQInput.ts       |  40 ++--
 3 files changed, 234 insertions(+), 20 deletions(-)
 create mode 100644 src/composables/useRightClickContextMenu.ts

diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index fb2c1828fd..2d4c1dcfb0 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">
@@ -129,9 +129,18 @@
                 class="word-input"
                 dense
                 :disable="uiLocked"
+                @focus="clearSurfaceInputSelection()"
                 @blur="setSurface(surface)"
                 @keydown.enter="yomiFocus"
-              />
+              >
+                <ContextMenu
+                  ref="surfaceContextMenu"
+                  :header="surfaceContextMenuHeader"
+                  :menudata="surfaceContextMenudata"
+                  @beforeShow="startSurfaceContextMenuOperation()"
+                  @beforeHide="endSurfaceContextMenuOperation()"
+                />
+              </QInput>
             </div>
             <div class="row q-pl-md q-pt-sm">
               <div class="text-h6">読み</div>
@@ -142,12 +151,20 @@
                 dense
                 :error="!isOnlyHiraOrKana"
                 :disable="uiLocked"
+                @focus="clearYomiInputSelection()"
                 @blur="setYomi(yomi)"
                 @keydown.enter="setYomiWhenEnter"
               >
                 <template #error>
                   読みに使える文字はひらがなとカタカナのみです。
                 </template>
+                <ContextMenu
+                  ref="yomiContextMenu"
+                  :header="yomiContextMenuHeader"
+                  :menudata="yomiContextMenudata"
+                  @beforeShow="startYomiContextMenuOperation()"
+                  @beforeHide="endYomiContextMenuOperation()"
+                />
               </QInput>
             </div>
             <div class="row q-pl-md q-mt-lg text-h6">アクセント調整</div>
@@ -272,6 +289,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";
@@ -676,6 +695,25 @@ const toWordEditingState = () => {
 const toDialogClosedState = () => {
   dictionaryManageDialogOpenedComputed.value = false;
 };
+
+const surfaceContextMenu = ref<InstanceType<typeof ContextMenu>>();
+const yomiContextMenu = ref<InstanceType<typeof ContextMenu>>();
+
+const {
+  contextMenuHeader: surfaceContextMenuHeader,
+  contextMenudata: surfaceContextMenudata,
+  startContextMenuOperation: startSurfaceContextMenuOperation,
+  clearInputSelection: clearSurfaceInputSelection,
+  endContextMenuOperation: endSurfaceContextMenuOperation,
+} = useRightClickContextMenu(surfaceContextMenu, surfaceInput, surface);
+
+const {
+  contextMenuHeader: yomiContextMenuHeader,
+  contextMenudata: yomiContextMenudata,
+  startContextMenuOperation: startYomiContextMenuOperation,
+  clearInputSelection: clearYomiInputSelection,
+  endContextMenuOperation: endYomiContextMenuOperation,
+} = useRightClickContextMenu(yomiContextMenu, yomiInput, yomi);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/composables/useRightClickContextMenu.ts b/src/composables/useRightClickContextMenu.ts
new file mode 100644
index 0000000000..6e63bc7a7f
--- /dev/null
+++ b/src/composables/useRightClickContextMenu.ts
@@ -0,0 +1,172 @@
+/**
+ * テキスト編集エリアの右クリックメニュー用の処理
+ * 参考実装: 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";
+
+/**
+ * <QInput> に対して切り取りやコピー、貼り付けの処理を行う
+ */
+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>,
+) {
+  const inputSelection = new SelectionHelperForQInput(qInputRef);
+
+  /**
+   * コンテキストメニューの開閉によりFocusやBlurが発生する可能性のある間は`true`
+   * no-focusを付けた場合と付けてない場合でタイミングが異なるため、両方に対応
+   */
+  const willFocusOrBlur = ref(false);
+
+  const contextMenuHeader = ref<string | undefined>("");
+  const startContextMenuOperation = () => {
+    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")
+        throw new Error("コンテキストメニューアイテムの取得に失敗しました。");
+      return item;
+    };
+
+    const text = inputSelection.getAsString();
+
+    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;
+    } else {
+      getMenuItemButton("切り取り").disabled = false;
+      getMenuItemButton("コピー").disabled = false;
+    }
+  };
+
+  const contextMenudata = ref<
+    [
+      MenuItemButton,
+      MenuItemButton,
+      MenuItemButton,
+      MenuItemSeparator,
+      MenuItemButton,
+    ]
+  >([
+    {
+      type: "button",
+      label: "切り取り",
+      onClick: async () => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+        contextMenuRef.value?.hide();
+        await handleCut();
+      },
+      disableWhenUiLocked: false,
+    },
+    {
+      type: "button",
+      label: "コピー",
+      onClick: async () => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+        contextMenuRef.value?.hide();
+        await navigator.clipboard.writeText(inputSelection.getAsString());
+      },
+      disableWhenUiLocked: false,
+    },
+    {
+      type: "button",
+      label: "貼り付け",
+      onClick: async () => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+        contextMenuRef.value?.hide();
+        await handlePaste();
+      },
+      disableWhenUiLocked: false,
+    },
+    { type: "separator" },
+    {
+      type: "button",
+      label: "全選択",
+      onClick: async () => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+        contextMenuRef.value?.hide();
+        qInputRef.value?.select();
+      },
+      disableWhenUiLocked: false,
+    },
+  ]);
+
+  const handleCut = async () => {
+    if (!inputSelection || inputSelection.isEmpty) return;
+
+    const text = inputSelection.getAsString();
+    const start = inputSelection.selectionStart;
+    setText(inputSelection.getReplacedStringTo(""));
+    await nextTick();
+    void navigator.clipboard.writeText(text);
+    inputSelection.setCursorPosition(start);
+  };
+
+  const setText = (text: string | number | null) => {
+    if (typeof text !== "string") throw new Error("typeof text !== 'string'");
+    inputText.value = text;
+  };
+
+  const handlePaste = async (options?: { text?: string }) => {
+    // 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;
+    setText(inputSelection.getReplacedStringTo(text));
+    await nextTick();
+    inputSelection.setCursorPosition(
+      end + inputText.value.length - beforeLength,
+    );
+  };
+
+  /**
+   * バグ修正用
+   * 参考: https://github.com/VOICEVOX/voicevox/pull/1364#issuecomment-1620594931
+   */
+  const clearInputSelection = () => {
+    if (!willFocusOrBlur.value) {
+      inputSelection.toEmpty();
+    }
+  };
+
+  const endContextMenuOperation = async () => {
+    await nextTick();
+    willFocusOrBlur.value = false;
+  };
+
+  return {
+    contextMenuHeader,
+    contextMenudata,
+    startContextMenuOperation,
+    clearInputSelection,
+    endContextMenuOperation,
+  };
+}
diff --git a/src/helpers/SelectionHelperForQInput.ts b/src/helpers/SelectionHelperForQInput.ts
index b49a26ba6b..b07aa83696 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,53 @@ 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();
-  }
-
+  /**
+   * NOTE: 最新の textfield を反映すべきなので nativeEl はキャッシュしない
+   */
   private getNativeEl() {
     const nativeEl = this.textfield.value?.nativeEl;
     if (!(nativeEl instanceof HTMLInputElement)) {
       throw new Error("nativeElの取得に失敗しました。");
     }
-    this._nativeEl = nativeEl;
     return nativeEl;
   }
 }