From 0d54d9f7d4c922b1e1b4979a6352c2bf69768773 Mon Sep 17 00:00:00 2001 From: caishi <1149225589@qq.com> Date: Tue, 11 Apr 2023 09:46:33 +0800 Subject: [PATCH] save --- .../tpm/challengesnew/tpm-md-editor.js | 95 ++++++++++++++++--- 1 file changed, 83 insertions(+), 12 deletions(-) diff --git a/src/modules/tpm/challengesnew/tpm-md-editor.js b/src/modules/tpm/challengesnew/tpm-md-editor.js index 4ae5c3742..d8638f545 100644 --- a/src/modules/tpm/challengesnew/tpm-md-editor.js +++ b/src/modules/tpm/challengesnew/tpm-md-editor.js @@ -93,7 +93,10 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla // quote相关 const [issues, setIssues ] = useState([]); - const [ quoteVisible , setQuoteVisible ] = useState(false); + const [quoteVisible, setQuoteVisible] = useState(false); + const [screenIssues, setScreenIssues ] = useState([]); + const quoteVisibleRef = useRef(false); + const chooseIssuesList = useRef([]); useEffect(()=>{ //请求members接口获取全部可@列表 @@ -107,6 +110,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla document.addEventListener('click',()=>{ atWhoVisibleRef.current = false; setAtWhoVisible(false); + quoteVisibleRef.current = false; setQuoteVisible(false); }) @@ -114,12 +118,13 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla },[]) // 请求issues接口获取全部可quote的issue列表 - function getIssueList(keywords){ + function getIssueList(keyword){ axios.get(`/v1/${owner}/${projectsId}/issues`,{params:{ - only_name:true,keywords + only_name:true,keyword }}).then(result=>{ if(result && result.data.total_count!== 0){ - setIssues(result.data.issues); + !keyword && setIssues(result.data.issues); + setScreenIssues(result.data.issues); } }) } @@ -127,7 +132,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla const QuoteDiv = (
{ - issues && issues.length>0 && issues.map((i,k)=>{ + screenIssues && screenIssues.length>0 && screenIssues.map((i,k)=>{ return(
  • selectQuoteIssue(i)} onMouseOver={()=>onMouseOverQuote(k)}> #{i.project_issues_index} @@ -140,24 +145,70 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla ) // 点击选择要引用的issue function selectQuoteIssue(i){ + quoteVisibleRef.current = false; + setQuoteVisible(false); const cm = editorInstance.cm; //获取鼠标所在行的行数和ch const cursor = cm.doc.getCursor(); const line = cursor.line;//行 const ch = cursor.ch;//列 - const startIndex = cm.getRange({line,ch:0},{line,ch}).lastIndexOf("@"); + const startIndex = cm.getRange({line,ch:0},{line,ch}).lastIndexOf("#"); //替换内容 cm.replaceRange(`[#${i.project_issues_index}](/${owner}/${projectsId}/issues/${i.project_issues_index}) `,{line,ch:startIndex},{line,ch}); //鼠标聚焦 cm.focus(); - setQuoteVisible(false); // 保存引用的issue + const list = new Set(chooseIssuesList.current); + list.add(i.project_issues_index); + chooseIssuesList.current = Array.from(list); + console.log(list); + } function onMouseOverQuote(key){ document.getElementsByClassName("quote active")[0] && (document.getElementsByClassName("quote active")[0].className="quote"); document.getElementsByClassName("quote")[key] && (document.getElementsByClassName("quote")[key].className="quote active"); } + useEffect(()=>{ + if(quoteVisibleRef.current){ + const atWhoListDiv = document.getElementById("quoteDiv"); + const atWhoDivs = document.getElementsByClassName("quote"); + cmEl.addKeyMap({ + 'Up':()=>{ + let index; + for(let i = 0; i0){ + index <=atWhoDivs.length-4 && (atWhoListDiv.scrollTop -=40) + atWhoDivs[index].className = "quote"; + atWhoDivs[index-1].className = "quote active"; + } + }, + 'Down':()=>{ + let index; + for(let i = 0; i=3 && (atWhoListDiv.scrollTop +=40) + atWhoDivs[index].className = "quote"; + atWhoDivs[index+1].className = "quote active"; + } + }, + 'Enter':()=>{ + //找到classname为quote active的div，执行click事件 + if(document.getElementsByClassName("quote active")[0]){ + document.getElementsByClassName("quote active")[0].click(); + } + } + }) + } else { + //移除上下、enter键监听 + cmEl && cmEl.removeKeyMap(); + } + },[quoteVisible]) + function onLayout() { let ro; if (editorEl.current) { @@ -210,6 +261,8 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla //设置弹框位置 const newTop = 62 const newLeft = 20; + const codemirror = editorInstance.cm; + let value = codemirror.getValue(); if (e.shiftKey && e.code === "Digit2") { // 输入@键后在对应的位置显示可选的项目成员 atWhoVisibleRef.current = true; @@ -219,8 +272,6 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla } //处理本来@了某人 -> 删掉 -> 撤回 的情况 if(e.ctrlKey && e.code === "KeyZ" && allUsers.length !== 0){ - const codemirror = editorInstance.cm; - let value = codemirror.getValue(); //处理初始内容就自带@谁的情况 if(initValue){ const del = []; @@ -247,13 +298,15 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla } if(e.shiftKey && e.code === "Digit3"){ // 输入#键后在对应的位置显示可选的项目issue + quoteVisibleRef.current = true; setQuoteVisible(true); document.getElementById("quoteDiv").style.top = parseInt(cssStyle.getPropertyValue("top").replace("px","")) + newTop +"px"; document.getElementById("quoteDiv").style.left = parseInt(cssStyle.getPropertyValue("left").replace("px",""))+newLeft+"px"; } if(e.code==="Space"){ // 输入# 后又输入空格：隐藏issue列表 - setQuoteVisible(false); + // setQuoteVisible(false); + // quoteVisibleRef.current = false; } } @@ -359,7 +412,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla if(atWhoVisibleRef.current){ // 添加上下键、enter键监听事件 cmEl.addKeyMap({ - 'Up':()=>{ + 'Up':()=>{ const atWhoListDiv = document.getElementById("at_who_list"); const atWhoDivs = document.getElementsByClassName("at_who"); let index; @@ -444,6 +497,25 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla editorInstance.cm.on("change", (cm) => { //调用父组件的onchange方法，将输入内容传入父级组件 onChange && onChange(cm.getValue()); + if(quoteVisibleRef.current){ + const cur = cm.doc.getCursor(); + const line = cur.line; + const ch = cur.ch; + let rangeCont = cmEl.getRange({line,ch:0},{line,ch}); + // #后第一个字符为空时隐藏列表，否则不隐藏 + if(rangeCont.indexOf("#")===-1){ + setQuoteVisible(false); + quoteVisibleRef.current = false; + }else{ + rangeCont = rangeCont.substring(rangeCont.lastIndexOf("#")+1); + if(rangeCont === " "){ + setQuoteVisible(false); + quoteVisibleRef.current = false; + }else{ + getIssueList(rangeCont); + } + } + } if(atWhoVisibleRef.current){ //搜索用户(弹框之后用户输入用户名信息) const cur = cm.doc.getCursor(); @@ -474,7 +546,6 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla if(atWhoLoginList.current.length != 0){ const codemirror = editorInstance.cm; //startValue：触发change方法时的内容，value：处理了初始内容带@用户的情况 - let startValue = codemirror.getValue(); let value = codemirror.getValue(); //处理初始内容就自带@谁的情况 if(initValue){