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.

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

HTML-tags of newly registered formats disappear when pasting #13292

Open
websupporter opened this Issue Jan 11, 2019 · 1 comment

Comments

Projects
None yet
3 participants
@websupporter
Copy link

websupporter commented Jan 11, 2019

Describe the bug
I registered a new format type. Lets say: <span class="great-class">. When I copy a text now into the Component, the span.great-class tags get removed:

Received HTML:
df df <span class="great-class">df</span> df df. editor.min.js:55:146144
Received plain text:
df df df df df. editor.min.js:55:146187
Processed inline HTML:
df df df df df. blocks.min.js:2:115611

To Reproduce

const {createElement} = window.wp.element;
const {registerFormatType, toggleFormat} = window.wp.richText;
const {RichTextToolbarButton} = window.wp.editor;

registerFormatType('some/type', {
    title: 'Title',
    tagName: 'span',
    className: 'great-class',
    edit({ isActive, value, onChange}) {
        const onClick = () => {
            onChange(toggleFormat(value, { type: 'some/type' }));
        };

        return (
            createElement(RichTextToolbarButton, {
                icon: 'admin-home',
                title: 'Title',
                onClick,
                isActive,
                shortcutType: 'primary',
                shortcutCharacter: '8',
            })
        )
    }
});
  1. Add this script
  2. Add a text in a RichText component
  3. Select a part of the text and click the new button in the toolbar
  4. Copy all the text in the clipboard
  5. Paste the text in a RichText component
  6. See error

Expected behavior
The new format should survive the copy/pasting

Screenshots
https://www.youtube.com/watch?v=9SiyAROa1Iw

Desktop (please complete the following information):

  • OS: Ubuntu 14.04
  • Browser Firefox
@websupporter

This comment has been minimized.

Copy link
Author

websupporter commented Jan 11, 2019

I suspect, this could be fixed by expanding the list returned by getPhrasingContentSchema() with the types we get from wp.data.select('core/rich-text').getFormatTypes()

But for <span> this might be also a problem:

if ( node.nodeName === 'SPAN' ) {
const {
fontWeight,
fontStyle,
textDecorationLine,
verticalAlign,
} = node.style;
if ( fontWeight === 'bold' || fontWeight === '700' ) {
wrap( doc.createElement( 'strong' ), node );
}
if ( fontStyle === 'italic' ) {
wrap( doc.createElement( 'em' ), node );
}
if ( textDecorationLine === 'line-through' ) {
wrap( doc.createElement( 'del' ), node );
}
if ( verticalAlign === 'super' ) {
wrap( doc.createElement( 'sup' ), node );
} else if ( verticalAlign === 'sub' ) {
wrap( doc.createElement( 'sub' ), node );
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.