Merge pull request #2542 from weseek/feat/adjust-relative-path

Feat/adjust relative path

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

@@ -50,6 +50,7 @@ class LinkEditModal extends React.PureComponent {
     this.generateLink = this.generateLink.bind(this);
     this.getPreview = this.getPreview.bind(this);
     this.renderPreview = this.renderPreview.bind(this);
+    this.getRootPath = this.getRootPath.bind(this);
   }
 
   componentDidUpdate(prevState) {
@@ -63,7 +64,6 @@ class LinkEditModal extends React.PureComponent {
   // defaultMarkdownLink is an instance of Linker
   show(defaultMarkdownLink = null) {
     // if defaultMarkdownLink is null, set default value in inputs.
-    const { pageContainer } = this.props;
     const { label = '' } = defaultMarkdownLink;
     let { link = '', type = Linker.types.markdownLink } = defaultMarkdownLink;
 
@@ -72,9 +72,11 @@ class LinkEditModal extends React.PureComponent {
       type = Linker.types.markdownLink;
     }
 
-    const isUseRelativePath = link.startsWith('.');
+    const url = new URL(link, 'http://example.com');
+    const isUseRelativePath = url.origin === 'http://example.com' && !link.startsWith('/') && link !== '';
     if (isUseRelativePath) {
-      link = path.resolve(pageContainer.state.path, link);
+      const rootPath = this.getRootPath(type);
+      link = path.resolve(rootPath, link);
     }
 
     this.setState({
@@ -99,7 +101,7 @@ class LinkEditModal extends React.PureComponent {
   }
 
   toggleIsUseRelativePath() {
-    if (this.state.linkerType === Linker.types.growiLink) {
+    if (!this.state.linkInputValue.startsWith('/') || this.state.linkerType === Linker.types.growiLink) {
       return;
     }
 
@@ -152,7 +154,11 @@ class LinkEditModal extends React.PureComponent {
   }
 
   handleChangeLinkInput(link) {
-    this.setState({ linkInputValue: link });
+    let isUseRelativePath = this.state.isUseRelativePath;
+    if (!this.state.linkInputValue.startsWith('/') || this.state.linkerType === Linker.types.growiLink) {
+      isUseRelativePath = false;
+    }
+    this.setState({ linkInputValue: link, isUseRelativePath, isUsePermanentLink: false });
   }
 
   handleSelecteLinkerType(linkerType) {
@@ -175,7 +181,6 @@ class LinkEditModal extends React.PureComponent {
   }
 
   generateLink() {
-    const { pageContainer } = this.props;
     const {
       linkInputValue,
       labelInputValue,
@@ -186,8 +191,9 @@ class LinkEditModal extends React.PureComponent {
     } = this.state;
 
     let reshapedLink = linkInputValue;
-    if (isUseRelativePath && linkInputValue.match(/^\//)) {
-      reshapedLink = path.relative(pageContainer.state.path, linkInputValue);
+    if (isUseRelativePath) {
+      const rootPath = this.getRootPath(linkerType);
+      reshapedLink = rootPath === linkInputValue ? '.' : path.relative(rootPath, linkInputValue);
     }
 
     return new Linker(
@@ -199,6 +205,13 @@ class LinkEditModal extends React.PureComponent {
     );
   }
 
+  getRootPath(type) {
+    const { pageContainer } = this.props;
+    const pagePath = pageContainer.state.path;
+    // rootPaths of md link and pukiwiki link are different
+    return type === Linker.types.markdownLink ? path.dirname(pagePath) : pagePath;
+  }
+
   render() {
     return (
       <Modal isOpen={this.state.show} toggle={this.cancel} size="lg">
@@ -278,7 +291,7 @@ class LinkEditModal extends React.PureComponent {
                           id="relativePath"
                           type="checkbox"
                           checked={this.state.isUseRelativePath}
-                          disabled={this.state.linkerType === Linker.types.growiLink}
+                          disabled={!this.state.linkInputValue.startsWith('/') || this.state.linkerType === Linker.types.growiLink}
                         />
                         <label className="custom-control-label" htmlFor="relativePath" onClick={this.toggleIsUseRelativePath}>
                           Use relative path

src/client/js/models/Linker.js

@@ -36,6 +36,10 @@ export default class Linker {
       reshapedLink = this.permalink;
     }
 
+    if (this.label === '') {
+      this.label = reshapedLink;
+    }
+
     if (this.type === Linker.types.pukiwikiLink) {
       if (this.label === reshapedLink) return `[[${reshapedLink}]]`;
       return `[[${this.label}>${reshapedLink}]]`;
@@ -66,17 +70,17 @@ export default class Linker {
       ({ label } = str.match(this.patterns.pukiwikiLinkWithoutLabel).groups);
       link = label;
     }
+    // markdown
+    else if (str.match(this.patterns.markdownLink)) {
+      type = this.types.markdownLink;
+      ({ label, link } = str.match(this.patterns.markdownLink).groups);
+    }
     // growi
     else if (str.match(this.patterns.growiLink)) {
       type = this.types.growiLink;
       ({ label } = str.match(this.patterns.growiLink).groups);
       link = label;
     }
-    // markdown
-    else if (str.match(this.patterns.markdownLink)) {
-      type = this.types.markdownLink;
-      ({ label, link } = str.match(this.patterns.markdownLink).groups);
-    }
 
     const isUsePermanentLink = false;
     const permalink = '';
@@ -110,19 +114,16 @@ export default class Linker {
     // pukiwiki link ('[[link]]')
     [beginningOfLink, endOfLink] = this.getBeginningAndEndIndexWithPrefixAndSuffix(line, index, '[[', ']]');
 
-    // if index is not in a pukiwiki link
-    // growi link ('[/link]')
+    // markdown link ('[label](link)')
     if (beginningOfLink < 0 || endOfLink < 0 || beginningOfLink > index || endOfLink < index) {
-      [beginningOfLink, endOfLink] = this.getBeginningAndEndIndexWithPrefixAndSuffix(line, index, '[/', ']');
+      [beginningOfLink, endOfLink] = this.getBeginningAndEndIndexWithPrefixAndSuffix(line, index, '[', ')', '](');
     }
 
-    // and if index is not in a growi link
-    // markdown link ('[label](link)')
+    // growi link ('[/link]')
     if (beginningOfLink < 0 || endOfLink < 0 || beginningOfLink > index || endOfLink < index) {
-      [beginningOfLink, endOfLink] = this.getBeginningAndEndIndexWithPrefixAndSuffix(line, index, '[', ')', '](');
+      [beginningOfLink, endOfLink] = this.getBeginningAndEndIndexWithPrefixAndSuffix(line, index, '[/', ']');
     }
 
-    // and if index is not in a markdown link
     // return { beginningOfLink: -1, endOfLink: -1 }
     if (beginningOfLink < 0 || endOfLink < 0 || beginningOfLink > index || endOfLink < index) {
       [beginningOfLink, endOfLink] = [-1, -1];