本文的目的是想帮助那些正在接触 IM即时通讯 相关有实现类似微信一样的消息输入框的人群，如果你没有类似的需求那么本文对你可能没有太大的帮助，当然可以先收藏以备后用。
效果展示
Electron（网页）中的效果
（视频中图片和视频文件主要是通过复制粘贴进行操作，支持直接复制网页的图片）
回车键之后控制台可以拿到数据（@消息 和 文件 内容都是以 \uFFFC 字符作为占位符替换成文本的）：
也可以通过这个数据还原输入框的内容。
在消息发送的时候可以根据 \uFFFC 和上面的数据去匹配对应占位符所代表的内容类型，然后做对应的消息的发送和页面的差异化渲染，本文就没有继续这部分内容展开了。
React Native 中的效果
前言
本文主要以 Electron（网页） 中的实现为主，代码在自己开源的项目中：github.com/1111mp/elec…。
关于 React Native 中的实现可以直接查看源代码：github.com/1111mp/Sign… ，因为代码是很早之前一段时间写的，所以直接去查看代码就好，所以本文就不赘述了。
Quill
先介绍一下本文的主角：Quill（富文本编辑器），设计的非常棒，不过也有很多问题，最大的问题是很久没有新版本了，都在期待2.0的版本。
对于 Quill 我们需要有一些最基本的知识储备：
Delta：设计用来描述文本内容的数据格式
Deltas are a simple, yet expressive format that can be used to describe Quill’s contents and changes. The format is a strict subset of JSON, is human readable, and easily parsible by machines. Deltas can describe any Quill document, includes all text and formatting information, without the ambiguity and complexity of HTML.
// 一个最简单的 delta 数据
{
ops: [
{ insert: 'Hello' },
{ insert: ' ' }, // 空格
{ insert: 'World' }
]
}
// 对应页面上的渲染啊内容 "Hello World"
上面演示的内容对应的 Delta 数据为：
Custom Matcher For Clipboard Module
要熟悉 Quill 可能真的需要点时间，有兴趣的可以去学习一下，当然跟着本文的代码也会开始对 Quill 有一定的了解。
Quill 官网上自定义 Module 的一个 Demo （统计输入一共有多少的单词的 Module）：
class Counter {
constructor(quill, options) {
this.quill = quill;
this.options = options;
this.container = document.querySelector(options.container);
quill.on('text-change', this.update.bind(this));
this.update(); // Account for initial contents
}
calculate() {
let text = this.quill.getText();
if (this.options.unit === 'word') {
text = text.trim();
// Splitting empty text returns a non-empty array
return text.length > 0 ? text.split(/\s+/).length : 0;
} else {
return text.length;
}
}
update() {
var length = this.calculate();
var label = this.options.unit;
if (length !== 1) {
label += 's';
}
this.container.innerText = length + ' ' + label;
}
}
Quill.register('modules/counter', Counter);
var quill = new Quill('#editor', {
modules: {
counter: {
container: '#counter',
unit: 'word'
}
}
});
关于自定义 Format，Quill 中都是基于 Blot 实现（文档地址：Blots），比如要实现上面演示的 @某人 的消息，我们需要：
import Parchment from 'parchment';
import Quill from 'quill';
import { createRoot } from 'react-dom/client';
import { Emojify } from 'Components/Emojify';
import { MentionBlotValue } from '../utils';
const Embed: typeof Parchment.Embed = Quill.import('blots/embed');
export interface MentionBlotValue {
id: number;
title: string;
}
export class MentionBlot extends Embed {
// format 的 name
static blotName = 'mention';
// node 的 class name
static className = 'mention-blot';
// node 的标签类型
static tagName = 'span';
contentNode: any;
// 创建对应的DOM节点
static create(value: MentionBlotValue): Node {
const node = super.create(undefined) as HTMLElement;
MentionBlot.buildSpan(value, node);
// 这里的 node 就是实际页面富文本编辑器中渲染的 DOM 节点内容
return node;
}
static value(node: HTMLElement): MentionBlotValue {
const { id, title } = node.dataset;
if (id === undefined || title === undefined) {
throw new Error(
`Failed to make MentionBlot with id: ${id} and title: ${title}`
);
}
return {
id: parseInt(id),
title,
};
}
static buildSpan(mention: MentionBlotValue, node: HTMLElement): void {
node.setAttribute('data-id', `${mention.id}` || '');
node.setAttribute('data-title', mention.title || '');
const mentionSpan = document.createElement('span');
const root = createRoot(mentionSpan);
root.render(
<span className="module-composition-input__at-mention">
<bdi>
@
<Emojify text={mention.title} />
</bdi>
</span>
);
node.appendChild(mentionSpan);
}
constructor(node: Node) {
super(node);
this.contentNode && this.contentNode.removeAttribute('contenteditable');
}
}
那么对应的 Delta 数据格式为：
{
ops: [
{
insert: {
id: 10009,
title: 'other',
},
},
];
}
// @other
react-quill
Fuse.js
然后还想推荐一个非常好用的模糊搜索数据的库：Fuse.js
Fuse.js is a powerful, lightweight fuzzy-search library, with zero dependencies.
Fuse.js example：
// 1. List of items to search in
const books = [
{
title: "Old Man's War",
author: {
firstName: 'John',
lastName: 'Scalzi'
}
},
{
title: 'The Lock Artist',
author: {
firstName: 'Steve',
lastName: 'Hamilton'
}
}
]
// 2. Set up the Fuse instance
const fuse = new Fuse(books, {
keys: ['title', 'author.firstName']
})
// 3. Now search!
fuse.search('jon')
// Output:
// [
// {
// item: {
// title: "Old Man's War",
// author: {
// firstName: 'John',
// lastName: 'Scalzi'
// }
// },
// refIndex: 0
// }
// ]
讲的有点多，不要被这些东西吓到，其实都挺简单，就是需要点耐心，那么本文正式开始。
正文
我们还是跟着代码一步一步来了解实现吧。
根组件 index.tsx：
import './styles.scss';
import { useState, useEffect, useMemo, useRef } from 'react';
import { createPortal } from 'react-dom';
import { observer } from 'mobx-react';
import Quill, { KeyboardStatic, RangeStatic, DeltaStatic } from 'quill';
import Delta from 'quill-delta';
import ReactQuill from 'react-quill';
import { usePopper } from 'react-popper';
import { VideoBlot } from 'Components/Quill/video/blot';
import { matchVideoBlot } from 'Components/Quill/video/matchers';
import { ImageBlot } from 'Components/Quill/image/blot';
import { matchImageBlot } from 'Components/Quill/image/matchers';
import { EmojiBlot, EmojiCompletion } from 'Components/Quill/emoji';
import {
matchEmojiImage,
matchEmojiBlot,
matchReactEmoji,
matchEmojiText,
} from 'Components/Quill/emoji/matchers';
import { MentionCompletion } from 'Components/Quill/mentions/completion';
import { EmojiPickDataType } from 'Components/EmojiWidgets/EmojiPicker';
import { MentionBlot } from 'Components/Quill/mentions/blot';
import { matchMention } from 'Components/Quill/mentions/matchers';
import {
MemberRepository,
ConversationType,
} from 'Components/Quill/memberRepository';
import {
BodyRange,
getTextAndBodysFromOps,
insertBodyOps,
insertEmojiOps,
isMentionBlot,
getDeltaToRestartMention,
getDeltaToRemoveStaleMentions,
BodyRangeType,
} from 'Components/Quill/utils';
import { convertShortName } from 'Components/EmojiWidgets/lib';
import { SignalClipboard } from 'Components/Quill/signal-clipboard';
import { useI18n } from 'Renderer/utils/i18n';
import { useTargetStore } from 'App/renderer/main/stores';
Quill.register('formats/ivideo', VideoBlot); // 自定义的 Format，name 为 "ivideo"
Quill.register('formats/iimage', ImageBlot); // 自定义的 Format，name 为 "iimage"
Quill.register('formats/emoji', EmojiBlot); // 自定义的 Format，name 为 "emoji"
Quill.register('formats/mention', MentionBlot); // 自定义的 Format，name 为 "mention"
Quill.register('modules/emojiCompletion', EmojiCompletion); // 自定义 Module：emoji
Quill.register('modules/mentionCompletion', MentionCompletion); // 自定义 Module：@某人 的消息
Quill.register('modules/signalClipboard', SignalClipboard); // 自定义 Module：复制粘贴
const Block = Quill.import('blots/block');
Block.tagName = 'DIV';
Quill.register(Block, true);
interface HistoryStatic {
undo(): void;
clear(): void;
}
export interface InputApi {
focus: () => void;
insertEmoji: (e: EmojiPickDataType) => void;
reset: () => void;
resetEmojiResults: () => void;
submit: () => void;
}
type Props = {
readonly disabled?: boolean;
readonly inputApi?: React.MutableRefObject<InputApi | undefined>;
readonly skinTone?: EmojiPickDataType['skinTone'];
readonly draftText?: string;
readonly draftBodyRanges?: Array<BodyRange>;
members?: DB.UserWithFriendSetting[];
onDirtyChange?(dirty: boolean): unknown;
onEditorStateChange?(
messageText: string,
bodyRanges: Array<BodyRange>,
caretLocation?: number
): unknown;
onTextTooLong(): unknown;
onPickEmoji(o: EmojiPickDataType): unknown;
onSubmit(message: string, bodys: Array<BodyRange>): unknown;
getQuotedMessage(): unknown;
clearQuotedMessage(): unknown;
};
const MAX_LENGTH = 64 * 1024;
export const CompositionInput: React.ComponentType<Props> = observer(
(props) => {
const {
disabled,
inputApi,
onPickEmoji,
onSubmit,
skinTone,
draftText,
draftBodyRanges,
getQuotedMessage,
clearQuotedMessage,
members = [
{
id: 10007,
account: '176********',
email: 'zyf@gmail.com',
avatar:
'http://img.touxiangkong.com/uploads/allimg/20203301301/2020/3/Vzuiy2.jpg',
regisTime: '2023-01-28 12:16:06',
updateTime: '2023-01-29 14:01:35',
},
{
id: 10009,
account: '176********',
email: null,
avatar:
'http://img.touxiangkong.com/uploads/allimg/20203301301/2020/3/Vzuiy2.jpg',
createdAt: '2023-05-27 15:53:40',
regisTime: '2023-01-28 17:36:29',
remark: 'other',
block: false,
astrolabe: false,
updateTime: '2023-01-28 17:36:30',
updatedAt: '2023-05-27 15:53:40',
},
],
} = props;
const [emojiCompletionElement, setEmojiCompletionElement] =
useState<JSX.Element>();
const [lastSelectionRange, setLastSelectionRange] =
useState<RangeStatic | null>(null);
const [mentionCompletionElement, setMentionCompletionElement] =
useState<JSX.Element>();
const [referenceElement, setReferenceElement] =
useState<HTMLDivElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
null
);
const { user } = useTargetStore('userStore');
const { styles, attributes, state } = usePopper(
referenceElement,
popperElement,
{
placement: 'top-start',
}
);
const emojiCompletionRef = useRef<EmojiCompletion>();
const mentionCompletionRef = useRef<MentionCompletion>();
const quillRef = useRef<Quill>();
const scrollerRef = useRef<HTMLDivElement>(null);
const propsRef = useRef<Props>(props);
const memberRepositoryRef = useRef<MemberRepository>(
new MemberRepository()
);
const i18n = useI18n();
const generateDelta = (
text: string,
bodyRanges: Array<BodyRange>
): Delta => {
const initialOps = [{ insert: text }];
const opsWithBodys = insertBodyOps(initialOps, bodyRanges);
const opsWithEmojis = insertEmojiOps(opsWithBodys);
return new Delta(opsWithEmojis);
};
const getTextAndBodys = (): [string, Array<BodyRange>] => {
const quill = quillRef.current;
if (quill === undefined) {
return ['', []];
}
const contents = quill.getContents();
if (contents === undefined) {
return ['', []];
}
const { ops } = contents;
if (ops === undefined) {
return ['', []];
}
return getTextAndBodysFromOps(ops);
};
const focus = () => {
const quill = quillRef.current;
if (quill === undefined) {
return;
}
quill.focus();
};
const insertEmoji = (e: EmojiPickDataType) => {
const quill = quillRef.current;
if (quill === undefined) {
return;
}
const range = quill.getSelection();
const insertionRange = range || lastSelectionRange;
if (insertionRange === null) {
return;
}
const emoji = convertShortName(e.shortName, e.skinTone);
const delta = new Delta()
.retain(insertionRange.index)
.delete(insertionRange.length)
.insert({ emoji });
// https://github.com/quilljs/delta/issues/30
quill.updateContents(delta as unknown as DeltaStatic, 'user');
quill.setSelection(insertionRange.index + 1, 0, 'user');
};
const reset = () => {
const quill = quillRef.current;
if (quill === undefined) {
return;
}
quill.setText('');
const historyModule = quill.getModule('history');
if (historyModule === undefined) {
return;
}
historyModule.clear();
};
const resetEmojiResults = () => {
const emojiCompletion = emojiCompletionRef.current;
if (emojiCompletion === undefined) {
return;
}
emojiCompletion.reset();
};
const submit = () => {
const quill = quillRef.current;
if (quill === undefined) {
return;
}
const [text, bodys] = getTextAndBodys();
// window.log.info(`Submitting a message with ${bodys.length} bodys`);
onSubmit(text, bodys);
// clear
quill.deleteText(0, quill.getLength());
};
if (inputApi) {
// eslint-disable-next-line no-param-reassign
inputApi.current = {
focus,
insertEmoji,
reset,
resetEmojiResults,
submit,
};
}
useEffect(() => {
propsRef.current = props;
}, [props]);
const onShortKeyEnter = () => {
submit();
return false;
};
const onEnter = () => {
const quill = quillRef.current;
const emojiCompletion = emojiCompletionRef.current;
const mentionCompletion = mentionCompletionRef.current;
if (quill === undefined) {
return false;
}
if (emojiCompletion === undefined || mentionCompletion === undefined) {
return false;
}
if (emojiCompletion.results.length) {
emojiCompletion.completeEmoji();
return false;
}
if (mentionCompletion.results.length) {
mentionCompletion.completeMention();
return false;
}
// if (propsRef.current.large) {
// return true;
// }
submit();
return false;
};
const onTab = () => {
const quill = quillRef.current;
const emojiCompletion = emojiCompletionRef.current;
const mentionCompletion = mentionCompletionRef.current;
if (quill === undefined) {
return false;
}
if (emojiCompletion === undefined || mentionCompletion === undefined) {
return false;
}
if (emojiCompletion.results.length) {
emojiCompletion.completeEmoji();
return false;
}
if (mentionCompletion.results.length) {
mentionCompletion.completeMention();
return false;
}
return true;
};
const onEscape = () => {
const quill = quillRef.current;
if (quill === undefined) {
return false;
}
const emojiCompletion = emojiCompletionRef.current;
const mentionCompletion = mentionCompletionRef.current;
if (emojiCompletion) {
if (emojiCompletion.results.length) {
emojiCompletion.reset();
return false;
}
}
if (mentionCompletion) {
if (mentionCompletion.results.length) {
mentionCompletion.clearResults();
return false;
}
}
if (getQuotedMessage()) {
clearQuotedMessage();
return false;
}
return true;
};
const onBackspace = () => {
const quill = quillRef.current;
if (quill === undefined) {
return true;
}
const selection = quill.getSelection();
if (!selection || selection.length > 0) {
return true;
}
const [blotToDelete] = quill.getLeaf(selection.index);
if (!isMentionBlot(blotToDelete)) {
return true;
}
const contents = quill.getContents(0, selection.index - 1);
const restartDelta = getDeltaToRestartMention(contents.ops);
quill.updateContents(restartDelta as unknown as DeltaStatic);
quill.setSelection(selection.index, 0);
return false;
};
const onChange = () => {
const quill = quillRef.current;
const [text, bodys] = getTextAndBodys();
if (quill !== undefined) {
const historyModule: HistoryStatic = quill.getModule('history');
if (text.length > MAX_LENGTH) {
historyModule.undo();
propsRef.current.onTextTooLong();
return;
}
// const { onEditorStateChange } = propsRef.current;
// if (onEditorStateChange) {
// // `getSelection` inside the `onChange` event handler will be the
// // selection value _before_ the change occurs. `setTimeout` 0 here will
// // let `getSelection` return the selection after the change takes place.
// // this is necessary for `maybeGrabLinkPreview` as it needs the correct
// // `caretLocation` from the post-change selection index value.
// setTimeout(() => {
// const selection = quill.getSelection();
// onEditorStateChange(
// text,
// mentions,
// selection ? selection.index : undefined
// );
// }, 0);
// }
}
if (propsRef.current.onDirtyChange) {
propsRef.current.onDirtyChange(text.length > 0);
}
};
const removeStaleMentions = (
currentMembers: Array<DB.UserWithFriendSetting>
) => {
const quill = quillRef.current;
if (quill === undefined) {
return;
}
const { ops } = quill.getContents();
if (ops === undefined) {
return;
}
const currentMembeIds = currentMembers
.map((m) => m.id)
.filter((id): id is number => id !== undefined);
const newDelta = getDeltaToRemoveStaleMentions(ops, currentMembeIds);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
quill.updateContents(newDelta as any);
};
const memberIds = members.map((m) => m.id);
useEffect(() => {
memberRepositoryRef.current.updateMembers(members);
removeStaleMentions(members);
// We are still depending on members, but ESLint can't tell
// Comparing the actual members list does not work for a couple reasons:
// * Arrays with the same objects are not "equal" to React
// * We only care about added/removed members, ignoring other attributes
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [JSON.stringify(memberIds)]);
// 主要代码在这里
const reactQuill = useMemo(() => {
// 默认值 还原最后一次编辑的内容
const delta = generateDelta(draftText || '', draftBodyRanges || []);
return (
<ReactQuill
className="module-composition-input__quill"
scrollingContainer={scrollerRef.current!}
onChange={onChange}
defaultValue={delta}
modules={{
toolbar: false,
signalClipboard: true,
clipboard: {
// 复制粘贴的时候，匹配到复制的内容是这些标签的时候 会执行对应的 matcher 方法
matchers: [
['SPAN', matchVideoBlot],
['IMG', matchImageBlot],
['IMG', matchEmojiImage],
['IMG', matchEmojiBlot],
['SPAN', matchReactEmoji],
[Node.TEXT_NODE, matchEmojiText],
['SPAN', matchMention(memberRepositoryRef)],
],
},
// 绑定一些按键的事件
keyboard: {
bindings: {
onEnter: { key: 'Enter', handler: onEnter }, // 13 = Enter
onShortKeyEnter: {
key: 'Enter', // 13 = Enter
shortKey: true,
handler: onShortKeyEnter,
},
onEscape: { key: 'Escape', handler: onEscape }, // 27 = Escape
onBackspace: { key: 'Backspace', handler: onBackspace }, // 8 = Backspace
},
},
// emoji 联想功能
// emoji 匹配到用户输入emoji的字符串时弹出 emoji picker 的弹窗 供用户快速选择
emojiCompletion: {
setEmojiPickerElement: setEmojiCompletionElement,
onPickEmoji,
skinTone,
},
// 类似 emoji 但是是当用户输入@时 匹配群聊中其他用户信息，弹窗供用户快速选择
mentionCompletion: {
me: members.length
? members.find(({ id }) => id === user.userId)
: undefined,
memberRepositoryRef,
setMentionPickerElement: setMentionCompletionElement,
// i18n,
},
}}
// 自定义的 formats
formats={['ivideo', 'iimage', 'emoji', 'mention']}
placeholder={i18n('sendMessageToContact')}
readOnly={disabled}
ref={(element) => {
if (element) {
const quill = element.getEditor();
const keyboard = quill.getModule('keyboard') as KeyboardStatic;
// force the tab handler to be prepended, otherwise it won't be
// executed: https://github.com/quilljs/quill/issues/1967
keyboard.bindings[9].unshift({ key: 9, handler: onTab }); // 9 = Tab
// also, remove the default \t insertion binding
keyboard.bindings[9].pop();
// When loading a multi-line message out of a draft, the cursor
// position needs to be pushed to the end of the input manually.
quill.once('editor-change', () => {
// const scroller = scrollerRef.current;
// if (scroller !== null) {
// quill.scrollingContainer = scroller;
// }
setTimeout(() => {
quill.setSelection(quill.getLength(), 0);
quill.root.classList.add('ql-editor--loaded');
}, 0);
});
quill.on(
'selection-change',
(newRange: RangeStatic, oldRange: RangeStatic) => {
// If we lose focus, store the last edit point for emoji insertion
if (newRange === null) {
setLastSelectionRange(oldRange);
}
}
);
quillRef.current = quill;
emojiCompletionRef.current = quill.getModule('emojiCompletion');
mentionCompletionRef.current =
quill.getModule('mentionCompletion');
}
}}
/>
);
}, []);
return (
<>
<div
className="module-composition-input__input"
ref={setReferenceElement}
>
<div
ref={scrollerRef}
className="module-composition-input__input__scroller"
>
{reactQuill}
</div>
</div>
/** 创建弹窗 emoji & mention（@某人） */
{createPortal(
emojiCompletionElement || mentionCompletionElement ? (
<div
ref={setPopperElement}
style={{
...styles.popper,
width: state ? state.rects.reference.width : 0,
}}
{...attributes.popper}
>
{emojiCompletionElement
? emojiCompletionElement
: mentionCompletionElement}
</div>
) : (
<></>
),
document.querySelector('#destination')!
)}
{/* {mentionCompletionElement} */}
</>
);
}
);
由于代码比较多，偷个懒（建议把代码拉到本地运行，便于理解），这里就只贴出 mention（@other 消息） 的 Module & Format & Matcher 相关的代码：
Module completion.tsx：
import { createRef } from 'react';
import classNames from 'classnames';
import Quill, { DeltaStatic } from 'quill';
import Delta from 'quill-delta';
import { Avatar } from 'antd';
import { debounce } from 'lodash';
import { MemberRepository } from '../memberRepository';
import { matchBlotTextPartitions } from '../utils';
export interface MentionCompletionOptions {
// i18n: LocalizerType;
memberRepositoryRef: React.RefObject<MemberRepository>;
setMentionPickerElement: (element: JSX.Element | null) => void;
me?: DB.UserWithFriendSetting;
}
declare global {
interface HTMLElement {
// Webkit-specific
scrollIntoViewIfNeeded: (bringToCenter: boolean) => void;
}
}
const Keyboard = Quill.import('modules/keyboard');
const MENTION_REGEX = /(?:^|\W)@([-+\w]*)$/;
export class MentionCompletion {
results: Array<DB.UserWithFriendSetting>;
index: number;
quill: Quill;
options: MentionCompletionOptions;
suggestionListRef: React.RefObject<HTMLDivElement>;
constructor(quill: Quill, options: MentionCompletionOptions) {
this.results = [];
this.index = 0;
this.options = options;
this.quill = quill;
this.suggestionListRef = createRef<HTMLDivElement>();
const clearResults = () => {
if (this.results.length) {
this.clearResults();
}
return true;
};
const changeIndex = (by: number) => (): boolean => {
if (this.results.length) {
this.changeIndex(by);
return false;
}
return true;
};
// 添加一些键盘按键的事件
this.quill.keyboard.addBinding({ key: Keyboard.keys.LEFT }, clearResults); // Left Arrow
this.quill.keyboard.addBinding({ key: Keyboard.keys.UP }, changeIndex(-1)); // Up Arrow
this.quill.keyboard.addBinding({ key: Keyboard.keys.RIGHT }, clearResults); // Right Arrow
this.quill.keyboard.addBinding({ key: Keyboard.keys.DOWN }, changeIndex(1)); // Down Arrow
// 内容发生变化时触发
this.quill.on('text-change', debounce(this.onTextChange.bind(this), 0));
// 鼠标选中的内容变化时触发
this.quill.on('selection-change', this.onSelectionChange.bind(this));
}
changeIndex(by: number): void {
this.index = (this.index + by + this.results.length) % this.results.length;
this.render();
const suggestionList = this.suggestionListRef.current;
if (suggestionList) {
const selectedElement = suggestionList.querySelector<HTMLElement>(
'[aria-selected="true"]'
);
if (selectedElement) {
selectedElement.scrollIntoViewIfNeeded(false);
}
}
}
onSelectionChange() {
// Selection should never change while we're editing a mention
this.clearResults();
}
possiblyShowMemberResults(): Array<DB.UserWithFriendSetting> {
const range = this.quill.getSelection();
if (range) {
const [blot, index] = this.quill.getLeaf(range.index);
const [leftTokenTextMatch] = matchBlotTextPartitions(
blot,
index,
MENTION_REGEX
);
if (leftTokenTextMatch) {
const [, leftTokenText] = leftTokenTextMatch;
let results: Array<DB.UserWithFriendSetting> = [];
const memberRepository = this.options.memberRepositoryRef.current;
if (memberRepository) {
if (leftTokenText === '') {
results = memberRepository.getMembers(this.options.me);
} else {
const fullMentionText = leftTokenText;
results = memberRepository.search(fullMentionText, this.options.me);
}
}
return results;
}
}
return [];
}
onTextChange() {
const showMemberResults = this.possiblyShowMemberResults();
if (showMemberResults.length > 0) {
this.results = showMemberResults;
this.index = 0;
this.render();
} else if (this.results.length !== 0) {
this.clearResults();
}
}
completeMention(resultIndexArg?: number) {
const resultIndex = resultIndexArg || this.index;
const range = this.quill.getSelection();
if (range === null) return;
const member = this.results[resultIndex];
const [blot, index] = this.quill.getLeaf(range.index);
const [leftTokenTextMatch] = matchBlotTextPartitions(
blot,
index,
MENTION_REGEX
);
if (leftTokenTextMatch) {
const [, leftTokenText] = leftTokenTextMatch;
this.insertMention(
member,
range.index - leftTokenText.length - 1,
leftTokenText.length + 1,
true
);
}
}
// 通过 Delta 数据插入到页面
insertMention(
mention: DB.UserWithFriendSetting,
index: number,
range: number,
withTrailingSpace = false
) {
const delta = new Delta()
.retain(index)
.delete(range)
.insert({
mention: {
id: mention.id,
title: mention.remark ? mention.remark : mention.account,
},
}) as unknown as DeltaStatic;
if (withTrailingSpace) {
this.quill.updateContents(delta.insert(' '), 'user');
this.quill.setSelection(index + 2, 0, 'user');
} else {
this.quill.updateContents(delta, 'user');
this.quill.setSelection(index + 1, 0, 'user');
}
this.clearResults();
}
clearResults() {
this.results = [];
this.index = 0;
this.render();
}
render() {
// this.options.setMentionPickerElement(this.results.length ? true : null);
// return;
const { results: memberResults, index: memberResultsIndex } = this;
if (!memberResults.length) {
this.options.setMentionPickerElement(null);
return;
}
const element = (
<div
className="module-composition-input__suggestions"
role="listbox"
aria-expanded
aria-activedescendant={`mention-result--${
memberResults.length ? memberResults[memberResultsIndex].account : ''
}`}
tabIndex={0}
>
<div
ref={this.suggestionListRef}
className="module-composition-input__suggestions--scroller"
>
// 匹配到的用户列表
{memberResults.map((member, index) => {
const title = member.remark ? member.remark : member.account;
return (
<button
type="button"
key={member.id}
id={`mention-result--${title}`}
role="option button"
aria-selected={memberResultsIndex === index}
onClick={() => {
this.completeMention(index);
}}
className={classNames(
'module-composition-input__suggestions__row',
'module-composition-input__suggestions__row--mention',
memberResultsIndex === index
? 'module-composition-input__suggestions__row--selected'
: null
)}
>
<Avatar
src={member.avatar}
shape="circle"
// i18n={this.options.i18n}
size={28}
alt={title}
/>
<div className="module-composition-input__suggestions__title">
{title}
</div>
</button>
);
})}
</div>
</div>
);
this.options.setMentionPickerElement(element);
}
}
Format blot.tsx：
import Parchment from 'parchment';
import Quill from 'quill';
import { createRoot } from 'react-dom/client';
import { Emojify } from 'Components/Emojify';
import { MentionBlotValue } from '../utils';
const Embed: typeof Parchment.Embed = Quill.import('blots/embed');
interface MentionBlotValue {
id: number;
title: string;
}
export class MentionBlot extends Embed {
static blotName = 'mention';
static className = 'mention-blot';
static tagName = 'span';
contentNode: any;
// 通过 Delta 数据 来创建
{
ops: [
{
insert: {
id: 10009,
title: 'other',
},
},
];
}
// create 方法的value就是 { id: 10009, title: "other" }
static create(value: MentionBlotValue): Node {
const node = super.create(undefined) as HTMLElement;
MentionBlot.buildSpan(value, node);
return node;
}
static value(node: HTMLElement): MentionBlotValue {
const { id, title } = node.dataset;
if (id === undefined || title === undefined) {
throw new Error(
`Failed to make MentionBlot with id: ${id} and title: ${title}`
);
}
return {
id: parseInt(id),
title,
};
}
static buildSpan(mention: MentionBlotValue, node: HTMLElement): void {
node.setAttribute('data-id', `${mention.id}` || '');
node.setAttribute('data-title', mention.title || '');
const mentionSpan = document.createElement('span');
const root = createRoot(mentionSpan);
root.render(
<span className="module-composition-input__at-mention">
<bdi>
@
<Emojify text={mention.title} />
</bdi>
</span>
);
node.appendChild(mentionSpan);
}
constructor(node: Node) {
super(node);
this.contentNode && this.contentNode.removeAttribute('contenteditable');
}
}
Matcher matchers.ts：
import Delta from 'quill-delta';
import { RefObject } from 'react';
import { MemberRepository } from '../memberRepository';
export const matchMention =
(memberRepositoryRef: RefObject<MemberRepository>) =>
(node: HTMLElement, delta: Delta): Delta => {
const memberRepository = memberRepositoryRef.current;
if (memberRepository) {
const { title } = node.dataset;
if (node.classList.contains('module-message-body__at-mention')) {
const { id } = node.dataset;
const conversation = memberRepository.getMemberById(
id ? parseInt(id) : undefined
);
if (conversation && conversation.id) {
return new Delta().insert({
mention: {
title,
id: conversation.id,
},
});
}
return new Delta().insert(`@${title}`);
}
if (node.classList.contains('mention-blot')) {
const { id } = node.dataset;
const conversation = memberRepository.getMemberById(
id ? parseInt(id) : undefined
);
if (conversation && conversation.id) {
return new Delta().insert({
mention: {
title:
title ||
(conversation.remark
? conversation.remark
: conversation.account),
id: conversation.id,
},
});
}
return new Delta().insert(`@${title}`);
}
}
return delta;
};
再看一个简单的：
import Delta from 'quill-delta';
// 复制粘贴时处理 iimage 的情况
export const matchImageBlot = (node: HTMLElement, delta: Delta): Delta => {
if (node.classList.contains('image-blot')) {
const { type, image, name, size } = node.dataset;
// 返回描述format iimage的delta数据
return new Delta().insert({
iimage: { type, image, name, size: parseInt(size!) },
});
}
return delta;
};
最后关于 modules/signalClipboard 复制粘贴板的代码：
import Quill from 'quill';
import Delta from 'quill-delta';
import { FilesInfo, getInfoFromFileList } from 'App/renderer/utils/file';
const getSelectionHTML = () => {
const selection = window.getSelection();
if (selection === null) {
return '';
}
const range = selection.getRangeAt(0);
const contents = range.cloneContents();
const div = document.createElement('div');
div.appendChild(contents);
return div.innerHTML;
};
const replaceAngleBrackets = (text: string) => {
const entities: Array<[RegExp, string]> = [
[/&/g, '&'],
[/</g, '<'],
[/>/g, '>'],
];
return entities.reduce(
(acc, [re, replaceValue]) => acc.replace(re, replaceValue),
text
);
};
export class SignalClipboard {
quill: Quill;
constructor(quill: Quill) {
this.quill = quill;
// 复制粘贴的几个事件
this.quill.root.addEventListener('copy', (e) =>
this.onCaptureCopy(e, false)
);
this.quill.root.addEventListener('cut', (e) => this.onCaptureCopy(e, true));
this.quill.root.addEventListener('paste', (e) => this.onCapturePaste(e));
// this.quill.root.addEventListener('drop', (e) => this.onCaptureDrop(e));
}
onCaptureCopy(event: ClipboardEvent, isCut = false): void {
event.preventDefault();
if (event.clipboardData === null) {
return;
}
const range = this.quill.getSelection();
if (range === null) {
return;
}
const contents = this.quill.getContents(range.index, range.length);
if (contents === null) {
return;
}
const { ops } = contents;
if (ops === undefined) {
return;
}
// 将对应的 delta 数据序列化之后复制到粘贴板数据中
// 后面粘贴的时候 直接通过 delta 数据还原内容
event.clipboardData.setData('text/signal', JSON.stringify(ops));
if (isCut) {
this.quill.deleteText(range.index, range.length, 'user');
}
}
// 粘贴
onCapturePaste(event: ClipboardEvent): void {
if (event.clipboardData === null) {
return;
}
this.quill.focus();
const selection = this.quill.getSelection();
if (selection === null) {
return;
}
const opsStr = event.clipboardData.getData('text/signal');
if (opsStr) {
// 如果是从输入框中复制的内容
const clipboardDelta = new Delta(JSON.parse(opsStr));
const { scrollTop } = this.quill.scrollingContainer;
this.quill.selection.update('silent');
if (selection) {
setTimeout(() => {
const delta = new Delta()
.retain(selection.index)
.concat(clipboardDelta);
this.quill.updateContents(delta, 'user');
this.quill.setSelection(delta.length(), 0, 'silent');
this.quill.scrollingContainer.scrollTop = scrollTop;
}, 1);
}
event.preventDefault();
return;
}
// 复制的文件内容 目前只写了 image 和 video 的处理逻辑
// 如果需要处理其他格式的文件 可自定义 format 和 matcher就行
const files = event.clipboardData.files;
if (!files || !files.length) return;
this.setFilesToQuill(files, selection.index);
event.preventDefault();
}
// TODO maybe we dont need this feature
// onCaptureDrop(evt: DragEvent) {
// console.log(evt.target);
// console.log(evt.dataTransfer);
// for (let i = 0; i < evt.dataTransfer!.files.length; i++) {
// console.log(evt.dataTransfer!.files[i]);
// }
// for (let i = 0; i < evt.dataTransfer!.items.length; i++) {
// console.log(evt.dataTransfer!.items[i]);
// }
// const selection = this.quill.getSelection();
// console.log(selection);
// evt.preventDefault();
// }
private setFilesToQuill(files: FileList, retain: number) {
const { scrollTop } = this.quill.scrollingContainer;
// 获取文件的信息 base64 string
// 或许这里应该优化一些 毕竟文件的 base64 string 是整个文件的内容 会很大 直接这样操作 内存占用方面有影响
getInfoFromFileList(files).then((result) => {
const delta = result.reduce((acc: Delta, cur: FilesInfo) => {
if (cur === void 0) return acc;
const { type, name, size, url } = cur;
// image 文件
if (type.startsWith('image'))
acc.insert({
iimage: { type, image: url, size, name },
});
// video 文件
if (type.startsWith('video'))
acc
.insert({
ivideo: { type, video: url, size, name },
})
.insert('\n');
return acc;
}, new Delta().retain(retain));
this.quill.updateContents(delta, 'user');
this.quill.setSelection(delta.length(), 0, 'silent');
this.quill.scrollingContainer.scrollTop = scrollTop;
});
}
}
大概是这些吧，不知道怎么才能讲清楚，因为都是代码实现上的东西，所以真的建议还是把代码拉到本地然后运行，一步一步看应该就很容易懂了 。
最后
所有的代码都在自己开源的项目中：github.com/1111mp/elec…
关于 IM即时通讯 后台服务的设计可以查看自己的另一篇文章：
© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
