') { + clearEditor(); } - }) - - - clearEditor() + return; + } + + const messageToSend = { + items: finalItems.length > 0 ? finalItems : [{ type: 1, content: '' }], + mentionUids: parsedData.mentionUids || [], + mentions: (parsedData.mentionUids || []).map(uid => { + const member = mentionList.value.find(m => m.id === uid); + return { atid: uid, name: member ? member.nickname : '' }; + }), + quoteId: parsedData.quoteId || null + }; + + if (messageToSend.quoteId && quoteData.value && quoteData.value.id === messageToSend.quoteId) { + messageToSend.quote = { ...quoteData.value }; + } else if (messageToSend.quoteId) { + console.warn('sendMessage: Quote ID from parsed content exists, but no matching quoteData.value or ID mismatch.'); + // Decide if sending without full quote object is acceptable or if quoteId should be removed + // For now, we keep quoteId but messageToSend.quote will not be populated with full details + } else { + delete messageToSend.quote; // No valid quoteId, so no quote object + } + + // Determine event type based on content + const isSingleImageNoQuote = messageToSend.items.length === 1 && messageToSend.items[0].type === 3 && !messageToSend.quote; + const isSingleFileNoQuote = messageToSend.items.length === 1 && messageToSend.items[0].type === 4 && !messageToSend.quote; + + if (isSingleImageNoQuote) { + const imgItem = messageToSend.items[0]; + emit('editor-event', emitCall('image_event', { + url: imgItem.content, + width: imgItem.width || 0, + height: imgItem.height || 0, + size: imgItem.size || 0 + })); + } else if (isSingleFileNoQuote) { + // Assuming a 'file_event' or similar for single files + // If not, this will also go to 'text_event' + const fileItem = messageToSend.items[0]; + emit('editor-event', emitCall('file_event', { // Placeholder for actual file event + url: fileItem.content, + name: fileItem.name, + size: fileItem.size + })); + } else { + // All other cases: text, mixed content, or items with quotes + emit('editor-event', emitCall('text_event', messageToSend)); + } + + clearEditor(); } const parseEditorContent = () => { - const items = [] - const mentionUids = [] - - - const tempDiv = document.createElement('div') - tempDiv.innerHTML = editorHtml.value - - - const quoteElements = tempDiv.querySelectorAll('.editor-quote') - const hasQuote = quoteElements.length > 0 && quoteData.value - const quoteId = hasQuote ? quoteData.value.id || '' : '' - - - quoteElements.forEach(quote => quote.remove()) - - let textContent = '' - - - const processNode = (node) => { + const items = []; + const mentionUids = new Set(); + let parsedQuoteId = null; + + const editorNode = editorRef.value; + if (!editorNode) { + return { items: [{ type: 1, content: '' }], mentionUids: [], quoteId: null }; + } + + const tempDiv = document.createElement('div'); + tempDiv.innerHTML = editorHtml.value; // Use editorHtml.value as the source of truth for parsing + + const quoteElement = tempDiv.querySelector('.editor-quote'); + if (quoteElement && quoteData.value && quoteData.value.id) { + parsedQuoteId = quoteData.value.id; + quoteElement.remove(); // Remove from tempDiv to avoid parsing its content + } + + let currentTextBuffer = ''; + + const flushTextBufferIfNeeded = () => { + // Only push non-empty text or if it's part of a larger structure (e.g. before an image) + // Actual trimming and empty checks will be done in sendMessage + if (currentTextBuffer) { + items.push({ type: 1, content: currentTextBuffer }); + } + currentTextBuffer = ''; + }; + + const processNodeRecursively = (node) => { if (node.nodeType === Node.TEXT_NODE) { - textContent += node.textContent; + currentTextBuffer += node.textContent; return; } if (node.nodeType !== Node.ELEMENT_NODE) return; - if (node.tagName === 'BR') { - textContent += '\n'; - } else if (node.classList.contains('mention')) { - const userId = node.getAttribute('data-user-id'); - if (userId) { - mentionUids.push(Number(userId)); - } - textContent += node.textContent; - } else if (node.tagName === 'IMG') { - processImage(node); - } else if (node.classList.contains('emoji')) { - textContent += node.getAttribute('alt') || node.textContent; - } else if (node.classList.contains('editor-file')) { - processFile(node); - } else if (node.childNodes.length) { - Array.from(node.childNodes).forEach(processNode); - } else { - textContent += node.textContent; + switch (node.tagName) { + case 'BR': + currentTextBuffer += '\n'; // Represent
as newline in text content + break; + case 'IMG': + flushTextBufferIfNeeded(); + const src = node.getAttribute('src'); + const alt = node.getAttribute('alt'); + const isEmojiPic = node.classList.contains('editor-emoji'); + const isTextEmojiPlaceholder = node.classList.contains('emoji'); // e.g.
') { + editorRef.value.innerHTML = ''; + } + }); + } +}; -const insertImage = (src, width, height) => { - const selection = window.getSelection() - if (!selection.rangeCount) return - - const range = selection.getRangeAt(0) - - - const img = document.createElement('img') - img.src = src - img.className = 'editor-image' - img.alt = '图片' - img.style.maxHeight = '150px' - img.style.maxWidth = '150px' - img.style.objectFit = 'contain' - - - if (width) img.setAttribute('data-original-width', width) - if (height) img.setAttribute('data-original-height', height) - - range.deleteContents() - range.insertNode(img) - range.setStartAfter(img) - range.collapse(true) - selection.removeAllRanges() - selection.addRange(range) - - editorRef.value.focus() - handleInput({ target: editorRef.value }) -} +const insertImage = (fileOrSrc, isUploaded = false, uploadedUrl = '') => { + if (!editorRef.value) return; + + const img = document.createElement('img'); + img.className = 'editor-image'; // Keep existing class if it's styled + img.alt = '图片'; // Default alt text + img.style.maxWidth = '200px'; // Standardized max width + img.style.maxHeight = '200px'; // Standardized max height + img.style.borderRadius = '4px'; + img.style.objectFit = 'contain'; + img.style.margin = '5px'; + + const setupAndInsert = (imageUrl, naturalWidth, naturalHeight) => { + img.src = imageUrl; + if (naturalWidth) img.setAttribute('data-original-width', naturalWidth); + if (naturalHeight) img.setAttribute('data-original-height', naturalHeight); + if (isUploaded && uploadedUrl) { + img.setAttribute('data-uploaded-url', uploadedUrl); + img.setAttribute('data-status', 'uploaded'); + } else { + img.setAttribute('data-status', 'local-preview'); + } + + const selection = window.getSelection(); + let range; + + if (selection && selection.rangeCount > 0) { + range = selection.getRangeAt(0); + if (!editorRef.value.contains(range.commonAncestorContainer)) { + editorRef.value.focus(); + range = document.createRange(); + range.selectNodeContents(editorRef.value); + range.collapse(false); // End of editor + } + } else { + editorRef.value.focus(); + range = document.createRange(); + range.selectNodeContents(editorRef.value); + range.collapse(false); // End of editor + } + + range.deleteContents(); + range.insertNode(img); + + // Add a space after the image for better typing experience + const spaceNode = document.createTextNode('\u00A0'); // Non-breaking space + range.insertNode(spaceNode); + range.setStartAfter(spaceNode); + range.collapse(true); + selection.removeAllRanges(); + selection.addRange(range); + + editorRef.value.focus(); + handleInput(); // Use the global handleInput without passing event args + }; + + if (typeof fileOrSrc === 'string') { // It's a URL + const tempImageForSize = new Image(); + tempImageForSize.onload = () => { + setupAndInsert(fileOrSrc, tempImageForSize.naturalWidth, tempImageForSize.naturalHeight); + }; + tempImageForSize.onerror = () => { + console.warn('Failed to load image from URL for size calculation:', fileOrSrc); + setupAndInsert(fileOrSrc); // Insert even if size calculation fails + }; + tempImageForSize.src = fileOrSrc; + } else if (fileOrSrc instanceof File && fileOrSrc.type.startsWith('image/')) { // It's a File object + const reader = new FileReader(); + reader.onload = (e) => { + const dataUrl = e.target.result; + const tempImageForSize = new Image(); + tempImageForSize.onload = () => { + setupAndInsert(dataUrl, tempImageForSize.naturalWidth, tempImageForSize.naturalHeight); + }; + tempImageForSize.onerror = () => { + console.warn('Failed to load image from FileReader for size calculation.'); + setupAndInsert(dataUrl); // Insert even if size calculation fails + }; + tempImageForSize.src = dataUrl; + }; + reader.onerror = (error) => { + console.error('FileReader error:', error); + }; + reader.readAsDataURL(fileOrSrc); + } else { + console.warn('insertImage: Invalid file object or URL provided.'); + } +}; const formatFileSize = (size) => { @@ -887,50 +895,136 @@ const formatFileSize = (size) => { } } -const onUploadSendImg=async (eventFile)=>{ - for (const file of eventFile.target.files) { - const form = new FormData(); - form.append('file', file); - form.append("source", "fonchain-chat"); +const onUploadSendImg = async (event) => { + if (!event.target || !event.target.files) return; + const files = event.target.files; - const res=await uploadImg(form) - if(res.status===0){ - const data={ - height:0, - width:0, - size:10000, - url:res.data.ori_url, + for (const file of files) { + if (!file.type.startsWith('image/')) { + console.warn('Invalid file type for image upload:', file.type); + continue; + } + + // Optimistically insert a local preview using the already optimized insertImage function + insertImage(file, false); // isUploaded = false, uploadedUrl = '' + + const formData = new FormData(); + formData.append('file', file); + formData.append('source', 'fonchain-chat'); // Consider making 'source' configurable + + try { + const res = await uploadImg(formData); + if (res && res.status === 0 && res.data && res.data.ori_url) { + // Successfully uploaded. Update the preview image with the server URL. + // Find the corresponding preview image. This is a simplified approach. + // A more robust method would involve unique IDs for each preview. + const previewImages = editorRef.value.querySelectorAll('img[data-status="local-preview"][src^="data:image"]:not([data-uploaded-url])'); + let replacedPreview = false; + if (previewImages.length > 0) { + // Try to find the correct preview. Assuming the last one is the most recent. + const lastPreviewImage = previewImages[previewImages.length - 1]; + if (lastPreviewImage && lastPreviewImage.src.startsWith('data:image')) { + lastPreviewImage.src = res.data.ori_url; + lastPreviewImage.setAttribute('data-uploaded-url', res.data.ori_url); + lastPreviewImage.setAttribute('data-status', 'uploaded'); + if (res.data.width) lastPreviewImage.setAttribute('data-original-width', res.data.width); + if (res.data.height) lastPreviewImage.setAttribute('data-original-height', res.data.height); + replacedPreview = true; + handleInput(); // Update editor state after modifying the image + } } - emit( - 'editor-event', - emitCall( - 'image_event', - data - ) - ) - } + + if (!replacedPreview) { + // If preview wasn't found/replaced, insert the uploaded image anew. + insertImage(res.data.ori_url, true, res.data.ori_url); + } + + // Emit an event that an image has been uploaded and inserted/updated + // This event is for the parent component, if it needs to react to the final image URL. + // The original emitCall('image_event', data) might be for sending the message immediately. + // Clarify if this function should *send* the image or just *insert* it for later sending. + // For now, let's assume the original intent was to emit an event that could lead to sending. + emit('editor-event', emitCall('image_event', { + url: res.data.ori_url, + width: res.data.width || 0, + height: res.data.height || 0, + size: file.size + })); + + } else { + console.error('Image upload failed or received invalid response:', res); + // Mark preview as failed + const previewImages = editorRef.value.querySelectorAll('img[data-status="local-preview"][src^="data:image"]:not([data-uploaded-url])'); + if (previewImages.length > 0) { + const lastPreviewImage = previewImages[previewImages.length -1]; + if(lastPreviewImage) { + lastPreviewImage.style.border = '2px dashed red'; + lastPreviewImage.title = 'Upload failed'; + } + } + } + } catch (error) { + console.error('Error during image upload process:', error); + const previewImages = editorRef.value.querySelectorAll('img[data-status="local-preview"][src^="data:image"]:not([data-uploaded-url])'); + if (previewImages.length > 0) { + const lastPreviewImage = previewImages[previewImages.length -1]; + if(lastPreviewImage) { + lastPreviewImage.style.border = '2px dashed red'; + lastPreviewImage.title = 'Upload error'; + } + } + } } -} + if (event.target) event.target.value = ''; // Reset file input +}; async function onUploadFile(e) { - const file = e.target.files[0] - if (!file) return - - - e.target.value = null - - if (file.type.indexOf('image/') === 0) { - - emit('editor-event', emitCall('image_event', file)) + if (!e.target || !e.target.files || e.target.files.length === 0) return; + const file = e.target.files[0]; - return - } + // It's good practice to reset the input value immediately to allow re-selecting the same file + e.target.value = null; - if (file.type.indexOf('video/') === 0) { - - emit('editor-event', emitCall('video_event', file)) + const fileType = file.type; + let eventName = ''; + + if (fileType.startsWith('image/')) { + eventName = 'image_event'; + // For images, we might want to use onUploadSendImg to handle preview and upload directly + // Or, if this function is meant to be generic and just emit, then this is fine. + // However, onUploadSendImg seems more specialized for editor image insertion. + // Let's assume this onUploadFile is for a generic file picker that then emits. + // If direct insertion is needed, call appropriate insert function or onUploadSendImg. + // For consistency, if an image is chosen via this generic picker, and we want it in editor, + // we should probably call onUploadSendImg or insertImage. + // For now, sticking to emitting the raw file for parent to handle. + emit('editor-event', emitCall(eventName, file)); + } else if (fileType.startsWith('video/')) { + eventName = 'video_event'; + emit('editor-event', emitCall(eventName, file)); } else { - - emit('editor-event', emitCall('file_event', file)) + eventName = 'file_event'; + // If we want to insert a representation of the file into the editor before sending: + // 1. Upload the file + // 2. On success, insert a file node using a dedicated `insertFileNode` function. + // For now, just emitting the raw file. + emit('editor-event', emitCall(eventName, file)); + // Example of how one might handle direct insertion after upload: + /* + const formData = new FormData(); + formData.append('file', file); + formData.append('source', 'fonchain-chat'); + try { + // Assuming a generic 'uploadActualFile' service exists + const res = await uploadActualFile(formData); + if (res && res.status === 0 && res.data && res.data.url) { + insertFileNode(res.data.url, file.name, file.size); // New function needed + } else { + console.error('File upload failed:', res); + } + } catch (error) { + console.error('Error uploading file:', error); + } + */ } } @@ -968,98 +1062,142 @@ const onEmoticonEvent = (emoji) => { const insertTextEmoji = (emojiText) => { - const editor = editorRef.value - if (!editor) return + if (!editorRef.value || typeof emojiText !== 'string') return; - editor.focus() - const selection = window.getSelection() - if (!selection.rangeCount) return + const editor = editorRef.value; + editor.focus(); - const range = selection.getRangeAt(0) - range.deleteContents() + const selection = window.getSelection(); + let range; - const textNode = document.createTextNode(emojiText) - range.insertNode(textNode) + if (selection && selection.rangeCount > 0) { + range = selection.getRangeAt(0); + if (!editor.contains(range.commonAncestorContainer)) { + // Range is outside the editor, reset to end of editor + range = document.createRange(); + range.selectNodeContents(editor); + range.collapse(false); + } + } else { + // No selection, create range at the end of the editor + range = document.createRange(); + range.selectNodeContents(editor); + range.collapse(false); + } - - range.setStartAfter(textNode) - range.collapse(true) - selection.removeAllRanges() - selection.addRange(range) + range.deleteContents(); // Clear any selected text or prepare cursor position - - handleInput({ target: editor }) -} + const textNode = document.createTextNode(emojiText); + range.insertNode(textNode); + + // Move cursor after the inserted text node + range.setStartAfter(textNode); + range.collapse(true); + selection.removeAllRanges(); // Deselect previous range + selection.addRange(range); // Apply new range + + handleInput(); // Update editor state +}; const insertImageEmoji = (imgSrc, altText) => { - const editor = editorRef.value - if (!editor) return + if (!editorRef.value || !imgSrc) return; - editor.focus() - const selection = window.getSelection() - if (!selection.rangeCount) return + const editor = editorRef.value; + editor.focus(); - const range = selection.getRangeAt(0) - range.deleteContents() + const selection = window.getSelection(); + let range; - const img = document.createElement('img') - img.src = imgSrc - img.alt = altText - img.className = 'editor-emoji' - - + if (selection && selection.rangeCount > 0) { + range = selection.getRangeAt(0); + if (!editor.contains(range.commonAncestorContainer)) { + range = document.createRange(); + range.selectNodeContents(editor); + range.collapse(false); // Move to the end + } + } else { + range = document.createRange(); + range.selectNodeContents(editor); + range.collapse(false); // Move to the end + } + + range.deleteContents(); // Clear any selected text or prepare cursor position + + const img = document.createElement('img'); + img.src = imgSrc; + img.alt = altText || 'emoji'; // Provide a default alt text + img.className = 'editor-emoji'; // Class for styling + img.setAttribute('data-role', 'emoji'); // For easier identification + // Consider setting a standard size for emoji images via CSS or attributes + // img.style.width = '20px'; + // img.style.height = '20px'; + // img.style.verticalAlign = 'middle'; + + range.insertNode(img); + + // Insert a space after the emoji for better typing experience + const spaceNode = document.createTextNode('\u00A0'); // Non-breaking space, or use ' ' + range.setStartAfter(img); + range.collapse(true); + range.insertNode(spaceNode); + + // Move cursor after the space + range.setStartAfter(spaceNode); + range.collapse(true); + if (selection) { + selection.removeAllRanges(); + selection.addRange(range); + } - range.insertNode(img) - - - range.setStartAfter(img) - range.collapse(true) - selection.removeAllRanges() - selection.addRange(range) - - - handleInput({ target: editor }) -} + handleInput(); // Update editor state +}; const onSubscribeMention = async (data) => { + if (!editorRef.value || !data) return; const editorNode = editorRef.value; - if (!editorNode) return; editorNode.focus(); - await nextTick(); + await nextTick(); // Ensure focus and DOM updates are processed let selection = window.getSelection(); - if (!selection || selection.rangeCount === 0) { - const range = document.createRange(); - if (editorNode.lastChild) { - range.setStartAfter(editorNode.lastChild); - } else { - range.setStart(editorNode, 0); - } - range.collapse(true); - if (selection) selection.removeAllRanges(); - 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(); - } + let range; if (selection && selection.rangeCount > 0) { - insertMention(data, selection.getRangeAt(0).cloneRange()); + range = selection.getRangeAt(0); + if (!editorNode.contains(range.commonAncestorContainer)) { + // If current selection is outside editor, move to the end of the editor + range = document.createRange(); + range.selectNodeContents(editorNode); + range.collapse(false); // false to collapse to the end + } + } else { + // No selection or invalid selection, create a new range at the end of the editor + range = document.createRange(); + range.selectNodeContents(editorNode); + range.collapse(false); + } + + // Ensure selection is updated with the correct range + if (selection) { + selection.removeAllRanges(); + selection.addRange(range); + insertMention(data, range); // Pass the live range to insertMention + } else { + // Fallback if selection is null for some reason (should be rare) + const fallbackRange = document.createRange(); + fallbackRange.selectNodeContents(editorNode); + fallbackRange.collapse(false); + const newSelection = window.getSelection(); // Attempt to re-get selection + if (newSelection){ + newSelection.removeAllRanges(); + newSelection.addRange(fallbackRange); + insertMention(data, fallbackRange); + } else { + console.error("Could not get window selection to insert mention."); + } } }; @@ -1112,148 +1250,146 @@ const handleDeleteQuote = function(e) { }; const onSubscribeQuote = (data) => { - - quoteData.value = data - - - const editor = editorRef.value - if (!editor) return - - - const existingQuotes = editor.querySelectorAll('.editor-quote') - existingQuotes.forEach(quote => quote.remove()) - - - const selection = window.getSelection() - const savedRange = selection.rangeCount > 0 ? selection.getRangeAt(0).cloneRange() : null - const hasContent = editor.textContent.trim().length > 0 - - - const quoteElement = document.createElement('div') - quoteElement.className = 'editor-quote' - quoteElement.contentEditable = 'false' - - - quoteElement.innerHTML = ` -
- 
` : ''}
- ${data.describe ? `
- ${data.title}
- ${data.image ? `${data.describe}
` : ''}
- ×
- `
-
-
+ if (!editorRef.value || !data) return;
+ quoteData.value = data;
+ const editor = editorRef.value;
+
+ // Remove existing quotes
+ editor.querySelectorAll('.editor-quote').forEach(quote => quote.remove());
+
+ // Save current selection if it's within the editor
+ const selection = window.getSelection();
+ let savedRange = null;
+ if (selection && selection.rangeCount > 0) {
+ const currentRange = selection.getRangeAt(0);
+ if (editor.contains(currentRange.commonAncestorContainer)) {
+ savedRange = currentRange.cloneRange();
+ }
+ }
+
+ // Create quote element safely
+ const quoteElement = document.createElement('div');
+ quoteElement.className = 'editor-quote';
+ quoteElement.contentEditable = 'false';
+
+ const wrapper = document.createElement('div');
+ wrapper.className = 'quote-content-wrapper';
+ const titleDiv = document.createElement('div');
+ titleDiv.className = 'quote-title';
+ titleDiv.textContent = data.title || ' ';
+ wrapper.appendChild(titleDiv);
+ if (data.image) {
+ const imageDiv = document.createElement('div');
+ imageDiv.className = 'quote-image';
+ const img = document.createElement('img');
+ img.src = data.image;
+ img.alt = '引用图片';
+ imageDiv.appendChild(img);
+ wrapper.appendChild(imageDiv);
+ }
+ if (data.describe) {
+ const contentDiv = document.createElement('div');
+ contentDiv.className = 'quote-content';
+ contentDiv.textContent = data.describe;
+ wrapper.appendChild(contentDiv);
+ }
+ quoteElement.appendChild(wrapper);
+ const closeButton = document.createElement('div');
+ closeButton.className = 'quote-close';
+ closeButton.textContent = '×';
+ quoteElement.appendChild(closeButton);
+
+ // Insert quote at the beginning
if (editor.firstChild) {
- editor.insertBefore(quoteElement, editor.firstChild)
+ editor.insertBefore(quoteElement, editor.firstChild);
} else {
- editor.appendChild(quoteElement)
+ editor.appendChild(quoteElement);
}
-
-
- quoteElement.addEventListener('click', (e) => {
-
- const closeButton = e.target.classList?.contains('quote-close') ? e.target : e.target.closest('.quote-close')
-
-
- e.stopPropagation()
-
- if (closeButton) {
-
- quoteElement.remove()
- quoteData.value = null
-
-
- editorContent.value = editor.textContent || ''
- editorHtml.value = editor.innerHTML || ''
-
-
- nextTick(() => editor.focus())
- } else {
-
- const selection = window.getSelection()
- const range = document.createRange()
- range.setStartAfter(quoteElement)
- range.collapse(true)
- selection.removeAllRanges()
- selection.addRange(range)
-
-
- editor.focus()
- }
- })
-
- // 使用顶层作用域定义的handleDeleteQuote函数
- editor.addEventListener('keydown', handleDeleteQuote);
-
-
-setTimeout(() => {
-
- if (!editor.childNodes.length || (editor.childNodes.length === 1 && editor.childNodes[0] === quoteElement)) {
-
- const textNode = document.createTextNode('\u200B');
- editor.appendChild(textNode);
- }
-
-
- const currentHtml = editor.innerHTML;
- editor.innerHTML = currentHtml;
-
-
- const newQuoteElement = editor.querySelector('.editor-quote');
-
- editor.focus();
- const newSelection = window.getSelection();
- const newRange = document.createRange();
-
-
- if (newQuoteElement) {
-
- let nextNode = newQuoteElement.nextSibling;
- if (nextNode && nextNode.nodeType === 3) {
- newRange.setStart(nextNode, 0);
- } else if (nextNode) {
- newRange.setStartBefore(nextNode);
- } else {
- newRange.setStartAfter(newQuoteElement);
- }
+
+ // Ensure there's a node (like a zero-width space) after the quote for cursor placement
+ let nodeToPlaceCursorAfter = quoteElement;
+ const zeroWidthSpace = document.createTextNode('\u200B');
+ if (editor.lastChild === quoteElement || !quoteElement.nextSibling) {
+ editor.appendChild(zeroWidthSpace);
+ nodeToPlaceCursorAfter = zeroWidthSpace;
} else {
-
- if (editor.firstChild) {
- newRange.setStartBefore(editor.firstChild);
- } else {
- newRange.setStart(editor, 0);
- }
+ editor.insertBefore(zeroWidthSpace, quoteElement.nextSibling);
+ nodeToPlaceCursorAfter = zeroWidthSpace;
}
-
- newRange.collapse(true);
- newSelection.removeAllRanges();
- newSelection.addRange(newRange);
-
-
- editor.scrollTop = editor.scrollHeight;
-
-
- handleInput({ target: editor });
-
-
+
+ const handleQuoteClick = (e) => {
+ e.stopPropagation();
+ if (e.target === closeButton || closeButton.contains(e.target)) {
+ quoteElement.remove();
+ if (nodeToPlaceCursorAfter.parentNode === editor && nodeToPlaceCursorAfter.nodeValue === '\u200B') {
+ nodeToPlaceCursorAfter.remove();
+ }
+ quoteData.value = null;
+ editor.removeEventListener('keydown', handleDeleteQuote); // Clean up listener
+ handleInput(); // Update editor state
+ editor.focus();
+ } else {
+ // Click on quote content, move cursor after the quote (or after the zeroWidthSpace)
+ const newRange = document.createRange();
+ newRange.setStartAfter(nodeToPlaceCursorAfter.parentNode === editor ? nodeToPlaceCursorAfter : quoteElement);
+ newRange.collapse(true);
+ if (selection) {
+ selection.removeAllRanges();
+ selection.addRange(newRange);
+ }
+ editor.focus();
+ }
+ };
+
+ quoteElement.addEventListener('click', handleQuoteClick);
+ editor.addEventListener('keydown', handleDeleteQuote); // Add keydown listener for deletion
+
+ // Set timeout to allow DOM to update, then focus and set cursor
setTimeout(() => {
editor.focus();
-
- if (newSelection.rangeCount === 0) {
- const finalRange = document.createRange();
- if (newQuoteElement) {
- finalRange.setStartAfter(newQuoteElement);
- } else {
- finalRange.setStart(editor, 0);
- }
- finalRange.collapse(true);
- newSelection.removeAllRanges();
- newSelection.addRange(finalRange);
+ const newSelection = window.getSelection();
+ if (!newSelection) return;
+
+ let cursorPlaced = false;
+ // Try to restore saved range if it's still valid
+ if (savedRange) {
+ try {
+ // Check if the container of the saved range is still part of the editor
+ if (editor.contains(savedRange.commonAncestorContainer) && savedRange.startContainer) {
+ newSelection.removeAllRanges();
+ newSelection.addRange(savedRange);
+ cursorPlaced = true;
+ }
+ } catch (err) {
+ // If restoring fails, fallback to placing cursor after quote
+ }
}
- }, 50);
-}, 200);
-}
+
+ if (!cursorPlaced) {
+ const newRange = document.createRange();
+ // Ensure nodeToPlaceCursorAfter is still valid and in the DOM
+ if (nodeToPlaceCursorAfter && nodeToPlaceCursorAfter.parentNode === editor) {
+ newRange.setStartAfter(nodeToPlaceCursorAfter);
+ } else if (quoteElement.parentNode === editor && quoteElement.nextSibling) {
+ // Fallback to after quote element's direct next sibling if zeroWidthSpace was removed or invalid
+ newRange.setStartAfter(quoteElement.nextSibling);
+ } else if (quoteElement.parentNode === editor) {
+ // Fallback to after quote element itself if it's the last child
+ newRange.setStartAfter(quoteElement);
+ } else {
+ // Ultimate fallback: end of editor
+ newRange.selectNodeContents(editor);
+ newRange.collapse(false);
+ }
+ newRange.collapse(true);
+ newSelection.removeAllRanges();
+ newSelection.addRange(newRange);
+ }
+
+ editor.scrollTop = editor.scrollHeight; // Scroll to bottom if needed
+ handleInput(); // Update editor state
+ }, 0); // A small delay like 0 or 50ms is usually enough
+};
const onSubscribeEdit = (data) => {
editingMessage.value = data
@@ -1917,19 +2053,7 @@ const handleEditorClick = (event) => {
outline: none;
}
- /**
- * @提及样式
- * 为@提及的用户名添加特殊样式
- * 使用蓝色背景和文字颜色突出显示
- */
- .mention {
- color: #1890ff;
- background-color: #e6f7ff;
- padding: 2px 4px;
- border-radius: 3px;
- text-decoration: none;
- cursor: pointer;
- }
+
/**
* @提及悬停效果