codemirror-typo
🐌 Spellcheck your CodeMirror editor in style with the dictionary of your choice
Install
Browser inclusion - Include lib/codemirror-typo.min.js
into your head
:
This is a minified version of codemirror-typo
, bundled using browserify.
Working in Node - Install it as a dependency:
$ npm install --save codemirror-typo
Usage
Locate a Hunspell dictionary you'd like to use. You'll need a *.aff
and *.dic
for your spellcheck language. Below, there is more dictionary information, and a list of where to get dictionaries.
Load lib/codemirror-typo.min.css
into your head
:
Register codeMirrorTypo
:
In Node, require
it:
var codeMirrorTypo = ;
In the browser, it is registered through adding the lib/codemirror.min.js
script.
Now just plug and play!
var cm = ; // your CodeMirror instance ;
cm
-CodeMirorr
instance to overlay spellcheckerlang
-string
- dictionary languageoptions
-string
orobject
- optional, either astring
path to dictionary files or an options object
There are now red highlighted overlays on words not recognized by the dictionary. Upon focus, gutter marks provide a menu of suggestions of close matches from dictionary for easy fixing.
Dictionaries
codemirror-typo
uses typo-js that makes use of Hunspell dictionaries, a popular open-source dictionary framework used by Firefox, Google Chrome, LibreOffice and more. These consist of a *.dic
file of words and a *.aff
of various spelling rules.
See below for a list of Hunspell dictionary repos for downloading aff
and dic
files.
Options Parameters
Dictionary Path Options
No Path:
Passing just lang
looks for dictionary/lang/lang.aff
& dictionary/lang/lang.dic
:
; // for files in dictionary/en_US/
Note that this is a relative path.
String Path:
Passing lang
and a path string
looks for path/lang.aff
, path/lang.dic
:
;
The path can be relative, absolute, or an external web address:
;
Options Object Parameters
codemirror-typo
follows this schema when looking for dictionary files:
dictPath
/dictFolder
/[affFile
.aff,arrFile
.dic]
Defaults
dictPath: 'dictionary/' + lang // replaced by options parameter if string dictFolder: '' // optional subdirectory of dictPath filename: '' // name of both aff and dic file affFile: lang // name of aff file, overrides filename dicFile: lang // name of dic file, overrides filename typoClass: 'typo' // CSS class applied to all spelling errors, // will be prefixed with 'cm-' typoCSS: 'background: rgba(255,0,0,.25)' // CSS applied to typoClass gutterClass: 'typoFlags' // CSS class and name of CodeMirror gutter gutterMarkClass: 'typoMark' // CSS class of gutter markers
Note that dictPath
may be an absolute or relative directory path, or a web address, with or without a trailing /
.
Dictionary Repos
Known Problems
The gutter markers and spelling suggestions are very much in beta. They're functional but definitely need improvement. Suggestions, issues & PR's welcome!
- Long load time for spelling suggestion menu, especially if word is not in dictionary. The menu should render as it's generated, but it is waiting until the whole element exists before rendering it...
- Gutter marks: they don't load in as soon as the CodeMirror instance does, and they don't work on lines currently being written.
TODO:
- dictionary path configuration options
- gutter mark typos
- context menu spelling suggestions
- make and host a demo
- better browser compatibility
- general code cleanup
- cache an ignore word list aka "Add to dictionary"
- add devTool for auto-downloading dictionaries
License
MIT © Robert Pirtle