feat: additional style system setting (#444)

* feat: additional style system setting

* feat: remove editor font setting

api/system.go

@@ -6,5 +6,8 @@ type SystemStatus struct {
 	Host    *User            `json:"host"`
 	Profile *profile.Profile `json:"profile"`
 	// System settings
+	// Allow sign up.
 	AllowSignUp bool `json:"allowSignUp"`
+	// Additional style.
+	AdditionalStyle string `json:"additionalStyle"`
 }

api/system_setting.go

@@ -10,15 +10,16 @@ type SystemSettingName string
 const (
 	// SystemSettingAllowSignUpName is the key type of allow signup setting.
 	SystemSettingAllowSignUpName SystemSettingName = "allowSignUp"
-	SystemSettingPlaceholderName SystemSettingName = "placeholder"
+	// SystemSettingAdditionalStyleName is the key type of additional style.
+	SystemSettingAdditionalStyleName SystemSettingName = "additionalStyle"
 )
 
 func (key SystemSettingName) String() string {
 	switch key {
 	case SystemSettingAllowSignUpName:
 		return "allowSignUp"
-	case SystemSettingPlaceholderName:
-		return "placeholder"
+	case SystemSettingAdditionalStyleName:
+		return "additionalStyle"
 	}
 	return ""
 }
@@ -58,6 +59,12 @@ func (upsert SystemSettingUpsert) Validate() error {
 		if invalid {
 			return fmt.Errorf("invalid system setting allow signup value")
 		}
+	} else if upsert.Name == SystemSettingAdditionalStyleName {
+		value := ""
+		err := json.Unmarshal([]byte(upsert.Value), &value)
+		if err != nil {
+			return fmt.Errorf("failed to unmarshal system setting additional style value")
+		}
 	} else {
 		return fmt.Errorf("invalid system setting name")
 	}

api/user_setting.go

@@ -12,9 +12,7 @@ const (
 	UserSettingLocaleKey UserSettingKey = "locale"
 	// UserSettingMemoVisibilityKey is the key type for user preference memo default visibility.
 	UserSettingMemoVisibilityKey UserSettingKey = "memoVisibility"
-	// UserSettingEditorFontStyleKey is the key type for editor font style.
-	UserSettingEditorFontStyleKey UserSettingKey = "editorFontStyle"
-	// UserSettingEditorFontStyleKey is the key type for mobile editor style.
+	// UserSettingMobileEditorStyleKey is the key type for mobile editor style.
 	UserSettingMobileEditorStyleKey UserSettingKey = "mobileEditorStyle"
 	// UserSettingMemoDisplayTsOptionKey is the key type for memo display ts option.
 	UserSettingMemoDisplayTsOptionKey UserSettingKey = "memoDisplayTsOption"
@@ -27,8 +25,6 @@ func (key UserSettingKey) String() string {
 		return "locale"
 	case UserSettingMemoVisibilityKey:
 		return "memoVisibility"
-	case UserSettingEditorFontStyleKey:
-		return "editorFontFamily"
 	case UserSettingMobileEditorStyleKey:
 		return "mobileEditorStyle"
 	case UserSettingMemoDisplayTsOptionKey:
@@ -93,23 +89,6 @@ func (upsert UserSettingUpsert) Validate() error {
 		if invalid {
 			return fmt.Errorf("invalid user setting memo visibility value")
 		}
-	} else if upsert.Key == UserSettingEditorFontStyleKey {
-		editorFontStyleValue := "normal"
-		err := json.Unmarshal([]byte(upsert.Value), &editorFontStyleValue)
-		if err != nil {
-			return fmt.Errorf("failed to unmarshal user setting editor font style")
-		}
-
-		invalid := true
-		for _, value := range UserSettingEditorFontStyleValue {
-			if editorFontStyleValue == value {
-				invalid = false
-				break
-			}
-		}
-		if invalid {
-			return fmt.Errorf("invalid user setting editor font style value")
-		}
 	} else if upsert.Key == UserSettingMobileEditorStyleKey {
 		mobileEditorStyleValue := "normal"
 		err := json.Unmarshal([]byte(upsert.Value), &mobileEditorStyleValue)

server/system.go

@@ -38,9 +38,10 @@ func (s *Server) registerSystemRoutes(g *echo.Group) {
 		}
 
 		systemStatus := api.SystemStatus{
-			Host:        hostUser,
-			Profile:     s.Profile,
-			AllowSignUp: false,
+			Host:            hostUser,
+			Profile:         s.Profile,
+			AllowSignUp:     false,
+			AdditionalStyle: "",
 		}
 
 		systemSettingList, err := s.Store.FindSystemSettingList(ctx, &api.SystemSettingFind{})
@@ -56,6 +57,8 @@ func (s *Server) registerSystemRoutes(g *echo.Group) {
 
 			if systemSetting.Name == api.SystemSettingAllowSignUpName {
 				systemStatus.AllowSignUp = value.(bool)
+			} else if systemSetting.Name == api.SystemSettingAdditionalStyleName {
+				systemStatus.AdditionalStyle = value.(string)
 			}
 		}
 

web/src/App.tsx

@@ -5,6 +5,7 @@ import { RouterProvider } from "react-router-dom";
 import { globalService, locationService } from "./services";
 import { useAppSelector } from "./store";
 import router from "./router";
+import * as api from "./helpers/api";
 import * as storage from "./helpers/storage";
 
 function App() {
@@ -20,6 +21,18 @@ function App() {
     globalService.initialState();
   }, []);
 
+  useEffect(() => {
+    api.getSystemStatus().then(({ data }) => {
+      const { data: status } = data;
+      if (status.additionalStyle) {
+        const styleEl = document.createElement("style");
+        styleEl.innerHTML = status.additionalStyle;
+        styleEl.setAttribute("type", "text/css");
+        document.head.appendChild(styleEl);
+      }
+    });
+  }, []);
+
   useEffect(() => {
     i18n.changeLanguage(global.locale);
     storage.set({

web/src/components/MemoEditor.tsx

@@ -55,7 +55,6 @@ const MemoEditor: React.FC = () => {
   const prevGlobalStateRef = useRef(editorState);
   const editorRef = useRef<EditorRefActions>(null);
   const tagSeletorRef = useRef<HTMLDivElement>(null);
-  const editorFontStyle = user?.setting.editorFontStyle || "normal";
   const mobileEditorStyle = user?.setting.mobileEditorStyle || "normal";
   const memoVisibilityOptionSelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
     return {
@@ -395,14 +394,14 @@ const MemoEditor: React.FC = () => {
 
   const editorConfig = useMemo(
     () => ({
-      className: `memo-editor ${editorFontStyle}`,
+      className: `memo-editor`,
       initialContent: getEditorContentCache(),
       placeholder: t("editor.placeholder"),
       fullscreen: state.fullscreen,
       onContentChange: handleContentChange,
       onPaste: handlePasteEvent,
     }),
-    [state.fullscreen, i18n.language, editorFontStyle]
+    [state.fullscreen, i18n.language]
   );
 
   return (

web/src/components/Settings/PreferencesSection.tsx

@@ -20,17 +20,6 @@ const localeSelectorItems = [
   },
 ];
 
-const editorFontStyleSelectorItems = [
-  {
-    text: "Normal",
-    value: "normal",
-  },
-  {
-    text: "Mono",
-    value: "mono",
-  },
-];
-
 const mobileEditorStyleSelectorItems = [
   {
     text: "Normal",
@@ -68,10 +57,6 @@ const PreferencesSection = () => {
     await userService.upsertUserSetting("memoVisibility", value);
   };
 
-  const handleEditorFontStyleChanged = async (value: string) => {
-    await userService.upsertUserSetting("editorFontStyle", value);
-  };
-
   const handleMobileEditorStyleChanged = async (value: string) => {
     await userService.upsertUserSetting("mobileEditorStyle", value);
   };
@@ -97,15 +82,6 @@ const PreferencesSection = () => {
           handleValueChanged={handleDefaultMemoVisibilityChanged}
         />
       </label>
-      <label className="form-label selector">
-        <span className="normal-text">{t("setting.preference-section.editor-font-style")}</span>
-        <Selector
-          className="ml-2 w-32"
-          value={setting.editorFontStyle}
-          dataSource={editorFontStyleSelectorItems}
-          handleValueChanged={handleEditorFontStyleChanged}
-        />
-      </label>
       <label className="form-label selector">
         <span className="normal-text">{t("setting.preference-section.mobile-editor-style")}</span>
         <Selector

web/src/components/Settings/SystemSection.tsx

 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import Switch from "@mui/joy/Switch";
+import { Button, Switch, Textarea } from "@mui/joy";
 import * as api from "../../helpers/api";
 import "../../less/settings/preferences-section.less";
 
 interface State {
   allowSignUp: boolean;
+  additionalStyle: string;
 }
 
 const SystemSection = () => {
   const { t } = useTranslation();
   const [state, setState] = useState<State>({
     allowSignUp: false,
+    additionalStyle: "",
   });
 
   useEffect(() => {
@@ -19,6 +21,7 @@ const SystemSection = () => {
       const { data: status } = data;
       setState({
         allowSignUp: status.allowSignUp,
+        additionalStyle: status.additionalStyle,
       });
     });
   }, []);
@@ -34,6 +37,20 @@ const SystemSection = () => {
     });
   };
 
+  const handleAdditionalStyleChanged = (value: string) => {
+    setState({
+      ...state,
+      additionalStyle: value,
+    });
+  };
+
+  const handleSaveAdditionalStyle = async () => {
+    await api.upsertSystemSetting({
+      name: "additionalStyle",
+      value: JSON.stringify(state.additionalStyle),
+    });
+  };
+
   return (
     <div className="section-container preferences-section-container">
       <p className="title-text">{t("common.basic")}</p>
@@ -41,6 +58,21 @@ const SystemSection = () => {
         <span className="normal-text">Allow user signup</span>
         <Switch size="sm" checked={state.allowSignUp} onChange={(event) => handleAllowSignUpChanged(event.target.checked)} />
       </label>
+      <label className="form-label selector">
+        <span className="normal-text">Additional style</span>
+        <Button size="sm" onClick={handleSaveAdditionalStyle}>
+          Save
+        </Button>
+      </label>
+      <Textarea
+        className="w-full"
+        sx={{
+          fontFamily: "monospace",
+        }}
+        minRows={5}
+        defaultValue={state.additionalStyle}
+        onChange={(event) => handleAdditionalStyleChanged(event.target.value)}
+      />
     </div>
   );
 };

web/src/components/UserBanner.tsx

@@ -63,14 +63,8 @@ const UserBanner = () => {
   };
 
   const handleSignOutBtnClick = async () => {
-    userService
-      .doSignOut()
-      .then(() => {
-        navigate("/auth");
-      })
-      .catch(() => {
-        // do nth
-      });
+    userService.doSignOut().catch();
+    navigate("/auth");
   };
 
   return (

web/src/less/editor.less

@@ -3,12 +3,6 @@
 .common-editor-wrapper {
   @apply flex flex-col justify-start items-start relative w-full h-auto bg-white;
 
-  &.mono {
-    > .common-editor-inputer {
-      @apply font-mono;
-    }
-  }
-
   > .common-editor-inputer {
     @apply w-full h-full mt-2 mb-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent whitespace-pre-wrap;
     max-height: 300px;

web/src/services/userService.ts

@@ -7,7 +7,6 @@ import { setUser, patchUser, setHost, setOwner } from "../store/modules/user";
 const defauleSetting: Setting = {
   locale: "en",
   memoVisibility: "PRIVATE",
-  editorFontStyle: "normal",
   mobileEditorStyle: "normal",
   memoDisplayTsOption: "created_ts",
 };

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

 interface Setting {
   locale: Locale;
   memoVisibility: Visibility;
-  editorFontStyle: "normal" | "mono";
   mobileEditorStyle: "normal" | "float";
   memoDisplayTsOption: "created_ts" | "updated_ts";
 }
@@ -16,12 +15,7 @@ interface UserMemoVisibilitySetting {
   value: Visibility;
 }
 
-interface UserEditorFontStyleSetting {
-  key: "editorFontStyle";
-  value: "normal" | "mono";
-}
-
-type UserSetting = UserLocaleSetting | UserMemoVisibilitySetting | UserEditorFontStyleSetting;
+type UserSetting = UserLocaleSetting | UserMemoVisibilitySetting;
 
 interface UserSettingUpsert {
   key: keyof Setting;

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

@@ -8,6 +8,7 @@ interface SystemStatus {
   profile: Profile;
   // System settings
   allowSignUp: boolean;
+  additionalStyle: string;
 }
 
 interface SystemSetting {