Ticket #6103: 6103_5.patch

_source/plugins/colorbutton/plugin.js

@@ -100 +100 @@
                                                 var colorStyle = config['colorButton_' + type + 'Style'];
 
                                                 colorStyle.childRule = type == 'back' ?
-                                                        // It's better to apply background color as the innermost style. (#3599)
-                                                        function(){ return false; } :
-                                                        // Fore color style must be applied inside links instead of around it.
-                                                        function( element ){ return element.getName() != 'a'; };
+                                                        function( element )
+                                                        {
+                                                                // It's better to apply background color as the innermost style. (#3599)
+                                                                // Except for "unstylable elements". (#6103)
+                                                                return isUnstylable( element );
+                                                        }
+                                                        :
+                                                        function( element )
+                                                        {
+                                                                // Fore color style must be applied inside links instead of around it.
+                                                                return element.getName() != 'a' || isUnstylable( element );
+                                                        };
 
+                                                if ( colorStyle.includeReadonly == undefined )
+                                                        colorStyle.includeReadonly = !editor.config.disableReadonlyStyling;
+
                                                 new CKEDITOR.style( colorStyle, { color : color } ).apply( editor.document );
                                         }
 
@@ -181 +192 @@
 
                         return output.join( '' );
                 }
+
+                function isUnstylable( ele )
+                {
+                        return ( ele.getAttribute( 'contentEditable' ) == 'false' ) || ele.getAttribute( 'data-cke-nostyle' );
+                }
         }
 });
 

_source/plugins/styles/plugin.js

@@ -353 +353 @@
                 return ( styleDefinition._ST = stylesText );
         };
 
+        // Gets the parent element which blocks the styling for an element. This
+        // can be done through read-only elements (contenteditable=false) or
+        // elements with the "data-cke-nostyle" attribute.
+        function getUnstylableParent( element )
+        {
+                var unstylable,
+                        editable;
+                
+                while ( ( element = element.getParent() ) )
+                {
+                        if ( element.getName() == 'body' )
+                                break;
+
+                        if ( element.getAttribute( 'data-cke-nostyle' ) )
+                                unstylable = element;
+                        else if ( !editable )
+                        {
+                                var contentEditable = element.getAttribute( 'contentEditable' );
+
+                                if ( contentEditable == 'false' )
+                                        unstylable = element;
+                                else if ( contentEditable == 'true' )
+                                        editable = 1;
+                        }
+                }
+
+                return unstylable;
+        }
+
         function applyInlineStyle( range )
         {
                 var document = range.document;
@@ -375 +404 @@
                 var def = this._.definition;
                 var isUnknownElement;
 
+                // Indicates that fully selected read-only elements are to be included in the styling range.
+                var includeReadonly = def.includeReadonly;
+                
+                if ( includeReadonly == undefined )
+                        includeReadonly = this._.includeReadonly;
+
                 // Get the DTD definition for the element. Defaults to "span".
                 var dtd = CKEDITOR.dtd[ elementName ] || ( isUnknownElement = true, CKEDITOR.dtd.span );
 
@@ -392 +427 @@
 
                 var styleRange;
 
+                // Check if the boundaries are inside non stylable elements.
+                var firstUnstylable = getUnstylableParent( firstNode ),
+                        lastUnstylable = getUnstylableParent( lastNode );
+
+                // If the first element can't be styled, we'll start processing right
+                // after its unstylable root.
+                if ( firstUnstylable )
+                        currentNode = firstUnstylable.getNextSourceNode( true );                        
+
+                // If the last element can't be styled, we'll stop processing on its
+                // unstylable root.
+                if ( lastUnstylable )
+                        lastNode = lastUnstylable;
+
+                // Do nothing if the current node now follows the last node to be processed.
+                if ( currentNode.getPosition( lastNode ) == CKEDITOR.POSITION_FOLLOWING )
+                        currentNode = 0;
+
                 while ( currentNode )
                 {
                         var applyStyle = false;
@@ -405 +458 @@
                         {
                                 var nodeType = currentNode.type;
                                 var nodeName = nodeType == CKEDITOR.NODE_ELEMENT ? currentNode.getName() : null;
+                                var nodeIsReadonly = nodeName && ( currentNode.getAttribute( 'contentEditable' ) == 'false' );
+                                var nodeIsNoStyle = nodeName && currentNode.getAttribute( 'data-cke-nostyle' );
 
                                 if ( nodeName && currentNode.getAttribute( '_cke_bookmark' ) )
                                 {
@@ -414 +469 @@
 
                                 // Check if the current node can be a child of the style element.
                                 if ( !nodeName || ( dtd[ nodeName ]
+                                        && !nodeIsNoStyle
+                                        && ( !nodeIsReadonly || includeReadonly )
                                         && ( currentNode.getPosition( lastNode ) | CKEDITOR.POSITION_PRECEDING | CKEDITOR.POSITION_IDENTICAL | CKEDITOR.POSITION_IS_CONTAINED ) == ( CKEDITOR.POSITION_PRECEDING + CKEDITOR.POSITION_IDENTICAL + CKEDITOR.POSITION_IS_CONTAINED )
                                         && ( !def.childRule || def.childRule( currentNode ) ) ) )
                                 {
@@ -435 +492 @@
                                                         styleRange.setStartBefore( currentNode );
                                                 }
 
-                                                // Non element nodes, or empty elements can be added
-                                                // completely to the range.
-                                                if ( nodeType == CKEDITOR.NODE_TEXT || ( nodeType == CKEDITOR.NODE_ELEMENT && !currentNode.getChildCount() ) )
+                                                // Non element nodes, readonly elements, or empty
+                                                // elements can be added completely to the range.
+                                                if ( nodeType == CKEDITOR.NODE_TEXT || nodeIsReadonly || ( nodeType == CKEDITOR.NODE_ELEMENT && !currentNode.getChildCount() ) )
                                                 {
                                                         var includedNode = currentNode;
                                                         var parentNode;
@@ -461 +518 @@
                                                         // in this style DTD, so apply the style immediately.
                                                         if ( !includedNode.$.nextSibling )
                                                                 applyStyle = true;
-
                                                 }
                                         }
                                         else
@@ -471 +527 @@
                                         applyStyle = true;
 
                                 // Get the next node to be processed.
-                                currentNode = currentNode.getNextSourceNode();
+                                currentNode = currentNode.getNextSourceNode( nodeIsNoStyle || nodeIsReadonly );
                         }
 
                         // Apply the style if we have something to which apply it.
@@ -1355 +1411 @@
                 var selection = document.getSelection(),
                         // Bookmark the range so we can re-select it after processing.
                         bookmarks = selection.createBookmarks( 1 ),
-                        ranges = selection.getRanges( 1 ),
+                        ranges = selection.getRanges(),
                         func = remove ? this.removeFromRange : this.applyToRange,
                         range;
 
@@ -1386 +1442 @@
 
         if ( doc )
         {
+                // Set the includeReadonly priv property as a backup if the it's not
+                // available in the style definition.
+                this.style._.includeReadonly = !editor.config.disableReadonlyStyling;
+
                 if ( this.state == CKEDITOR.TRISTATE_OFF )
                         this.style.apply( doc );
                 else if ( this.state == CKEDITOR.TRISTATE_ON )
@@ -1449 +1509 @@
 };
 
 /**
+ * Indicates that fully selected read-only elements will be included when
+ * applying the style (for inline styles only).
+ * @name CKEDITOR.style.includeReadonly
+ * @type Boolean
+ * @default false
+ * @since 3.5
+ */
+
+ /**
+  * Disables inline styling on read-only elements.
+  * @name CKEDITOR.config.disableReadonlyStyling
+  * @type Boolean
+  * @default false
+  * @since 3.5
+  */
+
+/**
  * The "styles definition set" to use in the editor. They will be used in the
  * styles combo and the Style selector of the div container. <br>
  * The styles may be defined in the page containing the editor, or can be