scout666/chat-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: scout666:8bba2d64af87176ca73b9946e8ccd38374095ede
Branches Tags
scout666:main
scout666:xingyy
scout666:dev
scout666:wyfMain-dev
scout666:main-backup
..
compare: scout666:bdf07155c84fc789330a808bf2024c0c91fad5f9
Branches Tags
scout666:xingyy
scout666:dev
scout666:main
scout666:wyfMain-dev
scout666:main-backup

No commits in common. "8bba2d64af87176ca73b9946e8ccd38374095ede" and "bdf07155c84fc789330a808bf2024c0c91fad5f9" have entirely different histories.
8bba2d64af ... bdf07155c8

1 changed files with 82 additions and 145 deletions
Show Stats Expand all files Collapse all files

207
src/components/editor/CustomEditor.vue
View File

@ -174,23 +174,6 @@ const showMentionList = () => {
selectedMentionIndex.value = 0 selectedMentionIndex.value = 0
} }
// 处理鼠标点击选择mention
const handleMentionSelectByMouse = (member) => {
const selection = window.getSelection();
if (selection && selection.rangeCount > 0) {
insertMention(member, selection.getRangeAt(0).cloneRange());
} else {
// 如果没有有效的选区，尝试聚焦编辑器并获取选区
editorRef.value?.focus();
nextTick(() => {
const newSelection = window.getSelection();
if (newSelection && newSelection.rangeCount > 0) {
insertMention(member, newSelection.getRangeAt(0).cloneRange());
}
});
}
};
// 隐藏mention列表 // 隐藏mention列表
const hideMentionList = () => { const hideMentionList = () => {
showMention.value = false showMention.value = false
@ -210,73 +193,66 @@ const updateMentionPosition = (range) => {
} }
// 插入mention // 插入mention
const insertMention = (member, clonedRange) => { const insertMention = (member) => {
console.log('插入mention', member); console.log('插入mention',member)
const selection = window.getSelection(); const selection = window.getSelection()
if (!clonedRange || !selection) return; if (!selection.rangeCount) return
const range = clonedRange; // 使用传入的克隆 range const range = selection.getRangeAt(0)
const textNode = range.startContainer
const offset = range.startOffset
const textNode = range.startContainer; // 找到@符号的位置
const offset = range.startOffset; const textContent = textNode.textContent || ''
const textContent = textNode.nodeType === Node.TEXT_NODE ? textNode.textContent || '' : ''; const atIndex = textContent.lastIndexOf('@', offset - 1)
// @符号的查找逻辑仅当光标在文本节点内且不在开头时才有意义
const atIndex = (textNode.nodeType === Node.TEXT_NODE && offset > 0) ? textContent.lastIndexOf('@', offset - 1) : -1;
const mentionSpan = document.createElement('span'); // 创建mention元素
mentionSpan.className = 'mention'; const mentionSpan = document.createElement('span')
mentionSpan.setAttribute('data-user-id', String(member.id)); mentionSpan.className = 'mention'
mentionSpan.textContent = `@${member.value || member.nickname}`; mentionSpan.setAttribute('data-user-id',String(member.id))
mentionSpan.contentEditable = 'false'; mentionSpan.textContent = `@${member.value || member.nickname}`
mentionSpan.contentEditable = 'false'
if (atIndex !== -1 && textNode.nodeType === Node.TEXT_NODE) { if (atIndex !== -1) {
const parent = textNode.parentNode; // 如果找到@符号，替换文本
if (!parent) return; // Sanity check const beforeText = textContent.substring(0, atIndex)
const afterText = textContent.substring(offset)
// 从@符号开始删除，直到当前光标位置 // 创建新的文本节点
range.setStart(textNode, atIndex); const beforeNode = document.createTextNode(beforeText)
range.setEnd(textNode, offset); const afterNode = document.createTextNode(' ' + afterText)
range.deleteContents();
// 插入 mention 元素 // 替换内容
range.insertNode(mentionSpan); const parent = textNode.parentNode
parent.insertBefore(beforeNode, textNode)
parent.insertBefore(mentionSpan, textNode)
parent.insertBefore(afterNode, textNode)
parent.removeChild(textNode)
} else { } else {
// 如果没有找到@符号，或者光标不在合适的文本节点内，直接在当前光标位置插入 // 如果没有找到@符号，直接在光标位置插入
if (!range.collapsed) { range.deleteContents()
range.deleteContents();
} // 插入@提及元素
range.insertNode(mentionSpan); range.insertNode(mentionSpan)
// 在@提及元素后添加空格
const spaceNode = document.createTextNode(' ')
range.setStartAfter(mentionSpan)
range.insertNode(spaceNode)
// 将光标移动到空格后
range.setStartAfter(spaceNode)
range.collapse(true)
selection.removeAllRanges()
selection.addRange(range)
} }
// 在 mention 之后插入一个空格，并将光标移到空格之后 // 触发输入事件以更新编辑器内容
const spaceNode = document.createTextNode('\u00A0'); // 使用不间断空格 handleInput({ target: editorRef.value })
const currentParent = mentionSpan.parentNode;
if (currentParent) {
// 将空格节点插入到 mentionSpan 之后
if (mentionSpan.nextSibling) {
currentParent.insertBefore(spaceNode, mentionSpan.nextSibling);
} else {
currentParent.appendChild(spaceNode);
}
// 设置光标到空格之后
range.setStartAfter(spaceNode);
range.collapse(true);
} else {
// Fallback: 如果 mentionSpan 没有父节点（理论上不应该发生），则将光标设置在 mentionSpan 之后
range.setStartAfter(mentionSpan);
range.collapse(true);
}
selection.removeAllRanges(); // 隐藏mention列表
selection.addRange(range); hideMentionList()
}
editorRef.value?.focus(); // 确保编辑器在操作后仍有焦点
nextTick(() => {
handleInput({ target: editorRef.value });
hideMentionList();
});
};
// 处理粘贴事件 // 处理粘贴事件
const handlePaste = (event) => { const handlePaste = (event) => {
@ -374,15 +350,12 @@ const handleKeydown = (event) => {
break break
case 'Enter': case 'Enter':
case 'Tab': case 'Tab':
event.preventDefault(); event.preventDefault()
const selectedMember = mentionList.value[selectedMentionIndex.value]; const selectedMember = mentionList.value[selectedMentionIndex.value]
if (selectedMember) { if (selectedMember) {
const selection = window.getSelection(); insertMention(selectedMember)
if (selection && selection.rangeCount > 0) {
insertMention(selectedMember, selection.getRangeAt(0).cloneRange());
}
} }
break; break
case 'Escape': case 'Escape':
hideMentionList() hideMentionList()
break break
@ -425,25 +398,6 @@ const handleKeydown = (event) => {
} }
prevSibling = prevSibling.previousSibling prevSibling = prevSibling.previousSibling
} }
} else {
// 如果光标在文本节点中间或末尾，且当前文本节点只包含空格
// 检查前一个兄弟节点是否是mention
if (!container.textContent.trim()) {
let prevSibling = container.previousSibling
while (prevSibling) {
if (prevSibling.nodeType === Node.ELEMENT_NODE &&
prevSibling.classList &&
prevSibling.classList.contains('mention')) {
targetMention = prevSibling
break
}
// 如果是文本节点且不为空，停止查找
if (prevSibling.nodeType === Node.TEXT_NODE && prevSibling.textContent.trim()) {
break
}
prevSibling = prevSibling.previousSibling
}
}
} }
} else if (container.nodeType === Node.ELEMENT_NODE) { } else if (container.nodeType === Node.ELEMENT_NODE) {
// 如果光标在元素节点中，检查前一个子节点 // 如果光标在元素节点中，检查前一个子节点
@ -976,44 +930,27 @@ const insertImageEmoji = (imgSrc, altText) => {
} }
// 事件监听 // 事件监听
const onSubscribeMention = async (data) => { const onSubscribeMention = (data) => {
const editorNode = editorRef.value; // 确保编辑器获得焦点
if (!editorNode) return; editorRef.value?.focus()
editorNode.focus(); // 如果编辑器为空或者光标不在编辑器内，将光标移动到编辑器末尾
await nextTick(); // 确保焦点已设置 const selection = window.getSelection()
if (!selection.rangeCount || !editorRef.value.contains(selection.anchorNode)) {
let selection = window.getSelection(); const range = document.createRange()
if (!selection || selection.rangeCount === 0) { if (editorRef.value.lastChild) {
const range = document.createRange(); range.setStartAfter(editorRef.value.lastChild)
if (editorNode.lastChild) {
range.setStartAfter(editorNode.lastChild);
} else { } else {
range.setStart(editorNode, 0); range.setStart(editorRef.value, 0)
} }
range.collapse(true); range.collapse(true)
if (selection) selection.removeAllRanges(); selection.removeAllRanges()
selection?.addRange(range); selection.addRange(range)
await nextTick();
selection = window.getSelection();
} else if (!editorNode.contains(selection.anchorNode)) {
const range = document.createRange();
if (editorNode.lastChild) {
range.setStartAfter(editorNode.lastChild);
} else {
range.setStart(editorNode, 0);
}
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
await nextTick();
selection = window.getSelection();
} }
if (selection && selection.rangeCount > 0) { // 插入@提及
insertMention(data, selection.getRangeAt(0).cloneRange()); insertMention(data)
} }
};
const onSubscribeQuote = (data) => { const onSubscribeQuote = (data) => {
// 保存引用数据，但不保存到草稿中 // 保存引用数据，但不保存到草稿中
@ -1506,7 +1443,7 @@ const handleEditorClick = (event) => {
<n-icon size="18" class="icon" :component="nav.icon" /> <n-icon size="18" class="icon" :component="nav.icon" />
<p class="tip-title">{{ nav.title }}</p> <p class="tip-title">{{ nav.title }}</p>
</div> </div>
<n-button class="w-80px h-30px ml-auto" type="primary" @click="sendMessage"> <n-button class="w-80px h-30px ml-auto" type="primary">
<template #icon> <template #icon>
<n-icon> <n-icon>
<IosSend /> <IosSend />
@ -1558,7 +1495,7 @@ const handleEditorClick = (event) => {
:key="member.user_id || member.id" :key="member.user_id || member.id"
class="cursor-pointer px-14px h-42px" class="cursor-pointer px-14px h-42px"
:class="{ 'bg-#EEE9F9': index === selectedMentionIndex }" :class="{ 'bg-#EEE9F9': index === selectedMentionIndex }"
@mousedown.prevent="handleMentionSelectByMouse(member)" @mousedown.prevent="insertMention(member)"
@mouseover="selectedMentionIndex = index" @mouseover="selectedMentionIndex = index"
> >
<div class="flex items-center border-b-1px border-b-solid border-b-#F8F8F8 h-full"> <div class="flex items-center border-b-1px border-b-solid border-b-#F8F8F8 h-full">