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

src/BookReader.js

@@ -1976,9 +1976,17 @@ BookReader.prototype.queryStringFromParams = function(
   // the browser seems not to handle with the text fragment
   if (newParams.get('text')) {
     newParams.delete('text');
-    textFragmentParam = `text=${this.urlPlugin.retrieveTextFragment(currQueryString)}`;
+    textFragmentParam = `text=${this.urlPlugin.retrieveTextFragment(currQueryString, 'text')}`;
+  }
+  if (newParams.get('prefix')) {
+    newParams.delete('prefix');
+    textFragmentParam += `&prefix=${this.urlPlugin.retrieveHighlightContext(currQueryString, 'prefix')}`;
   }
 
+  if (newParams.get('suffix')) {
+    newParams.delete('suffix');
+    textFragmentParam += `&suffix=${this.urlPlugin.retrieveHighlightContext(currQueryString, 'suffix')}`;
+  }
   // 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();

src/css/_TextSelection.scss

@@ -209,4 +209,9 @@
   width: auto;
   margin-left: 4px;
   opacity: 1;
-}
+}
+
+.BRlocalHighlight {
+    background-color: yellow;
+    pointer-events: all;
+}

src/plugins/plugin.experiments.js

@@ -51,7 +51,7 @@ export class ExperimentsPlugin extends BookReaderPlugin {
     localStorageKey: 'BrExperiments',
 
     /** The experiments that should be shown in the experiments panel */
-    enabledExperiments: ['translate', 'copyLinkToHighlight'],
+    enabledExperiments: ['translate', 'copyLinkToHighlight', 'annotateHighlight'],
   }
 
   /** @type {ExperimentModel[]} */
@@ -60,7 +60,6 @@ export class ExperimentsPlugin extends BookReaderPlugin {
       name = 'copyLinkToHighlight';
       title = 'Copy to Selection URL';
       description = 'Share text selection via URL';
-      learnMore = 'none';
       icon = null;
       enabled = false;
       async enable ({ manual = false }) {
@@ -72,6 +71,21 @@ export class ExperimentsPlugin extends BookReaderPlugin {
         });
       }
     }(),
+    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 }) {
+        this.br.plugins.textSelection.enableHighlightMenu();
+      }
+      async disable() {
+        sleep(0).then(() => {
+          window.location.reload();
+        });
+      }
+    }(),
     new class extends ExperimentModel {
       name = 'translate';
       title = 'Translate Plugin';

src/plugins/plugin.text_selection.js

@@ -68,6 +68,11 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     this.textSelectionManager.renderSelectionMenu();
   }
 
+  enableHighlightMenu() {
+    this.textSelectionManager.highlightAnnotationEnabled = true;
+    this.textSelectionManager.renderHighlightMenu();
+  }
+
   /**
    * @override
    * @param {PageContainer} pageContainer

src/plugins/url/UrlPlugin.js

@@ -208,4 +208,31 @@ export class UrlPlugin {
   retrieveTextFragment(urlString) {
     return urlString.match(/(?<=[&?]?text=)[^&]*/);
   }
+
+  /**
+   * @param {string} urlString
+   * @param {string} type
+   * @returns {string}
+   */
+
+  retrieveHighlightContext(urlString, type) {
+    const regexString = new RegExp(String.raw`(?<=[&?]?${type}=)[^&]*`, "gis");
+    return urlString.match(regexString);
+  }
+
+  /**
+   * @param {string} urlString
+   * @returns {object}
+   */
+  convertParamToHighlight(urlString) {
+    let quote = urlString.match(/(?<=[&?]?text=)[^&]*/);
+    let prefix = urlString.match(/(?<=[&?]?prefix=)[^&]*/);
+    let suffix = urlString.match(/(?<=[&?]?suffix=)[^&]*/);
+    let dIndex = urlString.match(/(?<=[&?]?dIndex=)[^&]*/);
+    if (quote) quote = decodeURIComponent(quote[0]);
+    if (prefix) prefix = decodeURIComponent(prefix[0]);
+    if (suffix) suffix = decodeURIComponent(suffix[0]);
+    if (dIndex) dIndex = decodeURIComponent(dIndex[0]);
+    return {prefix, quote, suffix, dIndex};
+  }
 }

src/plugins/url/plugin.url.js

@@ -2,7 +2,7 @@
 
 import { UrlPlugin } from "./UrlPlugin.js";
 import { sleep } from "../../BookReader/utils.js";
-
+import { convertRangeToDOMSelection } from "../../util/TextSelectionManager.js";
 /**
  * Plugin for URL management in BookReader
  * Note read more about the url "fragment" here:
@@ -171,8 +171,10 @@ BookReader.prototype.urlUpdateFragment = function() {
     } else {
       const baseWithoutSlash = this.options.urlHistoryBasePath.replace(/\/+$/, '');
       const textFragment = this.urlPlugin.retrieveTextFragment(newQueryString);
+      this.highlightObject = this.urlPlugin.convertParamToHighlight(newQueryString);
       const newUrlPath = `${baseWithoutSlash}${newFragmentWithSlash}${newQueryString}`;
       const extractedPage = this.urlPlugin.urlStringToUrlState(newFragmentWithSlash)?.page;
+
       if (!this.textFragmentPage && textFragment) {
         this.textFragmentPage =  extractedPage ? extractedPage : null;
         this.textFragment = `:~:text=${textFragment}`;
@@ -194,6 +196,7 @@ BookReader.prototype.urlUpdateFragment = function() {
     const newQueryStringSearch = this.urlParamsFiltersOnlySearch(this.readQueryString());
     let textFragment = this.urlPlugin.retrieveTextFragment(this.readQueryString());
     const extractedPage = this.urlPlugin.urlStringToUrlState(newFragmentWithSlash)?.page;
+    this.highlightObject = this.urlPlugin.convertParamToHighlight(this.readQueryString());
 
     if (textFragment) {
       textFragment = `:~:text=${textFragment[0]}`;
@@ -252,18 +255,16 @@ export class BookreaderUrlPlugin extends BookReader {
       if (location.includes("text=")) {
         this.on('textLayerVisible', async (_, {pageContainerEl}) => {
           const visiblePageNum = pageContainerEl.getAttribute('data-page-num');
-
+          const foundPageNum = document.querySelector(`[data-index='${this.highlightObject['dIndex']}']`);
+          if (!this.highlightObject['dPageNum'] && foundPageNum) {
+            this.highlightObject['dPageNum'] = foundPageNum.getAttribute('data-page-num');
+          }
           // Hack: More time mode 1up page "settle down" from user scrolling
-          await sleep(this.mode === 1 ? 900 : 100);
+          await sleep(this.mode === 1 ? 900 : 200);
 
           // No textFragment found or the textFragment stored doesn't match current visible page loaded
           if (!this.textFragment || this.textFragmentPage !== visiblePageNum) return;
-          if (this.options.urlMode === 'history') {
-            window.location.replace(`#${this.textFragment}`);
-          } else {
-            // for urlMode hash, textFragment is stored in oldLocationHash already
-            window.location.replace(`#${this.oldLocationHash}`);
-          }
+          convertRangeToDOMSelection(this.highlightObject);
         });
       }
       this.bind(BookReader.eventNames.PostInit, () => {