PT-3704: Fix changes being reverted when you change view options (#437)

* Fixed changing `viewOptions` reverting changes

Author: tjcouch-sil

libs/shared-react/src/plugins/usj/LoadStatePlugin.tsx

@@ -1,11 +1,13 @@
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { CLEAR_HISTORY_COMMAND } from "lexical";
-import { useEffect } from "react";
+import { RefObject, useEffect } from "react";
 import { EditorAdaptor, EXTERNAL_USJ_MUTATION_TAG, LoggerBasic, NodeOptions } from "shared";
 
 /**
  * A plugin component that updates the state of the lexical editor when incoming Scripture changes.
  * @param scripture - Scripture data.
+ * @param scriptureRef - Optional ref to scripture data. If provided, reads from ref at update time
+ *   to get the most current value (useful when options change triggers state updates).
  * @param nodeOptions - Options for each node.
  * @param editorAdaptor - Editor adaptor.
  * @param viewOptions - View options of the editor.
@@ -14,12 +16,14 @@ import { EditorAdaptor, EXTERNAL_USJ_MUTATION_TAG, LoggerBasic, NodeOptions } fr
  */
 export function LoadStatePlugin<TLogger extends LoggerBasic>({
   scripture,
+  scriptureRef,
   nodeOptions,
   editorAdaptor,
   viewOptions,
   logger,
 }: {
   scripture?: unknown;
+  scriptureRef?: RefObject<unknown>;
   nodeOptions?: NodeOptions;
   editorAdaptor: EditorAdaptor;
   viewOptions?: unknown;
@@ -32,8 +36,12 @@ export function LoadStatePlugin<TLogger extends LoggerBasic>({
   }, [editorAdaptor, logger, nodeOptions]);
 
   useEffect(() => {
+    // Read scripture from ref if available (to get latest value after state updates),
+    // otherwise fall back to the prop value
+    const currentScripture = scriptureRef?.current ?? scripture;
+
     editorAdaptor.reset?.();
-    const serializedEditorState = editorAdaptor.serializeEditorState(scripture, viewOptions);
+    const serializedEditorState = editorAdaptor.serializeEditorState(currentScripture, viewOptions);
     if (serializedEditorState == null) {
       logger?.warn(
         "LoadStatePlugin: serializedEditorState was null or undefined. Skipping editor update.",
@@ -57,7 +65,7 @@ export function LoadStatePlugin<TLogger extends LoggerBasic>({
     } catch {
       logger?.error("LoadStatePlugin: error parsing or setting editor state.");
     }
-  }, [editor, editorAdaptor, logger, scripture, viewOptions]);
+  }, [editor, editorAdaptor, logger, scripture, scriptureRef, viewOptions]);
 
   return null;
 }

packages/platform/src/editor/Editor.tsx

@@ -3,7 +3,6 @@ import usjEditorAdaptor from "./adaptors/usj-editor.adaptor";
 import { getUsjMarkerAction } from "./adaptors/usj-marker-action.utils";
 import { EditorOptions, EditorProps, EditorRef } from "./editor.model";
 import editorTheme from "./editor.theme";
-import OptionChangePlugin from "./OptionChangePlugin";
 import ScriptureReferencePlugin from "./ScriptureReferencePlugin";
 import TreeViewPlugin from "./TreeViewPlugin";
 import { ToolbarPlugin } from "./toolbar/ToolbarPlugin";
@@ -360,15 +359,10 @@ const Editor = forwardRef(function Editor<TLogger extends LoggerBasic>(
               }
             />
           )}
-          <OptionChangePlugin
-            options={{ view: viewOptions, nodes: nodeOptions }}
-            editedUsjRef={editedUsjRef}
-            usj={usj}
-            setUsj={setUsj}
-          />
           <LoadStatePlugin
             key={loadTrigger}
             scripture={usj}
+            scriptureRef={editedUsjRef}
             nodeOptions={nodeOptions}
             editorAdaptor={usjEditorAdaptor}
             viewOptions={viewOptions}