feat: editor tab support (#309)

* feat: editor tab support

* Update web/src/components/MemoEditor.tsx
Co-authored-by: boojack <stevenlgtm@gmail.com>

* chore: if return style
Co-authored-by: boojack <stevenlgtm@gmail.com>
Co-authored-by: hyoban <hi@hyoban.cc>

web/src/components/MemoEditor.tsx

@@ -2,7 +2,7 @@ import { IEmojiData } from "emoji-picker-react";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { deleteMemoResource, upsertMemoResource } from "../helpers/api";
-import { UNKNOWN_ID } from "../helpers/consts";
+import { TAB_SPACE_WIDTH, UNKNOWN_ID } from "../helpers/consts";
 import { editorStateService, locationService, memoService, resourceService } from "../services";
 import { useAppSelector } from "../store";
 import * as storage from "../helpers/storage";
@@ -77,12 +77,18 @@ const MemoEditor: React.FC = () => {
   }, [state, editorState.editMemoId]);
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === "Escape") {
-      if (state.fullscreen) {
+    if (event.key === "Escape" && state.fullscreen) {
       handleFullscreenBtnClick();
+      return;
     }
-    } else if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+    if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
       handleSaveBtnClick();
+      return;
+    }
+    if (event.key === "Tab") {
+      event.preventDefault();
+      editorRef.current?.insertText(" ".repeat(TAB_SPACE_WIDTH));
+      return;
     }
   };
 

web/src/helpers/consts.ts

@@ -12,3 +12,5 @@ export const VISIBILITY_SELECTOR_ITEMS = [
   { text: "PROTECTED", value: "PROTECTED" },
   { text: "PRIVATE", value: "PRIVATE" },
 ];
+
+export const TAB_SPACE_WIDTH = 2;