Adding view source button for posts and comments.

- Fixes #271

1 files changed, 18 insertions, 1 deletions

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index 7dbaafdc..a4e398f1 100644
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -22,6 +22,7 @@ interface CommentNodeState {
   showConfirmTransferSite: boolean;
   showConfirmTransferCommunity: boolean;
   collapsed: boolean;
+  viewSource: boolean;
 }
 
 interface CommentNodeProps {
@@ -46,6 +47,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     banExpires: null,
     banType: BanType.Community,
     collapsed: false,
+    viewSource: false,
     showConfirmTransferSite: false,
     showConfirmTransferCommunity: false,
   }
@@ -106,7 +108,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
           {this.state.showEdit && <CommentForm node={node} edit onReplyCancel={this.handleReplyCancel} disabled={this.props.locked} />}
           {!this.state.showEdit && !this.state.collapsed &&
             <div>
-              <div className="md-div" dangerouslySetInnerHTML={mdToHtml(node.comment.removed ? `*${i18n.t('removed')}*` : node.comment.deleted ? `*${i18n.t('deleted')}*` : node.comment.content)} />
+              {this.state.viewSource ? <div>{this.commentUnlessRemoved}</div> : 
+              <div className="md-div" dangerouslySetInnerHTML={mdToHtml(this.commentUnlessRemoved)} />
+              }
               <ul class="list-inline mb-1 text-muted small font-weight-bold">
                 {UserService.Instance.user && !this.props.viewOnly && 
                   <>
@@ -202,6 +206,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   </>
                 }
                 <li className="list-inline-item">
+                  <span className="pointer" onClick={linkEvent(this, this.handleViewSource)}><T i18nKey="view_source">#</T></span>
+                </li>
+                <li className="list-inline-item">
                   <Link className="text-muted" to={`/post/${node.comment.post_id}/comment/${node.comment.id}`}><T i18nKey="link">#</T></Link>
                 </li>
                 {this.props.markable && 
@@ -297,6 +304,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
       (this.props.node.comment.creator_id != UserService.Instance.user.id) &&
       (UserService.Instance.user.id == this.props.admins[0].id);
   }
+  
+  get commentUnlessRemoved(): string {  
+    let node = this.props.node;
+    return node.comment.removed ? `*${i18n.t('removed')}*` : node.comment.deleted ? `*${i18n.t('deleted')}*` : node.comment.content;
+  }
 
   handleReplyClick(i: CommentNode) {
     i.state.showReply = true;
@@ -527,4 +539,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     i.state.collapsed = !i.state.collapsed;
     i.setState(i.state);
   }
+
+  handleViewSource(i: CommentNode) {
+    i.state.viewSource = !i.state.viewSource;
+    i.setState(i.state);
+  }
 }