Trial: footnote editor inside footnote pane

extensions/src/platform-scripture-editor/src/platform-scripture-editor-footnotes.component.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
+import { PropsWithChildren, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { MarkerObject, Usj } from '@eten-tech-foundation/scripture-utilities';
 import {
   FootnoteList,
@@ -30,6 +30,14 @@ export type FootnotesLayoutProps = PropsWithChildren<{
   showMarkers: boolean;
   useWebViewState: UseWebViewStateHook;
   onFootnoteSelected?: (index: number) => void;
+  /** Whether footnotes are editable (shows edit buttons, enables double-click to edit) */
+  isEditable?: boolean;
+  /** The index of the footnote currently being edited inline, or undefined if none */
+  editingFootnoteIndex?: number;
+  /** Called when the user requests to edit a footnote (double-click or edit button) */
+  onFootnoteEditRequested?: (index: number) => void;
+  /** Render function for the inline footnote editor */
+  footnoteEditorRenderer?: (index: number) => ReactNode;
 }>;
 
 export function FootnotesLayout({
@@ -38,6 +46,10 @@ export function FootnotesLayout({
   showMarkers,
   useWebViewState,
   onFootnoteSelected,
+  isEditable,
+  editingFootnoteIndex,
+  onFootnoteEditRequested,
+  footnoteEditorRenderer,
 }: FootnotesLayoutProps) {
   const [footnotes, setFootnotes] = useState<MarkerObject[]>([]);
 
@@ -225,6 +237,15 @@ export function FootnotesLayout({
     [footnotes, footnoteListKey, onFootnoteSelected],
   );
 
+  /** Handle a footnote edit request from double-click or edit button. */
+  const handleFootnoteEditRequested = useCallback(
+    (_footnote: MarkerObject, index: number, listId: string | number) => {
+      if (index < 0 || index >= footnotes.length || listId !== footnoteListKey) return;
+      onFootnoteEditRequested?.(index);
+    },
+    [footnotes, footnoteListKey, onFootnoteEditRequested],
+  );
+
   return (
     <div ref={setContainerRef} className="tw-h-full tw-w-full tw-min-h-0">
       <ResizablePanelGroup
@@ -234,8 +255,10 @@ export function FootnotesLayout({
       >
         {children && (
           <>
-            <ResizablePanel className="tw-flex tw-flex-col tw-min-h-0">
-              <div className="tw-flex tw-flex-col tw-flex-1 tw-min-h-0">{children}</div>
+            <ResizablePanel className="tw-flex tw-flex-col tw-min-h-0 tw-overflow-hidden">
+              <div className="tw-flex tw-flex-col tw-flex-1 tw-min-h-0 tw-overflow-auto">
+                {children}
+              </div>
             </ResizablePanel>
             <ResizableHandle />
           </>
@@ -256,6 +279,12 @@ export function FootnotesLayout({
               formatCaller={showMarkers ? (c) => c : undefined}
               selectedFootnote={selectedFootnote?.footnote}
               onFootnoteSelected={handleFootnoteSelected}
+              isEditable={isEditable}
+              editingFootnoteIndex={editingFootnoteIndex}
+              onFootnoteEditRequested={
+                onFootnoteEditRequested ? handleFootnoteEditRequested : undefined
+              }
+              footnoteEditorRenderer={footnoteEditorRenderer}
             />
           </div>
         </ResizablePanel>