Add the CSS selector to the selection returned by the EPUB navigator

CHANGELOG.md

@@ -6,6 +6,12 @@ All notable changes to this project will be documented in this file. Take a look
 
 ## [Unreleased]
 
+### Added
+
+#### Navigator
+
+* The `Locator` returned by `SelectableNavigator.currentSelection()` in the EPUB navigator now contains the `cssSelector` of the element containing the selection in its `locations` ([#704](https://github.com/readium/kotlin-toolkit/issues/704)).
+
 ### Fixed
 
 #### Shared

readium/navigator/src/main/assets/_scripts/src/selection.js

@@ -7,6 +7,7 @@
 import { log as logNative, logError, snapCurrentOffset } from "./utils";
 import { toNativeRect } from "./rect";
 import { TextRange } from "./vendor/hypothesis/anchoring/text-range";
+import { getCssSelector } from "css-selector-generator";
 
 // Polyfill for Android API 26
 import matchAll from "string.prototype.matchall";
@@ -42,7 +43,30 @@ export function getCurrentSelection() {
     return null;
   }
   const rect = getSelectionRect();
-  return { text, rect };
+  const cssSelector = getSelectionCssSelector();
+  return { text, rect, cssSelector };
+}
+
+// Returns the CSS selector of the element containing the current selection.
+function getSelectionCssSelector() {
+  try {
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) {
+      return null;
+    }
+    const range = selection.getRangeAt(0);
+    let container = range.commonAncestorContainer;
+    if (container.nodeType !== Node.ELEMENT_NODE) {
+      container = container.parentElement;
+    }
+    if (!container) {
+      return null;
+    }
+    return getCssSelector(container);
+  } catch (e) {
+    logError(e);
+    return null;
+  }
 }
 
 function getSelectionRect() {

readium/navigator/src/main/java/org/readium/r2/navigator/epub/EpubNavigatorFragment.kt

@@ -82,6 +82,7 @@ import org.readium.r2.navigator.util.createFragmentFactory
 import org.readium.r2.shared.DelicateReadiumApi
 import org.readium.r2.shared.ExperimentalReadiumApi
 import org.readium.r2.shared.InternalReadiumApi
+import org.readium.r2.shared.extensions.optNullableString
 import org.readium.r2.shared.extensions.tryOrLog
 import org.readium.r2.shared.publication.Href
 import org.readium.r2.shared.publication.Layout
@@ -713,8 +714,21 @@ public class EpubNavigatorFragment internal constructor(
         val rect = json.optRectF("rect")
             ?.run { adjustedToViewport() }
 
+        val locator = currentLocator.value
+        val cssSelector = json.optNullableString("cssSelector")
+        val locations = locator.locations.copy(
+            otherLocations = buildMap {
+                putAll(locator.locations.otherLocations)
+                // The inherited `cssSelector` (if any) does not describe the
+                // selection, so it is replaced or removed.
+                remove("cssSelector")
+                cssSelector?.let { put("cssSelector", it) }
+            }
+        )
+
         return Selection(
-            locator = currentLocator.value.copy(
+            locator = locator.copy(
+                locations = locations,
                 text = Locator.Text.fromJSON(json.optJSONObject("text"))
             ),
             rect = rect