feat: disable pointer navigation on selectable elements (fix #4)

README.md

@@ -566,6 +566,13 @@ fixed-positioned element container should not have its own border or padding
 styles. If that's the case, you can always add an extra wrapper that just
 defines the fixed position without visual styles.
 
+## Text Selection
+
+The lightbox is rendered with the `user-select: none` CSS style. If you'd like
+to make some of your custom elements user-selectable, use the `yarll_selectable`
+CSS class. This class sets the `user-select: text` style and turns off
+click-and-drag slide navigation, likely interfering with text selection UX.
+
 ## Hooks (experimental)
 
 The library exports the following experimental hooks that you may find helpful

src/components/useSensors.ts

@@ -88,11 +88,15 @@ export default function useSensors() {
       if (
         // ignore right button clicks (e.g., context menu)
         (event.pointerType === "mouse" && event.buttons > 1) ||
-        // ignore clicks on navigation buttons, toolbar, etc.
+        // ignore clicks on navigation buttons, toolbar, user-selectable elements, etc.
         (event.target instanceof Element &&
           (event.target.classList.contains(cssClass("button")) ||
             event.target.classList.contains(cssClass("icon")) ||
-            carouselRef.current?.parentElement?.querySelector(`.${cssClass("toolbar")}`)?.contains(event.target)))
+            Array.from(
+              carouselRef.current?.parentElement?.querySelectorAll(
+                `.${cssClass("toolbar")}, .${cssClass("selectable")}`,
+              ) /* c8 ignore start */ || [] /* c8 ignore stop */,
+            ).find((element) => element.contains(event.target as Element))))
       ) {
         return;
       }

src/styles.scss

@@ -169,4 +169,9 @@ body:has(> .yarll__portal:not(.yarll__no_scroll_lock)) {
     height: globalVar(icon_size, $icon-size);
     pointer-events: none;
   }
+
+  &_selectable {
+    user-select: text;
+    -webkit-user-select: text;
+  }
 }