perf: 优化粘贴提及消息

This commit is contained in:
kuaifan 2025-08-11 06:55:55 +08:00
parent c27ace6a6a
commit 07b91058af

View File

@ -17,7 +17,7 @@
:enable-y="false" :enable-y="false"
:touch-content-blur="false" :touch-content-blur="false"
class-name="chat-quick-emoji-wrapper scrollbar-hidden"> class-name="chat-quick-emoji-wrapper scrollbar-hidden">
<li v-for="item in emojiQuickItems" @click="onEmojiQuick(item)"> <li v-for="(item, index) in emojiQuickItems" :key="index" @click="onEmojiQuick(item)">
<Imgs :title="item.name" :alt="item.name" :src="item.src"/> <Imgs :title="item.name" :alt="item.name" :src="item.src"/>
</li> </li>
</Scrollbar> </Scrollbar>
@ -297,6 +297,7 @@
<script> <script>
import {mapGetters, mapState} from "vuex"; import {mapGetters, mapState} from "vuex";
import Quill from 'quill-hi'; import Quill from 'quill-hi';
import {Delta} from "quill-hi/core";
import "quill-mention-hi"; import "quill-mention-hi";
import ChatEmoji from "./emoji"; import ChatEmoji from "./emoji";
import touchmouse from "../../../../directives/touchmouse"; import touchmouse from "../../../../directives/touchmouse";
@ -1044,12 +1045,6 @@ export default {
const obj = { const obj = {
insert: op.insert insert: op.insert
}; };
try {
// mention
if (typeof obj.insert.mention === "object" && node.innerHTML) {
obj.insert = node.innerHTML.replace(/<[^>]+>/g, "")
}
} catch (e) { }
if (op.attributes) { if (op.attributes) {
['bold', 'strike', 'italic', 'underline', 'list', 'blockquote', 'link'].some(item => { ['bold', 'strike', 'italic', 'underline', 'list', 'blockquote', 'link'].some(item => {
if (op.attributes[item]) { if (op.attributes[item]) {
@ -1065,6 +1060,21 @@ export default {
return delta return delta
}) })
// mentionmatcher - span.mentiona.mention
this.quill.clipboard.addMatcher(['span.mention', 'a.mention'], (node, delta) => {
if (!this.pasteClean) {
return delta
}
const mention = this.extractMentionData(node)
if (mention === null) {
return delta
}
return new Delta([{
insert: {mention}
}]);
})
// Link handler // Link handler
const toolbar = this.quill.getModule('toolbar') const toolbar = this.quill.getModule('toolbar')
if (toolbar?.handlers?.link) { if (toolbar?.handlers?.link) {
@ -1198,6 +1208,31 @@ export default {
} }
}, },
extractMentionData(node) {
let denotationChar = node.getAttribute('data-denotation-char');
let dataId = node.getAttribute('data-id') || node.getAttribute('href');
let dataValue = node.getAttribute('data-value');
if (!denotationChar || !dataValue) {
const textContent = node.textContent || node.innerText || '';
const match = textContent.match(/^([@#~%])(.*)$/);
if (match) {
denotationChar = denotationChar || match[1];
dataValue = dataValue || match[2];
}
}
if (!denotationChar || !dataId || !dataValue) {
return null
}
return {
denotationChar: denotationChar,
id: dataId,
value: dataValue
};
},
updateEmojiQuick(text) { updateEmojiQuick(text) {
if (!this.isFocus || !text) { if (!this.isFocus || !text) {
this.emojiQuickShow = false this.emojiQuickShow = false