@aochuang/client-sdk 1.0.278

package/components/chat-editor/chat-editor.vue

@@ -0,0 +1,933 @@
+<template>
+    <div class="sdk-chat-editor" :class="{'is-disabled': disabled}" @click.stop="handleClick">
+        <div class="sdk-chat-editor__toolbar is-top">
+            <div class="sdk-chat-editor__toolbar-left">
+                <slot name="toolbar-left" :input-message="inputValue" :insert-input-message="insertInputText" :set-input-message="setInputText"></slot>
+            </div>
+            <div class="sdk-chat-editor__toolbar-right">
+                <slot name="toolbar-right" :input-message="inputValue" :insert-input-message="insertInputText" :set-input-message="setInputText"></slot>
+            </div>
+        </div>
+        <div class="sdk-chat-editor__input" @click="handleInputClick">
+            <div
+                ref="input"
+                class="sdk-chat-editor__input-control"
+                :contenteditable="!disabled"
+                :aria-disabled="disabled ? 'true' : 'false'"
+                :data-maxlength="maxlength"
+                data-placeholder="请输入"
+                @beforeinput="handleBeforeInput"
+                @paste="handleInputPaste"
+                @keydown="handleInputKeydown"
+                @keyup="handleInputKeyup"
+                @input="handleInputValueChange"
+                @focus="handleInputFocus"
+            ></div>
+        </div>
+        <template v-if="$slots.addon">
+            <slot name="addon"></slot>
+        </template>
+        <div class="sdk-chat-editor__toolbar is-bottom">
+            <div class="sdk-chat-editor__toolbar-left"></div>
+            <div class="sdk-chat-editor__toolbar-right">
+                <div class="sdk-chat-editor__toolbar-item">
+                    <span class="sdk-chat-editor__tips">按Ctrl+Enter换行</span>
+                </div>
+                <div class="sdk-chat-editor__toolbar-item">
+                    <ui-button type="primary" :disabled="!hasInputMessage || disabled" :loading="sending" @click="handleSendMessageClick">发送</ui-button>
+                </div>
+            </div>
+        </div>
+        <div class="sdk-chat-editor__popover" v-show="popoverActive">
+            <chat-editor-suggestions
+                ref="suggestions"
+                :keyword="suggestionsKeyword"
+                :loading="suggestioning"
+                :data="suggestionsData"
+                :confirm-method="handleSuggestionsConfirmMethod"
+                @closed="handleSuggestionsClosed"
+            >
+                <template slot="item" slot-scope="scope">
+                    <slot name="suggestions-item" v-bind="scope"></slot>
+                </template>
+            </chat-editor-suggestions>
+            <slot name="popover"></slot>
+        </div>
+        <slot></slot>
+    </div>
+</template>
+<script>
+import { MESSAGE_TYPE } from '../wechat-chat-control/util'
+import { Button as UiButton } from '@aochuang/common/components'
+import ChatEditorSuggestions from './chat-editor-suggestions/chat-editor-suggestions.vue'
+import { getNearestString } from './utils'
+import { decodeHtmlEntities } from '@aochuang/common/utils/string'
+
+export default {
+    name: 'SdkChatEditor',
+    components: {
+        UiButton,
+        ChatEditorSuggestions
+    },
+    props: {
+        disabled: {
+            type: Boolean
+        },
+        maxlength: {
+            type: Number,
+            default: null
+        },
+        fetchSuggestionsMethod: {
+            type: Function
+        },
+        confirmSuggestionsMethod: {
+            type: Function
+        },
+        sendMessageMethod: {
+            type: Function
+        }
+    },
+    data () {
+        return {
+            sending: false,
+            popoverActive: false,
+            suggestioning: false,
+            suggestionsData: [],
+            suggestionsKeyword: null,
+            inputValue: this.value || ''
+        }
+    },
+    computed: {
+        inputMessage () {
+            return this.inputValue || ''
+        },
+        hasInputMessage () {
+            return !!(this.inputValue || '').trim()
+        }
+    },
+    watch: {
+        value () {
+            this.setInputText(this.value || '')
+        }
+    },
+    mounted () {
+        this.setInputText(this.inputValue)
+        window.document.addEventListener('click', this.handleDocumentClick)
+    },
+    methods: {
+        handleDocumentClick () {
+            this.popoverActive = false
+        },
+        handleSuggestionsClosed () {
+            this.suggestionsData = []
+        },
+        handleSuggestionsConfirmMethod ({ item }) {
+            const next = () => {
+                if (!this.suggestionsNearsetInfo) {
+                    this.closeSuggestionsAfterConfirm()
+                    return
+                }
+                const { start, end } = this.suggestionsNearsetInfo
+                const content = decodeHtmlEntities(item.content || '')
+                this._skipNextSuggestionsLoad = true
+                this.replaceTextRange(start, end, content)
+                this.closeSuggestionsAfterConfirm()
+            }
+            if (this.confirmSuggestionsMethod) {
+                this.closeSuggestions()
+                this.confirmSuggestionsMethod({
+                    item,
+                    next
+                })
+            } else {
+                next()
+            }
+        },
+        handleInputClick () {
+            if (this.disabled) {
+                return
+            }
+            this.cacheInputRange = this.getSelectionTextRange()
+        },
+        handleBeforeInput (evt) {
+            if (this.disabled) {
+                evt.preventDefault()
+                return
+            }
+            if (evt.inputType === 'insertParagraph' || evt.inputType === 'insertLineBreak') {
+                evt.preventDefault()
+                this._pendingLineBreak = false
+                clearTimeout(this._pendingLineBreakTimer)
+                this.insertLineBreak()
+                return
+            }
+            if (!this.hasMaxlength()) {
+                return
+            }
+            const range = this.getSelectionTextRange()
+            const selectedLength = Math.max(0, range.end - range.start)
+            const inputLength = evt.data ? evt.data.length : 0
+            if (this.getInputText().length - selectedLength + inputLength > this.maxlength) {
+                evt.preventDefault()
+            }
+        },
+        handleInputKeydown (evt) {
+            if (this.disabled) {
+                evt.preventDefault()
+                return
+            }
+            if (evt.keyCode === 13) {
+                if (evt.ctrlKey || evt.metaKey) {
+                    evt.preventDefault()
+                    this._pendingLineBreak = true
+                    clearTimeout(this._pendingLineBreakTimer)
+                    this._pendingLineBreakTimer = setTimeout(() => {
+                        if (this._pendingLineBreak) {
+                            this.insertLineBreak()
+                        }
+                        this._pendingLineBreak = false
+                    }, 0)
+                } else if (evt.shiftKey) {
+                    evt.preventDefault()
+                } else {
+                    evt.preventDefault()
+                    this.submit()
+                }
+            }
+        },
+        handleInputKeyup () {
+            if (this.disabled) {
+                return
+            }
+            this.cacheInputRange = this.getSelectionTextRange()
+        },
+        handleInputPaste (evt) {
+            if (this.disabled) {
+                evt.preventDefault()
+                return
+            }
+            this.$emit('paste', evt)
+            if (evt.defaultPrevented) {
+                this.$nextTick(() => {
+                    this.handleInputValueChange()
+                })
+                return
+            }
+            evt.preventDefault()
+            const clipboardData = evt.clipboardData || window.clipboardData || {}
+            const html = clipboardData.getData ? clipboardData.getData('text/html') : ''
+            const text = clipboardData.getData ? clipboardData.getData('text/plain') : ''
+            // 不允许把任意 HTML 直接粘贴进 contenteditable，只恢复本组件自己的
+            // mention token，其他标记全部降级成纯文本。
+            this.insertFragmentAtSelection(this.createSafePasteFragment(html, text))
+            this.handleInputValueChange()
+        },
+        delayLoadSuggestions (inputValue) {
+            clearTimeout(this._loadSuggestionsTimer)
+            this._loadSuggestionsTimer = setTimeout(() => {
+                const cursorPos = this.cacheInputRange ? this.cacheInputRange.start : 0
+                const nearsetInfo = getNearestString(inputValue, cursorPos)
+                this.suggestionsNearsetInfo = nearsetInfo
+                const nearest = (nearsetInfo.nearest || '').trim()
+                if (!nearest) {
+                    this.closeSuggestions()
+                }
+                this.loadSuggestions(nearest)
+            }, 200)
+        },
+        loadSuggestions (keyword) {
+            if (!this.fetchSuggestionsMethod) {
+                return
+            }
+            keyword = keyword.trim()
+            this.suggestioning = true
+            this.suggestionsKeyword = keyword
+            clearTimeout(this._loadSuggestionsTimer)
+            return this.fetchSuggestionsMethod({
+                keyword
+            }).then(rs => {
+                this.suggestionsData = rs || []
+            }).finally(() => {
+                this.suggestioning = false
+            })
+        },
+        closeSuggestions () {
+            this.$refs.suggestions && this.$refs.suggestions.close()
+        },
+        closeSuggestionsAfterConfirm () {
+            this.closeSuggestions()
+            this.suggestionsNearsetInfo = null
+            this.suggestionsData = []
+            this.suggestionsKeyword = null
+            this.popoverActive = false
+        },
+        hasMaxlength () {
+            return typeof this.maxlength === 'number' && this.maxlength >= 0
+        },
+        getRemainingInputLength () {
+            if (!this.hasMaxlength()) {
+                return Infinity
+            }
+            const range = this.getSelectionTextRange()
+            const selectedLength = Math.max(0, range.end - range.start)
+            return Math.max(0, this.maxlength - (this.getInputText().length - selectedLength))
+        },
+        trimTextToRemainingLength (text) {
+            const remaining = this.getRemainingInputLength()
+            if (remaining === Infinity) {
+                return text
+            }
+            return String(text || '').slice(0, remaining)
+        },
+        setInputText (str) {
+            const input = this.$refs.input
+            this.inputValue = this.hasMaxlength() ? String(str || '').slice(0, this.maxlength) : (str || '')
+            this.cacheInputRange = null
+            this.suggestionsNearsetInfo = null
+            if (input) {
+                input.textContent = this.inputValue
+            }
+        },
+        setInputTextWithMentions (str, mentions) {
+            const input = this.$refs.input
+            const text = this.hasMaxlength() ? String(str || '').slice(0, this.maxlength) : String(str || '')
+            if (!input || !mentions || !mentions.length) {
+                this.setInputText(text)
+                return
+            }
+            const fragment = document.createDocumentFragment()
+            let cursor = 0
+            // 草稿恢复优先使用保存时的文本位置，避免同名 @ 成员恢复成普通文本
+            // 或恢复成错误成员；老数据没有位置时会退化成按文本顺序匹配。
+            const normalizedMentions = this.normalizeMentionsForText(text, mentions)
+            normalizedMentions.forEach(mention => {
+                if (mention.startIndex < cursor || mention.startIndex > text.length) {
+                    return
+                }
+                if (mention.startIndex > cursor) {
+                    fragment.appendChild(document.createTextNode(text.slice(cursor, mention.startIndex)))
+                }
+                const mentionNode = this.createMentionNode(mention)
+                if (mentionNode) {
+                    fragment.appendChild(mentionNode)
+                } else {
+                    fragment.appendChild(document.createTextNode(text.slice(mention.startIndex, mention.endIndex)))
+                }
+                cursor = mention.endIndex
+            })
+            if (cursor < text.length) {
+                fragment.appendChild(document.createTextNode(text.slice(cursor)))
+            }
+            input.innerHTML = ''
+            input.appendChild(fragment)
+            this.inputValue = this.getInputText()
+            this.cacheInputRange = null
+            this.suggestionsNearsetInfo = null
+            this.setCursorByTextOffset(this.inputValue.length)
+        },
+        normalizeMentionsForText (text, mentions) {
+            let cursor = 0
+            return (mentions || []).map(mention => {
+                const mentionText = mention.text || this.getMentionText(mention)
+                let startIndex = typeof mention.startIndex === 'number' ? mention.startIndex : -1
+                let endIndex = typeof mention.endIndex === 'number' ? mention.endIndex : -1
+                if (startIndex < 0 || endIndex <= startIndex || text.slice(startIndex, endIndex) !== mentionText) {
+                    startIndex = text.indexOf(mentionText, cursor)
+                    endIndex = startIndex >= 0 ? startIndex + mentionText.length : -1
+                }
+                cursor = endIndex > cursor ? endIndex : cursor
+                return Object.assign({}, mention, {
+                    text: mentionText,
+                    startIndex,
+                    endIndex
+                })
+            }).filter(mention => {
+                return mention.startIndex >= 0 && mention.endIndex > mention.startIndex && mention.endIndex <= text.length
+            }).sort((a, b) => a.startIndex - b.startIndex)
+        },
+        getInputText () {
+            return this.getNodeText(this.$refs.input)
+        },
+        getMentions () {
+            const input = this.$refs.input
+            if (!input) {
+                return []
+            }
+            // mention 的真实身份来自 DOM token，而不是显示文本。这样同名昵称
+            // 在编辑后仍然可以区分。
+            return Array.prototype.slice.call(input.querySelectorAll('[data-mention-id]')).map(node => {
+                const index = Array.prototype.indexOf.call(node.parentNode.childNodes, node)
+                const startIndex = this.getTextOffsetByDomPoint(node.parentNode, index)
+                return {
+                    id: node.dataset.mentionId,
+                    nickname: node.dataset.mentionNickname,
+                    text: node.textContent || '',
+                    startIndex,
+                    endIndex: startIndex + (node.textContent || '').length
+                }
+            })
+        },
+        clearMentions () {
+            const input = this.$refs.input
+            if (!input) {
+                return
+            }
+            Array.prototype.slice.call(input.querySelectorAll('[data-mention-id]')).forEach(node => {
+                node.parentNode && node.parentNode.removeChild(node)
+            })
+            this.handleInputValueChange()
+        },
+        getMentionText (mention) {
+            const nickname = mention && (mention.nickname || mention.name || mention.label)
+            return nickname ? `@${nickname}` : ''
+        },
+        createMentionNode (mention) {
+            const text = this.getMentionText(mention)
+            if (!mention || !mention.id || !text) {
+                return null
+            }
+            // 让 token 保持原子性，浏览器删除/复制时会把一个 @ 成员当成整体，
+            // 同时用 data-* 保存真实成员身份。
+            const node = document.createElement('span')
+            node.className = 'sdk-chat-editor__mention'
+            node.contentEditable = 'false'
+            node.dataset.mentionId = String(mention.id)
+            node.dataset.mentionNickname = mention.nickname || mention.name || mention.label
+            node.textContent = text
+            return node
+        },
+        getSafeRange () {
+            const input = this.$refs.input
+            const selection = window.getSelection()
+            if (!input || !selection || !selection.rangeCount) {
+                return null
+            }
+            const range = selection.getRangeAt(0)
+            if (!input.contains(range.commonAncestorContainer)) {
+                return null
+            }
+            return range
+        },
+        focus () {
+            if (!this.$refs.input || this.disabled) {
+                return
+            }
+            this.$refs.input.focus()
+            if (!this.getSafeRange()) {
+                this.setCursorByTextOffset(this.getInputText().length)
+            }
+        },
+        setCursorAfterNode (node) {
+            if (!node) {
+                return
+            }
+            const range = document.createRange()
+            const selection = window.getSelection()
+            range.setStartAfter(node)
+            range.collapse(true)
+            selection.removeAllRanges()
+            selection.addRange(range)
+            this.cacheInputRange = this.getSelectionTextRange()
+        },
+        setCursorByTextOffset (offset) {
+            const point = this.getDomPointByTextOffset(offset)
+            if (!point) {
+                return
+            }
+            const range = document.createRange()
+            const selection = window.getSelection()
+            range.setStart(point.node, point.offset)
+            range.collapse(true)
+            selection.removeAllRanges()
+            selection.addRange(range)
+            this.cacheInputRange = {
+                start: offset,
+                end: offset
+            }
+        },
+        setSelectionByTextRange (start, end) {
+            const startPoint = this.getDomPointByTextOffset(start)
+            const endPoint = this.getDomPointByTextOffset(end)
+            if (!startPoint || !endPoint) {
+                return false
+            }
+            const range = document.createRange()
+            const selection = window.getSelection()
+            range.setStart(startPoint.node, startPoint.offset)
+            range.setEnd(endPoint.node, endPoint.offset)
+            selection.removeAllRanges()
+            selection.addRange(range)
+            this.cacheInputRange = {
+                start,
+                end
+            }
+            return true
+        },
+        getDomPointByTextOffset (offset) {
+            // 对外暴露的编辑器 API 仍然使用纯文本偏移量，这里把偏移量转换成
+            // DOM 位置，并把 mention span 当成不可拆分的文本处理。
+            const input = this.$refs.input
+            if (!input) {
+                return null
+            }
+            let current = 0
+            let fallback = {
+                node: input,
+                offset: input.childNodes.length
+            }
+            const visit = (node) => {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    const length = node.nodeValue.length
+                    if (offset <= current + length) {
+                        return {
+                            node,
+                            offset: Math.max(0, offset - current)
+                        }
+                    }
+                    current += length
+                    fallback = {
+                        node,
+                        offset: length
+                    }
+                    return null
+                }
+                if (node.nodeType !== Node.ELEMENT_NODE) {
+                    return null
+                }
+                if (node.dataset && node.dataset.mentionId) {
+                    const length = node.textContent.length
+                    if (offset <= current) {
+                        return {
+                            node: node.parentNode,
+                            offset: Array.prototype.indexOf.call(node.parentNode.childNodes, node)
+                        }
+                    }
+                    if (offset <= current + length) {
+                        return {
+                            node: node.parentNode,
+                            offset: Array.prototype.indexOf.call(node.parentNode.childNodes, node) + 1
+                        }
+                    }
+                    current += length
+                    fallback = {
+                        node: node.parentNode,
+                        offset: Array.prototype.indexOf.call(node.parentNode.childNodes, node) + 1
+                    }
+                    return null
+                }
+                for (let i = 0; i < node.childNodes.length; i++) {
+                    const child = node.childNodes[i]
+                    if (i > 0 && this.isEditorBlockBreakNode(child)) {
+                        if (offset <= current + 1) {
+                            return {
+                                node,
+                                offset: i
+                            }
+                        }
+                        current += 1
+                    }
+                    const point = visit(child)
+                    if (point) {
+                        return point
+                    }
+                }
+                return null
+            }
+            return visit(input) || fallback
+        },
+        getTextOffsetByDomPoint (targetNode, targetOffset) {
+            // 把浏览器的选区位置转换回纯文本坐标，供联想查询和旧的插入 API 使用。
+            const input = this.$refs.input
+            let offset = 0
+            let found = false
+            const visit = (node) => {
+                if (found) {
+                    return
+                }
+                if (node === targetNode) {
+                    if (node.nodeType === Node.TEXT_NODE) {
+                        offset += targetOffset
+                    } else {
+                        for (let i = 0; i < targetOffset; i++) {
+                            const child = node.childNodes[i]
+                            if (i > 0 && this.isEditorBlockBreakNode(child)) {
+                                offset += 1
+                            }
+                            offset += this.getNodeText(child).length
+                        }
+                    }
+                    found = true
+                    return
+                }
+                if (node.nodeType === Node.TEXT_NODE) {
+                    offset += node.nodeValue.length
+                    return
+                }
+                if (node.nodeType === Node.ELEMENT_NODE && node.dataset && node.dataset.mentionId) {
+                    offset += node.textContent.length
+                    return
+                }
+                Array.prototype.slice.call(node.childNodes || []).forEach((child, index) => {
+                    if (found) {
+                        return
+                    }
+                    if (index > 0 && this.isEditorBlockBreakNode(child)) {
+                        offset += 1
+                    }
+                    visit(child)
+                })
+            }
+            visit(input)
+            return offset
+        },
+        getSelectionTextRange () {
+            const range = this.getSafeRange()
+            if (!range) {
+                const length = this.getInputText().length
+                return {
+                    start: length,
+                    end: length
+                }
+            }
+            return {
+                start: this.getTextOffsetByDomPoint(range.startContainer, range.startOffset),
+                end: this.getTextOffsetByDomPoint(range.endContainer, range.endOffset)
+            }
+        },
+        getNodeText (node) {
+            // 这里不要用 innerText，因为它会受布局影响，还可能额外插入换行；
+            // 显式遍历节点可以得到更稳定的消息内容。
+            if (!node) {
+                return ''
+            }
+            if (node.nodeType === Node.TEXT_NODE) {
+                return (node.nodeValue || '').replace(/\u200B/g, '')
+            }
+            if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'BR') {
+                return node.parentNode && this.isEditorBlockBreakNode(node.parentNode) ? '' : '\n'
+            }
+            if (node.nodeType === Node.ELEMENT_NODE && node.dataset && node.dataset.mentionId) {
+                return node.textContent || ''
+            }
+            const children = Array.prototype.slice.call(node.childNodes || [])
+            let text = ''
+            children.forEach((child, index) => {
+                if (index > 0 && this.isEditorBlockBreakNode(child) && !text.endsWith('\n')) {
+                    text += '\n'
+                }
+                text += this.getNodeText(child)
+            })
+            return text
+        },
+        isEditorBlockBreakNode (node) {
+            if (!node || node.nodeType !== Node.ELEMENT_NODE) {
+                return false
+            }
+            return ['DIV', 'P', 'LI'].includes(node.tagName)
+        },
+        insertNodesAtSelection (nodes) {
+            this.focus()
+            let range = this.getSafeRange()
+            if (!range) {
+                this.setCursorByTextOffset(this.getInputText().length)
+                range = this.getSafeRange()
+            }
+            if (!range) {
+                return
+            }
+            range.deleteContents()
+            let lastNode = null
+            nodes.forEach(node => {
+                range.insertNode(node)
+                range.setStartAfter(node)
+                lastNode = node
+            })
+            if (lastNode) {
+                this.setCursorAfterNode(lastNode)
+            }
+        },
+        insertFragmentAtSelection (fragment) {
+            this.insertNodesAtSelection(Array.prototype.slice.call(fragment.childNodes))
+        },
+        replaceTextRange (start, end, text) {
+            if (!this.setSelectionByTextRange(start, end)) {
+                return
+            }
+            this.insertInputText(text)
+        },
+        getSuggestionsReplaceRange () {
+            // @ 成员联想需要从最近的 @ 开始替换，普通快捷语只替换最近匹配词。
+            if (!this.suggestionsNearsetInfo) {
+                const range = this.cacheInputRange || this.getSelectionTextRange()
+                return {
+                    start: range.start,
+                    end: range.end
+                }
+            }
+            const { start, end, nearest, isAtContext } = this.suggestionsNearsetInfo
+            if (!isAtContext || nearest === '@') {
+                return {
+                    start,
+                    end
+                }
+            }
+            const inputValue = this.inputValue || ''
+            let atPos = start
+            for (let i = start - 1; i >= 0; i--) {
+                if (inputValue[i] === '@') {
+                    atPos = i
+                    break
+                }
+            }
+            return {
+                start: atPos,
+                end
+            }
+        },
+        insertInputText (str) {
+            if (this.disabled) {
+                return
+            }
+            const text = this.trimTextToRemainingLength(str || '')
+            if (!text) {
+                return
+            }
+            this.insertNodesAtSelection([document.createTextNode(text)])
+            this.handleInputValueChange()
+        },
+        insertLineBreak () {
+            if (this.disabled || this.getRemainingInputLength() <= 0) {
+                return
+            }
+            this.focus()
+            // contenteditable 在行尾插入纯文本 \n 时，DOM 值已经变化，
+            // 但部分浏览器不会立即把空行渲染出来；补一个零宽字符撑开光标行，
+            // getNodeText 会过滤它，发送内容仍然只保留真实换行。
+            const text = this.getRemainingInputLength() > 1 ? '\n\u200B' : '\n'
+            this.insertInputText(text)
+        },
+        insertMention (mention) {
+            if (this.disabled) {
+                return
+            }
+            const mentionNode = this.createMentionNode(mention)
+            if (!mentionNode) {
+                return
+            }
+            if (this.getRemainingInputLength() < ((mentionNode.textContent || '').length + 1)) {
+                return
+            }
+            const replaceRange = this.getSuggestionsReplaceRange()
+            this.setSelectionByTextRange(replaceRange.start, replaceRange.end)
+            this.insertNodesAtSelection([
+                mentionNode,
+                document.createTextNode(' ')
+            ])
+            // 选择 @ 成员后插入 token 会触发一次 input/change，这次变更只用于
+            // 同步内容，不应该立刻再次按当前 @ 文本打开成员浮层。
+            this._skipNextSuggestionsLoad = true
+            this.suggestionsNearsetInfo = null
+            this.handleInputValueChange()
+        },
+        insertSuggestionsText (str) {
+            if (this.disabled) {
+                return
+            }
+            const replaceRange = this.getSuggestionsReplaceRange()
+            this.setSelectionByTextRange(replaceRange.start, replaceRange.end)
+            this.insertInputText(decodeHtmlEntities(str || ''))
+            this.suggestionsNearsetInfo = null
+        },
+        createSafePasteFragment (html, text) {
+            const fragment = document.createDocumentFragment()
+            if (html && html.indexOf('data-mention-id') >= 0) {
+                // 这里恢复的是本编辑器自己复制出来的 token，但不能直接信任剪贴板
+                // HTML，所以要重新构建 span。
+                const doc = new DOMParser().parseFromString(html, 'text/html')
+                this.appendSafePastedNodes(fragment, doc.body)
+                if (fragment.childNodes.length) {
+                    return fragment
+                }
+            }
+            fragment.appendChild(document.createTextNode(this.trimTextToRemainingLength(text || '')))
+            return fragment
+        },
+        appendSafePastedNodes (fragment, node) {
+            Array.prototype.slice.call(node.childNodes || []).forEach(child => {
+                if (child.nodeType === Node.TEXT_NODE) {
+                    fragment.appendChild(document.createTextNode(child.nodeValue || ''))
+                    return
+                }
+                if (child.nodeType !== Node.ELEMENT_NODE) {
+                    return
+                }
+                if (child.dataset && child.dataset.mentionId) {
+                    const nickname = child.dataset.mentionNickname || (child.textContent || '').replace(/^@/, '')
+                    const mentionNode = this.createMentionNode({
+                        id: child.dataset.mentionId,
+                        nickname
+                    })
+                    if (mentionNode) {
+                        fragment.appendChild(mentionNode)
+                    }
+                    return
+                }
+                if (['BR', 'DIV', 'P'].includes(child.tagName) && fragment.childNodes.length) {
+                    fragment.appendChild(document.createTextNode('\n'))
+                }
+                this.appendSafePastedNodes(fragment, child)
+            })
+        },
+        handleInputValueChange () {
+            if (this.disabled) {
+                return
+            }
+            this.inputValue = this.getInputText()
+            if (this.hasMaxlength() && this.inputValue.length > this.maxlength) {
+                this.setInputText(this.inputValue.slice(0, this.maxlength))
+                this.setCursorByTextOffset(this.inputValue.length)
+            }
+            this.cacheInputRange = this.getSelectionTextRange()
+            if (this._skipNextSuggestionsLoad) {
+                this._skipNextSuggestionsLoad = false
+            } else {
+                this.popoverActive = true
+                this.delayLoadSuggestions(this.inputValue)
+            }
+            this.$emit('change', {
+                value: this.inputValue,
+                mentions: this.getMentions()
+            })
+        },
+        handleSendMessageClick () {
+           this.submit()
+        },
+        handleClick () {
+            if (this.disabled) {
+                return
+            }
+            this.popoverActive = true
+            this.focus()
+        },
+        handleInputFocus () {
+            if (this.disabled) {
+                return
+            }
+            this.popoverActive = true
+            this.focus()
+        },
+        clearInput () {
+            if (this.$refs.input) {
+                this.$refs.input.innerHTML = ''
+            }
+            this.inputValue = ''
+            this.cacheInputRange = null
+            this.suggestionsNearsetInfo = null
+        },
+        submit () {
+            if (!this.sendMessageMethod) {
+                throw new Error('缺少sendMessageMethod配置')
+            }
+            const content = this.getInputText()
+            if (!(content || '').trim()) {
+                return
+            }
+            const rs = this.sendMessageMethod({
+                data: {
+                    content,
+                    mentions: this.getMentions(),
+                    msgType: MESSAGE_TYPE.TEXT
+                }
+            })
+            if (rs && rs.then) {
+                this.sending = true
+                rs.then(() => {
+                    this.clearInput()
+                    this.closeSuggestions()
+                }).finally(() => {
+                    this.sending = false
+                })
+            } else {
+                this.clearInput()
+                this.closeSuggestions()
+            }
+        }
+    },
+    beforeDestroy () {
+        clearTimeout(this._loadSuggestionsTimer)
+        clearTimeout(this._pendingLineBreakTimer)
+        window.document.removeEventListener('click', this.handleDocumentClick)
+    }
+}
+</script>
+<style>
+.sdk-chat-editor{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+.sdk-chat-editor.is-disabled .sdk-chat-editor__input{
+    position: relative;
+}
+.sdk-chat-editor.is-disabled .sdk-chat-editor__input:after{
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    background-color: #fff;
+    z-index: 3;
+}
+.sdk-chat-editor__toolbar{
+    padding: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+.sdk-chat-editor__toolbar-right{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.sdk-chat-editor__toolbar-item:not(:last-child){
+    margin-right: 8px;
+}
+.sdk-chat-editor__input{
+    flex: 1;
+    min-height: 0;
+}
+.sdk-chat-editor__input-control{
+    box-sizing: border-box;
+    height: 100%;
+    outline: none;
+    overflow: auto;
+    padding: 5px 15px;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+.sdk-chat-editor__input-control:empty:before{
+    color: #c0c4cc;
+    content: attr(data-placeholder);
+    pointer-events: none;
+}
+.sdk-chat-editor__mention{
+    display: inline-block;
+    user-select: all;
+}
+.sdk-chat-editor__tips{
+    color: #999;
+    font-size: 12px;
+}
+.sdk-chat-editor__popover{
+    position: absolute;
+    height: 280px;
+    left: 0;
+    right: 0;
+    top: -280px;
+    pointer-events: none;
+    z-index: 100;
+}
+</style>