Wordpress/tests/qunit/editor/tinymce/SelectionOverrides.js

332 lines
12 KiB
JavaScript
Raw Normal View History

ModuleLoader.require([
"tinymce/caret/CaretPosition",
"tinymce/caret/CaretContainer",
"tinymce/util/VK",
"tinymce/text/Zwsp"
], function(CaretPosition, CaretContainer, VK, Zwsp) {
module("tinymce.SelectionOverrides", {
setupModule: function() {
QUnit.stop();
tinymce.init({
selector: "textarea",
add_unload_trigger: false,
disable_nodechange: true,
skin: false,
entities: 'raw',
indent: false,
init_instance_callback: function(ed) {
window.editor = ed;
QUnit.start();
}
});
}
});
function pressKey(key) {
return function() {
Utils.pressKey({keyCode: key});
};
}
function exitPreTest(arrow, offset, expectedContent) {
return function() {
editor.setContent('<pre>abc</pre>');
Utils.setSelection('pre', 1);
arrow();
equal(editor.getContent(), '<pre>abc</pre>');
equal(editor.selection.getNode().nodeName, 'PRE');
Utils.setSelection('pre', offset);
arrow();
equal(editor.getContent(), expectedContent);
equal(editor.selection.getNode().nodeName, 'P');
};
}
function assertCaretInCaretBlockContainer() {
var beforeRng = editor.selection.getRng();
equal(CaretContainer.isCaretContainerBlock(beforeRng.startContainer.parentNode), true, 'Not in caret block container.');
}
var leftArrow = pressKey(VK.LEFT);
var rightArrow = pressKey(VK.RIGHT);
var backspace = pressKey(VK.BACKSPACE);
var forwardDelete = pressKey(VK.DELETE);
var upArrow = pressKey(VK.UP);
var downArrow = pressKey(VK.DOWN);
test('left/right over cE=false inline', function() {
editor.setContent('<span contenteditable="false">1</span>');
editor.selection.select(editor.$('span')[0]);
leftArrow();
equal(editor.getContent(), '<p><span contenteditable="false">1</span></p>');
equal(CaretContainer.isCaretContainerInline(editor.selection.getRng().startContainer), true);
equal(editor.selection.getRng().startContainer, editor.$('p')[0].firstChild);
rightArrow();
equal(editor.getContent(), '<p><span contenteditable="false">1</span></p>');
equal(editor.selection.getNode(), editor.$('span')[0]);
rightArrow();
equal(editor.getContent(), '<p><span contenteditable="false">1</span></p>');
equal(CaretContainer.isCaretContainerInline(editor.selection.getRng().startContainer), true);
equal(editor.selection.getRng().startContainer, editor.$('p')[0].lastChild);
});
test('left/right over cE=false block', function() {
editor.setContent('<p contenteditable="false">1</p>');
editor.selection.select(editor.$('p')[0]);
leftArrow();
equal(editor.getContent(), '<p contenteditable="false">1</p>');
equal(CaretContainer.isCaretContainerBlock(editor.selection.getRng().startContainer), true);
rightArrow();
equal(editor.getContent(), '<p contenteditable="false">1</p>');
equal(editor.selection.getNode(), editor.$('p')[0]);
rightArrow();
equal(editor.getContent(), '<p contenteditable="false">1</p>');
equal(CaretContainer.isCaretContainerBlock(editor.selection.getRng().startContainer), true);
});
test('left before cE=false block and type', function() {
editor.setContent('<p contenteditable="false">1</p>');
editor.selection.select(editor.$('p')[0]);
leftArrow();
Utils.type('a');
equal(editor.getContent(), '<p>a</p><p contenteditable="false">1</p>');
equal(CaretContainer.isCaretContainerBlock(editor.selection.getRng().startContainer.parentNode), false);
});
test('right after cE=false block and type', function() {
editor.setContent('<p contenteditable="false">1</p>');
editor.selection.select(editor.$('p')[0]);
rightArrow();
Utils.type('a');
equal(editor.getContent(), '<p contenteditable="false">1</p><p>a</p>');
equal(CaretContainer.isCaretContainerBlock(editor.selection.getRng().startContainer.parentNode), false);
});
test('up from P to inline cE=false', function() {
editor.setContent('<p>a<span contentEditable="false">1</span></p><p>abc</p>');
Utils.setSelection('p:last', 3);
upArrow();
equal(CaretContainer.isCaretContainerInline(editor.$('p:first')[0].lastChild), true);
});
test('down from P to inline cE=false', function() {
editor.setContent('<p>abc</p><p>a<span contentEditable="false">1</span></p>');
Utils.setSelection('p:first', 3);
downArrow();
equal(CaretContainer.isCaretContainerInline(editor.$('p:last')[0].lastChild), true);
});
test('backspace on selected cE=false block', function() {
editor.setContent('<p contenteditable="false">1</p>');
editor.selection.select(editor.$('p')[0]);
backspace();
equal(editor.getContent(), '');
equal(editor.selection.getRng().startContainer, editor.$('p')[0]);
});
test('backspace after cE=false block', function() {
editor.setContent('<p contenteditable="false">1</p>');
editor.selection.select(editor.$('p')[0]);
rightArrow();
backspace();
equal(editor.getContent(), '');
equal(editor.selection.getRng().startContainer, editor.$('p')[0]);
});
test('delete on selected cE=false block', function() {
editor.setContent('<p contenteditable="false">1</p>');
editor.selection.select(editor.$('p')[0]);
forwardDelete();
equal(editor.getContent(), '');
equal(editor.selection.getRng().startContainer, editor.$('p')[0]);
});
test('delete inside nested cE=true block element', function() {
editor.setContent('<div contenteditable="false">1<div contenteditable="true">2</div>3</div>');
Utils.setSelection('div div', 1);
Utils.type('\b');
equal(Utils.cleanHtml(editor.getBody().innerHTML), '<div contenteditable="false">1<div contenteditable="true"><br data-mce-bogus="1"></div>3</div>');
equal(editor.selection.getRng().startContainer, editor.$('div div')[0]);
});
test('backspace from block to after cE=false inline', function() {
editor.setContent('<p>1<span contenteditable="false">2</span></p><p>3</p>');
Utils.setSelection('p:nth-child(2)', 0);
Utils.type('\b');
equal(editor.getContent(), '<p>1<span contenteditable="false">2</span>3</p>');
ok(Zwsp.isZwsp(editor.selection.getRng().startContainer.data));
equal(editor.selection.getRng().startContainer.previousSibling.nodeName, 'SPAN');
});
test('delete from block to before cE=false inline', function() {
editor.setContent('<p>1</p><p><span contenteditable="false">2</span>3</p>');
Utils.setSelection('p:nth-child(1)', 1);
forwardDelete();
equal(editor.getContent(), '<p>1<span contenteditable="false">2</span>3</p>');
ok(Zwsp.isZwsp(editor.selection.getRng().startContainer.data));
equal(editor.selection.getRng().startContainer.nextSibling.nodeName, 'SPAN');
});
test('backspace from before cE=false block to text', function() {
editor.setContent('<p>1</p><p contenteditable="false">2</p><p>3</p>');
editor.selection.select(editor.dom.select('p')[1]);
editor.selection.collapse(true);
assertCaretInCaretBlockContainer();
Utils.type('\b');
var rng = editor.selection.getRng();
equal(editor.getContent(), '<p>1</p><p contenteditable="false">2</p><p>3</p>');
equal(rng.startContainer, editor.dom.select('p')[0].firstChild);
equal(rng.startOffset, 1);
equal(rng.collapsed, true);
});
test('backspace from before first cE=false block', function() {
editor.setContent('<p contenteditable="false">1</p><p>2</p>');
editor.selection.select(editor.dom.select('p')[0]);
editor.selection.collapse(true);
assertCaretInCaretBlockContainer();
Utils.type('\b');
equal(editor.getContent(), '<p contenteditable="false">1</p><p>2</p>');
assertCaretInCaretBlockContainer();
});
test('backspace from before cE=false block to after cE=false block', function() {
editor.setContent('<p contenteditable="false">1</p><p contenteditable="false">2</p>');
editor.selection.select(editor.dom.select('p')[1]);
editor.selection.collapse(true);
assertCaretInCaretBlockContainer();
Utils.type('\b');
var rng = editor.selection.getRng();
equal(editor.getContent(), '<p contenteditable="false">1</p><p contenteditable="false">2</p>');
assertCaretInCaretBlockContainer();
equal(rng.startContainer.parentNode.previousSibling, editor.dom.select('p')[0]);
});
test('delete from after cE=false block to text', function() {
editor.setContent('<p>1</p><p contenteditable="false">2</p><p>3</p>');
editor.selection.select(editor.dom.select('p')[1]);
editor.selection.collapse(false);
assertCaretInCaretBlockContainer();
forwardDelete();
var rng = editor.selection.getRng();
equal(editor.getContent(), '<p>1</p><p contenteditable="false">2</p><p>3</p>');
equal(rng.startContainer, editor.dom.select('p')[2].firstChild);
equal(rng.startOffset, 0);
equal(rng.collapsed, true);
});
test('delete from after last cE=false block', function() {
editor.setContent('<p>1</p><p contenteditable="false">2</p>');
editor.selection.select(editor.dom.select('p')[1]);
editor.selection.collapse(false);
assertCaretInCaretBlockContainer();
forwardDelete();
equal(editor.getContent(), '<p>1</p><p contenteditable="false">2</p>');
assertCaretInCaretBlockContainer();
});
test('delete from after cE=false block to before cE=false block', function() {
editor.setContent('<p contenteditable="false">1</p><p contenteditable="false">2</p>');
editor.selection.select(editor.dom.select('p')[0]);
rightArrow();
assertCaretInCaretBlockContainer();
forwardDelete();
var rng = editor.selection.getRng();
equal(editor.getContent(), '<p contenteditable="false">1</p><p contenteditable="false">2</p>');
assertCaretInCaretBlockContainer();
equal(rng.startContainer.parentNode.nextSibling, editor.dom.select('p')[2]);
});
test('delete from block to before cE=false inline', function() {
editor.setContent('<p>1</p><p><span contenteditable="false">2</span>3</p>');
Utils.setSelection('p:nth-child(1)', 1);
forwardDelete();
equal(editor.getContent(), '<p>1<span contenteditable="false">2</span>3</p>');
ok(Zwsp.isZwsp(editor.selection.getRng().startContainer.data));
equal(editor.selection.getRng().startContainer.nextSibling.nodeName, 'SPAN');
});
test('backspace from empty block to after cE=false', function() {
editor.getBody().innerHTML = '<p contenteditable="false">1</p><p><br></p>';
Utils.setSelection('p:nth-child(2)', 0);
backspace();
equal(editor.getContent(), '<p contenteditable="false">1</p>');
assertCaretInCaretBlockContainer();
});
test('delete from empty block to before cE=false', function() {
editor.getBody().innerHTML = '<p><br></p><p contenteditable="false">2</p>';
Utils.setSelection('p:nth-child(1)', 0);
forwardDelete();
equal(editor.getContent(), '<p contenteditable="false">2</p>');
assertCaretInCaretBlockContainer();
});
test('exit pre block (up)', exitPreTest(upArrow, 0, '<p>\u00a0</p><pre>abc</pre>'));
test('exit pre block (left)', exitPreTest(leftArrow, 0, '<p>\u00a0</p><pre>abc</pre>'));
test('exit pre block (down)', exitPreTest(downArrow, 3, '<pre>abc</pre><p>\u00a0</p>'));
test('exit pre block (right)', exitPreTest(rightArrow, 3, '<pre>abc</pre><p>\u00a0</p>'));
test('click on link in cE=false', function() {
editor.setContent('<p contentEditable="false"><a href="#"><strong>link</strong></a></p>');
var evt = editor.fire('click', {target: editor.$('strong')[0]});
equal(evt.isDefaultPrevented(), true);
});
test('click next to cE=false block', function() {
editor.setContent(
'<table style="width: 100%">' +
'<tr>' +
'<td style="vertical-align: top">1</td>' +
'<td><div contentEditable="false" style="width: 100px; height: 100px">2</div></td>' +
'</tr>' +
'</table>'
);
var firstTd = editor.dom.select('td')[0];
var rect = editor.dom.getRect(firstTd);
editor.fire('mousedown', {
target: firstTd,
clientX: rect.x + rect.w,
clientY: rect.y + 10
});
// Since we can't do a real click we need to check if it gets sucked in towards the cE=false block
equal(editor.selection.getNode().nodeName !== 'P', true);
});
});