chore: update insert content in editor (#336)

web/src/components/Editor/Editor.tsx

@@ -47,19 +47,19 @@ const Editor = forwardRef((props: Props, ref: React.ForwardedRef<EditorRefAction
       focus: () => {
         editorRef.current?.focus();
       },
-      insertText: (content = "", prefix = "", suffix = prefix) => {
+      insertText: (content = "", prefix = "", suffix = "") => {
         if (!editorRef.current) {
           return;
         }
+
         const cursorPosition = editorRef.current.selectionStart;
         const endPosition = editorRef.current.selectionEnd;
         const prevValue = editorRef.current.value;
         const value =
           prevValue.slice(0, cursorPosition) +
           prefix +
-          prevValue.slice(cursorPosition, endPosition) +
+          (content || prevValue.slice(cursorPosition, endPosition)) +
           suffix +
-          content +
           prevValue.slice(endPosition);
 
         editorRef.current.value = value;

web/src/components/MemoEditor.tsx

@@ -76,39 +76,37 @@ 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();
       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;
     }
     if (event.ctrlKey || event.metaKey) {
-      event.preventDefault();
+      if (event.key === "Enter") {
-      switch (event.key) {
+        handleSaveBtnClick();
-        case "b":
-          handleInsertMark("**");
-          break;
-        case "i":
-          handleInsertMark("*");
-          break;
-        case "e":
-          handleInsertMark("`");
-          break;
-      }
         return;
       }
+      if (event.key === "b") {
+        event.preventDefault();
+        editorRef.current?.insertText("", "**", "**");
+        return;
+      }
+      if (event.key === "i") {
+        event.preventDefault();
+        editorRef.current?.insertText("", "*", "*");
+        return;
+      }
+      if (event.key === "e") {
+        event.preventDefault();
+        editorRef.current?.insertText("", "`", "`");
+        return;
+      }
+    }
   };
 
   const handleDropEvent = async (event: React.DragEvent) => {
@@ -235,9 +233,9 @@ const MemoEditor: React.FC = () => {
     const cursorPosition = editorRef.current.getCursorPosition();
     const prevValue = editorRef.current.getContent().slice(0, cursorPosition);
     if (prevValue === "" || prevValue.endsWith("\n")) {
-      editorRef.current?.insertText("- [ ] ");
+      editorRef.current?.insertText("", "- [ ] ");
     } else {
-      editorRef.current?.insertText("\n- [ ] ");
+      editorRef.current?.insertText("", "\n- [ ] ");
     }
   };
 
@@ -249,9 +247,9 @@ const MemoEditor: React.FC = () => {
     const cursorPosition = editorRef.current.getCursorPosition();
     const prevValue = editorRef.current.getContent().slice(0, cursorPosition);
     if (prevValue === "" || prevValue.endsWith("\n")) {
-      editorRef.current?.insertText("```\n\n```");
+      editorRef.current?.insertText("", "```\n", "\n```");
     } else {
-      editorRef.current?.insertText("\n```\n\n```");
+      editorRef.current?.insertText("", "\n```\n", "\n```");
     }
   };
 
@@ -375,7 +373,7 @@ const MemoEditor: React.FC = () => {
               )}
             </div>
           </div>
-          <button className="action-btn">
+          <button className="action-btn !hidden sm:!flex ">
             <Icon.Smile className="icon-img" onClick={handleEmojiPickerBtnClick} />
           </button>
           <button className="action-btn">