diff options
author | Dessalines <tyhou13@gmx.com> | 2020-04-12 12:47:48 -0400 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2020-04-12 12:47:48 -0400 |
commit | d6d040f5da2317af19b3df426556914d1b2a14fe (patch) | |
tree | 2a728cae456eef538b7e6c1df4a515ce6396e95e /ui/src/components/comment-form.tsx | |
parent | ed264aba3c12243352f68c2de6a5f21f23778bd0 (diff) |
Add Emoji squashed commit.
Diffstat (limited to 'ui/src/components/comment-form.tsx')
-rw-r--r-- | ui/src/components/comment-form.tsx | 28 |
1 files changed, 28 insertions, 0 deletions
diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx index ae3e7cfc..6898ebc7 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<CommentFormProps, CommentFormState> { 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<CommentFormProps, CommentFormState> { <use xlinkHref="#icon-spinner"></use> </svg> )} + <span + onClick={linkEvent(this, this.handleEmojiPickerClick)} + class="pointer unselectable d-inline-block mr-3 float-right text-muted font-weight-bold" + data-tippy-content={i18n.t('emoji_picker')} + > + <svg class="icon icon-inline"> + <use xlinkHref="#icon-smile"></use> + </svg> + </span> </div> </div> </form> @@ -216,6 +229,17 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { ); } + 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<CommentFormProps, CommentFormState> { 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); |