Ticket #1272: webkitFix.patch

Website/ckeditor/_source/plugins/styles/plugin.js

@@ -362 +362 @@
                         // Create the element to be inserted in the DOM.
                         var collapsedElement = getElement( this, document );
 
+                        //Handle Webkit's collapsed selection quirks
+                        if(CKEDITOR.env.webkit) {
+                                webkitFix.fixApplyStyle(collapsedElement, range);
+                        }
+
                         // Insert the empty element into the DOM at the range position.
                         range.insertNode( collapsedElement );
 
@@ -586 +591 @@
 
         function removeInlineStyle( range )
         {
+                if(CKEDITOR.env.webkit) {
+                        webkitFix.fixRemoveStyle(range, this);
+                }
                 /*
                  * Make sure our range has included all "collpased" parent inline nodes so
                  * that our operation logic can be simpler.
@@ -1371 +1379 @@
                 else
                         selection.selectBookmarks( bookmarks );
         }
+
+        // Webkit requires textual content within a selection in order to apply styles to it (#3708)
+        // webkitFix provides fixApplyStyle and fixRemoveStyle which (mostly) mitigate
+        // webkit's difficulties with styling collapsed selections.  BugzID: 1904972
+        var webkitFix = (function() {
+
+                var chBogus = '\ufeff'; //Zero-width non-breaking space.
+
+                function isControlCode(evt) {
+                        var keyCode = evt.data.getKey();
+
+                        return (
+                                evt.data.$.ctrlKey || 
+                                evt.data.$.altKey  ||
+                                $.inArray(keyCode, [
+                                        16, // Shift
+                                        17, // Ctrl
+                                        18, // Alt
+                                        20 // Caps Lock
+                                ]) !== -1
+                        );
+                }
+
+                //injectBogusNode fixes adding and removing styles from collapsed selections by injecting a bogus character into
+                //the current selection so that it is no longer collapsed.  A callback to createFxnCleanup is provided to allow
+                //the bogus-character cleanup code to be customized based on whether the style is being applied or removed.
+                //createInjectBogusNode is used to instantiate versions of the injectBogusNode function that are tailored to
+                //specific style add or remove tasks.
+                function createInjectBogusNode(fxnCleanUp) {
+                        return function(el, range) {
+                                function onInputRemoveBogus(evt) {
+                                        // Skip control keys 
+                                        if (isControlCode(evt)) {
+                                                return;
+                                        }
+
+                                        //Valid input- kill the handlers.
+                                        doc.removeListener('keydown', onInputRemoveBogus);
+                                        doc.removeListener('mouseup', onInputRemoveBogus);
+
+                                        //The rest of this work must be done inside a timeout,
+                                        //since its state should reflect whatever happens after this event finishes.
+                                        setTimeout(function() { fxnCleanUp(el, range, elBogus) }, 1);
+                                }
+
+                                var doc = range.document;
+                                var elBogus = doc.createText(chBogus);
+
+                                el.append(elBogus);
+                                doc.on('keydown', onInputRemoveBogus);
+                                doc.on('mouseup', onInputRemoveBogus);
+                        };
+                }
+
+                function safeMoveRange(range, elBogus) {
+                        try {
+                                range.moveToPosition(elBogus, CKEDITOR.POSITION_AFTER_END);
+                        } catch (e) { }
+                }
+
+                //fixRemove operates on a text range and an editing context.  If the bogusnode trick is necessary,
+                //we'll invoke injectBogusNode, otherwise we'll just let the editor proceed.
+                var fixRemove = (function() {
+                        var injectBogusNode = createInjectBogusNode(function(el, range, elBogus) {
+                                if (elBogus.getText() === chBogus) {
+                                        safeMoveRange(range, elBogus);
+                                        elBogus.remove();
+                                        if (!editor.ck.getSelection().getRanges().length) {
+                                                range.select();
+                                        }
+                                }
+                        });
+
+                        return function(range, context) {
+                                if (range.collapsed) {
+                                        //Webkit can't handle style changes to collapsed ranges.
+                                        //Let's insert a dummy node into the range and instead apply the style to that.
+                                        var el = getElement(context, range.document);
+                                        injectBogusNode(el, range);
+                                        range.insertNode(el);
+                                }
+                        }
+                } ());
+
+                //fixApply operates on an element and a selection range, and is assuming that
+                //the range is already collapsed.  It can call directly to injectBogusNode.
+                var fixApply = createInjectBogusNode(function(el, range, elBogus) {
+                        var elBogus = el.getFirst();
+                        if (!elBogus) {
+                                return;
+                        }
+
+                        // If there're characters inside the text node aside from bogus,
+                        // we saved the day! Bogus is no longer needed and can be removed.
+                        if (elBogus.getText().length !== 1) {
+                                // The bogus text has been merged with newly inputted char,  
+                                // split it out, move selection after it, then remove it.
+                                elBogus = elBogus.split(1).getPrevious();
+                                safeMoveRange(range, elBogus);
+                                elBogus.remove();
+                                range.select();
+                        }
+                        // We've felt a keypress, but the bogus element hasn't expanded.
+                        // This means that the selection has moved or we aborted the style. Kill bogus.
+                        else {
+                                elBogus.remove();
+                                if (!editor.ck.getSelection().getRanges().length) {
+                                        //If we just removed from within our range, we've lost focus.
+                                        //Reselect our range.
+                                        range.select();
+                                }
+                        }
+                });
+
+                return {
+                        fixApplyStyle: fixApply,
+                        fixRemoveStyle: fixRemove
+                };
+        } ());
 })();
 
 CKEDITOR.styleCommand = function( style )