feat: float mobile editor (#234)

* feat: float mobile editor

* fix: fix pr comment

* lint: fix golangci-lint

api/user_setting.go

@@ -14,6 +14,8 @@ const (
 	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 UserSettingKey = "mobileEditorStyle"
 )
 
 // String returns the string format of UserSettingKey type.
@@ -25,6 +27,8 @@ func (key UserSettingKey) String() string {
 		return "memoVisibility"
 	case UserSettingEditorFontStyleKey:
 		return "editorFontFamily"
+	case UserSettingMobileEditorStyleKey:
+		return "mobileEditorStyle"
 	}
 	return ""
 }
@@ -33,6 +37,7 @@ var (
 	UserSettingLocaleValue            = []string{"en", "zh", "vi"}
 	UserSettingMemoVisibilityValue    = []Visibility{Privite, Protected, Public}
 	UserSettingEditorFontStyleValue   = []string{"normal", "mono"}
+	UserSettingMobileEditorStyleValue = []string{"normal", "float"}
 )
 
 type UserSetting struct {
@@ -100,6 +105,23 @@ func (upsert UserSettingUpsert) Validate() error {
 		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)
+		if err != nil {
+			return fmt.Errorf("failed to unmarshal user setting mobile editor style")
+		}
+
+		invalid := true
+		for _, value := range UserSettingMobileEditorStyleValue {
+			if mobileEditorStyleValue == value {
+				invalid = false
+				break
+			}
+		}
+		if invalid {
+			return fmt.Errorf("invalid user setting mobile editor style value")
+		}
 	} else {
 		return fmt.Errorf("invalid user setting key")
 	}

web/src/components/MemoEditor.tsx

@@ -31,6 +31,7 @@ const MemoEditor = () => {
   const prevGlobalStateRef = useRef(editorState);
   const tagSeletorRef = useRef<HTMLDivElement>(null);
   const editorFontStyle = user?.setting.editorFontStyle || "normal";
+  const mobileEditorStyle = user?.setting.mobileEditorStyle || "normal";
 
   useEffect(() => {
     if (editorState.markMemoId && editorState.markMemoId !== UNKNOWN_ID) {
@@ -280,7 +281,7 @@ const MemoEditor = () => {
   );
 
   return (
-    <div className={`memo-editor-container ${isEditing ? "edit-ing" : ""} ${state.fullscreen ? "fullscreen" : ""}`}>
+    <div className={`memo-editor-container ${mobileEditorStyle} ${isEditing ? "edit-ing" : ""} ${state.fullscreen ? "fullscreen" : ""}`}>
       <div className={`tip-container ${isEditing ? "" : "!hidden"}`}>
         <span className="tip-text">{t("editor.editing")}</span>
         <button className="cancel-btn" onClick={handleCancelEditingBtnClick}>

web/src/components/Settings/PreferencesSection.tsx

@@ -31,6 +31,17 @@ const editorFontStyleSelectorItems = [
   },
 ];
 
+const mobileEditorStyleSelectorItems = [
+  {
+    text: "Normal",
+    value: "normal",
+  },
+  {
+    text: "Float",
+    value: "float",
+  },
+];
+
 const PreferencesSection = () => {
   const { t } = useTranslation();
   const { setting } = useAppSelector((state) => state.user.user as User);
@@ -54,6 +65,10 @@ const PreferencesSection = () => {
     await userService.upsertUserSetting("editorFontStyle", value);
   };
 
+  const handleMobileEditorStyleChanged = async (value: string) => {
+    await userService.upsertUserSetting("mobileEditorStyle", value);
+  };
+
   return (
     <div className="section-container preferences-section-container">
       <p className="title-text">{t("common.basic")}</p>
@@ -80,6 +95,15 @@ const PreferencesSection = () => {
           handleValueChanged={handleEditorFontStyleChanged}
         />
       </label>
+      <label className="form-label selector">
+        <span className="normal-text">{t("setting.preference-section.mobile-editor-style")}</span>
+        <Selector
+          className="ml-2 w-32"
+          value={setting.mobileEditorStyle}
+          dataSource={mobileEditorStyleSelectorItems}
+          handleValueChanged={handleMobileEditorStyleChanged}
+        />
+      </label>
     </div>
   );
 };

web/src/less/memo-editor.less

@@ -25,6 +25,15 @@
     border-color: @text-blue;
   }
 
+  &.float {
+    width: calc(100% - 2rem);
+    @apply fixed bottom-4 sm:relative sm:bottom-0 sm:w-full;
+
+    & .emoji-picker-react {
+      @apply bottom-16 sm:bottom-auto;
+    }
+  }
+
   > .tip-container {
     @apply mb-1 w-full flex flex-row justify-start items-center text-xs leading-6;
 

web/src/locales/en.json

@@ -109,7 +109,8 @@
     },
     "preference-section": {
       "default-memo-visibility": "Default memo visibility",
-      "editor-font-style": "Editor font style"
+      "editor-font-style": "Editor font style",
+      "mobile-editor-style": "Mobile editor style"
     },
     "member-section": {
       "create-a-member": "Create a member"

web/src/locales/vi.json

@@ -109,7 +109,8 @@
     },
     "preference-section": {
       "default-memo-visibility": "Chế độ memo mặc định",
-      "editor-font-style": "Thay đổi font cho trình soạn thảo"
+      "editor-font-style": "Thay đổi font cho trình soạn thảo",
+      "mobile-editor-style": "Vị trí editor trên mobile"
     },
     "member-section": {
       "create-a-member": "Tạo thành viên"

web/src/locales/zh.json

@@ -109,7 +109,8 @@
     },
     "preference-section": {
       "default-memo-visibility": "默认 Memo 可见性",
-      "editor-font-style": "编辑器字体样式"
+      "editor-font-style": "编辑器字体样式",
+      "mobile-editor-style": "Mobile editor style"
     },
     "member-section": {
       "create-a-member": "创建成员"

web/src/services/userService.ts

@@ -8,6 +8,7 @@ const defauleSetting: Setting = {
   locale: "en",
   memoVisibility: "PRIVATE",
   editorFontStyle: "normal",
+  mobileEditorStyle: "normal",
 };
 
 export const convertResponseModelUser = (user: User): User => {

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

@@ -2,6 +2,7 @@ interface Setting {
   locale: Locale;
   memoVisibility: Visibility;
   editorFontStyle: "normal" | "mono";
+  mobileEditorStyle: "normal" | "float";
 }
 
 interface UserLocaleSetting {