editable-text CE: Don't modify the DOM in sizeToContent() (#4214)

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 context = this.constructor._canvas.getContext('2d');
-			let span = document.createElement("span");
+			let { font, paddingLeft, paddingRight, borderLeftWidth, borderRightWidth } = getComputedStyle(this._input);
-			span.innerText = this.value || this.placeholder;
+			context.font = font;
-			this.append(span);
+			let text = this.value || this.placeholder;
-			let size = span.getBoundingClientRect();
+			this.style.maxWidth = `calc(${context.measureText(text).width}px + ${paddingLeft} + ${paddingRight} + ${borderLeftWidth} + ${borderRightWidth})`;
-			this.style['max-width'] = `calc(${size.width}px)`;
-			this.querySelector("span").remove();
 		};
 		
 		attributeChangedCallback() {

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;