diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx index 2095e9e5f..bebe62694 100644 --- a/ui/src/components/comment-form.tsx +++ b/ui/src/components/comment-form.tsx @@ -1,7 +1,22 @@ import { Component, linkEvent } from 'inferno'; -import { CommentNode as CommentNodeI, CommentForm as CommentFormI, SearchForm, SearchType, SortType, UserOperation, SearchResponse } from '../interfaces'; -import { Subscription } from "rxjs"; -import { capitalizeFirstLetter, mentionDropdownFetchLimit, msgOp, mdToHtml, randomStr, markdownHelpUrl } from '../utils'; +import { + CommentNode as CommentNodeI, + CommentForm as CommentFormI, + SearchForm, + SearchType, + SortType, + UserOperation, + SearchResponse, +} from '../interfaces'; +import { Subscription } from 'rxjs'; +import { + capitalizeFirstLetter, + mentionDropdownFetchLimit, + msgOp, + mdToHtml, + randomStr, + markdownHelpUrl, +} from '../utils'; import { WebSocketService, UserService } from '../services'; import * as autosize from 'autosize'; import { i18n } from '../i18next'; @@ -25,7 +40,6 @@ interface CommentFormState { } export class CommentForm extends Component { - private id = `comment-form-${randomStr()}`; private userSub: Subscription; private communitySub: Subscription; @@ -34,13 +48,21 @@ export class CommentForm extends Component { commentForm: { auth: null, content: null, - post_id: this.props.node ? this.props.node.comment.post_id : this.props.postId, - creator_id: UserService.Instance.user ? UserService.Instance.user.id : null, + post_id: this.props.node + ? this.props.node.comment.post_id + : this.props.postId, + creator_id: UserService.Instance.user + ? UserService.Instance.user.id + : null, }, - buttonTitle: !this.props.node ? capitalizeFirstLetter(i18n.t('post')) : this.props.edit ? capitalizeFirstLetter(i18n.t('edit')) : capitalizeFirstLetter(i18n.t('reply')), + buttonTitle: !this.props.node + ? capitalizeFirstLetter(i18n.t('post')) + : this.props.edit + ? capitalizeFirstLetter(i18n.t('edit')) + : capitalizeFirstLetter(i18n.t('reply')), previewMode: false, imageLoading: false, - } + }; constructor(props: any, context: any) { super(props, context); @@ -57,7 +79,9 @@ export class CommentForm extends Component { selectTemplate: (item: any) => { return `:${item.original.key}:`; }, - values: Object.entries(emojiShortName).map(e => {return {'key': e[1], 'val': e[0]}}), + values: Object.entries(emojiShortName).map(e => { + return { key: e[1], val: e[0] }; + }), allowSpaces: false, autocompleteMode: true, menuItemLimit: mentionDropdownFetchLimit, @@ -88,8 +112,8 @@ export class CommentForm extends Component { allowSpaces: false, autocompleteMode: true, menuItemLimit: mentionDropdownFetchLimit, - } - ] + }, + ], }); this.state = this.emptyState; @@ -104,7 +128,7 @@ export class CommentForm extends Component { // A reply gets a new parent id this.state.commentForm.parent_id = this.props.node.comment.id; } - } + } } componentDidMount() { @@ -124,27 +148,82 @@ export class CommentForm extends Component {
-