Add Orthography Notes to EditLinguisticsForm

src/components/display/DictionaryDetails/DetailsSection/OrthographyDisplay.jsx

@@ -0,0 +1,25 @@
+import Inferno from 'inferno';
+import marked from 'marked';
+import sanitizeHtml from 'sanitize-html';
+
+export const OrthographyDisplay = ({
+    orthographyContent,
+}) => {
+  return (
+    <div>
+      <div className='columns'>
+
+        <div className='column'>
+          <strong>Notes:</strong>
+          <div className='content'>
+            <div dangerouslySetInnerHTML={{
+              __html: marked(sanitizeHtml(orthographyContent.notes, { allowedTags: [], allowedAttributes: [], })),
+            }} />
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+  );
+}

src/components/display/DictionaryDetails/DetailsSection/index.jsx

@@ -7,6 +7,7 @@ import './styles.scss';
 
 import { GeneralDisplay } from './GeneralDisplay';
 import { PhonologyDisplay } from './PhonologyDisplay';
+import { OrthographyDisplay } from './OrthographyDisplay';
 
 const DISPLAY = {
   NONE: false,
@@ -22,6 +23,7 @@ export class DetailsSection extends Component {
     this.defaultMenuItems = [
       'General',
       'Phonology',
+      'Orthography',
       'Grammar',
     ];
 
@@ -118,6 +120,13 @@ export class DetailsSection extends Component {
           );
           break;
         }
+        case 'Orthography': {
+          detailsDisplay = (
+            <OrthographyDisplay
+              orthographyContent={ details.orthography } />
+          );
+          break;
+        }
         case 'Grammar': {
           detailsDisplay = 'Grammar content!';
           break;

src/components/management/EditDictionaryModal/EditLinguisticsForm.jsx

@@ -12,6 +12,7 @@ export const EditLinguisticsForm = ({
   nucleus,
   coda,
   exceptions,
+  orthographyNotes,
 }) => {
   return (
     <div className='form'>
@@ -190,6 +191,37 @@ export const EditLinguisticsForm = ({
 
         </div>
       </div>
+      
+      <h4 className='title as-4'>
+        Orthography
+      </h4>
+
+      <div className='columns'>
+
+        <div className='column'>
+          <div className='field'>
+            <label className='label' htmlFor='editOrthographyNotes'>
+              Orthography Notes
+            </label>
+            <p className='help'>
+              Any notes on orthography or how phonemes are written, <a href={ MARKDOWN_LINK } target='_blank'>Markdown</a> enabled
+            </p>
+            <div className='control'>
+              <textarea className='textarea' id='editOrthographyNotes'
+                placeholder={ `- **m** = [ɱ]\n- **sh** = [ʃ]\n- **r** = [ʁ]\n...` }
+                value={ orthographyNotes }
+                onInput={ (event) => {
+                  editDictionaryModal.setState({
+                    orthographyNotes: event.target.value,
+                    hasChanged: event.target.value != editDictionaryModal.props.details.orthography.notes,
+                  });
+                }}
+              />
+            </div>
+          </div>
+        </div>
+        
+      </div>
 
     </div>
   );

src/components/management/EditDictionaryModal/index.jsx

@@ -32,6 +32,7 @@ export class EditDictionaryModal extends Component {
       nucleus: props.details.phonology.phonotactics.nucleus.join('\n'),
       coda: props.details.phonology.phonotactics.coda.join('\n'),
       exceptions: props.details.phonology.phonotactics.exceptions,
+      orthographyNotes: props.details.orthography.notes,
 
       hasChanged: false,
     }
@@ -81,6 +82,7 @@ export class EditDictionaryModal extends Component {
             nucleus={ this.state.nucleus }
             coda={ this.state.coda }
             exceptions={ this.state.exceptions }
+            orthographyNotes={ this.state.orthographyNotes }
           />
         );
         break;
@@ -176,6 +178,10 @@ export class EditDictionaryModal extends Component {
       updatedDetails['exceptions'] = this.state.exceptions;
     }
 
+    if (this.state.orthographyNotes !== this.props.details.orthography.notes) {
+      updatedDetails['orthographyNotes'] = this.state.orthographyNotes;
+    }
+
     // console.log(updatedDetails);
 
     this.props.updater.updateDictionaryDetails(updatedDetails)

src/managers/DictionaryData.js

@@ -209,6 +209,18 @@ class DictionaryData {
     return store.set('Lexiconga', updatedValues);
   }
 
+  get orthographyNotes () {
+    return store.get('Lexiconga').details.orthography.notes
+      || defaultDictionary.details.orthography.notes;
+  }
+
+  set orthographyNotes (value) {
+    assert(typeof value === 'string', 'Orthography Notes must be passed as a string.');
+    const updatedValues = store.get('Lexiconga');
+    updatedValues.details.orthography.notes = value.trim();
+    return store.set('Lexiconga', updatedValues);
+  }
+
   get alphabeticalOrder () {
     return store.get('Lexiconga').alphabeticalOrder
       || defaultDictionary.alphabeticalOrder;

src/managers/Updater.js

@@ -24,7 +24,16 @@ export class Updater {
     return new Promise((resolve, reject) => {
       const updatedDetails = {};
 
-      const detailKeys = ['consonants', 'vowels', 'blends', 'onset', 'nucleus', 'coda', 'exceptions'];
+      const detailKeys = [
+        'consonants',
+        'vowels',
+        'blends',
+        'onset',
+        'nucleus',
+        'coda',
+        'exceptions',
+        'orthographyNotes',
+      ];
 
       for (const key in dictionaryDetails) {
         this.dictionary[key] = dictionaryDetails[key];