diff --git a/app/components/gh-markdown-editor.js b/app/components/gh-markdown-editor.js index bd1e188366..293583ac95 100644 --- a/app/components/gh-markdown-editor.js +++ b/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(); diff --git a/app/styles/layouts/editor.css b/app/styles/layouts/editor.css index 91867c3843..5ea5d5fda8 100644 --- a/app/styles/layouts/editor.css +++ b/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; +} diff --git a/yarn.lock b/yarn.lock index 8d51afe085..52aa332bad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7458,7 +7458,7 @@ simple-is@~0.2.0: "simplemde@https://github.com/kevinansfield/simplemde-markdown-editor.git#ghost": version "1.11.2" - resolved "https://github.com/kevinansfield/simplemde-markdown-editor.git#29f69b859b19f6ecbc678780290e388298b308c4" + resolved "https://github.com/kevinansfield/simplemde-markdown-editor.git#05ba8d8ff395b148258743a31ef7e07ae5579d3e" dependencies: codemirror "*" codemirror-spell-checker "*"