change to display preview automatically

src/client/js/components/PageEditor/LinkEditModal.jsx

@@ -25,7 +25,7 @@ class LinkEditModal extends React.PureComponent {
       show: false,
       isUseRelativePath: false,
       isUsePermanentLink: false,
-      linkInputValue: '',
+      linkInputValue: '/',
       labelInputValue: '',
       linkerType: 'mdLink',
       markdown: '',
@@ -47,6 +47,14 @@ class LinkEditModal extends React.PureComponent {
     this.generateLink = this.generateLink.bind(this);
   }
 
+  componentDidUpdate(prevState) {
+    const { linkInputValue: prevLinkInputValue } = prevState;
+    const { linkInputValue } = this.state;
+    if (linkInputValue !== prevLinkInputValue) {
+      this.setMarkdown(linkInputValue);
+    }
+  }
+
   show(defaultLabelInputValue = '') {
     this.setState({ show: true, labelInputValue: defaultLabelInputValue });
   }
@@ -87,10 +95,10 @@ class LinkEditModal extends React.PureComponent {
     // TODO GW-2659
   }
 
-  async setMarkdown() {
+  async setMarkdown(path) {
     let markdown = '';
     try {
-      await this.props.appContainer.apiGet('/pages.get', { path: this.state.labelInputValue }).then((res) => {
+      await this.props.appContainer.apiGet('/pages.get', { path }).then((res) => {
         markdown = res.page.revision.body;
       });
     }
@@ -123,14 +131,12 @@ class LinkEditModal extends React.PureComponent {
 
   inputChangeHandler(inputChangeValue) {
     this.setState({ linkInputValue: inputChangeValue });
-
   }
 
   submitHandler(submitValue) {
     this.setState({ linkInputValue: submitValue });
   }
 
-
   generateLink() {
     const { pageContainer } = this.props;
     const {
@@ -166,7 +172,7 @@ class LinkEditModal extends React.PureComponent {
 
         <ModalBody className="container">
           <div className="row">
-            <div className="col-12 col-lg-6">
+            <div className="col">
               <form className="form-group">
                 <div className="form-gorup my-3">
                   <label htmlFor="linkInput">Link</label>
@@ -192,6 +198,10 @@ class LinkEditModal extends React.PureComponent {
                 </div>
               </form>
 
+              <div className="d-block d-lg-none mb-3">
+                {this.renderPreview()}
+              </div>
+
               <div className="card">
                 <div className="card-body">
                   <form className="form-group">