Enhance support for SVG in RichText

packages/rich-text/src/register-format-type.js

@@ -13,6 +13,7 @@ import { store as richTextStore } from './store';
  *                                       unique across all registered formats.
  * @property {string}        tagName     The HTML tag this format will wrap the
  *                                       selection with.
+ * @property {string}        [namespace] The namespace of the `tagName`.
  * @property {boolean}       interactive Whether format makes content interactive or not.
  * @property {string | null} [className] A class to match the format.
  * @property {string}        title       Name of the format.
@@ -60,6 +61,11 @@ export function registerFormatType( name, settings ) {
 		return;
 	}
 
+	if ( 'namespace' in settings && typeof settings.namespace !== 'string' ) {
+		window.console.error( 'Format namespaces must be a string.' );
+		return;
+	}
+
 	if (
 		( typeof settings.className !== 'string' ||
 			settings.className === '' ) &&

packages/rich-text/src/test/to-dom.js

@@ -4,6 +4,9 @@
 import { toDom, applyValue } from '../to-dom';
 import { createElement } from '../create-element';
 import { spec } from './helpers';
+import { OBJECT_REPLACEMENT_CHARACTER } from '../special-characters';
+import { registerFormatType } from '../register-format-type';
+import { unregisterFormatType } from '../unregister-format-type';
 
 describe( 'recordToDom', () => {
 	beforeAll( () => {
@@ -21,6 +24,44 @@ describe( 'recordToDom', () => {
 			expect( selection ).toEqual( { startPath, endPath } );
 		} );
 	} );
+
+	it( 'should use the namespace specfied by the format', () => {
+		const formatName = 'my-plugin/nom';
+		const namespace = 'http://www.w3.org/1998/Math/MathML';
+
+		registerFormatType( formatName, {
+			namespace,
+			title: 'Math',
+			tagName: 'math',
+			className: 'nom-math',
+			contentEditable: false,
+			edit() {},
+		} );
+
+		const { body } = toDom( {
+			value: {
+				formats: [ , ],
+				replacements: [
+					{
+						type: 'my-plugin/nom',
+						tagName: 'math',
+						attributes: {},
+						unregisteredAttributes: {},
+						innerHTML: '0',
+					},
+				],
+				text: OBJECT_REPLACEMENT_CHARACTER,
+			},
+		} );
+
+		unregisterFormatType( formatName );
+
+		const subject = body.firstElementChild;
+		expect( subject.outerHTML ).toBe(
+			`<math class="nom-math" contenteditable="false">0</math>`
+		);
+		expect( subject.namespaceURI ).toBe( namespace );
+	} );
 } );
 
 describe( 'applyValue', () => {

packages/rich-text/src/to-dom.js

@@ -68,7 +68,8 @@ function append( element, child ) {
 	const { type, attributes } = child;
 
 	if ( type ) {
-		child = element.ownerDocument.createElement( type );
+		const namespaceURI = child.namespace || element.namespaceURI;
+		child = element.ownerDocument.createElementNS( namespaceURI, type );
 
 		for ( const key in attributes ) {
 			child.setAttribute( key, attributes[ key ] );

packages/rich-text/src/to-tree.js

@@ -107,6 +107,7 @@ function fromFormat( {
 		type: tagName || formatType.tagName,
 		object: formatType.object,
 		attributes: restoreOnAttributes( elementAttributes, isEditableTree ),
+		namespace: formatType.namespace,
 	};
 }