Loading JSON into editor dynamically

[ghost]

Hi,

I am wondering if you might be able to point me in the right direction. I am able to get the editor running in a React app (create-react-app) with a static JSON transcript:

import React from 'react';
import ReactDOM from 'react-dom';
import SlateTranscriptEditor  from 'slate-transcript-editor';

import TRANSCRIPT_DATA from './test';
const DEMO_MEDIA_URL = 'xyz';

ReactDOM.render(
  <React.StrictMode>
    <SlateTranscriptEditor
      mediaUrl={DEMO_MEDIA_URL}
      transcriptData={TRANSCRIPT_DATA}
    />
  </React.StrictMode>,
  document.getElementById('root')
);

But I am struggling to make the editor accept an object which is not fetched using an import statement. The following function returns the exact same JSON object as test.json:

const loadTranscriptData = async () => {
  const response = await fetch( 'https://' + window.location.hostname + '/submission_json.php' );
  const json = await response.json();

  console.log( json );
  return json;
}

export default loadTranscriptData;

When I replace import TRANSCRIPT_DATA from './test'; with const TRANSCRIPT_DATA = loadTranscriptData(); (and of course import the file where the function lives), the editor still loads but does not display the contents of the transcript, only some generic strings.

So I'm asking this in case I am missing something obvious or in case you're supposed to load dynamic JSON into the editor using a different method. Any little pointer is highly appreciated.

Best,
David Trasbo

[pietrop]

Hi @img-play
I think you are encountering a race condition. Where you try to initialize the slate-transcript-editor component without having first passed the transcript json data. You can add a check to only to that if the transcript json data is available.

 {this.state.transcriptJson !== null && (

            <TranscriptEditor
                transcriptData={this.state.transcriptJson} // Transcript json
                mediaUrl={this.state.url} // string url to media file - audio or video
                // showTitle={true}
                isEditable={true} // se to true if you want to be able to edit the text
                title={this.state.transcriptTitle}
                mediaType={mediaType}
                autoSaveContentType={'digitalpaperedit'}
                handleSaveEditor={this.handleSave}
                // handleAutoSaveChanges={ this.handleSave }
              />
              
)}

You can also see it in context here pietrop/digital-paper-edit-client/src/Components/Transcripts/TranscriptCorrect.js#L153
and here pietrop/digital-paper-edit-firebase/src/Components/Transcripts/TranscriptCorrect.js

Ps: I am converting this issue to a discussion.

[ghost]

Thank you so much, @pietrop, for being so helpful. I am aware that you are by no means obliged to help, so I really appreciate it.

Best,
David Trasbo

[pietrop]

No probelm 😄
Did it work?