From 0bdf3fe49396ce65232664f1cf4f5618c899aca5 Mon Sep 17 00:00:00 2001
From: Cyrille Savelief <csavelief@mncc.fr>
Date: Sun, 1 Mar 2020 13:39:24 +0100
Subject: [PATCH 1/4] Add the ability to set HTTP headers in order to be able
 to load PDF files from protected APIs.

---
 src/components/PDFData.vue   | 24 +++++++++++++++++++-----
 src/components/PDFViewer.vue |  2 ++
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/PDFData.vue b/src/components/PDFData.vue
index 044cba3..71a4c15 100644
--- a/src/components/PDFData.vue
+++ b/src/components/PDFData.vue
@@ -8,10 +8,20 @@ const log = debug('app:components/PDFData');
 
 import range from 'lodash/range';
 
-function getDocument(url) {
-  // Using import statement in this way allows Webpack
-  // to treat pdf.js as an async dependency so we can
-  // avoid adding it to one of the main bundles
+function getDocument(url, httpHeaders) {
+
+    // Using import statement in this way allows Webpack
+    // to treat pdf.js as an async dependency so we can
+    // avoid adding it to one of the main bundles
+
+    if (httpHeaders) {
+        return import(
+            /* webpackChunkName: 'pdfjs-dist' */
+            'pdfjs-dist/webpack').then(pdfjs => pdfjs.getDocument({
+            url: url,
+            httpHeaders: httpHeaders,
+        }));
+    }
   return import(
     /* webpackChunkName: 'pdfjs-dist' */
     'pdfjs-dist/webpack').then(pdfjs => pdfjs.getDocument(url));
@@ -40,6 +50,10 @@ export default {
       type: String,
       required: true,
     },
+    httpHeaders: {
+      type: Object,
+      required: false,
+    },
   },
 
   data() {
@@ -51,7 +65,7 @@ export default {
   watch: {
     url: {
       handler(url) {
-        getDocument(url)
+        getDocument(url, this.httpHeaders)
           .then(pdf => (this.pdf = pdf))
           .catch(response => {
             this.$emit('document-errored', {text: 'Failed to retrieve PDF', response});
diff --git a/src/components/PDFViewer.vue b/src/components/PDFViewer.vue
index d4ab149..be80408 100644
--- a/src/components/PDFViewer.vue
+++ b/src/components/PDFViewer.vue
@@ -24,6 +24,7 @@
     <PDFData
       class="pdf-viewer__main"
       :url="url"
+      :httpHeaders="httpHeaders"
       @page-count="updatePageCount"
       @page-focus="updateCurrentPage"
       @document-rendered="onDocumentRendered"
@@ -77,6 +78,7 @@ export default {
 
   props: {
     url: String,
+    httpHeaders: Object,
   },
 
   data() {

From 2098b4cddfcc004a2141c5d4c5a5eac90c1ab9d0 Mon Sep 17 00:00:00 2001
From: Cyrille Savelief <csavelief@mncc.fr>
Date: Sun, 1 Mar 2020 13:54:14 +0100
Subject: [PATCH 2/4] Add a text layer on top of the canvas.

---
 src/components/PDFDocument.vue          |   6 +-
 src/components/PDFPage.vue              |  90 +++-
 src/components/PDFViewer.vue            |   6 +-
 src/directives/findAndReplaceDOMText.js | 636 ++++++++++++++++++++++++
 4 files changed, 734 insertions(+), 4 deletions(-)
 create mode 100644 src/directives/findAndReplaceDOMText.js

diff --git a/src/components/PDFDocument.vue b/src/components/PDFDocument.vue
index 0e83e28..6f98b6a 100644
--- a/src/components/PDFDocument.vue
+++ b/src/components/PDFDocument.vue
@@ -9,7 +9,7 @@
     @pages-reset="fitWidth"
     >
     <PDFPage
-      v-bind="{scale, optimalScale, page, isPageFocused, isElementFocused}"
+      v-bind="{scale, optimalScale, page, isPageFocused, isElementFocused, selections}"
       @page-rendered="onPageRendered"
       @page-errored="onPageErrored"
       @page-focus="onPageFocused"
@@ -60,6 +60,10 @@ export default {
     isPreviewEnabled: {
       default: false,
     },
+    selections: {
+      type: Array,
+      default: []
+    },
   },
 
   computed: {
diff --git a/src/components/PDFPage.vue b/src/components/PDFPage.vue
index ce1c15f..3067dfd 100644
--- a/src/components/PDFPage.vue
+++ b/src/components/PDFPage.vue
@@ -1,5 +1,8 @@
 <template>
-  <canvas v-visible.once="drawPage" v-bind="canvasAttrs"></canvas>
+  <div>
+    <canvas ref="canvas" v-visible.once="drawPage" v-bind="canvasAttrs"></canvas>
+    <div ref="textLayer" class="textLayer"></div>
+  </div>
 </template>
 
 <script>
@@ -8,6 +11,9 @@ const log = debug('app:components/PDFPage');
 
 import {PIXEL_RATIO} from '../utils/constants';
 import visible from '../directives/visible';
+import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer'
+import 'pdfjs-dist/web/pdf_viewer.css'
+import findAndReplaceDOMText from '../directives/findAndReplaceDOMText'
 
 export default {
   name: 'PDFPage',
@@ -33,6 +39,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    selections: {
+      type: Array,
+      default: []
+    }
   },
 
   directives: {
@@ -79,8 +89,9 @@ export default {
     drawPage() {
       if (this.renderTask) return;
 
+      const self = this;
       const {viewport} = this;
-      const canvasContext = this.$el.getContext('2d');
+      const canvasContext = this.$refs.canvas.getContext('2d');
       const renderContext = {canvasContext, viewport};
 
       // PDFPageProxy#render
@@ -101,6 +112,81 @@ export default {
             text: `Failed to render page ${this.pageNumber}`,
           });
         });
+
+      this.page.getTextContent().then((textContent) => {
+
+        // console.log(textContent);
+
+        // Set the layer position
+        const pdfCanvas = self.$refs.canvas;
+        const canvasTop = pdfCanvas.offsetTop;
+        const canvasLeft = pdfCanvas.offsetLeft;
+        const canvasHeight = pdfCanvas.offsetHeight;
+        const canvasWidth = pdfCanvas.offsetWidth;
+
+        const textLayerDiv = self.$refs.textLayer;
+        textLayerDiv.style.top = canvasTop + 'px';
+        textLayerDiv.style.left = canvasLeft + 'px';
+        textLayerDiv.style.width = canvasWidth + 'px';
+        textLayerDiv.style.height = canvasHeight + 'px';
+
+        // Scale text
+        const defaultViewport = self.page.getViewport(1);
+        const newScale = canvasWidth / (defaultViewport.width * VIEWPORT_RATIO);
+        const newViewport = self.page.getViewport(newScale);
+
+        // Create new instance of TextLayerBuilder class
+        const textLayer = new TextLayerBuilder({
+          textLayerDiv: self.$refs.textLayer,
+          pageIndex: self.page.pageIndex,
+          viewport: newViewport,
+          enhanceTextSelection: true,
+        });
+
+        // Set text-fragments
+        textLayer.setTextContent(textContent);
+
+        // Render text-fragments
+        textLayer.render();
+
+        // Highlight text
+        if (self.selections.length > 0) {
+
+          const observer = new MutationObserver(function (mutations) {
+
+            if (self.$refs.textLayer.children.length > 0) {
+
+              for (let i=0; i<self.selections.length; i++) {
+                if (self.page.pageNumber === self.selections[i].page) {
+
+                  const color = self.selections[i].color;
+                  const selection = self.selections[i].text
+                          .replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+                          .replace(/(\r\n|\n|\r|\s|[\u00a0])+/g, '(\\r\\n|\\n|\\r|\\s|[\\u00a0])+');
+                  const wrapClass = 'css' + color.replace('#', '-');
+
+                  findAndReplaceDOMText(self.$refs.textLayer, {
+                    find: new RegExp(selection, 'gi'),
+                    wrap: 'em',
+                    wrapClass: wrapClass,
+                  });
+
+                  $('.' + wrapClass).css('background-color', color);
+                }
+              }
+
+              observer.disconnect();
+            }
+          });
+
+          observer.observe(self.$refs.textLayer, {
+            attributes: false,
+            childList: true,
+            characterData: false,
+            subtree: true
+          });
+        }
+      });
     },
 
     updateVisibility() {
diff --git a/src/components/PDFViewer.vue b/src/components/PDFViewer.vue
index be80408..ae68d6f 100644
--- a/src/components/PDFViewer.vue
+++ b/src/components/PDFViewer.vue
@@ -42,7 +42,7 @@
         <PDFDocument
           class="pdf-viewer__document"
           :class="{ 'preview-enabled': isPreviewEnabled }"
-          v-bind="{pages, scale, optimalScale, fit, currentPage, pageCount, isPreviewEnabled}"
+          v-bind="{pages, scale, optimalScale, fit, currentPage, pageCount, isPreviewEnabled, selections}"
           @scale-change="updateScale"
           />
       </template>
@@ -79,6 +79,10 @@ export default {
   props: {
     url: String,
     httpHeaders: Object,
+    selections: {
+      type: Array,
+      default: []
+    },
   },
 
   data() {
diff --git a/src/directives/findAndReplaceDOMText.js b/src/directives/findAndReplaceDOMText.js
new file mode 100644
index 0000000..f4c4cb9
--- /dev/null
+++ b/src/directives/findAndReplaceDOMText.js
@@ -0,0 +1,636 @@
+/**
+ * findAndReplaceDOMText v 0.4.6
+ * @author James Padolsey http://james.padolsey.com
+ * @license http://unlicense.org/UNLICENSE
+ *
+ * Matches the text of a DOM node against a regular expression
+ * and replaces each match (or node-separated portions of the match)
+ * in the specified element.
+ */
+ (function (root, factory) {
+     if (typeof module === 'object' && module.exports) {
+         // Node/CommonJS
+         module.exports = factory();
+     } else if (typeof define === 'function' && define.amd) {
+         // AMD. Register as an anonymous module.
+         define(factory);
+     } else {
+         // Browser globals
+         root.findAndReplaceDOMText = factory();
+     }
+ }(this, function factory() {
+
+	var PORTION_MODE_RETAIN = 'retain';
+	var PORTION_MODE_FIRST = 'first';
+
+	var doc = document;
+	var hasOwn = {}.hasOwnProperty;
+
+	function escapeRegExp(s) {
+		return String(s).replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');
+	}
+
+	function exposed() {
+		// Try deprecated arg signature first:
+		return deprecated.apply(null, arguments) || findAndReplaceDOMText.apply(null, arguments);
+	}
+
+	function deprecated(regex, node, replacement, captureGroup, elFilter) {
+		if ((node && !node.nodeType) && arguments.length <= 2) {
+			return false;
+		}
+		var isReplacementFunction = typeof replacement == 'function';
+
+		if (isReplacementFunction) {
+			replacement = (function(original) {
+				return function(portion, match) {
+					return original(portion.text, match.startIndex);
+				};
+			}(replacement));
+		}
+
+		// Awkward support for deprecated argument signature (<0.4.0)
+		var instance = findAndReplaceDOMText(node, {
+
+			find: regex,
+
+			wrap: isReplacementFunction ? null : replacement,
+			replace: isReplacementFunction ? replacement : '$' + (captureGroup || '&'),
+
+			prepMatch: function(m, mi) {
+
+				// Support captureGroup (a deprecated feature)
+
+				if (!m[0]) throw 'findAndReplaceDOMText cannot handle zero-length matches';
+
+				if (captureGroup > 0) {
+					var cg = m[captureGroup];
+					m.index += m[0].indexOf(cg);
+					m[0] = cg;
+				}
+
+				m.endIndex = m.index + m[0].length;
+				m.startIndex = m.index;
+				m.index = mi;
+
+				return m;
+			},
+			filterElements: elFilter
+		});
+
+		exposed.revert = function() {
+			return instance.revert();
+		};
+
+		return true;
+	}
+
+	/**
+	 * findAndReplaceDOMText
+	 *
+	 * Locates matches and replaces with replacementNode
+	 *
+	 * @param {Node} node Element or Text node to search within
+	 * @param {RegExp} options.find The regular expression to match
+	 * @param {String|Element} [options.wrap] A NodeName, or a Node to clone
+	 * @param {String} [options.wrapClass] A classname to append to the wrapping element
+	 * @param {String|Function} [options.replace='$&'] What to replace each match with
+	 * @param {Function} [options.filterElements] A Function to be called to check whether to
+	 *	process an element. (returning true = process element,
+	 *	returning false = avoid element)
+	 */
+	function findAndReplaceDOMText(node, options) {
+		return new Finder(node, options);
+	}
+
+	exposed.NON_PROSE_ELEMENTS = {
+		br:1, hr:1,
+		// Media / Source elements:
+		script:1, style:1, img:1, video:1, audio:1, canvas:1, svg:1, map:1, object:1,
+		// Input elements
+		input:1, textarea:1, select:1, option:1, optgroup: 1, button:1
+	};
+
+	exposed.NON_CONTIGUOUS_PROSE_ELEMENTS = {
+
+		// Elements that will not contain prose or block elements where we don't
+		// want prose to be matches across element borders:
+
+		// Block Elements
+		address:1, article:1, aside:1, blockquote:1, dd:1, div:1,
+		dl:1, fieldset:1, figcaption:1, figure:1, footer:1, form:1, h1:1, h2:1, h3:1,
+		h4:1, h5:1, h6:1, header:1, hgroup:1, hr:1, main:1, nav:1, noscript:1, ol:1,
+		output:1, p:1, pre:1, section:1, ul:1,
+		// Other misc. elements that are not part of continuous inline prose:
+		br:1, li: 1, summary: 1, dt:1, details:1, rp:1, rt:1, rtc:1,
+		// Media / Source elements:
+		script:1, style:1, img:1, video:1, audio:1, canvas:1, svg:1, map:1, object:1,
+		// Input elements
+		input:1, textarea:1, select:1, option:1, optgroup:1, button:1,
+		// Table related elements:
+		table:1, tbody:1, thead:1, th:1, tr:1, td:1, caption:1, col:1, tfoot:1, colgroup:1
+
+	};
+
+	exposed.NON_INLINE_PROSE = function(el) {
+		return hasOwn.call(exposed.NON_CONTIGUOUS_PROSE_ELEMENTS, el.nodeName.toLowerCase());
+	};
+
+	// Presets accessed via `options.preset` when calling findAndReplaceDOMText():
+	exposed.PRESETS = {
+		prose: {
+			forceContext: exposed.NON_INLINE_PROSE,
+			filterElements: function(el) {
+				return !hasOwn.call(exposed.NON_PROSE_ELEMENTS, el.nodeName.toLowerCase());
+			}
+		}
+	};
+
+	exposed.Finder = Finder;
+
+	/**
+	 * Finder -- encapsulates logic to find and replace.
+	 */
+	function Finder(node, options) {
+
+		var preset = options.preset && exposed.PRESETS[options.preset];
+
+		options.portionMode = options.portionMode || PORTION_MODE_RETAIN;
+
+		if (preset) {
+			for (var i in preset) {
+				if (hasOwn.call(preset, i) && !hasOwn.call(options, i)) {
+					options[i] = preset[i];
+				}
+			}
+		}
+
+		this.node = node;
+		this.options = options;
+
+		// Enable match-preparation method to be passed as option:
+		this.prepMatch = options.prepMatch || this.prepMatch;
+
+		this.reverts = [];
+
+		this.matches = this.search();
+
+		if (this.matches.length) {
+			this.processMatches();
+		}
+
+	}
+
+	Finder.prototype = {
+
+		/**
+		 * Searches for all matches that comply with the instance's 'match' option
+		 */
+		search: function() {
+
+			var match;
+			var matchIndex = 0;
+			var offset = 0;
+			var regex = this.options.find;
+			var textAggregation = this.getAggregateText();
+			var matches = [];
+			var self = this;
+
+			regex = typeof regex === 'string' ? RegExp(escapeRegExp(regex), 'g') : regex;
+
+			matchAggregation(textAggregation);
+
+			function matchAggregation(textAggregation) {
+				for (var i = 0, l = textAggregation.length; i < l; ++i) {
+
+					var text = textAggregation[i];
+
+					if (typeof text !== 'string') {
+						// Deal with nested contexts: (recursive)
+						matchAggregation(text);
+						continue;
+					}
+
+					if (regex.global) {
+						while (match = regex.exec(text)) {
+							matches.push(self.prepMatch(match, matchIndex++, offset));
+						}
+					} else {
+						if (match = text.match(regex)) {
+							matches.push(self.prepMatch(match, 0, offset));
+						}
+					}
+
+					offset += text.length;
+				}
+			}
+
+			return matches;
+
+		},
+
+		/**
+		 * Prepares a single match with useful meta info:
+		 */
+		prepMatch: function(match, matchIndex, characterOffset) {
+
+			if (!match[0]) {
+				throw new Error('findAndReplaceDOMText cannot handle zero-length matches');
+			}
+
+			match.endIndex = characterOffset + match.index + match[0].length;
+			match.startIndex = characterOffset + match.index;
+			match.index = matchIndex;
+
+			return match;
+		},
+
+		/**
+		 * Gets aggregate text within subject node
+		 */
+		getAggregateText: function() {
+
+			var elementFilter = this.options.filterElements;
+			var forceContext = this.options.forceContext;
+
+			return getText(this.node);
+
+			/**
+			 * Gets aggregate text of a node without resorting
+			 * to broken innerText/textContent
+			 */
+			function getText(node) {
+
+				if (node.nodeType === Node.TEXT_NODE) {
+					return [node.data];
+				}
+
+				if (elementFilter && !elementFilter(node)) {
+					return [];
+				}
+
+				var txt = [''];
+				var i = 0;
+
+				if (node = node.firstChild) do {
+
+					if (node.nodeType === Node.TEXT_NODE) {
+						txt[i] += node.data;
+						continue;
+					}
+
+					var innerText = getText(node);
+
+					if (
+						forceContext &&
+						node.nodeType === Node.ELEMENT_NODE &&
+						(forceContext === true || forceContext(node))
+					) {
+						txt[++i] = innerText;
+						txt[++i] = '';
+					} else {
+						if (typeof innerText[0] === 'string') {
+							// Bridge nested text-node data so that they're
+							// not considered their own contexts:
+							// I.e. ['some', ['thing']] -> ['something']
+							txt[i] += innerText.shift();
+						}
+						if (innerText.length) {
+							txt[++i] = innerText;
+							txt[++i] = '';
+						}
+					}
+				} while (node = node.nextSibling);
+
+				return txt;
+
+			}
+
+		},
+
+		/**
+		 * Steps through the target node, looking for matches, and
+		 * calling replaceFn when a match is found.
+		 */
+		processMatches: function() {
+
+			var matches = this.matches;
+			var node = this.node;
+			var elementFilter = this.options.filterElements;
+
+			var startPortion,
+				endPortion,
+				innerPortions = [],
+				curNode = node,
+				match = matches.shift(),
+				atIndex = 0, // i.e. nodeAtIndex
+				matchIndex = 0,
+				portionIndex = 0,
+				doAvoidNode,
+				nodeStack = [node];
+
+			out: while (true) {
+
+				if (curNode.nodeType === Node.TEXT_NODE) {
+
+					if (!endPortion && curNode.length + atIndex >= match.endIndex) {
+						// We've found the ending
+						// (Note that, in the case of a single portion, it'll be an
+						// endPortion, not a startPortion.)
+						endPortion = {
+							node: curNode,
+							index: portionIndex++,
+							text: curNode.data.substring(match.startIndex - atIndex, match.endIndex - atIndex),
+
+							// If it's the first match (atIndex==0) we should just return 0
+							indexInMatch: atIndex === 0 ? 0 : atIndex - match.startIndex,
+
+							indexInNode: match.startIndex - atIndex,
+							endIndexInNode: match.endIndex - atIndex,
+							isEnd: true
+						};
+
+					} else if (startPortion) {
+						// Intersecting node
+						innerPortions.push({
+							node: curNode,
+							index: portionIndex++,
+							text: curNode.data,
+							indexInMatch: atIndex - match.startIndex,
+							indexInNode: 0 // always zero for inner-portions
+						});
+					}
+
+					if (!startPortion && curNode.length + atIndex > match.startIndex) {
+						// We've found the match start
+						startPortion = {
+							node: curNode,
+							index: portionIndex++,
+							indexInMatch: 0,
+							indexInNode: match.startIndex - atIndex,
+							endIndexInNode: match.endIndex - atIndex,
+							text: curNode.data.substring(match.startIndex - atIndex, match.endIndex - atIndex)
+						};
+					}
+
+					atIndex += curNode.data.length;
+
+				}
+
+				doAvoidNode = curNode.nodeType === Node.ELEMENT_NODE && elementFilter && !elementFilter(curNode);
+
+				if (startPortion && endPortion) {
+
+					curNode = this.replaceMatch(match, startPortion, innerPortions, endPortion);
+
+					// processMatches has to return the node that replaced the endNode
+					// and then we step back so we can continue from the end of the
+					// match:
+
+					atIndex -= (endPortion.node.data.length - endPortion.endIndexInNode);
+
+					startPortion = null;
+					endPortion = null;
+					innerPortions = [];
+					match = matches.shift();
+					portionIndex = 0;
+					matchIndex++;
+
+					if (!match) {
+						break; // no more matches
+					}
+
+				} else if (
+					!doAvoidNode &&
+					(curNode.firstChild || curNode.nextSibling)
+				) {
+					// Move down or forward:
+					if (curNode.firstChild) {
+						nodeStack.push(curNode);
+						curNode = curNode.firstChild;
+					} else {
+						curNode = curNode.nextSibling;
+					}
+					continue;
+				}
+
+				// Move forward or up:
+				while (true) {
+					if (curNode.nextSibling) {
+						curNode = curNode.nextSibling;
+						break;
+					}
+					curNode = nodeStack.pop();
+					if (curNode === node) {
+						break out;
+					}
+				}
+
+			}
+
+		},
+
+		/**
+		 * Reverts ... TODO
+		 */
+		revert: function() {
+			// Reversion occurs backwards so as to avoid nodes subsequently
+			// replaced during the matching phase (a forward process):
+			for (var l = this.reverts.length; l--;) {
+				this.reverts[l]();
+			}
+			this.reverts = [];
+		},
+
+		prepareReplacementString: function(string, portion, match) {
+			var portionMode = this.options.portionMode;
+			if (
+				portionMode === PORTION_MODE_FIRST &&
+				portion.indexInMatch > 0
+			) {
+				return '';
+			}
+			string = string.replace(/\$(\d+|&|`|')/g, function($0, t) {
+				var replacement;
+				switch(t) {
+					case '&':
+						replacement = match[0];
+						break;
+					case '`':
+						replacement = match.input.substring(0, match.startIndex);
+						break;
+					case '\'':
+						replacement = match.input.substring(match.endIndex);
+						break;
+					default:
+						replacement = match[+t] || '';
+				}
+				return replacement;
+			});
+
+			if (portionMode === PORTION_MODE_FIRST) {
+				return string;
+			}
+
+			if (portion.isEnd) {
+				return string.substring(portion.indexInMatch);
+			}
+
+			return string.substring(portion.indexInMatch, portion.indexInMatch + portion.text.length);
+		},
+
+		getPortionReplacementNode: function(portion, match) {
+
+			var replacement = this.options.replace || '$&';
+			var wrapper = this.options.wrap;
+			var wrapperClass = this.options.wrapClass;
+
+			if (wrapper && wrapper.nodeType) {
+				// Wrapper has been provided as a stencil-node for us to clone:
+				var clone = doc.createElement('div');
+				clone.innerHTML = wrapper.outerHTML || new XMLSerializer().serializeToString(wrapper);
+				wrapper = clone.firstChild;
+			}
+
+			if (typeof replacement == 'function') {
+				replacement = replacement(portion, match);
+				if (replacement && replacement.nodeType) {
+					return replacement;
+				}
+				return doc.createTextNode(String(replacement));
+			}
+
+			var el = typeof wrapper == 'string' ? doc.createElement(wrapper) : wrapper;
+
+ 			if (el && wrapperClass) {
+				el.className = wrapperClass;
+			}
+
+			replacement = doc.createTextNode(
+				this.prepareReplacementString(
+					replacement, portion, match
+				)
+			);
+
+			if (!replacement.data) {
+				return replacement;
+			}
+
+			if (!el) {
+				return replacement;
+			}
+
+			el.appendChild(replacement);
+
+			return el;
+		},
+
+		replaceMatch: function(match, startPortion, innerPortions, endPortion) {
+
+			var matchStartNode = startPortion.node;
+			var matchEndNode = endPortion.node;
+
+			var precedingTextNode;
+			var followingTextNode;
+
+			if (matchStartNode === matchEndNode) {
+
+				var node = matchStartNode;
+
+				if (startPortion.indexInNode > 0) {
+					// Add `before` text node (before the match)
+					precedingTextNode = doc.createTextNode(node.data.substring(0, startPortion.indexInNode));
+					node.parentNode.insertBefore(precedingTextNode, node);
+				}
+
+				// Create the replacement node:
+				var newNode = this.getPortionReplacementNode(
+					endPortion,
+					match
+				);
+
+				node.parentNode.insertBefore(newNode, node);
+
+				if (endPortion.endIndexInNode < node.length) { // ?????
+					// Add `after` text node (after the match)
+					followingTextNode = doc.createTextNode(node.data.substring(endPortion.endIndexInNode));
+					node.parentNode.insertBefore(followingTextNode, node);
+				}
+
+				node.parentNode.removeChild(node);
+
+				this.reverts.push(function() {
+					if (precedingTextNode === newNode.previousSibling) {
+						precedingTextNode.parentNode.removeChild(precedingTextNode);
+					}
+					if (followingTextNode === newNode.nextSibling) {
+						followingTextNode.parentNode.removeChild(followingTextNode);
+					}
+					newNode.parentNode.replaceChild(node, newNode);
+				});
+
+				return newNode;
+
+			} else {
+				// Replace matchStartNode -> [innerMatchNodes...] -> matchEndNode (in that order)
+
+
+				precedingTextNode = doc.createTextNode(
+					matchStartNode.data.substring(0, startPortion.indexInNode)
+				);
+
+				followingTextNode = doc.createTextNode(
+					matchEndNode.data.substring(endPortion.endIndexInNode)
+				);
+
+				var firstNode = this.getPortionReplacementNode(
+					startPortion,
+					match
+				);
+
+				var innerNodes = [];
+
+				for (var i = 0, l = innerPortions.length; i < l; ++i) {
+					var portion = innerPortions[i];
+					var innerNode = this.getPortionReplacementNode(
+						portion,
+						match
+					);
+					portion.node.parentNode.replaceChild(innerNode, portion.node);
+					this.reverts.push((function(portion, innerNode) {
+						return function() {
+							innerNode.parentNode.replaceChild(portion.node, innerNode);
+						};
+					}(portion, innerNode)));
+					innerNodes.push(innerNode);
+				}
+
+				var lastNode = this.getPortionReplacementNode(
+					endPortion,
+					match
+				);
+
+				matchStartNode.parentNode.insertBefore(precedingTextNode, matchStartNode);
+				matchStartNode.parentNode.insertBefore(firstNode, matchStartNode);
+				matchStartNode.parentNode.removeChild(matchStartNode);
+
+				matchEndNode.parentNode.insertBefore(lastNode, matchEndNode);
+				matchEndNode.parentNode.insertBefore(followingTextNode, matchEndNode);
+				matchEndNode.parentNode.removeChild(matchEndNode);
+
+				this.reverts.push(function() {
+					precedingTextNode.parentNode.removeChild(precedingTextNode);
+					firstNode.parentNode.replaceChild(matchStartNode, firstNode);
+					followingTextNode.parentNode.removeChild(followingTextNode);
+					lastNode.parentNode.replaceChild(matchEndNode, lastNode);
+				});
+
+				return lastNode;
+			}
+		}
+
+	};
+
+	return exposed;
+
+}));

From 1aa2523bc75f4d7b4b523260149f8b011cf33823 Mon Sep 17 00:00:00 2001
From: Cyrille Savelief <csavelief@mncc.fr>
Date: Sun, 1 Mar 2020 14:12:39 +0100
Subject: [PATCH 3/4] Add missing import VIEWPORT_RATIO.

---
 src/components/PDFPage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/PDFPage.vue b/src/components/PDFPage.vue
index 3067dfd..05da75f 100644
--- a/src/components/PDFPage.vue
+++ b/src/components/PDFPage.vue
@@ -12,6 +12,7 @@ const log = debug('app:components/PDFPage');
 import {PIXEL_RATIO} from '../utils/constants';
 import visible from '../directives/visible';
 import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer'
+import {VIEWPORT_RATIO} from "../../../../../../pdf-viewer/utils/constants";
 import 'pdfjs-dist/web/pdf_viewer.css'
 import findAndReplaceDOMText from '../directives/findAndReplaceDOMText'
 

From 2f135568d3e6d75c8bdfb82cf9e36f37c827a8d1 Mon Sep 17 00:00:00 2001
From: Cyrille Savelief <csavelief@mncc.fr>
Date: Sun, 1 Mar 2020 23:05:41 +0100
Subject: [PATCH 4/4] Fix vue.js warnings

---
 src/components/PDFDocument.vue | 2 +-
 src/components/PDFPage.vue     | 2 +-
 src/components/PDFViewer.vue   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/PDFDocument.vue b/src/components/PDFDocument.vue
index 6f98b6a..c9b5fb5 100644
--- a/src/components/PDFDocument.vue
+++ b/src/components/PDFDocument.vue
@@ -62,7 +62,7 @@ export default {
     },
     selections: {
       type: Array,
-      default: []
+      default: () => []
     },
   },
 
diff --git a/src/components/PDFPage.vue b/src/components/PDFPage.vue
index 05da75f..53f6a3e 100644
--- a/src/components/PDFPage.vue
+++ b/src/components/PDFPage.vue
@@ -42,7 +42,7 @@ export default {
     },
     selections: {
       type: Array,
-      default: []
+      default: () => []
     }
   },
 
diff --git a/src/components/PDFViewer.vue b/src/components/PDFViewer.vue
index ae68d6f..46eeab8 100644
--- a/src/components/PDFViewer.vue
+++ b/src/components/PDFViewer.vue
@@ -81,7 +81,7 @@ export default {
     httpHeaders: Object,
     selections: {
       type: Array,
-      default: []
+      default: () => []
     },
   },