From e9535cd01de93c9b72563396cf6258d2cca95aab Mon Sep 17 00:00:00 2001 From: Dessalines Date: Sat, 11 Apr 2020 23:22:46 -0400 Subject: [PATCH] Add Emoji Picker for comments and post body. - Fixes #634 --- ui/assets/css/main.css | 2 +- ui/package.json | 1 + ui/src/components/comment-form.tsx | 28 +++++++++++ ui/src/components/post-form.tsx | 32 ++++++++++++- ui/src/components/symbols.tsx | 3 ++ ui/src/utils.ts | 9 ++++ ui/translations/en.json | 1 + ui/yarn.lock | 75 +++++++++++++++++++++++++++++- 8 files changed, 147 insertions(+), 4 deletions(-) diff --git a/ui/assets/css/main.css b/ui/assets/css/main.css index 1c8206e35..bf249e5bf 100644 --- a/ui/assets/css/main.css +++ b/ui/assets/css/main.css @@ -156,7 +156,7 @@ hr { } .emoji { - height: 1.2em !important; + max-height: 1.2em !important; } .text-wrap-truncate { diff --git a/ui/package.json b/ui/package.json index 7d946614c..25ee2e00d 100644 --- a/ui/package.json +++ b/ui/package.json @@ -14,6 +14,7 @@ }, "keywords": [], "dependencies": { + "@joeattardi/emoji-button": "^2.12.1", "@types/autosize": "^3.0.6", "@types/js-cookie": "^2.2.5", "@types/jwt-decode": "^2.2.1", diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx index ae3e7cfc3..6898ebc79 100644 --- a/ui/src/components/comment-form.tsx +++ b/ui/src/components/comment-form.tsx @@ -17,10 +17,12 @@ import { toast, setupTribute, wsJsonToRes, + emojiPicker, } from '../utils'; import { WebSocketService, UserService } from '../services'; import autosize from 'autosize'; import Tribute from 'tributejs/src/Tribute.js'; +import emojiShortName from 'emoji-short-name'; import { i18n } from '../i18next'; interface CommentFormProps { @@ -69,6 +71,8 @@ export class CommentForm extends Component { super(props, context); this.tribute = setupTribute(); + this.setupEmojiPicker(); + this.state = this.emptyState; if (this.props.node) { @@ -209,6 +213,15 @@ export class CommentForm extends Component { )} + + + + + @@ -216,6 +229,17 @@ export class CommentForm extends Component { ); } + setupEmojiPicker() { + emojiPicker.on('emoji', emoji => { + if (this.state.commentForm.content == null) { + this.state.commentForm.content = ''; + } + let shortName = `:${emojiShortName[emoji]}:`; + this.state.commentForm.content += shortName; + this.setState(this.state); + }); + } + handleFinished() { this.state.previewMode = false; this.state.loading = false; @@ -242,6 +266,10 @@ 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 47920b9b4..a65ead462 100644 --- a/ui/src/components/post-form.tsx +++ b/ui/src/components/post-form.tsx @@ -34,9 +34,11 @@ import { randomStr, setupTribute, setupTippy, + emojiPicker, } from '../utils'; import autosize from 'autosize'; import Tribute from 'tributejs/src/Tribute.js'; +import emojiShortName from 'emoji-short-name'; import Selectr from 'mobius1-selectr'; import { i18n } from '../i18next'; @@ -92,6 +94,8 @@ export class PostForm extends Component { this.fetchPageTitle = debounce(this.fetchPageTitle).bind(this); this.tribute = setupTribute(); + this.setupEmojiPicker(); + this.state = this.emptyState; if (this.props.post) { @@ -191,7 +195,7 @@ export class PostForm extends Component {