summaryrefslogtreecommitdiffstats
path: root/webapp/utils/emoticons.jsx
blob: 505e10c1938fc03167db80eb6cd7f634d3d6df2c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.

import $ from 'jquery';

import Constants from './constants.jsx';
import emojis from './emoji.json';

const emoticonPatterns = {
    slightly_smiling_face: /(^|\s)(:-?\))(?=$|\s)/g, // :)
    wink: /(^|\s)(;-?\))(?=$|\s)/g, // ;)
    open_mouth: /(^|\s)(:o)(?=$|\s)/gi, // :o
    scream: /(^|\s)(:-o)(?=$|\s)/gi, // :-o
    smirk: /(^|\s)(:-?])(?=$|\s)/g, // :]
    grinning: /(^|\s)(:-?d)(?=$|\s)/gi, // :D
    stuck_out_tongue_closed_eyes: /(^|\s)(x-d)(?=$|\s)/gi, // x-d
    stuck_out_tongue: /(^|\s)(:-?p)(?=$|\s)/gi, // :p
    rage: /(^|\s)(:-?[\[@])(?=$|\s)/g, // :@
    slightly_frowning_face: /(^|\s)(:-?\()(?=$|\s)/g, // :(
    cry: /(^|\s)(:['’]-?\(|:'\(|:'\()(?=$|\s)/g, // :`(
    confused: /(^|\s)(:-?\/)(?=$|\s)/g, // :/
    confounded: /(^|\s)(:-?s)(?=$|\s)/gi, // :s
    neutral_face: /(^|\s)(:-?\|)(?=$|\s)/g, // :|
    flushed: /(^|\s)(:-?\$)(?=$|\s)/g, // :$
    mask: /(^|\s)(:-x)(?=$|\s)/gi, // :-x
    heart: /(^|\s)(<3|&lt;3)(?=$|\s)/g, // <3
    broken_heart: /(^|\s)(<\/3|&lt;&#x2F;3)(?=$|\s)/g, // </3
    thumbsup: /(^|\s)(:\+1:)(?=$|\s)/g, // :+1:
    thumbsdown: /(^|\s)(:\-1:)(?=$|\s)/g // :-1:
};

let emoticonsByName;
let emoticonsByCodePoint;

function initializeEmoticons() {
    emoticonsByName = new Map();
    emoticonsByCodePoint = new Set();

    for (const emoji of emojis) {
        const unicode = emoji.emoji;

        let filename = '';
        if (unicode) {
            // this is a unicode emoji so the character code determines the file name
            let codepoint = '';

            for (let i = 0; i < unicode.length; i += 2) {
                const code = fixedCharCodeAt(unicode, i);

                // ignore variation selector characters
                if (code >= 0xfe00 && code <= 0xfe0f) {
                    continue;
                }

                // some emoji (such as country flags) span multiple unicode characters
                if (i !== 0) {
                    codepoint += '-';
                }

                codepoint += pad(code.toString(16));
            }

            filename = codepoint;
            emoticonsByCodePoint.add(codepoint);
        } else {
            // this isn't a unicode emoji so the first alias determines the file name
            filename = emoji.aliases[0];
        }

        for (const alias of emoji.aliases) {
            emoticonsByName.set(alias, {
                alias,
                path: getImagePathForEmoticon(filename)
            });
        }
    }
}

// Pads a hexadecimal number with zeroes to be at least 4 digits long
function pad(n) {
    if (n.length >= 4) {
        return n;
    }

    // http://stackoverflow.com/questions/10073699/pad-a-number-with-leading-zeros-in-javascript
    return ('0000' + n).slice(-4);
}

// Gets the unicode character code of a character starting at the given index in the string
// Adapted from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt
function fixedCharCodeAt(str, idx = 0) {
    // ex. fixedCharCodeAt('\uD800\uDC00', 0); // 65536
    // ex. fixedCharCodeAt('\uD800\uDC00', 1); // false
    const code = str.charCodeAt(idx);

    // High surrogate (could change last hex to 0xDB7F to treat high
    // private surrogates as single characters)
    if (code >= 0xD800 && code <= 0xDBFF) {
        const hi = code;
        const low = str.charCodeAt(idx + 1);

        if (isNaN(low)) {
            console.log('High surrogate not followed by low surrogate in fixedCharCodeAt()'); // eslint-disable-line
        }

        return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
    }

    if (code >= 0xDC00 && code <= 0xDFFF) { // Low surrogate
        // We return false to allow loops to skip this iteration since should have
        // already handled high surrogate above in the previous iteration
        return false;
    }

    return code;
}

export function getEmoticonsByName() {
    if (!emoticonsByName) {
        initializeEmoticons();
    }

    return emoticonsByName;
}

export function getEmoticonsByCodePoint() {
    if (!emoticonsByCodePoint) {
        initializeEmoticons();
    }

    return emoticonsByCodePoint;
}

export function handleEmoticons(text, tokens) {
    let output = text;

    function replaceEmoticonWithToken(fullMatch, prefix, matchText, name) {
        if (getEmoticonsByName().has(name)) {
            const index = tokens.size;
            const alias = `MM_EMOTICON${index}`;
            const path = getEmoticonsByName().get(name).path;

            tokens.set(alias, {
                value: `<img align="absmiddle" alt="${matchText}" class="emoticon" src="${path}" title="${matchText}" />`,
                originalText: fullMatch
            });

            return prefix + alias;
        }

        return fullMatch;
    }

    output = output.replace(/(^|\s)(:([a-zA-Z0-9_-]+):)(?=$|\s)/g, (fullMatch, prefix, matchText, name) => replaceEmoticonWithToken(fullMatch, prefix, matchText, name));

    $.each(emoticonPatterns, (name, pattern) => {
        // this might look a bit funny, but since the name isn't contained in the actual match
        // like with the named emoticons, we need to add it in manually
        output = output.replace(pattern, (fullMatch, prefix, matchText) => replaceEmoticonWithToken(fullMatch, prefix, matchText, name));
    });

    return output;
}

export function getImagePathForEmoticon(name) {
    return Constants.EMOJI_PATH + '/' + name + '.png';
}