From b268b540d85ab917ef4b8b778867dea08fada16c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A2=E6=80=9D?= <2897217417@qq.com>
Date: Wed, 13 Oct 2021 14:53:13 +0800
Subject: [PATCH] =?UTF-8?q?@=E6=88=91=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tpm/challengesnew/css/newquestion.css      |  5 +++++
 src/modules/tpm/challengesnew/tpm-md-editor.js | 18 +++++++++++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/modules/tpm/challengesnew/css/newquestion.css b/src/modules/tpm/challengesnew/css/newquestion.css
index dbf45193e..ca1ebb05e 100644
--- a/src/modules/tpm/challengesnew/css/newquestion.css
+++ b/src/modules/tpm/challengesnew/css/newquestion.css
@@ -18,6 +18,7 @@
     top: 100px;
     left: 100px;
     overflow-y: scroll;
+    cursor: pointer;
 }
 .at_who{
     height: 40px;
@@ -25,6 +26,10 @@
     flex-direction: row;
     align-items: center;
     border-bottom: 1px solid rgba(212, 212, 212, 0.5);
+    padding: 0 4px;
+}
+.at_who:hover{
+    background: #F3F4F6;
 }
 .at_who img{
     width:30px;
diff --git a/src/modules/tpm/challengesnew/tpm-md-editor.js b/src/modules/tpm/challengesnew/tpm-md-editor.js
index 4736287cc..a8243879c 100644
--- a/src/modules/tpm/challengesnew/tpm-md-editor.js
+++ b/src/modules/tpm/challengesnew/tpm-md-editor.js
@@ -106,11 +106,20 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
     return ro;
   }
 
+  useEffect(()=>{
+    document.addEventListener('click',()=>{setAtWhoVisible(false)});
+  })
+
+  function selectAtWho(username){
+    setAtWhoVisible(false);
+    editorInstance.setValue(initValue.toString()+username);
+  }
+
   const atWhoList = (
     <div className="at_who_list">
       {users && users.map((item,key)=>{
         return(
-          <div className="at_who">
+          <div key={key} className="at_who" onClick={()=>{selectAtWho(item.username)}}>
             { item.image_url && <img src={getImageUrl(item.image_url)}></img> }
             <span>{item.username}</span>
           </div>
@@ -220,7 +229,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
         editorInstance.cm.on('change', (cm) => {
           if(forMember){
             document.onkeydown = (e) => {
-              if (e.key.charCodeAt() === 80 || e.key.charCodeAt() === 64) {
+              if (e.key === "@") {
                 // 输入@键后在对应的位置显示可选的项目成员
                 setAtWhoVisible(true);
               }else{
@@ -245,7 +254,6 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
 
   useEffect(() => {
     if (editorInstance && initValue !== undefined) {
-      
       const val = editorInstance.getValue();
       if (initValue !== null && initValue !== editorInstance.getValue()) {
         editorInstance.setValue(initValue.toString())
@@ -296,8 +304,8 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
       <div ref={editorEl} className={`df ${className} ${imageExpand && 'editormd-image-click-expand'} `} >
         <div className={`edu-back-greyf5 radius4 editormd ${error ? 'error' : ''}`} id={containerId} >
           <textarea style={{ display: 'none' }} id={editorBodyId} name="content"></textarea>
-          {/* {atWhoVisible && atWhoList} */}
-          {atWhoList}
+          {atWhoVisible && atWhoList}
+          {/* {atWhoList} */}
           <div className="CodeMirror cm-s-defualt"></div>
         </div>
       </div>