import { Component, linkEvent } from 'inferno'; import { CommentNode as CommentNodeI, CommentForm as CommentFormI, } from '../interfaces'; import { capitalizeFirstLetter, mdToHtml, randomStr, markdownHelpUrl, toast, setupTribute, } from '../utils'; import { WebSocketService, UserService } from '../services'; import autosize from 'autosize'; import Tribute from 'tributejs/src/Tribute.js'; import { i18n } from '../i18next'; 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 tribute: Tribute; 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 = setupTribute(); 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 (