From a94d02bb8a8232bc94905a38c7a0edba645bf2cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=A2=E6=80=9D?= <2897217417@qq.com> Date: Thu, 11 Nov 2021 11:31:42 +0800 Subject: [PATCH] =?UTF-8?q?atwo=20markdown=E6=B8=B2=E6=9F=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tpm/challengesnew/tpm-md-editor.js | 88 ++++++++++++++----- 1 file changed, 65 insertions(+), 23 deletions(-) diff --git a/src/modules/tpm/challengesnew/tpm-md-editor.js b/src/modules/tpm/challengesnew/tpm-md-editor.js index 988e9381..46c01ec3 100644 --- a/src/modules/tpm/challengesnew/tpm-md-editor.js +++ b/src/modules/tpm/challengesnew/tpm-md-editor.js @@ -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);