@internetarchive/bookreader 5.0.0-113 → 5.0.0-115

package/src/util/TextSelectionManager.js

@@ -1,12 +1,17 @@
 // @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';
 
 const BR_HIGHLIGHTS_LOCAL_STORAGE_KEY = "BRhighlightStorage";
+const MAX_FULL_QUOTE_URL_CHARS = 80;
+const TRUNCATED_QUOTE_WORD_COUNT = 3;
 
 export class TextSelectionManager {
   options = {
@@ -52,15 +57,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();
         }
       }
@@ -162,7 +164,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();
       }
@@ -170,7 +171,6 @@ export class TextSelectionManager {
 
     $(textLayer).on("mouseup.textSelectPluginHandler", (event) => {
       this.mouseIsDown = false;
-      this.hideSelectMenu();
       textLayer.style.pointerEvents = "none";
       if (skipNextMouseup) {
         skipNextMouseup = false;
@@ -196,7 +196,6 @@ export class TextSelectionManager {
       if (event.which != 1) return;
       this.mouseIsDown = true;
       event.stopPropagation();
-      this.hideSelectMenu();
     });
 
     // Prevent page flip on click
@@ -218,7 +217,11 @@ export class TextSelectionManager {
       document.body.append(this.selectMenu);
     }
 
-    this.selectMenu.show();
+    if (this.selectMenu.open) {
+      this.selectMenu.repositionToSelection();
+    } else {
+      this.selectMenu.show();
+    }
   }
 
   hideSelectMenu() {
@@ -456,6 +459,9 @@ class BRSelectMenu extends LitElement {
   @query('#copy-link-option')
   copyLinkOption;
 
+  @property({type: Boolean, reflect: true})
+  open = false;
+
   @property({type: Boolean})
   copyLinkToHighlightEnabled = true;
 
@@ -476,6 +482,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();
@@ -484,10 +503,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"
@@ -555,8 +586,14 @@ class BRSelectMenu extends LitElement {
   async handleCopyLinkToHighlight(e) {
     e.preventDefault();
     const currentParams = this.br.readQueryString();
-    const currentSelection = window.getSelection();
-    const textFragment = BookReaderTextFragment.fromSelection(currentSelection, this.br.$('.BRpage-visible').toArray());
+    const currentSelection = /** @type {Selection} */ (window.getSelection());
+    const range = currentSelection.getRangeAt(0);
+    const textLayer = this.getNodeTextLayer(range.startContainer);
+    if (!textLayer) {
+      console.warn("No text layer found for selection");
+      return;
+    }
+    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;
@@ -579,11 +616,11 @@ class BRSelectMenu extends LitElement {
   /**
    * Returns the closest BRtextLayer element on the page that contains the target node
    * @param {Node} node
-   * @returns {HTMLElement | null}
+   * @returns {Element | null}
    */
   getNodeTextLayer(node) {
-    if (!node) return;
-    const element = 'closest' in node ? node : node.parentElement;
+    if (!node) return null;
+    const element = node instanceof Element ? node : node.parentElement;
     return element?.closest('.BRtextLayer') ?? null;
   }
 
@@ -694,31 +731,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,53 +848,62 @@ function replaceWhitespace(string) {
 }
 
 /**
- * Checks if quote matches the text content and existing range, then identifies the start and end nodes that contain the quote string.
- * @param {String} quote - The text to find
+ * Finds all regex matches within a range and returns their ranges.
+ * @param {RegExp} regex
  * @param {Range} range - the range to search in
  * @param {Node[]} textNodes - visible text nodes within the range
- * @returns {Range | undefined} Range that encompasses the quote, or undefined if no match is found
- *
- * Lightly adapted from
- * https://github.com/GoogleChromeLabs/text-fragments-polyfill/blob/abc6ed408b3f20e91d9cbda9977748459f5e3877/src/text-fragment-utils.js#L765
+ * @param {{ normalize?: function(string): string }} [options]
+ * @returns {Range[] | undefined} Range for each match, or undefined if no matches are found
  */
-export function findRangeForQuote(quote, range, textNodes) {
+export function findRangeForRegExp(regex, range, textNodes, { normalize = (s) => s } = {}) {
+  if (!textNodes.length) return undefined;
+
   const startOffset = textNodes[0] === range.startContainer ?
     range.startOffset :
     0;
-  const normalizedWholePageString = replaceWhitespace(range.toString());
-  const normalizedQuote = replaceWhitespace(quote);
-  let searchStart = 0;
-  let start;
-  let end;
-  while (searchStart < normalizedWholePageString.length) {
-    const matchedIndex = normalizedWholePageString.indexOf(normalizedQuote, searchStart);
-    if (matchedIndex === -1) return undefined;
-    const normalizedStartOffset = replaceWhitespace(textNodes[0].textContent.slice(0, startOffset)).length;
-    start = getBoundaryPointAtIndex(
-      normalizedStartOffset + matchedIndex,
-      textNodes, false);
-    end = getBoundaryPointAtIndex(
-      normalizedStartOffset + matchedIndex + normalizedQuote.length,
-      textNodes, true);
-    if (start != null && end != null) {
-      const foundRange = new Range();
-      foundRange.setStart(start.node, 0);
-      foundRange.setEnd(end.node, 1);
-      return foundRange;
+  const normalizedWholePageString = normalize(range.toString());
+  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`);
+
+  const matches = Array.from(normalizedWholePageString.matchAll(matchRegex));
+  const resultRanges = matches.map((match) => {
+    const start = getBoundaryPointAtIndex(
+      normalizedStartOffset + match.index,
+      textNodes,
+      false,
+      { normalize },
+    );
+    const end = getBoundaryPointAtIndex(
+      normalizedStartOffset + match.index + match[0].length,
+      textNodes,
+      true,
+      { normalize },
+    );
+
+    if (!start || !end) {
+      console.warn("Could not find boundary points for regex match, skipping this match", {match, start, end});
+      return undefined;
     }
-    searchStart = matchedIndex + 1;
-  }
-  return undefined;
-}
 
+    const foundRange = new Range();
+    foundRange.setStart(start.node, 0);
+    foundRange.setEnd(end.node, 1);
+    return foundRange;
+  });
+
+  const definedRanges = resultRanges.filter((matchRange) => !!matchRange);
+  if (!definedRanges?.length) return undefined;
+  return definedRanges;
+}
 
 /**
  * Uses the index that matches the quote string and normalizes the string contents to find the correct node
  * @param {Number} index
  * @param {Node[]} nodes
  * @param {boolean} isEnd
+ * @param {{ normalize?: function(string): string }} [options]
  */
-export function getBoundaryPointAtIndex(index, nodes, isEnd) {
+export function getBoundaryPointAtIndex(index, nodes, isEnd, { normalize = (s) => s } = {}) {
   let counted = 0;
   let normalizedData;
   for (let i = 0; i < nodes.length; i++) {
@@ -843,7 +912,7 @@ export function getBoundaryPointAtIndex(index, nodes, isEnd) {
       // 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 = replaceWhitespace(node.textContent);
+      if (!normalizedData) normalizedData = normalize(node.textContent);
     }
     let nodeEnd = counted + normalizedData.length;
     if (isEnd) nodeEnd += 1;
@@ -856,8 +925,8 @@ export function getBoundaryPointAtIndex(index, nodes, isEnd) {
         normalizedData.substring(normalizedOffset);
 
       let candidateSubstring = isEnd ?
-        replaceWhitespace(node.textContent.substring(0, normalizedOffset)) :
-        replaceWhitespace(node.textContent.substring(normalizedOffset));
+        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 &&
@@ -899,52 +968,54 @@ export function getBoundaryPointAtIndex(index, nodes, isEnd) {
  * https://github.com/GoogleChromeLabs/text-fragments-polyfill/blob/main/src/text-fragment-utils.js#L743
  *
  * @param {HTMLElement} textLayer
- * @param {BookReaderTextFragment} quote
+ * @param {BookReaderTextFragment} textFragment
  * @param {string | null} cssClassName optional css class to add to the highlight span element
+ * @return {Element[]} the elements that were created to highlight the text
  */
-export function renderHighlight(textLayer, quote, cssClassName = null) {
+export function renderHighlight(textLayer, textFragment, cssClassName = null) {
   // Create a range that encompasses the entire text content
   const firstPageNode = getFirstMostNode(textLayer);
   const lastPageNode = getLastMostNode(textLayer);
   const wholePageRange = new Range();
   wholePageRange.setStart(firstPageNode, 0);
   wholePageRange.setEnd(lastPageNode, lastPageNode.textContent.length);
-
-  // Convert the whole page range into a normalized string, get the index of where the stored string matches the quote
-  const convertedString = replaceWhitespace(wholePageRange.toString());
-  const convertedQuote = replaceWhitespace(quote.quote);
-  const foundStringIndex = convertedString.indexOf(convertedQuote);
-  if (foundStringIndex == -1) {
-    console.warn("Could not find quote in page:", quote.quote);
-    return;
-  }
-  const fullContext = [quote.prefix, quote.quote, quote.suffix].join(" ");
-  const convertedFullContext = replaceWhitespace(fullContext);
+  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 broadRange = findRangeForQuote(convertedFullContext, wholePageRange, pageWordNodes);
-  if (!broadRange) {
-    console.warn("Could not find quote with context in page, falling back to finding quote without context:", quote.quote);
+
+  const broadRanges = findRangeForRegExp(
+    textFragment.toRegExp({ normalize, context: true }),
+    wholePageRange,
+    pageWordNodes,
+    { normalize },
+  );
+  if (!broadRanges) {
+    console.warn("Could not find quote with context in page");
     return;
   }
 
   const broadRangeWordNodes = [];
-  for (const el of walkBetweenNodes(broadRange?.startContainer, broadRange?.endContainer)) {
+  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);
     }
   }
 
   // At which point the quote should now be unambiguous!
-  const exactRange = findRangeForQuote(quote.quote, broadRange, broadRangeWordNodes);
-  if (!exactRange) {
+  const exactRanges = findRangeForRegExp(
+    textFragment.toRegExp({ normalize, context: false }),
+    broadRanges[0],
+    broadRangeWordNodes,
+    { normalize },
+  );
+  if (!exactRanges) {
     throw new Error("Could not find quote in page");
   }
-  const startTextNode = getFirstMostNode(exactRange.startContainer);
-  const endTextNode = getFirstMostNode(exactRange.endContainer);
+  const startTextNode = getFirstMostNode(exactRanges[0].startContainer);
+  const endTextNode = getFirstMostNode(exactRanges[0].endContainer);
 
   // markRange requires the range to start and end within text nodes
   const exactRangeTextNodes = new Range();
@@ -957,11 +1028,11 @@ export function renderHighlight(textLayer, quote, cssClassName = null) {
     return;
   }
 
-  markRange(exactRangeTextNodes, () => {
+  return markRange(exactRangeTextNodes, () => {
     const mark = document.createElement("mark");
     mark.classList.add("BRhighlight");
     if (cssClassName) mark.classList.add(cssClassName);
-    if (quote.uuid) mark.classList.add(quote.uuid);
+    if (textFragment.uuid) mark.classList.add(textFragment.uuid);
     return mark;
   });
 }
@@ -1062,24 +1133,31 @@ function retrieveUUID(ele) {
  * See https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Fragment/Text_fragments
  *
  * Text fragment string format: `pageNumber:prefix-,quote,-suffix`
+ * Or for long quotes: `pageNumber:prefix-,quoteStart,quoteEnd,-suffix`
  * Note the ':' and ',' separators must not be encoded, but
- * the pageNumber, prefix, quote, and suffix text can be encoded.
+ * the pageNumber, prefix, quote/quoteStart/quoteEnd, and suffix text can be encoded.
  */
 export class BookReaderTextFragment {
   /**
    * @param {object} params
    * @param {string | null}params.prefix
-   * @param {string} params.quote
+   * @param {string | null} [params.quote]
+   * @param {string | null} [params.quoteStart]
+   * @param {string | null} [params.quoteEnd]
    * @param {string | null} params.suffix
    * @param {string | null} params.pageNumber Page number; e.g. asserted page number or the n-prefixed page index
    * @param {number} params.pageIndex Page index; e.g. zero-based index of the page
    * @param {string | null} [params.uuid] UUID for the text fragment if it has one
    */
-  constructor({ prefix, quote, suffix, pageNumber, pageIndex, uuid }) {
+  constructor({ prefix, quote, quoteStart, quoteEnd, suffix, pageNumber, pageIndex, uuid }) {
     /** @type {string|null} */
     this.prefix = prefix;
-    /** @type {string} */
-    this.quote = quote;
+    /** @type {string | null} */
+    this.quote = quote ?? null;
+    /** @type {string | null} */
+    this.quoteStart = quoteStart ?? null;
+    /** @type {string | null} */
+    this.quoteEnd = quoteEnd ?? null;
     /** @type {string|null} */
     this.suffix = suffix;
     /** @type {string|null} Page number; e.g. asserted page number or the n-prefixed page index */
@@ -1108,14 +1186,40 @@ export class BookReaderTextFragment {
     }
     const pageNumber = match[1] ? decodeURIComponent(match[1]) : null;
     const prefix = match[2] ? decodeURIComponent(match[2]) : null;
-    const quote = decodeURIComponent(match[3]);
+    const quoteRegion = match[3] || '';
+    const quoteParts = quoteRegion.split(',');
+    let quote = null;
+    let quoteStart = null;
+    let quoteEnd = null;
+
+    if (quoteParts.length === 1) {
+      quote = decodeURIComponent(quoteParts[0]);
+    } else if (quoteParts.length === 2) {
+      quoteStart = decodeURIComponent(quoteParts[0]);
+      quoteEnd = decodeURIComponent(quoteParts[1]);
+    } else {
+      throw new Error(`Invalid text fragment quote format: ${str}`);
+    }
+
     const suffix = match[4] ? decodeURIComponent(match[4]) : null;
     const pageIndex = pageNumber ? book.getPageIndex(pageNumber) : fallbackPageIndex;
     if (typeof pageIndex !== 'number') {
       throw new Error(`Could not determine page index for text fragment with page number ${pageNumber}`);
     }
 
-    return new BookReaderTextFragment({ prefix, quote, suffix, pageNumber, pageIndex });
+    if (!quote && (!quoteStart || !quoteEnd)) {
+      throw new Error(`Invalid text fragment quote format: ${str}`);
+    }
+
+    return new BookReaderTextFragment({
+      prefix,
+      quote,
+      quoteStart,
+      quoteEnd,
+      suffix,
+      pageNumber,
+      pageIndex,
+    });
   }
 
   /**
@@ -1137,8 +1241,9 @@ export class BookReaderTextFragment {
   /**
    * 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
-    * the pageNumber, prefix, quote, and suffix text are encoded.
+   * the pageNumber, prefix, quote/quoteStart/quoteEnd, and suffix text are encoded.
    * @returns {string}
    */
   toUrlString() {
@@ -1148,17 +1253,66 @@ export class BookReaderTextFragment {
     if (this.prefix) {
       str += `${encodeURIComponent(this.prefix)}-,`;
     }
-    str += encodeURIComponent(this.quote);
+
+    const quote = this.quote?.trim() || null;
+    let shortenedQuoteParts = null;
+    if (quote && quote.length > MAX_FULL_QUOTE_URL_CHARS) {
+      const words = quote.match(/\S+/g) || [];
+      if (words.length >= TRUNCATED_QUOTE_WORD_COUNT * 2) {
+        const quoteStart = getFirstWords(TRUNCATED_QUOTE_WORD_COUNT, quote);
+        const quoteEnd = getLastWords(TRUNCATED_QUOTE_WORD_COUNT, quote);
+        if (quoteStart && quoteEnd) {
+          shortenedQuoteParts = { quoteStart, quoteEnd };
+        }
+      }
+    }
+
+    if (quote && !shortenedQuoteParts) {
+      str += encodeURIComponent(quote);
+    } else if (shortenedQuoteParts) {
+      str += `${encodeURIComponent(shortenedQuoteParts.quoteStart)},${encodeURIComponent(shortenedQuoteParts.quoteEnd)}`;
+    } else if (this.quoteStart && this.quoteEnd) {
+      str += `${encodeURIComponent(this.quoteStart)},${encodeURIComponent(this.quoteEnd)}`;
+    } else {
+      throw new Error('Text fragment requires either a quote or quoteStart/quoteEnd');
+    }
+
     if (this.suffix) {
       str += `,-${encodeURIComponent(this.suffix)}`;
     }
     return str;
   }
 
+  /**
+   * Build a regex that matches this quote payload.
+   * @param {{ normalize?: function(string): string, context?: boolean }} [options]
+   * @returns {RegExp}
+   */
+  toRegExp({ normalize = (s) => s, context = false } = {}) {
+    /** @type {[String] | [String, String]} */
+    const quotes = this.quote ? [this.quote] : [this.quoteStart, this.quoteEnd];
+
+    if (context) {
+      if (this.prefix) quotes[0] = this.prefix + ' ' + quotes[0];
+      if (this.suffix) quotes[quotes.length - 1] = quotes[quotes.length - 1] + ' ' + this.suffix;
+    }
+
+    if (quotes.length === 1) {
+      return new RegExp(RegExp.escape(normalize(quotes[0])), 'g');
+    } else {
+      return new RegExp(
+        RegExp.escape(normalize(quotes[0])) + '[\\s\\S]*?' + RegExp.escape(normalize(quotes[1])),
+        'g',
+      );
+    }
+  }
+
   toJSON() {
     return {
       prefix: this.prefix,
       quote: this.quote,
+      quoteStart: this.quoteStart,
+      quoteEnd: this.quoteEnd,
       suffix: this.suffix,
       pageNumber: this.pageNumber,
       pageIndex: this.pageIndex,
@@ -1178,7 +1332,7 @@ export class BookReaderTextFragment {
   /**
    * Builds a TextFragment string from a given text selection.
    * @param {Selection} selection currently selected text, eg `document.getSelection()`
-   * @param {HTMLElement[]} contextElements elements providing context for the selection
+   * @param {Element[]} contextElements elements providing context for the selection
    * @returns {BookReaderTextFragment}
    */
   static fromSelection(selection, contextElements) {
@@ -1200,18 +1354,30 @@ export class BookReaderTextFragment {
     const lastWordOfPageEl = getLastMostNode(contextElements[contextElements.length - 1]);
     postEndRange.setEnd(lastWordOfPageEl, Math.max(0, lastWordOfPageEl.textContent.length - 1));
 
-    // prefixes/suffixes cannot contain paragraph breaks, words that are from more than one line break away should not be included
-    const prefix = getLastWords(3, preStartRange.toString())
-      .replace(/[ ]+/g, " ")
-      .trim()
-      .replace(/^[^\n]*\n/gm, "");
-    const suffix = getFirstWords(3, postEndRange.toString())
-      .replace(/[ ]+/g, " ")
-      .trim()
-      .replace(/\n[^\n]*$/gm, "");
+    const CONTEXT_WORD_COUNT = 3;
+
+    const preStartText = replaceWhitespace(preStartRange.toString());
+    let prefix = getLastWords(CONTEXT_WORD_COUNT, preStartText);
+    let prefixWords = countWords(prefix);
+
+    const postEndText = replaceWhitespace(postEndRange.toString());
+    let suffix = getFirstWords(CONTEXT_WORD_COUNT, postEndText);
+    let suffixWords = countWords(suffix);
+
+    if (prefixWords < CONTEXT_WORD_COUNT) {
+      // Ran out of words! To reduce the risk of ambiguity, try extending suffix
+      suffix = getFirstWords(2 * CONTEXT_WORD_COUNT - prefixWords, postEndText);
+      suffixWords = countWords(suffix);
+    }
+
+    if (suffixWords < CONTEXT_WORD_COUNT) {
+      // Ran out of words on the suffix side as well, try extending prefix
+      prefix = getLastWords(2 * CONTEXT_WORD_COUNT - suffixWords, preStartText);
+      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 = fullQuoteRange.toString().replace(/\s+/g, " ").trim();
+    const quote = replaceWhitespace(fullQuoteRange.toString()).trim();
     const pageContainerEl = startTextNode.parentElement.closest(".BRpagecontainer");
 
     return new BookReaderTextFragment({

package/src/util/browserSniffing.js

@@ -51,6 +51,15 @@ export function isIOS() {
   return 'ongesturestart' in window && navigator.maxTouchPoints > 0;
 }
 
+/**
+ * Checks whether the current browser is on android
+ * @param {string} [userAgent]
+ * @return {boolean}
+ */
+export function isAndroid(userAgent = navigator.userAgent) {
+  return /android/i.test(userAgent);
+}
+
 /**
  * Checks whether the current browser is Samsung Internet
  * https://stackoverflow.com/a/40684162/2317712

package/src/util/strings.js

@@ -5,6 +5,16 @@
  * supported list of filters)
  **/
 
+/**
+ * Count whitespace-delimited words in a string.
+ * @param {string} text
+ * @return {number}
+ */
+export function countWords(text) {
+  const matches = text.match(/\S+/g);
+  return matches ? matches.length : 0;
+}
+
 /**
  * @param {StringWithVars|String} template
  * @param { {[varName: string]: { toString: () => string} } } vars