WordPress.org

Make WordPress Core

Changeset 28994


Ignore:
Timestamp:
07/04/14 03:58:20 (3 years ago)
Author:
azaozz
Message:

TinyMCE: improve the way wpViews work. Add two paragraphs and capture the caret in them on clicking before/after/left/right of a view or moving the caret with the arrow keys, then show a "fake" caret.

This makes it much more "natural" to move the caret with the arrow keys and to add paragraphs before a view when it is the first element or after a view when it's last.

Props avryl, see #28595.

Location:
trunk/src/wp-includes/js
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/mce-view.js

    r28991 r28994  
    4040        render: function() { 
    4141            this.setContent( 
    42                 '<div class="toolbar">' + 
    43                     ( _.isFunction( views[ this.type ].edit ) ? '<div class="dashicons dashicons-edit edit"></div>' : '' ) + 
    44                     '<div class="dashicons dashicons-no-alt remove"></div>' + 
     42                '<p class="wpview-selection-before">\u00a0</p>' + 
     43                '<div class="wpview-body" contenteditable="false">' + 
     44                    '<div class="toolbar">' + 
     45                        ( _.isFunction( views[ this.type ].edit ) ? '<div class="dashicons dashicons-edit edit"></div>' : '' ) + 
     46                        '<div class="dashicons dashicons-no-alt remove"></div>' + 
     47                    '</div>' + 
     48                    '<div class="wpview-content wpview-type-' + this.type + '">' + 
     49                        this.getHtml() + 
     50                    '</div>' + 
     51                    ( this.overlay ? '<div class="wpview-overlay"></div>' : '' ) + 
    4552                '</div>' + 
    46                 '<div class="wpview-content">' + 
    47                     this.getHtml() + 
    48                 '</div>' + 
    49                 ( this.overlay ? '<div class="wpview-overlay"></div>' : '' ) + 
    50                 // The <ins> is used to mark the end of the wrapper div (has to be the last child node). 
    51                 // Needed when comparing the content as string for preventing extra undo levels. 
    52                 '<ins data-wpview-end="1"></ins>', 
     53                '<p class="wpview-selection-after">\u00a0</p>', 
    5354                function( self, editor, node ) { 
    5455                    $( self ).trigger( 'ready', [ editor, node ] ); 
    55                 } 
     56                }, 
     57                'wrap' 
    5658            ); 
    5759        }, 
    5860        unbind: function() {}, 
    59         setContent: function( html, callback, replace ) { 
     61        setContent: function( html, callback, option ) { 
    6062            _.each( tinymce.editors, function( editor ) { 
    6163                var self = this; 
     
    6466                    .find( '[data-wpview-text="' + this.encodedText + '"]' ) 
    6567                    .each( function ( i, element ) { 
    66                         var contentWrap = $( element ).children( '.wpview-content' ), 
     68                        var contentWrap = $( element ).find( '.wpview-content' ), 
    6769                            wrap = element; 
    6870 
    69                         if ( contentWrap.length ) { 
     71                        if ( contentWrap.length && option !== 'wrap' ) { 
    7072                            element = contentWrap = contentWrap[0]; 
    7173                        } 
    7274 
    7375                        if ( _.isString( html ) ) { 
    74                             if ( replace ) { 
     76                            if ( option === 'replace' ) { 
    7577                                element = editor.dom.replace( editor.dom.createFragment( html ), wrap ); 
    7678                            } else { 
     
    7880                            } 
    7981                        } else { 
    80                             if ( replace ) { 
     82                            if ( option === 'replace' ) { 
    8183                                element = editor.dom.replace( html, wrap ); 
    8284                            } else { 
     
    8688 
    8789                        if ( _.isFunction( callback ) ) { 
    88                             callback( self, editor, $( element ).children( '.wpview-content' )[0] ); 
     90                            callback( self, editor, $( element ).find( '.wpview-content' )[0] ); 
    8991                        } 
    9092                    } ); 
     
    268270 
    269271                attrs: { 
    270                     'class': 'wpview-wrap wpview-type-' + viewType, 
     272                    'class': 'wpview-wrap', 
    271273                    'data-wpview-text': encodedText, 
    272                     'data-wpview-type': viewType, 
    273                     'contenteditable': 'false' 
     274                    'data-wpview-type': viewType 
    274275                }, 
    275276 
     
    743744                        self.setError( response.message, 'admin-media' ); 
    744745                    } else { 
    745                         self.setContent( '<p>' + self.original + '</p>', null, true ); 
     746                        self.setContent( '<p>' + self.original + '</p>', null, 'replace' ); 
    746747                    } 
    747748                } else if ( response && response.statusText ) { 
  • trunk/src/wp-includes/js/tinymce/plugins/wpview/plugin.js

    r28748 r28994  
    55tinymce.PluginManager.add( 'wpview', function( editor ) { 
    66    var selected, 
     7        Env = tinymce.Env, 
    78        VK = tinymce.util.VK, 
    89        TreeWalker = tinymce.dom.TreeWalker, 
    9         toRemove = false; 
    10  
    11     function getParentView( node ) { 
    12         while ( node && node.nodeName !== 'BODY' ) { 
    13             if ( isView( node ) ) { 
    14                 return node; 
    15             } 
    16  
    17             node = node.parentNode; 
    18         } 
    19     } 
    20  
    21     function isView( node ) { 
    22         return node && /\bwpview-wrap\b/.test( node.className ); 
    23     } 
    24  
    25     function createPadNode() { 
    26         return editor.dom.create( 'p', { 'data-wpview-pad': 1 }, 
    27             ( tinymce.Env.ie && tinymce.Env.ie < 11 ) ? '' : '<br data-mce-bogus="1" />' ); 
     10        toRemove = false, 
     11        cursorInterval, lastKeyDownNode, setViewCursorTries; 
     12 
     13    function getView( node ) { 
     14        return editor.dom.getParent( node, function( node ) { 
     15            return editor.dom.hasClass( node, 'wpview-wrap' ); 
     16        }); 
    2817    } 
    2918 
     
    3120     * Get the text/shortcode string for a view. 
    3221     * 
    33      * @param view The view wrapper's HTML id or node 
     22     * @param view The view wrapper's node 
    3423     * @returns string The text/shoercode string of the view 
    3524     */ 
    3625    function getViewText( view ) { 
    37         view = getParentView( typeof view === 'string' ? editor.dom.get( view ) : view ); 
    38  
    39         if ( view ) { 
     26        if ( view = getView( view ) ) { 
    4027            return window.decodeURIComponent( editor.dom.getAttrib( view, 'data-wpview-text' ) || '' ); 
    4128        } 
     29 
    4230        return ''; 
    4331    } 
     
    5038     */ 
    5139    function setViewText( view, text ) { 
    52         view = getParentView( typeof view === 'string' ? editor.dom.get( view ) : view ); 
     40        view = getView( view ); 
    5341 
    5442        if ( view ) { 
     
    5644            return true; 
    5745        } 
     46 
    5847        return false; 
    5948    } 
     
    6150    function _stop( event ) { 
    6251        event.stopPropagation(); 
     52    } 
     53 
     54    function setViewCursor( before, view ) { 
     55        var location = before ? 'before' : 'after', 
     56            offset = before ? 0 : 1; 
     57        editor.selection.setCursorLocation( editor.dom.select( '.wpview-selection-' + location, view )[0], offset ); 
     58        editor.nodeChanged(); 
     59    } 
     60 
     61    function handleEnter( view, before ) { 
     62        var dom = editor.dom, 
     63            padNode; 
     64 
     65        if ( ! before && view.nextSibling && dom.isEmpty( view.nextSibling ) && view.nextSibling.nodeName === 'P' ) { 
     66            padNode = view.nextSibling; 
     67        } else if ( before && view.previousSibling && dom.isEmpty( view.previousSibling ) && view.previousSibling.nodeName === 'P' ) { 
     68            padNode = view.previousSibling; 
     69        } else { 
     70            padNode = dom.create( 'p' ); 
     71 
     72            if ( ! ( Env.ie && Env.ie < 11 ) ) { 
     73                padNode.innerHTML = '<br data-mce-bogus="1">'; 
     74            } 
     75 
     76            if ( before ) { 
     77                view.parentNode.insertBefore( padNode, view ); 
     78            } else { 
     79                dom.insertAfter( padNode, view ); 
     80            } 
     81        } 
     82 
     83        deselect(); 
     84        editor.getBody().focus(); 
     85        editor.selection.setCursorLocation( padNode, 0 ); 
     86        editor.nodeChanged(); 
    6387    } 
    6488 
     
    81105        }, getViewText( viewNode ) ); 
    82106 
    83         // Prepend inside the wrapper 
    84         viewNode.insertBefore( clipboard, viewNode.firstChild ); 
     107        editor.dom.select( '.wpview-body', viewNode )[0].appendChild( clipboard ); 
    85108 
    86109        // Both of the following are necessary to prevent manipulating the selection/focus 
     
    117140    } 
    118141 
    119     function selectSiblingView( node, direction ) { 
    120         var body = editor.getBody(), 
    121             sibling = direction === 'previous' ? 'previousSibling' : 'nextSibling'; 
    122  
    123         while ( node && node.parentNode !== body ) { 
    124             if ( node[sibling] ) { 
    125                 // The caret will be in another element 
    126                 return false; 
    127             } 
    128  
    129             node = node.parentNode; 
    130         } 
    131  
    132         if ( isView( node[sibling] ) ) { 
    133             select( node[sibling] ); 
    134             return true; 
    135         } 
    136  
    137         return false; 
    138     } 
    139  
    140142    // Check if the `wp.mce` API exists. 
    141143    if ( typeof wp === 'undefined' || ! wp.mce ) { 
     
    145147    // Remove the content of view wrappers from HTML string 
    146148    function emptyViews( content ) { 
    147         return content.replace(/(<div[^>]+wpview-wrap[^>]+>)[\s\S]+?data-wpview-end[^>]*><\/ins><\/div>/g, '$1</div>' ); 
    148     } 
     149        return content.replace(/<div[^>]+data-wpview-text=\"([^"]+)"[^>]*>[\s\S]+?wpview-selection-after[^>]+>(?:&nbsp;|\u00a0)*<\/p><\/div>/g, '$1' ); 
     150    } 
     151     
     152    window.emptyViews = function() { 
     153        return emptyViews( editor.getContent({format : 'raw'}) ); 
     154    }; 
    149155 
    150156    // Prevent adding undo levels on changes inside a view wrapper 
     
    182188    // When the editor's content has been updated and the DOM has been 
    183189    // processed, render the views in the document. 
    184     editor.on( 'SetContent', function( event ) { 
    185         var body, padNode; 
    186  
     190    editor.on( 'SetContent', function() { 
    187191        wp.mce.views.render(); 
    188  
    189         // Add padding <p> if the noneditable node is last 
    190         if ( event.load || ! event.set ) { 
    191             body = editor.getBody(); 
    192  
    193             if ( isView( body.lastChild ) ) { 
    194                 padNode = createPadNode(); 
    195                 body.appendChild( padNode ); 
    196  
    197                 if ( ! event.initial ) { 
    198                     editor.selection.setCursorLocation( padNode, 0 ); 
    199                 } 
    200             } 
    201         } 
    202     }); 
    203  
    204     // Detect mouse down events that are adjacent to a view when a view is the first view or the last view 
     192    }); 
     193 
     194    // Set the cursor before or after a view when clicking next to it. 
    205195    editor.on( 'click', function( event ) { 
    206         var body = editor.getBody(), 
    207             doc = editor.getDoc(), 
    208             scrollTop = doc.documentElement.scrollTop || body.scrollTop || 0, 
    209             x, y, firstNode, lastNode, padNode; 
    210  
    211         if ( event.target.nodeName === 'HTML' && ! event.metaKey && ! event.ctrlKey ) { 
    212             firstNode = body.firstChild; 
    213             lastNode = body.lastChild; 
    214             x = event.clientX; 
    215             y = event.clientY; 
    216  
    217             // Detect clicks above or to the left if the first node is a wpview 
    218             if ( isView( firstNode ) && ( ( x < firstNode.offsetLeft && y < ( firstNode.offsetHeight - scrollTop ) ) || 
    219                 y < firstNode.offsetTop ) ) { 
    220  
    221                 padNode = createPadNode(); 
    222                 body.insertBefore( padNode, firstNode ); 
    223  
    224             // Detect clicks to the right and below the last view 
    225             } else if ( isView( lastNode ) && ( x > ( lastNode.offsetLeft + lastNode.offsetWidth ) || 
    226                 ( ( scrollTop + y ) - ( lastNode.offsetTop + lastNode.offsetHeight ) ) > 0 ) ) { 
    227  
    228                 padNode = createPadNode(); 
    229                 body.appendChild( padNode ); 
    230             } 
    231  
    232             if ( padNode ) { 
    233                 // Make sure that a selected view is deselected so that focus and selection are handled properly 
    234                 deselect(); 
    235                 editor.getBody().focus(); 
    236                 editor.selection.setCursorLocation( padNode, 0 ); 
    237             } 
     196        var x = event.clientX, 
     197            y = event.clientY, 
     198            body = editor.getBody(), 
     199            bodyRect = body.getBoundingClientRect(), 
     200            first = body.firstChild, 
     201            firstRect = first.getBoundingClientRect(), 
     202            last = body.lastChild, 
     203            lastRect = last.getBoundingClientRect(), 
     204            view; 
     205 
     206        if ( y < firstRect.top && ( view = getView( first ) ) ) { 
     207            setViewCursor( true, view ); 
     208            event.preventDefault(); 
     209        } else if ( y > lastRect.bottom && ( view = getView( last ) ) ) { 
     210            setViewCursor( false, view ); 
     211            event.preventDefault(); 
     212        } else { 
     213            tinymce.each( editor.dom.select( '.wpview-wrap' ), function( view ) { 
     214                var rect = view.getBoundingClientRect(); 
     215 
     216                if ( y >= rect.top && y <= rect.bottom ) { 
     217                    if ( x < bodyRect.left ) { 
     218                        setViewCursor( true, view ); 
     219                        event.preventDefault(); 
     220                    } else if ( x > bodyRect.right ) { 
     221                        setViewCursor( false, view ); 
     222                        event.preventDefault(); 
     223                    } 
     224                    return; 
     225                } 
     226            }); 
    238227        } 
    239228    }); 
     
    241230    editor.on( 'init', function() { 
    242231        var selection = editor.selection; 
     232 
    243233        // When a view is selected, ensure content that is being pasted 
    244234        // or inserted is added to a text node (instead of the view). 
    245235        editor.on( 'BeforeSetContent', function() { 
    246236            var walker, target, 
    247                 view = getParentView( selection.getNode() ); 
     237                view = getView( selection.getNode() ); 
    248238 
    249239            // If the selection is not within a view, bail. 
     
    252242            } 
    253243 
    254             if ( ! view.nextSibling || isView( view.nextSibling ) ) { 
     244            if ( ! view.nextSibling || getView( view.nextSibling ) ) { 
    255245                // If there are no additional nodes or the next node is a 
    256246                // view, create a text node after the current view. 
     
    268258        }); 
    269259 
    270         // When the selection's content changes, scan any new content 
    271         // for matching views. 
    272         // 
     260        // When the selection's content changes, scan any new content for matching views. 
    273261        // Runs on paste and on inserting nodes/html. 
    274262        editor.on( 'SetContent', function( e ) { 
     
    287275 
    288276        editor.dom.bind( editor.getBody().parentNode, 'mousedown mouseup click', function( event ) { 
    289             var view = getParentView( event.target ), 
     277            var view = getView( event.target ), 
    290278                deselectEventType; 
    291279 
     
    295283 
    296284                // Hack to try and keep the block resize handles from appearing. They will show on mousedown and then be removed on mouseup. 
    297                 if ( tinymce.Env.ie <= 10 ) { 
     285                if ( Env.ie <= 10 ) { 
    298286                    deselect(); 
    299287                } 
     
    308296                    } 
    309297                } 
     298 
    310299                // Returning false stops the ugly bars from appearing in IE11 and stops the view being selected as a range in FF. 
    311300                // Unfortunately, it also inhibits the dragging of views to a new location. 
    312301                return false; 
    313302            } else { 
    314  
    315303                // Fix issue with deselecting a view in IE8. Without this hack, clicking content above the view wouldn't actually deselect it 
    316304                // and the caret wouldn't be placed at the mouse location 
    317                 if ( tinymce.Env.ie && tinymce.Env.ie <= 8 ) { 
     305                if ( Env.ie && Env.ie <= 8 ) { 
    318306                    deselectEventType = 'mouseup'; 
    319307                } else { 
     
    329317 
    330318    editor.on( 'PreProcess', function( event ) { 
    331         var dom = editor.dom; 
    332  
    333         // Remove empty padding nodes 
    334         tinymce.each( dom.select( 'p[data-wpview-pad]', event.node ), function( node ) { 
    335             if ( dom.isEmpty( node ) ) { 
    336                 dom.remove( node ); 
    337             } else { 
    338                 dom.setAttrib( node, 'data-wpview-pad', null ); 
    339             } 
    340         }); 
    341  
    342319        // Replace the wpview node with the wpview string/shortcode? 
    343         tinymce.each( dom.select( 'div[data-wpview-text]', event.node ), function( node ) { 
     320        tinymce.each( editor.dom.select( 'div[data-wpview-text]', event.node ), function( node ) { 
    344321            // Empty the wrap node 
    345322            if ( 'textContent' in node ) { 
     
    362339    }); 
    363340 
     341    // (De)select views when arrow keys are used to navigate the content of the editor. 
    364342    editor.on( 'keydown', function( event ) { 
     343        if ( event.metaKey || event.ctrlKey || ( keyCode >= 112 && keyCode <= 123 ) ) { 
     344            return; 
     345        } 
     346 
     347        if ( selected ) { 
     348            return; 
     349        } 
     350 
    365351        var keyCode = event.keyCode, 
    366             body = editor.getBody(), 
    367             view, padNode; 
     352            dom = editor.dom, 
     353            selection = editor.selection, 
     354            node = selection.getNode(), 
     355            view = getView( node ), 
     356            cursorBefore, cursorAfter; 
     357 
     358        lastKeyDownNode = node; 
     359 
     360        if ( ! view ) { 
     361            return; 
     362        } 
     363 
     364        if ( ! ( ( cursorBefore = dom.hasClass( view, 'wpview-selection-before' ) ) || 
     365                ( cursorAfter = dom.hasClass( view, 'wpview-selection-after' ) ) ) ) { 
     366            return; 
     367        } 
     368 
     369        if ( ( cursorAfter && keyCode === VK.UP ) || ( cursorBefore && keyCode === VK.BACKSPACE ) ) { 
     370            if ( view.previousSibling ) { 
     371                if ( getView( view.previousSibling ) ) { 
     372                    setViewCursor( false, view.previousSibling ); 
     373                } else { 
     374                    if ( dom.isEmpty( view.previousSibling ) && keyCode === VK.BACKSPACE ) { 
     375                        dom.remove( view.previousSibling ); 
     376                    } else { 
     377                        selection.select( view.previousSibling, true ); 
     378                        selection.collapse(); 
     379                    } 
     380                } 
     381            } else { 
     382                handleEnter( view, true ); 
     383            } 
     384            event.preventDefault(); 
     385        } else if ( cursorAfter && ( keyCode === VK.DOWN || keyCode === VK.RIGHT ) ) { 
     386            if ( view.nextSibling ) { 
     387                if ( getView( view.nextSibling ) ) { 
     388                    setViewCursor( false, view.nextSibling ); 
     389                } else { 
     390                    selection.setCursorLocation( view.nextSibling, 0 ); 
     391                } 
     392            } else { 
     393                handleEnter( view ); 
     394            } 
     395            event.preventDefault(); 
     396        } else if ( cursorBefore && ( keyCode === VK.UP || keyCode ===  VK.LEFT ) ) { 
     397            if ( view.previousSibling ) { 
     398                if ( getView( view.previousSibling ) ) { 
     399                    setViewCursor( true, view.previousSibling ); 
     400                } else { 
     401                    selection.select( view.previousSibling, true ); 
     402                    selection.collapse(); 
     403                } 
     404            } else { 
     405                handleEnter( view, true ); 
     406            } 
     407            event.preventDefault(); 
     408        } else if ( cursorBefore && keyCode === VK.DOWN ) { 
     409            if ( view.nextSibling ) { 
     410                if ( getView( view.nextSibling ) ) { 
     411                    setViewCursor( true, view.nextSibling ); 
     412                } else { 
     413                    selection.setCursorLocation( view.nextSibling, 0 ); 
     414                } 
     415            } else { 
     416                handleEnter( view ); 
     417            } 
     418            event.preventDefault(); 
     419        } else if ( ( cursorAfter && keyCode === VK.LEFT ) || ( cursorBefore && keyCode === VK.RIGHT ) ) { 
     420            select( view ); 
     421            event.preventDefault(); 
     422            event.stopImmediatePropagation(); 
     423        } else if ( cursorAfter && keyCode === VK.BACKSPACE ) { 
     424            dom.remove( view ); 
     425            event.preventDefault(); 
     426        } else if ( cursorAfter ) { 
     427            handleEnter( view ); 
     428        } else if ( cursorBefore ) { 
     429            handleEnter( view , true); 
     430        } 
     431 
     432        if ( keyCode === VK.ENTER ) { 
     433            event.preventDefault(); 
     434        } 
     435    }); 
     436 
     437    // Handle key presses for selected views. 
     438    editor.on( 'keydown', function( event ) { 
     439        var dom = editor.dom, 
     440            keyCode = event.keyCode, 
     441            selection = editor.selection, 
     442            view; 
    368443 
    369444        // If a view isn't selected, let the event go on its merry way. 
     
    372447        } 
    373448 
    374         // Let keypresses that involve the command or control keys through. 
     449        // Let key presses that involve the command or control keys through. 
    375450        // Also, let any of the F# keys through. 
    376451        if ( event.metaKey || event.ctrlKey || ( keyCode >= 112 && keyCode <= 123 ) ) { 
    377             if ( ( event.metaKey || event.ctrlKey ) && keyCode === 88 ) { 
    378                 toRemove = selected; 
    379             } 
    380             return; 
    381         } 
    382  
    383         view = getParentView( editor.selection.getNode() ); 
    384  
    385         // If the caret is not within the selected view, deselect the 
    386         // view and bail. 
     452            // But remove the view when cmd/ctrl + x/backspace are pressed. 
     453            if ( ( event.metaKey || event.ctrlKey ) && ( keyCode === 88 || keyCode === VK.BACKSPACE ) ) { 
     454                // We'll remove a cut view on keyup, otherwise the browser can't copy the content. 
     455                if ( keyCode === 88 ) { 
     456                    toRemove = selected; 
     457                } else { 
     458                    editor.dom.remove( selected ); 
     459                } 
     460            } 
     461            return; 
     462        } 
     463 
     464        view = getView( selection.getNode() ); 
     465 
     466        // If the caret is not within the selected view, deselect the view and bail. 
    387467        if ( view !== selected ) { 
    388468            deselect(); 
     
    390470        } 
    391471 
    392         // Deselect views with the arrow keys 
    393472        if ( keyCode === VK.LEFT || keyCode === VK.UP ) { 
     473            setViewCursor( true, view ); 
    394474            deselect(); 
    395             // Handle case where two views are stacked on top of one another 
    396             if ( isView( view.previousSibling ) ) { 
    397                 select( view.previousSibling ); 
    398             // Handle case where view is the first node 
    399             } else if ( ! view.previousSibling ) { 
    400                 padNode = createPadNode(); 
    401                 body.insertBefore( padNode, body.firstChild ); 
    402                 editor.selection.setCursorLocation( body.firstChild, 0 ); 
    403             // Handle default case 
    404             } else { 
    405                 editor.selection.select( view.previousSibling, true ); 
    406                 editor.selection.collapse(); 
    407             } 
    408475        } else if ( keyCode === VK.RIGHT || keyCode === VK.DOWN ) { 
     476            setViewCursor( false, view ); 
    409477            deselect(); 
    410             // Handle case where the next node is another wpview 
    411             if ( isView( view.nextSibling ) ) { 
    412                 select( view.nextSibling ); 
    413             // Handle case were the view is that last node 
    414             } else if ( ! view.nextSibling ) { 
    415                 padNode = createPadNode(); 
    416                 body.appendChild( padNode ); 
    417                 editor.selection.setCursorLocation( body.lastChild, 0 ); 
    418             // Handle default case where the next node is a non-wpview 
    419             } else { 
    420                 editor.selection.setCursorLocation( view.nextSibling, 0 ); 
    421             } 
     478        } else if ( keyCode === VK.ENTER ) { 
     479            handleEnter( view ); 
    422480        } else if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) { 
    423             // If delete or backspace is pressed, delete the view. 
    424             editor.dom.remove( selected ); 
     481            dom.remove( selected ); 
    425482        } 
    426483 
     
    428485    }); 
    429486 
    430     // Select views when arrow keys are used to navigate the content of the editor. 
     487    // Make sure we don't eat any content. 
    431488    editor.on( 'keydown', function( event ) { 
    432         var keyCode = event.keyCode, 
    433             dom = editor.dom, 
    434             range = editor.selection.getRng(), 
    435             startNode = range.startContainer, 
    436             body = editor.getBody(), 
    437             node, container; 
    438  
    439         if ( ! startNode || startNode === body || event.metaKey || event.ctrlKey ) { 
    440             return; 
    441         } 
    442  
    443         if ( keyCode === VK.UP || keyCode === VK.LEFT ) { 
    444             if ( keyCode === VK.LEFT && ( ! range.collapsed || range.startOffset !== 0 ) ) { 
    445                 // Not at the beginning of the current range 
    446                 return; 
    447             } 
    448  
    449             if ( ! ( node = dom.getParent( startNode, dom.isBlock ) ) ) { 
    450                 return; 
    451             } 
    452  
    453             if ( selectSiblingView( node, 'previous' ) ) { 
     489        var selection = editor.selection, 
     490            node, range, view; 
     491 
     492        if ( event.keyCode === VK.BACKSPACE ) { 
     493            node = selection.getNode(); 
     494 
     495            if ( editor.dom.isEmpty( node ) ) { 
     496                if ( view = getView( node.previousSibling ) ) { 
     497                    setViewCursor( false, view ); 
     498                    editor.dom.remove( node ); 
     499                    event.preventDefault(); 
     500                } 
     501            } else if ( ( range = selection.getRng() ) && 
     502                    range.startOffset === 0 && 
     503                    range.endOffset === 0 && 
     504                    ( view = getView( node.previousSibling ) ) ) { 
     505                setViewCursor( false, view ); 
    454506                event.preventDefault(); 
    455507            } 
    456         } else if ( keyCode === VK.DOWN || keyCode === VK.RIGHT ) { 
    457             if ( ! ( node = dom.getParent( startNode, dom.isBlock ) ) ) { 
    458                 return; 
    459             } 
    460  
    461             if ( keyCode === VK.RIGHT ) { 
    462                 container = range.endContainer; 
    463  
    464                 if ( ! range.collapsed || ( range.startOffset === 0 && container.length ) || 
    465                     container.nextSibling || 
    466                     ( container.nodeType === 3 && range.startOffset !== container.length ) ) { // Not at the end of the current range 
    467  
    468                     return; 
    469                 } 
    470  
    471                 // In a child element 
    472                 while ( container && container !== node && container !== body ) { 
    473                     if ( container.nextSibling ) { 
    474                         return; 
    475                     } 
    476                     container = container.parentNode; 
    477                 } 
    478             } 
    479  
    480             if ( selectSiblingView( node, 'next' ) ) { 
    481                 event.preventDefault(); 
    482             } 
    483         } 
    484     }); 
    485  
    486     editor.on( 'keyup', function( event ) { 
    487         var padNode, 
    488             keyCode = event.keyCode, 
    489             body = editor.getBody(), 
    490             range; 
    491  
     508        } 
     509    }); 
     510 
     511    editor.on( 'keyup', function() { 
    492512        if ( toRemove ) { 
    493513            editor.dom.remove( toRemove ); 
    494514            toRemove = false; 
    495515        } 
    496  
    497         if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) { 
    498             // Make sure there is padding if the last element is a view 
    499             if ( isView( body.lastChild ) ) { 
    500                 padNode = createPadNode(); 
    501                 body.appendChild( padNode ); 
    502  
    503                 if ( body.childNodes.length === 2 ) { 
    504                     editor.selection.setCursorLocation( padNode, 0 ); 
    505                 } 
    506             } 
    507  
    508             range = editor.selection.getRng(); 
    509  
    510             // Allow an initial element in the document to be removed when it is before a view 
    511             if ( body.firstChild === range.startContainer && range.collapsed === true && 
    512                     isView( range.startContainer.nextSibling ) && range.startOffset === 0 ) { 
    513  
    514                 editor.dom.remove( range.startContainer ); 
     516    }); 
     517 
     518    editor.on( 'nodechange', function( event ) { 
     519        var dom = editor.dom, 
     520            views = editor.dom.select( '.wpview-wrap' ), 
     521            className = event.element.className, 
     522            view = getView( event.element ), 
     523            lKDN = lastKeyDownNode; 
     524 
     525        lastKeyDownNode = false; 
     526 
     527        clearInterval( cursorInterval ); 
     528 
     529        dom.removeClass( views, 'wpview-selection-before' ); 
     530        dom.removeClass( views, 'wpview-selection-after' ); 
     531        dom.removeClass( views, 'wpview-cursor-hide' ); 
     532 
     533        if ( view ) { 
     534            if ( className === 'wpview-selection-before' || className === 'wpview-selection-after' ) { 
     535                setViewCursorTries = 0; 
     536 
     537                // Make sure the cursor arrived in the right node. 
     538                // This is necessary for Firefox. 
     539                if ( lKDN === view.previousSibling ) { 
     540                    setViewCursor( true, view ); 
     541                    return; 
     542                } else if ( lKDN === view.nextSibling ) { 
     543                    setViewCursor( false, view ); 
     544                    return; 
     545                } 
     546 
     547                dom.addClass( view, className ); 
     548 
     549                cursorInterval = setInterval( function() { 
     550                    if ( dom.hasClass( view, 'wpview-cursor-hide' ) ) { 
     551                        dom.removeClass( view, 'wpview-cursor-hide' ); 
     552                    } else { 
     553                        dom.addClass( view, 'wpview-cursor-hide' ); 
     554                    } 
     555                }, 500 ); 
     556            // If the cursor happens to be anywhere around the view, then set the cursor properly. 
     557            // Only try this once to prevent a loop. (You never know.) 
     558            } else if ( ! selected && ! setViewCursorTries ) { 
     559                setViewCursorTries++; 
     560                setViewCursor( true, view ); 
    515561            } 
    516562        } 
  • trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

    r28866 r28994  
    211211 
    212212/* hide the shortcode content, but allow the content to still be selected */ 
    213 .wpview-wrap .wpview-clipboard { 
     213.wpview-wrap .wpview-clipboard, 
     214.wpview-wrap > p { 
    214215    position: absolute; 
    215216    top: 0; 
     
    226227} 
    227228 
     229/* An ugly box will appear when this is focussed in IE, so we'll move it outside the window. */ 
     230.wpview-wrap.wpview-selection-before > p, 
     231.wpview-wrap.wpview-selection-after > p { 
     232    left: -10000px; 
     233} 
     234 
    228235.wpview-wrap .wpview-clipboard, 
    229 .wpview-wrap .wpview-clipboard * { 
     236.wpview-wrap .wpview-clipboard *, 
     237.wpview-wrap > p { 
    230238    -moz-user-select: text; 
    231239    -webkit-user-select: text; 
    232240    -ms-user-select: text; 
    233241    user-select: text; 
     242} 
     243 
     244.wpview-wrap.wpview-selection-before:before, 
     245.wpview-wrap.wpview-selection-after:before { 
     246    content: ''; 
     247    margin: 0; 
     248    padding: 0; 
     249    position: absolute; 
     250    top: -2px; 
     251    left: -3px; 
     252    bottom: -2px; 
     253    width: 1px; 
     254    background-color: black; 
     255    -webkit-transition: opacity 0.15s ease-out; 
     256    -moz-transition: opacity 0.15s ease-out; 
     257    transition: opacity 0.15s ease-out; 
     258    opacity: 1; 
     259} 
     260 
     261.wpview-wrap.wpview-selection-after:before { 
     262    left: auto; 
     263    right: -3px; 
     264} 
     265 
     266.wpview-wrap.wpview-cursor-hide:before { 
     267    opacity: 0; 
    234268} 
    235269 
     
    349383 
    350384/* Audio player is short; therefore let's put the toolbar above */ 
    351 .wpview-type-audio .toolbar { 
     385.wpview-wrap[data-wpview-type="audio"] .toolbar { 
    352386    top: auto; 
    353387    bottom: -34px; 
    354388} 
    355389 
    356 .wpview-type-audio .toolbar div { 
     390.wpview-wrap[data-wpview-type="audio"] .toolbar div { 
    357391    margin-top: 0; 
    358392} 
    359393 
    360 .wpview-type-audio .toolbar div:first-child { 
     394.wpview-wrap[data-wpview-type="audio"] .toolbar div:first-child { 
    361395    margin-left: 0; 
    362396} 
Note: See TracChangeset for help on using the changeset viewer.