<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[32699] trunk: TinyMCE: add wptextpattern plugin</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/32699">32699</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/32699","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>iseulde</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2015-06-06 20:07:00 +0000 (Sat, 06 Jun 2015)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>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 <a href="https://core.trac.wordpress.org/ticket/31441">#31441</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesclasswpeditorphp">trunk/src/wp-includes/class-wp-editor.php</a></li>
<li><a href="#trunktestsquniteditorjsutilsjs">trunk/tests/qunit/editor/js/utils.js</a></li>
<li><a href="#trunktestsqunitindexhtml">trunk/tests/qunit/index.html</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li>trunk/src/wp-includes/js/tinymce/plugins/wptextpattern/</li>
<li><a href="#trunksrcwpincludesjstinymcepluginswptextpatternpluginjs">trunk/src/wp-includes/js/tinymce/plugins/wptextpattern/plugin.js</a></li>
<li>trunk/tests/qunit/wp-includes/js/tinymce/</li>
<li>trunk/tests/qunit/wp-includes/js/tinymce/plugins/</li>
<li>trunk/tests/qunit/wp-includes/js/tinymce/plugins/wptextpattern/</li>
<li><a href="#trunktestsqunitwpincludesjstinymcepluginswptextpatternpluginjs">trunk/tests/qunit/wp-includes/js/tinymce/plugins/wptextpattern/plugin.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludesclasswpeditorphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-editor.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-editor.php 2015-06-06 19:57:54 UTC (rev 32698)
+++ trunk/src/wp-includes/class-wp-editor.php 2015-06-06 20:07:00 UTC (rev 32699)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -368,7 +368,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'wpgallery',
</span><span class="cx" style="display: block; padding: 0 10px"> 'wplink',
</span><span class="cx" style="display: block; padding: 0 10px"> 'wpdialogs',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'wpview',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'wptextpattern',
+ 'wpview'
</ins><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! self::$has_medialib ) {
</span></span></pre></div>
<a id="trunksrcwpincludesjstinymcepluginswptextpatternpluginjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/src/wp-includes/js/tinymce/plugins/wptextpattern/plugin.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/js/tinymce/plugins/wptextpattern/plugin.js (rev 0)
+++ trunk/src/wp-includes/js/tinymce/plugins/wptextpattern/plugin.js 2015-06-06 20:07:00 UTC (rev 32699)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,100 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+( function( tinymce, setTimeout ) {
+ tinymce.PluginManager.add( 'wptextpattern', function( editor ) {
+ var $$ = editor.$,
+ patterns = [],
+ canUndo = false;
+
+ function add( regExp, callback ) {
+ patterns.push( {
+ regExp: regExp,
+ callback: callback
+ } );
+ }
+
+ add( /^[*-]\s/, function() {
+ this.execCommand( 'InsertUnorderedList' );
+ } );
+
+ add( /^1[.)]\s/, function() {
+ this.execCommand( 'InsertOrderedList' );
+ } );
+
+ editor.on( 'selectionchange', function() {
+ canUndo = false;
+ } );
+
+ editor.on( 'keydown', function( event ) {
+ if ( canUndo && event.keyCode === tinymce.util.VK.BACKSPACE ) {
+ editor.undoManager.undo();
+ event.preventDefault();
+ }
+ } );
+
+ editor.on( 'keyup', function( event ) {
+ var rng, node, text, parent, child;
+
+ if ( event.keyCode !== tinymce.util.VK.SPACEBAR ) {
+ return;
+ }
+
+ rng = editor.selection.getRng();
+ node = rng.startContainer;
+ text = node.nodeValue;
+
+ if ( node.nodeType !== 3 ) {
+ return;
+ }
+
+ parent = editor.dom.getParent( node, 'p' );
+
+ if ( ! parent ) {
+ return;
+ }
+
+ while ( child = parent.firstChild ) {
+ if ( child.nodeType !== 3 ) {
+ parent = child;
+ } else {
+ break;
+ }
+ }
+
+ if ( child !== node ) {
+ return;
+ }
+
+ tinymce.each( patterns, function( pattern ) {
+ var replace = text.replace( pattern.regExp, '' );
+
+ if ( text === replace ) {
+ return;
+ }
+
+ if ( rng.startOffset !== text.length - replace.length ) {
+ return;
+ }
+
+ editor.undoManager.add();
+
+ editor.undoManager.transact( function() {
+ if ( replace ) {
+ $$( node ).replaceWith( document.createTextNode( replace ) );
+ } else {
+ $$( node.parentNode ).empty().append( '<br>' );
+ }
+
+ editor.selection.setCursorLocation( parent );
+
+ pattern.callback.apply( editor );
+ } );
+
+ // We need to wait for native events to be triggered.
+ setTimeout( function() {
+ canUndo = true;
+ } );
+
+ return false;
+ } );
+ } );
+ } );
+} )( window.tinymce, window.setTimeout );
</ins></span></pre></div>
<a id="trunktestsquniteditorjsutilsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/qunit/editor/js/utils.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/qunit/editor/js/utils.js 2015-06-06 19:57:54 UTC (rev 32698)
+++ trunk/tests/qunit/editor/js/utils.js 2015-06-06 20:07:00 UTC (rev 32699)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -131,15 +131,27 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // TODO: Replace this with the new event logic in 3.5
</span><span class="cx" style="display: block; padding: 0 10px"> function type(chr) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var editor = tinymce.activeEditor, keyCode, charCode, evt, startElm, rng;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var editor = tinymce.activeEditor, keyCode, charCode, evt, startElm, rng, startContainer, startOffset, textNode;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 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)];
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> function fakeEvent(target, type, evt) {
</span><span class="cx" style="display: block; padding: 0 10px"> editor.dom.fire(target, type, evt);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Numeric keyCode
</span><span class="cx" style="display: block; padding: 0 10px"> if (typeof(chr) == "number") {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- charCode = keyCode = chr;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ charCode = chr;
+ keyCode = charCodeToKeyCode(charCode);
</ins><span class="cx" style="display: block; padding: 0 10px"> } else if (typeof(chr) == "string") {
</span><span class="cx" style="display: block; padding: 0 10px"> // String value
</span><span class="cx" style="display: block; padding: 0 10px"> if (chr == '\b') {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -150,10 +162,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> charCode = chr.charCodeAt(0);
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> charCode = chr.charCodeAt(0);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- keyCode = charCode;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ keyCode = charCodeToKeyCode(charCode);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> evt = chr;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ if (evt.charCode) {
+ chr = String.fromCharCode(evt.charCode);
+ }
+
+ if (evt.keyCode) {
+ keyCode = evt.keyCode;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> evt = evt || {keyCode: keyCode, charCode: charCode};
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -175,17 +195,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> rng.execCommand('Delete', false, null);
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> rng = editor.selection.getRng();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ startContainer = rng.startContainer;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if (rng.startContainer.nodeType == 1 && rng.collapsed) {
- var nodes = rng.startContainer.childNodes, lastNode = nodes[nodes.length - 1];
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if (startContainer.nodeType == 1 && rng.collapsed) {
+ var nodes = rng.startContainer.childNodes;
+ startContainer = nodes[nodes.length - 1];
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // 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);
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // 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);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> editor.getDoc().execCommand('Delete', false, null);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -194,13 +216,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> rng = editor.selection.getRng(true);
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if (rng.startContainer.nodeType == 3 && rng.collapsed) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- rng.startContainer.insertData(rng.startOffset, chr);
- rng.setStart(rng.startContainer, rng.startOffset + 1);
- rng.collapse(true);
- editor.selection.setRng(rng);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // `insertData` may alter the range.
+ startContainer = rng.startContainer;
+ startOffset = rng.startOffset;
+ rng.startContainer.insertData( rng.startOffset, chr );
+ rng.setStart( startContainer, startOffset + 1 );
</ins><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- rng.insertNode(editor.getDoc().createTextNode(chr));
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ textNode = editor.getDoc().createTextNode(chr);
+ rng.insertNode(textNode);
+ rng.setStart(textNode, 1);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ rng.collapse(true);
+ editor.selection.setRng(rng);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunktestsqunitindexhtml"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/qunit/index.html</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/qunit/index.html 2015-06-06 19:57:54 UTC (rev 32698)
+++ trunk/tests/qunit/index.html 2015-06-06 20:07:00 UTC (rev 32699)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -108,5 +108,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> </li>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ <!-- 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>
</ins><span class="cx" style="display: block; padding: 0 10px"> </body>
</span><span class="cx" style="display: block; padding: 0 10px"> </html>
</span></span></pre></div>
<a id="trunktestsqunitwpincludesjstinymcepluginswptextpatternpluginjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/tests/qunit/wp-includes/js/tinymce/plugins/wptextpattern/plugin.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/qunit/wp-includes/js/tinymce/plugins/wptextpattern/plugin.js (rev 0)
+++ trunk/tests/qunit/wp-includes/js/tinymce/plugins/wptextpattern/plugin.js 2015-06-06 20:07:00 UTC (rev 32699)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,120 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+( function( $, QUnit, tinymce, _type, setTimeout ) {
+ var editor;
+
+ function type() {
+ var args = arguments;
+
+ setTimeout( function() {
+ if ( typeof args[0] === 'string' ) {
+ args[0] = args[0].split( '' );
+ }
+
+ if ( typeof args[0] === 'function' ) {
+ args[0]();
+ } else {
+ _type( args[0].shift() );
+ }
+
+ if ( ! args[0].length ) {
+ [].shift.call( args );
+ }
+
+ if ( args.length ) {
+ type.apply( null, args );
+ }
+ } );
+ }
+
+ QUnit.module( 'tinymce.plugins.wptextpattern', {
+ beforeEach: function( assert ) {
+ var done = assert.async();
+
+ $( '#qunit-fixture' ).append( '<textarea id="editor">' );
+
+ tinymce.init( {
+ selector: '#editor',
+ plugins: 'wptextpattern',
+ init_instance_callback: function() {
+ editor = arguments[0];
+ editor.focus();
+ editor.selection.setCursorLocation();
+ setTimeout( done );
+ }
+ } );
+ },
+ afterEach: function() {
+ editor.remove();
+ }
+ } );
+
+ QUnit.test( 'Unordered list.', function( assert ) {
+ type( '* test', function() {
+ assert.equal( editor.getContent(), '<ul>\n<li>test</li>\n</ul>' );
+ }, assert.async() );
+ } );
+
+ QUnit.test( 'Ordered list.', function( assert ) {
+ type( '1. test', function() {
+ assert.equal( editor.getContent(), '<ol>\n<li>test</li>\n</ol>' );
+ }, assert.async() );
+ } );
+
+ QUnit.test( 'Ordered list with content.', function( assert ) {
+ editor.setContent( '<p><strong>test</strong></p>' );
+ editor.selection.setCursorLocation();
+
+ type( '* ', function() {
+ assert.equal( editor.getContent(), '<ul>\n<li><strong>test</strong></li>\n</ul>' );
+ }, assert.async() );
+ } );
+
+ QUnit.test( 'Only transform inside a P tag.', function( assert ) {
+ editor.setContent( '<h1>test</h1>' );
+ editor.selection.setCursorLocation();
+
+ type( '* ', function() {
+ assert.equal( editor.getContent(), '<h1>* test</h1>' );
+ }, assert.async() );
+ } );
+
+ QUnit.test( 'Only transform at the start of a P tag.', function( assert ) {
+ editor.setContent( '<p>test <strong>test</strong></p>' );
+ editor.selection.setCursorLocation( editor.$( 'strong' )[0].firstChild, 0 );
+
+ type( '* ', function() {
+ assert.equal( editor.getContent(), '<p>test <strong>* test</strong></p>' );
+ }, assert.async() );
+ } );
+
+ QUnit.test( 'Only transform when at the cursor is at the start.', function( assert ) {
+ editor.setContent( '<p>* test</p>' );
+ editor.selection.setCursorLocation( editor.$( 'p' )[0].firstChild, 6 );
+
+ type( ' test', function() {
+ assert.equal( editor.getContent(), '<p>* test test</p>' );
+ }, assert.async() );
+ } );
+
+ QUnit.test( 'Backspace should undo the transformation.', function( assert ) {
+ editor.setContent( '<p>test</p>' );
+ editor.selection.setCursorLocation();
+
+ type( '* \b', function() {
+ assert.equal( editor.getContent(), '<p>* test</p>' );
+ assert.equal( editor.selection.getRng().startOffset, 2 );
+ }, assert.async() );
+ } );
+
+ QUnit.test( 'Backspace should undo the transformation only right after it happened.', function( assert ) {
+ editor.setContent( '<p>test</p>' );
+ editor.selection.setCursorLocation();
+
+ type( '* ', function() {
+ editor.selection.setCursorLocation( editor.$( 'li' )[0].firstChild, 4 );
+ // Gecko.
+ editor.fire( 'click' );
+ }, '\b', function() {
+ assert.equal( editor.getContent(), '<ul>\n<li>tes</li>\n</ul>' );
+ }, assert.async() );
+ } );
+} )( window.jQuery, window.QUnit, window.tinymce, window.Utils.type, window.setTimeout );
</ins></span></pre>
</div>
</div>
</body>
</html>