✨ add spellcheck toggle

closes TryGhost/Ghost#8461
- adds toggle spellcheck button to the `gh-markdown-editor` toolbar
- adds custom styles to fake a spellcheck icon

app/components/gh-markdown-editor.js

@@ -106,6 +106,14 @@ export default Component.extend({
                     title: 'Toggle Fullscreen'
                 },
                 '|',
+                {
+                    name: 'spellcheck',
+                    action: () => {
+                        this._toggleSpellcheck();
+                    },
+                    className: 'fa fa-check',
+                    title: 'Toggle Spellcheck'
+                },
                 {
                     name: 'guide',
                     action: () => {
@@ -199,11 +207,12 @@ export default Component.extend({
         cm.replaceSelection(text, 'end');
     },
 
-    // mark the split-pane/full-screen buttons active when they're active
+    // mark the split-pane/full-screen/spellcheck buttons active when they're active
     _updateButtonState() {
         if (this._editor) {
             let fullScreenButton = this._editor.toolbarElements.fullscreen;
             let sideBySideButton = this._editor.toolbarElements['side-by-side'];
+            let spellcheckButton = this._editor.toolbarElements.spellcheck;
 
             if (this.get('_isFullScreen')) {
                 fullScreenButton.classList.add('active');
@@ -216,6 +225,12 @@ export default Component.extend({
             } else {
                 sideBySideButton.classList.remove('active');
             }
+
+            if (this._editor.codemirror.getOption('mode') === 'spell-checker') {
+                spellcheckButton.classList.add('active');
+            } else {
+                spellcheckButton.classList.remove('active');
+            }
         }
     },
 
@@ -305,6 +320,18 @@ export default Component.extend({
         this._editor.togglePreview();
     },
 
+    _toggleSpellcheck() {
+        let cm = this._editor.codemirror;
+
+        if (cm.getOption('mode') === 'spell-checker') {
+            cm.setOption('mode', 'markdown');
+        } else {
+            cm.setOption('mode', 'spell-checker');
+        }
+
+        this._updateButtonState();
+    },
+
     willDestroyElement() {
         if (this.get('_isSplitScreen')) {
             this._disconnectSplitPreview();

app/styles/layouts/editor.css

@@ -381,3 +381,25 @@
 .editor-toolbar a.disabled:hover {
     border: none;
 }
+
+.editor-toolbar .fa-check {
+    position: relative;
+    vertical-align: bottom;
+}
+.editor-toolbar .fa-check:before {
+    font-size: 14px;
+    position: absolute;
+    line-height: 14px;
+    right: 3px;
+    bottom: 4px;
+}
+
+.editor-toolbar .fa-check:after {
+    content: 'abc';
+    font-family: var(--font-family);
+    position: absolute;
+    left: 4px;
+    font-size: 9px;
+    top: 6px;
+    line-height: 9px;
+}