Ticket #3708: 3708_2.patch

_source/plugins/styles/plugin.js

@@ -283 +283 @@
                         // Create the element to be inserted in the DOM.
                         var collapsedElement = getElement( this, document );
 
+                        // Webkit require actual text content to move selection into
+                        // this collapsed element. (#3708)
+                        if( CKEDITOR.env.webkit )
+                        {
+                                var bogusText = collapsedElement.append(  document.createText( '\ufeff' ) );
+
+                                function onInputRemoveBogus( evt )
+                                {
+                                        document.removeListener( 'keyup', arguments.callee );
+                                        document.removeListener( 'mouseup', arguments.callee );
+
+                                        var keyCode = evt.data.getKey(),
+                                                bogusText = collapsedElement.getFirst();
+                                        // Skip control keys ( they might be keyboard shortcut),
+                                        // reschedule a check.
+                                        if ( keyCode == 17  // Ctrl
+                                                 || keyCode == 16 // Shift
+                                                 || keyCode == 18 // Alt
+                                                )
+                                        {
+                                                checkNextInput();
+                                                return;
+                                        }
+                                        // If there's more character existed inside the text node
+                                        // beside bogus, it indicate the style element is no longer
+                                        // empty.
+                                        else if( bogusText.getText().length != 1 )
+                                        {
+                                                // The bogus text has been merged with newly inputted char,
+                                                // split it out, move selection after it, then remove it.
+                                                bogusText = bogusText.split( 1 ).getPrevious();
+                                                range.moveToPosition( bogusText, CKEDITOR.POSITION_AFTER_END );
+                                                bogusText.remove();
+                                                range.select();
+                                        }
+                                        // The input is somewhere else, keep the style element empty.
+                                        else
+                                                bogusText.remove();
+                                }
+
+                                // Check after any subsequent mouse and keyboard actions, to validate if
+                                // it happened inside the style.
+                                function checkNextInput()
+                                {
+                                        document.on( 'keyup', onInputRemoveBogus );
+                                        document.on( 'mouseup', onInputRemoveBogus );
+                                }
+                                // It's possible we're now inside a key event thread,
+                                // e.g. shortcutKey, so skip this turn.
+                                window.setTimeout(  checkNextInput, 300 );
+                        }
                         // Insert the empty element into the DOM at the range position.
                         range.insertNode( collapsedElement );
 
+
                         // Place the selection right inside the empty element.
                         range.moveToPosition( collapsedElement, CKEDITOR.POSITION_BEFORE_END );