{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.loading ? (
                  <svg class="icon icon-spinner spin">
                    <use xlinkHref="#icon-spinner"></use>
                  </svg>
                ) : (
                  <span>{this.state.buttonTitle}</span>
                )}
              </button>
              {this.state.commentForm.content && (
                <button
                  className={`btn btn-sm mr-2 btn-secondary ${this.state
                    .previewMode && 'active'}`}
                  onClick={linkEvent(this, this.handlePreviewToggle)}
                >
                  {i18n.t('preview')}
                </button>
              )}
              {this.props.node && (
                <button
                  type="button"
                  class="btn btn-sm btn-secondary mr-2"
                  onClick={linkEvent(this, this.handleReplyCancel)}
                >
                  {i18n.t('cancel')}
                </button>
              )}
              <a
                href={markdownHelpUrl}
                target="_blank"
                class="d-inline-block float-right text-muted font-weight-bold"
                title={i18n.t('formatting_help')}
              >
                <svg class="icon icon-inline">
                  <use xlinkHref="#icon-help-circle"></use>
                </svg>
              </a>
              <form class="d-inline-block mr-3 float-right text-muted font-weight-bold">
                <label
                  htmlFor={`file-upload-${this.id}`}
                  className={`${UserService.Instance.user && 'pointer'}`}
                  data-tippy-content={i18n.t('upload_image')}
                >
                  <svg class="icon icon-inline">
                    <use xlinkHref="#icon-image"></use>
                  </svg>
                </label>
                <input
                  id={`file-upload-${this.id}`}
                  type="file"
                  accept="image/*,video/*"
                  name="file"
                  class="d-none"
                  disabled={!UserService.Instance.user}
                  onChange={linkEvent(this, this.handleImageUpload)}
                />
              </form>
              {this.state.imageLoading && (
                <svg class="icon icon-spinner spin">
                  <use xlinkHref="#icon-spinner"></use>
                </svg>
              )}
            </div>
          </div>
        </form>
      </div>
    );
  }

handleFinished() {
    this.state.previewMode = false;
    this.state.loading = false;
    this.state.commentForm.content = '';
    this.setState(this.state);
    let form: any = document.getElementById(this.formId);
    form.reset();
    if (this.props.node) {
      this.props.onReplyCancel();
    }
    autosize.update(document.querySelector('textarea'));
    this.setState(this.state);
  }

handleCommentSubmit(i: CommentForm, event: any) {
    event.preventDefault();
    if (i.props.edit) {
      WebSocketService.Instance.editComment(i.state.commentForm);
    } else {
      WebSocketService.Instance.createComment(i.state.commentForm);
    }

i.state.loading = true;
    i.setState(i.state);
  }

handleCommentContentChange(i: CommentForm, event: any) {
    i.state.commentForm.content = event.target.value;
    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();
  }

handleImageUploadPaste(i: CommentForm, event: any) {
    let image = event.clipboardData.files[0];
    if (image) {
      i.handleImageUpload(i, image);
    }
  }

handleImageUpload(i: CommentForm, event: any) {
    let file: any;
    if (event.target) {
      event.preventDefault();
      file = event.target.files[0];
    } else {
      file = event;
    }

const imageUploadUrl = `/pictshare/api/upload.php`;
    const formData = new FormData();
    formData.append('file', file);

i.state.imageLoading = true;
    i.setState(i.state);

fetch(imageUploadUrl, {
      method: 'POST',
      body: formData,
    })
      .then(res => res.json())
      .then(res => {
        let url = `${window.location.origin}/pictshare/${res.url}`;
        let imageMarkdown =
          res.filetype == 'mp4' ? `[vid](${url}/raw)` : `![](${url})`;
        let content = i.state.commentForm.content;
        content = content ? `${content}\n${imageMarkdown}` : imageMarkdown;
        i.state.commentForm.content = content;
        i.state.imageLoading = false;
        i.setState(i.state);
        let textarea: any = document.getElementById(i.id);
        autosize.update(textarea);
      })
      .catch(error => {
        i.state.imageLoading = false;
        i.setState(i.state);
        toast(error, 'danger');
      });
  }

parseMessage(msg: WebSocketJsonResponse) {
    let res = wsJsonToRes(msg);

// Only do the showing and hiding if logged in
    if (UserService.Instance.user) {
      if (res.op == UserOperation.CreateComment) {
        let data = res.data as CommentResponse;
        if (data.comment.creator_id == UserService.Instance.user.id) {
          this.handleFinished();
        }
      } else if (res.op == UserOperation.EditComment) {
        let data = res.data as CommentResponse;
        if (data.comment.creator_id == UserService.Instance.user.id) {
          this.handleFinished();
        }
      }
    }
  }
}