import { Component, linkEvent } from 'inferno'; import { CommentNode as CommentNodeI, CommentForm as CommentFormI, SearchForm, SearchType, SortType, UserOperation, SearchResponse, } from '../interfaces'; import { Subscription } from 'rxjs'; import { wsJsonToRes, capitalizeFirstLetter, mentionDropdownFetchLimit, mdToHtml, randomStr, markdownHelpUrl, } from '../utils'; import { WebSocketService, UserService } from '../services'; import autosize from 'autosize'; import { i18n } from '../i18next'; import { T } from 'inferno-i18next'; import Tribute from 'tributejs/src/Tribute.js'; import emojiShortName from 'emoji-short-name'; interface CommentFormProps { postId?: number; node?: CommentNodeI; onReplyCancel?(): any; edit?: boolean; disabled?: boolean; } interface CommentFormState { commentForm: CommentFormI; buttonTitle: string; previewMode: boolean; imageLoading: boolean; } export class CommentForm extends Component { private id = `comment-form-${randomStr()}`; private userSub: Subscription; private communitySub: Subscription; private tribute: any; private emptyState: CommentFormState = { 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, }, 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); this.tribute = new Tribute({ collection: [ // Emojis { trigger: ':', menuItemTemplate: (item: any) => { let emoji = `:${item.original.key}:`; return `${item.original.val} ${emoji}`; }, selectTemplate: (item: any) => { return `:${item.original.key}:`; }, values: Object.entries(emojiShortName).map(e => { return { key: e[1], val: e[0] }; }), allowSpaces: false, autocompleteMode: true, menuItemLimit: mentionDropdownFetchLimit, }, // Users { trigger: '@', selectTemplate: (item: any) => { return `[/u/${item.original.key}](/u/${item.original.key})`; }, values: (text: string, cb: any) => { this.userSearch(text, (users: any) => cb(users)); }, allowSpaces: false, autocompleteMode: true, menuItemLimit: mentionDropdownFetchLimit, }, // Communities { trigger: '#', selectTemplate: (item: any) => { return `[/c/${item.original.key}](/c/${item.original.key})`; }, values: (text: string, cb: any) => { this.communitySearch(text, (communities: any) => cb(communities)); }, allowSpaces: false, autocompleteMode: true, menuItemLimit: mentionDropdownFetchLimit, }, ], }); this.state = this.emptyState; if (this.props.node) { if (this.props.edit) { this.state.commentForm.edit_id = this.props.node.comment.id; this.state.commentForm.parent_id = this.props.node.comment.parent_id; this.state.commentForm.content = this.props.node.comment.content; this.state.commentForm.creator_id = this.props.node.comment.creator_id; } else { // A reply gets a new parent id this.state.commentForm.parent_id = this.props.node.comment.id; } } } componentDidMount() { var textarea: any = document.getElementById(this.id); autosize(textarea); this.tribute.attach(textarea); textarea.addEventListener('tribute-replaced', () => { this.state.commentForm.content = textarea.value; this.setState(this.state); autosize.update(textarea); }); } render() { return (