From db09730d5f391c37bde87f59ed2ea6f3418034e4 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Thu, 9 Jul 2020 13:32:23 -0400 Subject: [PATCH] Removing twemoji, and the massive emoji picker. Fixes #895 --- ui/package.json | 2 - ui/src/components/comment-form.tsx | 29 -------- ui/src/components/post-form.tsx | 29 -------- ui/src/utils.ts | 17 +---- ui/yarn.lock | 110 +---------------------------- 5 files changed, 3 insertions(+), 184 deletions(-) diff --git a/ui/package.json b/ui/package.json index 0101ce13a..2819433ad 100644 --- a/ui/package.json +++ b/ui/package.json @@ -15,7 +15,6 @@ }, "keywords": [], "dependencies": { - "@joeattardi/emoji-button": "^2.12.1", "@types/autosize": "^3.0.6", "@types/js-cookie": "^2.2.6", "@types/jwt-decode": "^2.2.1", @@ -47,7 +46,6 @@ "tippy.js": "^6.1.1", "toastify-js": "^1.7.0", "tributejs": "^5.1.3", - "twemoji": "^12.1.2", "ws": "^7.2.3" }, "devDependencies": { diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx index 32bc37860..22f871d22 100644 --- a/ui/src/components/comment-form.tsx +++ b/ui/src/components/comment-form.tsx @@ -17,7 +17,6 @@ import { toast, setupTribute, wsJsonToRes, - emojiPicker, pictrsDeleteToast, } from '../utils'; import { WebSocketService, UserService } from '../services'; @@ -72,7 +71,6 @@ export class CommentForm extends Component { super(props, context); this.tribute = setupTribute(); - this.setupEmojiPicker(); this.state = this.emptyState; @@ -241,15 +239,6 @@ export class CommentForm extends Component { )} - - - - - @@ -257,20 +246,6 @@ export class CommentForm extends Component { ); } - setupEmojiPicker() { - emojiPicker.on('emoji', twemojiHtmlStr => { - if (this.state.commentForm.content == null) { - this.state.commentForm.content = ''; - } - var el = document.createElement('div'); - el.innerHTML = twemojiHtmlStr; - let nativeUnicode = (el.childNodes[0] as HTMLElement).getAttribute('alt'); - let shortName = `:${emojiShortName[nativeUnicode]}:`; - this.state.commentForm.content += shortName; - this.setState(this.state); - }); - } - handleFinished(op: UserOperation, data: CommentResponse) { let isReply = this.props.node !== undefined && data.comment.parent_id !== null; @@ -318,10 +293,6 @@ export class CommentForm extends Component { i.setState(i.state); } - handleEmojiPickerClick(_i: CommentForm, event: any) { - emojiPicker.togglePicker(event.target); - } - handleCommentContentChange(i: CommentForm, event: any) { i.state.commentForm.content = event.target.value; i.setState(i.state); diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx index a88d38c7e..fc7884d78 100644 --- a/ui/src/components/post-form.tsx +++ b/ui/src/components/post-form.tsx @@ -33,7 +33,6 @@ import { randomStr, setupTribute, setupTippy, - emojiPicker, hostname, pictrsDeleteToast, } from '../utils'; @@ -95,7 +94,6 @@ export class PostForm extends Component { this.fetchPageTitle = debounce(this.fetchPageTitle).bind(this); this.tribute = setupTribute(); - this.setupEmojiPicker(); this.state = this.emptyState; @@ -332,15 +330,6 @@ export class PostForm extends Component { - - - - - {!this.props.post && ( @@ -420,20 +409,6 @@ export class PostForm extends Component { ); } - setupEmojiPicker() { - emojiPicker.on('emoji', twemojiHtmlStr => { - if (this.state.postForm.body == null) { - this.state.postForm.body = ''; - } - var el = document.createElement('div'); - el.innerHTML = twemojiHtmlStr; - let nativeUnicode = (el.childNodes[0] as HTMLElement).getAttribute('alt'); - let shortName = `:${emojiShortName[nativeUnicode]}:`; - this.state.postForm.body += shortName; - this.setState(this.state); - }); - } - handlePostSubmit(i: PostForm, event: any) { event.preventDefault(); @@ -596,10 +571,6 @@ export class PostForm extends Component { }); } - handleEmojiPickerClick(_i: PostForm, event: any) { - emojiPicker.togglePicker(event.target); - } - parseMessage(msg: WebSocketJsonResponse) { let res = wsJsonToRes(msg); if (msg.error) { diff --git a/ui/src/utils.ts b/ui/src/utils.ts index 3b0777944..b3d0f3680 100644 --- a/ui/src/utils.ts +++ b/ui/src/utils.ts @@ -51,11 +51,9 @@ import Tribute from 'tributejs/src/Tribute.js'; import markdown_it from 'markdown-it'; import markdownitEmoji from 'markdown-it-emoji/light'; import markdown_it_container from 'markdown-it-container'; -import twemoji from 'twemoji'; import emojiShortName from 'emoji-short-name'; import Toastify from 'toastify-js'; import tippy from 'tippy.js'; -import EmojiButton from '@joeattardi/emoji-button'; export const repoUrl = 'https://github.com/LemmyNet/lemmy'; export const helpGuideUrl = '/docs/about_guide.html'; @@ -114,14 +112,6 @@ export const themes = [ 'litely', ]; -export const emojiPicker = new EmojiButton({ - // Use the emojiShortName from native - style: 'twemoji', - theme: 'dark', - position: 'auto-start', - // TODO i18n -}); - const DEFAULT_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; @@ -178,10 +168,6 @@ export const md = new markdown_it({ defs: objectFlip(emojiShortName), }); -md.renderer.rules.emoji = function (token, idx) { - return twemoji.parse(token[idx].content); -}; - export function hotRankComment(comment: Comment): number { return hotRank(comment.score, comment.published); } @@ -590,8 +576,7 @@ export function setupTribute(): Tribute { trigger: ':', menuItemTemplate: (item: any) => { let shortName = `:${item.original.key}:`; - let twemojiIcon = twemoji.parse(item.original.val); - return `${twemojiIcon} ${shortName}`; + return `${item.original.val} ${shortName}`; }, selectTemplate: (item: any) => { return `:${item.original.key}:`; diff --git a/ui/yarn.lock b/ui/yarn.lock index 076083fb9..aa8ef7d4f 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -359,32 +359,6 @@ exec-sh "^0.3.2" minimist "^1.2.0" -"@fortawesome/fontawesome-common-types@^0.2.28": - version "0.2.28" - resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz#1091bdfe63b3f139441e9cba27aa022bff97d8b2" - integrity sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg== - -"@fortawesome/fontawesome-svg-core@^1.2.22": - version "1.2.28" - resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz#e5b8c8814ef375f01f5d7c132d3c3a2f83a3abf9" - integrity sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg== - dependencies: - "@fortawesome/fontawesome-common-types" "^0.2.28" - -"@fortawesome/free-regular-svg-icons@^5.10.2": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.13.0.tgz#925a13d8bdda0678f71551828cac80ab47b8150c" - integrity sha512-70FAyiS5j+ANYD4dh9NGowTorNDnyvQHHpCM7FpnF7GxtDjBUCKdrFqCPzesEIpNDFNd+La3vex+jDk4nnUfpA== - dependencies: - "@fortawesome/fontawesome-common-types" "^0.2.28" - -"@fortawesome/free-solid-svg-icons@^5.10.2": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz#44d9118668ad96b4fd5c9434a43efc5903525739" - integrity sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg== - dependencies: - "@fortawesome/fontawesome-common-types" "^0.2.28" - "@istanbuljs/load-nyc-config@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.0.0.tgz#10602de5570baea82f8afbfa2630b24e7a8cfe5b" @@ -557,25 +531,6 @@ "@types/yargs" "^15.0.0" chalk "^3.0.0" -"@joeattardi/emoji-button@^2.12.1": - version "2.12.1" - resolved "https://registry.yarnpkg.com/@joeattardi/emoji-button/-/emoji-button-2.12.1.tgz#190df7c00721e04742ed6f8852db828798a4cf98" - integrity sha512-rUuCXIcv4mRFK2IUKarYJN6J667wtH234smb1aQILzRf3/ycOoa6yUwnnvjxZeXMsPhuTnz15ndMOP2DhO5nNw== - dependencies: - "@fortawesome/fontawesome-svg-core" "^1.2.22" - "@fortawesome/free-regular-svg-icons" "^5.10.2" - "@fortawesome/free-solid-svg-icons" "^5.10.2" - "@popperjs/core" "^2.0.0" - focus-trap "^5.1.0" - tiny-emitter "^2.1.0" - tslib "^1.10.0" - twemoji "^12.1.5" - -"@popperjs/core@^2.0.0": - version "2.2.3" - resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.2.3.tgz#0ae22b5650ab0b8fe508047245b66e71fc59e983" - integrity sha512-68EQPzEZRrpFavFX40V2+80eqzQIhgza2AGTXW+i8laxSA4It+Y13rmZInrAYoIujp8YO7YJPbvgOesDZcIulQ== - "@popperjs/core@^2.2.0": version "2.3.2" resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.3.2.tgz#1e56eb99bccddbda6a3e29aa4f3660f5b23edc43" @@ -2660,14 +2615,6 @@ fliplog@^0.3.13: dependencies: chain-able "^1.0.1" -focus-trap@^5.1.0: - version "5.1.0" - resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-5.1.0.tgz#64a0bfabd95c382103397dbc96bfef3a3cf8e5ad" - integrity sha512-CkB/nrO55069QAUjWFBpX6oc+9V90Qhgpe6fBWApzruMq5gnlh90Oo7iSSDK7pKiV5ugG6OY2AXM5mxcmL3lwQ== - dependencies: - tabbable "^4.0.0" - xtend "^4.0.1" - for-in@^1.0.1, for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" @@ -2729,15 +2676,6 @@ fs-extra@^7.0.0: jsonfile "^4.0.0" universalify "^0.1.0" -fs-extra@^8.0.1: - version "8.1.0" - resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0" - integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g== - dependencies: - graceful-fs "^4.2.0" - jsonfile "^4.0.0" - universalify "^0.1.0" - fs.realpath@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" @@ -2909,7 +2847,7 @@ globals@^12.1.0: dependencies: type-fest "^0.8.1" -graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.3: +graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423" integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ== @@ -4085,15 +4023,6 @@ jsonfile@^4.0.0: optionalDependencies: graceful-fs "^4.1.6" -jsonfile@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-5.0.0.tgz#e6b718f73da420d612823996fdf14a03f6ff6922" - integrity sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w== - dependencies: - universalify "^0.1.2" - optionalDependencies: - graceful-fs "^4.1.6" - jsprim@^1.2.2: version "1.4.1" resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2" @@ -6164,11 +6093,6 @@ symbol-tree@^3.2.2: resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2" integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw== -tabbable@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-4.0.0.tgz#5bff1d1135df1482cf0f0206434f15eadbeb9261" - integrity sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ== - table@^5.2.3: version "5.4.6" resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e" @@ -6220,11 +6144,6 @@ through@^2.3.6: resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU= -tiny-emitter@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423" - integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q== - tiny-invariant@^1.0.2: version "1.1.0" resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875" @@ -6376,11 +6295,6 @@ ts-transform-inferno@^4.0.3: resolved "https://registry.yarnpkg.com/ts-transform-inferno/-/ts-transform-inferno-4.0.3.tgz#2cc0eb125abdaff24b8298106a618ab7c6319edc" integrity sha512-Pcg0PVQwJ7Fpv4+3R9obFNsrNKQyLbmUqsjeG7T7r4/4UTgIl0MSwurexjtuGpCp2iv2X/i9ffKPAfAOyYJ9og== -tslib@^1.10.0: - version "1.11.1" - resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35" - integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA== - tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0: version "1.10.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" @@ -6405,21 +6319,6 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0: resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64" integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q= -twemoji-parser@12.1.3: - version "12.1.3" - resolved "https://registry.yarnpkg.com/twemoji-parser/-/twemoji-parser-12.1.3.tgz#916c0153e77bd5f1011e7a99cbeacf52e43c9371" - integrity sha512-ND4LZXF4X92/PFrzSgGkq6KPPg8swy/U0yRw1k/+izWRVmq1HYi3khPwV3XIB6FRudgVICAaBhJfW8e8G3HC7Q== - -twemoji@^12.1.2, twemoji@^12.1.5: - version "12.1.5" - resolved "https://registry.yarnpkg.com/twemoji/-/twemoji-12.1.5.tgz#a961fb65a1afcb1f729ad7e59391f9fe969820b9" - integrity sha512-B0PBVy5xomwb1M/WZxf/IqPZfnoIYy1skXnlHjMwLwTNfZ9ljh8VgWQktAPcJXu8080WoEh6YwQGPVhDVqvrVQ== - dependencies: - fs-extra "^8.0.1" - jsonfile "^5.0.0" - twemoji-parser "12.1.3" - universalify "^0.1.2" - type-check@~0.3.2: version "0.3.2" resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72" @@ -6505,7 +6404,7 @@ union-value@^1.0.0: is-extendable "^0.1.1" set-value "^2.0.1" -universalify@^0.1.0, universalify@^0.1.2: +universalify@^0.1.0: version "0.1.2" resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66" integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg== @@ -6761,11 +6660,6 @@ xregexp@^4.3.0: dependencies: "@babel/runtime-corejs3" "^7.8.3" -xtend@^4.0.1: - version "4.0.2" - resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54" - integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ== - y18n@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"