Fix the bold command

Author: andrerpena

src/ReactMde.tsx

@@ -11,7 +11,7 @@ import { extractCommandMap } from "./util/CommandUtils";
 import { Tab } from "./types/Tab";
 import { L18n } from "./types/L18n";
 import { enL18n } from "./l18n/react-mde.en";
-import { CommandOrchestrator } from "./commandOrchestrator";
+import { CommandOrchestrator, TextAreaCommandOrchestrator } from "./commandOrchestrator";
 
 export interface ReactMdeProps {
   value: string;
@@ -140,6 +140,11 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
     document.addEventListener<"mouseup">("mouseup", this.handleGripMouseUp);
   }
 
+  setTextAreaRef = (element: HTMLTextAreaElement) => {
+    this.textAreaRef = element;
+    this.commandOrchestrator = new TextAreaCommandOrchestrator(this.textAreaRef);
+  };
+
   handleCommand = (command: Command) => {
     this.commandOrchestrator.executeCommand(command);
   };
@@ -173,7 +178,7 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
           this.state.currentTab === "write" ?
             <>
               <TextArea
-                editorRef={(c: HTMLTextAreaElement) => this.textAreaRef = c}
+                editorRef={this.setTextAreaRef}
                 onChange={this.handleTextChange}
                 readOnly={readOnly}
                 textAreaProps={textAreaProps}

src/commandOrchestrator.ts

@@ -33,7 +33,7 @@ export function getStateFromTextArea (textArea: HTMLTextAreaElement): TextState
       end: textArea.selectionEnd
     },
     text: textArea.value,
-    selectedText: textArea.value.slice(textArea.selectionStart, textArea.selectionEnd - 1)
+    selectedText: textArea.value.slice(textArea.selectionStart, textArea.selectionEnd)
   };
 }
 

src/commands/boldCommand.tsx

@@ -6,13 +6,17 @@ import { selectWord } from "../util/MarkdownUtil";
 export const boldCommand: Command = {
   buttonContentBuilder: ({ iconProvider }) => iconProvider("bold"),
   buttonProps: { "aria-label": "Add bold text" },
-  execute: (initialState: TextState, api: TextApi) => {
+  execute: (state0: TextState, api: TextApi) => {
     // Adjust the selection to encompass the whole word if the caret is inside one
-    let state = api.setSelectionRange(selectWord({ text: initialState.text, selection: initialState.selection }));
+    const newSelectionRange = selectWord({ text: state0.text, selection: state0.selection });
+    const state1 = api.setSelectionRange(newSelectionRange);
     // Replaces the current selection with the bold mark up
-    state = api.replaceSelection(`**${state.selectedText}**`);
+    const state2 = api.replaceSelection(`**${state1.selectedText}**`);
     // Adjust the selection to not contain the **
-    api.setSelectionRange({ start: state.selection.start + 2, end: state.selection.end + 2 });
+    api.setSelectionRange({
+      start: state2.selection.end - 2 - state1.selectedText.length,
+      end: state2.selection.end - 2
+    });
   },
   keyCommand: "bold"
 };

src/types/CommandOptions.ts

@@ -7,6 +7,11 @@ export interface TextState {
 }
 
 export interface TextApi {
+  /**
+   * Replaces the current selection with the new text. This will make the new selectedText to be empty, the
+   * selection start and selection end will be the same and will both point to the end
+   * @param text
+   */
   replaceSelection (text: string): TextState;
 
   setSelectionRange (selection: TextRange): TextState;