spellcheck -> context menu with spelling suggestions

browser/components/CodeEditor.js

@@ -11,8 +11,9 @@ import crypto from 'crypto'
 import consts from 'browser/lib/consts'
 import styles from '../components/CodeEditor.styl'
 import fs from 'fs'
-const {ipcRenderer} = require('electron')
+const { ipcRenderer, remote } = require('electron')
 const spellcheck = require('browser/lib/spellcheck')
+const buildEditorContextMenu = require('browser/lib/contextMenuBuilder')
 
 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
 
@@ -50,6 +51,13 @@ export default class CodeEditor extends React.Component {
     }
     this.searchHandler = (e, msg) => this.handleSearch(msg)
     this.searchState = null
+
+    this.contextMenuHandler = function (editor, event) {
+      const menu = buildEditorContextMenu(editor, event)
+      if (menu != null) {
+        setTimeout(() => menu.popup(remote.getCurrentWindow()), 30)
+      }
+    }
   }
 
   handleSearch (msg) {
@@ -170,6 +178,7 @@ export default class CodeEditor extends React.Component {
     this.editor.on('blur', this.blurHandler)
     this.editor.on('change', this.changeHandler)
     this.editor.on('paste', this.pasteHandler)
+    this.editor.on('contextmenu', this.contextMenuHandler)
     eventEmitter.on('top:search', this.searchHandler)
 
     eventEmitter.emit('code:init')
@@ -267,8 +276,10 @@ export default class CodeEditor extends React.Component {
     this.editor.off('paste', this.pasteHandler)
     eventEmitter.off('top:search', this.searchHandler)
     this.editor.off('scroll', this.scrollHandler)
+    this.editor.off('contextmenu', this.contextMenuHandler)
     const editorTheme = document.getElementById('editorTheme')
     editorTheme.removeEventListener('load', this.loadStyleHandler)
+    spellcheck.setLanguage(null, spellcheck.SPELLCHECK_DISABLED)
   }
 
   componentDidUpdate (prevProps, prevState) {
@@ -530,7 +541,7 @@ export default class CodeEditor extends React.Component {
     const dropdown = document.createElement('select')
     dropdown.title = 'Spellcheck'
     dropdown.className = styles['spellcheck-select']
-    dropdown.addEventListener('change', (e) => spellcheck.initialize(this.editor, dropdown.value))
+    dropdown.addEventListener('change', (e) => spellcheck.setLanguage(this.editor, dropdown.value))
     const options = spellcheck.getAvailableDictionaries()
     for (const op of options) {
       const option = document.createElement('option')

browser/lib/contextMenuBuilder.js

@@ -0,0 +1,65 @@
+const {remote} = require('electron')
+const {Menu} = remote.require('electron')
+const spellcheck = require('./spellcheck')
+
+/**
+ * Creates the context menu that is shown when there is a right click in the editor of a (not-snippet) note.
+ * If the word is does not contains a spelling error (determined by the 'error style', no suggestions for corrections are requested
+ * => they are not visible in the context menu
+ * @param editor CodeMirror editor
+ * @param {MouseEvent} event that has triggered the creation of the context menu
+ * @returns {Electron.Menu} The created electron context menu
+ */
+const buildEditorContextMenu = function (editor, event) {
+  if (editor == null || event == null || event.pageX == null || event.pageY == null) {
+    return null
+  }
+  const cursor = editor.coordsChar({left: event.pageX, top: event.pageY})
+  const wordRange = editor.findWordAt(cursor)
+  const word = editor.getRange(wordRange.anchor, wordRange.head)
+  const existingMarks = editor.findMarks(wordRange.anchor, wordRange.head) || []
+  let isMisspelled = false
+  for (const mark of existingMarks) {
+    if (mark.className === spellcheck.getCSSClassName()) {
+      isMisspelled = true
+      break
+    }
+  }
+  let suggestion = []
+  if (isMisspelled) {
+    suggestion = spellcheck.getSpellingSuggestion(word)
+  }
+
+  const selection = {
+    isMisspelled: isMisspelled,
+    spellingSuggestions: suggestion
+  }
+  const template = [{
+    role: 'cut'
+  }, {
+    role: 'copy'
+  }, {
+    role: 'paste'
+  }, {
+    role: 'selectall'
+  }]
+
+  if (selection.isMisspelled) {
+    const suggestions = selection.spellingSuggestions
+    template.unshift.apply(template, suggestions.map(function (suggestion) {
+      return {
+        label: suggestion,
+        click: function (suggestion) {
+          if (editor != null) {
+            editor.replaceRange(suggestion.label, wordRange.anchor, wordRange.head)
+          }
+        }
+      }
+    }).concat({
+      type: 'separator'
+    }))
+  }
+  return Menu.buildFromTemplate(template)
+}
+
+module.exports = buildEditorContextMenu

browser/lib/spellcheck.js

@@ -30,11 +30,13 @@ function setDictionaryForTestsOnly (newDictionary) {
  * @param {Codemirror} editor CodeMirror-Editor
  * @param {String} lang on of the values from getAvailableDictionaries()-Method
  */
-function initialize (editor, lang) {
+function setLanguage (editor, lang) {
   dictionary = null
-  const existingMarks = editor.getAllMarks() || []
-  for (const mark of existingMarks) {
-    mark.clear()
+  if (editor != null) {
+    const existingMarks = editor.getAllMarks() || []
+    for (const mark of existingMarks) {
+      mark.clear()
+    }
   }
   if (lang !== SPELLCHECK_DISABLED) {
     dictionary = new Typo(lang, false, false, {
@@ -170,15 +172,37 @@ function liveSpellcheck (editor, changeObject) {
   }
 }
 
+/**
+ * Returns an array of spelling suggestions for the given (wrong written) word.
+ * Returns an empty array if the dictionary is null (=> spellcheck is disabled) or the given word was null
+ * @param word word to be checked
+ * @returns {String[]} Array of suggestions
+ */
+function getSpellingSuggestion (word) {
+  if (dictionary == null || word == null) {
+    return []
+  }
+  return dictionary.suggest(word)
+}
+
+/**
+ * Returns the name of the CSS class used for errors
+ */
+function getCSSClassName () {
+  return styles[CSS_ERROR_CLASS]
+}
+
 module.exports = {
   DICTIONARY_PATH,
   CSS_ERROR_CLASS,
   SPELLCHECK_DISABLED,
   getAvailableDictionaries,
-  initialize,
+  setLanguage,
   liveSpellcheck,
+  getSpellingSuggestion,
   checkWord,
   checkMultiLineRange,
   checkWholeDocument,
-  setDictionaryForTestsOnly
+  setDictionaryForTestsOnly,
+  getCSSClassName
 }

browser/main/lib/dataApi/attachmentManagement.js

@@ -81,6 +81,9 @@ function createAttachmentDestinationFolder (destinationStoragePath, noteKey) {
  * @param noteKey Key of the current note
  */
 function migrateAttachments (renderedHTML, storagePath, noteKey) {
+  if (renderedHTML == null || storagePath == null || noteKey == null) {
+    return
+  }
   if (sander.existsSync(path.join(storagePath, 'images'))) {
     const attachments = getAttachmentsInContent(renderedHTML) || []
     if (attachments !== []) {