Show passage text in inline Ink Notes canvas

Passes selectedChunkVerses as headerContent to the inline DrawCanvas so
highlights overlay the actual scripture text, matching annotate mode.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmert
2026-08-20 10:40:47 -04:00
parent 902fb5da02
commit 2106595976
+18
View File
@@ -533,6 +533,24 @@ export default function StudyPage() {
<DrawCanvas <DrawCanvas
strokes={selectedChunk.inkStrokes ?? []} strokes={selectedChunk.inkStrokes ?? []}
onStrokesChange={(s) => updateChunk(selectedChunk.id, { inkStrokes: s })} onStrokesChange={(s) => updateChunk(selectedChunk.id, { inkStrokes: s })}
headerContent={
selectedChunkVerses.length > 0 && (
<>
<div className="mb-2 flex items-center justify-between gap-2">
<span className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Scripture · draw on me</span>
<span className="rounded-full bg-slate-200 px-2.5 py-0.5 text-xs font-semibold text-slate-600">
{formatChunkReference(project, selectedChunkChapterIndex, selectedChunk, '')}
</span>
</div>
{selectedChunkVerses.map((verse) => (
<p key={`${verse.chapter}-${verse.number}`} className="mb-1">
<span className="font-semibold text-slate-900">{verse.chapter}:{verse.number}.</span>{' '}
{verse.text}
</p>
))}
</>
)
}
/> />
</div> </div>
)} )}