diff options
author | Dessalines <tyhou13@gmx.com> | 2020-04-14 16:07:20 -0400 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2020-04-14 16:07:20 -0400 |
commit | 1336b4ed6023e7fcf0fd40be63569966ee4b1b45 (patch) | |
tree | e62e4422e0ba0430ea6d060f01d20dee22d6e564 /ui/src/components/post-form.tsx | |
parent | f040dac647d50c97e3f9ab8058563a7fe0f29261 (diff) | |
parent | 641e4c5d96d9d152bc75318b3ea08f789d920b2b (diff) |
Merge branch 'dev' into federation
Diffstat (limited to 'ui/src/components/post-form.tsx')
-rw-r--r-- | ui/src/components/post-form.tsx | 43 |
1 files changed, 38 insertions, 5 deletions
diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx index 47920b9b..4dbc8b23 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) { @@ -190,8 +194,9 @@ export class PostForm extends Component<PostFormProps, PostFormState> { <form> <label htmlFor="file-upload" - className={`${UserService.Instance.user && - 'pointer'} d-inline-block float-right text-muted h6 font-weight-bold`} + className={`${ + UserService.Instance.user && 'pointer' + } d-inline-block float-right text-muted font-weight-bold`} data-tippy-content={i18n.t('upload_image')} > <svg class="icon icon-inline"> @@ -284,8 +289,9 @@ export class PostForm extends Component<PostFormProps, PostFormState> { )} {this.state.postForm.body && ( <button - className={`mt-1 mr-2 btn btn-sm btn-secondary ${this.state - .previewMode && 'active'}`} + className={`mt-1 mr-2 btn btn-sm btn-secondary ${ + this.state.previewMode && 'active' + }`} onClick={linkEvent(this, this.handlePreviewToggle)} > {i18n.t('preview')} @@ -294,13 +300,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 +384,20 @@ export class PostForm extends Component<PostFormProps, PostFormState> { ); } + 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(); if (i.props.post) { @@ -512,6 +541,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) { |