Math format: seed LaTeX input from the current selection (#79052)

Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

Author: 3 people

packages/format-library/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   Math format: seed the LaTeX input from the current selection when marking text as math, and toggle an active math object back to its LaTeX source when the button is clicked again. ([79052](https://github.com/WordPress/gutenberg/pull/79052))
+
 ## 5.48.0 (2026-06-10)
 
 ## 5.47.0 (2026-05-27)

packages/format-library/src/math/index.js

@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
-import { insertObject, useAnchor } from '@wordpress/rich-text';
+import { insert, insertObject, useAnchor } from '@wordpress/rich-text';
 import { RichTextToolbarButton } from '@wordpress/block-editor';
 import {
 	Popover,
@@ -141,12 +141,42 @@ function Edit( {
 				icon={ icon }
 				title={ title }
 				onClick={ () => {
+					// If a math object is already active, revert it to its
+					// LaTeX source so clicking the button toggles back to the
+					// exact text it was created from. Keep the restored text
+					// selected so it can be edited or re-marked right away.
+					if ( isObjectActive ) {
+						const latex =
+							activeObjectAttributes?.[ 'data-latex' ] || '';
+						const newValue = insert( value, latex );
+						newValue.start = newValue.end - latex.length;
+						onChange( newValue );
+						onFocus();
+						return;
+					}
+					// If there's a selection, seed the format with it so you
+					// can type LaTeX inline and then mark it as math.
+					const selectedText = value.text.slice(
+						value.start,
+						value.end
+					);
+					let innerHTML = '';
+					if ( selectedText && latexToMathML ) {
+						try {
+							innerHTML = latexToMathML( selectedText, {
+								displayMode: false,
+							} );
+						} catch {
+							// Leave unrendered; the popover opens with the text
+							// prefilled so the expression can be corrected.
+						}
+					}
 					const newValue = insertObject( value, {
 						type: name,
 						attributes: {
-							'data-latex': '',
+							'data-latex': selectedText,
 						},
-						innerHTML: '',
+						innerHTML,
 					} );
 					newValue.start = newValue.end - 1;
 					onChange( newValue );

test/e2e/specs/editor/various/format-library/math.spec.js

@@ -88,4 +88,62 @@ test.describe( 'Format Library - Math', () => {
 			},
 		] );
 	} );
+
+	test( 'should seed the math format from the current selection', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+
+		// Type the LaTeX as plain text, then select it.
+		await page.keyboard.type( 'equation: x^2' );
+		await pageUtils.pressKeys( 'shift+ArrowLeft', { times: 3 } );
+
+		// Mark the selection as math.
+		await editor.clickBlockToolbarButton( 'More' );
+		await page.getByRole( 'menuitem', { name: 'Math' } ).click();
+
+		// The selected text should be used as the LaTeX and render immediately.
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content:
+						'equation: <math data-latex="x^2"><semantics><msup><mi>x</mi><mn>2</mn></msup><annotation encoding="application/x-tex">x^2</annotation></semantics></math>',
+				},
+			},
+		] );
+
+		// Clicking the button again on the active object should revert it to
+		// its LaTeX source, so the round-trip lands back on the original text.
+		await editor.clickBlockToolbarButton( 'More' );
+		await page.getByRole( 'menuitem', { name: 'Math' } ).click();
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'equation: x^2',
+				},
+			},
+		] );
+
+		// The restored text stays selected, so re-marking it as math without
+		// reselecting should round-trip straight back to the math object.
+		await editor.clickBlockToolbarButton( 'More' );
+		await page.getByRole( 'menuitem', { name: 'Math' } ).click();
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content:
+						'equation: <math data-latex="x^2"><semantics><msup><mi>x</mi><mn>2</mn></msup><annotation encoding="application/x-tex">x^2</annotation></semantics></math>',
+				},
+			},
+		] );
+	} );
 } );