]> Untitled Git - lemmy.git/blob - ui/src/components/comment-form.tsx
A first pass at adding icons, and tippy tooltips.
[lemmy.git] / ui / src / components / comment-form.tsx
1 import { Component, linkEvent } from 'inferno';
2 import {
3   CommentNode as CommentNodeI,
4   CommentForm as CommentFormI,
5 } from '../interfaces';
6 import {
7   capitalizeFirstLetter,
8   mdToHtml,
9   randomStr,
10   markdownHelpUrl,
11   toast,
12   setupTribute,
13 } from '../utils';
14 import { WebSocketService, UserService } from '../services';
15 import autosize from 'autosize';
16 import Tribute from 'tributejs/src/Tribute.js';
17 import { i18n } from '../i18next';
18
19 interface CommentFormProps {
20   postId?: number;
21   node?: CommentNodeI;
22   onReplyCancel?(): any;
23   edit?: boolean;
24   disabled?: boolean;
25 }
26
27 interface CommentFormState {
28   commentForm: CommentFormI;
29   buttonTitle: string;
30   previewMode: boolean;
31   imageLoading: boolean;
32 }
33
34 export class CommentForm extends Component<CommentFormProps, CommentFormState> {
35   private id = `comment-form-${randomStr()}`;
36   private tribute: Tribute;
37   private emptyState: CommentFormState = {
38     commentForm: {
39       auth: null,
40       content: null,
41       post_id: this.props.node
42         ? this.props.node.comment.post_id
43         : this.props.postId,
44       creator_id: UserService.Instance.user
45         ? UserService.Instance.user.id
46         : null,
47     },
48     buttonTitle: !this.props.node
49       ? capitalizeFirstLetter(i18n.t('post'))
50       : this.props.edit
51       ? capitalizeFirstLetter(i18n.t('edit'))
52       : capitalizeFirstLetter(i18n.t('reply')),
53     previewMode: false,
54     imageLoading: false,
55   };
56
57   constructor(props: any, context: any) {
58     super(props, context);
59
60     this.tribute = setupTribute();
61     this.state = this.emptyState;
62
63     if (this.props.node) {
64       if (this.props.edit) {
65         this.state.commentForm.edit_id = this.props.node.comment.id;
66         this.state.commentForm.parent_id = this.props.node.comment.parent_id;
67         this.state.commentForm.content = this.props.node.comment.content;
68         this.state.commentForm.creator_id = this.props.node.comment.creator_id;
69       } else {
70         // A reply gets a new parent id
71         this.state.commentForm.parent_id = this.props.node.comment.id;
72       }
73     }
74   }
75
76   componentDidMount() {
77     var textarea: any = document.getElementById(this.id);
78     autosize(textarea);
79     this.tribute.attach(textarea);
80     textarea.addEventListener('tribute-replaced', () => {
81       this.state.commentForm.content = textarea.value;
82       this.setState(this.state);
83       autosize.update(textarea);
84     });
85   }
86
87   render() {
88     return (
89       <div class="mb-3">
90         <form onSubmit={linkEvent(this, this.handleCommentSubmit)}>
91           <div class="form-group row">
92             <div className={`col-sm-12`}>
93               <textarea
94                 id={this.id}
95                 className={`form-control ${this.state.previewMode && 'd-none'}`}
96                 value={this.state.commentForm.content}
97                 onInput={linkEvent(this, this.handleCommentContentChange)}
98                 onPaste={linkEvent(this, this.handleImageUploadPaste)}
99                 required
100                 disabled={this.props.disabled}
101                 rows={2}
102                 maxLength={10000}
103               />
104               {this.state.previewMode && (
105                 <div
106                   className="md-div"
107                   dangerouslySetInnerHTML={mdToHtml(
108                     this.state.commentForm.content
109                   )}
110                 />
111               )}
112             </div>
113           </div>
114           <div class="row">
115             <div class="col-sm-12">
116               <button
117                 type="submit"
118                 class="btn btn-sm btn-secondary mr-2"
119                 disabled={this.props.disabled}
120               >
121                 {this.state.buttonTitle}
122               </button>
123               {this.state.commentForm.content && (
124                 <button
125                   className={`btn btn-sm mr-2 btn-secondary ${this.state
126                     .previewMode && 'active'}`}
127                   onClick={linkEvent(this, this.handlePreviewToggle)}
128                 >
129                   {i18n.t('preview')}
130                 </button>
131               )}
132               {this.props.node && (
133                 <button
134                   type="button"
135                   class="btn btn-sm btn-secondary mr-2"
136                   onClick={linkEvent(this, this.handleReplyCancel)}
137                 >
138                   {i18n.t('cancel')}
139                 </button>
140               )}
141               <a
142                 href={markdownHelpUrl}
143                 target="_blank"
144                 class="d-inline-block float-right text-muted font-weight-bold"
145                 title={i18n.t('formatting_help')}
146               >
147                 <svg class="icon icon-inline">
148                   <use xlinkHref="#icon-help-circle"></use>
149                 </svg>
150               </a>
151               <form class="d-inline-block mr-3 float-right text-muted font-weight-bold">
152                 <label
153                   htmlFor={`file-upload-${this.id}`}
154                   className={`${UserService.Instance.user && 'pointer'}`}
155                   data-tippy-content={i18n.t('upload_image')}
156                 >
157                   <svg class="icon icon-inline">
158                     <use xlinkHref="#icon-image"></use>
159                   </svg>
160                 </label>
161                 <input
162                   id={`file-upload-${this.id}`}
163                   type="file"
164                   accept="image/*,video/*"
165                   name="file"
166                   class="d-none"
167                   disabled={!UserService.Instance.user}
168                   onChange={linkEvent(this, this.handleImageUpload)}
169                 />
170               </form>
171               {this.state.imageLoading && (
172                 <svg class="icon icon-spinner spin">
173                   <use xlinkHref="#icon-spinner"></use>
174                 </svg>
175               )}
176             </div>
177           </div>
178         </form>
179       </div>
180     );
181   }
182
183   handleCommentSubmit(i: CommentForm, event: any) {
184     event.preventDefault();
185     if (i.props.edit) {
186       WebSocketService.Instance.editComment(i.state.commentForm);
187     } else {
188       WebSocketService.Instance.createComment(i.state.commentForm);
189     }
190
191     i.state.previewMode = false;
192     i.state.commentForm.content = undefined;
193     event.target.reset();
194     i.setState(i.state);
195     if (i.props.node) {
196       i.props.onReplyCancel();
197     }
198
199     autosize.update(document.querySelector('textarea'));
200   }
201
202   handleCommentContentChange(i: CommentForm, event: any) {
203     i.state.commentForm.content = event.target.value;
204     i.setState(i.state);
205   }
206
207   handlePreviewToggle(i: CommentForm, event: any) {
208     event.preventDefault();
209     i.state.previewMode = !i.state.previewMode;
210     i.setState(i.state);
211   }
212
213   handleReplyCancel(i: CommentForm) {
214     i.props.onReplyCancel();
215   }
216
217   handleImageUploadPaste(i: CommentForm, event: any) {
218     let image = event.clipboardData.files[0];
219     if (image) {
220       i.handleImageUpload(i, image);
221     }
222   }
223
224   handleImageUpload(i: CommentForm, event: any) {
225     let file: any;
226     if (event.target) {
227       event.preventDefault();
228       file = event.target.files[0];
229     } else {
230       file = event;
231     }
232
233     const imageUploadUrl = `/pictshare/api/upload.php`;
234     const formData = new FormData();
235     formData.append('file', file);
236
237     i.state.imageLoading = true;
238     i.setState(i.state);
239
240     fetch(imageUploadUrl, {
241       method: 'POST',
242       body: formData,
243     })
244       .then(res => res.json())
245       .then(res => {
246         let url = `${window.location.origin}/pictshare/${res.url}`;
247         let imageMarkdown =
248           res.filetype == 'mp4' ? `[vid](${url}/raw)` : `![](${url})`;
249         let content = i.state.commentForm.content;
250         content = content ? `${content}\n${imageMarkdown}` : imageMarkdown;
251         i.state.commentForm.content = content;
252         i.state.imageLoading = false;
253         i.setState(i.state);
254         var textarea: any = document.getElementById(i.id);
255         autosize.update(textarea);
256       })
257       .catch(error => {
258         i.state.imageLoading = false;
259         i.setState(i.state);
260         toast(error, 'danger');
261       });
262   }
263 }