Use actual placeholder attribute for editable-texts

As far as I can tell, the Abstract field was the only editable-text
using a placeholder set by Fluent.

https://github.com/zotero/zotero/pull/3632#issuecomment-1919619813

chrome/content/zotero/elements/abstractBox.js

@@ -30,7 +30,7 @@
 		content = MozXULElement.parseXULToFragment(`
 			<collapsible-section data-l10n-id="section-abstract" data-pane="abstract">
 				<html:div class="body">
-					<editable-text multiline="true" data-l10n-id="abstract-field" />
+					<editable-text multiline="true" data-l10n-id="abstract-field" data-l10n-attrs="placeholder" />
 				</html:div>
 			</collapsible-section>
 		`);

chrome/content/zotero/elements/editableText.js

@@ -35,7 +35,6 @@
 			'multiline',
 			'readonly',
 			'placeholder',
-			'label',
 			'aria-label',
 			'aria-labelledby',
 			'value',
@@ -67,22 +66,12 @@
 			this.toggleAttribute('readonly', readOnly);
 		}
 
-		// Fluent won't set placeholder on an editable-text for some reason, so we use the label property to store
-		// the placeholder that will be set on the child <textarea> or <input>
 		get placeholder() {
-			return this.label;
+			return this.getAttribute('placeholder') || '';
 		}
 		
 		set placeholder(placeholder) {
-			this.label = placeholder;
-		}
-		
-		get label() {
-			return this.getAttribute('label') || '';
-		}
-		
-		set label(label) {
-			this.setAttribute('label', label || '');
+			this.setAttribute('placeholder', placeholder || '');
 		}
 		
 		get ariaLabel() {
@@ -254,7 +243,7 @@
 				}
 			}
 			this._input.readOnly = this.readOnly;
-			this._input.placeholder = this.label;
+			this._input.placeholder = this.placeholder;
 			if (this.ariaLabel.length) {
 				this._input.setAttribute('aria-label', this.ariaLabel);
 			}

chrome/locale/en-US/zotero/zotero.ftl

@@ -375,7 +375,7 @@ expand-all-sections =
     .label = Expand All Sections
 
 abstract-field =
-    .label = Add abstract…
+    .placeholder = Add abstract…
 
 tagselector-search =
     .placeholder = Filter Tags