force update the text in the text editor only at startup and when edi…

…ting in the graph

This is a rework of the DOT source handling to avoid a race caused by
constantly feeding back the DOT source to the text editor. This race
seems to have been latent, but an upcoming commit that changes to the
new root API in React 18, which seems much faster, exposes it.

Now, the DOT source is only fed back to the text editor when
specifically requested. This is currenty done at startup and when
editing the graph in the graph view. This is not expected to interfere
with a user editing the text, since it should not be possible to do
that at the same time.

This also removes the now unnecessary workaround for
#236
implemented in 0062951.

src/TextEditor.js

@@ -62,7 +62,6 @@ class TextEditor extends React.Component {
   render() {
     const { classes } = this.props;
     var annotations = null;
-    let dotSrc = this.props.dotSrc;
     if (this.props.error) {
       annotations = [{
         row: this.props.error.line - 1,
@@ -81,12 +80,6 @@ class TextEditor extends React.Component {
         }
       }
       this.prevNumLines = this.props.error.numLines;
-      // If there's an error, the user may have updated the DOT source since
-      // the error occurred, without us yet having gotten an onChange event. We
-      // therefore read out the current text from the editor and feed that back
-      // into it as the "value" prop, instead of the possibly outdated DOT
-      // source, which would otherwise overwrite the user's updates.
-      dotSrc = this.editor.getSession().getDocument().$lines.join("\n");
     }
     this.prevError = this.props.error;
     const locations = this.props.selectedGraphComponents.reduce(
@@ -128,7 +121,7 @@ class TextEditor extends React.Component {
           onFocus={this.props.onFocus}
           onBlur={this.props.onBlur}
           name="text-editor"
-          value={dotSrc}
+          value={this.props.dotSrc}
           // viewport height - app bar - 2 * padding
           height={this.props.height}
           width={this.props.width}

src/pages/index.js

@@ -62,6 +62,7 @@ class Index extends React.Component {
       initialized: false,
       name: localStorage.getItem('name') || '',
       dotSrc: dotSrc,
+      forceNewDotSrc: true,
       dotSrcLastChangeTime: +localStorage.getItem('dotSrcLastChangeTime') || Date.now(),
       svg: localStorage.getItem('svg') || '',
       hasUndo: false,
@@ -149,11 +150,18 @@ class Index extends React.Component {
     });
   }
 
-  handleTextChange = (text, undoRedoState) => {
+  handleTextChangeFromGraph = (text) => {
+    const forceNewDotSrc = true;
+    const undoRedoState = null;
+    this.handleTextChange(text, undoRedoState, forceNewDotSrc);
+  }
+
+  handleTextChange = (text, undoRedoState, forceNewDotSrc) => {
     this.setPersistentState((state) => {
       const newState = {
         name: state.name || (text ? this.createUntitledName(state.projects) : ''),
         dotSrc: text,
+        forceNewDotSrc: forceNewDotSrc,
       };
       if (!this.disableDotSrcLastChangeTimeUpdate) {
         newState.dotSrcLastChangeTime = Date.now();
@@ -843,7 +851,7 @@ class Index extends React.Component {
                   // allocated viewport width - 2 * padding
                   width={`calc(${columns.textEditor * 100 / 12}vw - 2 * 12px)`}
                   height={`calc(100vh - 64px - 2 * 12px - ${this.updatedSnackbarIsOpen ? "64px" : "0px"})`}
-                  dotSrc={this.state.dotSrc}
+                  dotSrc={this.state.forceNewDotSrc ? this.state.dotSrc : null}
                   onTextChange={this.handleTextChange}
                   onFocus={this.handleTextEditorFocus}
                   onBlur={this.handleTextEditorBlur}
@@ -885,7 +893,7 @@ class Index extends React.Component {
                 defaultNodeAttributes={this.state.defaultNodeAttributes}
                 defaultEdgeAttributes={this.state.defaultEdgeAttributes}
                 onFocus={this.handleGraphFocus}
-                onTextChange={this.handleTextChange}
+                onTextChange={this.handleTextChangeFromGraph}
                 onHelp={this.handleKeyboardShortcutsClick}
                 onSelect={this.handleGraphComponentSelect}
                 onUndo={this.undo}