API to add custom formats to Editable

blocks/editable/format-toolbar/index.js

@@ -32,6 +32,11 @@ const FORMATTING_CONTROLS = [
 		title: __( 'Strikethrough' ),
 		format: 'strikethrough',
 	},
+	{
+		icon: 'admin-links',
+		title: __( 'Link' ),
+		format: 'link',
+	},
 ];
 
 // Default controls shown if no `enabledControls` prop provided
@@ -131,20 +136,27 @@ class FormatToolbar extends Component {
 		}
 	}
 
+	isFormatActive( format ) {
+		return this.props.formats[ format ] && this.props.formats[ format ].isActive;
+	}
+
 	render() {
-		const { formats, focusPosition, enabledControls = DEFAULT_CONTROLS } = this.props;
+		const { formats, focusPosition, enabledControls = DEFAULT_CONTROLS, customControls = [] } = this.props;
 		const { isAddingLink, isEditingLink, newLinkValue, settingsVisible, opensInNewWindow } = this.state;
 		const linkStyle = focusPosition
 			? { position: 'absolute', ...focusPosition }
 			: null;
 
-		const toolbarControls = FORMATTING_CONTROLS
+		const toolbarControls = FORMATTING_CONTROLS.concat( customControls )
 			.filter( control => enabledControls.indexOf( control.format ) !== -1 )
-			.map( ( control ) => ( {
-				...control,
-				onClick: this.toggleFormat( control.format ),
-				isActive: !! formats[ control.format ],
-			} ) );
+			.map( ( control ) => {
+				const isLink = control.format === 'link';
+				return {
+					...control,
+					onClick: isLink ? this.addLink : this.toggleFormat( control.format ),
+					isActive: this.isFormatActive( control.format ) || ( isLink && isAddingLink ),
+				};
+			} );
 
 		const linkSettings = settingsVisible && (
 			<fieldset className="blocks-format-toolbar__link-settings">
@@ -155,15 +167,6 @@ class FormatToolbar extends Component {
 			</fieldset>
 		);
 
-		if ( enabledControls.indexOf( 'link' ) !== -1 ) {
-			toolbarControls.push( {
-				icon: 'admin-links',
-				title: __( 'Link' ),
-				onClick: this.addLink,
-				isActive: isAddingLink || !! formats.link,
-			} );
-		}
-
 		return (
 			<div className="blocks-format-toolbar">
 				<Toolbar controls={ toolbarControls } />

blocks/editable/index.js

@@ -58,6 +58,19 @@ function isLinkBoundary( fragment ) {
 		fragment.childNodes[ 0 ].text[ 0 ] === '\uFEFF';
 }
 
+function getFormatProperties( formatName, parents ) {
+	switch ( formatName ) {
+		case 'link' : {
+			const anchor = find( parents, node => node.nodeName.toLowerCase() === 'a' );
+			return !! anchor ? { value: anchor.getAttribute( 'href' ) || '', target: anchor.getAttribute( 'target' ) || '', node: anchor } : {};
+		}
+		default:
+			return {};
+	}
+}
+
+const DEFAULT_FORMATS = [ 'bold', 'italic', 'strikethrough', 'link' ];
+
 export default class Editable extends Component {
 	constructor( props ) {
 		super( ...arguments );
@@ -150,6 +163,24 @@ export default class Editable extends Component {
 
 	onInit() {
 		this.updateFocus();
+		this.registerCustomFormatters();
+	}
+
+	adaptFormatter( options ) {
+		switch ( options.type ) {
+			case 'inline-style': {
+				return {
+					inline: 'span',
+					styles: { ...options.style },
+				};
+			}
+		}
+	}
+
+	registerCustomFormatters() {
+		forEach( this.props.formatters, ( formatter ) => {
+			this.editor.formatter.register( formatter.format, this.adaptFormatter( formatter ) );
+		} );
 	}
 
 	onFocus() {
@@ -480,13 +511,15 @@ export default class Editable extends Component {
 	}
 
 	onNodeChange( { parents } ) {
-		const formats = {};
-		const link = find( parents, ( node ) => node.nodeName.toLowerCase() === 'a' );
-		if ( link ) {
-			formats.link = { value: link.getAttribute( 'href' ) || '', target: link.getAttribute( 'target' ) || '', node: link };
-		}
-		const activeFormats = this.editor.formatter.matchAll( [	'bold', 'italic', 'strikethrough' ] );
-		activeFormats.forEach( ( activeFormat ) => formats[ activeFormat ] = true );
+		const formatNames = this.props.formattingControls;
+		const formats = this.editor.formatter.matchAll( formatNames ).reduce( ( accFormats, activeFormat ) => {
+			accFormats[ activeFormat ] = {
+				isActive: true,
+				...getFormatProperties( activeFormat, parents ),
+			};
+
+			return accFormats;
+		}, {} );
 
 		const focusPosition = this.getFocusPosition();
 		this.setState( { formats, focusPosition, selectedNodeId: this.state.selectedNodeId + 1 } );
@@ -556,8 +589,17 @@ export default class Editable extends Component {
 		}
 	}
 
+	componentWillReceiveProps( nextProps ) {
+		if ( 'development' === process.env.NODE_ENV ) {
+			if ( ! isEqual( this.props.formatters, nextProps.formatters ) ) {
+				// eslint-disable-next-line no-console
+				console.error( 'Formatters passed via `formatters` prop will only be registered once. Formatters can be enabled/disabled via the `formattingControls` prop.' );
+			}
+		}
+	}
+
 	isFormatActive( format ) {
-		return !! this.state.formats[ format ];
+		return this.state.formats[ format ] && this.state.formats[ format ].isActive;
 	}
 
 	removeFormat( format ) {
@@ -611,6 +653,7 @@ export default class Editable extends Component {
 			placeholder,
 			multiline: MultilineTag,
 			keepPlaceholderOnFocus = false,
+			formatters,
 		} = this.props;
 
 		// Generating a key that includes `tagName` ensures that if the tag
@@ -627,6 +670,7 @@ export default class Editable extends Component {
 				formats={ this.state.formats }
 				onChange={ this.changeFormats }
 				enabledControls={ formattingControls }
+				customControls={ formatters }
 			/>
 		);
 
@@ -669,3 +713,8 @@ export default class Editable extends Component {
 Editable.contextTypes = {
 	onUndo: noop,
 };
+
+Editable.defaultProps = {
+	formattingControls: DEFAULT_FORMATS,
+	formatters: [],
+};