Changeset 32699

Timestamp:

06/06/2015 08:07:00 PM (8 years ago)

Author:

iseulde

Message:

TinyMCE: add wptextpattern plugin

This plugin can automatically format text patterns as you type. It includes two patterns: unordered (* and - ) and ordered list (1. and 1) ). If the transformation in unwanted, the user can undo the change by pressing backspace, using the undo shortcut, or the undo button in the toolbar.

This is the first TinyMCE plugin that has unit tests and there's some good groundwork for adding tests to existing plugins in the future.

First run. See #31441.

Location:

trunk

Files:

• src/wp-includes/class-wp-editor.php (modified) (1 diff)
• src/wp-includes/js/tinymce/plugins/wptextpattern (added)
• src/wp-includes/js/tinymce/plugins/wptextpattern/plugin.js (added)
• tests/qunit/editor/js/utils.js (modified) (5 diffs)
• tests/qunit/index.html (modified) (1 diff)
• tests/qunit/wp-includes/js/tinymce (added)
• tests/qunit/wp-includes/js/tinymce/plugins (added)
• tests/qunit/wp-includes/js/tinymce/plugins/wptextpattern (added)
• tests/qunit/wp-includes/js/tinymce/plugins/wptextpattern/plugin.js (added)

trunk/src/wp-includes/class-wp-editor.php

@@ -369 +369 @@
                         'wplink',
                         'wpdialogs',
-                        'wpview',
+                        'wptextpattern',
+                        'wpview'
                     );
 

trunk/tests/qunit/editor/js/utils.js

@@ -132 +132 @@
     // TODO: Replace this with the new event logic in 3.5
     function type(chr) {
-        var editor = tinymce.activeEditor, keyCode, charCode, evt, startElm, rng;
+        var editor = tinymce.activeEditor, keyCode, charCode, evt, startElm, rng, startContainer, startOffset, textNode;
+
+        function charCodeToKeyCode(charCode) {
+            var lookup = {
+                '0': 48, '1': 49, '2': 50, '3': 51, '4': 52, '5': 53, '6': 54, '7': 55, '8': 56, '9': 57,'a': 65, 'b': 66, 'c': 67,
+                '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
+            };
+
+            return lookup[String.fromCharCode(charCode)];
+        }
 
         function fakeEvent(target, type, evt) {
@@ -140 +151 @@
         // Numeric keyCode
         if (typeof(chr) == "number") {
-            charCode = keyCode = chr;
+            charCode = chr;
+            keyCode = charCodeToKeyCode(charCode);
         } else if (typeof(chr) == "string") {
             // String value
@@ -151 +163 @@
             } else {
                 charCode = chr.charCodeAt(0);
-                keyCode = charCode;
+                keyCode = charCodeToKeyCode(charCode);
             }
         } else {
             evt = chr;
+
+            if (evt.charCode) {
+                chr = String.fromCharCode(evt.charCode);
+            }
+
+            if (evt.keyCode) {
+                keyCode = evt.keyCode;
+            }
         }
 
@@ -176 +196 @@
                 } else {
                     rng = editor.selection.getRng();
-
-                    if (rng.startContainer.nodeType == 1 && rng.collapsed) {
-                        var nodes = rng.startContainer.childNodes, lastNode = nodes[nodes.length - 1];
-
-                        // If caret is at <p>abc|</p> and after the abc text node then move it to the end of the text node
-                        // Expand the range to include the last char <p>ab[c]</p> since IE 11 doesn't delete otherwise
-                        if (rng.startOffset >= nodes.length - 1 && lastNode && lastNode.nodeType == 3 && lastNode.data.length > 0) {
-                            rng.setStart(lastNode, lastNode.data.length - 1);
-                            rng.setEnd(lastNode, lastNode.data.length);
-                            editor.selection.setRng(rng);
-                        }
+                    startContainer = rng.startContainer;
+
+                    if (startContainer.nodeType == 1 && rng.collapsed) {
+                        var nodes = rng.startContainer.childNodes;
+                        startContainer = nodes[nodes.length - 1];
+                    }
+
+                    // If caret is at <p>abc|</p> and after the abc text node then move it to the end of the text node
+                    // Expand the range to include the last char <p>ab[c]</p> since IE 11 doesn't delete otherwise
+                    if ( rng.collapsed && startContainer && startContainer.nodeType == 3 && startContainer.data.length > 0) {
+                        rng.setStart(startContainer, startContainer.data.length - 1);
+                        rng.setEnd(startContainer, startContainer.data.length);
+                        editor.selection.setRng(rng);
                     }
 
@@ -195 +217 @@
 
                 if (rng.startContainer.nodeType == 3 && rng.collapsed) {
-                    rng.startContainer.insertData(rng.startOffset, chr);
-                    rng.setStart(rng.startContainer, rng.startOffset + 1);
-                    rng.collapse(true);
-                    editor.selection.setRng(rng);
+                    // `insertData` may alter the range.
+                    startContainer = rng.startContainer;
+                    startOffset = rng.startOffset;
+                    rng.startContainer.insertData( rng.startOffset, chr );
+                    rng.setStart( startContainer, startOffset + 1 );
                 } else {
-                    rng.insertNode(editor.getDoc().createTextNode(chr));
+                    textNode = editor.getDoc().createTextNode(chr);
+                    rng.insertNode(textNode);
+                    rng.setStart(textNode, 1);
                 }
+
+                rng.collapse(true);
+                editor.selection.setRng(rng);
             }
         }

trunk/tests/qunit/index.html

@@ -109 +109 @@
             </li>
         </script>
+
+        <!-- TinyMCE -->
+
+        <script src="../../src/wp-includes/js/tinymce/tinymce.js"></script>
+        <script src="editor/js/utils.js"></script>
+        <script src="wp-includes/js/tinymce/plugins/wptextpattern/plugin.js"></script>
     </body>
 </html>