feat: add setting for power editor (#851)

web/src/components/MemoEditor.tsx

@@ -59,6 +59,7 @@ const MemoEditor = () => {
   const tagSelectorRef = useRef<HTMLDivElement>(null);
   const user = userStore.state.user as User;
   const setting = user.setting;
+  const localSetting = user.localSetting;
   const tags = tagStore.state.tags;
   const memoVisibilityOptionSelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
     return {
@@ -215,24 +216,25 @@ const MemoEditor = () => {
       }
     }
 
-    for (const symbol of pairSymbols) {
-      if (event.key === symbol[0]) {
-        event.preventDefault();
-        editorRef.current.insertText("", symbol[0], symbol[1]);
-        return;
+    if (localSetting.enablePowerfulEditor) {
+      for (const symbol of pairSymbols) {
+        if (event.key === symbol[0]) {
+          event.preventDefault();
+          editorRef.current.insertText("", symbol[0], symbol[1]);
+          return;
+        }
       }
-    }
-
-    if (event.key === "Backspace") {
-      const cursor = editorRef.current.getCursorPosition();
-      const content = editorRef.current.getContent();
-      const deleteChar = content?.slice(cursor - 1, cursor);
-      const nextChar = content?.slice(cursor, cursor + 1);
-      if (pairSymbols.includes(`${deleteChar}${nextChar}`)) {
-        event.preventDefault();
-        editorRef.current.removeText(cursor - 1, 2);
+      if (event.key === "Backspace") {
+        const cursor = editorRef.current.getCursorPosition();
+        const content = editorRef.current.getContent();
+        const deleteChar = content?.slice(cursor - 1, cursor);
+        const nextChar = content?.slice(cursor, cursor + 1);
+        if (pairSymbols.includes(`${deleteChar}${nextChar}`)) {
+          event.preventDefault();
+          editorRef.current.removeText(cursor - 1, 2);
+        }
+        return;
       }
-      return;
     }
   };
 

web/src/components/Settings/PreferencesSection.tsx

@@ -45,7 +45,11 @@ const PreferencesSection = () => {
   };
 
   const handleIsFoldingEnabledChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
-    userStore.upsertLocalSetting("enableFoldMemo", event.target.checked);
+    userStore.upsertLocalSetting({ ...localSetting, enableFoldMemo: event.target.checked });
+  };
+
+  const handlePowerfulEditorEnabledChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
+    userStore.upsertLocalSetting({ ...localSetting, enablePowerfulEditor: event.target.checked });
   };
 
   return (
@@ -100,6 +104,10 @@ const PreferencesSection = () => {
         <span className="normal-text">{t("setting.preference-section.enable-folding-memo")}</span>
         <Switch className="ml-2" checked={localSetting.enableFoldMemo} onChange={handleIsFoldingEnabledChanged} />
       </label>
+      <label className="form-label selector">
+        <span className="normal-text">{t("setting.preference-section.enable-powerful-editor")}</span>
+        <Switch className="ml-2" checked={localSetting.enablePowerfulEditor} onChange={handlePowerfulEditorEnabledChanged} />
+      </label>
     </div>
   );
 };

web/src/locales/en.json

@@ -161,6 +161,7 @@
       "theme": "Theme",
       "default-memo-visibility": "Default memo visibility",
       "enable-folding-memo": "Enable folding memo",
+      "enable-powerful-editor": "Enable powerful editor",
       "editor-font-style": "Editor font style",
       "mobile-editor-style": "Mobile editor style",
       "default-memo-sort-option": "Memo display time",

web/src/locales/zh.json

@@ -161,6 +161,7 @@
       "theme": "主题",
       "default-memo-visibility": "默认 Memo 可见性",
       "enable-folding-memo": "开启折叠 Memo",
+      "enable-powerful-editor": "开启编辑器自动补全",
       "editor-font-style": "编辑器字体样式",
       "mobile-editor-style": "移动端编辑器样式",
       "default-memo-sort-option": "Memo 显示时间",

web/src/store/module/user.ts

@@ -15,6 +15,7 @@ const defaultSetting: Setting = {
 
 const defaultLocalSetting: LocalSetting = {
   enableFoldMemo: true,
+  enablePowerfulEditor: true,
 };
 
 export const convertResponseModelUser = (user: User): User => {
@@ -133,9 +134,9 @@ export const useUserStore = () => {
       });
       await doSignIn();
     },
-    upsertLocalSetting: async (key: keyof LocalSetting, value: any) => {
-      storage.set({ localSetting: { [key]: value } });
-      store.dispatch(patchUser({ localSetting: { [key]: value } }));
+    upsertLocalSetting: async (localSetting: LocalSetting) => {
+      storage.set({ localSetting });
+      store.dispatch(patchUser({ localSetting }));
     },
     patchUser: async (userPatch: UserPatch): Promise<void> => {
       const { data } = (await api.patchUser(userPatch)).data;

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

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