From 5338625031460d117d09d5073de4b685b7d7be06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20Van=C2=A0Dorpe?= Date: Tue, 6 Nov 2018 16:55:12 +0100 Subject: [PATCH] Import Format API components instead of passing as props (#11545) * Import Format API components instead of passing as props * Include button title in inserter search * Simplify isResult * RichTextInserterListItem => RichTextInserterItem --- packages/editor/src/components/index.js | 7 +- .../src/components/rich-text/format-edit.js | 89 +------------------ .../editor/src/components/rich-text/index.js | 3 + .../rich-text/inserter-list-item.js | 38 ++++++++ .../src/components/rich-text/shortcut.js | 32 +++++++ .../components/rich-text/toolbar-button.js | 27 ++++++ packages/format-library/src/bold/index.js | 7 +- packages/format-library/src/code/index.js | 16 ++-- packages/format-library/src/image/index.js | 7 +- packages/format-library/src/italic/index.js | 7 +- packages/format-library/src/link/index.js | 15 ++-- .../format-library/src/strikethrough/index.js | 7 +- 12 files changed, 139 insertions(+), 116 deletions(-) create mode 100644 packages/editor/src/components/rich-text/inserter-list-item.js create mode 100644 packages/editor/src/components/rich-text/shortcut.js create mode 100644 packages/editor/src/components/rich-text/toolbar-button.js diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js index 73684795468ae5..3cce6ea3cd87a6 100644 --- a/packages/editor/src/components/index.js +++ b/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'; diff --git a/packages/editor/src/components/rich-text/format-edit.js b/packages/editor/src/components/rich-text/format-edit.js index a0c021e60e259d..7505ed1f81a3cc 100644 --- a/packages/editor/src/components/rich-text/format-edit.js +++ b/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 ( - - - - ); -} - -function FillInserterListItem( props ) { - return ( - - { ( { filterValue } ) => { - if ( filterValue && ! isResult( props, filterValue ) ) { - return null; - } - - return ; - } } - - ); -} - -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 ( - - ); - } -} const FormatEdit = ( { formatTypes, onChange, value } ) => { return ( - { 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 ) => - - } - Shortcut={ Shortcut } /> ); } ) } diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js index 685ea899e55c47..272b26b47d261a 100644 --- a/packages/editor/src/components/rich-text/index.js +++ b/packages/editor/src/components/rich-text/index.js @@ -1018,3 +1018,6 @@ RichTextContainer.Content.defaultProps = { }; export default RichTextContainer; +export { RichTextShortcut } from './shortcut'; +export { RichTextToolbarButton } from './toolbar-button'; +export { RichTextInserterItem } from './inserter-list-item'; diff --git a/packages/editor/src/components/rich-text/inserter-list-item.js b/packages/editor/src/components/rich-text/inserter-list-item.js new file mode 100644 index 00000000000000..82ff6d8b8b4469 --- /dev/null +++ b/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 ( + + { ( { filterValue } ) => { + const { keywords = [], title } = props.formatType; + + keywords.push( title, props.title ); + + if ( filterValue && ! isResult( keywords, filterValue ) ) { + return null; + } + + return ; + } } + + ); +} ); diff --git a/packages/editor/src/components/rich-text/shortcut.js b/packages/editor/src/components/rich-text/shortcut.js new file mode 100644 index 00000000000000..ade272214b6ba7 --- /dev/null +++ b/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 ( + + ); + } +} diff --git a/packages/editor/src/components/rich-text/toolbar-button.js b/packages/editor/src/components/rich-text/toolbar-button.js new file mode 100644 index 00000000000000..2febd82e717c57 --- /dev/null +++ b/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 ( + + + + ); +} diff --git a/packages/format-library/src/bold/index.js b/packages/format-library/src/bold/index.js index cf86b264fa5b7b..72c4133f4591d2 100644 --- a/packages/format-library/src/bold/index.js +++ b/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 ( - - onChange( toggleFormat( value, { type: name } ) ); return ( - - - + ); }, }; diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js index aad07328b5c2cf..01016cf7ac8ff3 100644 --- a/packages/format-library/src/image/index.js +++ b/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 ( - } title={ __( 'Inline Image' ) } onClick={ this.openModal } diff --git a/packages/format-library/src/italic/index.js b/packages/format-library/src/italic/index.js index 1da241988fadfa..6b8bd50dd4240f 100644 --- a/packages/format-library/src/italic/index.js +++ b/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 ( - - - - - - - { isActive && } - { ! isActive && onChange( toggleFormat( value, { type: name } ) ); return ( - -