Changeset 29010

Timestamp:

07/07/2014 01:20:53 AM (10 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:

• js/tinymce/plugins/wpview/plugin.js (modified) (9 diffs)
• js/tinymce/skins/wordpress/wp-content.css (modified) (2 diffs)
• version.php (modified) (1 diff)

trunk/src/wp-includes/js/tinymce/plugins/wpview/plugin.js

@@ -9 +9 @@
         TreeWalker = tinymce.dom.TreeWalker,
         toRemove = false,
-        cursorInterval, lastKeyDownNode, setViewCursorTries;
+        firstFocus = true,
+        cursorInterval, lastKeyDownNode, setViewCursorTries, focus;
 
     function getView( node ) {
@@ -350 +351 @@
             node = selection.getNode(),
             view = getView( node ),
-            cursorBefore, cursorAfter;
+            cursorBefore, cursorAfter,
+            range, clonedRange, tempRange;
 
         lastKeyDownNode = node;
+
+        // Make sure we don't delete part of a view.
+        // If the range ends or starts with the view, we'll need to trim it.
+        if ( ! selection.isCollapsed() ) {
+            range = selection.getRng();
+
+            if ( view = getView( range.endContainer ) ) {
+                clonedRange = range.cloneRange();
+                selection.select( view.previousSibling, true );
+                selection.collapse();
+                tempRange = selection.getRng();
+                clonedRange.setEnd( tempRange.endContainer, tempRange.endOffset );
+                selection.setRng( clonedRange );
+            } else if ( view = getView( range.startContainer ) ) {
+                clonedRange = range.cloneRange();
+                clonedRange.setStart( view.nextSibling, 0 );
+                selection.setRng( clonedRange );
+            }
+        }
 
         if ( ! view ) {
@@ -376 +397 @@
                 }
             } else {
-                handleEnter( view, true );
+                setViewCursor( true, view );
             }
             event.preventDefault();
@@ -382 +403 @@
             if ( view.nextSibling ) {
                 if ( getView( view.nextSibling ) ) {
-                    setViewCursor( false, view.nextSibling );
+                    setViewCursor( keyCode === VK.RIGHT, view.nextSibling );
                 } else {
                     selection.setCursorLocation( view.nextSibling, 0 );
                 }
-            } else {
-                handleEnter( view );
             }
             event.preventDefault();
@@ -393 +412 @@
             if ( view.previousSibling ) {
                 if ( getView( view.previousSibling ) ) {
-                    setViewCursor( true, view.previousSibling );
+                    setViewCursor( keyCode === VK.UP, view.previousSibling );
                 } else {
                     selection.select( view.previousSibling, true );
                     selection.collapse();
                 }
-            } else {
-                handleEnter( view, true );
             }
             event.preventDefault();
@@ -410 +427 @@
                 }
             } else {
-                handleEnter( view );
+                setViewCursor( false, view );
             }
             event.preventDefault();
@@ -466 +483 @@
         }
 
-        if ( keyCode === VK.LEFT || keyCode === VK.UP ) {
+        if ( keyCode === VK.LEFT ) {
             setViewCursor( true, view );
             deselect();
-        } else if ( keyCode === VK.RIGHT || keyCode === VK.DOWN ) {
+        } else if ( keyCode === VK.UP ) {
+            if ( view.previousSibling ) {
+                if ( getView( view.previousSibling ) ) {
+                    setViewCursor( true, view.previousSibling );
+                } else {
+                    selection.select( view.previousSibling, true );
+                    selection.collapse();
+                }
+            } else {
+                setViewCursor( true, view );
+            }
+            deselect();
+        } else if ( keyCode === VK.RIGHT ) {
             setViewCursor( false, view );
+            deselect();
+        } else if ( keyCode === VK.DOWN ) {
+            if ( view.nextSibling ) {
+                if ( getView( view.nextSibling ) ) {
+                    setViewCursor( false, view.nextSibling );
+                } else {
+                    selection.setCursorLocation( view.nextSibling, 0 );
+                }
+            } else {
+                setViewCursor( false, view );
+            }
             deselect();
         } else if ( keyCode === VK.ENTER ) {
@@ -512 +552 @@
     });
 
+    editor.on( 'focus', function() {
+        var view;
+        
+        focus = true;
+        editor.dom.addClass( editor.getBody(), 'has-focus' );
+
+        // Edge case: show the fake caret when the editor is focused for the first time
+        // and the first element is a view.
+        if ( firstFocus && ( view = getView( editor.getBody().firstChild ) ) ) {
+            setViewCursor( true, view );
+        }
+
+        firstFocus = false;
+    } );
+
+    editor.on( 'blur', function() {
+        focus = false;
+        editor.dom.removeClass( editor.getBody(), 'has-focus' );
+    } );
+
     editor.on( 'nodechange', function( event ) {
         var dom = editor.dom,
@@ -527 +587 @@
         dom.removeClass( views, 'wpview-cursor-hide' );
 
-        if ( view ) {
+        if ( view && editor.selection.isCollapsed() && focus ) {
             if ( className === 'wpview-selection-before' || className === 'wpview-selection-after' ) {
                 setViewCursorTries = 0;

trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -242 +242 @@
 }
 
-.wpview-wrap.wpview-selection-before:before,
-.wpview-wrap.wpview-selection-after:before {
+.has-focus .wpview-wrap.wpview-selection-before:before,
+.has-focus .wpview-wrap.wpview-selection-after:before {
     content: '';
     margin: 0;
@@ -259 +259 @@
 }
 
-.wpview-wrap.wpview-selection-after:before {
+.has-focus .wpview-wrap.wpview-selection-after:before {
     left: auto;
     right: -3px;
 }
 
-.wpview-wrap.wpview-cursor-hide:before {
+.has-focus .wpview-wrap.wpview-cursor-hide:before {
     opacity: 0;
 }

trunk/src/wp-includes/version.php

@@ -19 +19 @@
  * @global string $tinymce_version
  */
-$tinymce_version = '4028-20140630';
+$tinymce_version = '4028-20140706';
 
 /**