Make WordPress Core

Changeset 32699


Ignore:
Timestamp:
06/06/2015 08:07:00 PM (10 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:
6 added
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-editor.php

    r32677 r32699  
    369369                        'wplink',
    370370                        'wpdialogs',
    371                         'wpview',
     371                        'wptextpattern',
     372                        'wpview'
    372373                    );
    373374
  • trunk/tests/qunit/editor/js/utils.js

    r30675 r32699  
    132132    // TODO: Replace this with the new event logic in 3.5
    133133    function type(chr) {
    134         var editor = tinymce.activeEditor, keyCode, charCode, evt, startElm, rng;
     134        var editor = tinymce.activeEditor, keyCode, charCode, evt, startElm, rng, startContainer, startOffset, textNode;
     135
     136        function charCodeToKeyCode(charCode) {
     137            var lookup = {
     138                '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,
     139                '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,
     140                'r': 82, 's': 83, 't': 84, 'u': 85, 'v': 86, 'w': 87, 'x': 88, 'y': 89, ' ': 32, ',': 188, '-': 189, '.': 190, '/': 191, '\\': 220,
     141                '[': 219, ']': 221, '\'': 222, ';': 186, '=': 187, ')': 41
     142            };
     143
     144            return lookup[String.fromCharCode(charCode)];
     145        }
    135146
    136147        function fakeEvent(target, type, evt) {
     
    140151        // Numeric keyCode
    141152        if (typeof(chr) == "number") {
    142             charCode = keyCode = chr;
     153            charCode = chr;
     154            keyCode = charCodeToKeyCode(charCode);
    143155        } else if (typeof(chr) == "string") {
    144156            // String value
     
    151163            } else {
    152164                charCode = chr.charCodeAt(0);
    153                 keyCode = charCode;
     165                keyCode = charCodeToKeyCode(charCode);
    154166            }
    155167        } else {
    156168            evt = chr;
     169
     170            if (evt.charCode) {
     171                chr = String.fromCharCode(evt.charCode);
     172            }
     173
     174            if (evt.keyCode) {
     175                keyCode = evt.keyCode;
     176            }
    157177        }
    158178
     
    176196                } else {
    177197                    rng = editor.selection.getRng();
    178 
    179                     if (rng.startContainer.nodeType == 1 && rng.collapsed) {
    180                         var nodes = rng.startContainer.childNodes, lastNode = nodes[nodes.length - 1];
    181 
    182                         // If caret is at <p>abc|</p> and after the abc text node then move it to the end of the text node
    183                         // Expand the range to include the last char <p>ab[c]</p> since IE 11 doesn't delete otherwise
    184                         if (rng.startOffset >= nodes.length - 1 && lastNode && lastNode.nodeType == 3 && lastNode.data.length > 0) {
    185                             rng.setStart(lastNode, lastNode.data.length - 1);
    186                             rng.setEnd(lastNode, lastNode.data.length);
    187                             editor.selection.setRng(rng);
    188                         }
     198                    startContainer = rng.startContainer;
     199
     200                    if (startContainer.nodeType == 1 && rng.collapsed) {
     201                        var nodes = rng.startContainer.childNodes;
     202                        startContainer = nodes[nodes.length - 1];
     203                    }
     204
     205                    // If caret is at <p>abc|</p> and after the abc text node then move it to the end of the text node
     206                    // Expand the range to include the last char <p>ab[c]</p> since IE 11 doesn't delete otherwise
     207                    if ( rng.collapsed && startContainer && startContainer.nodeType == 3 && startContainer.data.length > 0) {
     208                        rng.setStart(startContainer, startContainer.data.length - 1);
     209                        rng.setEnd(startContainer, startContainer.data.length);
     210                        editor.selection.setRng(rng);
    189211                    }
    190212
     
    195217
    196218                if (rng.startContainer.nodeType == 3 && rng.collapsed) {
    197                     rng.startContainer.insertData(rng.startOffset, chr);
    198                     rng.setStart(rng.startContainer, rng.startOffset + 1);
    199                     rng.collapse(true);
    200                     editor.selection.setRng(rng);
     219                    // `insertData` may alter the range.
     220                    startContainer = rng.startContainer;
     221                    startOffset = rng.startOffset;
     222                    rng.startContainer.insertData( rng.startOffset, chr );
     223                    rng.setStart( startContainer, startOffset + 1 );
    201224                } else {
    202                     rng.insertNode(editor.getDoc().createTextNode(chr));
     225                    textNode = editor.getDoc().createTextNode(chr);
     226                    rng.insertNode(textNode);
     227                    rng.setStart(textNode, 1);
    203228                }
     229
     230                rng.collapse(true);
     231                editor.selection.setRng(rng);
    204232            }
    205233        }
  • trunk/tests/qunit/index.html

    r32658 r32699  
    109109            </li>
    110110        </script>
     111
     112        <!-- TinyMCE -->
     113
     114        <script src="../../src/wp-includes/js/tinymce/tinymce.js"></script>
     115        <script src="editor/js/utils.js"></script>
     116        <script src="wp-includes/js/tinymce/plugins/wptextpattern/plugin.js"></script>
    111117    </body>
    112118</html>
Note: See TracChangeset for help on using the changeset viewer.