Write editor: caption is editable after reload (RSM-3359) (#48866)

Captions are saved as `<figcaption class="wp-element-caption">` and come
back from the server without `contentEditable`. The caption-button click
handler only set up an editable figcaption when one didn't already
exist, so reloaded posts had captions that were uneditable and left-
aligned (missing the `bw-figcaption` class that supplies `text-align:
center` and the placeholder).

Initialize any pre-existing figcaption at figure init time so it picks
up the same class, contentEditable, placeholder, and click-stop listener
as a freshly-created one.

Author: allilevine

projects/packages/jetpack-mu-wpcom/changelog/fix-write-editor-caption-editable-after-reload

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Write editor: caption is editable after reload (RSM-3359)

projects/packages/jetpack-mu-wpcom/src/features/write/style.css

@@ -1224,8 +1224,12 @@
 	background: rgba(33, 113, 177, 0.85);
 }
 
-/* Figcaption */
-.bw-figcaption {
+/* Figcaption.
+ * `.wp-element-caption` is the class on saved markup served by the server
+ * before JS upgrades it to `.bw-figcaption` — match both so reloaded
+ * captions don't flash left-aligned before init runs. */
+.bw-figcaption,
+.bw-content .wp-element-caption {
 	text-align: center;
 	font-size: 0.875rem;
 	color: #999;

projects/packages/jetpack-mu-wpcom/src/features/write/view.js

@@ -1128,6 +1128,21 @@ function addDeleteButtons() {
 		} );
 		controls.appendChild( altBtn );
 
+		// Captions saved by the editor come back from the server with class
+		// `wp-element-caption` and no `contentEditable`, so without this any
+		// reloaded caption would be uneditable and left-aligned (missing the
+		// `bw-figcaption` style).
+		const existingFigcaption = fig.querySelector( 'figcaption' );
+		if ( existingFigcaption ) {
+			existingFigcaption.classList.add( 'bw-figcaption' );
+			existingFigcaption.contentEditable = 'true';
+			existingFigcaption.setAttribute(
+				'data-placeholder',
+				i18n.writeCaption || 'Write a caption...'
+			);
+			existingFigcaption.addEventListener( 'click', ev => ev.stopPropagation() );
+		}
+
 		// Caption button.
 		const capBtn = document.createElement( 'button' );
 		capBtn.className = 'bw-img-caption-btn';