add spellCheck support (#155)

Author: terite

README.md

@@ -64,6 +64,7 @@ import  TranscriptEditor  from '@bbc/react-transcript-editor';
      transcriptData=// Transcript json
      mediaUrl=// string url to media file - audio or video
      isEditable={true}// set to true if you want to be able to edit the text
+     spellCheck={false}// set to true if you want the browser to spell check this transcript
      sttJsonType={ 'bbckaldi' } // the type of STT Json transcript supported.
      handleAnalyticsEvents={ this.handleAnalyticsEvents } // optional - if you want to collect analytics events.
      fileName=// optional - used for saving and retrieving local storage blob files

demo/app.js

@@ -20,6 +20,7 @@ class App extends React.Component {
       transcriptData: null,
       mediaUrl: null,
       isTextEditable: true,
+      spellCheck: false,
       sttType: 'bbckaldi',
       analyticsEvents: [],
       title: '',
@@ -83,10 +84,16 @@ class App extends React.Component {
     }
   }
 
-  handleIsTextEditable = () => {
-    this.setState(prevState => ({
-      isTextEditable: prevState.isTextEditable !== true
-    }));
+  handleIsTextEditable = (e) => {
+    this.setState({
+      isTextEditable: e.target.checked
+    });
+  };
+
+  handleSpellCheck = (e) => {
+    this.setState({
+      spellCheck: e.target.checked
+    });
   };
 
   // https://stackoverflow.com/questions/21733847/react-jsx-selecting-selected-on-selected-select-option
@@ -226,11 +233,21 @@ class App extends React.Component {
               <input
                 id={ 'textIsEditableCheckbox' }
                 type="checkbox"
-                defaultChecked="true"
+                checked={ this.state.isTextEditable }
                 onChange={ this.handleIsTextEditable }
               />
             </div>
 
+            <div className={ style.checkbox }>
+              <label className={ style.editableLabel } htmlFor={ 'spellCheckCheckbox' }>Spell Check</label>
+              <input
+                id={ 'spellCheckCheckbox' }
+                type="checkbox"
+                checked={ this.state.spellCheck }
+                onChange={ this.handleSpellCheck }
+              />
+            </div>
+
             <button className={ style.warningButton } onClick={ () => this.clearLocalStorage() }>Clear Local Storage</button>
           </section>
         </div>
@@ -240,6 +257,7 @@ class App extends React.Component {
           fileName={ this.state.fileName }
           mediaUrl={ this.state.mediaUrl }
           isEditable={ this.state.isTextEditable }
+          spellCheck={ this.state.spellCheck }
           sttJsonType={ this.state.sttType }
           handleAnalyticsEvents={ this.handleAnalyticsEvents }
           title={ this.state.title }

packages/components/timed-text-editor/index.js

@@ -509,6 +509,7 @@ class TimedTextEditor extends React.Component {
           blockRendererFn={ this.renderBlockWithTimecodes }
           handleKeyCommand={ command => this.handleKeyCommand(command) }
           keyBindingFn={ e => this.customKeyBindingFn(e) }
+          spellCheck={ this.props.spellCheck }
         />
       </section>
     );
@@ -547,6 +548,7 @@ TimedTextEditor.propTypes = {
   transcriptData: PropTypes.object,
   mediaUrl: PropTypes.string,
   isEditable: PropTypes.bool,
+  spellCheck: PropTypes.bool,
   onWordClick: PropTypes.func,
   sttJsonType: PropTypes.string,
   isPlaying: PropTypes.func,

packages/components/timed-text-editor/stories/index.stories.js

@@ -17,6 +17,7 @@ storiesOf('TimedTextEditor', module)
       transcriptData: bbcKaldiTranscript,
       mediaUrl: text('mediaUrl', mediaUrl),
       isEditable: boolean('isEditable', true),
+      spellCheck: boolean('spellCheck', false),
       onWordClick: action('onWordClick'),
       sttJsonType: text('sttJsonType', 'bbckaldi'),
       isPlaying: action('isPlaying'),

packages/components/transcript-editor/index.js

@@ -342,6 +342,7 @@ class TranscriptEditor extends React.Component {
         isPlaying={ this.handleIsPlaying }
         currentTime={ this.state.currentTime }
         isEditable={ this.props.isEditable }
+        spellCheck={ this.props.spellCheck }
         sttJsonType={ this.props.sttJsonType }
         mediaUrl={ this.props.mediaUrl }
         isScrollIntoViewOn={ this.state.isScrollIntoViewOn }
@@ -454,6 +455,7 @@ TranscriptEditor.propTypes = {
   title: PropTypes.string,
   mediaUrl: PropTypes.string,
   isEditable: PropTypes.bool,
+  spellCheck: PropTypes.bool,
   sttJsonType: PropTypes.string,
   handleAnalyticsEvents: PropTypes.func,
   fileName: PropTypes.string,

packages/components/transcript-editor/stories/index.stories.js

@@ -16,6 +16,7 @@ storiesOf('TranscriptEditor', module)
       mediaUrl: text('mediaUrl', 'https://download.ted.com/talks/KateDarling_2018S-950k.mp4'),
       sttJsonType: text('sttJsonType', 'bbckaldi' ),
       isEditable: boolean('isEditable', true ),
+      spellCheck: boolean('spellCheck', false ),
       fileName: text('fileName', 'KateDarling_2018S-950k.mp4' ),
       transcriptData: object('transcriptData', bbcKaldiTranscript),
       handleAnalyticsEvents: action('Analytics event')