History mode changes for text fragment

Author: schu96

src/BookReader.js

@@ -1958,7 +1958,7 @@ BookReader.prototype.queryStringFromParams = function(
   urlMode = 'hash',
 ) {
   const newParams = new URLSearchParams(currQueryString);
-
+  let textFragmentParam = '';
   if (params.view) {
     // Set ?view=theater when fullscreen
     newParams.set('view', params.view);
@@ -1970,9 +1970,13 @@ BookReader.prototype.queryStringFromParams = function(
   if (params.search && urlMode === 'history') {
     newParams.set('q', params.search);
   }
+  if (newParams.get('text')) {
+    newParams.delete('text');
+    textFragmentParam = `text=${currQueryString.match(/(?<=&?text=)[^&]*/)}`;
+  }
   // https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/toString
   // Note: This method returns the query string without the question mark.
-  const result = newParams.toString();
+  const result = textFragmentParam ? newParams.toString() + textFragmentParam : newParams.toString();
   return result ? '?' + result : '';
 };
 

src/plugins/url/UrlPlugin.js

@@ -201,6 +201,6 @@ export class UrlPlugin {
     }
 
     retrieveTextFragment (urlString) {
-      return urlString.match(/(?<=&text=)[^&]*/);
+      return urlString.match(/(?<=&?text=)[^&]*/);
     }
 }

src/plugins/url/plugin.url.js

@@ -144,7 +144,8 @@ BookReader.prototype.urlUpdateFragment = function() {
   const currFragment = this.urlReadFragment();
   const currQueryString = this.getLocationSearch();
   const newQueryString = this.queryStringFromParams(params, currQueryString, this.options.urlMode);
-  if (currFragment === newFragment && currQueryString === newQueryString) {
+  const hasTextParam = currQueryString.includes("text");
+  if (currFragment === newFragment && currQueryString === newQueryString && !hasTextParam) {
     return;
   }
 
@@ -154,11 +155,21 @@ BookReader.prototype.urlUpdateFragment = function() {
     } else {
       const baseWithoutSlash = this.options.urlHistoryBasePath.replace(/\/+$/, '');
       const newFragmentWithSlash = newFragment === '' ? '' : `/${newFragment}`;
-
+      let textFragment = ""
+      if (this.urlPlugin.retrieveTextFragment(newQueryString)) {
+        textFragment = this.urlParamsFiltersOnlySearch(this.readQueryString());
+        // newQueryString = newQueryString.replace(this.urlPlugin.retrieveTextFragment(newQueryString)[0], "").replace(/(\?text=)/, "")
+      }
+      console.log("this is newQueryString", newQueryString);
       const newUrlPath = `${baseWithoutSlash}${newFragmentWithSlash}${newQueryString}`;
+      console.log("this is newURLPath", newUrlPath);
       try {
         window.history.replaceState({}, null, newUrlPath);
         this.oldLocationHash = newFragment + newQueryString;
+        if (textFragment) {
+          window.location.replace('#' + textFragment);
+          this.oldLocationHash = textFragment;
+        }
       } catch (e) {
         // DOMException on Chrome when in sandboxed iframe
         this.options.urlMode = 'hash';
@@ -199,6 +210,7 @@ BookReader.prototype.urlParamsFiltersOnlySearch = function(url) {
 BookReader.prototype.urlReadFragment = function() {
   const { urlMode, urlHistoryBasePath } = this.options;
   if (urlMode === 'history') {
+    console.log("within plugin.url", window.location);
     return window.location.pathname.substr(urlHistoryBasePath.length);
   } else {
     return this.urlPlugin.getHash();
@@ -219,6 +231,7 @@ export class BookreaderUrlPlugin extends BookReader {
       const location = this.getLocationSearch();
       if (location.includes("text=")) {
         this.on('textLayerRendered', (_, {pageIndex, container}) => {
+          console.log("line 235 plugin.url.js window.location.replace", `#${this.oldLocationHash}`);
           window.location.replace(`#${this.oldLocationHash}`);
         });
       }

src/util/TextSelectionManager.js

@@ -461,9 +461,18 @@ class brHighlightBar extends LitElement {
     if (currentParams.includes('text')) {
       currentParams = currentParams.replace(/(text=)[\w\W\d%]+/, createParam(currentSelection, textLayer));
     } else {
-      currentParams = `${currentParams}&${createParam(currentSelection, textLayer)}`;
+      if (this.br.options.urlMode === 'history') {
+        currentParams = `?${createParam(currentSelection, textLayer)}`
+      } else {
+        currentParams = `${currentParams}&${createParam(currentSelection, textLayer)}`;
+      }
+    }
+    console.log("this is after copying", currentParams, currentUrl.pathname);
+    if (this.br.options.urlMode === 'history') {
+      navigator.clipboard.writeText(`${currentUrl.origin}${currentUrl.pathname}${currentParams}`)
+    } else {
+      navigator.clipboard.writeText(`${currentUrl.origin}${currentUrl.pathname}${currentParams}${currentUrl?.hash}`);
     }
-    navigator.clipboard.writeText(`${currentUrl.origin}${currentUrl.pathname}${currentParams}${currentUrl?.hash}`);
   }
 
   addHighlightButtonStyling() {