@我列表

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;

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>