atwho
This commit is contained in:
parent
2078a044b6
commit
ac4488a907
|
@ -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
|
||||||
|
|
|
@ -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 ? (
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
|
@ -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>}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 () => {
|
||||||
|
|
Loading…
Reference in New Issue