WordPress.org

Make WordPress Core

Changeset 29010


Ignore:
Timestamp:
07/07/2014 01:20:53 AM (4 years ago)
Author:
azaozz
Message:

TinyMCE wpView:

  • When a view is selected, pressing the up or down arrow key should move the caret to the block above or below the view.
  • Selecting some text that touches the view and deleting it should not remove part of the view.
  • Show/hide the "fake" carets on editor focus/blur.
  • Don't create new paragraphs before or after a view on pressing the arrow keys or delete key. Paragraphs are created on pressing Enter.

Props avryl, see #28595.

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

Legend:

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

    r29004 r29010  
    99        TreeWalker = tinymce.dom.TreeWalker,
    1010        toRemove = false,
    11         cursorInterval, lastKeyDownNode, setViewCursorTries;
     11        firstFocus = true,
     12        cursorInterval, lastKeyDownNode, setViewCursorTries, focus;
    1213
    1314    function getView( node ) {
     
    350351            node = selection.getNode(),
    351352            view = getView( node ),
    352             cursorBefore, cursorAfter;
     353            cursorBefore, cursorAfter,
     354            range, clonedRange, tempRange;
    353355
    354356        lastKeyDownNode = node;
     357
     358        // Make sure we don't delete part of a view.
     359        // If the range ends or starts with the view, we'll need to trim it.
     360        if ( ! selection.isCollapsed() ) {
     361            range = selection.getRng();
     362
     363            if ( view = getView( range.endContainer ) ) {
     364                clonedRange = range.cloneRange();
     365                selection.select( view.previousSibling, true );
     366                selection.collapse();
     367                tempRange = selection.getRng();
     368                clonedRange.setEnd( tempRange.endContainer, tempRange.endOffset );
     369                selection.setRng( clonedRange );
     370            } else if ( view = getView( range.startContainer ) ) {
     371                clonedRange = range.cloneRange();
     372                clonedRange.setStart( view.nextSibling, 0 );
     373                selection.setRng( clonedRange );
     374            }
     375        }
    355376
    356377        if ( ! view ) {
     
    376397                }
    377398            } else {
    378                 handleEnter( view, true );
     399                setViewCursor( true, view );
    379400            }
    380401            event.preventDefault();
     
    382403            if ( view.nextSibling ) {
    383404                if ( getView( view.nextSibling ) ) {
    384                     setViewCursor( false, view.nextSibling );
     405                    setViewCursor( keyCode === VK.RIGHT, view.nextSibling );
    385406                } else {
    386407                    selection.setCursorLocation( view.nextSibling, 0 );
    387408                }
    388             } else {
    389                 handleEnter( view );
    390409            }
    391410            event.preventDefault();
     
    393412            if ( view.previousSibling ) {
    394413                if ( getView( view.previousSibling ) ) {
    395                     setViewCursor( true, view.previousSibling );
     414                    setViewCursor( keyCode === VK.UP, view.previousSibling );
    396415                } else {
    397416                    selection.select( view.previousSibling, true );
    398417                    selection.collapse();
    399418                }
    400             } else {
    401                 handleEnter( view, true );
    402419            }
    403420            event.preventDefault();
     
    410427                }
    411428            } else {
    412                 handleEnter( view );
     429                setViewCursor( false, view );
    413430            }
    414431            event.preventDefault();
     
    466483        }
    467484
    468         if ( keyCode === VK.LEFT || keyCode === VK.UP ) {
     485        if ( keyCode === VK.LEFT ) {
    469486            setViewCursor( true, view );
    470487            deselect();
    471         } else if ( keyCode === VK.RIGHT || keyCode === VK.DOWN ) {
     488        } else if ( keyCode === VK.UP ) {
     489            if ( view.previousSibling ) {
     490                if ( getView( view.previousSibling ) ) {
     491                    setViewCursor( true, view.previousSibling );
     492                } else {
     493                    selection.select( view.previousSibling, true );
     494                    selection.collapse();
     495                }
     496            } else {
     497                setViewCursor( true, view );
     498            }
     499            deselect();
     500        } else if ( keyCode === VK.RIGHT ) {
    472501            setViewCursor( false, view );
     502            deselect();
     503        } else if ( keyCode === VK.DOWN ) {
     504            if ( view.nextSibling ) {
     505                if ( getView( view.nextSibling ) ) {
     506                    setViewCursor( false, view.nextSibling );
     507                } else {
     508                    selection.setCursorLocation( view.nextSibling, 0 );
     509                }
     510            } else {
     511                setViewCursor( false, view );
     512            }
    473513            deselect();
    474514        } else if ( keyCode === VK.ENTER ) {
     
    512552    });
    513553
     554    editor.on( 'focus', function() {
     555        var view;
     556       
     557        focus = true;
     558        editor.dom.addClass( editor.getBody(), 'has-focus' );
     559
     560        // Edge case: show the fake caret when the editor is focused for the first time
     561        // and the first element is a view.
     562        if ( firstFocus && ( view = getView( editor.getBody().firstChild ) ) ) {
     563            setViewCursor( true, view );
     564        }
     565
     566        firstFocus = false;
     567    } );
     568
     569    editor.on( 'blur', function() {
     570        focus = false;
     571        editor.dom.removeClass( editor.getBody(), 'has-focus' );
     572    } );
     573
    514574    editor.on( 'nodechange', function( event ) {
    515575        var dom = editor.dom,
     
    527587        dom.removeClass( views, 'wpview-cursor-hide' );
    528588
    529         if ( view ) {
     589        if ( view && editor.selection.isCollapsed() && focus ) {
    530590            if ( className === 'wpview-selection-before' || className === 'wpview-selection-after' ) {
    531591                setViewCursorTries = 0;
  • trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

    r28994 r29010  
    242242}
    243243
    244 .wpview-wrap.wpview-selection-before:before,
    245 .wpview-wrap.wpview-selection-after:before {
     244.has-focus .wpview-wrap.wpview-selection-before:before,
     245.has-focus .wpview-wrap.wpview-selection-after:before {
    246246    content: '';
    247247    margin: 0;
     
    259259}
    260260
    261 .wpview-wrap.wpview-selection-after:before {
     261.has-focus .wpview-wrap.wpview-selection-after:before {
    262262    left: auto;
    263263    right: -3px;
    264264}
    265265
    266 .wpview-wrap.wpview-cursor-hide:before {
     266.has-focus .wpview-wrap.wpview-cursor-hide:before {
    267267    opacity: 0;
    268268}
  • trunk/src/wp-includes/version.php

    r28932 r29010  
    1919 * @global string $tinymce_version
    2020 */
    21 $tinymce_version = '4028-20140630';
     21$tinymce_version = '4028-20140706';
    2222
    2323/**
Note: See TracChangeset for help on using the changeset viewer.