@internetarchive/bookreader 5.0.0-114 → 5.0.0-116

package/src/util/TextSelectionManager.js

@@ -1,11 +1,14 @@
 // @ts-check
 import { countWords } from './strings.js';
 import { SelectionObserver } from "../BookReader/utils/SelectionObserver.js";
+import { clamp } from "../BookReader/utils.js";
 import { html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import '@internetarchive/icon-share';
 import '@internetarchive/icon-edit-pencil/icon-edit-pencil.js';
+import { isIOS, isAndroid } from './browserSniffing.js';
+import { genAt, genFilter } from './generators.js';
 
 const BR_HIGHLIGHTS_LOCAL_STORAGE_KEY = "BRhighlightStorage";
 const MAX_FULL_QUOTE_URL_CHARS = 80;
@@ -55,15 +58,12 @@ export class TextSelectionManager {
         // Set a class on the page to avoid hiding it when zooming/etc
         this.br.refs.$br.find('.BRpagecontainer--hasSelection').removeClass('BRpagecontainer--hasSelection');
         $(window.getSelection().anchorNode).closest('.BRpagecontainer').addClass('BRpagecontainer--hasSelection');
-        this.showSelectMenu();
-
+        // Don't show while still doing selection
+        if (!this.mouseIsDown) this.showSelectMenu();
       }
 
       if (selectEvent == 'changed') {
-        // hide the button as user changes their selection
-        if (this.mouseIsDown) {
-          this.hideSelectMenu();
-        } else if (window.getSelection()?.toString()) {
+        if (!this.mouseIsDown && window.getSelection()?.toString()) {
           this.showSelectMenu();
         }
       }
@@ -165,7 +165,6 @@ export class TextSelectionManager {
     // blocking selection
     $(textLayer).on("mousedown.textSelectPluginHandler", (event) => {
       this.mouseIsDown = true;
-      this.hideSelectMenu();
       if ($(event.target).is(this.selectionElement.join(", "))) {
         event.stopPropagation();
       }
@@ -173,7 +172,6 @@ export class TextSelectionManager {
 
     $(textLayer).on("mouseup.textSelectPluginHandler", (event) => {
       this.mouseIsDown = false;
-      this.hideSelectMenu();
       textLayer.style.pointerEvents = "none";
       if (skipNextMouseup) {
         skipNextMouseup = false;
@@ -199,7 +197,6 @@ export class TextSelectionManager {
       if (event.which != 1) return;
       this.mouseIsDown = true;
       event.stopPropagation();
-      this.hideSelectMenu();
     });
 
     // Prevent page flip on click
@@ -221,7 +218,11 @@ export class TextSelectionManager {
       document.body.append(this.selectMenu);
     }
 
-    this.selectMenu.show();
+    if (this.selectMenu.open) {
+      this.selectMenu.repositionToSelection();
+    } else {
+      this.selectMenu.show();
+    }
   }
 
   hideSelectMenu() {
@@ -247,8 +248,8 @@ export class TextSelectionManager {
     // Find the last allowed word in the selection
     const lastAllowedWord = genAt(
       genFilter(
-        walkBetweenNodes(range.startContainer, range.endContainer),
-        (node) => node.classList?.contains(
+        treeWalkRange(range, 'element'),
+        (node) => node.classList.contains(
           this.selectionElement[0].replace(".", ""),
         ),
       ),
@@ -267,55 +268,58 @@ export class TextSelectionManager {
 }
 
 /**
- * @template T
- * Get the i-th element of an iterable
- * @param {Iterable<T>} iterable
- * @param {number} index
+ * @overload
+ * @param {Range} range
+ * @param {'text'} filter
+ * @returns {Generator<Text>}
  */
-export function genAt(iterable, index) {
-  let i = 0;
-  for (const x of iterable) {
-    if (i == index) {
-      return x;
-    }
-    i++;
-  }
-  return undefined;
-}
-
 /**
- * @template T
- * Generator version of filter
- * @param {Iterable<T>} iterable
- * @param {function(T): boolean} fn
+ * @overload
+ * @param {Range} range
+ * @param {'element'} filter
+ * @returns {Generator<Element>}
+ */
+/**
+ * @overload
+ * @param {Range} range
+ * @param {'text+element'} [filter]
+ * @returns {Generator<Text | Element>}
  */
-export function* genFilter(iterable, fn) {
-  for (const x of iterable) {
-    if (fn(x)) yield x;
-  }
-}
-
 /**
  * Depth traverse the DOM tree starting at `start`, and ending at `end`.
- * @param {Node} start
- * @param {Node} end
+ * @param {Range} range
+ * @param {'text' | 'element' | 'text+element'} [filter]
  * @returns {Generator<Node>}
  */
-export function* walkBetweenNodes(start, end) {
+export function* treeWalkRange(range, filter = 'text+element') {
+  const start = range.startContainer;
+  const end = range.endContainer;
   let done = false;
 
   /**
    * @param {Node} node
    */
+  const passesFilter = node => {
+    return (
+      (filter === 'text' && node.nodeType === Node.TEXT_NODE) ||
+      (filter === 'element' && node.nodeType === Node.ELEMENT_NODE) ||
+      (filter === 'text+element')
+    );
+  };
+
+  /**
+   * @param {Node} node
+   * @returns {Generator<Node>}
+   */
   function* walk(node, {children = true, parents = true, siblings = true} = {}) {
     if (node === end) {
       done = true;
-      yield node;
+      if (passesFilter(node)) yield node;
       return;
     }
 
     // yield self
-    yield node;
+    if (passesFilter(node)) yield node;
 
     // First iterate children (depth-first traversal)
     if (children && node.firstChild) {
@@ -459,6 +463,9 @@ class BRSelectMenu extends LitElement {
   @query('#copy-link-option')
   copyLinkOption;
 
+  @property({type: Boolean, reflect: true})
+  open = false;
+
   @property({type: Boolean})
   copyLinkToHighlightEnabled = true;
 
@@ -479,6 +486,19 @@ class BRSelectMenu extends LitElement {
     return this;
   }
 
+  /** @type {number | null} */
+  _scrollTimeoutId = null;
+
+  _onScroll = () => {
+    this.classList.add('br-select-menu__root--scrolling');
+    if (this._scrollTimeoutId != null) clearTimeout(this._scrollTimeoutId);
+    this._scrollTimeoutId = window.setTimeout(() => {
+      this._scrollTimeoutId = null;
+      this.repositionToSelection();
+      this.classList.remove('br-select-menu__root--scrolling');
+    }, 150);
+  };
+
   /** @override */
   connectedCallback() {
     super.connectedCallback();
@@ -487,10 +507,22 @@ class BRSelectMenu extends LitElement {
     this.setAttribute('aria-orientation', 'vertical');
   }
 
+  /** @override */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener('scroll', this._onScroll, { capture: true });
+    if (this._scrollTimeoutId != null) {
+      clearTimeout(this._scrollTimeoutId);
+      this._scrollTimeoutId = null;
+    }
+  }
+
   renderCopyLinkToHighlightOption() {
+    // Mousedown needed to prevent selection from being cleared on iOS
     return html`
       <br-menu-option
         id="copy-link-option"
+        @mousedown=${/** @param {MouseEvent} e */ (e) => e.preventDefault()}
         @click=${this.handleCopyLinkToHighlight}
         icon="share"
         label="Copy Link to Highlight"
@@ -557,7 +589,6 @@ class BRSelectMenu extends LitElement {
    */
   async handleCopyLinkToHighlight(e) {
     e.preventDefault();
-    const currentParams = this.br.readQueryString();
     const currentSelection = /** @type {Selection} */ (window.getSelection());
     const range = currentSelection.getRangeAt(0);
     const textLayer = this.getNodeTextLayer(range.startContainer);
@@ -567,19 +598,18 @@ class BRSelectMenu extends LitElement {
     }
     const textFragment = BookReaderTextFragment.fromSelection(currentSelection, [textLayer]);
 
-    // Note: Have to do a param construction to avoid url-encoding of commas in the text fragment param
-    let linkToHighlightParams = currentParams;
-    if (currentParams.includes('text=')) {
-      linkToHighlightParams = currentParams.replace(/(text=)[\w\W\d%]+/, `text=${textFragment.toUrlString()}`);
-    } else {
-      const sep = linkToHighlightParams ? '&' : '?';
-      linkToHighlightParams += `${sep}text=${textFragment.toUrlString()}`;
-    }
+    const currentParams = new URLSearchParams(this.br.readQueryString());
+    if (currentParams.has('text')) currentParams.delete('text');
+
+    let linkToHighlightParams = currentParams.toString();
+    // Use custom toUrlString, which decodes the delimiters for better readability
+    linkToHighlightParams += (linkToHighlightParams ? '&' : '') + `text=${textFragment.toUrlString()}`;
+
     const currentUrl = window.location;
     const pageNum = textFragment.pageNumber || `n${textFragment.pageIndex}`;
     const adjustedUrlPageNumPath = currentUrl.pathname.replace(/((?:^|[#/])page)\/[^/]+/, `$1/${pageNum}`);
     const hash = currentUrl.hash ? currentUrl.hash.replace(/((?:^|[#/])page)\/[^/]+/, `$1/${pageNum}`) : '';
-    const linkToHighlight = `${currentUrl.origin}${adjustedUrlPageNumPath}${linkToHighlightParams}${hash}`;
+    const linkToHighlight = `${currentUrl.origin}${adjustedUrlPageNumPath}?${linkToHighlightParams}${hash}`;
 
     await navigator.clipboard.writeText(linkToHighlight);
     this.copyLinkOption?.showTemporaryText('Copied!');
@@ -703,31 +733,54 @@ class BRSelectMenu extends LitElement {
     this.show();
   }
 
-  show() {
+  repositionToSelection() {
+    const SCREEN_MARGIN = 10;
+    const currentSelection = /** @type {Selection} */ (window.getSelection());
+    const range = currentSelection.getRangeAt(0);
+    const selectionRect = range.getBoundingClientRect();
+
+    const isMobile = isIOS() || isAndroid();
+    // Leave room for mobile teardrop selection handles
+    const SELECTION_PADDING = isAndroid() ? 25 : isIOS() ? 15 : 10;
+    // On mobile, avoid the native OS text-selection bar which appears near the top of the screen
+    const OS_BAR_H = isMobile ? 60 : 0;
+    const idealTop = (selectionRect.top < OS_BAR_H
+      ? selectionRect.bottom + OS_BAR_H
+      : selectionRect.bottom) + SELECTION_PADDING;
+    const top = Math.max(SCREEN_MARGIN, idealTop) + window.scrollY;
+
+    const menuWidth = this.getBoundingClientRect().width;
+    // Excludes scrollbars
+    const windowWidth = document.documentElement.clientWidth;
+    const idealLeft = menuWidth > selectionRect.width
+      ? selectionRect.left + selectionRect.width / 2 - menuWidth / 2
+      : selectionRect.left;
+    const left = clamp(idealLeft, SCREEN_MARGIN, windowWidth - menuWidth - SCREEN_MARGIN) + window.scrollX;
+
+    this.style.top = `${top}px`;
+    this.style.left = `${left}px`;
+  }
+
+  async show() {
     if (this.br.plugins.translate?.userToggleTranslate) return;
-    const currentSelection = window.getSelection();
-    const start = currentSelection.anchorNode.parentElement;
-    const end = currentSelection.focusNode.parentElement; // will always be a text node
-    const height = 30;
-    const width = 60;
-    const startBoundingRect = start.getBoundingClientRect();
-    const endBoundingRect = end.getBoundingClientRect();
-    let hlButtonTop = startBoundingRect.top - height;
-    let hlButtonLeft = startBoundingRect.left - width;
-    if (currentSelection.direction == 'backward') {
-      hlButtonTop = endBoundingRect.top - height;
-      hlButtonLeft = endBoundingRect.left - width;
-    }
-    this.style.top = `${hlButtonTop}px`;
-    this.style.left = `${hlButtonLeft}px`;
+
     this.style.zIndex = '1';
     this.style.position = 'absolute';
     this.style.display = 'block';
+    this.open = true;
+    this.classList.remove('br-select-menu__root--scrolling');
+    window.removeEventListener('scroll', this._onScroll, { capture: true });
+    window.addEventListener('scroll', this._onScroll, { capture: true, passive: true });
+    await this.updateComplete; // ensure Lit has rendered so getBoundingClientRect() returns real width
+    this.repositionToSelection();
     this.clearNodesForRemoval();
   }
 
-  hide = () => {
+  hide() {
+    if (!this.open) return;
     this.style.display = 'none';
+    this.open = false;
+    window.removeEventListener('scroll', this._onScroll, { capture: true });
     this.clearNodesForRemoval();
     return;
   }
@@ -788,12 +841,23 @@ export function getLastMostNode(parent) {
 }
 
 /**
- * Strips the whitespace to normalize text
+ * Normalizes text fragment whitespace and removes special delimiter characters
+ * to allow for reliable url encoding/decoding
+ *
+ * Note: It's very important this *does not* change the length of the string to
+ * ensure matching works smoothly later.
+ *
  * @param {String} string
- * @returns
  */
-function replaceWhitespace(string) {
-  return string.replace(/\s+/g, " ");
+export function replaceTextFragmentDelimiters(string) {
+  return string.replace(/(:|-,|,-|,|\n)/g, s => s.length === 1 ? ' ' : '  ');
+}
+
+/**
+ * @param {String} s
+ */
+export function collapseWhitespace(s) {
+  return s.replace(/\s+/g, ' ').trim();
 }
 
 /**
@@ -810,7 +874,7 @@ export function findRangeForRegExp(regex, range, textNodes, { normalize = (s) =>
   const startOffset = textNodes[0] === range.startContainer ?
     range.startOffset :
     0;
-  const normalizedWholePageString = normalize(range.toString());
+  const normalizedWholePageString = normalize(textLayerRangeToString(range));
   const normalizedStartOffset = normalize(textNodes[0].textContent.slice(0, startOffset)).length;
   const matchRegex = new RegExp(regex.source, regex.flags.includes('g') ? regex.flags : `${regex.flags}g`);
 
@@ -835,8 +899,8 @@ export function findRangeForRegExp(regex, range, textNodes, { normalize = (s) =>
     }
 
     const foundRange = new Range();
-    foundRange.setStart(start.node, 0);
-    foundRange.setEnd(end.node, 1);
+    foundRange.setStart(start.node, start.offset);
+    foundRange.setEnd(end.node, end.offset);
     return foundRange;
   });
 
@@ -846,68 +910,74 @@ export function findRangeForRegExp(regex, range, textNodes, { normalize = (s) =>
 }
 
 /**
- * Uses the index that matches the quote string and normalizes the string contents to find the correct node
+ * Maps an index from "normalized-space" (concatenated and normalized text) to a "node-space" index (node + offset).
  * @param {Number} index
  * @param {Node[]} nodes
  * @param {boolean} isEnd
  * @param {{ normalize?: function(string): string }} [options]
  */
 export function getBoundaryPointAtIndex(index, nodes, isEnd, { normalize = (s) => s } = {}) {
-  let counted = 0;
-  let normalizedData;
-  for (let i = 0; i < nodes.length; i++) {
-    const node = nodes[i];
-    if (node.className === 'BRlineElement') {
-      // Treat the lineElement as a space for now, will check if the previous node was hyphenated or another lineElement later
-      normalizedData = ' ';
-    } else {
-      if (!normalizedData) normalizedData = normalize(node.textContent);
-    }
-    let nodeEnd = counted + normalizedData.length;
-    if (isEnd) nodeEnd += 1;
-    if (nodeEnd > index) {
-      const normalizedOffset = index - counted;
-      let denormalizedOffset = Math.min(index - counted, node.textContent.length);
-
-      const targetSubstring = isEnd ?
-        normalizedData.substring(0, normalizedOffset) :
-        normalizedData.substring(normalizedOffset);
-
-      let candidateSubstring = isEnd ?
-        normalize(node.textContent.substring(0, normalizedOffset)) :
-        normalize(node.textContent.substring(normalizedOffset));
-
-      const direction = (isEnd ? -1 : 1) * (targetSubstring.length > candidateSubstring.length ? -1 : 1);
-      while (denormalizedOffset >= 0 &&
-               denormalizedOffset <= node.textContent.length) {
-        if (candidateSubstring.length === targetSubstring.length) {
-          return {node : node, offset: denormalizedOffset};
+  // Rename to have consistent wording
+  const normalizedTargetIndex = index;
+  /** Characters in node-space counted so far */
+  let normalizedI = 0;
+
+  for (const node of nodes) {
+    const nodeText = node.textContent || '';
+    const normalizedText = normalize(nodeText);
+    const nodeNormalizedStart = normalizedI;
+    const nodeNormalizedEnd = nodeNormalizedStart + normalizedText.length + (isEnd ? 1 : 0);
+
+    if (nodeNormalizedEnd > normalizedTargetIndex) {
+      // We have found the node that contains the normalizedTargetIndex we are looking for!
+      const normalizedOffset = normalizedTargetIndex - nodeNormalizedStart;
+
+      // But the normalized text could be a shorter length than the node text,
+      // so we try to continually increase the nodeOffset
+      let nodeOffset = Math.min(normalizedOffset, nodeText.length);
+
+      const normalizedSubstring = isEnd ?
+        normalizedText.substring(0, normalizedOffset) :
+        normalizedText.substring(normalizedOffset);
+
+      let nodeSubstring = isEnd ?
+        normalize(nodeText.substring(0, normalizedOffset)) :
+        normalize(nodeText.substring(normalizedOffset));
+
+      const direction = (isEnd ? -1 : 1) * (normalizedSubstring.length > nodeSubstring.length ? -1 : 1);
+      while (nodeOffset >= 0 && nodeOffset <= nodeText.length) {
+        if (nodeSubstring.length === normalizedSubstring.length) {
+          return {node, offset: nodeOffset};
         }
-        denormalizedOffset += direction;
+        nodeOffset += direction;
 
-        candidateSubstring = isEnd ?
-          node.textContent.substring(0, denormalizedOffset) :
-          node.textContent.substring(denormalizedOffset);
+        nodeSubstring = isEnd ?
+          normalize(nodeText.substring(0, nodeOffset)) :
+          normalize(nodeText.substring(nodeOffset));
       }
     }
-    counted += normalizedData.length;
-
-    if (i + 1 < nodes.length) {
-      const nextNormalizedData = replaceWhitespace(nodes[i + 1].textContent);
-      // Hyphenated words prove to be an issue since spaces are being inserted between BRlineElements
-      // 1st case explicitly check the node class to prevent double counted spaces
-      // 2nd case can happen from node traversal when loading from localStorage
-      if (nodes[i - 1]?.classList.contains("BRwordElement--hyphen") && node.className === 'BRlineElement') {
-        counted -= 1;
-      } else if (nodes[i - 1]?.className === 'BRlineElement' && node.className === 'BRlineElement') {
-        counted -= 1;
-      }
-      normalizedData = nextNormalizedData;
-    }
+    normalizedI += normalizedText.length;
   }
   return undefined;
 }
 
+/**
+ * @param {Range} range
+ */
+export function textLayerRangeToString(range) {
+  const textNodes = Array.from(genFilter(treeWalkRange(range, 'text'), isBRVisibleTextNode));
+  let result = textNodes.map(node => node.textContent).join('');
+  const firstTextNode = textNodes[0];
+  const lastTextNode = textNodes[textNodes.length - 1];
+  if (range.startContainer === firstTextNode) {
+    result = result.substring(range.startOffset);
+  }
+  if (range.endContainer === lastTextNode) {
+    result = result.substring(0, result.length - (lastTextNode.textContent.length - range.endOffset));
+  }
+  return result;
+}
+
 /**
  * Takes a text quote object and a container element, and wraps the quote
  * within the container element in a span to apply highlight-like styling
@@ -928,37 +998,29 @@ export function renderHighlight(textLayer, textFragment, cssClassName = null) {
   const wholePageRange = new Range();
   wholePageRange.setStart(firstPageNode, 0);
   wholePageRange.setEnd(lastPageNode, lastPageNode.textContent.length);
-  const normalize = replaceWhitespace;
 
-  // Retrieve the text nodes and relevant whitespace elements
-  // Need to keep the BRlineElement nodes in between to keep the index count consistent, remove first BRlineElement since text starts from the first real text node
-  const pageWordNodes = Array.from(textLayer.querySelectorAll('.BRwordElement, .BRspace, br, .BRlineElement'));
-  pageWordNodes.splice(0, 1);
+  const pageWordNodes = Array.from(genFilter(treeWalkRange(wholePageRange, 'text'), isBRVisibleTextNode));
 
   const broadRanges = findRangeForRegExp(
-    textFragment.toRegExp({ normalize, context: true }),
+    textFragment.toRegExp({ context: true }),
     wholePageRange,
     pageWordNodes,
-    { normalize },
+    { normalize: replaceTextFragmentDelimiters },
   );
   if (!broadRanges) {
     console.warn("Could not find quote with context in page");
     return;
   }
 
-  const broadRangeWordNodes = [];
-  for (const el of walkBetweenNodes(broadRanges[0].startContainer, broadRanges[0].endContainer)) {
-    if (el.classList?.contains('BRwordElement') || el.classList?.contains('BRspace') || el.classList?.contains('BRlineElement')) {
-      broadRangeWordNodes.push(el);
-    }
-  }
+  const broadRangeWordNodes = Array.from(genFilter(treeWalkRange(broadRanges[0], 'text'), isBRVisibleTextNode));
 
   // At which point the quote should now be unambiguous!
+  // FIXME: Alas no, it is ambiguous ; need to likely extract prefix and suffix separately?
   const exactRanges = findRangeForRegExp(
-    textFragment.toRegExp({ normalize, context: false }),
+    textFragment.toRegExp({ context: false }),
     broadRanges[0],
     broadRangeWordNodes,
-    { normalize },
+    { normalize: replaceTextFragmentDelimiters },
   );
   if (!exactRanges) {
     throw new Error("Could not find quote in page");
@@ -986,6 +1048,14 @@ export function renderHighlight(textLayer, textFragment, cssClassName = null) {
   });
 }
 
+/**
+ * @param {Text} node
+ */
+export function isBRVisibleTextNode(node) {
+  // Exclude the duplicated spaces between words for MS Edge
+  return !node.previousElementSibling?.classList.contains("BRspace");
+}
+
 /**
  * Given a Range, wraps its text contents in one or more <mark> elements.
  * <mark> elements can't cross block boundaries, so this function walks the
@@ -1171,39 +1241,33 @@ export class BookReaderTextFragment {
     });
   }
 
-  /**
-   * Extract and parse a text fragment from a URL string containing a `text=` parameter.
-   * @param {string} urlString
-   * @param {import('@/src/BookReader/BookModel.js').BookModel} book
-   * @param {number} fallbackPageIndex A fallback page index to use if the text
-   * fragment does not specify a page number or page index.
-   * @returns {BookReaderTextFragment|null}
-   */
-  static fromUrl(urlString, book, fallbackPageIndex) {
-    // Can't parse with eg new URLSearchParams since the text fragment format includes unencoded
-    // commas and colons, so need to do a regex match to extract the text fragment string
-    const textMatch = urlString.match(/[&?#]?text=([^&]*)/);
-    if (!textMatch) return null;
-    return BookReaderTextFragment.fromString(textMatch[1], book, fallbackPageIndex);
-  }
 
   /**
    * Outputs a url-safe string serialization of the text fragment, that's a variation of the standard
    * browser TextFragment format to include page information: `pageNumber:prefix-,quote,-suffix`
-  * If quote text is long enough, it is serialized as `quoteStart,quoteEnd`.
-    * Note the ':' and ',' separators must not and are not encoded, but
+   *
+   * If quote text is long enough, it is serialized as `quoteStart,quoteEnd`.
+   * Note the ':' and ',' separators must not and are not encoded, but
    * the pageNumber, prefix, quote/quoteStart/quoteEnd, and suffix text are encoded.
+   *
    * @returns {string}
    */
   toUrlString() {
+    // When constructing to url, we can collapse the whitespace since the corresponding
+    // toRegExp method is resilient to multiple whitespace characters.
+    /** @param {string} s */
+    const normalize = s => collapseWhitespace(replaceTextFragmentDelimiters(s).trim());
+
     // First the page number or index
-    let str = this.pageNumber ? `${encodeURIComponent(this.pageNumber)}:` : `n${this.pageIndex}:`;
+    let str = this.pageNumber ? this.pageNumber : `n${this.pageIndex}`;
+    str += ':';
 
     if (this.prefix) {
-      str += `${encodeURIComponent(this.prefix)}-,`;
+      str += normalize(this.prefix);
+      str += '-,';
     }
 
-    const quote = this.quote?.trim() || null;
+    const quote = this.quote ? normalize(this.quote) : null;
     let shortenedQuoteParts = null;
     if (quote && quote.length > MAX_FULL_QUOTE_URL_CHARS) {
       const words = quote.match(/\S+/g) || [];
@@ -1217,27 +1281,33 @@ export class BookReaderTextFragment {
     }
 
     if (quote && !shortenedQuoteParts) {
-      str += encodeURIComponent(quote);
+      str += quote;
     } else if (shortenedQuoteParts) {
-      str += `${encodeURIComponent(shortenedQuoteParts.quoteStart)},${encodeURIComponent(shortenedQuoteParts.quoteEnd)}`;
+      str += `${shortenedQuoteParts.quoteStart},${shortenedQuoteParts.quoteEnd}`;
     } else if (this.quoteStart && this.quoteEnd) {
-      str += `${encodeURIComponent(this.quoteStart)},${encodeURIComponent(this.quoteEnd)}`;
+      str += `${this.quoteStart},${this.quoteEnd}`;
     } else {
       throw new Error('Text fragment requires either a quote or quoteStart/quoteEnd');
     }
 
     if (this.suffix) {
-      str += `,-${encodeURIComponent(this.suffix)}`;
+      str += ',-';
+      str += normalize(this.suffix);
     }
-    return str;
+
+    return encodeURIComponent(str)
+      // Bring back the delimiters so it's easier to read, but note not necessary.
+      // Note hyphens are not encoded by encodeURIComponent, so no need to replace them
+      .replace(/%2C/g, ',')
+      .replace(/%3A/g, ':');
   }
 
   /**
    * Build a regex that matches this quote payload.
-   * @param {{ normalize?: function(string): string, context?: boolean }} [options]
+   * @param {{ context?: boolean }} [options]
    * @returns {RegExp}
    */
-  toRegExp({ normalize = (s) => s, context = false } = {}) {
+  toRegExp({ context = false } = {}) {
     /** @type {[String] | [String, String]} */
     const quotes = this.quote ? [this.quote] : [this.quoteStart, this.quoteEnd];
 
@@ -1246,12 +1316,16 @@ export class BookReaderTextFragment {
       if (this.suffix) quotes[quotes.length - 1] = quotes[quotes.length - 1] + ' ' + this.suffix;
     }
 
+    // Make it resilient to extra whitespace
+    /** @param {String} quote */
+    const quoteToRegExpString = (quote) => RegExp.escape(replaceTextFragmentDelimiters(quote)).replace(/(\\x20)+/g, '\\s+');
+
     if (quotes.length === 1) {
-      return new RegExp(RegExp.escape(normalize(quotes[0])), 'g');
+      return new RegExp(quoteToRegExpString(quotes[0]), 'gi');
     } else {
       return new RegExp(
-        RegExp.escape(normalize(quotes[0])) + '[\\s\\S]*?' + RegExp.escape(normalize(quotes[1])),
-        'g',
+        quoteToRegExpString(quotes[0]) + '[\\s\\S]*?' + quoteToRegExpString(quotes[1]),
+        'gi',
       );
     }
   }
@@ -1305,11 +1379,11 @@ export class BookReaderTextFragment {
 
     const CONTEXT_WORD_COUNT = 3;
 
-    const preStartText = replaceWhitespace(preStartRange.toString());
+    const preStartText = textLayerRangeToString(preStartRange);
     let prefix = getLastWords(CONTEXT_WORD_COUNT, preStartText);
     let prefixWords = countWords(prefix);
 
-    const postEndText = replaceWhitespace(postEndRange.toString());
+    const postEndText = textLayerRangeToString(postEndRange);
     let suffix = getFirstWords(CONTEXT_WORD_COUNT, postEndText);
     let suffixWords = countWords(suffix);
 
@@ -1325,8 +1399,7 @@ export class BookReaderTextFragment {
       prefixWords = countWords(prefix);
     }
 
-    // Guarantee that all whitespace is replaced with just one space and that the first/last word of the highlight is not a space
-    const quote = replaceWhitespace(fullQuoteRange.toString()).trim();
+    const quote = textLayerRangeToString(fullQuoteRange);
     const pageContainerEl = startTextNode.parentElement.closest(".BRpagecontainer");
 
     return new BookReaderTextFragment({