Implementing the part that inserts a link

Author: andrerpena

src/ReactMde.js

@@ -70,24 +70,32 @@ class ReactMde extends Component {
         }
     }
 
-    handleBoldCommand() {
+    /**
+     * Handles the execution of a command
+     * @param {function} command
+     * @memberOf ReactMde
+     */
+    handleCommand(command) 
+    {
         let {
             value: { text },
             onChange
         } = this.props;
         let textarea = this.refs.textarea;
-        var newValue = ReactMdeCommands.makeBold(text, getSelection(textarea));
+        var newValue = command(text, getSelection(textarea));
         onChange(newValue);
     }
 
+    handleBoldCommand() {
+        this.handleCommand(ReactMdeCommands.makeBold);
+    }
+
     handleItalicCommand() {
-        let {
-            value: { text },
-            onChange
-        } = this.props;
-        let textarea = this.refs.textarea;
-        var newValue = ReactMdeCommands.makeItalic(text, getSelection(textarea));
-        onChange(newValue);
+        this.handleCommand(ReactMdeCommands.makeItalic);
+    }
+
+    handleLinkCommand() {
+        this.handleCommand(ReactMdeCommands.makeLink);
     }
 
     componentDidMount() {
@@ -113,7 +121,7 @@ class ReactMde extends Component {
                         <HeaderItem icon="italic" onClick={this.handleItalicCommand.bind(this)} />
                     </HeaderGroup>
                     <HeaderGroup>
-                        <HeaderItem icon="link" />
+                        <HeaderItem icon="link" onClick={this.handleLinkCommand.bind(this)} />
                         <HeaderItem icon="quote-right" />
                         <HeaderItem icon="picture-o" />
                     </HeaderGroup>

src/ReactMdeCommands.js

@@ -1,9 +1,24 @@
+/**
+ * Inserts text in the given position
+ * 
+ * @param {any} text
+ * @param {any} insertionText
+ * @param {any} position
+ * @returns
+ */
 function insertText(text, insertionText, position) {
     return [text.slice(0, position), insertionText, text.slice(position)].join('');
 }
 
 export default {
 
+    /**
+     * Makes the text bold
+     * 
+     * @param {any} text
+     * @param {any} selection
+     * @returns
+     */
     makeBold: function (text, selection) {
         var newText = insertText(text, '**', selection[0]);
         newText = insertText(newText, '**', selection[1] + 2);
@@ -13,12 +28,36 @@ export default {
         }
     },
 
+    /**
+     * Makes the text italic
+     * 
+     * @param {any} text
+     * @param {any} selection
+     * @returns
+     */
     makeItalic: function (text, selection) {
         var newText = insertText(text, '*', selection[0]);
         newText = insertText(newText, '*', selection[1] + 1);
         return {
             text: newText,
             selection: [selection[0] + 1, selection[1] + 1]
         }
+    },
+
+    /**
+     * Makes a link
+     * 
+     * @param {any} text
+     * @param {any} selection
+     * @returns
+     */
+    makeLink: function (text, selection) {
+
+        var newText = insertText(text, '[', selection[0]);
+        newText = insertText(newText, '](url)', selection[1] + 1);
+        return {
+            text: newText,
+            selection: [selection[0] + 1, selection[1] + 1]
+        }
     }
 }