From c826805bca843644f585f0251219e2f9614406a3 Mon Sep 17 00:00:00 2001
From: Abe Jellinek <jellinek@berkeley.edu>
Date: Thu, 6 Jun 2024 23:35:53 -0400
Subject: [PATCH] editable-text CE: Don't modify the DOM in sizeToContent()
 (#4214)

---
 .../content/zotero/elements/editableText.js   | 23 +++++++++++++------
 scss/elements/_editableText.scss              |  9 --------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/chrome/content/zotero/elements/editableText.js b/chrome/content/zotero/elements/editableText.js
index 19cb20cf54..d403c6718e 100644
--- a/chrome/content/zotero/elements/editableText.js
+++ b/chrome/content/zotero/elements/editableText.js
@@ -46,6 +46,17 @@
 			'max-lines'
 		];
 		
+		static get _canvas() {
+			// OffscreenCanvas returns incorrect results here
+			// Use a <canvas> that we don't actually add to the DOM
+			let canvas = document.createElement('canvas');
+			// Replace the getter with a value
+			Object.defineProperty(this, '_canvas', {
+				value: canvas
+			});
+			return canvas;
+		}
+		
 		get noWrap() {
 			return this.hasAttribute('nowrap');
 		}
@@ -151,13 +162,11 @@
 		}
 		
 		sizeToContent = () => {
-			// Add a temp span, fetch its width with current paddings and set max-width based on that
-			let span = document.createElement("span");
-			span.innerText = this.value || this.placeholder;
-			this.append(span);
-			let size = span.getBoundingClientRect();
-			this.style['max-width'] = `calc(${size.width}px)`;
-			this.querySelector("span").remove();
+			let context = this.constructor._canvas.getContext('2d');
+			let { font, paddingLeft, paddingRight, borderLeftWidth, borderRightWidth } = getComputedStyle(this._input);
+			context.font = font;
+			let text = this.value || this.placeholder;
+			this.style.maxWidth = `calc(${context.measureText(text).width}px + ${paddingLeft} + ${paddingRight} + ${borderLeftWidth} + ${borderRightWidth})`;
 		};
 		
 		attributeChangedCallback() {
diff --git a/scss/elements/_editableText.scss b/scss/elements/_editableText.scss
index fddc68cc90..01bf7a1959 100644
--- a/scss/elements/_editableText.scss
+++ b/scss/elements/_editableText.scss
@@ -30,15 +30,6 @@ editable-text {
 	display: grid;
 	scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-background);
 	
-	span {
-		visibility: hidden;
-		margin: 0;
-		border: 1px solid transparent;
-		width: fit-content;
-		white-space: pre;
-		padding: var(--editable-text-padding-block) var(--editable-text-padding-inline);
-	}
-	
 	&:not([nowrap])::after {
 		content: attr(value) ' ';
 		visibility: hidden;