This commit is contained in:
谢思 2021-11-08 15:14:04 +08:00
parent 2078a044b6
commit ac4488a907
6 changed files with 38 additions and 15 deletions

View File

@ -285,6 +285,8 @@ class MergeForm extends Component {
onChange={this.onContentChange} onChange={this.onContentChange}
isCanAtme = {true} isCanAtme = {true}
changeAtWhoLoginList = {this.changeAtWhoLoginList} changeAtWhoLoginList = {this.changeAtWhoLoginList}
owner = {owner}
projectsId = {projectsId}
></MDEditor> ></MDEditor>
<p className="clearfix mt20"> <p className="clearfix mt20">
<Button <Button

View File

@ -342,6 +342,8 @@ class order_form extends Component {
onChange={this.onContentChange} onChange={this.onContentChange}
isCanAtme = {true} isCanAtme = {true}
changeAtWhoLoginList = {this.changeAtWhoLoginList} changeAtWhoLoginList = {this.changeAtWhoLoginList}
owner = {owner}
projectsId = {projectsId}
></MDEditor> ></MDEditor>
</div> </div>
{get_attachments && get_attachments.length > 0 ? ( {get_attachments && get_attachments.length > 0 ? (

View File

@ -27,7 +27,7 @@ class ForkUsers extends Component {
}); });
const { projectsId , owner } = this.props.match.params; const { projectsId , owner } = this.props.match.params;
const url = `/${owner}/${projectsId}/members.json`; const url = `/${owner}/${projectsId}/forks.json`;
axios axios
.get(url, { .get(url, {
params: { params: {

View File

@ -65,7 +65,7 @@ class comments extends Component {
atWhoLoginList, atWhoLoginList,
} = this.state; } = this.state;
const { owner } = this.props.match.params;
const url = `/issues/${orderId}/journals.json`; const url = `/issues/${orderId}/journals.json`;
axios axios
@ -320,6 +320,7 @@ class comments extends Component {
new_journal_id, new_journal_id,
} = this.state; } = this.state;
const { current_user, only_show_content } = this.props; const { current_user, only_show_content } = this.props;
const { projectsId ,owner } = this.props.match.params;
const new_comment = (is_reply, item_id) => { const new_comment = (is_reply, item_id) => {
return ( return (
@ -353,6 +354,8 @@ class comments extends Component {
} }
isCanAtme = {true} isCanAtme = {true}
changeAtWhoLoginList = {this.changeAtWhoLoginList} changeAtWhoLoginList = {this.changeAtWhoLoginList}
owner = {owner}
projectsId = {projectsId}
></MDEditor> ></MDEditor>
<p className="quillFlag"> <p className="quillFlag">
{quillFlag && <span className="">请输入评论内容</span>} {quillFlag && <span className="">请输入评论内容</span>}

View File

@ -35,6 +35,11 @@
border-radius:50%; border-radius:50%;
margin-right: 10px; margin-right: 10px;
} }
.at_who span{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.blur_atWho{ .blur_atWho{
position: absolute; position: absolute;
top: -100px; top: -100px;

View File

@ -74,7 +74,7 @@ function md_elocalStorage(editor, mdu, id) {
return tid return tid
} }
export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, className = '', noStorage = false, imageExpand = true, placeholder = '', width = '100%', height = 400, initValue = '', emoji, watch, showNullButton = false, showResizeBar = false, startInit = true , forMember = true , isCanAtme = false ,changeAtWhoLoginList }) => { export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, className = '', noStorage = false, imageExpand = true, placeholder = '', width = '100%', height = 400, initValue = '', emoji, watch, showNullButton = false, showResizeBar = false, startInit = true , forMember = true , isCanAtme = false , changeAtWhoLoginList, owner, projectsId }) => {
const editorEl = useRef(); const editorEl = useRef();
const resizeBarEl = useRef(); const resizeBarEl = useRef();
@ -82,17 +82,18 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
const [atWhoVisible, setAtWhoVisible] = useState(false); const [atWhoVisible, setAtWhoVisible] = useState(false);
const [atWhoLoginListState, setAtWhoLoginListState] = useState([]); const [atWhoLoginListState, setAtWhoLoginListState] = useState([]);
const [users, setUsers] = useState([]); const [users, setUsers] = useState([]);
//用户输入的@之后的搜索词
const [search, setSeacrch] = useState(undefined);
const atWhoLoginList = useRef([]); const atWhoLoginList = useRef([]);
const containerId = `mdEditor_${mdID}`; const containerId = `mdEditor_${mdID}`;
const editorBodyId = `mdEditors_${mdID}`; const editorBodyId = `mdEditors_${mdID}`;
const tipId = `e_tips_mdEditor_${mdID}`; const tipId = `e_tips_mdEditor_${mdID}`;
//todo需要替换成可@用户列表接口,由于forge接口名称冲突src\forge\UsersList\fork_users.js接口/members.json需要换成/forks.json
useEffect(()=>{ useEffect(()=>{
isCanAtme && axios.get('/users/list.json',{ isCanAtme && axios.get(`/${owner}/${projectsId}/members.json`,{
params: { // params: {
search: 'admin', // search: 'admin',
}, // },
}).then(response=>{ }).then(response=>{
if(response && response.status === 200){ if(response && response.status === 200){
setUsers(response.data.users); setUsers(response.data.users);
@ -147,10 +148,13 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
//markdown编辑器中输入的键盘监听事件 //markdown编辑器中输入的键盘监听事件
function mdKeyDown(e){ function mdKeyDown(e){
console.log("11111111111"); const cm = editorInstance.cm;
//获取鼠标所在行的行数和ch
const line = cm.doc.getCursor().line;//行
atWhoVisible && console.log('cmaa',cm.getLine(line));
console.log("markdown编辑器--------键盘监听事件");
// document.onkeydown = e=>{ // document.onkeydown = e=>{
if (e.shiftKey && e.key === "@") { if (e.shiftKey && e.key === "@") {
console.log("markdown编辑器的鼠标事件",e);
// 输入@键后在对应的位置显示可选的项目成员 // 输入@键后在对应的位置显示可选的项目成员
setAtWhoVisible(true); setAtWhoVisible(true);
//获取光标位置 //获取光标位置
@ -161,8 +165,6 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
//将第一个用户默认选中 //将第一个用户默认选中
const at_who_divs = document.getElementsByClassName("at_who"); const at_who_divs = document.getElementsByClassName("at_who");
at_who_divs[0].className = "at_who active"; at_who_divs[0].className = "at_who active";
} else {
setAtWhoVisible(false);
} }
//处理本来@了某人 -> 删掉 -> 撤回 的情况 //处理本来@了某人 -> 删掉 -> 撤回 的情况
if(e.ctrlKey && e.code === "KeyZ" && users.length != 0){ if(e.ctrlKey && e.code === "KeyZ" && users.length != 0){
@ -287,7 +289,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
},[]) },[])
useEffect(()=>{ useEffect(()=>{
console.log('@谁列表发生变化,atWhoLoginList.current',atWhoLoginList.current,'atWhoLoginListState: ',atWhoLoginListState); console.log('@谁列表发生变化,atWhoLoginList.current',atWhoLoginList.current);
changeAtWhoLoginList && changeAtWhoLoginList(atWhoLoginListState); changeAtWhoLoginList && changeAtWhoLoginList(atWhoLoginListState);
},[atWhoLoginListState]) },[atWhoLoginListState])
@ -307,6 +309,10 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
useEffect(()=>{ useEffect(()=>{
//当atWhoVisible为true的时候失焦监听上下和enter键 //当atWhoVisible为true的时候失焦监听上下和enter键
if(atWhoVisible){ if(atWhoVisible){
const cm = editorInstance.cm;
//获取鼠标所在行的行数和ch
const line = cm.doc.getCursor().line;//行
// console.log('cmaa',cm.getLine(line));
// document.activeElement.id !== "blur_atWho" && document.getElementById("blur_atWho").focus(); // document.activeElement.id !== "blur_atWho" && document.getElementById("blur_atWho").focus();
// const atWhoDivs = document.getElementsByClassName("at_who"); // const atWhoDivs = document.getElementsByClassName("at_who");
// let index = 0; // let index = 0;
@ -314,7 +320,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
// atWhoDivs[i].className === "at_who active" && (index = i); // atWhoDivs[i].className === "at_who active" && (index = i);
// } // }
// const atWhoListDiv = document.getElementById("at_who_list"); // const atWhoListDiv = document.getElementById("at_who_list");
document.addEventListener("keydown",atWhoKeyDown); // document.addEventListener("keydown",atWhoKeyDown);
} }
},[atWhoVisible]) },[atWhoVisible])
@ -416,7 +422,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
tid = md_elocalStorage(editorInstance, `MDEditor__${containerId}`, containerId) tid = md_elocalStorage(editorInstance, `MDEditor__${containerId}`, containerId)
} }
//isCanAtme:只有issue和合并请求以及评论部分可以@他人操作 //isCanAtme:只有issue和合并请求以及评论部分可以@他人操作
//当光标或选中内容时触发绑定@事件 //绑定@事件
isCanAtme && editorInstance.cm.on("focus", () => { isCanAtme && editorInstance.cm.on("focus", () => {
document.addEventListener("keydown", mdKeyDown); document.addEventListener("keydown", mdKeyDown);
}); });
@ -425,6 +431,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
}); });
editorInstance.cm.on("change", (cm) => { editorInstance.cm.on("change", (cm) => {
onChange && onChange(cm.getValue()); onChange && onChange(cm.getValue());
//当内容发生改变并且有已@列表时
if(atWhoLoginList.current.length != 0){ if(atWhoLoginList.current.length != 0){
const codemirror = editorInstance.cm; const codemirror = editorInstance.cm;
let value = codemirror.getValue(); let value = codemirror.getValue();
@ -480,6 +487,10 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
}) })
} }
} }
// const cm = editorInstance.cm;
//获取鼠标所在行的行数和ch
const line = cmEl.doc.getCursor().line;//行
atWhoVisible && console.log('cmaa',cmEl.getLine(line));
}); });
ro = onLayout() ro = onLayout()
return () => { return () => {