@internetarchive/bookreader 5.0.0-113 → 5.0.0-114

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-113",
+  "version": "5.0.0-114",
   "description": "The Internet Archive BookReader.",
   "type": "module",
   "files": [

package/src/css/_TextSelection.scss

@@ -149,6 +149,7 @@
   display: none;
   border-radius: 20px;
   background-color: #333;
+  color: white;
   color-scheme: dark;
   padding: 2px;
   overflow: hidden;
@@ -210,9 +211,14 @@
     color: transparent;
 }
 
-// Style URI TextFragments, eg #:~:text=example
+@keyframes highlightTargetFlash {
+  to { background-color: hsla(45, 80%, 66%, 1); }
+}
+
+// Style URI TextFragments, eg ?text=example
 .BRtextLayer .BRhighlight--target-text, .BRtextLayer ::target-text {
     // Similar colour to the default one used in Safari, Firefox. Note Chrome uses a purple colour
     background-color: hsla(45, 80%, 66%, 0.6);
     color: transparent;
+    animation: highlightTargetFlash 600ms 1 reverse;
 }

package/src/ia-bookreader/ia-bookreader.js

@@ -302,8 +302,11 @@ export class IaBookReader extends LitElement {
       providers.bookmarks = new BookmarksProvider({
         ...this.baseProviderConfig,
         onProviderChange: (bookmarks) => {
-          const method = Object.keys(bookmarks).length ? 'add' : 'remove';
-          this[`${method}MenuShortcut`]('bookmarks');
+          if (Object.keys(bookmarks).length) {
+            this.addMenuShortcut('bookmarks');
+          } else {
+            this.removeMenuShortcut('bookmarks');
+          }
           this.updateMenuContents();
         },
       });
@@ -463,6 +466,14 @@ export class IaBookReader extends LitElement {
     this._sortMenuShortcuts();
   }
 
+  /**
+   * @param {string} menuId
+   */
+  removeMenuShortcut(menuId) {
+    this.menuShortcuts = this.menuShortcuts.filter((m) => m.id !== menuId);
+    this._sortMenuShortcuts();
+  }
+
   /**
    * Sorts the menuShortcuts property by comparing each provider's id to
    * the id in each iteration over the shortcutOrder array.

package/src/plugins/plugin.experiments.js

@@ -52,8 +52,11 @@ export class ExperimentsPlugin extends BookReaderPlugin {
     /** Where the state of this plugin is saved in localStorage */
     localStorageKey: 'BrExperiments',
 
-    /** The experiments that should be shown in the experiments panel */
-    enabledExperiments: ['translate', 'copyLinkToHighlight'],
+    /** @type {ExperimentName[]} Experiments shown in the experiments panel */
+    availableExperiments: ['translate', 'copyLinkToHighlight'],
+
+    /** @type {ExperimentName[]} Experiments enabled by default */
+    autoEnabledExperiments: [],
   }
 
   /** @type {ExperimentModel[]} */
@@ -160,7 +163,14 @@ export class ExperimentsPlugin extends BookReaderPlugin {
       if (experiment.icon) {
         experiment.icon = experiment.buildAssetPath(experiment.icon);
       }
+
       experiment.br = this.br;
+
+      // Enable any experiments that should be automatically enabled
+      if (!experiment.enabled && this.options.autoEnabledExperiments.includes(experiment.name)) {
+        experiment.enabled = true;
+        await experiment.enable({ manual: false });
+      }
     }
 
     this._loadExperimentStates();
@@ -222,7 +232,7 @@ export class ExperimentsPlugin extends BookReaderPlugin {
       `,
       label: 'Experiments',
       component: html`<br-experiments-panel
-        .experiments="${this.allExperiments.filter(experiment => this.options.enabledExperiments.includes(experiment.name))}"
+        .experiments="${this.allExperiments.filter(experiment => this.options.availableExperiments.includes(experiment.name))}"
         @connected="${e => this._panel = e.target}"
         @toggle="${async e => {
         await this._toggleExperiment(e.detail.experiment, e.detail.enabled);

package/src/plugins/plugin.text_selection.js

@@ -36,6 +36,8 @@ export class TextSelectionPlugin extends BookReaderPlugin {
    */
   maxWordRendered = 2500;
 
+  _jumpedToHighlight = false;
+
   /**
    * @param {import('../BookReader.js').default} br
    */
@@ -71,7 +73,12 @@ export class TextSelectionPlugin extends BookReaderPlugin {
         const pageIndex = targetTextFragment.pageIndex;
         const hasTargetText = pageIndex === parseFloat(pageContainerEl.getAttribute('data-index'));
         if (hasTargetText) {
-          renderHighlight(textLayer, targetTextFragment, 'BRhighlight--target-text');
+          const markEls = renderHighlight(textLayer, targetTextFragment, 'BRhighlight--target-text');
+          // Only jump once; presumably on first page load.
+          if (!this._jumpedToHighlight) {
+            markEls[0].scrollIntoView({behavior: 'smooth', block: 'center'});
+            this._jumpedToHighlight = true;
+          }
         }
       });
     }

package/src/plugins/tts/plugin.tts.js

@@ -2,11 +2,11 @@
 
 import FestivalTTSEngine from './FestivalTTSEngine.js';
 import WebTTSEngine from './WebTTSEngine.js';
-import { toISO6391, approximateWordCount } from './utils.js';
+import { toISO6391 } from './utils.js';
 import { en as tooltips } from './tooltip_dict.js';
 import { renderBoxesInPageContainerLayer } from '../../BookReader/PageContainer.js';
 import { BookReaderPlugin } from '../../BookReaderPlugin.js';
-import { applyVariables } from '../../util/strings.js';
+import { applyVariables, countWords } from '../../util/strings.js';
 /** @typedef {import('./PageChunk.js').default} PageChunk */
 /** @typedef {import("./AbstractTTSEngine.js").default} AbstractTTSEngine */
 
@@ -291,7 +291,7 @@ export class TtsPlugin extends BookReaderPlugin {
    * @param {PageChunk} chunk
    */
   sendChunkFinishedAnalyticsEvent(chunk) {
-    this.sendAnalyticsEvent('ChunkFinished-Words', approximateWordCount(chunk.text));
+    this.sendAnalyticsEvent('ChunkFinished-Words', countWords(chunk.text));
   }
 
   /**

package/src/plugins/tts/utils.js

@@ -1,16 +1,6 @@
 // @ts-check
 import langs from 'iso-language-codes';
 
-/**
- * Use regex to approximate word count in a string
- * @param {string} text
- * @return {number}
- */
-export function approximateWordCount(text) {
-  const m = text.match(/\S+/g);
-  return m ? m.length : 0;
-}
-
 /**
  * Checks whether the current browser is on android
  * @param {string} [userAgent]

package/src/util/TextSelectionManager.js

@@ -1,4 +1,5 @@
 // @ts-check
+import { countWords } from './strings.js';
 import { SelectionObserver } from "../BookReader/utils/SelectionObserver.js";
 import { html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
@@ -7,6 +8,8 @@ import '@internetarchive/icon-share';
 import '@internetarchive/icon-edit-pencil/icon-edit-pencil.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 = {
@@ -555,8 +558,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 +588,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;
   }
 
@@ -788,53 +797,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 +861,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 +874,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 +917,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 +977,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 +1082,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 +1135,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 +1190,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 +1202,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 +1281,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 +1303,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/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