From 7cd474dbb70a9256f676a892c77327ea6e6a58be Mon Sep 17 00:00:00 2001
From: Zeng1998 <1129142694@qq.com>
Date: Tue, 7 Feb 2023 20:35:41 +0800
Subject: [PATCH] feat: add setting for double-click of memos (#1036)

* feat: add setting for double-click of memos

* update

* update
---
 web/src/components/Memo.tsx                        | 4 ++++
 web/src/components/Settings/PreferencesSection.tsx | 9 +++++++++
 web/src/locales/en.json                            | 1 +
 web/src/locales/zh.json                            | 1 +
 web/src/store/module/user.ts                       | 1 +
 web/src/types/modules/setting.d.ts                 | 1 +
 6 files changed, 17 insertions(+)

diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx
index 0168e764b..8d3edf49d 100644
--- a/web/src/components/Memo.tsx
+++ b/web/src/components/Memo.tsx
@@ -34,6 +34,7 @@ const Memo: React.FC<Props> = (props: Props) => {
   const locationStore = useLocationStore();
   const userStore = useUserStore();
   const memoStore = useMemoStore();
+  const { localSetting } = userStore.state.user as User;
   const [displayTimeStr, setDisplayTimeStr] = useState<string>(getFormatedMemoTimeStr(memo.displayTs, i18n.language));
   const memoContainerRef = useRef<HTMLDivElement>(null);
   const isVisitorMode = userStore.isVisitorMode();
@@ -151,6 +152,9 @@ const Memo: React.FC<Props> = (props: Props) => {
   };
 
   const handleMemoContentDoubleClick = (e: React.MouseEvent) => {
+    if (!localSetting.enableDoubleClickEditing) {
+      return;
+    }
     const targetEl = e.target as HTMLElement;
 
     if (targetEl.className === "tag-span") {
diff --git a/web/src/components/Settings/PreferencesSection.tsx b/web/src/components/Settings/PreferencesSection.tsx
index e573b1239..fa76484d4 100644
--- a/web/src/components/Settings/PreferencesSection.tsx
+++ b/web/src/components/Settings/PreferencesSection.tsx
@@ -5,6 +5,7 @@ import { VISIBILITY_SELECTOR_ITEMS, MEMO_DISPLAY_TS_OPTION_SELECTOR_ITEMS } from
 import AppearanceSelect from "../AppearanceSelect";
 import LocaleSelect from "../LocaleSelect";
 import "../../less/settings/preferences-section.less";
+import React from "react";
 
 const PreferencesSection = () => {
   const { t } = useTranslation();
@@ -52,6 +53,10 @@ const PreferencesSection = () => {
     userStore.upsertLocalSetting({ ...localSetting, enablePowerfulEditor: event.target.checked });
   };
 
+  const handleDoubleClickEnabledChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
+    userStore.upsertLocalSetting({ ...localSetting, enableDoubleClickEditing: event.target.checked });
+  };
+
   return (
     <div className="section-container preferences-section-container">
       <p className="title-text">{t("common.basic")}</p>
@@ -108,6 +113,10 @@ const PreferencesSection = () => {
         <span className="normal-text">{t("setting.preference-section.enable-powerful-editor")}</span>
         <Switch className="ml-2" checked={localSetting.enablePowerfulEditor} onChange={handlePowerfulEditorEnabledChanged} />
       </label>
+      <label className="form-label selector">
+        <span className="normal-text">{t("setting.preference-section.enable-double-click")}</span>
+        <Switch className="ml-2" checked={localSetting.enableDoubleClickEditing} onChange={handleDoubleClickEnabledChanged} />
+      </label>
     </div>
   );
 };
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index 36b731275..36ac956c6 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -162,6 +162,7 @@
       "default-memo-visibility": "Default memo visibility",
       "enable-folding-memo": "Enable folding memo",
       "enable-powerful-editor": "Enable powerful editor",
+      "enable-double-click": "Enable double-click to edit",
       "editor-font-style": "Editor font style",
       "mobile-editor-style": "Mobile editor style",
       "default-memo-sort-option": "Memo display time",
diff --git a/web/src/locales/zh.json b/web/src/locales/zh.json
index 42da16d2a..40c4e3a1b 100644
--- a/web/src/locales/zh.json
+++ b/web/src/locales/zh.json
@@ -162,6 +162,7 @@
       "default-memo-visibility": "默认 Memo 可见性",
       "enable-folding-memo": "开启折叠 Memo",
       "enable-powerful-editor": "开启编辑器自动补全",
+      "enable-double-click":"开启双击编辑",
       "editor-font-style": "编辑器字体样式",
       "mobile-editor-style": "移动端编辑器样式",
       "default-memo-sort-option": "Memo 显示时间",
diff --git a/web/src/store/module/user.ts b/web/src/store/module/user.ts
index 6c3289c77..a329cd51a 100644
--- a/web/src/store/module/user.ts
+++ b/web/src/store/module/user.ts
@@ -16,6 +16,7 @@ const defaultSetting: Setting = {
 const defaultLocalSetting: LocalSetting = {
   enableFoldMemo: true,
   enablePowerfulEditor: true,
+  enableDoubleClickEditing: true,
 };
 
 export const convertResponseModelUser = (user: User): User => {
diff --git a/web/src/types/modules/setting.d.ts b/web/src/types/modules/setting.d.ts
index e34b65590..a4481cb55 100644
--- a/web/src/types/modules/setting.d.ts
+++ b/web/src/types/modules/setting.d.ts
@@ -10,6 +10,7 @@ interface Setting {
 interface LocalSetting {
   enableFoldMemo: boolean;
   enablePowerfulEditor: boolean;
+  enableDoubleClickEditing: boolean;
 }
 
 interface UserLocaleSetting {