Import Format API components instead of passing as props

packages/editor/src/components/index.js

@@ -19,7 +19,12 @@ export { default as InspectorControls } from './inspector-controls';
 export { default as PanelColor } from './panel-color';
 export { default as PanelColorSettings } from './panel-color-settings';
 export { default as PlainText } from './plain-text';
-export { default as RichText } from './rich-text';
+export {
+	default as RichText,
+	RichTextShortcut,
+	RichTextToolbarButton,
+	RichTextInserterItem,
+} from './rich-text';
 export { default as ServerSideRender } from './server-side-render';
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload } from './media-upload';

packages/editor/src/components/rich-text/format-edit.js

@@ -1,91 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { normalizeIconObject } from '@wordpress/blocks';
 import { withSelect } from '@wordpress/data';
-import { Component, Fragment } from '@wordpress/element';
+import { Fragment } from '@wordpress/element';
 import { getActiveFormat } from '@wordpress/rich-text';
-import { Fill, KeyboardShortcuts, ToolbarButton } from '@wordpress/components';
-import { rawShortcut, displayShortcut } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import InserterListItem from '../inserter-list-item';
-import { normalizeTerm } from '../inserter/menu';
-
-function isResult( { title, keywords = [] }, filterValue ) {
-	const normalizedSearchTerm = normalizeTerm( filterValue );
-	const matchSearch = ( string ) => normalizeTerm( string ).indexOf( normalizedSearchTerm ) !== -1;
-	return matchSearch( title ) || keywords.some( matchSearch );
-}
-
-function FillToolbarButton( { name, shortcutType, shortcutCharacter, ...props } ) {
-	let shortcut;
-	let fillName = 'RichText.ToolbarControls';
-
-	if ( name ) {
-		fillName += `.${ name }`;
-	}
-
-	if ( shortcutType && shortcutCharacter ) {
-		shortcut = displayShortcut[ shortcutType ]( shortcutCharacter );
-	}
-
-	return (
-		<Fill name={ fillName }>
-			<ToolbarButton
-				{ ...props }
-				shortcut={ shortcut }
-			/>
-		</Fill>
-	);
-}
-
-function FillInserterListItem( props ) {
-	return (
-		<Fill name="Inserter.InlineElements">
-			{ ( { filterValue } ) => {
-				if ( filterValue && ! isResult( props, filterValue ) ) {
-					return null;
-				}
-
-				return <InserterListItem { ...props } icon={ normalizeIconObject( props.icon ) } />;
-			} }
-		</Fill>
-	);
-}
-
-class Shortcut extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.onUse = this.onUse.bind( this );
-	}
-
-	onUse() {
-		this.props.onUse();
-		return false;
-	}
-
-	render() {
-		const { character, type } = this.props;
-
-		return (
-			<KeyboardShortcuts
-				bindGlobal
-				shortcuts={ {
-					[ rawShortcut[ type ]( character ) ]: this.onUse,
-				} }
-			/>
-		);
-	}
-}
 
 const FormatEdit = ( { formatTypes, onChange, value } ) => {
 	return (
 		<Fragment>
-			{ formatTypes.map( ( { name, edit: Edit, keywords } ) => {
+			{ formatTypes.map( ( { name, edit: Edit } ) => {
 				if ( ! Edit ) {
 					return null;
 				}
@@ -101,14 +24,6 @@ const FormatEdit = ( { formatTypes, onChange, value } ) => {
 						activeAttributes={ activeAttributes }
 						value={ value }
 						onChange={ onChange }
-						ToolbarButton={ FillToolbarButton }
-						InserterListItem={ ( props ) =>
-							<FillInserterListItem
-								keywords={ keywords }
-								{ ...props }
-							/>
-						}
-						Shortcut={ Shortcut }
 					/>
 				);
 			} ) }

packages/editor/src/components/rich-text/index.js

@@ -1016,3 +1016,6 @@ RichTextContainer.Content.defaultProps = {
 };
 
 export default RichTextContainer;
+export { RichTextShortcut } from './shortcut';
+export { RichTextToolbarButton } from './toolbar-button';
+export { RichTextInserterItem } from './inserter-list-item';

packages/editor/src/components/rich-text/inserter-list-item.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { normalizeIconObject } from '@wordpress/blocks';
+import { Fill } from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import InserterListItem from '../inserter-list-item';
+import { normalizeTerm } from '../inserter/menu';
+
+function isResult( keywords, filterValue ) {
+	return keywords.some( ( string ) =>
+		normalizeTerm( string ).indexOf( normalizeTerm( filterValue ) ) !== -1
+	);
+}
+
+export const RichTextInserterItem = withSelect( ( select, { name } ) => ( {
+	formatType: select( 'core/rich-text' ).getFormatType( name ),
+} ) )( ( props ) => {
+	return (
+		<Fill name="Inserter.InlineElements">
+			{ ( { filterValue } ) => {
+				const { keywords = [], title } = props.formatType;
+
+				keywords.push( title, props.title );
+
+				if ( filterValue && ! isResult( keywords, filterValue ) ) {
+					return null;
+				}
+
+				return <InserterListItem { ...props } icon={ normalizeIconObject( props.icon ) } />;
+			} }
+		</Fill>
+	);
+} );

packages/editor/src/components/rich-text/shortcut.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { KeyboardShortcuts } from '@wordpress/components';
+import { rawShortcut } from '@wordpress/keycodes';
+
+export class RichTextShortcut extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.onUse = this.onUse.bind( this );
+	}
+
+	onUse() {
+		this.props.onUse();
+		return false;
+	}
+
+	render() {
+		const { character, type } = this.props;
+
+		return (
+			<KeyboardShortcuts
+				bindGlobal
+				shortcuts={ {
+					[ rawShortcut[ type ]( character ) ]: this.onUse,
+				} }
+			/>
+		);
+	}
+}

packages/editor/src/components/rich-text/toolbar-button.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { Fill, ToolbarButton } from '@wordpress/components';
+import { displayShortcut } from '@wordpress/keycodes';
+
+export function RichTextToolbarButton( { name, shortcutType, shortcutCharacter, ...props } ) {
+	let shortcut;
+	let fillName = 'RichText.ToolbarControls';
+
+	if ( name ) {
+		fillName += `.${ name }`;
+	}
+
+	if ( shortcutType && shortcutCharacter ) {
+		shortcut = displayShortcut[ shortcutType ]( shortcutCharacter );
+	}
+
+	return (
+		<Fill name={ fillName }>
+			<ToolbarButton
+				{ ...props }
+				shortcut={ shortcut }
+			/>
+		</Fill>
+	);
+}

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

@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 import { toggleFormat } from '@wordpress/rich-text';
+import { RichTextToolbarButton, RichTextShortcut } from '@wordpress/editor';
 
 const name = 'core/bold';
 
@@ -13,17 +14,17 @@ export const bold = {
 	match: {
 		tagName: 'strong',
 	},
-	edit( { isActive, value, onChange, ToolbarButton, Shortcut } ) {
+	edit( { isActive, value, onChange } ) {
 		const onToggle = () => onChange( toggleFormat( value, { type: name } ) );
 
 		return (
 			<Fragment>
-				<Shortcut
+				<RichTextShortcut
 					type="primary"
 					character="b"
 					onUse={ onToggle }
 				/>
-				<ToolbarButton
+				<RichTextToolbarButton
 					name="bold"
 					icon="editor-bold"
 					title={ __( 'Bold' ) }

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

@@ -2,8 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Fragment } from '@wordpress/element';
 import { toggleFormat } from '@wordpress/rich-text';
+import { RichTextShortcut } from '@wordpress/editor';
 
 const name = 'core/code';
 
@@ -13,17 +13,15 @@ export const code = {
 	match: {
 		tagName: 'code',
 	},
-	edit( { value, onChange, Shortcut } ) {
+	edit( { value, onChange } ) {
 		const onToggle = () => onChange( toggleFormat( value, { type: name } ) );
 
 		return (
-			<Fragment>
-				<Shortcut
-					type="access"
-					character="x"
-					onUse={ onToggle }
-				/>
-			</Fragment>
+			<RichTextShortcut
+				type="access"
+				character="x"
+				onUse={ onToggle }
+			/>
 		);
 	},
 };

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

@@ -5,7 +5,7 @@ import { Path, SVG } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Fragment, Component } from '@wordpress/element';
 import { insertObject } from '@wordpress/rich-text';
-import { MediaUpload } from '@wordpress/editor';
+import { MediaUpload, RichTextInserterItem } from '@wordpress/editor';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
@@ -44,11 +44,12 @@ export const image = {
 		}
 
 		render() {
-			const { value, onChange, InserterListItem } = this.props;
+			const { value, onChange } = this.props;
 
 			return (
 				<Fragment>
-					<InserterListItem
+					<RichTextInserterItem
+						name={ name }
 						icon={ <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M4 16h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v9c0 1.1.9 2 2 2zM4 5h10v9H4V5zm14 9v2h4v-2h-4zM2 20h20v-2H2v2zm6.4-8.8L7 9.4 5 12h8l-2.6-3.4-2 2.6z" /></SVG> }
 						title={ __( 'Inline Image' ) }
 						onClick={ this.openModal }

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

@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 import { toggleFormat } from '@wordpress/rich-text';
+import { RichTextToolbarButton, RichTextShortcut } from '@wordpress/editor';
 
 const name = 'core/italic';
 
@@ -13,17 +14,17 @@ export const italic = {
 	match: {
 		tagName: 'em',
 	},
-	edit( { isActive, value, onChange, ToolbarButton, Shortcut } ) {
+	edit( { isActive, value, onChange } ) {
 		const onToggle = () => onChange( toggleFormat( value, { type: name } ) );
 
 		return (
 			<Fragment>
-				<Shortcut
+				<RichTextShortcut
 					type="primary"
 					character="i"
 					onUse={ onToggle }
 				/>
-				<ToolbarButton
+				<RichTextToolbarButton
 					name="italic"
 					icon="editor-italic"
 					title={ __( 'Italic' ) }