WordPress.org

Make WordPress Core

Ticket #28595: 28595.patch

File 28595.patch, 18.5 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>' : '' ) +
     52                                        // The <ins> is used to mark the end of the wrapper div (has to be the last child node).
     53                                        // Needed when comparing the content as string for preventing extra undo levels.
     54                                        '<ins data-wpview-end="1"></ins>' +
    4555                                '</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>',
     56                                '<p class="wpview-selection-after">\u00a0</p>',
    5357                                function( self, editor, node ) {
    5458                                        $( self ).trigger( 'ready', [ editor, node ] );
    55                                 }
     59                                },
     60                                'wrap'
    5661                        );
    5762                },
    5863                unbind: function() {},
    59                 setContent: function( html, callback, replace ) {
     64                setContent: function( html, callback, option ) {
    6065                        _.each( tinymce.editors, function( editor ) {
    6166                                var self = this;
    6267                                if ( editor.plugins.wpview ) {
    6368                                        $( editor.getBody() )
    6469                                        .find( '[data-wpview-text="' + this.encodedText + '"]' )
    6570                                        .each( function ( i, element ) {
    66                                                 var contentWrap = $( element ).children( '.wpview-content' ),
     71                                                var contentWrap = $( element ).find( '.wpview-content' ),
    6772                                                        wrap = element;
    6873
    69                                                 if ( contentWrap.length ) {
     74                                                if ( contentWrap.length && option !== 'wrap' ) {
    7075                                                        element = contentWrap = contentWrap[0];
    7176                                                }
    7277
    7378                                                if ( _.isString( html ) ) {
    74                                                         if ( replace ) {
     79                                                        if ( option === 'replace' ) {
    7580                                                                element = editor.dom.replace( editor.dom.createFragment( html ), wrap );
    7681                                                        } else {
    7782                                                                editor.dom.setHTML( element, html );
    7883                                                        }
    7984                                                } else {
    80                                                         if ( replace ) {
     85                                                        if ( option === 'replace' ) {
    8186                                                                element = editor.dom.replace( html, wrap );
    8287                                                        } else {
    8388                                                                element.appendChild( html );
     
    8590                                                }
    8691
    8792                                                if ( _.isFunction( callback ) ) {
    88                                                         callback( self, editor, $( element ).children( '.wpview-content' )[0] );
     93                                                        callback( self, editor, $( element ).find( '.wpview-content' )[0] );
    8994                                                }
    9095                                        } );
    9196                                }
     
    267272                                tag: 'div',
    268273
    269274                                attrs: {
    270                                         'class': 'wpview-wrap wpview-type-' + viewType,
     275                                        'class': 'wpview-wrap',
    271276                                        'data-wpview-text': encodedText,
    272                                         'data-wpview-type': viewType,
    273                                         'contenteditable': 'false'
     277                                        'data-wpview-type': viewType
    274278                                },
    275279
    276280                                content: '\u00a0'
     
    736740                                        if ( self.type === 'embed' ) {
    737741                                                self.setError( response.message, 'admin-media' );
    738742                                        } else {
    739                                                 self.setContent( '<p>' + self.original + '</p>', null, true );
     743                                                self.setContent( '<p>' + self.original + '</p>', null, 'replace' );
    740744                                        }
    741745                                } else if ( response && response.statusText ) {
    742746                                        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;
    2012
    2113        function isView( node ) {
    22                 return node && /\bwpview-wrap\b/.test( node.className );
     14                return editor.dom.getParent( node, function( node ) {
     15                        return editor.dom.hasClass( node, 'wpview-wrap' );
     16                } );
    2317        }
    2418
    2519        function createPadNode() {
    2620                return editor.dom.create( 'p', { 'data-wpview-pad': 1 },
    27                         ( tinymce.Env.ie && tinymce.Env.ie < 11 ) ? '' : '<br data-mce-bogus="1" />' );
     21                        ( Env.ie && Env.ie < 11 ) ? '' : '<br data-mce-bogus="1" />' );
    2822        }
    2923
    3024        /**
    3125         * Get the text/shortcode string for a view.
    3226         *
    33          * @param view The view wrapper's HTML id or node
     27         * @param view The view wrapper's node
    3428         * @returns string The text/shoercode string of the view
    3529         */
    3630        function getViewText( view ) {
    37                 view = getParentView( typeof view === 'string' ? editor.dom.get( view ) : view );
     31                view = isView( view );
    3832
    3933                if ( view ) {
    4034                        return window.decodeURIComponent( editor.dom.getAttrib( view, 'data-wpview-text' ) || '' );
     
    4943         * @param text The text string to be set
    5044         */
    5145        function setViewText( view, text ) {
    52                 view = getParentView( typeof view === 'string' ? editor.dom.get( view ) : view );
     46                view = isView( view );
    5347
    5448                if ( view ) {
    5549                        editor.dom.setAttrib( view, 'data-wpview-text', window.encodeURIComponent( text || '' ) );
     
    6155        function _stop( event ) {
    6256                event.stopPropagation();
    6357        }
     58       
     59        function setViewCursor( before, view ) {
     60                var location = before ? 'before' : 'after',
     61                        offset = before ? 0 : 1;
     62                editor.selection.setCursorLocation( editor.dom.select( '.wpview-selection-' + location, view )[0], offset );
     63        }
     64
     65        function handleEnter( view, before ) {
     66                var dom = editor.dom,
     67                        padNode;
     68
     69                if ( ! before && view.nextSibling && dom.isEmpty( view.nextSibling ) && view.nextSibling.nodeName === 'P' ) {
     70                        padNode = view.nextSibling;
     71                } else if ( before && view.previousSibling && dom.isEmpty( view.previousSibling ) && view.previousSibling.nodeName === 'P' ) {
     72                        padNode = view.previousSibling;
     73                } else {
     74                        padNode = dom.create( 'p' );
     75
     76                        if ( ! ( Env.ie && Env.ie < 11 ) ) {
     77                                padNode.innerHTML = '<br data-mce-bogus="1">';
     78                        }
     79
     80                        if ( before ) {
     81                                view.parentNode.insertBefore( padNode, view );
     82                        } else {
     83                                dom.insertAfter( padNode, view );
     84                        }
     85                }
     86
     87                deselect();
     88                editor.selection.setCursorLocation( padNode, 0 );
     89                editor.nodeChanged();
     90        }
    6491
    6592        function select( viewNode ) {
    6693                var clipboard,
     
    116143                selected = null;
    117144        }
    118145
    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 
    140146        // Check if the `wp.mce` API exists.
    141147        if ( typeof wp === 'undefined' || ! wp.mce ) {
    142148                return;
     
    244250                // or inserted is added to a text node (instead of the view).
    245251                editor.on( 'BeforeSetContent', function() {
    246252                        var walker, target,
    247                                 view = getParentView( selection.getNode() );
     253                                view = isView( selection.getNode() );
    248254
    249255                        // If the selection is not within a view, bail.
    250256                        if ( ! view ) {
     
    286292                });
    287293
    288294                editor.dom.bind( editor.getBody().parentNode, 'mousedown mouseup click', function( event ) {
    289                         var view = getParentView( event.target ),
     295                        var view = isView( event.target ),
    290296                                deselectEventType;
    291297
    292298                        // Contain clicks inside the view wrapper
     
    294300                                event.stopPropagation();
    295301
    296302                                // 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 ) {
     303                                if ( Env.ie <= 10 ) {
    298304                                        deselect();
    299305                                }
    300306
     
    314320
    315321                                // Fix issue with deselecting a view in IE8. Without this hack, clicking content above the view wouldn't actually deselect it
    316322                                // and the caret wouldn't be placed at the mouse location
    317                                 if ( tinymce.Env.ie && tinymce.Env.ie <= 8 ) {
     323                                if ( Env.ie && Env.ie <= 8 ) {
    318324                                        deselectEventType = 'mouseup';
    319325                                } else {
    320326                                        deselectEventType = 'mousedown';
     
    361367                }
    362368        });
    363369
     370
     371        // Handle key presses for selected views.
    364372        editor.on( 'keydown', function( event ) {
    365                 var keyCode = event.keyCode,
    366                         body = editor.getBody(),
    367                         view, padNode;
     373                var dom = editor.dom,
     374                        keyCode = event.keyCode,
     375                        selection = editor.selection,
     376                        view;
    368377
    369378                // If a view isn't selected, let the event go on its merry way.
    370379                if ( ! selected ) {
    371380                        return;
    372381                }
    373382
    374                 // Let keypresses that involve the command or control keys through.
     383                // Let key presses that involve the command or control keys through.
    375384                // Also, let any of the F# keys through.
    376385                if ( event.metaKey || event.ctrlKey || ( keyCode >= 112 && keyCode <= 123 ) ) {
    377                         if ( ( event.metaKey || event.ctrlKey ) && keyCode === 88 ) {
    378                                 toRemove = selected;
     386                        // But remove the view when cmd/ctrl + x/backspace are pressed.
     387                        if ( ( event.metaKey || event.ctrlKey ) && ( keyCode === 88 || keyCode === VK.BACKSPACE ) ) {
     388                                // We'll remove a cut view on keyup, otherwise the browser can't copy the content.
     389                                if ( keyCode === 88 ) {
     390                                        toRemove = selected;
     391                                } else {
     392                                        editor.dom.remove( selected );
     393                                }
    379394                        }
    380395                        return;
    381396                }
    382397
    383                 view = getParentView( editor.selection.getNode() );
     398                view = isView( selection.getNode() );
    384399
    385                 // If the caret is not within the selected view, deselect the
    386                 // view and bail.
     400                // If the caret is not within the selected view, deselect the view and bail.
    387401                if ( view !== selected ) {
    388402                        deselect();
    389403                        return;
    390404                }
    391405
    392                 // Deselect views with the arrow keys
    393406                if ( keyCode === VK.LEFT || keyCode === VK.UP ) {
     407                        setViewCursor( true, view );
    394408                        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                         }
    408409                } else if ( keyCode === VK.RIGHT || keyCode === VK.DOWN ) {
     410                        setViewCursor( false, view );
    409411                        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                         }
     412                } else if ( keyCode === VK.ENTER ) {
     413                        handleEnter( view );
    422414                } else if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) {
    423                         // If delete or backspace is pressed, delete the view.
    424                         editor.dom.remove( selected );
     415                        dom.remove( selected );
    425416                }
    426417
    427418                event.preventDefault();
    428419        });
    429420
    430         // Select views when arrow keys are used to navigate the content of the editor.
     421        // (De)select views when arrow keys are used to navigate the content of the editor.
    431422        editor.on( 'keydown', function( event ) {
    432423                var keyCode = event.keyCode,
    433424                        dom = editor.dom,
    434                         range = editor.selection.getRng(),
    435                         startNode = range.startContainer,
    436                         body = editor.getBody(),
    437                         node, container;
     425                        selection = editor.selection,
     426                        node = selection.getNode(),
     427                        cursorBefore = ( node.className === 'wpview-selection-before' ),
     428                        cursorAfter = ( node.className === 'wpview-selection-after' ),
     429                        view;
    438430
    439                 if ( ! startNode || startNode === body || event.metaKey || event.ctrlKey ) {
     431                if ( ! cursorBefore && ! cursorAfter ) {
    440432                        return;
    441433                }
    442434
    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                         }
     435                if ( event.metaKey || event.ctrlKey || ( keyCode >= 112 && keyCode <= 123 ) ) {
     436                        return;
     437                }
    448438
    449                         if ( ! ( node = dom.getParent( startNode, dom.isBlock ) ) ) {
    450                                 return;
    451                         }
     439                if ( ( cursorBefore && keyCode === VK.LEFT ) || ( cursorAfter && keyCode === VK.RIGHT ) ) {
     440                        return;
     441                }
    452442
    453                         if ( selectSiblingView( node, 'previous' ) ) {
    454                                 event.preventDefault();
     443                view = isView( node );
     444
     445                if ( ( cursorAfter && keyCode === VK.UP ) || ( cursorBefore && keyCode === VK.BACKSPACE ) ) {
     446                        if ( view.previousSibling ) {
     447                                if ( isView( view.previousSibling ) ) {
     448                                        setViewCursor( false, view.previousSibling );
     449                                } else {
     450                                        selection.select( view.previousSibling, true );
     451                                        selection.collapse();
     452                                }
     453                        } else {
     454                                handleEnter( view, true );
    455455                        }
    456                 } else if ( keyCode === VK.DOWN || keyCode === VK.RIGHT ) {
    457                         if ( ! ( node = dom.getParent( startNode, dom.isBlock ) ) ) {
    458                                 return;
     456                        event.preventDefault();
     457                } else if ( cursorAfter && keyCode === VK.DOWN ) {
     458                        if ( view.nextSibling ) {
     459                                if ( isView( view.nextSibling ) ) {
     460                                        setViewCursor( false, view.nextSibling );
     461                                } else {
     462                                        return;
     463                                }
     464                        } else {
     465                                handleEnter( view );
    459466                        }
    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 
     467                        event.preventDefault();
     468                } else if ( cursorBefore && keyCode === VK.UP ) {
     469                        if ( view.previousSibling ) {
     470                                if ( isView( view.previousSibling ) ) {
     471                                        setViewCursor( true, view.previousSibling );
     472                                } else {
    468473                                        return;
    469474                                }
    470 
    471                                 // In a child element
    472                                 while ( container && container !== node && container !== body ) {
    473                                         if ( container.nextSibling ) {
    474                                                 return;
    475                                         }
    476                                         container = container.parentNode;
     475                        } else {
     476                                handleEnter( view, true );
     477                        }
     478                        event.preventDefault();
     479                } else if ( cursorBefore && keyCode === VK.DOWN ) {
     480                        if ( view.previousSibling ) {
     481                                if ( isView( view.nextSibling ) ) {
     482                                        setViewCursor( true, view.nextSibling );
     483                                } else {
     484                                        selection.setCursorLocation( view.nextSibling, 0 );
    477485                                }
     486                        } else {
     487                                handleEnter( view );
    478488                        }
     489                        event.preventDefault();
     490                } else if ( ( cursorAfter && keyCode === VK.LEFT ) || ( cursorBefore && keyCode === VK.RIGHT ) ) {
     491                        select( view );
     492                        event.preventDefault();
     493                } else if ( cursorAfter && keyCode === VK.BACKSPACE ) {
     494                        dom.remove( view );
     495                        event.preventDefault();
     496                } else if ( cursorAfter ) {
     497                        handleEnter( view );
     498                } else if ( cursorBefore ) {
     499                        handleEnter( view , true);
     500                }
     501
     502                if ( keyCode === VK.ENTER ) {
     503                        event.preventDefault();
     504                }
     505        });
    479506
    480                         if ( selectSiblingView( node, 'next' ) ) {
     507        // Make sure we don't eat any content.
     508        editor.on( 'keydown', function( event ) {
     509                var selection = editor.selection,
     510                        range, view;
     511
     512                if ( event.keyCode === VK.BACKSPACE ) {
     513                        if ( ( range = selection.getRng() ) &&
     514                                        range.startOffset === 0 &&
     515                                        range.endOffset === 0 &&
     516                                        selection.isCollapsed() &&
     517                                        ( view = isView( selection.getNode().previousSibling ) ) &&
     518                                        ! editor.dom.isEmpty( selection.getNode() ) ) {
     519                                setViewCursor( false, view );
    481520                                event.preventDefault();
    482521                        }
    483522                }
     
    515554                        }
    516555                }
    517556        });
     557       
     558        editor.on( 'nodechange', function( event ) {
     559                var dom = editor.dom,
     560                        views = editor.dom.select( '.wpview-wrap' ),
     561                        className = event.element.className,
     562                        view = event.element.parentNode;
     563
     564                clearInterval( cursorInterval );
     565
     566                dom.removeClass( views, 'wpview-selection-before' );
     567                dom.removeClass( views, 'wpview-selection-after' );
     568                dom.removeClass( views, 'wpview-cursor-hide' );
     569
     570                if ( ! selected && className === 'wpview-selection-before' || className === 'wpview-selection-after' ) {
     571                        dom.addClass( view, className );
     572
     573                        cursorInterval = setInterval( function() {
     574                                if ( dom.hasClass( view, 'wpview-cursor-hide' ) ) {
     575                                        dom.removeClass( view, 'wpview-cursor-hide' );
     576                                } else {
     577                                        dom.addClass( view, 'wpview-cursor-hide' );
     578                                }
     579                        }, 500 );
     580                }
     581        } );
    518582
    519583        return {
    520584                getViewText: getViewText,
  • src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

     
    203203}
    204204
    205205/* hide the shortcode content, but allow the content to still be selected */
    206 .wpview-wrap .wpview-clipboard {
     206.wpview-wrap .wpview-clipboard,
     207.wpview-wrap > p {
    207208        position: absolute;
    208209        top: 0;
    209210        left: 0;
     
    219220}
    220221
    221222.wpview-wrap .wpview-clipboard,
    222 .wpview-wrap .wpview-clipboard * {
     223.wpview-wrap .wpview-clipboard *,
     224.wpview-wrap > p {
    223225        -moz-user-select: text;
    224226        -webkit-user-select: text;
    225227        -ms-user-select: text;
    226228        user-select: text;
    227229}
    228230
     231.wpview-wrap.wpview-selection-before:before,
     232.wpview-wrap.wpview-selection-after:before {
     233        content: '';
     234        margin: 0;
     235        padding: 0;
     236        position: absolute;
     237        top: -2px;
     238        left: -3px;
     239        bottom: -2px;
     240        width: 1px;
     241        background-color: black;
     242        -webkit-transition: opacity 0.15s ease-out;
     243        -moz-transition: opacity 0.15s ease-out;
     244        transition: opacity 0.15s ease-out;
     245        opacity: 1;
     246}
     247
     248.wpview-wrap.wpview-selection-after:before {
     249        left: auto;
     250        right: -3px;
     251}
     252
     253.wpview-wrap.wpview-cursor-hide:before {
     254        opacity: 0;
     255}
     256
    229257/**
    230258 * Media previews
    231259 */
     
    341369}
    342370
    343371/* Audio player is short; therefore let's put the toolbar above */
    344 .wpview-type-audio .toolbar {
     372.wpview-wrap[data-wpview-type="audio"] .toolbar {
    345373        top: auto;
    346374        bottom: -34px;
    347375}
    348376
    349 .wpview-type-audio .toolbar div {
     377.wpview-wrap[data-wpview-type="audio"] .toolbar div {
    350378        margin-top: 0;
    351379}
    352380
    353 .wpview-type-audio .toolbar div:first-child {
     381.wpview-wrap[data-wpview-type="audio"] .toolbar div:first-child {
    354382        margin-left: 0;
    355383}
    356384