remove old emoji data

.eslintrc.js

@@ -49,6 +49,7 @@ module.exports = {
 			},
 		],
 
+		'@typescript-eslint/no-namespace': 'off',
 		'@typescript-eslint/no-unsafe-member-access': 'off',
 		'@typescript-eslint/no-extra-semi': 'off',
 		'@typescript-eslint/no-empty-function': 'off',

package-lock.json

@@ -14,6 +14,7 @@
 				"@emoji-mart/data": "^1.1.2",
 				"@sentry/browser": "^7.39.0",
 				"@sentry/cli": "^2.18.1",
+				"@types/emoji-mart": "^3.0.13",
 				"amplitude-js": "^5.11.0",
 				"array-move": "^2.2.2",
 				"blueimp-load-image": "^2.31.0",
@@ -886,6 +887,14 @@
 				"@types/ms": "*"
 			}
 		},
+		"node_modules/@types/emoji-mart": {
+			"version": "3.0.13",
+			"resolved": "https://registry.npmjs.org/@types/emoji-mart/-/emoji-mart-3.0.13.tgz",
+			"integrity": "sha512-0d/6Gva+G5os4D7pQlAuySKR8rGONBvIptxjiXyWXVUglTxGgSc9ytCp+YFtBD+gaNlP5oFwRfjxQkqsfl04mQ==",
+			"dependencies": {
+				"@types/react": "*"
+			}
+		},
 		"node_modules/@types/eslint": {
 			"version": "8.4.5",
 			"devOptional": true,
@@ -1030,7 +1039,6 @@
 		},
 		"node_modules/@types/prop-types": {
 			"version": "15.7.5",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@types/qs": {
@@ -1050,7 +1058,6 @@
 		},
 		"node_modules/@types/react": {
 			"version": "16.14.31",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/prop-types": "*",
@@ -1099,7 +1106,6 @@
 		},
 		"node_modules/@types/scheduler": {
 			"version": "0.16.2",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@types/semver": {

package.json

@@ -89,6 +89,7 @@
 		"@emoji-mart/data": "^1.1.2",
 		"@sentry/browser": "^7.39.0",
 		"@sentry/cli": "^2.18.1",
+		"@types/emoji-mart": "^3.0.13",
 		"amplitude-js": "^5.11.0",
 		"array-move": "^2.2.2",
 		"blueimp-load-image": "^2.31.0",

src/ts/app.tsx

@@ -63,6 +63,14 @@ declare global {
 	}
 };
 
+declare global {
+	namespace JSX {
+		interface IntrinsicElements {
+			['em-emoji']: any;
+		}
+	}
+};
+
 const rootStore = {
 	commonStore,
 	authStore,

src/ts/component/menu/smile.tsx

@@ -5,7 +5,6 @@ import { Filter, Icon, IconEmoji, EmptySearch, Label, Loader } from 'Component';
 import { I, C, UtilCommon, UtilSmile, UtilMenu, keyboard, translate, analytics, Preview, Action } from 'Lib';
 import { menuStore, commonStore } from 'Store';
 import Constant from 'json/constant.json';
-import EmojiData from 'json/emoji.json';
 
 interface State {
 	filter: string;
@@ -85,8 +84,7 @@ class MenuSmile extends React.Component<I.Menu, State> {
 				const groups = this.getGroups();
 
 				const Item = (item: any) => {
-					const str = `:${item.itemId}::skin-${item.skin}:`;
-					console.log(str);
+					const str = `:${item.itemId}::skin-tone-${item.skin}:`;
 					return (
 						<div 
 							id={'item-' + item.id} 
@@ -485,13 +483,13 @@ class MenuSmile extends React.Component<I.Menu, State> {
 
 			e.preventDefault();
 
-			const item = EmojiData.emojis[this.active.itemId];
+			const item = UtilSmile.data.emojis[this.active.itemId];
 
-			if (!item || !item.skin_variations) {
+			if (item.skins && (item.skins.length > 1)) {
+				this.onSkin(e, this.active.id, this.active.itemId);
+			} else {
 				this.onSelect(this.active.itemId, this.skin);
 				close();
-			} else {
-				this.onSkin(e, this.active.id, this.active.itemId);
 			};
 
 			Preview.tooltipHide(true);
@@ -635,7 +633,7 @@ class MenuSmile extends React.Component<I.Menu, State> {
 	onMouseDown (e: any, n: string, id: string, skin: number) {
 		const { close } = this.props;
 		const win = $(window);
-		const item = EmojiData.emojis[id];
+		const item = UtilSmile.data.emojis[id];
 
 		this.id = id;
 		window.clearTimeout(this.timeoutMenu);
@@ -644,7 +642,7 @@ class MenuSmile extends React.Component<I.Menu, State> {
 			return;
 		};
 
-		if (item && item.skin_variations) {
+		if (item && (item.skins.length > 1)) {
 			this.timeoutMenu = window.setTimeout(() => {
 				win.off('mouseup.smile');
 				this.onSkin(e, n, id);
@@ -666,9 +664,9 @@ class MenuSmile extends React.Component<I.Menu, State> {
 
 	onSkin (e: any, n: string, id: string) {
 		const { getId, close } = this.props;
-		const item = EmojiData.emojis[id];
+		const item = UtilSmile.data.emojis[id];
 
-		if (!item || !item.skin_variations) {
+		if (item.skins.length <= 1) {
 			return;
 		};
 
@@ -681,7 +679,6 @@ class MenuSmile extends React.Component<I.Menu, State> {
 				smileId: id,
 				onSelect: (skin: number) => {
 					this.onSelect(id, skin);
-
 					close();
 				},
 				rebind: this.rebind
@@ -820,8 +817,9 @@ class MenuSmile extends React.Component<I.Menu, State> {
 		const node = $(this.node);
 		const zone = node.find('.dropzone');
 		
-		zone.removeClass('isDraggingOver');
 		preventCommonDrop(true);
+
+		zone.removeClass('isDraggingOver');
 		this.setState({ isLoading: true });
 		
 		C.FileUpload(commonStore.space, '', file, I.FileType.Image, (message: any) => {

src/ts/component/popup/search.tsx

@@ -518,8 +518,6 @@ const PopupSearch = observer(class PopupSearch extends React.Component<I.Popup,
 		} else 
 		if (item.isSettings) {
 			window.setTimeout(() => {
-				console.log(item);
-
 				popupStore.open('settings', { data: { page: item.id, isSpace: item.isSpace }, className: item.className });
 			}, Constant.delay.popup);
 		} else 

src/ts/component/util/iconEmoji.tsx

@@ -11,7 +11,6 @@ interface Props {
 	iconClass?: string;
 	hash?: string;
 	size?: number;
-	native?: boolean;
 	asImage?: boolean;
 	className?: string;
 	canEdit?: boolean;
@@ -32,12 +31,11 @@ const IconEmoji = observer(class IconEmoji extends React.Component<Props> {
 		offsetY: 0,
 		size: 18,
 		className: '',
-		native: true,
 		asImage: true,
 	};
 	
 	render () {
-		const { id, size, icon, hash, native, asImage, className, canEdit, menuId, iconClass } = this.props;
+		const { id, size, icon, hash, asImage, className, canEdit, menuId, iconClass } = this.props;
 		const cn = [ 'iconEmoji' ];
 		const css = { lineHeight: size + 'px' };
 
@@ -52,25 +50,22 @@ const IconEmoji = observer(class IconEmoji extends React.Component<Props> {
 		};
 
 		let element = null;
-		let skin = 0;
-
 		if (icon) {
-			let colons = '';
+			let shortcodes = '';
 			if (icon.match(':')) {
-				colons = icon;
+				shortcodes = icon;
 			} else {
 				const data = UtilSmile.getData(icon);
-				if (data) {
-					colons = data.colons;
-					skin = data.skin;
+				if (data && data.skin) {
+					shortcodes = data.skin.shortcodes;
 				};
 			};
 
-			if (colons) {
+			if (shortcodes) {
 				if (asImage) {
-					element = <img src={UtilSmile.srcFromColons(colons, skin)} className={[ 'smileImage', 'c' + size ].join(' ')} onDragStart={(e: any) => { e.preventDefault(); }} />;
+					element = <img src={UtilSmile.srcFromColons(shortcodes)} className={[ 'smileImage', 'c' + size ].join(' ')} onDragStart={(e: any) => { e.preventDefault(); }} />;
 				} else {
-					//element = <Emoji native={native} emoji={colons} set="apple" size={size} />;
+					element = <em-emoji shortcodes={shortcodes}></em-emoji>;
 				};
 			};
 		} else 

src/ts/lib/util/graph.ts

@@ -61,8 +61,8 @@ class UtilGraph {
 				} else
 				if (d.iconEmoji) {
 					const data = UtilSmile.getData(d.iconEmoji);
-					if (data) {
-						src = UtilSmile.srcFromColons(data.colons, data.skin);
+					if (data && data.skin) {
+						src = UtilSmile.srcFromColons(data.skin.shortcodes);
 					};
 					src = src.replace(/^.\//, '');
 				} else

src/ts/lib/util/smile.ts

@@ -1,31 +1,9 @@
 import { UtilCommon, translate } from 'Lib';
-import { getEmojiDataFromNative, init } from 'emoji-mart';
-import EmojiData from 'json/emoji.json';
+import { init } from 'emoji-mart';
 import data from '@emoji-mart/data';
 
-const MAX_SIZE = 0x4000;
-const SKINS = [ '1F3FA', '1F3FB', '1F3FC', '1F3FD', '1F3FE', '1F3FF' ];
 const DIV = 65039;
 const CAP = 8419;
-const DIV_UNI = '-200d-';
-
-const Mapping = {
-	a: 'name',
-	b: 'unified',
-	c: 'non_qualified',
-	d: 'has_img_apple',
-	e: 'has_img_google',
-	f: 'has_img_twitter',
-	g: 'has_img_emojione',
-	h: 'has_img_facebook',
-	i: 'has_img_messenger',
-	j: 'keywords',
-	k: 'sheet',
-	l: 'emoticons',
-	m: 'text',
-	n: 'short_names',
-	o: 'added_in',
-};
 
 class UtilSmile {
 
@@ -34,63 +12,10 @@ class UtilSmile {
 	data: any = {};
 
 	constructor () {
-		this.icons = Object.keys(EmojiData.emojis);
-
 		init({ data });
 
 		this.data = data;
-		console.log(data);
-	};
-
-	unifiedToNative (uni: string): string {
-		uni = String(uni || '');
-		return uni ? this.stringFromCodePoint(uni.split('-').map((u) => `0x${u}`)) : '';
-	};
-
-	stringFromCodePoint (points: any[]): string {
-		if (!points.length) {
-			return '';
-		};
-
-		const codeUnits = [];
-		const length = points.length;
-
-		let highSurrogate;
-		let lowSurrogate;
-		let index = -1;
-		let result = '';
-		
-		while (++index < length) {
-			let point = Number(points[index]);
-			if (
-				!isFinite(point) || // `NaN`, `+Infinity`, or `-Infinity`
-				point < 0 || // not a valid Unicode code point
-				point > 0x10ffff || // not a valid Unicode code point
-				Math.floor(point) != point // not an integer
-			) {
-				throw RangeError('Invalid code point: ' + point);
-			};
-
-			if (point <= 0xffff) {
-				// BMP code point
-				codeUnits.push(point);
-			} else {
-				// Astral code point; split in surrogate halves
-				// http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
-
-				point -= 0x10000;
-				highSurrogate = (point >> 10) + 0xd800;
-				lowSurrogate = (point % 0x400) + 0xdc00;
-				codeUnits.push(highSurrogate, lowSurrogate);
-			};
-
-			if ((index + 1 === length) || (codeUnits.length > MAX_SIZE)) {
-				result += String.fromCharCode.apply(null, codeUnits);
-				codeUnits.length = 0;
-			};
-		};
-
-		return result;
+		this.icons = Object.keys(this.data.emojis);
 	};
 
 	nativeById (id: string, skin: number): string {
@@ -98,31 +23,22 @@ class UtilSmile {
 			return '';
 		};
 
-		const item = this.uncompress(EmojiData.emojis[id]);
+		const item = this.data.emojis[id];
 		if (!item) {
 			return '';
 		};
 
-		let uni = item.unified;
-		if (item.skin_variations && (skin > 1)) {
-			const skinCode = SKINS[(skin - 1)];
-			const skinItem = item.skin_variations[skinCode];
-			if (skinItem && skinItem.unified) {
-				uni = skinItem.unified;
-			};
+		skin = Number(skin) || 1;
+		if (skin > item.skins.length) {
+			skin = 1;
 		};
-		return this.unifiedToNative(uni);
-	};
 
-	uncompress (item: any) {
-		for (const key in item) {
-			if (!Mapping[key]) {
-				continue;
-			};
-			item[Mapping[key]] = item[key];
-			delete(item[key]);
+		const skinItem = item.skins[(skin - 1)];
+		if (!skinItem) {
+			return '';
 		};
-		return item;
+
+		return skinItem.native;
 	};
 
 	randomParam (): { id: string, skin: number } {
@@ -137,7 +53,7 @@ class UtilSmile {
 		return this.nativeById(param.id, param.skin);
 	};
 
-	srcFromColons (colons: string, skin: number) {
+	srcFromColons (colons: string) {
 		if (!colons) {
 			return '';
 		};
@@ -150,15 +66,15 @@ class UtilSmile {
 			return '';
 		};
 
-		skin = skin || Number(String(parts[1] || '').replace(/skin-([\d]+):/, '$1')) || 0;
-
+		let skin = Number(String(parts[1] || '').replace(/skin-tone-([\d]+):/, '$1')) || 1;
 		let code = '';
-		if (item.skins) {
-			if (skin > item.skins.length - 1) {
-				skin = 0;
+
+		if (item.skins && item.skins.length) {
+			if (skin > item.skins.length) {
+				skin = 1;
 			};
 
-			const s = item.skins[skin];
+			const s = item.skins[(skin - 1)];
 			if (s) {
 				code = s.unified;
 			};
@@ -211,8 +127,8 @@ class UtilSmile {
 		} catch (e) { /**/ };
 
 		if (data) {
-			this.cache[icon] = { colons: data.colons, skin: data.skin };
-			return this.cache[icon];
+			this.cache[icon] = data;
+			return data;
 		} else {
 			return {};
 		};