From ba55f1cefbcad7cdd29f21228bbc6874360678af Mon Sep 17 00:00:00 2001 From: Dessalines Date: Sat, 31 Aug 2019 21:10:48 -0700 Subject: [PATCH] Adding preview, image upload, and formatting help to comment and post forms. - Fixes #253 --- README.md | 16 ++++++++-------- ui/src/components/comment-form.tsx | 27 ++++++++++++++++++++++----- ui/src/components/post-form.tsx | 20 ++++++++++++++++++-- ui/src/components/post-listing.tsx | 5 ++++- ui/src/translations/en.ts | 3 +++ ui/src/utils.ts | 9 +++++++-- 6 files changed, 62 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index e1bcebce..22e39b7d 100644 --- a/README.md +++ b/README.md @@ -169,14 +169,14 @@ If you'd like to add translations, take a look a look at the [english translatio lang | done | missing --- | --- | --- -de | 88% | cross_posts,cross_post,users,number_of_communities,settings,subscribed,expires,recent_comments,nsfw,show_nsfw,crypto,monero,joined,by,to,transfer_community,transfer_site,are_you_sure,yes,no -eo | 98% | number_of_communities,are_you_sure,yes,no -es | 98% | number_of_communities,are_you_sure,yes,no -fr | 91% | cross_posts,cross_post,users,number_of_communities,settings,recent_comments,nsfw,show_nsfw,monero,by,to,transfer_community,transfer_site,are_you_sure,yes,no -nl | 100% | -ru | 93% | cross_posts,cross_post,number_of_communities,recent_comments,monero,by,to,transfer_community,transfer_site,are_you_sure,yes,no -sv | 100% | -zh | 91% | cross_posts,cross_post,users,number_of_communities,settings,recent_comments,nsfw,show_nsfw,monero,by,to,transfer_community,transfer_site,are_you_sure,yes,no +de | 87% | cross_posts,cross_post,users,number_of_communities,preview,upload_image,formatting_help,settings,subscribed,expires,recent_comments,nsfw,show_nsfw,crypto,monero,joined,by,to,transfer_community,transfer_site,are_you_sure,yes,no +eo | 96% | number_of_communities,preview,upload_image,formatting_help,are_you_sure,yes,no +es | 96% | number_of_communities,preview,upload_image,formatting_help,are_you_sure,yes,no +fr | 89% | cross_posts,cross_post,users,number_of_communities,preview,upload_image,formatting_help,settings,recent_comments,nsfw,show_nsfw,monero,by,to,transfer_community,transfer_site,are_you_sure,yes,no +nl | 98% | preview,upload_image,formatting_help +ru | 91% | cross_posts,cross_post,number_of_communities,preview,upload_image,formatting_help,recent_comments,monero,by,to,transfer_community,transfer_site,are_you_sure,yes,no +sv | 98% | preview,upload_image,formatting_help +zh | 89% | cross_posts,cross_post,users,number_of_communities,preview,upload_image,formatting_help,settings,recent_comments,nsfw,show_nsfw,monero,by,to,transfer_community,transfer_site,are_you_sure,yes,no ## Credits diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx index 396ac9cc..93ad69ea 100644 --- a/ui/src/components/comment-form.tsx +++ b/ui/src/components/comment-form.tsx @@ -1,7 +1,7 @@ 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, fetchLimit, msgOp, md, emojiMentionList } from '../utils'; +import { capitalizeFirstLetter, mentionDropdownFetchLimit, msgOp, md, emojiMentionList, mdToHtml, randomStr, imageUploadUrl, markdownHelpUrl } from '../utils'; import { WebSocketService, UserService } from '../services'; import * as autosize from 'autosize'; import { i18n } from '../i18next'; @@ -19,11 +19,12 @@ interface CommentFormProps { interface CommentFormState { commentForm: CommentFormI; buttonTitle: string; + previewMode: boolean; } export class CommentForm extends Component { - private id = `comment-form-${Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10)}`; + private id = `comment-form-${randomStr()}`; private userSub: Subscription; private communitySub: Subscription; private tribute: any; @@ -35,6 +36,7 @@ export class CommentForm extends Component { 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, } constructor(props: any, context: any) { @@ -119,13 +121,21 @@ export class CommentForm extends Component {
-