Merge branch 'feat/enhanced-link-edit-modal-for-master-merge' into feat/enable-update-link-with-link-editor-modal

# Conflicts:
#	src/client/js/components/PageEditor/LinkEditModal.jsx

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

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import path from 'path';
-
 import {
   Modal,
   ModalHeader,
@@ -10,6 +9,10 @@ import {
   ModalFooter,
 } from 'reactstrap';
 
+import Preview from './Preview';
+import PagePathAutoComplete from '../PagePathAutoComplete';
+
+import AppContainer from '../../services/AppContainer';
 import PageContainer from '../../services/PageContainer';
 
 import SearchTypeahead from '../SearchTypeahead';
@@ -28,6 +31,7 @@ class LinkEditModal extends React.PureComponent {
       linkInputValue: '',
       labelInputValue: '',
       linkerType: 'mdLink',
+      markdown: '',
     };
 
     this.isApplyPukiwikiLikeLinkerPlugin = window.growiRenderer.preProcessors.some(process => process.constructor.name === 'PukiwikiLikeLinker');
@@ -40,11 +44,20 @@ class LinkEditModal extends React.PureComponent {
     this.parseMakdownLink = this.parseMakdownLink.bind(this);
     this.handleSelecteLinkerType = this.handleSelecteLinkerType.bind(this);
     this.toggleIsUseRelativePath = this.toggleIsUseRelativePath.bind(this);
+    this.setMarkdown = this.setMarkdown.bind(this);
     this.toggleIsUsePamanentLink = this.toggleIsUsePamanentLink.bind(this);
     this.save = this.save.bind(this);
     this.generateLink = this.generateLink.bind(this);
   }
 
+  componentDidUpdate(prevState) {
+    const { linkInputValue: prevLinkInputValue } = prevState;
+    const { linkInputValue } = this.state;
+    if (linkInputValue !== prevLinkInputValue) {
+      this.setMarkdown(linkInputValue);
+    }
+  }
+
   show(defaultMarkdownLink = '') {
     const { labelInputValue, linkInputValue, linkerType } = this.parseMakdownLink(defaultMarkdownLink);
 
@@ -113,13 +126,32 @@ class LinkEditModal extends React.PureComponent {
   }
 
   renderPreview() {
-    // TODO GW-2658
+    return (
+      <div className="linkedit-preview">
+        <Preview
+          markdown={this.state.markdown}
+        />
+      </div>
+    );
   }
 
   insertLinkIntoEditor() {
     // TODO GW-2659
   }
 
+  async setMarkdown(path) {
+    let markdown = '';
+    try {
+      await this.props.appContainer.apiGet('/pages.get', { path }).then((res) => {
+        markdown = res.page.revision.body;
+      });
+    }
+    catch (err) {
+      markdown = `<div class="alert alert-warning" role="alert"><strong>${err.message}</strong></div>`;
+    }
+    this.setState({ markdown });
+  }
+
   handleChangeLabelInput(label) {
     this.setState({ labelInputValue: label });
   }
@@ -180,7 +212,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>
@@ -204,6 +236,10 @@ class LinkEditModal extends React.PureComponent {
                 </div>
               </form>
 
+              <div className="d-block d-lg-none mb-3 overflow-auto">
+                {this.renderPreview()}
+              </div>
+
               <div className="card">
                 <div className="card-body">
                   <form className="form-group">
@@ -265,11 +301,9 @@ class LinkEditModal extends React.PureComponent {
                 </div>
               </div>
             </div>
-            <div className="col-12 col-lg-6">
-              <div className="d-block d-lg-none">
-                {this.renderPreview}
-                render preview
-              </div>
+
+            <div className="col d-none d-lg-block pr-0 mr-3 overflow-auto">
+              {this.renderPreview()}
             </div>
           </div>
         </ModalBody>
@@ -288,6 +322,7 @@ class LinkEditModal extends React.PureComponent {
 }
 
 LinkEditModal.propTypes = {
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
   onSave: PropTypes.func,
 };
@@ -295,6 +330,6 @@ LinkEditModal.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const LinkEditModalWrapper = withUnstatedContainers(LinkEditModal, [PageContainer]);
+const LinkEditModalWrapper = withUnstatedContainers(LinkEditModal, [AppContainer, PageContainer]);
 
 export default LinkEditModalWrapper;

src/client/styles/scss/_linkedit-preview.scss

@@ -0,0 +1,8 @@
+.modal .modal-body .linkedit-preview {
+  height: 0;
+  padding-bottom: 50%;
+
+  .page-editor-preview-body {
+    overflow-y: unset;
+  }
+}

src/client/styles/scss/style-app.scss

@@ -59,6 +59,7 @@
 @import 'staff_credit';
 @import 'waves';
 @import 'wiki';
+@import 'linkedit-preview';
 
 /*
  * for Guest User Mode

src/client/styles/scss/theme/nature.scss

@@ -96,11 +96,6 @@ html[dark] {
   @import 'apply-colors';
   @import 'apply-colors-light';
 
-  // hljs
-  .hljs {
-    background-color: $bgcolor-inline-code;
-  }
-
   // Search Top
   .search-top {
     .btn-secondary.dropdown-toggle {