From e3f49db5c0d6a03147453e9d081947cb6826234b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A2=E6=80=9D?= <2897217417@qq.com>
Date: Mon, 18 Oct 2021 14:19:32 +0800
Subject: [PATCH] =?UTF-8?q?at=E8=B0=81=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     |  2 -
 .../tpm/challengesnew/tpm-md-editor.js        | 65 ++++++++++++++++---
 2 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/src/modules/tpm/challengesnew/css/newquestion.css b/src/modules/tpm/challengesnew/css/newquestion.css
index 46bb22c3..13353547 100644
--- a/src/modules/tpm/challengesnew/css/newquestion.css
+++ b/src/modules/tpm/challengesnew/css/newquestion.css
@@ -15,8 +15,6 @@
     background: #FFFFFF;
     box-shadow: 0px 4px 8px 2px rgba(212, 212, 212, 0.5);
     border-radius: 4px;
-    top: 60px;
-    left: 100px;
     overflow-y: scroll;
     cursor: pointer;
 }
diff --git a/src/modules/tpm/challengesnew/tpm-md-editor.js b/src/modules/tpm/challengesnew/tpm-md-editor.js
index eae4f23e..f3455fe4 100644
--- a/src/modules/tpm/challengesnew/tpm-md-editor.js
+++ b/src/modules/tpm/challengesnew/tpm-md-editor.js
@@ -117,10 +117,51 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
     cm.replaceRange(username+" ",{line,ch},{line,ch});
   }
 
-  console.log('window.event',window.event);
-  
+  // useEffect (()=>{
+  //   //监听上下键和enter键 选中atwo
+  //   atWhoVisible && document.onkeydown((e)=>{
+  //     //上
+  //     if(e.key === "ArrowUp"){
+  //       console.log('上');
+  //     }
+  //     //下
+  //     if(e.key === "ArrowDown"){
+  //       console.log('下');
+  //     }
+  //     //enter
+  //     if(e.key === "Enter"){
+  //       console.log('Enter');
+  //     }
+  //   })
+  // },[])
+
+  // function handleKeyDown(e){
+  //   //上
+  //   if(e.key === "ArrowUp"){
+  //     console.log('上');
+  //   }
+  //   //下
+  //   if(e.key === "ArrowDown"){
+  //     console.log('下');
+  //   }
+  //   //enter
+  //   if(e.key === "Enter"){
+  //     console.log('Enter');
+  //   }
+  // }
+
   const atWhoList = (
-    <div className="at_who_list">
+    // <Menu className="at_who_list" id="at_who_list">
+    //   {users && users.map((item,key)=>{
+    //     return(
+    //       <Menu.item>
+    //         { item.image_url && <img src={getImageUrl(item.image_url)}></img> }
+    //         <span>{item.username}</span>
+    //       </Menu.item>
+    //     )
+    //   })}
+    // </Menu>
+    <div className="at_who_list" id="at_who_list" onkeydown ={(e)=>{handleKeyDown(e)}}>
       {users && users.map((item,key)=>{
         return(
           <div key={key} className="at_who" onClick={()=>{selectAtWho(item.username)}}>
@@ -131,7 +172,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
       })}
     </div>
   )
-  
+
   useEffect(()=>{
     document.addEventListener('click',()=>{setAtWhoVisible(false)});
   })
@@ -234,18 +275,27 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
         tid = md_elocalStorage(editorInstance, `MDEditor__${containerId}`, containerId)
       }
       //当光标或选中内容时触发绑定@事件
-      editorInstance.cm.on("cursorActivity", () => {
+      editorInstance.cm.on("focus", () => {
         if (forMember) {
           document.onkeydown = (e) => {
+            // console.log('e',e);
             if (e.key === "@") {
               // 输入@键后在对应的位置显示可选的项目成员
               setAtWhoVisible(true);
+              //获取光标位置
+              const cssStyle = document.getElementsByClassName("CodeMirror cm-s-default CodeMirror-wrap")[0].firstChild.style;
+              //设置弹框位置
+              document.getElementById("at_who_list").style.top = (parseInt(cssStyle.getPropertyValue("top").replace("px",""))+60)+"px";
+              document.getElementById("at_who_list").style.left = (parseInt(cssStyle.getPropertyValue("left").replace("px",""))+20)+"px";
             } else {
               setAtWhoVisible(false);
             }
           };
         }
       });
+      editorInstance.cm.on("blur", () => {
+        document.onkeydown = null ;
+      });
       editorInstance.cm.on("change", (cm) => {
         onChange && onChange(cm.getValue());
       });
@@ -309,15 +359,14 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
   }, [
     editorInstance, resizeBarEl
   ])
-
   return (
     <Fragment>
-      <div ref={editorEl} className={`df ${className} ${imageExpand && 'editormd-image-click-expand'} `} >
+      <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>
+          <div className="CodeMirror cm-s-defualt"></div>
           {atWhoVisible && atWhoList}
           {/* {atWhoList} */}
-          <div className="CodeMirror cm-s-defualt"></div>
         </div>
       </div>
       {showResizeBar ? <a ref={resizeBarEl} className='editor-resize'></a> : null}