Replace word with suggestion and learn word

services/web/public/coffee/ide/editor/components/spellMenu.coffee

@@ -4,7 +4,7 @@ define ["base"], (App) ->
       open: "<"
       top: "<"
       left: "<"
-      suggestions: "<"
+      highlight: "<"
       replaceWord: "&"
       learnWord: "&"
     }
@@ -16,12 +16,17 @@ define ["base"], (App) ->
     ng-class="{open: $ctrl.open}"
   >
     <ul class="dropdown-menu">
-      <li ng-repeat="suggestion in $ctrl.suggestions | limitTo:8">
-        <a href ng-click="$ctrl.replaceWord(suggestion)">{{ suggestion }}</a>
+      <li ng-repeat="suggestion in $ctrl.highlight.suggestions | limitTo:8">
+        <a
+          href
+          ng-click="$ctrl.replaceWord({ highlight: $ctrl.highlight, suggestion: suggestion })"
+        >
+          {{ suggestion }}
+        </a>
       </li>
       <li class="divider"></li>
       <li>
-        <a href ng-click="$ctrl.learnWord(suggestion)">Add to Dictionary</a>
+        <a href ng-click="$ctrl.learnWord({ highlight: $ctrl.highlight })">Add to Dictionary</a>
       </li>
     </ul>
   </div>

services/web/public/coffee/ide/editor/directives/aceEditor.coffee

@@ -514,7 +514,9 @@ define [
 						open="spellMenu.open"
 						top="spellMenu.top"
 						left="spellMenu.left"
-						suggestions="spellMenu.suggestions"
+						highlight="spellMenu.highlight"
+						replace-word="replaceWord(highlight, suggestion)"
+						learn-word="learnWord(highlight)"
 					></spell-menu>
 					<div
 						class="annotation-label"
@@ -624,3 +626,8 @@ define [
 					highlight.row, highlight.column + highlight.word.length
 				)
 			)
+		replaceWord: (highlight, newWord) =>
+			@editor.getSession().replace(new Range(
+				highlight.row, highlight.column,
+				highlight.row, highlight.column + highlight.word.length
+			), newWord)

services/web/public/coffee/ide/editor/directives/aceEditor/spell-check/SpellCheckManager.coffee

@@ -14,6 +14,9 @@ define [], () ->
 				if language != oldLanguage and oldLanguage?
 					@runFullCheck()
 
+			@$scope.replaceWord = @adapter.replaceWord
+			@$scope.learnWord = @learnWord
+
 		init: () ->
 			@updatedLines = Array(@adapter.getLines().length).fill(true)
 			@runSpellCheckSoon(200) if @isSpellCheckEnabled()
@@ -53,7 +56,7 @@ define [], () ->
 						open: true
 						top: coords.y + 'px'
 						left: coords.x + 'px'
-						suggestions: highlight.suggestions
+						highlight: highlight
 					}
 				@setUpClickOffContextMenuListener()
 				return false
@@ -70,6 +73,12 @@ define [], () ->
 				@$scope.$apply () =>
 					@$scope.spellMenu.open = false
 
+		learnWord: (highlight) =>
+			@apiRequest "/learn", word: highlight.word
+			@adapter.wordManager.removeHighlight highlight
+			language = @$scope.spellCheckLanguage
+			@cache?.put("#{language}:#{highlight.word}", true)
+
 		runFullCheck: () ->
 			@adapter.wordManager.reset()
 			@runSpellCheck() if @isSpellCheckEnabled()