diff options
author | Dessalines <tyhou13@gmx.com> | 2019-08-31 21:10:48 -0700 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2019-08-31 21:10:48 -0700 |
commit | ba55f1cefbcad7cdd29f21228bbc6874360678af (patch) | |
tree | 407e8d50f4d6ee224d56820aa1311bc547ba1d18 /ui/src | |
parent | d53b105c0297771352603e7d2f07d023841dd698 (diff) |
Adding preview, image upload, and formatting help to comment and post
forms.
- Fixes #253
Diffstat (limited to 'ui/src')
-rw-r--r-- | ui/src/components/comment-form.tsx | 27 | ||||
-rw-r--r-- | ui/src/components/post-form.tsx | 20 | ||||
-rw-r--r-- | ui/src/components/post-listing.tsx | 5 | ||||
-rw-r--r-- | ui/src/translations/en.ts | 3 | ||||
-rw-r--r-- | ui/src/utils.ts | 9 |
5 files changed, 54 insertions, 10 deletions
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<CommentFormProps, CommentFormState> { - 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<CommentFormProps, CommentFormState> { 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<CommentFormProps, CommentFormState> { <form onSubmit={linkEvent(this, this.handleCommentSubmit)}> <div class="form-group row"> <div class="col-sm-12"> - <textarea id={this.id} class="form-control" value={this.state.commentForm.content} onInput={linkEvent(this, this.handleCommentContentChange)} required disabled={this.props.disabled} rows={2} maxLength={10000} /> + <textarea id={this.id} className={`form-control ${this.state.previewMode && 'd-none'}`} value={this.state.commentForm.content} onInput={linkEvent(this, this.handleCommentContentChange)} required disabled={this.props.disabled} rows={2} maxLength={10000} /> + {this.state.previewMode && + <div className="md-div" dangerouslySetInnerHTML={mdToHtml(this.state.commentForm.content)} /> + } </div> </div> <div class="row"> <div class="col-sm-12"> <button type="submit" class="btn btn-sm btn-secondary mr-2" disabled={this.props.disabled}>{this.state.buttonTitle}</button> + {this.state.commentForm.content && + <button className={`btn btn-sm mr-2 btn-secondary ${this.state.previewMode && 'active'}`} onClick={linkEvent(this, this.handlePreviewToggle)}><T i18nKey="preview">#</T></button> + } {this.props.node && <button type="button" class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.handleReplyCancel)}><T i18nKey="cancel">#</T></button>} + <a href={markdownHelpUrl} target="_blank" class="d-inline-block float-right text-muted small font-weight-bold"><T i18nKey="formatting_help">#</T></a> + <a href={imageUploadUrl} target="_blank" class="d-inline-block mr-2 float-right text-muted small font-weight-bold"><T i18nKey="upload_image">#</T></a> </div> </div> </form> @@ -141,6 +151,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { WebSocketService.Instance.createComment(i.state.commentForm); } + i.state.previewMode = false; i.state.commentForm.content = undefined; i.setState(i.state); event.target.reset(); @@ -156,6 +167,12 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { i.setState(i.state); } + handlePreviewToggle(i: CommentForm, event: any) { + event.preventDefault(); + i.state.previewMode = !i.state.previewMode; + i.setState(i.state); + } + handleReplyCancel(i: CommentForm) { i.props.onReplyCancel(); } @@ -167,7 +184,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { type_: SearchType[SearchType.Users], sort: SortType[SortType.TopAll], page: 1, - limit: 6, + limit: mentionDropdownFetchLimit, }; WebSocketService.Instance.search(form); @@ -198,7 +215,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { type_: SearchType[SearchType.Communities], sort: SortType[SortType.TopAll], page: 1, - limit: 6, + limit: mentionDropdownFetchLimit, }; WebSocketService.Instance.search(form); diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx index f502e7f3..2e94e177 100644 --- a/ui/src/components/post-form.tsx +++ b/ui/src/components/post-form.tsx @@ -4,7 +4,7 @@ import { Subscription } from "rxjs"; import { retryWhen, delay, take } from 'rxjs/operators'; import { PostForm as PostFormI, PostFormParams, Post, PostResponse, UserOperation, Community, ListCommunitiesResponse, ListCommunitiesForm, SortType, SearchForm, SearchType, SearchResponse } from '../interfaces'; import { WebSocketService, UserService } from '../services'; -import { msgOp, getPageTitle, debounce, validURL, capitalizeFirstLetter } from '../utils'; +import { msgOp, getPageTitle, debounce, validURL, capitalizeFirstLetter, imageUploadUrl, markdownHelpUrl, mdToHtml } from '../utils'; import * as autosize from 'autosize'; import { i18n } from '../i18next'; import { T } from 'inferno-i18next'; @@ -21,6 +21,7 @@ interface PostFormState { postForm: PostFormI; communities: Array<Community>; loading: boolean; + previewMode: boolean; suggestedTitle: string; suggestedPosts: Array<Post>; crossPosts: Array<Post>; @@ -39,6 +40,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> { }, communities: [], loading: false, + previewMode: false, suggestedTitle: undefined, suggestedPosts: [], crossPosts: [], @@ -107,6 +109,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> { {this.state.suggestedTitle && <div class="mt-1 text-muted small font-weight-bold pointer" onClick={linkEvent(this, this.copySuggestedTitle)}><T i18nKey="copy_suggested_title" interpolation={{title: this.state.suggestedTitle}}>#</T></div> } + <a href={imageUploadUrl} target="_blank" class="d-inline-block mr-2 float-right text-muted small font-weight-bold"><T i18nKey="upload_image">#</T></a> {this.state.crossPosts.length > 0 && <> <div class="my-1 text-muted small font-weight-bold"><T i18nKey="cross_posts">#</T></div> @@ -130,7 +133,14 @@ export class PostForm extends Component<PostFormProps, PostFormState> { <div class="form-group row"> <label class="col-sm-2 col-form-label"><T i18nKey="body">#</T></label> <div class="col-sm-10"> - <textarea value={this.state.postForm.body} onInput={linkEvent(this, this.handlePostBodyChange)} class="form-control" rows={4} maxLength={10000} /> + <textarea value={this.state.postForm.body} onInput={linkEvent(this, this.handlePostBodyChange)} className={`form-control ${this.state.previewMode && 'd-none'}`} rows={4} maxLength={10000} /> + {this.state.previewMode && + <div className="md-div" dangerouslySetInnerHTML={mdToHtml(this.state.postForm.body)} /> + } + {this.state.postForm.body && + <button className={`mt-1 mr-2 btn btn-sm btn-secondary ${this.state.previewMode && 'active'}`} onClick={linkEvent(this, this.handlePreviewToggle)}><T i18nKey="preview">#</T></button> + } + <a href={markdownHelpUrl} target="_blank" class="d-inline-block float-right text-muted small font-weight-bold"><T i18nKey="formatting_help">#</T></a> </div> </div> {!this.props.post && @@ -250,6 +260,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> { i.props.onCancel(); } + handlePreviewToggle(i: PostForm, event: any) { + event.preventDefault(); + i.state.previewMode = !i.state.previewMode; + i.setState(i.state); + } + parseMessage(msg: any) { let op: UserOperation = msgOp(msg); if (msg.error) { diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index e3b6e76a..4a3b744a 100644 --- a/ui/src/components/post-listing.tsx +++ b/ui/src/components/post-listing.tsx @@ -49,7 +49,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> { <div class="row"> {!this.state.showEdit ? this.listing() - : <PostForm post={this.props.post} onEdit={this.handleEditPost} onCancel={this.handleEditCancel}/> + : + <div class="col-12"> + <PostForm post={this.props.post} onEdit={this.handleEditPost} onCancel={this.handleEditCancel}/> + </div> } </div> ) diff --git a/ui/src/translations/en.ts b/ui/src/translations/en.ts index 10c1540c..1ddf087d 100644 --- a/ui/src/translations/en.ts +++ b/ui/src/translations/en.ts @@ -26,6 +26,9 @@ export const en = { edit: 'edit', reply: 'reply', cancel: 'Cancel', + preview: 'Preview', + upload_image: 'upload image', + formatting_help: 'formatting help', unlock: 'unlock', lock: 'lock', link: 'link', diff --git a/ui/src/utils.ts b/ui/src/utils.ts index 40892ec8..fe1b2b55 100644 --- a/ui/src/utils.ts +++ b/ui/src/utils.ts @@ -15,6 +15,13 @@ import { emoji_list } from './emoji_list'; import * as twemoji from 'twemoji'; export const repoUrl = 'https://github.com/dessalines/lemmy'; +export const imageUploadUrl = 'https://postimages.org/'; +export const markdownHelpUrl = 'https://commonmark.org/help/'; + +export const fetchLimit: number = 20; +export const mentionDropdownFetchLimit = 6; + +export function randomStr() {return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10)} export function msgOp(msg: any): UserOperation { let opStr: string = msg.op; @@ -110,8 +117,6 @@ export function validURL(str: string) { return !!pattern.test(str); } -export let fetchLimit: number = 20; - export function capitalizeFirstLetter(str: string): string { return str.charAt(0).toUpperCase() + str.slice(1); } |