Gitlink
/
forgeplus-react
0
0
Fork 37
Code Issues Pull Requests 5 Releases 1 Wiki Activity

save

This commit is contained in:
caishi 2023-04-11 09:46:33 +08:00
parent 55d286fc21
commit 0d54d9f7d4
1 changed files with 83 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/modules/tpm/challengesnew/tpm-md-editor.js
View File

@ -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 = (
<div id="quoteDiv" className="quoteDiv">
{
issues && issues.length>0 && issues.map((i,k)=>{
screenIssues && screenIssues.length>0 && screenIssues.map((i,k)=>{
return(
<li className={`quote ${k === 0 && "active"}`} onClick={()=>selectQuoteIssue(i)} onMouseOver={()=>onMouseOverQuote(k)}>
<span style={{minWidth:"40px"}}><span className="issueIndex" title={i.project_issues_index}>#{i.project_issues_index}</span></span>
@ -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; i<atWhoDivs.length;i++){
atWhoDivs[i].className === "quote active" && (index = i);
}
if(index>0){
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<atWhoDivs.length;i++){
atWhoDivs[i].className === "quote active" && (index = i);
}
if(index<atWhoDivs.length-1){
index >=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){