diff --git a/services/web/public/coffee/ide/editor/EditorManager.coffee b/services/web/public/coffee/ide/editor/EditorManager.coffee
index 72bbe8509a..e3cabf8e98 100644
--- a/services/web/public/coffee/ide/editor/EditorManager.coffee
+++ b/services/web/public/coffee/ide/editor/EditorManager.coffee
@@ -1,5 +1,6 @@
 define [
 	"ide/editor/Document"
+	"ide/editor/components/spellMenu"
 	"ide/editor/directives/aceEditor"
 	"ide/editor/directives/toggleSwitch"
 	"ide/editor/controllers/SavingNotificationController"
diff --git a/services/web/public/coffee/ide/editor/components/spellMenu.coffee b/services/web/public/coffee/ide/editor/components/spellMenu.coffee
new file mode 100644
index 0000000000..c3fd78efba
--- /dev/null
+++ b/services/web/public/coffee/ide/editor/components/spellMenu.coffee
@@ -0,0 +1,29 @@
+define ["base"], (App) ->
+  App.component "spellMenu", {
+    bindings: {
+      open: "<"
+      top: "<"
+      left: "<"
+      suggestions: "<"
+      replaceWord: "&"
+      learnWord: "&"
+    }
+    template: """
+  <div
+    class="dropdown context-menu spell-check-menu"
+    ng-show="$ctrl.open"
+    ng-style="{top: $ctrl.top, left: $ctrl.left}"
+    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>
+      <li class="divider"></li>
+      <li>
+        <a href ng-click="$ctrl.learnWord(suggestion)">Add to Dictionary</a>
+      </li>
+    </ul>
+  </div>
+    """
+  }
\ No newline at end of file
diff --git a/services/web/public/coffee/ide/editor/directives/aceEditor.coffee b/services/web/public/coffee/ide/editor/directives/aceEditor.coffee
index ad34d4d493..a30b93aaa0 100644
--- a/services/web/public/coffee/ide/editor/directives/aceEditor.coffee
+++ b/services/web/public/coffee/ide/editor/directives/aceEditor.coffee
@@ -510,22 +510,12 @@ define [
 						>Dismiss</a>
 					</div>
 					<div class="ace-editor-body"></div>
-					<div
-						class="dropdown context-menu spell-check-menu"
-						ng-show="spellingMenu.open"
-						ng-style="{top: spellingMenu.top, left: spellingMenu.left}"
-						ng-class="{open: spellingMenu.open}"
-					>
-						<ul class="dropdown-menu">
-							<li ng-repeat="suggestion in spellingMenu.highlight.suggestions | limitTo:8">
-								<a href ng-click="replaceWord(spellingMenu.highlight, suggestion)">{{ suggestion }}</a>
-							</li>
-							<li class="divider"></li>
-							<li>
-								<a href ng-click="learnWord(spellingMenu.highlight)">Add to Dictionary</a>
-							</li>
-						</ul>
-					</div>
+					<spell-menu
+						open="spellMenu.open"
+						top="spellMenu.top"
+						left="spellMenu.left"
+						suggestions="spellMenu.suggestions"
+					></spell-menu>
 					<div
 						class="annotation-label"
 						ng-show="annotationLabel.show"