feat: float mobile editor (#234)

* feat: float mobile editor

* fix: fix pr comment

* lint: fix golangci-lint

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 {