Add Grammar notes editing and display

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

@@ -0,0 +1,29 @@
+import Inferno from 'inferno';
+import PropTypes from 'prop-types';
+import marked from 'marked';
+import sanitizeHtml from 'sanitize-html';
+
+export const GrammarDisplay = (props) => {
+  PropTypes.checkPropTypes({
+    grammarContent: PropTypes.object.isRequired,
+  }, props, 'prop', 'GrammarDisplay');
+
+  const { grammarContent } = props
+  return (
+    <div>
+      <div className='columns'>
+
+        <div className='column'>
+          <strong>Notes:</strong>
+          <div className='content'>
+            <div dangerouslySetInnerHTML={{
+              __html: marked(sanitizeHtml(grammarContent.notes, { allowedTags: [], allowedAttributes: [], })),
+            }} />
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+  );
+}

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

@@ -128,7 +128,10 @@ export class DetailsSection extends Component {
           break;
         }
         case 'Grammar': {
-          detailsDisplay = 'Grammar content!';
+          detailsDisplay = (
+            <GrammarDisplay
+              grammarContent={ details.grammar } />
+          );
           break;
         }
       }

src/components/management/EditDictionaryModal/EditLinguisticsForm.jsx

@@ -16,6 +16,7 @@ export const EditLinguisticsForm = (props) => {
     coda: PropTypes.string.isRequired,
     exceptions: PropTypes.string.isRequired,
     orthographyNotes: PropTypes.string.isRequired,
+    grammarNotes: PropTypes.string.isRequired,
   }, props, 'prop', 'EditLinguisticsForm');
 
   const {
@@ -29,6 +30,7 @@ export const EditLinguisticsForm = (props) => {
     coda,
     exceptions,
     orthographyNotes,
+    grammarNotes,
   } = props;
   return (
     <div className='form'>
@@ -229,6 +231,32 @@ export const EditLinguisticsForm = (props) => {
         </div>
       </div>
       
+      <h4 className='title as-4'>
+        Grammar
+      </h4>
+
+      <div className='columns'>
+        <div className='column'>
+
+          <LargeTextArea
+            label='Grammar Notes'
+            helpText={[
+              'Any explanation of grammar, ',
+              <a href={ MARKDOWN_LINK } target='_blank'>Markdown</a>,
+              ' enabled',
+            ]}
+            placeholder={ `- Word order is VSO\n- There is no definite article\n...` }
+            value={ grammarNotes }
+            onInput={ (event) => {
+              editDictionaryModal.setState({
+                grammarNotes: event.target.value,
+                hasChanged: event.target.value != editDictionaryModal.props.details.grammar.notes,
+              });
+            }} />
+
+        </div>
+      </div>
+
     </div>
   );
 }

src/components/management/EditDictionaryModal/index.jsx

@@ -48,6 +48,7 @@ export class EditDictionaryModal extends Component {
       coda: props.details.phonology.phonotactics.coda.join('\n'),
       exceptions: props.details.phonology.phonotactics.exceptions,
       orthographyNotes: props.details.orthography.notes,
+      grammarNotes: props.details.grammar.notes,
 
       allowDuplicates: props.settings.allowDuplicates,
       caseSensitive: props.settings.caseSensitive,
@@ -104,6 +105,7 @@ export class EditDictionaryModal extends Component {
             coda={ this.state.coda }
             exceptions={ this.state.exceptions }
             orthographyNotes={ this.state.orthographyNotes }
+            grammarNotes={ this.state.grammarNotes }
           />
         );
         break;
@@ -210,6 +212,10 @@ export class EditDictionaryModal extends Component {
       updatedDetails['orthographyNotes'] = this.state.orthographyNotes;
     }
 
+    if (this.state.grammarNotes !== this.props.details.grammar.notes) {
+      updatedDetails['grammarNotes'] = this.state.grammarNotes;
+    }
+
     if (this.state.allowDuplicates !== this.props.settings.allowDuplicates) {
       updatedDetails['allowDuplicates'] = this.state.allowDuplicates;
     }

src/managers/DictionaryData.js

@@ -25,14 +25,14 @@ const defaultDictionary = {
       notes: '',
     },
     grammar: {
-      content: '',
+      notes: '',
     },
-    custom: [
+    // custom: [
-      {
+    //   // {
-        name: 'Example Tab',
+    //   //   name: 'Example Tab',
-        content: `This is an _example_ tab to show how **tabs** work with [Markdown](${ MARKDOWN_LINK })!`,
+    //   //   content: `This is an _example_ tab to show how **tabs** work with [Markdown](${ MARKDOWN_LINK })!`,
-      }
+    //   // }
-    ],
+    // ],
   },
   settings: {
     allowDuplicates: false,
@@ -233,6 +233,18 @@ class DictionaryData {
     return store.set('Lexiconga', updatedValues);
   }
 
+  get grammarNotes () {
+    return store.get('Lexiconga').details.grammar.notes
+      || defaultDictionary.details.grammar.notes;
+  }
+
+  set grammarNotes (value) {
+    assert(typeof value === 'string', 'Grammar Notes must be passed as a string.');
+    const updatedValues = store.get('Lexiconga');
+    updatedValues.details.grammar.notes = value.trim();
+    return store.set('Lexiconga', updatedValues);
+  }
+
   get alphabeticalOrder () {
     return store.get('Lexiconga').alphabeticalOrder
       || defaultDictionary.alphabeticalOrder;

src/managers/Updater.js

@@ -33,6 +33,7 @@ export class Updater {
         'coda',
         'exceptions',
         'orthographyNotes',
+        'grammarNotes',
       ];
       const settingKeys = [
         'allowDuplicates',