Changeset 36627

Timestamp:

02/23/2016 08:32:34 AM (9 years ago)

Author:

iseulde

Message:

TinyMCE: inline text patterns

First run.

See #33300.

Location:

trunk

Files:

• src/wp-includes/js/tinymce/plugins/wptextpattern/plugin.js (modified) (3 diffs)
• tests/qunit/wp-includes/js/tinymce/plugins/wptextpattern/plugin.js (modified) (2 diffs)

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

@@ -13 +13 @@
 ( function( tinymce, setTimeout ) {
     tinymce.PluginManager.add( 'wptextpattern', function( editor ) {
-        var VK = tinymce.util.VK,
-            spacePatterns = [
-                { regExp: /^[*-]\s/, cmd: 'InsertUnorderedList' },
-                { regExp: /^1[.)]\s/, cmd: 'InsertOrderedList' }
-            ],
-            enterPatterns = [
-                { start: '##', format: 'h2' },
-                { start: '###', format: 'h3' },
-                { start: '####', format: 'h4' },
-                { start: '#####', format: 'h5' },
-                { start: '######', format: 'h6' },
-                { start: '>', format: 'blockquote' }
-            ],
-            canUndo, refNode, refPattern;
+        var VK = tinymce.util.VK;
+
+        var spacePatterns = [
+            { regExp: /^[*-]\s/, cmd: 'InsertUnorderedList' },
+            { regExp: /^1[.)]\s/, cmd: 'InsertOrderedList' }
+        ];
+
+        var enterPatterns = [
+            { start: '##', format: 'h2' },
+            { start: '###', format: 'h3' },
+            { start: '####', format: 'h4' },
+            { start: '#####', format: 'h5' },
+            { start: '######', format: 'h6' },
+            { start: '>', format: 'blockquote' }
+        ];
+
+        var inlinePatterns = [
+            { start: '*', end: '*', format: 'italic' },
+            { start: '**', end: '**', format: 'bold' },
+            { start: '_', end: '_', format: 'italic' },
+            { start: '__', end: '__', format: 'bold' },
+            { start: '`', end: '`', format: 'code' }
+        ];
+
+        var canUndo;
+        var refNode;
+        var refPattern;
+        var chars = [];
+        var zeroWidthSpaceNode;
+
+        tinymce.each( inlinePatterns, function( pattern ) {
+            tinymce.each( ( pattern.start + pattern.end ).split( '' ), function( c ) {
+                if ( tinymce.inArray( chars, c ) === -1 ) {
+                    chars.push( c );
+                }
+            } );
+        } );
 
         editor.on( 'selectionchange', function() {
+            var offset;
+
             canUndo = null;
+
+            if ( zeroWidthSpaceNode ) {
+                offset = zeroWidthSpaceNode.data.indexOf( '\u200b' );
+
+                if ( offset !== -1 ) {
+                    zeroWidthSpaceNode.deleteData( offset, offset + 1 );
+                }
+            }
         } );
 
@@ -49 +82 @@
             } else if ( event.keyCode === VK.ENTER && ! VK.modifierPressed( event ) ) {
                 enter();
+            } else if ( event.keyCode > 47 && ! ( event.keyCode >= 91 && event.keyCode <= 93 ) ) {
+                inline();
             }
         } );
+
+        function inline() {
+            var rng = editor.selection.getRng();
+            var node = rng.startContainer;
+            var offset = rng.startOffset;
+            var startOffset;
+            var endOffset;
+            var pattern;
+            var format;
+            var zero;
+
+            if ( node.nodeType !== 3 || ! node.data.length || ! offset ) {
+                return;
+            }
+
+            if ( tinymce.inArray( chars, node.data.charAt( offset - 1 ) ) === -1 ) {
+                return;
+            }
+
+            function findStart( node ) {
+                var i = inlinePatterns.length;
+                var offset;
+
+                while ( i-- ) {
+                    pattern = inlinePatterns[ i ];
+                    offset = node.data.indexOf( pattern.end );
+
+                    if ( offset !== -1 ) {
+                        return offset;
+                    }
+                }
+            }
+
+            startOffset = findStart( node );
+            endOffset = node.data.lastIndexOf( pattern.end );
+
+            if ( startOffset === endOffset || endOffset === -1 ) {
+                return;
+            }
+
+            if ( endOffset - startOffset <= pattern.start.length ) {
+                return;
+            }
+
+            if ( node.data.slice( startOffset + pattern.start.length, endOffset ).indexOf( pattern.start.slice( 0, 1 ) ) !== -1 ) {
+                return;
+            }
+
+            format = editor.formatter.get( pattern.format );
+
+            if ( format && format[0].inline ) {
+                editor.undoManager.add();
+
+                editor.undoManager.transact( function() {
+                    node.insertData( offset, '\u200b' );
+
+                    node = node.splitText( startOffset );
+                    zero = node.splitText( offset - startOffset );
+
+                    node.deleteData( 0, pattern.start.length );
+                    node.deleteData( node.data.length - pattern.end.length, pattern.end.length );
+
+                    editor.formatter.apply( pattern.format, {}, node );
+
+                    editor.selection.setCursorLocation( zero, 1 );
+                } );
+
+                // We need to wait for native events to be triggered.
+                setTimeout( function() {
+                    canUndo = 'space';
+                    zeroWidthSpaceNode = zero;
+                } );
+            }
+        }
 
         function firstTextNode( node ) {
@@ -158 +267 @@
 
         function ltrim( text ) {
-            if ( text ) {
-                return text.replace( /^\s+/, '' );
-            }
-
-            return '';
+            return text ? text.replace( /^\s+/, '' ) : '';
         }
 

trunk/tests/qunit/wp-includes/js/tinymce/plugins/wptextpattern/plugin.js

@@ -15 +15 @@
                 'd': 68, 'e': 69, 'f': 70, 'g': 71, 'h': 72, 'i': 73, 'j': 74, 'k': 75, 'l': 76, 'm': 77, 'n': 78, 'o': 79, 'p': 80, 'q': 81,
                 'r': 82, 's': 83, 't': 84, 'u': 85, 'v': 86, 'w': 87, 'x': 88, 'y': 89, ' ': 32, ',': 188, '-': 189, '.': 190, '/': 191, '\\': 220,
-                '[': 219, ']': 221, '\'': 222, ';': 186, '=': 187, ')': 41
+                '[': 219, ']': 221, '\'': 222, ';': 186, '=': 187, ')': 41,
+                '*': 48 // Anything will do.
             };
 
@@ -278 +279 @@
         }, assert.async() );
     } );
+
+    QUnit.test( 'Inline: single.', function( assert ) {
+        type( '*test*', function() {
+            assert.equal( editor.getContent(), '<p><em>test</em></p>' );
+            assert.equal( editor.selection.getRng().startOffset, 1 );
+        }, assert.async() );
+    } );
+
+    QUnit.test( 'Inline: double.', function( assert ) {
+        type( '**test**', function() {
+            assert.equal( editor.getContent(), '<p><strong>test</strong></p>' );
+            assert.equal( editor.selection.getRng().startOffset, 1 );
+        }, assert.async() );
+    } );
+
+    QUnit.test( 'Inline: after typing.', function( assert ) {
+        editor.setContent( '<p>test test test</p>' );
+        editor.selection.setCursorLocation( editor.$( 'p' )[0].firstChild, 5 );
+
+        type( '**', function() {
+            editor.selection.setCursorLocation( editor.$( 'p' )[0].firstChild, 11 );
+        }, '**', function() {
+            assert.equal( editor.getContent(), '<p>test <strong>test</strong> test</p>' );
+            assert.equal( editor.selection.getRng().startOffset, 1 );
+        }, assert.async() );
+    } );
+
+    QUnit.test( 'Inline: no change.', function( assert ) {
+        type( '******', function() {
+            assert.equal( editor.getContent(), '<p>******</p>' );
+        }, assert.async() );
+    } );
 } )( window.jQuery, window.QUnit, window.tinymce, window.setTimeout );