discourse/app/assets/javascripts/pretty-text/engines/discourse-markdown/emoji.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

390 lines
8.8 KiB
JavaScript
Raw Normal View History

import { buildEmojiUrl, isCustomEmoji } from "pretty-text/emoji";
import { translations } from "pretty-text/emoji/data";
const MAX_NAME_LENGTH = 60;
let translationTree = null;
export function resetTranslationTree() {
translationTree = null;
}
// This allows us to efficiently search for aliases
// We build a data structure that allows us to quickly
// search through our N next chars to see if any match
// one of our alias emojis.
function buildTranslationTree(customEmojiTranslation) {
let tree = [];
let lastNode;
const allTranslations = Object.assign(
{},
translations,
customEmojiTranslation || {}
);
Object.keys(allTranslations).forEach((key) => {
let node = tree;
for (let i = 0; i < key.length; i++) {
let code = key.charCodeAt(i);
let found = false;
for (let j = 0; j < node.length; j++) {
if (node[j][0] === code) {
node = node[j][1];
found = true;
break;
}
}
if (!found) {
// code, children, value
let tmp = [code, []];
node.push(tmp);
lastNode = tmp;
node = tmp[1];
}
}
lastNode[2] = allTranslations[key];
});
return tree;
}
function imageFor(code, opts) {
code = code.toLowerCase();
const url = buildEmojiUrl(code, opts);
if (url) {
const title = `:${code}:`;
const classes = isCustomEmoji(code, opts) ? "emoji emoji-custom" : "emoji";
return { url, title, classes };
}
}
function getEmojiName(content, pos, state, inlineEmoji) {
if (content.charCodeAt(pos) !== 58) {
return;
}
if (pos > 0) {
let prev = content.charCodeAt(pos - 1);
if (
!inlineEmoji &&
!state.md.utils.isSpace(prev) &&
!state.md.utils.isPunctChar(String.fromCharCode(prev))
) {
return;
}
}
pos++;
if (content.charCodeAt(pos) === 58) {
return;
}
let length = 0;
while (length < MAX_NAME_LENGTH) {
length++;
if (content.charCodeAt(pos + length) === 58) {
// check for t2-t6
if (content.slice(pos + length + 1, pos + length + 4).match(/t[2-6]:/)) {
length += 3;
}
break;
}
if (pos + length > content.length) {
return;
}
}
if (length === MAX_NAME_LENGTH) {
return;
}
return content.slice(pos, pos + length);
}
// straight forward :smile: to emoji image
function getEmojiTokenByName(name, state) {
let info;
if ((info = imageFor(name, state.md.options.discourse))) {
let token = new state.Token("emoji", "img", 0);
token.attrs = [
["src", info.url],
["title", info.title],
["class", info.classes],
["alt", info.title],
["loading", "lazy"],
["width", "20"],
["height", "20"],
];
return token;
}
}
function getEmojiTokenByTranslation(
content,
pos,
state,
customEmojiTranslation
) {
translationTree =
translationTree || buildTranslationTree(customEmojiTranslation);
let t = translationTree;
let start = pos;
let found = null;
while (t.length > 0 && pos < content.length) {
2019-01-04 11:19:44 -05:00
let matched = false;
let code = content.charCodeAt(pos);
for (let i = 0; i < t.length; i++) {
if (t[i][0] === code) {
2019-01-04 11:19:44 -05:00
matched = true;
found = t[i][2];
t = t[i][1];
break;
}
}
2019-01-04 11:19:44 -05:00
if (!matched) {
return;
}
pos++;
}
if (!found) {
return;
}
// quick boundary check
if (start > 0) {
let leading = content.charAt(start - 1);
if (
!state.md.utils.isSpace(leading.charCodeAt(0)) &&
!state.md.utils.isPunctChar(leading)
) {
return;
}
}
// check trailing for punct or space
if (pos < content.length) {
let trailing = content.charCodeAt(pos);
if (!state.md.utils.isSpace(trailing)) {
return;
2017-06-05 08:06:23 -04:00
}
}
let token = getEmojiTokenByName(found, state);
if (token) {
return { pos, token };
}
}
2019-01-04 11:19:44 -05:00
function applyEmoji(
content,
state,
emojiUnicodeReplacer,
enableShortcuts,
inlineEmoji,
customEmojiTranslation,
watchedWordsReplacer,
emojiDenyList
2019-01-04 11:19:44 -05:00
) {
let result = null;
let start = 0;
if (emojiUnicodeReplacer) {
content = emojiUnicodeReplacer(content);
}
if (watchedWordsReplacer) {
const watchedWordRegex = Object.keys(watchedWordsReplacer);
watchedWordRegex.forEach((watchedWord) => {
if (content?.match(watchedWord)) {
const regex = new RegExp(watchedWord, "g");
const matches = content.match(regex);
const replacement = watchedWordsReplacer[watchedWord].replacement;
matches.forEach(() => {
const matchingRegex = regex.exec(content);
if (matchingRegex) {
content = content.replace(matchingRegex[1], replacement);
}
});
}
});
}
// prevent denied emoji and aliases from being rendered
if (emojiDenyList?.length > 0) {
emojiDenyList.forEach((emoji) => {
if (content?.match(emoji)) {
const regex = new RegExp(`:${emoji}:`, "g");
content = content.replace(regex, "");
}
});
}
2019-01-04 11:19:44 -05:00
let end = content.length;
2017-06-05 08:06:23 -04:00
for (let i = 0; i < content.length - 1; i++) {
let offset = 0;
let token = null;
2019-01-04 11:19:44 -05:00
const name = getEmojiName(content, i, state, inlineEmoji);
if (name) {
token = getEmojiTokenByName(name, state);
if (token) {
2019-01-04 11:19:44 -05:00
offset = name.length + 2;
}
}
if (enableShortcuts && !token) {
// handle aliases (note: we can't do this in inline cause ; is not a split point)
const info = getEmojiTokenByTranslation(
content,
i,
state,
customEmojiTranslation
);
if (info) {
offset = info.pos - i;
token = info.token;
}
}
if (token) {
result = result || [];
2019-01-04 11:19:44 -05:00
if (i - start > 0) {
2019-01-04 11:19:44 -05:00
let text = new state.Token("text", "", 0);
text.content = content.slice(start, i);
result.push(text);
}
result.push(token);
2019-01-04 11:19:44 -05:00
end = start = i + offset;
i += offset - 1;
}
}
2019-01-04 11:19:44 -05:00
if (end < content.length) {
let text = new state.Token("text", "", 0);
text.content = content.slice(end);
result.push(text);
}
// we check for a result <= 5 because we support maximum 3 large emojis
// EMOJI SPACE EMOJI SPACE EMOJI => 5 tokens
if (result && result.length > 0 && result.length <= 5) {
// we ensure line starts and ends with an emoji
// and has no more than 3 emojis
if (
result[0].type === "emoji" &&
result[result.length - 1].type === "emoji" &&
result.filter((r) => r.type === "emoji").length <= 3
) {
let onlyEmojiLine = true;
let index = 0;
const checkNextToken = (t) => {
if (!t) {
return;
}
if (!["emoji", "text"].includes(t.type)) {
onlyEmojiLine = false;
}
// a text token should always have an emoji before
// and be a space
if (
t.type === "text" &&
((result[index - 1] && result[index - 1].type !== "emoji") ||
t.content !== " ")
) {
onlyEmojiLine = false;
}
// exit as soon as possible
if (onlyEmojiLine) {
index += 1;
checkNextToken(result[index]);
}
};
checkNextToken(result[index]);
if (onlyEmojiLine) {
result.forEach((r) => {
if (r.type === "emoji") {
applyOnlyEmojiClass(r);
}
});
}
}
}
return result;
}
function applyOnlyEmojiClass(token) {
token.attrs.forEach((attr) => {
if (attr[0] === "class") {
attr[1] = `${attr[1]} only-emoji`;
}
});
}
export function setup(helper) {
helper.registerOptions((opts, siteSettings, state) => {
opts.features.emoji = !state.disableEmojis && !!siteSettings.enable_emoji;
opts.features.emojiShortcuts = !!siteSettings.enable_emoji_shortcuts;
opts.features.inlineEmoji = !!siteSettings.enable_inline_emoji_translation;
opts.emojiSet = siteSettings.emoji_set || "";
opts.customEmoji = state.customEmoji;
opts.emojiCDNUrl = siteSettings.external_emoji_url;
opts.emojiDenyList = state.emojiDenyList;
});
helper.registerPlugin((md) => {
md.core.ruler.push("emoji", (state) =>
md.options.discourse.helpers.textReplace(state, (c, s) =>
applyEmoji(
c,
s,
md.options.discourse.emojiUnicodeReplacer,
md.options.discourse.features.emojiShortcuts,
md.options.discourse.features.inlineEmoji,
md.options.discourse.customEmojiTranslation,
md.options.discourse.watchedWordsReplace,
md.options.discourse.emojiDenyList
2018-06-15 11:03:24 -04:00
)
)
);
});
helper.allowList([
"img[class=emoji]",
"img[class=emoji emoji-custom]",
"img[class=emoji emoji-custom only-emoji]",
"img[class=emoji only-emoji]",
"img[loading=lazy]",
"img[width=20]",
"img[height=20]",
]);
}