Switch "Copy Link to Highlight" to use custom highlight rendering + beginnings of annotations support

src/BookReader.js

@@ -41,6 +41,7 @@ import { ModeThumb } from './BookReader/ModeThumb.js';
 import { ImageCache } from './BookReader/ImageCache.js';
 import { PageContainer } from './BookReader/PageContainer.js';
 import { NAMED_REDUCE_SETS } from './BookReader/ReduceSet.js';
+import {BookReaderTextFragment} from './util/TextSelectionManager.js';
 
 /**
  * BookReader
@@ -645,6 +646,8 @@ BookReader.prototype.init = function() {
 
   const params = this.initParams();
 
+  // Make a copy of it
+  this.firstParams = JSON.parse(JSON.stringify(params));
   this.firstIndex = params.index ? params.index : 0;
 
   // Setup Navbars and other UI
@@ -1971,20 +1974,21 @@ BookReader.prototype.queryStringFromParams = function(
     newParams.set('q', params.search);
   }
 
-  let textFragmentParam = '';
+  /** @type {BookReaderTextFragment | null} */
+  let textFragmentParam = null;
   // Need to pull out text separately to avoid the spaces becoming encoded as +, which
   // the browser seems not to handle with the text fragment
   if (newParams.get('text')) {
     newParams.delete('text');
-    textFragmentParam = `text=${this.urlPlugin.retrieveTextFragment(currQueryString)}`;
+    textFragmentParam = BookReaderTextFragment.fromUrl(currQueryString, this.book, this.firstParams.index);
   }
 
   // https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/toString
   // Note: This method returns the query string without the question mark.
   let result = newParams.toString();
   if (textFragmentParam) {
     if (result) result += '&';
-    result += textFragmentParam;
+    result += textFragmentParam.toUrlString();
   }
   if (result) result = '?' + result;
 

src/BookReader/utils/SelectionObserver.js

@@ -9,7 +9,7 @@ export class SelectionObserver {
 
   /**
    * @param {string} selector
-   * @param {function('started' | 'cleared' | 'focusChanged', HTMLElement): any} handler
+   * @param {function('started' | 'cleared' | 'changed', HTMLElement): any} handler
    */
   constructor(selector, handler) {
     this.selector = selector;
@@ -42,7 +42,7 @@ export class SelectionObserver {
 
     if (this.selecting && (this.lastKnownFocusNode != sel.focusNode || sel.toString() && !sel.isCollapsed)) {
       this.lastKnownFocusNode = sel.focusNode;
-      this.handler('focusChanged', this.target);
+      this.handler('changed', this.target);
     }
 
     if (this.selecting && (sel.isCollapsed || !sel.toString() || !$(sel.anchorNode).closest(this.selector)[0])) {

src/css/_BRpages.scss

@@ -101,8 +101,11 @@ svg.BRPageLayer {
 }
 
 // Hides page layers during page flip animation
-.BRpageFlipping .BRtextLayer {
-  display: none;
+.BRpageFlipping {
+  // If the text layer has an annotation, don't hide it
+  .BRpagecontainer:not(:has(hypothesis-highlight)):not(:has(.BRhighlight)) .BRtextLayer {
+    display: none;
+  }
 }
 
 .br-mode-2up__root {

src/css/_TextSelection.scss

@@ -54,13 +54,6 @@
     }
 }
 
-// Style URI TextFragments, eg #:~:text=example
-.BRtextLayer ::target-text {
-    // Similar colour to the default one used in Safari, Firefox. Note Chrome uses a purple colour
-    background-color: hsla(45, 80%, 66%, 0.6);
-    color: transparent;
-}
-
 .BRtranslateLayer ::selection {
     background: hsla(210, 74%, 62%, 0.4);
 }
@@ -82,7 +75,7 @@
 // Hide text layer for performance during zooming & scrolling
 .BRsmooth-zooming, .BRscrolling-active {
     // If the text layer has an annotation, don't hide it
-    .BRpagecontainer:not(.BRpagecontainer--hasSelection):not(:has(hypothesis-highlight)) .BRtextLayer {
+    .BRpagecontainer:not(.BRpagecontainer--hasSelection):not(:has(hypothesis-highlight)):not(:has(.BRhighlight)) .BRtextLayer {
         display: none;
     }
 }
@@ -209,4 +202,17 @@
   width: auto;
   margin-left: 4px;
   opacity: 1;
-}
+}
+
+.BRtextLayer .BRhighlight {
+    background-color: yellow;
+    pointer-events: all;
+    color: transparent;
+}
+
+// Style URI TextFragments, eg #:~:text=example
+.BRtextLayer .BRhighlight--target-text, .BRtextLayer ::target-text {
+    // Similar colour to the default one used in Safari, Firefox. Note Chrome uses a purple colour
+    background-color: hsla(45, 80%, 66%, 0.6);
+    color: transparent;
+}

src/plugins/plugin.experiments.js

@@ -7,8 +7,10 @@ import { sleep } from '../BookReader/utils.js';
 // @ts-ignore
 const BookReader = /** @type {typeof import('@/src/BookReader.js').default} */(window.BookReader);
 
+/** @typedef {'copyLinkToHighlight' | 'annotateHighlight' | 'translate' | 'hypothesis'} ExperimentName */
+
 class ExperimentModel {
-  /** @type {string} test */
+  /** @type {ExperimentName} */
   name;
   /** @type {string} */
   title;
@@ -58,13 +60,29 @@ export class ExperimentsPlugin extends BookReaderPlugin {
   allExperiments = [
     new class extends ExperimentModel {
       name = 'copyLinkToHighlight';
-      title = 'Copy to Selection URL';
-      description = 'Share text selection via URL';
-      learnMore = 'none';
+      title = 'Copy Link to Highlight';
+      description = 'Shareable link to a text selection';
       icon = null;
       enabled = false;
       async enable ({ manual = false }) {
-        this.br.plugins.textSelection.enableSelectionMenu();
+        if (manual) {
+          this.br.plugins.textSelection.textSelectionManager.selectMenu.copyLinkToHighlightEnabled = true;
+        }
+      }
+      async disable() {
+        this.br.plugins.textSelection.textSelectionManager.selectMenu.copyLinkToHighlightEnabled = false;
+      }
+    }(),
+    new class extends ExperimentModel {
+      name = 'annotateHighlight';
+      title = 'Highlight and annotate';
+      description = 'Create private highlights and annotations for this book';
+      icon = null;
+      enabled = false;
+      async enable ({ manual = false }) {
+        if (manual) {
+          this.br.plugins.textSelection.textSelectionManager.selectMenu.highlightAnnotationEnabled = true;
+        }
       }
       async disable() {
         sleep(0).then(() => {
@@ -150,6 +168,14 @@ export class ExperimentsPlugin extends BookReaderPlugin {
     this._render();
   }
 
+  /**
+   * @param {ExperimentName} experimentName
+   */
+  isEnabled(experimentName) {
+    const experiment = this.allExperiments.find(exp => exp.name === experimentName);
+    return experiment?.enabled;
+  }
+
   _loadExperimentStates() {
     const savedStates = JSON.parse(localStorage.getItem(this.options.localStorageKey) || '{}');
     this.allExperiments.forEach(experiment => {

src/plugins/plugin.text_selection.js

@@ -54,20 +54,16 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     if (!this.options.enabled) return;
 
     this.br.on('pageVisible', (_, {pageContainerEl}) => {
-      if (pageContainerEl.querySelector('.BRtextLayer')) {
-        this.br.trigger('textLayerVisible', {pageContainerEl});
+      const textLayer = pageContainerEl.querySelector('.BRtextLayer');
+      if (textLayer) {
+        this.br.trigger('textLayerVisible', {pageContainerEl, textLayer});
       }
     });
 
     this.loadData();
     this.textSelectionManager.init();
   }
 
-  enableSelectionMenu() {
-    this.textSelectionManager.selectionMenuEnabled = true;
-    this.textSelectionManager.renderSelectionMenu();
-  }
-
   /**
    * @override
    * @param {PageContainer} pageContainer
@@ -210,7 +206,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
 
     // Check if page is visible
     if ($container.hasClass('BRpage-visible')) {
-      this.br.trigger('textLayerVisible', {pageContainerEl: $container[0]});
+      this.br.trigger('textLayerVisible', {pageContainerEl: $container[0], textLayer});
     }
   }
 
@@ -575,49 +571,3 @@ class Rect {
   get top() { return this.y; }
   get left() { return this.x; }
 }
-
-/**
- * Depth traverse the DOM tree starting at `start`, and ending at `end`.
- * @param {Node} start
- * @param {Node} end
- * @returns {Generator<Node>}
- */
-export function* walkBetweenNodes(start, end) {
-  let done = false;
-
-  /**
-   * @param {Node} node
-   */
-  function* walk(node, {children = true, parents = true, siblings = true} = {}) {
-    if (node === end) {
-      done = true;
-      yield node;
-      return;
-    }
-
-    // yield self
-    yield node;
-
-    // First iterate children (depth-first traversal)
-    if (children && node.firstChild) {
-      yield* walk(node.firstChild, {children: true, parents: false, siblings: true});
-      if (done) return;
-    }
-
-    // Then iterate siblings
-    if (siblings) {
-      for (let sib = node.nextSibling; sib; sib = sib.nextSibling) {
-        yield* walk(sib, {children: true, parents: false, siblings: false});
-        if (done) return;
-      }
-    }
-
-    // Finally, move up the tree
-    if (parents && node.parentNode) {
-      yield* walk(node.parentNode, {children: false, parents: true, siblings: true});
-      if (done) return;
-    }
-  }
-
-  yield* walk(start);
-}

src/plugins/url/UrlPlugin.js

@@ -190,22 +190,9 @@ export class UrlPlugin {
   }
 
   /**
-   * Get the hash out of the current URL. Also augments it with the text
-   * from the main part of the URL, since that is not readable by JS
-   * from the actual hash
-   * @returns
+   * Get the hash out of the current URL
    */
   getHash() {
-    const text = this.retrieveTextFragment(window.location.search);
-    const textFragment = text ? `:~:text=${text[0]}` : '';
-    return `${window.location.hash.slice(1)}${textFragment}`;
-  }
-
-  /**
-   * @param {string} urlString
-   * @returns {string}
-   */
-  retrieveTextFragment(urlString) {
-    return urlString.match(/(?<=[&?]?text=)[^&]*/);
+    return window.location.hash.slice(1);
   }
 }