From 24154c95f2be3a6c102b7f8e6e12c09c270565b4 Mon Sep 17 00:00:00 2001
From: f97 <huynhduckhoan@gmail.com>
Date: Wed, 19 Oct 2022 17:19:50 +0700
Subject: [PATCH] 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 | 18 ++++++++++++------
 web/src/helpers/consts.ts         |  2 ++
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx
index 3619b599..d4c9e99d 100644
--- a/web/src/components/MemoEditor.tsx
+++ b/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) {
-        handleFullscreenBtnClick();
-      }
-    } else if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+    if (event.key === "Escape" && state.fullscreen) {
+      handleFullscreenBtnClick();
+      return;
+    }
+    if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
       handleSaveBtnClick();
+      return;
+    }
+    if (event.key === "Tab") {
+      event.preventDefault();
+      editorRef.current?.insertText(" ".repeat(TAB_SPACE_WIDTH));
+      return;
     }
   };
 
diff --git a/web/src/helpers/consts.ts b/web/src/helpers/consts.ts
index ef9277e9..3c80989f 100644
--- a/web/src/helpers/consts.ts
+++ b/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;