yusuketk 5 лет назад
Родитель
Сommit
5faf4ea681
1 измененных файлов с 45 добавлено и 15 удалено
  1. 45 15
      src/client/js/components/PageEditor/LinkEditModal.jsx

+ 45 - 15
src/client/js/components/PageEditor/LinkEditModal.jsx

@@ -15,12 +15,11 @@ import Preview from './Preview';
 import AppContainer from '../../services/AppContainer';
 import AppContainer from '../../services/AppContainer';
 import PageContainer from '../../services/PageContainer';
 import PageContainer from '../../services/PageContainer';
 
 
-import PagePathAutoComplete from '../PagePathAutoComplete';
+import SearchTypeahead from '../SearchTypeahead';
 
 
 import { withUnstatedContainers } from '../UnstatedUtils';
 import { withUnstatedContainers } from '../UnstatedUtils';
 
 
 class LinkEditModal extends React.PureComponent {
 class LinkEditModal extends React.PureComponent {
-
   constructor(props) {
   constructor(props) {
     super(props);
     super(props);
 
 
@@ -28,7 +27,7 @@ class LinkEditModal extends React.PureComponent {
       show: false,
       show: false,
       isUseRelativePath: false,
       isUseRelativePath: false,
       isUsePermanentLink: false,
       isUsePermanentLink: false,
-      linkInputValue: '',
+      linkInputValue: 'ss',
       labelInputValue: '',
       labelInputValue: '',
       linkerType: 'mdLink',
       linkerType: 'mdLink',
       markdown: '',
       markdown: '',
@@ -43,6 +42,7 @@ class LinkEditModal extends React.PureComponent {
     this.cancel = this.cancel.bind(this);
     this.cancel = this.cancel.bind(this);
     this.handleChangeLinkInput = this.handleChangeLinkInput.bind(this);
     this.handleChangeLinkInput = this.handleChangeLinkInput.bind(this);
     this.handleChangeLabelInput = this.handleChangeLabelInput.bind(this);
     this.handleChangeLabelInput = this.handleChangeLabelInput.bind(this);
+    this.handleChangeTypeahead = this.handleChangeTypeahead.bind(this);
     this.handleSelecteLinkerType = this.handleSelecteLinkerType.bind(this);
     this.handleSelecteLinkerType = this.handleSelecteLinkerType.bind(this);
     this.toggleIsUseRelativePath = this.toggleIsUseRelativePath.bind(this);
     this.toggleIsUseRelativePath = this.toggleIsUseRelativePath.bind(this);
     this.toggleIsUsePamanentLink = this.toggleIsUsePamanentLink.bind(this);
     this.toggleIsUsePamanentLink = this.toggleIsUsePamanentLink.bind(this);
@@ -60,8 +60,32 @@ class LinkEditModal extends React.PureComponent {
     }
     }
   }
   }
 
 
-  show(defaultLabelInputValue = '') {
-    this.setState({ show: true, labelInputValue: defaultLabelInputValue });
+  show(defaultMarkdownLink = '') {
+    let labelInputValue = defaultMarkdownLink;
+    let linkInputValue = '';
+    let linkerType = 'mdLink';
+
+    if (defaultMarkdownLink.match(/^\[\[.*\]\]$/) && this.isApplyPukiwikiLikeLinkerPlugin) {
+      linkerType = 'pukiwikiLink';
+      labelInputValue = 'pukilabel';
+      linkInputValue = 'pukilink';
+    }
+    else if (defaultMarkdownLink.match(/^\[\/.*\]$/)) {
+      linkerType = 'growiLink';
+      labelInputValue = 'growilabel';
+      linkInputValue = 'growilink';
+    }
+    else if (defaultMarkdownLink.match(/^\[.*\]\(.*\)$/)) {
+      labelInputValue = 'mdlabel';
+      linkInputValue = 'mdlink';
+    }
+
+    this.setState({
+      show: true,
+      labelInputValue,
+      linkInputValue,
+      linkerType,
+    });
   }
   }
 
 
   cancel() {
   cancel() {
@@ -95,10 +119,7 @@ class LinkEditModal extends React.PureComponent {
   renderPreview() {
   renderPreview() {
     return (
     return (
       <div className="linkedit-preview">
       <div className="linkedit-preview">
-        <Preview
-          markdown={this.state.markdown}
-          inputRef={() => {}}
-        />
+        <Preview markdown={this.state.markdown} inputRef={() => {}} />
       </div>
       </div>
     );
     );
   }
   }
@@ -111,6 +132,15 @@ class LinkEditModal extends React.PureComponent {
     this.setState({ labelInputValue: label });
     this.setState({ labelInputValue: label });
   }
   }
 
 
+  handleChangeTypeahead(submitedValues) {
+    const page = submitedValues[0]; // should be single page selected
+
+    if (page != null) {
+      this.handleChangeLinkInput(page.path);
+    }
+
+  }
+
   handleSelecteLinkerType(linkerType) {
   handleSelecteLinkerType(linkerType) {
     if (this.state.isUseRelativePath && linkerType === 'growiLink') {
     if (this.state.isUseRelativePath && linkerType === 'growiLink') {
       this.toggleIsUseRelativePath();
       this.toggleIsUseRelativePath();
@@ -144,7 +174,6 @@ class LinkEditModal extends React.PureComponent {
     this.setState({ markdown, permalink, isEnablePermanentLink });
     this.setState({ markdown, permalink, isEnablePermanentLink });
   }
   }
 
 
-
   generateLink() {
   generateLink() {
     const { pageContainer } = this.props;
     const { pageContainer } = this.props;
     const {
     const {
@@ -189,9 +218,12 @@ class LinkEditModal extends React.PureComponent {
                 <div className="form-gorup my-3">
                 <div className="form-gorup my-3">
                   <label htmlFor="linkInput">Link</label>
                   <label htmlFor="linkInput">Link</label>
                   <div className="input-group">
                   <div className="input-group">
-                    <PagePathAutoComplete
+                    <SearchTypeahead
+                      onChange={this.handleChangeTypeahead}
                       onInputChange={this.handleChangeLinkInput}
                       onInputChange={this.handleChangeLinkInput}
-                      onSubmit={this.getPageWithLinkInputValue}
+                      inputName="link"
+                      placeholder="Input page path or URL"
+                      keywordOnInit={this.state.linkInputValue}
                     />
                     />
                   </div>
                   </div>
                 </div>
                 </div>
@@ -273,9 +305,7 @@ class LinkEditModal extends React.PureComponent {
               </div>
               </div>
             </div>
             </div>
             <div className="col-12 col-lg-6">
             <div className="col-12 col-lg-6">
-              <div className="d-block mb-3">
-                {this.renderPreview()}
-              </div>
+              <div className="d-block mb-3">{this.renderPreview()}</div>
             </div>
             </div>
           </div>
           </div>
         </ModalBody>
         </ModalBody>