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/post-form.tsx | |
parent | ed264aba3c12243352f68c2de6a5f21f23778bd0 (diff) |
Add Emoji squashed commit.
Diffstat (limited to 'ui/src/components/post-form.tsx')
-rw-r--r-- | ui/src/components/post-form.tsx | 32 |
1 files changed, 30 insertions, 2 deletions
diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx index 47920b9b..a65ead46 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<PostFormProps, PostFormState> { 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<PostFormProps, PostFormState> { <label htmlFor="file-upload" className={`${UserService.Instance.user && - 'pointer'} d-inline-block float-right text-muted h6 font-weight-bold`} + 'pointer'} d-inline-block float-right text-muted font-weight-bold`} data-tippy-content={i18n.t('upload_image')} > <svg class="icon icon-inline"> @@ -294,13 +298,22 @@ export class PostForm extends Component<PostFormProps, PostFormState> { <a href={markdownHelpUrl} target="_blank" - class="d-inline-block float-right text-muted h6 font-weight-bold" + class="d-inline-block float-right text-muted font-weight-bold" title={i18n.t('formatting_help')} > <svg class="icon icon-inline"> <use xlinkHref="#icon-help-circle"></use> </svg> </a> + <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> {!this.props.post && ( @@ -369,6 +382,17 @@ export class PostForm extends Component<PostFormProps, PostFormState> { ); } + setupEmojiPicker() { + emojiPicker.on('emoji', emoji => { + if (this.state.postForm.body == null) { + this.state.postForm.body = ''; + } + let shortName = `:${emojiShortName[emoji]}:`; + this.state.postForm.body += shortName; + this.setState(this.state); + }); + } + handlePostSubmit(i: PostForm, event: any) { event.preventDefault(); if (i.props.post) { @@ -512,6 +536,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> { }); } + handleEmojiPickerClick(_i: PostForm, event: any) { + emojiPicker.togglePicker(event.target); + } + parseMessage(msg: WebSocketJsonResponse) { let res = wsJsonToRes(msg); if (msg.error) { |