MDH: fix stale index/search-index bodies on collection switch + refresh

The Indexes and Search Indexes panels render each index body through a
read-only JsonEditor inside IndexCard. JsonEditor created its CodeMirror
view once in a mount-only effect and never synced later 'value' prop
changes. Since the cards carry no key, Preact reuses the same JsonEditor
instances by position across a collection switch or a Refresh click, so
the bodies kept showing the previously selected collection's definitions
even though names/badges updated.

Add a value-sync effect gated on readOnly: read-only editors re-project
their value when it changes; editable editors still treat value as a seed
only (edits live in the view, read via editorRef) so user input is never
clobbered. Covers both IndexPanel and SearchIndexPanel via the shared
IndexCard. Add tests/mdh-json-editor.test.js exercising the real (un-mocked)
JsonEditor for both the read-only sync and the editable seed-only guarantee.

Author: mrtnzlml

src/mdh/components/JsonEditor.jsx

@@ -264,6 +264,21 @@ export default function JsonEditor({ value = '', onChange, onValidChange, mode =
     };
   }, []);
 
+  // Keep read-only editors in sync with their `value` prop. The same instance is
+  // reused (no key) when an index / search-index card body changes on a
+  // collection switch or a Refresh click, and the mount-only effect above never
+  // re-runs — so without this the body would stay stale. Gated on readOnly:
+  // editable editors treat `value` as a seed only (edits live in the view, read
+  // via editorRef), so syncing there would clobber user input on a re-render.
+  useEffect(() => {
+    if (!readOnly) return;
+    const view = viewRef.current;
+    if (!view) return;
+    const current = view.state.doc.toString();
+    if (value === current) return;
+    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: value } });
+  }, [value, readOnly]);
+
   useEffect(() => {
     if (editorRef) {
       editorRef.current = {

tests/mdh-json-editor.test.js

@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+//
+// JsonEditor value-prop syncing. A read-only editor is a pure projection of its
+// `value` prop — index / search-index card bodies are rendered read-only and the
+// SAME JsonEditor instance is reused (no key) when the value changes on a
+// collection switch or a Refresh click, so a mount-only seed leaves the body
+// stale. Editable editors deliberately treat `value` as a seed only: edits live
+// in the view and are read back via editorRef, so a parent re-render must never
+// clobber them.
+import { describe, it, expect, vi } from 'vitest';
+import { h, render, Fragment } from 'preact';
+import JsonEditor from '../src/mdh/components/JsonEditor.jsx';
+
+function mount() {
+  const root = document.createElement('div');
+  document.body.appendChild(root);
+  return root;
+}
+
+describe('JsonEditor — value prop syncing', () => {
+  it('read-only editor updates its document when the value prop changes (collection switch / refresh)', async () => {
+    const root = mount();
+    const ref = { current: null };
+
+    render(h(JsonEditor, { readOnly: true, value: '{"a":1}', editorRef: ref }), root);
+    await vi.waitFor(() => expect(ref.current).not.toBeNull());
+    expect(ref.current.getValue()).toBe('{"a":1}');
+
+    // Same instance reused with a new value — exactly what IndexCard / the index
+    // panels do when the selected collection changes or Refresh is clicked.
+    render(h(JsonEditor, { readOnly: true, value: '{"b":2}', editorRef: ref }), root);
+    await vi.waitFor(() => expect(ref.current.getValue()).toBe('{"b":2}'));
+  });
+
+  it('editable editor treats value as a seed only — a parent re-render does not clobber edits', async () => {
+    const root = mount();
+    const roRef = { current: null };   // read-only sibling: deterministic "effects flushed" signal
+    const edRef = { current: null };   // editable editor under test
+
+    render(
+      h(Fragment, null,
+        h(JsonEditor, { readOnly: true, value: '{"seed":1}', editorRef: roRef }),
+        h(JsonEditor, { value: '{"seed":1}', editorRef: edRef }),
+      ),
+      root,
+    );
+    await vi.waitFor(() => expect(edRef.current).not.toBeNull());
+
+    // Simulate a user edit living inside the editable view.
+    edRef.current.setValue('{"edited":true}');
+    expect(edRef.current.getValue()).toBe('{"edited":true}');
+
+    // Re-render both with a new value prop. The read-only one syncs (positive,
+    // deterministic signal that the effect cycle ran); the editable one must not.
+    render(
+      h(Fragment, null,
+        h(JsonEditor, { readOnly: true, value: '{"next":2}', editorRef: roRef }),
+        h(JsonEditor, { value: '{"next":2}', editorRef: edRef }),
+      ),
+      root,
+    );
+    await vi.waitFor(() => expect(roRef.current.getValue()).toBe('{"next":2}'));
+    expect(edRef.current.getValue()).toBe('{"edited":true}');
+  });
+});