Alice thought this a very curious thing.
+...text... Megan likes the sea, too...
+ inlineDoc = new DOMParser().parseFromString( + ` +She spent a year of her Ph.D. at my old college at Cambridge. A woman, at Caius! Megan likes the sea, too. She's finishing her radioastronomy research.
+ `, + 'text/html', + ); + }); + + it('should convert text()[N].offset range XPointer to valid CFI', () => { + const converter = new XCFI(inlineDoc, 10); + // text()[2] = the 2nd direct text node child of, i.e. the text after the
+ const pos0 = '/body/DocFragment[11]/body/p/text()[2].44';
+ const pos1 = '/body/DocFragment[11]/body/p/text()[2].69';
+ const cfi = converter.xPointerToCFI(pos0, pos1);
+
+ // Should produce a valid range CFI pointing into the 3rd child node (text after )
+ expect(cfi).toMatch(/^epubcfi\(/);
+ expect(cfi).toMatch(/,.*,/); // Range CFI has two commas
+ // /3 = 3rd child of (1:text, 2:, 3:text), offsets 44 and 69
+ expect(cfi).toContain('/3:44');
+ expect(cfi).toContain('/3:69');
+ });
+
+ it('should convert text()[1].offset XPointer to valid CFI', () => {
+ const converter = new XCFI(inlineDoc, 10);
+ // text()[1] = the 1st direct text node child of , i.e. text before the
+ const xp = '/body/DocFragment[11]/body/p/text()[1].5';
+ const cfi = converter.xPointerToCFI(xp);
+
+ expect(cfi).toMatch(/^epubcfi\(/);
+ // /1 = 1st child of (text node), offset 5
+ expect(cfi).toContain('/1:5');
+ });
+
+ it('should handle text()[N].offset with multiple inline elements', () => {
+ const multiInlineDoc = new DOMParser().parseFromString(
+ ` Start text emphasis middle text link end text here. : text, , text, , text
+ // text()[3] = " end text here." (3rd direct text node of )
+ const xp = '/body/DocFragment[6]/body/p/text()[3].4';
+ const cfi = converter.xPointerToCFI(xp);
+
+ expect(cfi).toMatch(/^epubcfi\(/);
+ // /5 = 5th child of (1:text, 2:, 3:text, 4:, 5:text), offset 4
+ expect(cfi).toContain('/5:4');
+ });
+
+ it('should produce correct CFI for text()[1] with no inline siblings', () => {
+ const simpleDoc = new DOMParser().parseFromString(
+ ` Hello world Alice thought this a very curious thing. Alice thought this a very curious thing. via DOM, then build XPointer from it
+ const p = doc.querySelector('p')!;
+ // Use xPointerToCFI and verify the KOReader XPointer resolves correctly
+ const koXp = '/body/DocFragment[11]/body/div/div/div/p/text().10';
+ const cfi = converter.xPointerToCFI(koXp);
+
+ // Verify the same CFI is produced when starting from a Readest-generated range
+ const range = doc.createRange();
+ const textNode = p.firstChild!;
+ range.setStart(textNode, 10);
+ range.setEnd(textNode, 10);
+ // The xPointerToCFI should resolve through the content div, not the cfi-inert div
+ expect(cfi).toMatch(/^epubcfi\(/);
+ });
+
+ it('should handle cfi-inert with multiple real siblings', () => {
+ const doc = new DOMParser().parseFromString(
+ ` Contentskip link
+
+
+ `,
+ 'text/html',
+ );
+
+ const converter = new XCFI(doc, 10);
+ // KOReader XPointer: div (no index) means the only "real" div
+ const xp = '/body/DocFragment[11]/body/div/div/div/p/text().10';
+ const cfi = converter.xPointerToCFI(xp);
+ expect(cfi).toMatch(/^epubcfi\(/);
+ });
+
+ it('should skip cfi-inert div when building XPointer path from element', () => {
+ const doc = new DOMParser().parseFromString(
+ `
+
+
+
+
+ skip link
+
+
+ `,
+ 'text/html',
+ );
+
+ const converter = new XCFI(doc, 10);
+ // Navigate to the
+
+
+
+ skip
+ First
+
+ `,
+ 'text/html',
+ );
+
+ const converter = new XCFI(doc, 0);
+ // Two real divs: div[1]=first, div[2]=second — cfi-inert is invisible
+ const xp = '/body/DocFragment[1]/body/div[2]/p';
+ const cfi = converter.xPointerToCFI(xp);
+ expect(cfi).toMatch(/^epubcfi\(/);
+ });
+ });
});
diff --git a/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx b/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
index 6a6aec1a..d499d392 100644
--- a/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
+++ b/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
@@ -678,6 +678,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
const color = settings.globalReadSettings.highlightStyles[style];
setSelectedStyle(style);
setSelectedColor(color);
+ console.log('Adding annotation:', cfi, 'style:', style, 'color:', color);
const annotation: BookNote = {
id: uniqueId(),
type: 'annotation',
diff --git a/apps/readest-app/src/app/reader/hooks/useNotesSync.ts b/apps/readest-app/src/app/reader/hooks/useNotesSync.ts
index 12c6725f..415e0817 100644
--- a/apps/readest-app/src/app/reader/hooks/useNotesSync.ts
+++ b/apps/readest-app/src/app/reader/hooks/useNotesSync.ts
@@ -1,18 +1,104 @@
import { useCallback, useEffect } from 'react';
import { useAuth } from '@/context/AuthContext';
import { useSync } from '@/hooks/useSync';
-import { BookNote } from '@/types/book';
+import { BookNote, FIXED_LAYOUT_FORMATS } from '@/types/book';
import { useBookDataStore } from '@/store/bookDataStore';
+import { useReaderStore } from '@/store/readerStore';
import { SYNC_NOTES_INTERVAL_SEC } from '@/services/constants';
import { throttle } from '@/utils/throttle';
+import { getXPointerFromCFI, getCFIFromXPointer, XCFI } from '@/utils/xcfi';
+import { getIndexFromCfi } from '@/utils/cfi';
export const useNotesSync = (bookKey: string) => {
const { user } = useAuth();
const { syncedNotes, syncNotes, lastSyncedAtNotes } = useSync(bookKey);
const { getConfig, setConfig, getBookData } = useBookDataStore();
+ const { getView } = useReaderStore();
const config = getConfig(bookKey);
+ const populateXPointersForPush = async (notes: BookNote[]): Promise