TeaSpeak
/
TeaWeb
1
0
Fork 0
Code Issues 1 Pull Requests Activity

redo emoji
ci/woodpecker/push/base Pipeline was successful Details

localemoji
gapodo 2023-11-20 23:02:09 +01:00
parent cbb340aa8d
commit 28cdfeb205
3 changed files with 112 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
package-lock.json generated
View File

@ -2834,6 +2834,7 @@
"version": "7.10.3", "version": "7.10.3",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.3.tgz", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.3.tgz",
"integrity": "sha512-RzGO0RLSdokm9Ipe/YD+7ww8X2Ro79qiXZF3HU9ljrM+qnJmH1Vqth+hbiQZy761LnMJTMitHDuKVYTk3k4dLw==", "integrity": "sha512-RzGO0RLSdokm9Ipe/YD+7ww8X2Ro79qiXZF3HU9ljrM+qnJmH1Vqth+hbiQZy761LnMJTMitHDuKVYTk3k4dLw==",
"dev": true,
"requires": { "requires": {
"regenerator-runtime": "^0.13.4" "regenerator-runtime": "^0.13.4"
} }
@ -3037,6 +3038,16 @@
"integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==", "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
"dev": true "dev": true
}, },
"@emoji-mart/data": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.1.2.tgz",
"integrity": "sha512-1HP8BxD2azjqWJvxIaWAMyTySeZY0Osr83ukYjltPVkNXeJvTz7yDrPLBtnrD5uqJ3tg4CcLuuBW09wahqL/fg=="
},
"@emoji-mart/react": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@emoji-mart/react/-/react-1.1.1.tgz",
"integrity": "sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g=="
},
"@google-cloud/common": { "@google-cloud/common": {
"version": "2.4.0", "version": "2.4.0",
"resolved": "https://registry.npmjs.org/@google-cloud/common/-/common-2.4.0.tgz", "resolved": "https://registry.npmjs.org/@google-cloud/common/-/common-2.4.0.tgz",
@ -4970,15 +4981,6 @@
"integrity": "sha512-nv+GSx77ZtXiJzwKdsASqi+YQ5Z7vwHsTP0JY2SiQgjGckkBRKZnk8nIM+7oUZ1VCtuTz0+By4qVR7fqzp/Dfg==", "integrity": "sha512-nv+GSx77ZtXiJzwKdsASqi+YQ5Z7vwHsTP0JY2SiQgjGckkBRKZnk8nIM+7oUZ1VCtuTz0+By4qVR7fqzp/Dfg==",
"dev": true "dev": true
}, },
"@types/emoji-mart": {
"version": "3.0.12",
"resolved": "https://registry.npmjs.org/@types/emoji-mart/-/emoji-mart-3.0.12.tgz",
"integrity": "sha512-ff8xM0+98PhhX15xjDseOWGDz413QvCK6D+yes88u0GJ7DoH3qR5AdMI9CbYA7/jE25WxSvX2SsGnI8Mw1Wbkw==",
"dev": true,
"requires": {
"@types/react": "*"
}
},
"@types/emscripten": { "@types/emscripten": {
"version": "1.39.10", "version": "1.39.10",
"resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.39.10.tgz", "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.39.10.tgz",
@ -9915,13 +9917,9 @@
} }
}, },
"emoji-mart": { "emoji-mart": {
"version": "3.0.1", "version": "5.5.2",
"resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-3.0.1.tgz", "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.5.2.tgz",
"integrity": "sha512-sxpmMKxqLvcscu6mFn9ITHeZNkGzIvD0BSNFE/LJESPbCA8s1jM6bCDPjWbV31xHq7JXaxgpHxLB54RCbBZSlg==", "integrity": "sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A=="
"requires": {
"@babel/runtime": "^7.0.0",
"prop-types": "^15.6.0"
}
}, },
"emoji-regex": { "emoji-regex": {
"version": "9.2.2", "version": "9.2.2",
@ -19527,7 +19525,8 @@
"regenerator-runtime": { "regenerator-runtime": {
"version": "0.13.5", "version": "0.13.5",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
"integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==" "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==",
"dev": true
}, },
"regenerator-transform": { "regenerator-transform": {
"version": "0.14.5", "version": "0.14.5",
@ -23899,4 +23898,4 @@
} }
} }
} }
} }

5
package.json
View File

@ -24,7 +24,6 @@
"@svgr/webpack": "^5.5.0", "@svgr/webpack": "^5.5.0",
"@types/dompurify": "^2.4.0", "@types/dompurify": "^2.4.0",
"@types/ejs": "^3.1.5", "@types/ejs": "^3.1.5",
"@types/emoji-mart": "^3.0.12",
"@types/emscripten": "^1.39.10", "@types/emscripten": "^1.39.10",
"@types/fs-extra": "^8.1.5", "@types/fs-extra": "^8.1.5",
"@types/html-minifier": "^3.5.3", "@types/html-minifier": "^3.5.3",
@ -98,6 +97,8 @@
}, },
"homepage": "https://www.teaspeak.de", "homepage": "https://www.teaspeak.de",
"dependencies": { "dependencies": {
"@emoji-mart/data": "^1.1.2",
"@emoji-mart/react": "^1.1.1",
"@types/crypto-js": "^4.2.1", "@types/crypto-js": "^4.2.1",
"broadcastchannel-polyfill": "^1.0.1", "broadcastchannel-polyfill": "^1.0.1",
"buffer": "^6.0.3", "buffer": "^6.0.3",
@ -105,7 +106,7 @@
"crypto-js": "^4.2.0", "crypto-js": "^4.2.0",
"detect-browser": "^5.3.0", "detect-browser": "^5.3.0",
"dompurify": "^2.4.7", "dompurify": "^2.4.7",
"emoji-mart": "^3.0.1", "emoji-mart": "^5.5.2",
"emoji-regex": "^9.2.2", "emoji-regex": "^9.2.2",
"highlight.js": "^10.7.3", "highlight.js": "^10.7.3",
"ip-regex": "^4.3.0", "ip-regex": "^4.3.0",

158
shared/js/ui/react-elements/ChatBox.tsx
View File

@ -1,14 +1,19 @@
import * as React from "react"; import * as React from "react";
import {useEffect, useRef, useState} from "react"; import { useEffect, useRef, useState } from "react";
import {Registry} from "tc-shared/events"; import { Registry } from "tc-shared/events";
//import '!style-loader!css-loader!emoji-mart/css/emoji-mart.css'
import { settings, Settings } from "tc-shared/settings";
import { Translatable } from "tc-shared/ui/react-elements/i18n";
import { getTwenmojiHashFromNativeEmoji } from "tc-shared/text/bbcode/EmojiUtil";
import { useGlobalSetting } from "tc-shared/ui/react-elements/Helper";
import Picker from '@emoji-mart/react'
import data from '@emoji-mart/data'
import { Emoji, init } from "emoji-mart";
init({ data })
import '!style-loader!css-loader!emoji-mart/css/emoji-mart.css'
import {Picker, emojiIndex} from 'emoji-mart'
import {settings, Settings} from "tc-shared/settings";
import {Translatable} from "tc-shared/ui/react-elements/i18n";
import {getTwenmojiHashFromNativeEmoji} from "tc-shared/text/bbcode/EmojiUtil";
import {BaseEmoji} from "emoji-mart";
import {useGlobalSetting} from "tc-shared/ui/react-elements/Helper";
const cssStyle = require("./ChatBox.scss"); const cssStyle = require("./ChatBox.scss");
@ -28,34 +33,38 @@ interface ChatBoxEvents {
} }
const LastUsedEmoji = () => { const LastUsedEmoji = () => {
const settingValue = useGlobalSetting(Settings.KEY_CHAT_LAST_USED_EMOJI); // const settingValue = useGlobalSetting(Settings.KEY_CHAT_LAST_USED_EMOJI);
const lastEmoji: BaseEmoji = (emojiIndex.emojis[settingValue] || emojiIndex.emojis["joy"]) as any;
if(!lastEmoji?.native) {
return <img key={"fallback"} alt={""} src={"img/smiley-smile.svg"} />;
}
return ( // const lastEmoji: BaseEmoji = (emojiIndex.emojis[settingValue] || emojiIndex.emojis["joy"]) as any;
<img draggable={false} src={"https://twemoji.maxcdn.com/v/12.1.2/72x72/" + getTwenmojiHashFromNativeEmoji(lastEmoji.native) + ".png"} alt={lastEmoji.native} className={cssStyle.emoji} /> // if (!lastEmoji?.native) {
) // return <img key={"fallback"} alt={""} src={"img/smiley-smile.svg"} />;
// }
const le: Emoji = new Emoji({ id: 'smiley', set: 'native' })
return le.component
// return (
// <img draggable={false} src={"https://twemoji.maxcdn.com/v/12.1.2/72x72/" + getTwenmojiHashFromNativeEmoji(lastEmoji.native) + ".png"} alt={lastEmoji.native} className={cssStyle.emoji} />
// )
} }
const EmojiButton = (props: { events: Registry<ChatBoxEvents> }) => { const EmojiButton = (props: { events: Registry<ChatBoxEvents> }) => {
const [ shown, setShown ] = useState(false); const [shown, setShown] = useState(false);
const [ enabled, setEnabled ] = useState(false); const [enabled, setEnabled] = useState(false);
const refContainer = useRef(); const refContainer = useRef();
useEffect(() => { useEffect(() => {
if(!shown) { if (!shown) {
return; return;
} }
const clickListener = (event: MouseEvent) => { const clickListener = (event: MouseEvent) => {
let target = event.target as HTMLElement; let target = event.target as HTMLElement;
while(target && target !== refContainer.current) while (target && target !== refContainer.current)
target = target.parentElement; target = target.parentElement;
if(target === refContainer.current && target) if (target === refContainer.current && target)
return; return;
setShown(false); setShown(false);
@ -68,6 +77,7 @@ const EmojiButton = (props: { events: Registry<ChatBoxEvents> }) => {
props.events.reactUse("action_set_enabled", event => setEnabled(event.enabled)); props.events.reactUse("action_set_enabled", event => setEnabled(event.enabled));
props.events.reactUse("action_submit_message", () => setShown(false)); props.events.reactUse("action_submit_message", () => setShown(false));
return ( return (
<div className={cssStyle.containerEmojis} ref={refContainer}> <div className={cssStyle.containerEmojis} ref={refContainer}>
<div className={cssStyle.button} onClick={() => enabled && setShown(true)}> <div className={cssStyle.button} onClick={() => enabled && setShown(true)}>
@ -75,19 +85,35 @@ const EmojiButton = (props: { events: Registry<ChatBoxEvents> }) => {
</div> </div>
<div className={cssStyle.picker} style={{ display: shown ? undefined : "none" }}> <div className={cssStyle.picker} style={{ display: shown ? undefined : "none" }}>
{!shown ? undefined : {!shown ? undefined :
// <Picker
// key={"picker"}
// set={"twitter"}
// theme={"light"}
// showPreview={true}
// title={""}
// showSkinTones={true}
// useButton={false}
// native={false}
// onSelect={(emoji: any) => {
// if (enabled) {
// settings.setValue(Settings.KEY_CHAT_LAST_USED_EMOJI, emoji.id as string);
// props.events.fire("action_insert_text", { text: emoji.native, focus: true });
// }
// }}
// />
<Picker <Picker
data={data}
key={"picker"} key={"picker"}
set={"twitter"} set={"native"}
theme={"light"} noCountryFlags={true}
showPreview={true} showPreview={true}
title={""} title={""}
showSkinTones={true} skinTonePosition={"none"}
useButton={false}
native={false}
onSelect={(emoji: any) => { onEmojiSelect={(emoji: any) => {
if(enabled) { if (enabled) {
settings.setValue(Settings.KEY_CHAT_LAST_USED_EMOJI, emoji.id as string); //settings.setValue(Settings.KEY_CHAT_LAST_USED_EMOJI, emoji.id as string);
props.events.fire("action_insert_text", { text: emoji.native, focus: true }); props.events.fire("action_insert_text", { text: emoji.native, focus: true });
} }
}} }}
@ -101,27 +127,27 @@ const EmojiButton = (props: { events: Registry<ChatBoxEvents> }) => {
const pasteTextTransformElement = document.createElement("div"); const pasteTextTransformElement = document.createElement("div");
const nodeToText = (element: Node) => { const nodeToText = (element: Node) => {
if(element instanceof Text) { if (element instanceof Text) {
return element.textContent; return element.textContent;
} else if(element instanceof HTMLElement) { } else if (element instanceof HTMLElement) {
if(element instanceof HTMLImageElement) { if (element instanceof HTMLImageElement) {
return element.alt || element.title; return element.alt || element.title;
} else if(element instanceof HTMLBRElement) { } else if (element instanceof HTMLBRElement) {
return '\n'; return '\n';
} else if(element instanceof HTMLAnchorElement) { } else if (element instanceof HTMLAnchorElement) {
const content = [...element.childNodes].map(nodeToText).join(""); const content = [...element.childNodes].map(nodeToText).join("");
if(element.href) { if (element.href) {
if(settings.getValue(Settings.KEY_CHAT_ENABLE_MARKDOWN)) { if (settings.getValue(Settings.KEY_CHAT_ENABLE_MARKDOWN)) {
if(content && element.title) { if (content && element.title) {
return `[${content}](${element.href} "${element.title}")`; return `[${content}](${element.href} "${element.title}")`;
} else if(content) { } else if (content) {
return `[${content}](${element.href})`; return `[${content}](${element.href})`;
} else { } else {
return `[${element.href}](${element.href})`; return `[${element.href}](${element.href})`;
} }
} else if(settings.getValue(Settings.KEY_CHAT_ENABLE_BBCODE)) { } else if (settings.getValue(Settings.KEY_CHAT_ENABLE_BBCODE)) {
if(content) { if (content) {
return `[url=${element.href}]${content}"[/url]`; return `[url=${element.href}]${content}"[/url]`;
} else { } else {
return `[url]${element.href}"[/url]`; return `[url]${element.href}"[/url]`;
@ -134,11 +160,11 @@ const nodeToText = (element: Node) => {
} }
} }
if(element.children.length > 0) { if (element.children.length > 0) {
return [...element.childNodes].map(nodeToText).join(""); return [...element.childNodes].map(nodeToText).join("");
} }
return typeof(element.innerText) === "string" ? element.innerText : ""; return typeof (element.innerText) === "string" ? element.innerText : "";
} else { } else {
return ""; return "";
} }
@ -146,19 +172,19 @@ const nodeToText = (element: Node) => {
const htmlEscape = (message: string) => { const htmlEscape = (message: string) => {
pasteTextTransformElement.innerText = message; pasteTextTransformElement.innerText = message;
message = pasteTextTransformElement.innerHTML; message = pasteTextTransformElement.innerHTML;
return message.replace(/ /g, '&nbsp;'); return message.replace(/ /g, '&nbsp;');
}; };
const TextInput = (props: { events: Registry<ChatBoxEvents>, enabled?: boolean, placeholder?: string }) => { const TextInput = (props: { events: Registry<ChatBoxEvents>, enabled?: boolean, placeholder?: string }) => {
const [ enabled, setEnabled ] = useState(!!props.enabled); const [enabled, setEnabled] = useState(!!props.enabled);
const [ historyIndex, setHistoryIndex ] = useState(-1); const [historyIndex, setHistoryIndex] = useState(-1);
const history = useRef([]); const history = useRef([]);
const refInput = useRef<HTMLInputElement>(); const refInput = useRef<HTMLInputElement>();
const typingTimeout = useRef(undefined); const typingTimeout = useRef(undefined);
const triggerTyping = () => { const triggerTyping = () => {
if(typeof typingTimeout.current === "number") if (typeof typingTimeout.current === "number")
return; return;
props.events.fire("notify_typing"); props.events.fire("notify_typing");
@ -182,7 +208,7 @@ const TextInput = (props: { events: Registry<ChatBoxEvents>, enabled?: boolean,
event.preventDefault(); event.preventDefault();
const clipboard = event.clipboardData || (window as any).clipboardData; const clipboard = event.clipboardData || (window as any).clipboardData;
if(!clipboard) return; if (!clipboard) return;
const rawText = clipboard.getData('text/plain'); const rawText = clipboard.getData('text/plain');
const selection = window.getSelection(); const selection = window.getSelection();
@ -191,7 +217,7 @@ const TextInput = (props: { events: Registry<ChatBoxEvents>, enabled?: boolean,
} }
let htmlXML = clipboard.getData('text/html'); let htmlXML = clipboard.getData('text/html');
if(!htmlXML) { if (!htmlXML) {
pasteTextTransformElement.textContent = rawText; pasteTextTransformElement.textContent = rawText;
htmlXML = pasteTextTransformElement.innerHTML; htmlXML = pasteTextTransformElement.innerHTML;
} }
@ -235,33 +261,33 @@ const TextInput = (props: { events: Registry<ChatBoxEvents>, enabled?: boolean,
triggerTyping(); triggerTyping();
const inputEmpty = refInput.current.innerText.trim().length === 0; const inputEmpty = refInput.current.innerText.trim().length === 0;
if(event.key === "Enter" && !event.shiftKey) { if (event.key === "Enter" && !event.shiftKey) {
if(inputEmpty) { if (inputEmpty) {
return; return;
} }
const text = refInput.current.innerText; const text = refInput.current.innerText;
props.events.fire("action_submit_message", { message: text }); props.events.fire("action_submit_message", { message: text });
history.current.push(text); history.current.push(text);
while(history.current.length > 10) { while (history.current.length > 10) {
history.current.pop_front(); history.current.pop_front();
} }
refInput.current.innerText = ""; refInput.current.innerText = "";
setHistoryIndex(-1); setHistoryIndex(-1);
event.preventDefault(); event.preventDefault();
} else if(event.key === "ArrowUp") { } else if (event.key === "ArrowUp") {
const inputOriginal = history.current[historyIndex] === refInput.current.innerText; const inputOriginal = history.current[historyIndex] === refInput.current.innerText;
if(inputEmpty && (historyIndex === -1 || !inputOriginal)) { if (inputEmpty && (historyIndex === -1 || !inputOriginal)) {
setHistory(history.current.length - 1); setHistory(history.current.length - 1);
event.preventDefault(); event.preventDefault();
} else if(historyIndex > 0 && inputOriginal) { } else if (historyIndex > 0 && inputOriginal) {
setHistory(historyIndex - 1); setHistory(historyIndex - 1);
event.preventDefault(); event.preventDefault();
} }
} else if(event.key === "ArrowDown") { } else if (event.key === "ArrowDown") {
if(history.current[historyIndex] === refInput.current.innerText) { if (history.current[historyIndex] === refInput.current.innerText) {
if(historyIndex < history.current.length - 1) { if (historyIndex < history.current.length - 1) {
setHistory(historyIndex + 1); setHistory(historyIndex + 1);
} else { } else {
setHistory(-1); setHistory(-1);
@ -273,7 +299,7 @@ const TextInput = (props: { events: Registry<ChatBoxEvents>, enabled?: boolean,
props.events.reactUse("action_request_focus", () => refInput.current?.focus()); props.events.reactUse("action_request_focus", () => refInput.current?.focus());
props.events.reactUse("notify_typing", () => { props.events.reactUse("notify_typing", () => {
if(typeof typingTimeout.current === "number") { if (typeof typingTimeout.current === "number") {
return; return;
} }
@ -281,15 +307,15 @@ const TextInput = (props: { events: Registry<ChatBoxEvents>, enabled?: boolean,
}); });
props.events.reactUse("action_insert_text", event => { props.events.reactUse("action_insert_text", event => {
refInput.current.innerHTML = refInput.current.innerHTML + event.text; refInput.current.innerHTML = refInput.current.innerHTML + event.text;
if(event.focus) { if (event.focus) {
refInput.current.focus(); refInput.current.focus();
} }
}); });
props.events.reactUse("action_set_enabled", event => { props.events.reactUse("action_set_enabled", event => {
setEnabled(event.enabled); setEnabled(event.enabled);
if(!event.enabled) { if (!event.enabled) {
const text = refInput.current.innerText; const text = refInput.current.innerText;
if(text.trim().length !== 0) if (text.trim().length !== 0)
history.current.push(text); history.current.push(text);
refInput.current.innerText = ""; refInput.current.innerText = "";
} }
@ -324,17 +350,17 @@ export interface ChatBoxState {
} }
const MarkdownFormatHelper = () => { const MarkdownFormatHelper = () => {
const [ visible, setVisible ] = useState(settings.getValue(Settings.KEY_CHAT_ENABLE_MARKDOWN)); const [visible, setVisible] = useState(settings.getValue(Settings.KEY_CHAT_ENABLE_MARKDOWN));
settings.events.reactUse("notify_setting_changed", event => { settings.events.reactUse("notify_setting_changed", event => {
if(event.setting !== Settings.KEY_CHAT_ENABLE_MARKDOWN.key) { if (event.setting !== Settings.KEY_CHAT_ENABLE_MARKDOWN.key) {
return; return;
} }
setVisible(settings.getValue(Settings.KEY_CHAT_ENABLE_MARKDOWN)); setVisible(settings.getValue(Settings.KEY_CHAT_ENABLE_MARKDOWN));
}); });
if(visible) { if (visible) {
return ( return (
<div key={"help"} className={cssStyle.containerHelp}>*italic*, **bold**, ~~strikethrough~~, `code`, <Translatable>and more</Translatable>...</div> <div key={"help"} className={cssStyle.containerHelp}>*italic*, **bold**, ~~strikethrough~~, `code`, <Translatable>and more</Translatable>...</div>
); );
@ -380,7 +406,7 @@ export class ChatBox extends React.Component<ChatBoxProperties, ChatBoxState> {
} }
componentDidUpdate(prevProps: Readonly<ChatBoxProperties>, prevState: Readonly<ChatBoxState>, snapshot?: any): void { componentDidUpdate(prevProps: Readonly<ChatBoxProperties>, prevState: Readonly<ChatBoxState>, snapshot?: any): void {
if(prevState.enabled !== this.state.enabled) { if (prevState.enabled !== this.state.enabled) {
this.events.fire_react("action_set_enabled", { enabled: this.state.enabled }); this.events.fire_react("action_set_enabled", { enabled: this.state.enabled });
} }
} }