From 56741fcea5a359d875c7fb863a84bf2ff82beae5 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Thu, 16 Jul 2020 21:12:51 -0400 Subject: [PATCH] Adding markdown buttons. Fixes #977 (#984) --- ui/src/components/comment-form.tsx | 290 ++---------- ui/src/components/community-form.tsx | 44 +- ui/src/components/markdown-textarea.tsx | 509 +++++++++++++++++++++ ui/src/components/post-form.tsx | 62 +-- ui/src/components/private-message-form.tsx | 94 +--- ui/src/components/site-form.tsx | 37 +- ui/src/components/symbols.tsx | 21 + ui/translations/en.json | 9 +- 8 files changed, 618 insertions(+), 448 deletions(-) create mode 100644 ui/src/components/markdown-textarea.tsx diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx index 72a4f398b..6e45229b5 100644 --- a/ui/src/components/comment-form.tsx +++ b/ui/src/components/comment-form.tsx @@ -1,8 +1,7 @@ -import { Component, linkEvent } from 'inferno'; +import { Component } from 'inferno'; import { Link } from 'inferno-router'; import { Subscription } from 'rxjs'; import { retryWhen, delay, take } from 'rxjs/operators'; -import { Prompt } from 'inferno-router'; import { CommentNode as CommentNodeI, CommentForm as CommentFormI, @@ -10,22 +9,11 @@ import { UserOperation, CommentResponse, } from '../interfaces'; -import { - capitalizeFirstLetter, - mdToHtml, - randomStr, - markdownHelpUrl, - toast, - setupTribute, - wsJsonToRes, - pictrsDeleteToast, -} from '../utils'; +import { capitalizeFirstLetter, wsJsonToRes } from '../utils'; import { WebSocketService, UserService } from '../services'; -import autosize from 'autosize'; -import Tribute from 'tributejs/src/Tribute.js'; -import emojiShortName from 'emoji-short-name'; import { i18n } from '../i18next'; import { T } from 'inferno-i18next'; +import { MarkdownTextArea } from './markdown-textarea'; interface CommentFormProps { postId?: number; @@ -39,15 +27,10 @@ interface CommentFormProps { interface CommentFormState { commentForm: CommentFormI; buttonTitle: string; - previewMode: boolean; - loading: boolean; - imageLoading: boolean; + finished: boolean; } export class CommentForm extends Component { - private id = `comment-textarea-${randomStr()}`; - private formId = `comment-form-${randomStr()}`; - private tribute: Tribute; private subscription: Subscription; private emptyState: CommentFormState = { commentForm: { @@ -65,15 +48,14 @@ export class CommentForm extends Component { : this.props.edit ? capitalizeFirstLetter(i18n.t('save')) : capitalizeFirstLetter(i18n.t('reply')), - previewMode: false, - loading: false, - imageLoading: false, + finished: false, }; constructor(props: any, context: any) { super(props, context); - this.tribute = setupTribute(); + this.handleCommentSubmit = this.handleCommentSubmit.bind(this); + this.handleReplyCancel = this.handleReplyCancel.bind(this); this.state = this.emptyState; @@ -98,160 +80,24 @@ export class CommentForm extends Component { ); } - componentDidMount() { - let textarea: any = document.getElementById(this.id); - if (textarea) { - autosize(textarea); - this.tribute.attach(textarea); - textarea.addEventListener('tribute-replaced', () => { - this.state.commentForm.content = textarea.value; - this.setState(this.state); - autosize.update(textarea); - }); - - // Quoting of selected text - let selectedText = window.getSelection().toString(); - if (selectedText) { - let quotedText = - selectedText - .split('\n') - .map(t => `> ${t}`) - .join('\n') + '\n\n'; - this.state.commentForm.content = quotedText; - this.setState(this.state); - // Not sure why this needs a delay - setTimeout(() => autosize.update(textarea), 10); - } - - if (this.props.focus) { - textarea.focus(); - } - } - } - - componentDidUpdate() { - if (this.state.commentForm.content) { - window.onbeforeunload = () => true; - } else { - window.onbeforeunload = undefined; - } - } - componentWillUnmount() { this.subscription.unsubscribe(); - window.onbeforeunload = null; } render() { return (
- {UserService.Instance.user ? ( -
-
-
-