Ticket #36585: 36585.3.diff

src/wp-includes/js/tinymce/plugins/wptextpattern/plugin.js

@@ -39 +39 @@
 
                 var canUndo;
                 var chars = [];
+                var contentChangeCallback = null;
 
                 tinymce.each( inlinePatterns, function( pattern ) {
                         tinymce.each( ( pattern.start + pattern.end ).split( '' ), function( c ) {
@@ -48 +49 @@
                         } );
                 } );
 
-                editor.on( 'selectionchange', function() {
-                        canUndo = null;
-                } );
-
                 editor.on( 'keydown', function( event ) {
                         if ( ( canUndo && event.keyCode === 27 /* ESCAPE */ ) || ( canUndo === 'space' && event.keyCode === VK.BACKSPACE ) ) {
                                 editor.undoManager.undo();
@@ -62 +59 @@
                         if ( event.keyCode === VK.ENTER && ! VK.modifierPressed( event ) ) {
                                 enter();
                         }
-                }, true );
 
-                editor.on( 'keyup', function( event ) {
+                        function queueContentChangeCallback( callback ) {
+                                if ( 'onselectionchange' in editor.getDoc() ) {
+                                        contentChangeCallback = callback;
+                                } else {
+                                        // Gecko doesn't support the 'selectionchange' event
+                                        setTimeout( callback, 0 );
+                                }
+                        }
+
+                        // We need to execute space() and inline() after 'keydown' because
+                        // they depend on the editor content being updated with the keypress in
+                        // question, and before 'keyup' because other keys may be pressed
+                        // before then.  So queue the callback and execute it during the
+                        // 'selectionchange' event that immediately follows the keypress.
                         if ( event.keyCode === VK.SPACEBAR && ! event.ctrlKey && ! event.metaKey && ! event.altKey ) {
-                                space();
+                                queueContentChangeCallback( space );
                         } else if ( event.keyCode > 47 && ! ( event.keyCode >= 91 && event.keyCode <= 93 ) ) {
-                                inline();
+                                queueContentChangeCallback( inline );
                         }
+                }, true );
+
+                editor.on( 'selectionchange', function( event ) {
+                        canUndo = null;
+                        if ( contentChangeCallback ) {
+                                contentChangeCallback();
+                                contentChangeCallback = null;
+                        }
                 } );
 
                 function inline() {

tests/qunit/wp-includes/js/tinymce/plugins/wptextpattern/plugin.js

@@ -6 +6 @@
                 return;
         }
 
-        function mceType(chr) {
-                var editor = tinymce.activeEditor, keyCode, charCode, evt, startElm, rng, startContainer, startOffset, textNode;
+        function mceType( chr, eventType ) {
+                var editor = tinymce.activeEditor,
+                        doKeyDown  = ! eventType || /\bkeydown\b/.test( eventType ),
+                        doKeyPress = ! eventType || /\bkeypress\b/.test( eventType ),
+                        doKeyUp    = ! eventType || /\bkeyup\b/.test( eventType ),
+                        keyCode, charCode, evt,
+                        startElm, rng, startContainer, startOffset,
+                        textNode;
 
                 function charCodeToKeyCode(charCode) {
                         var lookup = {
@@ -56 +62 @@
                 evt = evt || {keyCode: keyCode, charCode: charCode};
 
                 startElm = editor.selection.getStart();
-                fakeEvent(startElm, 'keydown', evt);
-                fakeEvent(startElm, 'keypress', evt);
+                if ( doKeyDown ) {
+                        fakeEvent( startElm, 'keydown', evt );
+                }
+                if ( doKeyPress ) {
+                        fakeEvent( startElm, 'keypress', evt );
+                }
 
-                if (!evt.isDefaultPrevented()) {
+                if ( ( doKeyDown || doKeyPress ) && ! evt.isDefaultPrevented() ) {
                         if (keyCode === 8) {
                                 if (editor.getDoc().selection) {
                                         rng = editor.getDoc().selection.createRange();
@@ -107 +117 @@
                                 rng.collapse(true);
                                 editor.selection.setRng(rng);
                         }
+                        editor.fire( 'selectionchange' );
                 }
 
-                fakeEvent(startElm, 'keyup', evt);
+                if ( doKeyUp ) {
+                        fakeEvent( startElm, 'keyup', evt );
+                }
         }
 
         function type() {
@@ -219 +232 @@
                 }, assert.async() );
         } );
 
-        QUnit.test( 'Only transform when at the cursor is at the start.', function( assert ) {
+        QUnit.test( 'Only transform when the cursor is at the start.', function( assert ) {
                 editor.setContent( '<p>* test</p>' );
                 editor.selection.setCursorLocation( editor.$( 'p' )[0].firstChild, 6 );
 
@@ -228 +241 @@
                 }, assert.async() );
         } );
 
+        QUnit.test( 'Transform when space pressed along with another key. (1)', function( assert ) {
+                var done = assert.async();
+
+                editor.setContent( '<p>*' );
+                editor.selection.setCursorLocation( editor.$( 'p' )[0].firstChild, 1 );
+
+                mceType( ' ', 'keydown,keypress' );
+                mceType( 'a', 'keydown,keypress' );
+                mceType( ' ', 'keyup' );
+                mceType( 'a', 'keyup' );
+
+                setTimeout( function() {
+                        assert.equal( editor.getContent(), '<ul>\n<li>a</li>\n</ul>' );
+                        assert.equal( editor.selection.getRng().startOffset, 1 );
+                        done();
+                } );
+        } );
+
+        QUnit.test( 'Transform when space pressed along with another key. (2)', function( assert ) {
+                var done = assert.async();
+
+                editor.setContent( '<p>*' );
+                editor.selection.setCursorLocation( editor.$( 'p' )[0].firstChild, 1 );
+
+                mceType( ' ', 'keydown,keypress' );
+                mceType( '0', 'keydown,keypress' );
+                mceType( '0', 'keyup' );
+                mceType( ' ', 'keyup' );
+
+                setTimeout( function() {
+                        assert.equal( editor.getContent(), '<ul>\n<li>0</li>\n</ul>' );
+                        assert.equal( editor.selection.getRng().startOffset, 1 );
+                        done();
+                } );
+        } );
+
         QUnit.test( 'Backspace should undo the transformation.', function( assert ) {
                 editor.setContent( '<p>test</p>' );
                 editor.selection.setCursorLocation();
@@ -309 +358 @@
                         assert.equal( editor.getContent(), '<p>test `````</p>' );
                 }, assert.async() );
         } );
+
+        QUnit.test( 'Inline: backtick pressed along with another key. (1)', function( assert ) {
+                type( '`abc', function() {
+                        mceType( '`', 'keydown,keypress' );
+                        mceType( 'a', 'keydown,keypress' );
+                        mceType( '`', 'keyup' );
+                        mceType( 'a', 'keyup' );
+                }, function() {
+                        assert.equal( editor.getContent(), '<p><code>abc</code>a</p>' );
+                        assert.equal( editor.selection.getRng().startOffset, 2 );
+                }, assert.async() );
+        } );
+
+        QUnit.test( 'Inline: backtick pressed along with another key. (2)', function( assert ) {
+                type( '`abc', function() {
+                        mceType( '`', 'keydown,keypress' );
+                        mceType( 'a', 'keydown,keypress' );
+                        mceType( 'a', 'keyup' );
+                        mceType( '`', 'keyup' );
+                }, function() {
+                        assert.equal( editor.getContent(), '<p><code>abc</code>a</p>' );
+                        assert.equal( editor.selection.getRng().startOffset, 2 );
+                }, assert.async() );
+        } );
+
 } )( window.jQuery, window.QUnit, window.tinymce, window.setTimeout );