WordPress.org

Make WordPress Core

Changeset 29010


Ignore:
Timestamp:
07/07/14 01:20:53 (3 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.