feat: add setting for double-click of memos (#1036)

* feat: add setting for double-click of memos

* update

* update

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") {

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>
   );
 };

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",

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 显示时间",

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 => {

web/src/types/modules/setting.d.ts

@@ -10,6 +10,7 @@ interface Setting {
 interface LocalSetting {
   enableFoldMemo: boolean;
   enablePowerfulEditor: boolean;
+  enableDoubleClickEditing: boolean;
 }
 
 interface UserLocaleSetting {