@internetarchive/bookreader 5.0.0-115 → 5.0.0-117

package/src/util/TextSelectionManager.js

@@ -7,7 +7,9 @@ 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 '@internetarchive/icon-ellipses';
 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;
@@ -247,8 +249,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 +269,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) {
@@ -408,6 +413,9 @@ export class BRSelectMenuOption extends LitElement {
     if (this.icon === 'edit-pencil') {
       return html`<ia-icon-edit-pencil class="br-select-menu__icon" aria-hidden="true"></ia-icon-edit-pencil>`;
     }
+    if (this.icon === 'ellipses') {
+      return html`<ia-icon-ellipses class="br-select-menu__icon" aria-hidden="true"></ia-icon-ellipses>`;
+    }
     return '';
   }
 
@@ -429,7 +437,9 @@ export class BRSelectMenuOption extends LitElement {
         aria-label=${ifDefined(accessibleLabel)}
       >
         ${this.renderIcon()}
-        ${hasTemporaryText ? html`
+        ${
+          !hasTemporaryText && !baseLabel ? '' :
+            hasTemporaryText ? html`
           <span class="br-select-menu__label-wrap" style="display: inline-flex; position: relative; align-items: center;">
             <span
               class="br-select-menu__label"
@@ -455,8 +465,12 @@ class BRSelectMenu extends LitElement {
   /** @type {import('../BookReader.js').default} */
   br;
 
+  /** @type {boolean} */
+  @property({type: Boolean, reflect: true})
+  showExtended = false;
+
   /** @type {BRSelectMenuOption | null} */
-  @query('#copy-link-option')
+  @query('#br-select-copy-link-option')
   copyLinkOption;
 
   @property({type: Boolean, reflect: true})
@@ -517,7 +531,7 @@ class BRSelectMenu extends LitElement {
     // Mousedown needed to prevent selection from being cleared on iOS
     return html`
       <br-menu-option
-        id="copy-link-option"
+        id="br-select-copy-link-option"
         @mousedown=${/** @param {MouseEvent} e */ (e) => e.preventDefault()}
         @click=${this.handleCopyLinkToHighlight}
         icon="share"
@@ -556,6 +570,19 @@ class BRSelectMenu extends LitElement {
       ></br-menu-option>
     `;
   }
+
+  renderShowMoreOption() {
+    return html`
+      <br-menu-option
+        id="br-select-more"
+        @mousedown=${/** @param {MouseEvent} e */ (e) => e.preventDefault()}
+        @click=${this.toggleExtendedMenu}
+        icon="ellipses"
+        aria-label="Show more options"
+      ></br-menu-option>
+    `;
+  }
+
   renderLocalStorageOptions() {
     return html`
       <br-menu-option
@@ -570,22 +597,35 @@ class BRSelectMenu extends LitElement {
       ></br-menu-option>`;
   }
 
-  render() {
-    // TODO change the second button to use a different icon
+  renderDefaultOptions() {
     return html`
       ${this.copyLinkToHighlightEnabled ? this.renderCopyLinkToHighlightOption() : ''}
       ${this.highlightAnnotationEnabled && !this.nodesForRemoval ? this.renderHighlightOption() : ''}
-      ${this.highlightAnnotationEnabled ? this.renderLocalStorageOptions() : ''}
       ${this.nodesForRemoval ? this.renderRemoveOption() : ''}
     `;
   }
 
+  renderExtendedOptions() {
+    return html`
+    ${this.renderDefaultOptions()}
+    ${this.renderLocalStorageOptions()}
+    `;
+  }
+
+  render() {
+    const hasMoreOptions = this.br.plugins.experiments?.isEnabled('annotateHighlight');
+    // TODO change the second button to use a different icon
+    return html`
+    ${this.showExtended ? this.renderExtendedOptions() : this.renderDefaultOptions()}
+    ${!this.showExtended && hasMoreOptions ? this.renderShowMoreOption() : ""}
+    `;
+  }
+
   /**
    * @param {MouseEvent} e
    */
   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);
@@ -595,24 +635,31 @@ 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!');
   }
 
+  /**
+   * @param {MouseEvent} e
+  */
+  toggleExtendedMenu(e) {
+    e.preventDefault();
+    this.showExtended = !this.showExtended;
+  }
+
   /**
    * Returns the closest BRtextLayer element on the page that contains the target node
    * @param {Node} node
@@ -759,12 +806,12 @@ class BRSelectMenu extends LitElement {
     this.style.left = `${left}px`;
   }
 
+  // Will always show the simplified menu when rendered after hiding
   async show() {
     if (this.br.plugins.translate?.userToggleTranslate) return;
 
     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 });
@@ -776,7 +823,7 @@ class BRSelectMenu extends LitElement {
 
   hide() {
     if (!this.open) return;
-    this.style.display = 'none';
+    this.showExtended = false;
     this.open = false;
     window.removeEventListener('scroll', this._onScroll, { capture: true });
     this.clearNodesForRemoval();
@@ -839,12 +886,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();
 }
 
 /**
@@ -861,7 +919,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`);
 
@@ -886,8 +944,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;
   });
 
@@ -897,68 +955,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
@@ -979,37 +1043,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");
@@ -1037,6 +1093,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
@@ -1222,39 +1286,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) || [];
@@ -1268,27 +1326,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];
 
@@ -1297,12 +1361,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',
       );
     }
   }
@@ -1356,11 +1424,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);
 
@@ -1376,8 +1444,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({