2016-05-03 03:32:51 +08:00
|
|
|
/* eslint no-cond-assign:0 */
|
2016-04-13 01:27:24 +08:00
|
|
|
import {MessageViewExtension, RegExpUtils} from 'nylas-exports';
|
|
|
|
|
|
|
|
import EmojiStore from './emoji-store';
|
|
|
|
import emoji from 'node-emoji';
|
2016-03-25 01:42:44 +08:00
|
|
|
|
2016-05-07 05:10:56 +08:00
|
|
|
function makeIntoEmojiTag(nodeArg, emojiName) {
|
|
|
|
const node = nodeArg;
|
2016-05-03 03:32:51 +08:00
|
|
|
node.src = EmojiStore.getImagePath(emojiName);
|
|
|
|
node.className = `emoji ${emojiName}`;
|
|
|
|
node.width = 14;
|
|
|
|
node.height = 14;
|
|
|
|
node.style = '';
|
|
|
|
node.style.marginTop = '-5px';
|
|
|
|
}
|
2016-03-25 01:42:44 +08:00
|
|
|
|
|
|
|
class EmojiMessageExtension extends MessageViewExtension {
|
2016-05-03 03:32:51 +08:00
|
|
|
static renderedMessageBodyIntoDocument({document}) {
|
|
|
|
const emojiRegex = RegExpUtils.emojiRegex();
|
|
|
|
|
2016-06-02 02:11:51 +08:00
|
|
|
// Look for emoji in the content of text nodes
|
2016-05-03 03:32:51 +08:00
|
|
|
const treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
|
|
|
|
|
|
|
|
while (treeWalker.nextNode()) {
|
|
|
|
emojiRegex.lastIndex = 0;
|
|
|
|
|
|
|
|
const node = treeWalker.currentNode;
|
|
|
|
let match = null;
|
|
|
|
|
|
|
|
while (match = emojiRegex.exec(node.textContent)) {
|
|
|
|
const matchEmojiName = emoji.which(match[0]);
|
|
|
|
if (matchEmojiName) {
|
|
|
|
const matchNode = (match.index === 0) ? node : node.splitText(match.index);
|
|
|
|
matchNode.splitText(match[0].length);
|
|
|
|
const imageNode = document.createElement('img');
|
|
|
|
makeIntoEmojiTag(imageNode, matchEmojiName);
|
|
|
|
matchNode.parentNode.replaceChild(imageNode, matchNode);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2016-03-25 01:42:44 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default EmojiMessageExtension;
|