add clear button

.eslintrc.json

@@ -10,8 +10,7 @@
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true
-    },
-    "project": "./tsconfig.json"
+    }
   },
   "extends": [
     "plugin:office-addins/react"

manifest.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" xmlns:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides/1.0" xsi:type="MailApp">
   <Id>5460653e-9beb-4e0d-9e1b-aefc510cf6cb</Id>
-  <Version>1.0.1.0</Version>
+  <Version>1.0.2</Version>
   <ProviderName>Chun Liu</ProviderName>
   <DefaultLocale>en-US</DefaultLocale>
   <DisplayName DefaultValue="Insert Markdown"/>

src/taskpane/components/App.js

@@ -1,15 +1,15 @@
 import * as React from "react";
-import { PrimaryButton, TextField, Label, Stack } from "office-ui-fabric-react";
+import { PrimaryButton, DefaultButton, TextField, Label, Stack } from "office-ui-fabric-react";
 import Showdown from "showdown";
 import BorderWrapper from "react-border-wrapper";
 import Progress from "./Progress";
 
 const converter = new Showdown.Converter();
 
 export default class App extends React.Component {
-  state = {htmlText: ''};
+  state = {markdown: '', htmlText: ''};
 
-  click = async () => {
+  clickInsert = async () => {
     var item = Office.context.mailbox.item;
     item.body.setSelectedDataAsync(
       this.state.htmlText,
@@ -25,11 +25,15 @@ export default class App extends React.Component {
       });
   };
 
+  clickClear = async () => {
+    this.setState({ markdown: '', htmlText: '' });
+  }
+
   onMarkdownChange = async (event, newValue) => {
     console.log("On Change: " + newValue);
     var html = converter.makeHtml(newValue);
     console.log("On Change: " + html);
-    this.setState({htmlText: html});
+    this.setState({markdown: newValue, htmlText: html});
   };
 
   render() {
@@ -41,6 +45,8 @@ export default class App extends React.Component {
       );
     }
 
+    const stackTokens = { childrenGap: 20 };
+
     return (
       <div className="ms-welcome__main">
 
@@ -56,6 +62,7 @@ export default class App extends React.Component {
           topGap="4px"
         >
           <TextField multiline autoAdjustHeight borderless className="markdowntf" resizable={false}
+            value={this.state.markdown}
             onChange={this.onMarkdownChange} />
         </BorderWrapper>
 
@@ -74,11 +81,15 @@ export default class App extends React.Component {
             dangerouslySetInnerHTML={{__html: this.state.htmlText}}></div>
         </BorderWrapper>
 
-        <PrimaryButton className="insertButton"
-          iconProps={{ iconName: "ChevronRight" }}
-          disabled={this.state.htmlText === ""}
-          onClick={this.click}
-        >Insert</PrimaryButton>
+        <Stack horizontal tokens={stackTokens} className="insertButton">
+          <PrimaryButton text="Insert"
+            iconProps={{ iconName: "ChevronRight" }}
+            disabled={this.state.htmlText === ""}
+            onClick={this.clickInsert} />
+          <DefaultButton text="Clear" iconProps={{ iconName: "Clear" }} 
+            disabled={this.state.htmlText === ""}
+            onClick={this.clickClear} />
+        </Stack>
 
       </div>
     );