WordPress.org

Make WordPress Core

Ticket #28595: 28595.5.patch

File 28595.5.patch, 26.0 KB (added by iseulde, 4 years ago)
  • src/wp-includes/js/mce-view.js

     
    3939                getHtml: function() {},
    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;
    6264                                if ( editor.plugins.wpview ) {
    6365                                        $( editor.getBody() )
    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 {
    7779                                                                editor.dom.setHTML( element, html );
    7880                                                        }
    7981                                                } else {
    80                                                         if ( replace ) {
     82                                                        if ( option === 'replace' ) {
    8183                                                                element = editor.dom.replace( html, wrap );
    8284                                                        } else {
    8385                                                                element.appendChild( html );
     
    8587                                                }
    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                                        } );
    9193                                }
     
    267269                                tag: 'div',
    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
    276277                                content: '\u00a0'
     
    742743
    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 ) {
    748749                                        self.setError( response.statusText, 'admin-media' );
  • src/wp-includes/js/tinymce/plugins/wpview/plugin.js

     
    44 */
    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         }
     10                toRemove = false,
     11                cursorInterval, lastKeyDownNode, setViewCursorTries;
    2012
    2113        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" />' );
     14                return editor.dom.getParent( node, function( node ) {
     15                        return editor.dom.hasClass( node, 'wpview-wrap' );
     16                });
    2817        }
    2918
    3019        /**
    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 = isView( view ) ) {
    4027                        return window.decodeURIComponent( editor.dom.getAttrib( view, 'data-wpview-text' ) || '' );
    4128                }
     29
    4230                return '';
    4331        }
    4432
     
    4937         * @param text The text string to be set
    5038         */
    5139        function setViewText( view, text ) {
    52                 view = getParentView( typeof view === 'string' ? editor.dom.get( view ) : view );
     40                view = isView( view );
    5341
    5442                if ( view ) {
    5543                        editor.dom.setAttrib( view, 'data-wpview-text', window.encodeURIComponent( text || '' ) );
    5644                        return true;
    5745                }
     46
    5847                return false;
    5948        }
    6049
     
    6251                event.stopPropagation();
    6352        }
    6453
     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();
     87        }
     88
    6589        function select( viewNode ) {
    6690                var clipboard,
    6791                        dom = editor.dom;
     
    80104                        'contenteditable': 'true'
    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
    87110                dom.bind( clipboard, 'beforedeactivate focusin focusout', _stop );
     
    116139                selected = null;
    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 ) {
    142144                return;
     
    144146
    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>' );
     149                return content.replace(/<div[^>]+data-wpview-text=\"([^"]+)"[^>]*>[\s\S]+?wpview-selection-after[^>]+>(?:&nbsp;|\u00a0)*<\/p><\/div>/g, '$1' );
    148150        }
     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
    151157        editor.on( 'BeforeAddUndo', function( event ) {
     
    181187
    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                 }
    202192        });
    203193
    204         // Detect mouse down events that are adjacent to a view when a view is the first view or the last view
     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 = isView( first ) ) ) {
     207                        setViewCursor( true, view );
     208                        event.preventDefault();
     209                } else if ( y > lastRect.bottom && ( view = isView( 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        });
    240229
    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 = isView( selection.getNode() );
    248238
    249239                        // If the selection is not within a view, bail.
    250240                        if ( ! view ) {
     
    267257                        selection.collapse( true );
    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 ) {
    275263                        if ( ! e.context ) {
     
    286274                });
    287275
    288276                editor.dom.bind( editor.getBody().parentNode, 'mousedown mouseup click', function( event ) {
    289                         var view = getParentView( event.target ),
     277                        var view = isView( event.target ),
    290278                                deselectEventType;
    291279
    292280                        // Contain clicks inside the view wrapper
     
    294282                                event.stopPropagation();
    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                                }
    300288
     
    307295                                                editor.dom.remove( view );
    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 {
    320308                                        deselectEventType = 'mousedown';
     
    328316        });
    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 ) {
    346323                                node.textContent = '\u00a0';
     
    361338                }
    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 = isView( 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 ( isView( 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 ( isView( 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 ( isView( 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 ( isView( 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.
    370445                if ( ! selected ) {
    371446                        return;
    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;
     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                                }
    379460                        }
    380461                        return;
    381462                }
    382463
    383                 view = getParentView( editor.selection.getNode() );
     464                view = isView( selection.getNode() );
    384465
    385                 // If the caret is not within the selected view, deselect the
    386                 // view and bail.
     466                // If the caret is not within the selected view, deselect the view and bail.
    387467                if ( view !== selected ) {
    388468                        deselect();
    389469                        return;
    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
    427484                event.preventDefault();
    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' ) ) {
    454                                 event.preventDefault();
    455                         }
    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
     489                var selection = editor.selection,
     490                        node, range, view;
    467491
    468                                         return;
    469                                 }
     492                if ( event.keyCode === VK.BACKSPACE ) {
     493                        node = selection.getNode();
    470494
    471                                 // In a child element
    472                                 while ( container && container !== node && container !== body ) {
    473                                         if ( container.nextSibling ) {
    474                                                 return;
    475                                         }
    476                                         container = container.parentNode;
     495                        if ( editor.dom.isEmpty( node ) ) {
     496                                if ( view = isView( node.previousSibling ) ) {
     497                                        setViewCursor( false, view );
     498                                        editor.dom.remove( node );
     499                                        event.preventDefault();
    477500                                }
    478                         }
    479 
    480                         if ( selectSiblingView( node, 'next' ) ) {
     501                        } else if ( ( range = selection.getRng() ) &&
     502                                        range.startOffset === 0 &&
     503                                        range.endOffset === 0 &&
     504                                        ( view = isView( node.previousSibling ) ) ) {
     505                                setViewCursor( false, view );
    481506                                event.preventDefault();
    482507                        }
    483508                }
    484509        });
    485510
    486         editor.on( 'keyup', function( event ) {
    487                 var padNode,
    488                         keyCode = event.keyCode,
    489                         body = editor.getBody(),
    490                         range;
    491 
     511        editor.on( 'keyup', function() {
    492512                if ( toRemove ) {
    493513                        editor.dom.remove( toRemove );
    494514                        toRemove = false;
    495515                }
     516        });
    496517
    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 );
     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 = isView( 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' );
    502532
    503                                 if ( body.childNodes.length === 2 ) {
    504                                         editor.selection.setCursorLocation( padNode, 0 );
    505                                 }
    506                         }
     533                if ( view ) {
     534                        if ( className === 'wpview-selection-before' || className === 'wpview-selection-after' ) {
     535                                setViewCursorTries = 0;
    507536
    508                         range = editor.selection.getRng();
     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                                }
    509546
    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 ) {
     547                                dom.addClass( view, className );
    513548
    514                                 editor.dom.remove( range.startContainer );
     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                }
    517563        });
  • src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

     
    210210}
    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;
    216217        left: 0;
     
    225226        height: 1px;
    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;
    234242}
    235243
     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;
     268}
     269
    236270/**
    237271 * Media previews
    238272 */
     
    348382}
    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}
    363397