Add useIpaPronunciationField

option to prevent IPA transformation in pronunciation field.

src/components/MainDisplay.jsx

@@ -22,6 +22,7 @@ export class MainDisplay extends Component {
       wordsInCurrentList: PropTypes.number,
       currentPage: PropTypes.number,
       itemsPerPage: PropTypes.number,
+      useIpaPronunciationField: PropTypes.bool,
       stats: PropTypes.object.isRequired,
       setPage: PropTypes.func.isRequired,
       updateDisplay: PropTypes.func.isRequired,
@@ -63,6 +64,7 @@ export class MainDisplay extends Component {
       wordsInCurrentList,
       currentPage,
       itemsPerPage,
+      useIpaPronunciationField,
       stats,
       setPage,
       updateDisplay,
@@ -84,6 +86,7 @@ export class MainDisplay extends Component {
               closeWordForm={ this.closeWordForm.bind(this) }
             >
               <WordForm
+                useIpaField={ useIpaPronunciationField }
                 updateDisplay={ updateDisplay }
               />
             </LeftColumn>
@@ -121,6 +124,7 @@ export class MainDisplay extends Component {
                 isLoadingWords={ isLoadingWords }
                 words={ wordsToDisplay }
                 adsEveryXWords={ 10 }
+                useIpaFieldOnEdit={ useIpaPronunciationField }
                 updateDisplay={ updateDisplay } />
               
               <Pagination

src/components/display/WordDisplay/index.jsx

@@ -17,6 +17,7 @@ export class WordDisplay extends Component {
 
     PropTypes.checkPropTypes({
       word: PropTypes.object.isRequired,
+      useIpaFieldOnEdit: PropTypes.bool,
       updateDisplay: PropTypes.func.isRequired,
     }, props, 'prop', 'WordDisplay');
 
@@ -65,12 +66,13 @@ export class WordDisplay extends Component {
 
   render () {
     const { menuIsOpen, isEditing } = this.state;
-    const { word, updateDisplay } = this.props;
+    const { word, useIpaFieldOnEdit, updateDisplay } = this.props;
 
     if (isEditing) {
       return (
         <WordForm
           word={word}
+          useIpaField={ useIpaFieldOnEdit }
           updateDisplay={updateDisplay}
           callback={() => {
             this.setState({

src/components/display/WordsList.jsx

@@ -16,6 +16,7 @@ export class WordsList extends Component {
       isLoadingWords: PropTypes.bool,
       adsEveryXWords: PropTypes.number,
       words: PropTypes.array,
+      useIpaFieldOnEdit: PropTypes.bool,
       updateDisplay: PropTypes.func.isRequired,
     }, props, 'prop', 'WordList');
   }
@@ -41,6 +42,7 @@ export class WordsList extends Component {
                 }
                 
                 <WordDisplay word={ word }
+                  useIpaFieldOnEdit={ this.props.useIpaFieldOnEdit }
                   updateDisplay={ this.props.updateDisplay } />
               </div>
             );

src/components/management/IPAField.jsx

@@ -22,6 +22,7 @@ export class IPAField extends Component {
       helpText: PropTypes.string,
       placeholder: PropTypes.string,
       isDisplayOnly: PropTypes.bool,
+      preventIPA: PropTypes.bool,
       onInput: PropTypes.func,
       onChange: PropTypes.func,
     }, props, 'prop', 'IPAField');
@@ -102,23 +103,28 @@ export class IPAField extends Component {
   }
 
   onInput (event) {
-    let val = event.target.value,
+    let val = event.target.value;
-    pos = this.field.selectionStart || val.length;
+    let pos;
+    if (!this.props.preventIPA) {
+      pos = this.field.selectionStart || val.length;
 
-    if (event.key) {
+      if (event.key) {
-      const key = event.key,
+        const key = event.key,
-        digraph = digraphs[val.substr(pos - 1, 1) + key];
+          digraph = digraphs[val.substr(pos - 1, 1) + key];
 
-      if (digraph) {
+        if (digraph) {
-        event.preventDefault();
+          event.preventDefault();
-        val = val.slice(0, pos - 1) + digraph + val.slice(pos);
+          val = val.slice(0, pos - 1) + digraph + val.slice(pos);
+        }
       }
     }
 
     if (val !== this.state.value) {
       this.setState({ value: val }, () => {
-        this.field.focus();
+        if (!this.props.preventIPA) {
-        this.field.setSelectionRange(pos, pos);
+          this.field.focus();
+          this.field.setSelectionRange(pos, pos);
+        }
 
         if (this.props.onInput) {
           this.props.onInput(this.state.value);
@@ -149,7 +155,7 @@ export class IPAField extends Component {
         }
         <div className='control'>
           <input className='input' id={ this.props.id || null } type='text'
-            placeholder={ this.props.placeholder || '[prə.ˌnʌn.si.ˈeɪ.ʃən]' }
+            placeholder={ this.props.placeholder || (!this.props.preventIPA ? '[prə.ˌnʌn.si.ˈeɪ.ʃən]' : 'pronunciation') }
             disabled={ !!this.props.isDisplayOnly }
             ref={ (input) => this.field = input }
             value={ this.state.value }
@@ -157,7 +163,7 @@ export class IPAField extends Component {
             onKeyDown={ (event) => this.onInput(event) }
             onChange={ () => this.onChange() } />
         </div>
-        { this.showButtons() }
+        { !this.props.preventIPA && this.showButtons() }
       </div>
     );
   }

src/components/management/WordForm.jsx

@@ -13,6 +13,7 @@ export class WordForm extends Component {
 
     PropTypes.checkPropTypes({
       word: PropTypes.object,
+      useIpaField: PropTypes.bool.isRequired,
       callback: PropTypes.func,
       updateDisplay: PropTypes.func,
     }, props, 'prop', 'WordForm');
@@ -120,6 +121,7 @@ export class WordForm extends Component {
         </div>
 
         <IPAField value={ this.state.wordPronunciation }
+          preventIPA={ !this.props.useIpaField }
           onChange={ (newValue) => this.setState({ wordPronunciation: newValue }) } />
 
         <div className='field'>

src/index.jsx

@@ -38,6 +38,7 @@ class App extends Component {
       displayedWords: [],
       currentPage: 0,
       itemsPerPage: 30,
+      useIpaPronunciationField: true,
       searchConfig: {
         searchingIn: 'name',
         searchMethod: SEARCH_METHOD.contains,
@@ -218,6 +219,7 @@ class App extends Component {
           wordsInCurrentList={ this.state.wordsInCurrentList }
           currentPage={ this.state.currentPage }
           itemsPerPage={ this.state.itemsPerPage }
+          useIpaPronunciationField={ this.state.useIpaPronunciationField }
           stats={ this.state.stats }
           setPage={ this.setPage.bind(this) }
           updateDisplay={ this.updateDisplayedWords.bind(this) }