57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
|
// Copyright 2020 Signal Messenger, LLC
|
||
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
||
|
|
|
||
|
|
import React from 'react';
|
||
|
|
import Parchment from 'parchment';
|
||
|
|
import Quill from 'quill';
|
||
|
|
import { render } from 'react-dom';
|
||
|
|
import { Emojify } from '../../components/conversation/Emojify';
|
||
|
|
import { ConversationType } from '../../state/ducks/conversations';
|
||
|
|
|
||
|
|
const Embed: typeof Parchment.Embed = Quill.import('blots/embed');
|
||
|
|
|
||
|
|
type MentionBlotValue = { uuid?: string; title?: string };
|
||
|
|
|
||
|
|
export class MentionBlot extends Embed {
|
||
|
|
static blotName = 'mention';
|
||
|
|
|
||
|
|
static className = 'mention-blot';
|
||
|
|
|
||
|
|
static tagName = 'span';
|
||
|
|
|
||
|
|
static create(value: ConversationType): Node {
|
||
|
|
const node = super.create(undefined) as HTMLElement;
|
||
|
|
|
||
|
|
MentionBlot.buildSpan(value, node);
|
||
|
|
|
||
|
|
return node;
|
||
|
|
}
|
||
|
|
|
||
|
|
static value(node: HTMLElement): MentionBlotValue {
|
||
|
|
const { uuid, title } = node.dataset;
|
||
|
|
return {
|
||
|
|
uuid,
|
||
|
|
title,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
static buildSpan(member: ConversationType, node: HTMLElement): void {
|
||
|
|
node.setAttribute('data-uuid', member.uuid || '');
|
||
|
|
node.setAttribute('data-title', member.title || '');
|
||
|
|
|
||
|
|
const mentionSpan = document.createElement('span');
|
||
|
|
|
||
|
|
render(
|
||
|
|
<span className="module-composition-input__at-mention">
|
||
|
|
<bdi>
|
||
|
|
@
|
||
|
|
<Emojify text={member.title} />
|
||
|
|
</bdi>
|
||
|
|
</span>,
|
||
|
|
mentionSpan
|
||
|
|
);
|
||
|
|
|
||
|
|
node.appendChild(mentionSpan);
|
||
|
|
}
|
||
|
|
}
|