Ticket #7430: 7430_3.patch

_source/plugins/image/plugin.js

@@ -48 +48 @@
                                 });
                 }
 
+                function getSelectedImage( element )
+                {
+                        var selected = element || editor.getSelection().getSelectedElement();
+                        if ( selected && selected.is( 'img' ) && !selected.data( 'cke-realelement' ) && !selected.isReadOnly() )
+                                return selected;
+                }
+
                 // If the "contextmenu" plugin is loaded, register the listeners.
                 if ( editor.contextMenu )
                 {
                         editor.contextMenu.addListener( function( element, selection )
                                 {
-                                        if ( !element || !element.is( 'img' ) || element.data( 'cke-realelement' ) || element.isReadOnly() )
-                                                return null;
-
-                                        return { image : CKEDITOR.TRISTATE_OFF };
+                                        if ( getSelectedImage( element ) )
+                                                return { image : CKEDITOR.TRISTATE_OFF };
                                 });
+                }
+
+                editor.on( 'beforeCommandExec', function( evt )
+                        {
+                                var data = evt.data;
+                                var img;
+
+                                if ( /^justify(left|right)/.exec( data.name ) && ( img = getSelectedImage() ) )
+                                {
+                                        var value = data.command.value;
+                                        var align = getImageAlignment( img );
+                                        align == value ? img.removeStyle( 'float' ) : img.setStyle( 'float', value )
+
+                                        evt.cancel();
+                                }
+                        });
+
+                editor.on( 'commandState', function( evt )
+                        {
+                                var cmd = evt.data.command, img;
+                                if ( /^justify/.exec( cmd.name ) && ( img = getSelectedImage() ) )
+                                {
+                                        var value = cmd.value,
+                                                align = getImageAlignment( img );
+
+                                        evt.data.state =
+                                                ( align == value ) ? CKEDITOR.TRISTATE_ON :
+                                                ( value == 'right' || value == 'left' ) ? CKEDITOR.TRISTATE_OFF :
+                                                CKEDITOR.TRISTATE_DISABLED;
+
+                                        evt.cancel();
+                                }
+
+                        }, null, null, 10 );
+
+
+                function getImageAlignment( element )
+                {
+                        var align = element.getStyle( 'float' );
+                        if ( align == 'inherit' || align == 'none' )
+                                align = 0;
+
+                        if ( !align )
+                                align = element.getAttribute( 'align' );
+
+                        return align;
                 }
         }
 } );

_source/core/editor.js

@@ -573 +573 @@
                 },
 
                 /**
+                 * Query the state of the specified command name, optionally perform a
+                 * fresh update.
+                 *
+                 * @param {String} commandName The indentifier name of the command.
+                 * @param {Boolean} [doUpdate] If specified it fires a "commandState"
+                 *              event on editor to update the state.
+                 */
+                queryCommandState : function( commandName, doUpdate )
+                {
+                        var command = this.getCommand( commandName );
+                        
+                        if ( !doUpdate )
+                                return command.state;
+
+                        var sel = this.getSelection(),
+                                start = sel && sel.getStartElement();
+
+                        // Perform a command state update.
+                        var eventData =
+                        {
+                                name: commandName,
+                                state : -1,
+                                command: command,
+                                selection : sel,
+                                path : sel && new CKEDITOR.dom.elementPath( start )
+                        };
+
+                        this.fire( 'commandState', eventData );
+
+                        if ( eventData.state != -1 )
+                                command.setState( eventData.state );
+
+                        return command.state;
+                },
+
+                /**
                  * Executes a command associated with the editor.
                  * @param {String} commandName The indentifier name of the command.
                  * @param {Object} [data] Data to be passed to the command.

_source/plugins/justify/plugin.js

@@ -40 +40 @@
                         align = element.getStyle( 'text-align' ) || element.getAttribute( 'align' ) || '';
                 }
 
-                align && ( align = align.replace( /-moz-|-webkit-|start|auto/i, '' ) );
+                // Sometimes computed values doesn't tell.
+                align && ( align = align.replace( /(?:-(?:moz|webkit)-)?(?:start|auto)/i, '' ) );
 
                 !align && useComputedState && ( align = element.getComputedStyle( 'direction' ) == 'rtl' ? 'right' : 'left' );
 
@@ -49 +50 @@
 
         function onSelectionChange( evt )
         {
-                if ( evt.editor.readOnly )
+                var editor = evt.editor;
+                if ( editor.readOnly )
                         return;
 
-                var command = evt.editor.getCommand( this.name );
-                command.state = getState.call( this, evt.editor, evt.data.path );
-                command.fire( 'state' );
+                editor.queryCommandState( this.name, 1 );
         }
 
         function justifyCommand( editor, name, value )
@@ -234 +234 @@
                         editor.on( 'selectionChange', CKEDITOR.tools.bind( onSelectionChange, right ) );
                         editor.on( 'selectionChange', CKEDITOR.tools.bind( onSelectionChange, center ) );
                         editor.on( 'selectionChange', CKEDITOR.tools.bind( onSelectionChange, justify ) );
+                        editor.on( 'commandState', function( evt )
+                        {
+                                evt.data.state = getState.call( evt.data.command, editor, evt.data.path );
+                        } );
                         editor.on( 'dirChanged', onDirChanged );
                 },