diff --git a/src/forge/Merge/Files.jsx b/src/forge/Merge/Files.jsx index b4cf5b488..6661c1d3c 100644 --- a/src/forge/Merge/Files.jsx +++ b/src/forge/Merge/Files.jsx @@ -18,7 +18,7 @@ function Files({ data,history,owner,projectsId , parentsSha }){ useEffect(()=>{ document.addEventListener('click',()=>{setIsOpen(false)}) - }) + },[]) function showDown(flag,index,isBin){ if(!isBin){ diff --git a/src/modules/tpm/challengesnew/tpm-md-editor.js b/src/modules/tpm/challengesnew/tpm-md-editor.js index 85ee2219d..9b50415df 100644 --- a/src/modules/tpm/challengesnew/tpm-md-editor.js +++ b/src/modules/tpm/challengesnew/tpm-md-editor.js @@ -136,6 +136,8 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla }) atWhoLoginList.current = Array.from(list); setAtWhoLoginListState(Array.from(list)); + //销毁atWhoKeyDown键盘监听事件 + // document.removeEventListener("keydown",atWhoKeyDown); } function onMouseOver(key){ @@ -144,9 +146,11 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla } //markdown编辑器中输入的键盘监听事件 - function mdKeyDown(){ - document.onkeydown = e=>{ - if (e.key === "@") { + function mdKeyDown(e){ + console.log("11111111111"); + // document.onkeydown = e=>{ + if (e.shiftKey && e.key === "@") { + console.log("markdown编辑器的鼠标事件",e); // 输入@键后在对应的位置显示可选的项目成员 setAtWhoVisible(true); //获取光标位置 @@ -161,7 +165,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla setAtWhoVisible(false); } //处理本来@了某人 -> 删掉 -> 撤回 的情况 - if(e.code === "KeyZ" && users.length != 0){ + if(e.ctrlKey && e.code === "KeyZ" && users.length != 0){ const codemirror = editorInstance.cm; let value = codemirror.getValue(); //处理初始内容就自带@谁的情况 @@ -188,30 +192,85 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla } }) } - } + // const atWhoListDiv = document.getElementById("at_who_list"); + // if(atWhoListDiv && (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "Enter")){ + // return false; + // } + // const atWhoDivs = document.getElementsByClassName("at_who"); + // let index; + // for(let i = 0; i 0){ + // e.preventDefault(); + // index <=atWhoDivs.length-4 && (atWhoListDiv.scrollTop -=40) + // atWhoDivs[index].className = "at_who"; + // atWhoDivs[index-1].className = "at_who active"; + // } + // if(e.key === "ArrowDown"){ + // e.preventDefault(); + // console.log("ArrowDown",atWhoVisible); + // const atWhoListDiv = document.getElementById("at_who_list"); + // const atWhoDivs = document.getElementsByClassName("at_who"); + // let index; + // for(let i = 0; i=3 && (atWhoListDiv.scrollTop +=40) + // atWhoDivs[index].className = "at_who"; + // atWhoDivs[index+1].className = "at_who active"; + // } + // if(e.key === "Enter"){ + // //阻止默认事件 + // e.preventDefault(); + // //找到classname为at_who active的div，执行click事件 + // document.getElementsByClassName("at_who active")[0].click(); + // } + + // editorInstance.addKeyMap({ + // 'ArrowUp':()=>{ + // index <=atWhoDivs.length-4 && (atWhoListDiv.scrollTop -=40) + // atWhoDivs[index].className = "at_who"; + // atWhoDivs[index-1].className = "at_who active"; + // }, + // 'ArrowDown':()=>{ + // index >=3 && (atWhoListDiv.scrollTop +=40) + // atWhoDivs[index].className = "at_who"; + // atWhoDivs[index+1].className = "at_who active"; + // }, + // 'Enter':()=>{ + // //找到classname为at_who active的div，执行click事件 + // document.getElementsByClassName("at_who active")[0].click(); + // }, + // }) + + // } + // } } //弹出可选@用户列表之后的键盘监听事件 - function atWhoKeyDown(){ + function atWhoKeyDown(e){ //监听上下和enter键 - document.onkeydown = (e) =>{ + // document.onkeydown = (e) =>{ const atWhoListDiv = document.getElementById("at_who_list"); const atWhoDivs = document.getElementsByClassName("at_who"); let index; for(let i = 0; i 0){ - // index >=4 && (atWhoListDiv.scrollTop -=40) - atWhoListDiv.scrollTop -= 40; + index <=atWhoDivs.length-4 && (atWhoListDiv.scrollTop -=40) atWhoDivs[index].className = "at_who"; atWhoDivs[index-1].className = "at_who active"; + return; } if(e.key === "ArrowDown" && index < atWhoDivs.length-1){ - // index >=3 && (atWhoListDiv.scrollTop +=40) - atWhoListDiv.scrollTop += 40; + index >=3 && (atWhoListDiv.scrollTop +=40) atWhoDivs[index].className = "at_who"; atWhoDivs[index+1].className = "at_who active"; + return; } if(e.key === "Enter"){ //阻止默认事件 @@ -219,9 +278,14 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla //找到classname为at_who active的div，执行click事件 document.getElementsByClassName("at_who active")[0].click(); } - } + // } } + //点击其他地方关闭弹框 + useEffect(()=>{ + document.addEventListener('click',()=>{setAtWhoVisible(false)}) + },[]) + useEffect(()=>{ console.log('@谁列表发生变化,atWhoLoginList.current：',atWhoLoginList.current,'atWhoLoginListState: ',atWhoLoginListState); changeAtWhoLoginList && changeAtWhoLoginList(atWhoLoginListState); @@ -240,15 +304,17 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla ) - useEffect(()=>{ - document.addEventListener('click',()=>{setAtWhoVisible(false)}); - }) - useEffect(()=>{ //当atWhoVisible为true的时候，失焦，监听上下和enter键 if(atWhoVisible){ - document.activeElement.id !== "blur_atWho" && document.getElementById("blur_atWho").focus(); - document.addEventListener("keydown",atWhoKeyDown()); + // document.activeElement.id !== "blur_atWho" && document.getElementById("blur_atWho").focus(); + // const atWhoDivs = document.getElementsByClassName("at_who"); + // let index = 0; + // for(let i = 0; i { - document.addEventListener("keydown", mdKeyDown()); + document.addEventListener("keydown", mdKeyDown); }); isCanAtme && editorInstance.cm.on("blur", () => { - document.removeEventListener("keydown",mdKeyDown()); + document.removeEventListener("keydown",mdKeyDown); }); editorInstance.cm.on("change", (cm) => { onChange && onChange(cm.getValue());