Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rich text: add button to clear unknown format #44086

Merged
merged 6 commits into from Dec 9, 2022
Merged

Rich text: add button to clear unknown format #44086

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
136c854
Rich text: add button to clear unknow format
ellatrix Sep 12, 2022
59fe78a
Only show button if relevant
ellatrix Sep 12, 2022
0141864
Clear in selected text
ellatrix Sep 12, 2022
19c5ccd
Fix tests
ellatrix Sep 13, 2022
57943dc
Show in main toolbar
ellatrix Sep 19, 2022
21274d5
Add e2e test
ellatrix Dec 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/rich-text/format-toolbar/index.js
View file
Open in desktop
Expand Up @@ -23,7 +23,7 @@ const POPOVER_PROPS = {
const FormatToolbar = () => {
return (
<>
{ [ 'bold', 'italic', 'link' ].map( ( format ) => (
{ [ 'bold', 'italic', 'link', 'unknown' ].map( ( format ) => (
<Slot
name={ `RichText.ToolbarControls.${ format }` }
key={ format }
Expand Down
2 changes: 2 additions & 0 deletions packages/format-library/src/default-formats.js
View file
Open in desktop
Expand Up @@ -12,6 +12,7 @@ import { textColor } from './text-color';
import { subscript } from './subscript';
import { superscript } from './superscript';
import { keyboard } from './keyboard';
import { unknown } from './unknown';

export default [
bold,
Expand All @@ -25,4 +26,5 @@ export default [
subscript,
superscript,
keyboard,
unknown,
];
42 changes: 42 additions & 0 deletions packages/format-library/src/unknown/index.js
View file
Open in desktop
@@ -0,0 +1,42 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { removeFormat, slice } from '@wordpress/rich-text';
import { RichTextToolbarButton } from '@wordpress/block-editor';
import { help } from '@wordpress/icons';

const name = 'core/unknown';
const title = __( 'Clear Unknown Formatting' );

export const unknown = {
name,
title,
tagName: '*',
className: null,
edit( { isActive, value, onChange, onFocus } ) {
function onClick() {
onChange( removeFormat( value, name ) );
onFocus();
}

const selectedValue = slice( value );
const hasUnknownFormats = selectedValue.formats.some( ( formats ) => {
return formats.some( ( format ) => format.type === name );
} );

if ( ! isActive && ! hasUnknownFormats ) {
return null;
}

return (
<RichTextToolbarButton
name="unknown"
icon={ help }
title={ title }
onClick={ onClick }
isActive={ true }
/>
);
},
};
23 changes: 12 additions & 11 deletions packages/rich-text/src/create.js
View file
Open in desktop
Expand Up @@ -43,7 +43,7 @@ function createEmptyValue() {
};
}

function toFormat( { type, attributes } ) {
function toFormat( { tagName, attributes } ) {
let formatType;

if ( attributes && attributes.class ) {
Expand All @@ -65,11 +65,11 @@ function toFormat( { type, attributes } ) {

if ( ! formatType ) {
formatType =
select( richTextStore ).getFormatTypeForBareElement( type );
select( richTextStore ).getFormatTypeForBareElement( tagName );
}

if ( ! formatType ) {
return attributes ? { type, attributes } : { type };
return attributes ? { type: tagName, attributes } : { type: tagName };
}

if (
Expand All @@ -80,7 +80,7 @@ function toFormat( { type, attributes } ) {
}

if ( ! attributes ) {
return { type: formatType.name };
return { type: formatType.name, tagName };
}

const registeredAttributes = {};
Expand Down Expand Up @@ -115,6 +115,7 @@ function toFormat( { type, attributes } ) {

return {
type: formatType.name,
tagName,
attributes: registeredAttributes,
unregisteredAttributes,
};
Expand Down Expand Up @@ -368,7 +369,7 @@ function createFromElement( {
// Optimise for speed.
for ( let index = 0; index < length; index++ ) {
const node = element.childNodes[ index ];
const type = node.nodeName.toLowerCase();
const tagName = node.nodeName.toLowerCase();

if ( node.nodeType === node.TEXT_NODE ) {
let filter = removeReservedCharacters;
Expand Down Expand Up @@ -398,19 +399,19 @@ function createFromElement( {
// Ignore any placeholders.
( node.getAttribute( 'data-rich-text-placeholder' ) ||
// Ignore any line breaks that are not inserted by us.
( type === 'br' &&
( tagName === 'br' &&
! node.getAttribute( 'data-rich-text-line-break' ) ) )
) {
accumulateSelection( accumulator, node, range, createEmptyValue() );
continue;
}

if ( type === 'script' ) {
if ( tagName === 'script' ) {
const value = {
formats: [ , ],
replacements: [
{
type,
type: tagName,
attributes: {
'data-rich-text-script':
node.getAttribute( 'data-rich-text-script' ) ||
Expand All @@ -425,20 +426,20 @@ function createFromElement( {
continue;
}

if ( type === 'br' ) {
if ( tagName === 'br' ) {
accumulateSelection( accumulator, node, range, createEmptyValue() );
mergePair( accumulator, create( { text: '\n' } ) );
continue;
}

const format = toFormat( {
type,
tagName,
attributes: getAttributes( { element: node } ),
} );

if (
multilineWrapperTags &&
multilineWrapperTags.indexOf( type ) !== -1
multilineWrapperTags.indexOf( tagName ) !== -1
) {
const value = createFromMultilineElement( {
element: node,
Expand Down
Empty file added packages/rich-text/src/remove-unregistered-formatting.js
View file
Open in desktop
Empty file.
12 changes: 9 additions & 3 deletions packages/rich-text/src/store/selectors.js
View file
Open in desktop
Expand Up @@ -37,9 +37,15 @@ export function getFormatType( state, name ) {
* @return {?Object} Format type.
*/
export function getFormatTypeForBareElement( state, bareElementTagName ) {
return getFormatTypes( state ).find( ( { className, tagName } ) => {
return className === null && bareElementTagName === tagName;
} );
const formatTypes = getFormatTypes( state );
return (
formatTypes.find( ( { className, tagName } ) => {
return className === null && bareElementTagName === tagName;
} ) ||
formatTypes.find( ( { className, tagName } ) => {
return className === null && '*' === tagName;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line ensures that core/unknown is detected.
Therefore, it appears that format types that don't have className cannot be newly registered, even if the tagName has not yet been registered.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed by #46798

} )
);
}

/**
Expand Down
4 changes: 4 additions & 0 deletions packages/rich-text/src/test/helpers/index.js
View file
Open in desktop
Expand Up @@ -784,6 +784,7 @@ export const specWithRegistration = [
[
{
type: 'my-plugin/link',
tagName: 'a',
attributes: {},
unregisteredAttributes: {},
},
Expand All @@ -808,6 +809,7 @@ export const specWithRegistration = [
[
{
type: 'my-plugin/link',
tagName: 'a',
attributes: {},
unregisteredAttributes: {
class: 'test',
Expand All @@ -834,6 +836,7 @@ export const specWithRegistration = [
[
{
type: 'core/link',
tagName: 'a',
attributes: {},
unregisteredAttributes: {
class: 'custom-format',
Expand Down Expand Up @@ -899,6 +902,7 @@ export const specWithRegistration = [
[
{
type: 'my-plugin/link',
tagName: 'a',
attributes: {},
unregisteredAttributes: {},
},
Expand Down
8 changes: 6 additions & 2 deletions packages/rich-text/src/to-tree.js
View file
Open in desktop
Expand Up @@ -35,6 +35,7 @@ function restoreOnAttributes( attributes, isEditableTree ) {
*
* @param {Object} $1 Named parameters.
* @param {string} $1.type The format type.
* @param {string} $1.tagName The tag name.
* @param {Object} $1.attributes The format attributes.
* @param {Object} $1.unregisteredAttributes The unregistered format
* attributes.
Expand All @@ -48,6 +49,7 @@ function restoreOnAttributes( attributes, isEditableTree ) {
*/
function fromFormat( {
type,
tagName,
attributes,
unregisteredAttributes,
object,
Expand Down Expand Up @@ -100,7 +102,7 @@ function fromFormat( {
}

return {
type: formatType.tagName,
type: formatType.tagName === '*' ? tagName : formatType.tagName,
object: formatType.object,
attributes: restoreOnAttributes( elementAttributes, isEditableTree ),
};
Expand Down Expand Up @@ -241,7 +243,8 @@ export function toTree( {
return;
}

const { type, attributes, unregisteredAttributes } = format;
const { type, tagName, attributes, unregisteredAttributes } =
format;

const boundaryClass =
isEditableTree &&
Expand All @@ -253,6 +256,7 @@ export function toTree( {
parent,
fromFormat( {
type,
tagName,
attributes,
unregisteredAttributes,
boundaryClass,
Expand Down
22 changes: 22 additions & 0 deletions test/e2e/specs/editor/plugins/format-api.spec.js
View file
Open in desktop
Expand Up @@ -34,6 +34,28 @@ test.describe( 'Using Format API', () => {
expect( content ).toBe(
`<!-- wp:paragraph -->
<p>First <a href="https://example.com" class="my-plugin-link">paragraph</a></p>
<!-- /wp:paragraph -->`
);
} );

test( 'should show unknow formatting button', async ( {
editor,
page,
} ) => {
await editor.insertBlock( {
name: 'core/paragraph',
attributes: { content: '<big>test</big>' },
} );
expect( await editor.getEditedPostContent() ).toBe(
`<!-- wp:paragraph -->
<p><big>test</big></p>
<!-- /wp:paragraph -->`
);
await page.keyboard.press( 'ArrowRight' );
await editor.clickBlockToolbarButton( 'Clear Unknown Formatting' );
expect( await editor.getEditedPostContent() ).toBe(
`<!-- wp:paragraph -->
<p>test</p>
<!-- /wp:paragraph -->`
);
} );
Expand Down