feat: additional script system setting (#467)

api/system.go

@@ -10,4 +10,6 @@ type SystemStatus struct {
 	AllowSignUp bool `json:"allowSignUp"`
 	// Additional style.
 	AdditionalStyle string `json:"additionalStyle"`
+	// Additional script.
+	AdditionalScript string `json:"additionalScript"`
 }

api/system_setting.go

@@ -12,6 +12,8 @@ const (
 	SystemSettingAllowSignUpName SystemSettingName = "allowSignUp"
 	// SystemSettingAdditionalStyleName is the key type of additional style.
 	SystemSettingAdditionalStyleName SystemSettingName = "additionalStyle"
+	// SystemSettingAdditionalScriptName is the key type of additional script.
+	SystemSettingAdditionalScriptName SystemSettingName = "additionalScript"
 )
 
 func (key SystemSettingName) String() string {
@@ -20,6 +22,8 @@ func (key SystemSettingName) String() string {
 		return "allowSignUp"
 	case SystemSettingAdditionalStyleName:
 		return "additionalStyle"
+	case SystemSettingAdditionalScriptName:
+		return "additionalScript"
 	}
 	return ""
 }
@@ -65,6 +69,12 @@ func (upsert SystemSettingUpsert) Validate() error {
 		if err != nil {
 			return fmt.Errorf("failed to unmarshal system setting additional style value")
 		}
+	} else if upsert.Name == SystemSettingAdditionalScriptName {
+		value := ""
+		err := json.Unmarshal([]byte(upsert.Value), &value)
+		if err != nil {
+			return fmt.Errorf("failed to unmarshal system setting additional script value")
+		}
 	} else {
 		return fmt.Errorf("invalid system setting name")
 	}

server/system.go

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

web/src/App.tsx

@@ -30,6 +30,11 @@ function App() {
         styleEl.setAttribute("type", "text/css");
         document.head.appendChild(styleEl);
       }
+      if (status.additionalScript) {
+        const scriptEl = document.createElement("script");
+        scriptEl.innerHTML = status.additionalScript;
+        document.head.appendChild(scriptEl);
+      }
     });
   }, []);
 

web/src/components/Settings/PreferencesSection.tsx

@@ -80,10 +80,6 @@ const PreferencesSection = () => {
           handleValueChanged={handleDefaultMemoVisibilityChanged}
         />
       </label>
-      <label className="form-label selector">
-        <span className="normal-text">{t("setting.preference-section.fold-memo")}</span>
-        <Switch className="ml-2" checked={isFoldingEnabled} onChange={handleIsFoldingEnabledChanged} />
-      </label>
       <label className="form-label selector">
         <span className="normal-text">{t("setting.preference-section.default-memo-sort-option")}</span>
         <Selector
@@ -93,6 +89,10 @@ const PreferencesSection = () => {
           handleValueChanged={handleMemoDisplayTsOptionChanged}
         />
       </label>
+      <label className="form-label selector">
+        <span className="normal-text">{t("setting.preference-section.enable-folding-memo")}</span>
+        <Switch className="ml-2" checked={isFoldingEnabled} onChange={handleIsFoldingEnabledChanged} />
+      </label>
     </div>
   );
 };

web/src/components/Settings/SystemSection.tsx

@@ -7,6 +7,7 @@ import "../../less/settings/preferences-section.less";
 interface State {
   allowSignUp: boolean;
   additionalStyle: string;
+  additionalScript: string;
 }
 
 const SystemSection = () => {
@@ -14,6 +15,7 @@ const SystemSection = () => {
   const [state, setState] = useState<State>({
     allowSignUp: false,
     additionalStyle: "",
+    additionalScript: "",
   });
 
   useEffect(() => {
@@ -22,6 +24,7 @@ const SystemSection = () => {
       setState({
         allowSignUp: status.allowSignUp,
         additionalStyle: status.additionalStyle,
+        additionalScript: status.additionalScript,
       });
     });
   }, []);
@@ -51,6 +54,20 @@ const SystemSection = () => {
     });
   };
 
+  const handleAdditionalScriptChanged = (value: string) => {
+    setState({
+      ...state,
+      additionalScript: value,
+    });
+  };
+
+  const handleSaveAdditionalScript = async () => {
+    await api.upsertSystemSetting({
+      name: "additionalScript",
+      value: JSON.stringify(state.additionalScript),
+    });
+  };
+
   return (
     <div className="section-container preferences-section-container">
       <p className="title-text">{t("common.basic")}</p>
@@ -58,12 +75,12 @@ 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">
+      <div className="form-label selector">
         <span className="normal-text">Additional style</span>
         <Button size="sm" onClick={handleSaveAdditionalStyle}>
           Save
         </Button>
-      </label>
+      </div>
       <Textarea
         className="w-full"
         sx={{
@@ -75,6 +92,23 @@ const SystemSection = () => {
         defaultValue={state.additionalStyle}
         onChange={(event) => handleAdditionalStyleChanged(event.target.value)}
       />
+      <div className="form-label selector mt-2">
+        <span className="normal-text">Additional script</span>
+        <Button size="sm" onClick={handleSaveAdditionalScript}>
+          Save
+        </Button>
+      </div>
+      <Textarea
+        className="w-full"
+        sx={{
+          fontFamily: "monospace",
+          fontSize: "14px",
+        }}
+        minRows={5}
+        maxRows={10}
+        defaultValue={state.additionalScript}
+        onChange={(event) => handleAdditionalScriptChanged(event.target.value)}
+      />
     </div>
   );
 };

web/src/locales/en.json

@@ -139,7 +139,7 @@
     },
     "preference-section": {
       "default-memo-visibility": "Default memo visibility",
-      "fold-memo": "Fold Memo",
+      "enable-folding-memo": "Enable folding memo",
       "editor-font-style": "Editor font style",
       "mobile-editor-style": "Mobile editor style",
       "default-memo-sort-option": "Display by created/updated time",

web/src/locales/vi.json

@@ -138,7 +138,7 @@
     },
     "preference-section": {
       "default-memo-visibility": "Chế độ memo mặc định",
-      "fold-memo": "nếp gấp Memo",
+      "enable-folding-memo": "Enable folding memo",
       "editor-font-style": "Thay đổi font cho trình soạn thảo",
       "mobile-editor-style": "Vị trí editor trên mobile",
       "default-memo-sort-option": "Sắp xếp theo thời gian đã tạo",

web/src/locales/zh.json

@@ -139,7 +139,7 @@
     },
     "preference-section": {
       "default-memo-visibility": "默认 Memo 可见性",
-      "fold-memo": "折叠 Memo",
+      "enable-folding-memo": "开启折叠 Memo",
       "editor-font-style": "编辑器字体样式",
       "mobile-editor-style": "移动端编辑器样式",
       "default-memo-sort-option": "按创建时间/更新时间显示",

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

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