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

fix/1273: Delete or backspace in a empty classic text block removes it #2482

Merged
merged 2 commits into from
Aug 24, 2017
Merged

fix/1273: Delete or backspace in a empty classic text block removes it #2482

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bd7bc1a
fix/1273: Delete or backspace in a empty classic text block removes it
tiny-james Aug 21, 2017
c0933be
Test for an empty TinyMCE in an efficient way
tiny-james Aug 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions blocks/library/freeform/old-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,25 @@
*/
import { Component } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { keycodes } from '@wordpress/utils';

const { BACKSPACE, DELETE } = keycodes;

function isTmceEmpty( editor ) {
// When tinyMce is empty the content seems to be:
// <p><br data-mce-bogus="1"></p>
// avoid expensive checks for large documents
const body = editor.getBody();
if ( body.childNodes > 1 ) {
Copy link
Member

Choose a reason for hiding this comment

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

Isn't childNodes a NodeList. In other words, shouldn't this be checking childNodes.length, not childNodes itself?

Copy link
Author

@BoardJames BoardJames Aug 25, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

Yes it should! Working on a fix.

Copy link
Author

Choose a reason for hiding this comment

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

PR to fix here: #2532

Copy link
Member

Choose a reason for hiding this comment

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

@EphoxJames Could editor.dom.isEmpty not be used?

Copy link
Author

@BoardJames BoardJames Aug 28, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

If I'm reading the source correctly I don't believe it would do what we want. If we called it passing in the paragraph tag of <p><br/></p> then it would return true but if we called it with the body of the editor then it would return false (effectively passing the div tag of <div><p><br/></p></div> ) because it would consider the p tag to be content.
It would also do a lot more work internally.

return false;
} else if ( body.childNodes === 0 ) {
return true;
}
if ( body.childNodes[ 0 ].childNodes > 1 ) {
return false;
}
return /^\n?$/.test( body.innerText || body.textContent );
}

export default class OldEditor extends Component {
constructor( props ) {
Expand Down Expand Up @@ -67,6 +86,15 @@ export default class OldEditor extends Component {
} );
} );

editor.on( 'keydown', ( event ) => {
if ( ( event.keyCode === BACKSPACE || event.keyCode === DELETE ) && isTmceEmpty( editor ) ) {
// delete the block
this.props.onReplace( [] );
event.preventDefault();
event.stopImmediatePropagation();
}
} );

editor.addButton( 'kitchensink', {
tooltip: __( 'More' ),
icon: 'dashicon dashicons-editor-kitchensink',
Expand Down