From 5690dab6bb95159aa2174f30a94e4aca2dd7d249 Mon Sep 17 00:00:00 2001
From: Mahoo Huang <45908451+Mahoo12138@users.noreply.github.com>
Date: Sun, 23 Oct 2022 19:33:45 +0800
Subject: [PATCH] feat: add some hotkeys (#320)

* feat: add some hotkeys

* fix: hotkeys lose the text behind selected

* chore: adjust insertText params passing
---
 web/src/components/Editor/Editor.tsx | 26 ++++++++++++++++++++------
 web/src/components/MemoEditor.tsx    | 19 +++++++++++++++++++
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/web/src/components/Editor/Editor.tsx b/web/src/components/Editor/Editor.tsx
index 38a7cc86..05525735 100644
--- a/web/src/components/Editor/Editor.tsx
+++ b/web/src/components/Editor/Editor.tsx
@@ -4,9 +4,10 @@ import "../../less/editor.less";
 
 export interface EditorRefActions {
   focus: FunctionType;
-  insertText: (text: string) => void;
+  insertText: (text: string, prefix?: string, suffix?: string) => void;
   setContent: (text: string) => void;
   getContent: () => string;
+  getSelectedContent: () => string;
   getCursorPosition: () => number;
 }
 
@@ -46,16 +47,24 @@ const Editor = forwardRef((props: Props, ref: React.ForwardedRef<EditorRefAction
       focus: () => {
         editorRef.current?.focus();
       },
-      insertText: (rawText: string) => {
+      insertText: (content = "", prefix = "", suffix = prefix) => {
         if (!editorRef.current) {
           return;
         }
-
-        const prevValue = editorRef.current.value;
         const cursorPosition = editorRef.current.selectionStart;
-        editorRef.current.value = prevValue.slice(0, cursorPosition) + rawText + prevValue.slice(cursorPosition);
+        const endPosition = editorRef.current.selectionEnd;
+        const prevValue = editorRef.current.value;
+        const value =
+          prevValue.slice(0, cursorPosition) +
+          prefix +
+          prevValue.slice(cursorPosition, endPosition) +
+          suffix +
+          content +
+          prevValue.slice(endPosition);
+
+        editorRef.current.value = value;
         editorRef.current.focus();
-        editorRef.current.selectionEnd = cursorPosition + rawText.length;
+        editorRef.current.selectionEnd = endPosition + prefix.length + suffix.length + content.length;
         handleContentChangeCallback(editorRef.current.value);
         refresh();
       },
@@ -73,6 +82,11 @@ const Editor = forwardRef((props: Props, ref: React.ForwardedRef<EditorRefAction
       getCursorPosition: (): number => {
         return editorRef.current?.selectionStart ?? 0;
       },
+      getSelectedContent: () => {
+        const start = editorRef.current?.selectionStart;
+        const end = editorRef.current?.selectionEnd;
+        return editorRef.current?.value.slice(start, end) ?? "";
+      },
     }),
     []
   );
diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx
index e10c28bd..d746caa7 100644
--- a/web/src/components/MemoEditor.tsx
+++ b/web/src/components/MemoEditor.tsx
@@ -76,6 +76,10 @@ const MemoEditor: React.FC = () => {
     prevGlobalStateRef.current = editorState;
   }, [state, editorState.editMemoId]);
 
+  const handleInsertMark = (mark: string) => {
+    editorRef.current?.insertText("", mark);
+  };
+
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === "Escape" && state.fullscreen) {
       handleFullscreenBtnClick();
@@ -90,6 +94,21 @@ const MemoEditor: React.FC = () => {
       editorRef.current?.insertText(" ".repeat(TAB_SPACE_WIDTH));
       return;
     }
+    if (event.ctrlKey || event.metaKey) {
+      event.preventDefault();
+      switch (event.key) {
+        case "b":
+          handleInsertMark("**");
+          break;
+        case "i":
+          handleInsertMark("*");
+          break;
+        case "e":
+          handleInsertMark("`");
+          break;
+      }
+      return;
+    }
   };
 
   const handleDropEvent = async (event: React.DragEvent) => {