Nigel
/
forgeplus-react
forked from Gitlink/forgeplus-react
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

atwo markdown渲染

This commit is contained in:
谢思 2021-11-11 11:31:42 +08:00
parent cc2dd35ff4
commit a94d02bb8a
1 changed files with 65 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -131,16 +131,18 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
const cursor = cm.doc.getCursor();
const line = cursor.line;//行
const ch = cursor.ch;//列
const startIndex = cm.getRange({line,ch:0},{line,ch}).lastIndexOf("@")+1;
//替换最后的内容
cm.replaceRange(username+" ",{line,ch:startIndex},{line,ch});
const startIndex = cm.getRange({line,ch:0},{line,ch}).lastIndexOf("@");
let selectUserLogin = undefined;
users.map((item)=>{
item.username === username && (selectUserLogin = item.login);
})
//替换内容
cm.replaceRange("[@"+username+"]"+`(/${selectUserLogin}) `,{line,ch:startIndex},{line,ch});
//鼠标聚焦
cm.focus();
//将此user的login存储到atWhoLoginList集合中
const list = new Set(atWhoLoginList.current);
users.map((item)=>{
item.username === username && list.add(item.login);
})
list.add(selectUserLogin);
atWhoLoginList.current = Array.from(list);
setAtWhoLoginListState(Array.from(list));
}
@ -174,7 +176,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
allUsers.map(item=>{
if(initValue.indexOf(item.username)!=-1 && initValue.charAt(initValue.indexOf(item.username)-1) === "@" && initValue.indexOf(`@${item.username}`)===value.indexOf(`@${item.username}`)){
//初始内容中有符合@+名字的格式并且当前内容未删除初始内容
del[del.length] = `@${item.username}`;
del[del.length] = `[@${item.username}](/${item.login})`;
}
})
del.length!=0 && del.map(str=>{
@ -411,6 +413,8 @@ 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){
@ -418,7 +422,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
allUsers.map(item=>{
if(initValue.indexOf(item.username)!=-1 && initValue.charAt(initValue.indexOf(item.username)-1) === "@" && initValue.indexOf(`@${item.username}`)===value.indexOf(`@${item.username}`)){
//初始内容中有符合@+名字的格式并且当前内容未删除初始内容
del[del.length] = `@${item.username}`;
del[del.length] = `[@${item.username}](/${item.login})`;
}
})
del.length!=0 && del.map(str=>{
@ -434,26 +438,64 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
}
})
});
if(value.indexOf("@") === -1){
//已经有要@的列表，但是没有@符号 -> 清空@集合
atWhoLoginList.current = [];
setAtWhoLoginListState([]);
return;
}
const cursor = codemirror.doc.getCursor();
const line = cursor.line;
const ch = cursor.ch;
const lineContent = codemirror.getLine(line);
if(lineContent && lineContent.indexOf("@") != -1){//此行有@谁
//处理全部内容中不包含“@”的情况
if(value.indexOf("@") === -1){
//markdown嵌套的链接删掉
// Array.from(atWhoMap.keys()).map(username=>{
// startValue = startValue.replaceAll(`[${username}](/${atWhoMap.get(username)}) `,username);
// })
//替换全部内容
// codemirror.setValue(startValue);
//全部内容已经有要@的列表，但是没有@符号 -> 清空@集合
atWhoLoginList.current = [];
setAtWhoLoginListState([]);
}
//截取第一个字符到光标的内容
const curAfterCont = codemirror.getRange({line,ch:0},{line,ch});
const content = codemirror.getLine(line);
//处理光标所在行 有“@”的情况
if(content && content.indexOf("@") !== -1){
Array.from(atWhoMap.keys()).map(username=>{
//判断lineContent是不是以列表中的某个username结尾
if(lineContent.endsWith(username)){
codemirror.setSelection({line,ch:ch-username.length-1},{line,ch});
return;
//判断content是不是以列表中的某个username结尾
const userCont = `[@${username}](/${atWhoMap.get(username)})`;
//删除空格->选中@用户区域
if(curAfterCont.endsWith(userCont)){
codemirror.setSelection({line,ch:curAfterCont.lastIndexOf("@")-1},{line,ch});
}
//处理有名字但是无@符号，有@但是名字对不上的情况
if(value.indexOf(username)===-1 || value.charAt(value.indexOf(username)-1) !="@"){
//符合任意一种情况->踢掉这个人 不给他发消息
//处理已经有@列表但是value中不包含完整[@用户名](/login)的情况
if(value.indexOf(userCont)===-1){
// //markdown嵌套的链接删掉,删[]、()的情况不用处理，markdown会自动认为不是链接
// //找到[和)的index，将区域内容替换成[]包裹的内容
// //光标之后的内容
// const curLeterCont = codemirror.getRange({line,ch},{line,ch:content.length});
// console.log('光标之后的内容curLeterCont',curLeterCont);
// //删除用户名 -> ]在curLeterCont中
// //删除login -> ]在curAfterCont中
// const a = curAfterCont.lastIndexOf('[');
// const b = curLeterCont.indexOf(')')
// const c = curLeterCont.indexOf(']') === -1 ? curAfterCont.lastIndexOf(']') : curLeterCont.indexOf(']')+curAfterCont.length;
// console.log('[',a,')',b,']',c);
// const newCont = codemirror.getRange({line,ch:a+1},{line,ch:c});
// console.log('newCont',newCont);
// codemirror.replaceRange(newCont,{line,ch:a-1},{line,ch:b+curAfterCont.length+1})
//符合情况->踢掉这个人 不给他发消息
const list = new Set(atWhoLoginList.current);
list.delete(atWhoMap.get(username));
atWhoLoginList.current = Array.from(list);
setAtWhoLoginListState(Array.from(list));
}
})
}else{
//处理所在行没有“@”的情况
Array.from(atWhoMap.keys()).map(username=>{
const userCont = `[@${username}](/${atWhoMap.get(username)})`;
if(value.indexOf(userCont)===-1){
//符合情况->踢掉这个人 不给他发消息
const list = new Set(atWhoLoginList.current);
list.delete(atWhoMap.get(username));
atWhoLoginList.current = Array.from(list);