WordPress.org

Make WordPress Core

Changeset 27582


Ignore:
Timestamp:
03/18/2014 04:56:27 AM (7 years ago)
Author:
azaozz
Message:

wpView:

  • Makes sure that the editor is focused when clicking on a wpview.
  • When a view is the first or last node in the editor and a click on the area around the view adds a new paragraph, deselect the wpview so that the new paragraph is properly focused.
  • When navigating via keyboard, select or deselect wpviews as appropriate.

Props gcorne, see #26959

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/tinymce/plugins/wpview/plugin.js

    r27544 r27582  
    8787        editor.dom.bind( selected, 'beforedeactivate focusin focusout', _stop );
    8888
     89        // Make sure that the editor is focused.
     90        // It is possible that the editor is not focused when the mouse event fires
     91        // without focus, the selection will not work properly.
     92        editor.getBody().focus();
     93
    8994        // select the hidden div
    9095        editor.selection.select( clipboard, true );
     
    157162            }
    158163        }
    159 
    160     //  refreshEmptyContentNode();
    161164    });
    162165
     
    189192
    190193            if ( padNode ) {
     194                // Make sure that a selected view is deselected so that focus and selection are handled properly
     195                deselect();
     196                editor.getBody().focus();
    191197                editor.selection.setCursorLocation( padNode, 0 );
    192198            }
     
    299305    editor.on( 'keydown', function( event ) {
    300306        var keyCode = event.keyCode,
    301             view;
     307            body = editor.getBody(),
     308            view, padNode;
    302309
    303310        // If a view isn't selected, let the event go on its merry way.
     
    315322        }
    316323
     324        view = getParentView( editor.selection.getNode() );
     325
    317326        // If the caret is not within the selected view, deselect the
    318327        // view and bail.
    319         view = getParentView( editor.selection.getNode() );
    320 
    321328        if ( view !== selected ) {
    322329            deselect();
     
    324331        }
    325332
    326         // If delete or backspace is pressed, delete the view.
    327         if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) {
     333        if ( keyCode === VK.LEFT || keyCode === VK.UP ) {
     334            deselect();
     335            // Handle case where two views are stacked on top of one another
     336            if ( isView( view.previousSibling ) ) {
     337                select( view.previousSibling );
     338            // Handle case where view is the first node
     339            } else if ( view.previousSibling === null ) {
     340                padNode = createPadNode();
     341                body.insertBefore( padNode, body.firstChild );
     342                editor.selection.setCursorLocation( body.firstChild, 0 );
     343            // Handle default case
     344            } else {
     345                editor.selection.select( view.previousSibling, true );
     346                editor.selection.collapse();
     347            }
     348        } else if ( keyCode === VK.RIGHT || keyCode === VK.DOWN ) {
     349            deselect();
     350            // Handle case where the next node is another wpview
     351            if ( isView( view.nextSibling ) ) {
     352                select( view.nextSibling );
     353            // Handle case were the view is that last node
     354            } else if ( view.nextSibling === null ) {
     355                padNode = createPadNode();
     356                body.appendChild( padNode );
     357                editor.selection.setCursorLocation( body.lastChild, 0 );
     358            // Handle default case where the next node is a non-wpview
     359            } else {
     360                editor.selection.setCursorLocation( view.nextSibling.firstChild, 0 );
     361            }
     362        } else if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) {
     363            // If delete or backspace is pressed, delete the view.
    328364            editor.dom.remove( selected );
    329365        }
    330366
    331367        event.preventDefault();
     368    });
     369
     370    // Select and deselect views when arrow keys are used to navigate the content of the editor.
     371    editor.on( 'keydown', function( event ) {
     372        var keyCode = event.keyCode,
     373            range = editor.selection.getRng(),
     374            body = editor.getBody(),
     375            node;
     376
     377        if ( ! range.collapsed || event.metaKey || event.ctrlKey ) {
     378            return;
     379        }
     380
     381        if ( keyCode === VK.LEFT || keyCode === VK.UP ) {
     382            node = range.startContainer.parentNode === body ? range.startContainer : range.startContainer.parentNode;
     383            // The caret is directly after a wpview
     384            if ( range.startOffset === 0 && isView( node.previousSibling ) ) {
     385                select( node.previousSibling );
     386                event.preventDefault();
     387            }
     388        } else if ( keyCode === VK.RIGHT || keyCode === VK.DOWN ) {
     389            node = range.startContainer.parentNode === body ? range.startContainer : range.startContainer.parentNode;
     390            // The caret is directly before a wpview
     391            if ( ( ( range.startOffset === 0 && ! range.endContainer.length ) || ( range.startOffset === range.endContainer.length ) ) &&
     392                    isView( node.nextSibling ) ) {
     393                select( node.nextSibling );
     394                event.preventDefault();
     395            }
     396        }
    332397    });
    333398
Note: See TracChangeset for help on using the changeset viewer.