@internetarchive/bookreader 5.0.0-110 → 5.0.0-112

package/src/BookReader/Navbar/Navbar.js

@@ -314,7 +314,7 @@ export class Navbar {
     const $sliders = this.$root.find('.BRpager').slider({
       animate: true,
       min: 0,
-      max: br.book.getNumLeafs() - 1,
+      max: Math.max(0, br.book.getNumLeafs() - 1),
       value: br.currentIndex(),
       range: "min",
     });
@@ -324,8 +324,8 @@ export class Navbar {
     $sliders.find('.ui-slider-handle').attr({
       'role': 'slider',
       'aria-label': 'Page navigation slider',
-      'aria-valuemin': 1,
-      'aria-valuemax': br.book.getNumLeafs(),
+      'aria-valuemin': 0,
+      'aria-valuemax': Math.max(0, br.book.getNumLeafs() - 1),
     });
 
     // Ignore up/down arrow keys and page up/down keys, since they're confusingly different
@@ -396,7 +396,6 @@ export class Navbar {
   */
   getNavPageNumString(index) {
     const { br } = this;
-    // Accessible index starts at 0 (alas) so we add 1 to make human
     const pageNum = br.book.getPageNum(index);
     const pageType = br.book.getPageProp(index, 'pageType');
     const numLeafs = br.book.getNumLeafs();
@@ -425,7 +424,7 @@ export class Navbar {
   updateNavPageNum(index) {
     this.$root.find('.BRcurrentpage').html(this.getNavPageNumString(index));
     this.$root.find('.ui-slider-handle').attr({
-      'aria-valuenow': index + 1,
+      'aria-valuenow': index,
       'aria-valuetext': this.getNavPageNumString(index),
     });
   }
@@ -446,19 +445,19 @@ export class Navbar {
 
 /**
  * Renders the html for the page string
- * @param {number} index
- * @param {number} numLeafs
+ * @param {PageIndex} index 0-indexed page index (0..numLeafs-1)
+ * @param {number} numLeafs total number of leaves
  * @param {number|string} pageNum
  * @param {*} pageType - Deprecated
  * @param {number} maxPageNum
- * @return {string}
+ * @return {string} e.g. "Page 14 (3/39)"
  */
 export function getNavPageNumHtml(index, numLeafs, pageNum, pageType, maxPageNum) {
   const pageIsAsserted = pageNum[0] != 'n';
-  const pageIndex = index + 1;
 
   if (!pageIsAsserted) {
     pageNum = '—';
   }
-  return `Page ${pageNum} (${pageIndex}/${numLeafs})`;
+  const lastIndex = Math.max(0, numLeafs - 1);
+  return `Page ${pageNum} (${index}/${lastIndex})`;
 }

package/src/BookReader/utils/SelectionObserver.js

@@ -4,10 +4,12 @@ export class SelectionObserver {
   startedInSelector = false;
   /** @type {HTMLElement} */
   target = null;
+  /** @type {Node} */
+  lastKnownFocusNode = null;
 
   /**
    * @param {string} selector
-   * @param {function('started' | 'cleared', HTMLElement): any} handler
+   * @param {function('started' | 'cleared' | 'focusChanged', HTMLElement): any} handler
    */
   constructor(selector, handler) {
     this.selector = selector;
@@ -34,9 +36,15 @@ export class SelectionObserver {
       if (!target) return;
       this.target = target;
       this.selecting = true;
+      this.lastKnownFocusNode = sel.focusNode;
       this.handler('started', this.target);
     }
 
+    if (this.selecting && (this.lastKnownFocusNode != sel.focusNode || sel.toString() && !sel.isCollapsed)) {
+      this.lastKnownFocusNode = sel.focusNode;
+      this.handler('focusChanged', this.target);
+    }
+
     if (this.selecting && (sel.isCollapsed || !sel.toString() || !$(sel.anchorNode).closest(this.selector)[0])) {
       this.selecting = false;
       this.handler('cleared', this.target);

package/src/BookReader.js

@@ -1970,10 +1970,25 @@ BookReader.prototype.queryStringFromParams = function(
   if (params.search && urlMode === 'history') {
     newParams.set('q', params.search);
   }
+
+  let textFragmentParam = '';
+  // 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)}`;
+  }
+
   // 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();
-  return result ? '?' + result : '';
+  let result = newParams.toString();
+  if (textFragmentParam) {
+    if (result) result += '&';
+    result += textFragmentParam;
+  }
+  if (result) result = '?' + result;
+
+  return result;
 };
 
 /**

package/src/css/_TextSelection.scss

@@ -150,4 +150,63 @@
 
 .BRtranslateLayer .BRparagraphElement.BRtranslateHidden {
     display: none;
+}
+
+.br-select-menu__root {
+  display: none;
+  border-radius: 20px;
+  background-color: #333;
+  color-scheme: dark;
+  padding: 2px;
+  overflow: hidden;
+  transition: border-radius 0.2s;
+}
+.br-select-menu__root:hover {
+  border-radius: 8px;
+}
+
+.br-select-menu__root:hover .br-select-menu__option {
+  border-radius: 6px;
+}
+
+.br-select-menu__option {
+  --iconWidth: 15px;
+  --iconHeight: 15px;
+  --iconFillColor: currentColor;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  border-radius: 20px;
+  font-family: inherit;
+  border: 0;
+  transition: background-color 0.2s, border-radius 0.2s;
+  cursor: pointer;
+  text-wrap: nowrap;
+  padding: 4px;
+}
+
+.br-select-menu__option:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.br-select-menu__icon {
+  display: block;
+  flex-shrink: 0;
+  width: 17px;
+  height: 17px;
+}
+
+.br-select-menu__label {
+  width: 0px;
+  opacity: 0;
+  interpolate-size: allow-keywords;
+  transition: width 0.2s;
+  font-size: 12px;
+}
+
+
+.br-select-menu__root:hover .br-select-menu__label {
+  width: auto;
+  margin-left: 4px;
+  opacity: 1;
 }

package/src/plugins/plugin.chapters.js

@@ -6,6 +6,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 import '@internetarchive/icon-toc/icon-toc.js';
 import { BookReaderPlugin } from "../BookReaderPlugin.js";
 import { applyVariables } from "../util/strings.js";
+import { promisifyEvent } from "../BookReader/utils.js";
 /** @typedef {import('@/src/BookReader/BookModel.js').PageIndex} PageIndex */
 /** @typedef {import('@/src/BookReader/BookModel.js').PageString} PageString */
 /** @typedef {import('@/src/BookReader/BookModel.js').LeafNum} LeafNum */
@@ -94,11 +95,15 @@ export class ChaptersPlugin extends BookReaderPlugin {
       this._tocEntries = rawTableOfContents
         .map(rawTOCEntry => (Object.assign({}, rawTOCEntry, {
           pageIndex: (
-            typeof(rawTOCEntry.leaf) == 'number' ? this.br.book.leafNumToIndex(rawTOCEntry.leaf) :
-              rawTOCEntry.pagenum ? this.br.book.getPageIndex(rawTOCEntry.pagenum) :
-                undefined
+            typeof rawTOCEntry.page_index === 'number' ? rawTOCEntry.page_index :
+              typeof(rawTOCEntry.leaf) == 'number' ? this.br.book.leafNumToIndex(rawTOCEntry.leaf) :
+                rawTOCEntry.pagenum ? this.br.book.getPageIndex(rawTOCEntry.pagenum) :
+                  undefined
           ),
         })));
+      if (!this.br.shell) {
+        await promisifyEvent(window, 'BookReader:PostInit');
+      }
       this._render();
       this.br.bind(BookReader.eventNames.pageChanged, () => this._updateCurrent());
     }

package/src/plugins/plugin.experiments.js

@@ -51,11 +51,27 @@ export class ExperimentsPlugin extends BookReaderPlugin {
     localStorageKey: 'BrExperiments',
 
     /** The experiments that should be shown in the experiments panel */
-    enabledExperiments: ['translate'],
+    enabledExperiments: ['translate', 'copyLinkToHighlight'],
   }
 
   /** @type {ExperimentModel[]} */
   allExperiments = [
+    new class extends ExperimentModel {
+      name = 'copyLinkToHighlight';
+      title = 'Copy to Selection URL';
+      description = 'Share text selection via URL';
+      learnMore = 'none';
+      icon = null;
+      enabled = false;
+      async enable ({ manual = false }) {
+        this.br.plugins.textSelection.enableSelectionMenu();
+      }
+      async disable() {
+        sleep(0).then(() => {
+          window.location.reload();
+        });
+      }
+    }(),
     new class extends ExperimentModel {
       name = 'translate';
       title = 'Translate Plugin';
@@ -123,7 +139,9 @@ export class ExperimentsPlugin extends BookReaderPlugin {
     for (const experiment of this.allExperiments) {
       // TODO: imagesBaseURL should be replaced with assetRoot everywhere
       experiment.assetRoot = this.br.options.imagesBaseURL.replace(/images\/$/, '');
-      experiment.icon = experiment.buildAssetPath(experiment.icon);
+      if (experiment.icon) {
+        experiment.icon = experiment.buildAssetPath(experiment.icon);
+      }
       experiment.br = this.br;
     }
 
@@ -269,7 +287,7 @@ export class BrExperimentToggle extends LitElement {
     return html`
       <div class="experiment-card" style="margin-bottom: 10px;">
         <div style="display: flex; align-items: center; gap: 10px;">
-          <img src="${this.icon}" style="width: 20px; height: 20px;" alt="" />
+          ${this.icon ? html`<img src="${this.icon}" style="width: 20px; height: 20px;" alt="" />` : ''}
           <div style="flex-grow: 1; font-weight: bold;">${this.title}</div>
         </div>
         <p style="opacity: 0.9">

package/src/plugins/plugin.text_selection.js

@@ -53,10 +53,21 @@ export class TextSelectionPlugin extends BookReaderPlugin {
   init() {
     if (!this.options.enabled) return;
 
+    this.br.on('pageVisible', (_, {pageContainerEl}) => {
+      if (pageContainerEl.querySelector('.BRtextLayer')) {
+        this.br.trigger('textLayerVisible', {pageContainerEl});
+      }
+    });
+
     this.loadData();
     this.textSelectionManager.init();
   }
 
+  enableSelectionMenu() {
+    this.textSelectionManager.selectionMenuEnabled = true;
+    this.textSelectionManager.renderSelectionMenu();
+  }
+
   /**
    * @override
    * @param {PageContainer} pageContainer
@@ -188,6 +199,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
       paragEl.style.marginTop = `${newTop}px`;
       yAdded += newTop;
       textLayer.appendChild(paragEl);
+      textLayer.appendChild(document.createTextNode('\n'));
     }
     $container.append(textLayer);
     this.textSelectionManager.stopPageFlip($container);
@@ -195,6 +207,11 @@ export class TextSelectionPlugin extends BookReaderPlugin {
       pageIndex,
       pageContainer,
     });
+
+    // Check if page is visible
+    if ($container.hasClass('BRpage-visible')) {
+      this.br.trigger('textLayerVisible', {pageContainerEl: $container[0]});
+    }
   }
 
   /**

package/src/plugins/translate/plugin.translate.js

@@ -1,9 +1,9 @@
 // @ts-check
-import { html, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { BookReaderPlugin } from '../../BookReaderPlugin.js';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { TranslationManager } from "./TranslationManager.js";
-import { toISO6391 } from '../tts/utils.js';
+import { toISO6391, toNativeName } from '../tts/utils.js';
 import { sortBy } from '../../../src/BookReader/utils.js';
 import { TextSelectionManager } from '../../../src/util/TextSelectionManager.js';
 import '@internetarchive/ia-activity-indicator';
@@ -63,14 +63,12 @@ export class TranslatePlugin extends BookReaderPlugin {
   textSelectionManager = new TextSelectionManager('.BRtranslateLayer', this.br, {selectionElement: [".BRlineElement"]}, 1);
 
   async init() {
-    const currentLanguage = toISO6391(this.br.options.bookLanguage.replace(/[.,/#!$%^&*;:{}=\-_`~()]/g, ""));
+    if (!this.options.enabled) return;
+
+    const bookLanguage = this.br.options.bookLanguage || '';
+    const currentLanguage = toISO6391(bookLanguage);
     this.langFromCode = currentLanguage ?? "en";
     this.textSelectionManager.init();
-
-    if (!this.options.enabled) {
-      return;
-    }
-
     this.translationManager.publicPath = this.br.options.imagesBaseURL.replace(/\/+$/, '') + '/..';
 
     /**
@@ -307,6 +305,14 @@ export class TranslatePlugin extends BookReaderPlugin {
   }
 
   handleToggleTranslation = async () => {
+    const shouldEnableTranslation = !this.userToggleTranslate;
+    if (shouldEnableTranslation && !this.isSourceLanguageSupported()) {
+      this.userToggleTranslate = false;
+      this.translationManager.active = false;
+      this._render();
+      return;
+    }
+
     this.userToggleTranslate = !this.userToggleTranslate;
     this.translationManager.active = this.userToggleTranslate;
 
@@ -325,6 +331,10 @@ export class TranslatePlugin extends BookReaderPlugin {
   /**
   * Update translation side menu
   */
+  isSourceLanguageSupported() {
+    return this.translationManager.fromLanguages.some((lang) => lang.code == this.langFromCode);
+  }
+
   _render() {
     this.br.shell.menuProviders['translate'] = {
       id: 'translate',
@@ -339,6 +349,7 @@ export class TranslatePlugin extends BookReaderPlugin {
         this._panel.detectedToLang = this.langToCode;
         this._panel.detectedFromLang = this.langFromCode;
         this._panel.loadingModel = this.loadingModel;
+        this._panel.sourceLanguageSupported = this.isSourceLanguageSupported();
       }
       }"
         @langFromChanged="${this.handleFromLangChange}"
@@ -351,6 +362,7 @@ export class TranslatePlugin extends BookReaderPlugin {
         .detectedFromLang=${this.langFromCode}
         .detectedToLang=${this.langToCode}
         .loadingModel=${this.loadingModel}
+        .sourceLanguageSupported=${this.isSourceLanguageSupported()}
         class="translate-panel"
       />`,
     };
@@ -369,12 +381,27 @@ export class BrTranslatePanel extends LitElement {
   @property({ type: String }) detectedFromLang = '';
   @property({ type: String }) detectedToLang = '';
   @property({ type: Boolean }) loadingModel;
+  @property({ type: Boolean }) sourceLanguageSupported = true;
+
+  @query('#lang-from') langFromDropdown;
+  @query('#lang-to') langToDropdown;
+
+  static styles = css`
+    .disclaimer {
+      padding: 10px;
+      border-radius: 8px;
+      font-size: 12px;
+      margin: 0 0 10px;
+      background-color: rgba(255, 255, 255, 0.1);
+      color: rgba(255, 255, 255, 0.9);
+    }
 
-  /** @override */
-  createRenderRoot() {
-    // Disable shadow DOM; that would require a huge rejiggering of CSS
-    return this;
-  }
+    .disclaimer--warning {
+      margin: 10px 0;
+      background-color: rgba(255, 186, 8, 0.18);
+      color: #ffe7a3;
+    }
+  `;
 
   connectedCallback() {
     super.connectedCallback();
@@ -382,11 +409,12 @@ export class BrTranslatePanel extends LitElement {
   }
 
   render() {
+    const statusWarning = this._statusWarning();
+
     return html`<div class="app" style="margin-top: 5%;padding-right: 5px;">
       <div
         class="disclaimer"
         id="disclaimerMessage"
-        style="background-color: rgba(255,255,255,0.1);padding: 10px;border-radius: 8px;font-size: 12px;margin-bottom: 10px;color: rgba(255,255,255, 0.9);"
       >${this.disclaimerMessage}</div>
 
       <div class="panel panel--to" style="padding: 0 10px;">
@@ -405,7 +433,7 @@ export class BrTranslatePanel extends LitElement {
       </div>
 
       <div class="panel panel--start" style="text-align: right;padding: 0 10px;/*! font-size: 18px; */margin-top: 10px;">
-            <button class="start-translation-brn" @click="${this._toggleTranslation}">
+        <button class="start-translation-brn" @click="${this._toggleTranslation}" ?disabled=${!this.sourceLanguageSupported}>
               ${this.userTranslationActive ? "Stop Translating" : "Translate"}
             </button>
       </div>
@@ -426,9 +454,14 @@ export class BrTranslatePanel extends LitElement {
           })
           }
           </select>
-      </details>
+        </details>
+      </div>
       <div class="footer" id="status" style="margin-top:5%">
-      ${this._statusWarning()}
+        ${
+          statusWarning ? html`
+            <div class="disclaimer disclaimer--warning">${statusWarning}</div>
+          ` : ''
+        }
       </div>
 
       <div class="lang-models-loading"> 
@@ -469,17 +502,27 @@ export class BrTranslatePanel extends LitElement {
   }
 
   _getSelectedLang(type) {
-    /** @type {HTMLSelectElement} */
-    const dropdown = this.querySelector(`#lang-${type}`);
+    const dropdown = type === 'from' ? this.langFromDropdown : this.langToDropdown;
     return dropdown ? dropdown.value : '';
   }
 
+  /**
+   * Resolves a human-readable language name for a language code.
+   * Prefers names from loaded translation language lists, then falls back to
+   * ISO language metadata via toNativeName.
+   * @param {string} code
+   * @returns {string}
+   */
   _getLangName(code) {
-    const lang = [...this.fromLanguages, ...this.toLanguages].find(lang => lang.code === code);
-    return lang ? lang.name : '';
+    const lang = [...this.fromLanguages, ...this.toLanguages]
+      .find(lang => lang.code === code);
+    return lang?.name || toNativeName(code) || code;
   }
 
   _toggleTranslation(event) {
+    if (!this.sourceLanguageSupported) {
+      return;
+    }
     const toggleTranslateEvent = new CustomEvent('toggleTranslation', {
       detail: {value: event.target.value},
       bubbles: true,
@@ -491,6 +534,9 @@ export class BrTranslatePanel extends LitElement {
 
   // TODO: Hardcoded warning message for now but should add more statuses
   _statusWarning() {
+    if (!this.sourceLanguageSupported) {
+      return `Translating from ${this._getLangName(this.detectedFromLang)} is not supported`;
+    }
     if (this.detectedFromLang == this.detectedToLang) {
       return "Translate To language is the same as the Source language";
     }

package/src/plugins/tts/utils.js

@@ -53,7 +53,7 @@ export function toISO6391(language) {
 /**
  *
  * @param {string} language
- * @returns {string}
+ * @returns {string | null}
  */
 export function toNativeName(language) {
   if (!language) return null;

package/src/plugins/url/UrlPlugin.js

@@ -161,7 +161,7 @@ export class UrlPlugin {
    * If it was changeed, update the urlState
    */
   listenForHashChanges() {
-    this.oldLocationHash = window.location.hash.substr(1);
+    this.oldLocationHash = this.getHash();
     if (this.urlLocationPollId) {
       clearInterval(this.urlLocationPollId);
       this.urlLocationPollId = null;
@@ -169,7 +169,7 @@ export class UrlPlugin {
 
     // check if the URL changes
     const updateHash = () => {
-      const newFragment = window.location.hash.substr(1);
+      const newFragment = this.getHash();
       const hasFragmentChange = newFragment != this.oldLocationHash;
 
       if (!hasFragmentChange) { return; }
@@ -182,10 +182,30 @@ export class UrlPlugin {
   /**
    * Will read either the hash or URL and return the bookreader fragment
    */
-  pullFromAddressBar (location = window.location) {
+  pullFromAddressBar(location = window.location) {
     const path = this.urlMode === 'history'
       ? (location.pathname.substr(this.urlHistoryBasePath.length) + location.search)
       : location.hash.substr(1);
     this.urlState = this.urlStringToUrlState(path);
   }
+
+  /**
+   * 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
+   */
+  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=)[^&]*/);
+  }
 }

package/src/plugins/url/plugin.url.js

@@ -1,6 +1,7 @@
 /* global BookReader */
 
 import { UrlPlugin } from "./UrlPlugin.js";
+import { sleep } from "../../BookReader/utils.js";
 
 /**
  * Plugin for URL management in BookReader
@@ -25,7 +26,7 @@ jQuery.extend(BookReader.defaultOptions, {
   urlHistoryBasePath: '/',
 
   /** Only these params will be reflected onto the URL */
-  urlTrackedParams: ['page', 'search', 'mode', 'region', 'highlight', 'view'],
+  urlTrackedParams: ['page', 'search', 'mode', 'region', 'highlight', 'view', 'text'],
 
   /** If true, don't update the URL when `page == n0 (eg "/page/n0")` */
   urlTrackIndex0: false,
@@ -42,6 +43,10 @@ BookReader.prototype.setup = (function(super_) {
     this.locationPollId = null;
     this.oldLocationHash = null;
     this.oldUserHash = null;
+    // Should include the :~:text= prefix
+    this.textFragment = null;
+    // Tracks the original textFragment page num when first loaded
+    this.textFragmentPage = null;
   };
 })(BookReader.prototype.setup);
 
@@ -140,11 +145,23 @@ BookReader.prototype.urlUpdateFragment = function() {
     return validParams;
   }, {});
 
+  // eg 'page/3/mode/2up'; no query params (in hash mode, it might have /search/term)
+  // Does NOT have the :~:text fragment
   const newFragment = this.fragmentFromParams(params, this.options.urlMode);
+  const newFragmentWithSlash = newFragment === '' ? '' : `/${newFragment}`;
+  // eg 'page/3/mode/2up'; no query params
+  // WILL CONTAIN the :~:text fragment in hash mode (!)
   const currFragment = this.urlReadFragment();
+  // This should have both ?q=foo&text=bar (and any other params) as an encoded string
   const currQueryString = this.getLocationSearch();
+  // Eg ?q=foo&text=bar; only query params, no fragment
   const newQueryString = this.queryStringFromParams(params, currQueryString, this.options.urlMode);
-  if (currFragment === newFragment && currQueryString === newQueryString) {
+
+  // NOTE: If ?text is in the URL, we will fire fragment change events on every render; which is
+  // not desireable, but currently don't have a way to handle re-writing ?text to the hash text
+  // fragment form, :~:text=foo.
+  const hasTextParam = this.urlPlugin.retrieveTextFragment(currQueryString);
+  if (currFragment === newFragment && currQueryString === newQueryString && !hasTextParam) {
     return;
   }
 
@@ -153,12 +170,19 @@ BookReader.prototype.urlUpdateFragment = function() {
       this.options.urlMode = 'hash';
     } else {
       const baseWithoutSlash = this.options.urlHistoryBasePath.replace(/\/+$/, '');
-      const newFragmentWithSlash = newFragment === '' ? '' : `/${newFragment}`;
-
+      const textFragment = this.urlPlugin.retrieveTextFragment(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}`;
+      }
       try {
         window.history.replaceState({}, null, newUrlPath);
         this.oldLocationHash = newFragment + newQueryString;
+        if (textFragment) {
+          this.oldLocationHash += `:~:text=${textFragment[0]}`;
+        }
       } catch (e) {
         // DOMException on Chrome when in sandboxed iframe
         this.options.urlMode = 'hash';
@@ -168,8 +192,22 @@ BookReader.prototype.urlUpdateFragment = function() {
 
   if (this.options.urlMode === 'hash')  {
     const newQueryStringSearch = this.urlParamsFiltersOnlySearch(this.readQueryString());
-    window.location.replace('#' + newFragment + newQueryStringSearch);
-    this.oldLocationHash = newFragment + newQueryStringSearch;
+    let textFragment = this.urlPlugin.retrieveTextFragment(this.readQueryString());
+    const extractedPage = this.urlPlugin.urlStringToUrlState(newFragmentWithSlash)?.page;
+
+    if (textFragment) {
+      textFragment = `:~:text=${textFragment[0]}`;
+    } else {
+      textFragment = '';
+    }
+    if (!this.textFragmentPage && textFragment) {
+      this.textFragmentPage = extractedPage ? extractedPage : null;
+      this.textFragment = textFragment;
+    } else if (this.textFragmentPage && extractedPage != this.textFragmentPage) {
+      textFragment = '';
+    }
+    window.location.replace('#' + newFragment + newQueryStringSearch + textFragment);
+    this.oldLocationHash = newFragment + newQueryStringSearch + textFragment;
   }
 };
 
@@ -195,7 +233,7 @@ BookReader.prototype.urlReadFragment = function() {
   if (urlMode === 'history') {
     return window.location.pathname.substr(urlHistoryBasePath.length);
   } else {
-    return window.location.hash.substr(1);
+    return this.urlPlugin.getHash();
   }
 };
 
@@ -210,6 +248,24 @@ export class BookreaderUrlPlugin extends BookReader {
   init() {
     if (this.options.enableUrlPlugin) {
       this.urlPlugin = new UrlPlugin(this.options);
+      const location = this.getLocationSearch();
+      if (location.includes("text=")) {
+        this.on('textLayerVisible', async (_, {pageContainerEl}) => {
+          const visiblePageNum = pageContainerEl.getAttribute('data-page-num');
+
+          // Hack: More time mode 1up page "settle down" from user scrolling
+          await sleep(this.mode === 1 ? 900 : 100);
+
+          // 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}`);
+          }
+        });
+      }
       this.bind(BookReader.eventNames.PostInit, () => {
         const { urlMode } = this.options;