Merge branch 'feat/enhanced-link-edit-modal-for-master-merge' into feat/share-link-preview

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

@@ -56,6 +56,7 @@ require('../../util/codemirror/autorefresh.ext');
 
 
 const MARKDOWN_TABLE_ACTIVATED_CLASS = 'markdown-table-activated';
+const MARKDOWN_LINK_ACTIVATED_CLASS = 'markdown-link-activated';
 
 export default class CodeMirrorEditor extends AbstractEditor {
 
@@ -466,8 +467,10 @@ export default class CodeMirrorEditor extends AbstractEditor {
   cursorHandler(editor, event) {
     const { additionalClassSet } = this.state;
     const hasCustomClass = additionalClassSet.has(MARKDOWN_TABLE_ACTIVATED_CLASS);
+    const hasLinkClass = additionalClassSet.has(MARKDOWN_LINK_ACTIVATED_CLASS);
 
     const isInTable = mtu.isInTable(editor);
+    const isInLink = mlu.isInLink(editor);
 
     if (!hasCustomClass && isInTable) {
       additionalClassSet.add(MARKDOWN_TABLE_ACTIVATED_CLASS);
@@ -478,6 +481,16 @@ export default class CodeMirrorEditor extends AbstractEditor {
       additionalClassSet.delete(MARKDOWN_TABLE_ACTIVATED_CLASS);
       this.setState({ additionalClassSet });
     }
+
+    if (!hasLinkClass && isInLink) {
+      additionalClassSet.add(MARKDOWN_LINK_ACTIVATED_CLASS);
+      this.setState({ additionalClassSet });
+    }
+
+    if (hasLinkClass && !isInLink) {
+      additionalClassSet.delete(MARKDOWN_LINK_ACTIVATED_CLASS);
+      this.setState({ additionalClassSet });
+    }
   }
 
   changeHandler(editor, data, value) {

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

@@ -8,6 +8,7 @@ import {
   ModalBody,
   ModalFooter,
 } from 'reactstrap';
+
 import Preview from './Preview';
 import PagePathAutoComplete from '../PagePathAutoComplete';
 

src/client/js/components/PageEditor/MarkdownLinkUtil.js

@@ -3,6 +3,12 @@
  */
 class MarkdownLinkUtil {
 
+  constructor() {
+    // https://regex101.com/r/1UuWBJ/8
+    this.linePartOfLink = /(\[+(.*)+\]){1}(\(+(.*)+\)){1}/;
+    this.isInLink = this.isInLink.bind(this);
+  }
+
   getSelectedTextInEditor(editor) {
     return editor.getDoc().getSelection();
   }
@@ -11,6 +17,11 @@ class MarkdownLinkUtil {
     editor.getDoc().replaceSelection(link);
   }
 
+  isInLink(editor) {
+    const curPos = editor.getCursor();
+    return this.linePartOfLink.test(editor.getDoc().getLine(curPos.line));
+  }
+
 }
 
 // singleton pattern

src/client/styles/scss/_on-edit.scss

@@ -167,19 +167,32 @@ body.on-edit {
       }
 
       // add icon on cursor
+      .markdown-table-activated, .markdown-link-activated {
+        .CodeMirror-cursor {
+          &:after {
+            position: relative;
+            top: -1.1em;
+            left: 0.3em;
+            display: block;
+            width: 1em;
+            height: 1em;
+            content: ' ';
+  
+            background-repeat: no-repeat;
+            background-size: 1em;
+          }
+        }
+      }
+
       .markdown-table-activated .CodeMirror-cursor {
         &:after {
-          position: relative;
-          top: -1.1em;
-          left: 0.3em;
-          display: block;
-          width: 1em;
-          height: 1em;
-          content: ' ';
-
           background-image: url(/images/icons/editor/table.svg);
-          background-repeat: no-repeat;
-          background-size: 1em;
+        }
+      }
+
+      .markdown-link-activated .CodeMirror-cursor {
+        &:after {
+          background-image: url(/images/icons/editor/link.svg);
         }
       }