4
* Copyright, Moxiecode Systems AB
5
* Released under LGPL License.
7
* License: http://www.tinymce.com/license
8
* Contributing: http://www.tinymce.com/contributing
11
/*global tinymce:true */
12
/*eslint consistent-this:0 */
14
tinymce.PluginManager.add('lists', function(editor) {
17
function isListNode(node) {
18
return node && (/^(OL|UL|DL)$/).test(node.nodeName);
21
function isFirstChild(node) {
22
return node.parentNode.firstChild == node;
25
function isLastChild(node) {
26
return node.parentNode.lastChild == node;
29
function isTextBlock(node) {
30
return node && !!editor.schema.getTextBlockElements()[node.nodeName];
33
editor.on('init', function() {
34
var dom = editor.dom, selection = editor.selection;
37
* Returns a range bookmark. This will convert indexed bookmarks into temporary span elements with
38
* index 0 so that they can be restored properly after the DOM has been modified. Text bookmarks will not have spans
39
* added to them since they can be restored after a dom operation.
41
* So this: <p><b>|</b><b>|</b></p>
42
* becomes: <p><b><span data-mce-type="bookmark">|</span></b><b data-mce-type="bookmark">|</span></b></p>
44
* @param {DOMRange} rng DOM Range to get bookmark on.
45
* @return {Object} Bookmark object.
47
function createBookmark(rng) {
50
function setupEndPoint(start) {
51
var offsetNode, container, offset;
53
container = rng[start ? 'startContainer' : 'endContainer'];
54
offset = rng[start ? 'startOffset' : 'endOffset'];
56
if (container.nodeType == 1) {
57
offsetNode = dom.create('span', {'data-mce-type': 'bookmark'});
59
if (container.hasChildNodes()) {
60
offset = Math.min(offset, container.childNodes.length - 1);
63
container.insertBefore(offsetNode, container.childNodes[offset]);
65
dom.insertAfter(offsetNode, container.childNodes[offset]);
68
container.appendChild(offsetNode);
71
container = offsetNode;
75
bookmark[start ? 'startContainer' : 'endContainer'] = container;
76
bookmark[start ? 'startOffset' : 'endOffset'] = offset;
89
* Moves the selection to the current bookmark and removes any selection container wrappers.
91
* @param {Object} bookmark Bookmark object to move selection to.
93
function moveToBookmark(bookmark) {
94
function restoreEndPoint(start) {
95
var container, offset, node;
97
function nodeIndex(container) {
98
var node = container.parentNode.firstChild, idx = 0;
101
if (node == container) {
105
// Skip data-mce-type=bookmark nodes
106
if (node.nodeType != 1 || node.getAttribute('data-mce-type') != 'bookmark') {
110
node = node.nextSibling;
116
container = node = bookmark[start ? 'startContainer' : 'endContainer'];
117
offset = bookmark[start ? 'startOffset' : 'endOffset'];
123
if (container.nodeType == 1) {
124
offset = nodeIndex(container);
125
container = container.parentNode;
129
bookmark[start ? 'startContainer' : 'endContainer'] = container;
130
bookmark[start ? 'startOffset' : 'endOffset'] = offset;
133
restoreEndPoint(true);
136
var rng = dom.createRng();
138
rng.setStart(bookmark.startContainer, bookmark.startOffset);
140
if (bookmark.endContainer) {
141
rng.setEnd(bookmark.endContainer, bookmark.endOffset);
144
selection.setRng(rng);
147
function createNewTextBlock(contentNode, blockName) {
148
var node, textBlock, fragment = dom.createFragment(), hasContentNode;
149
var blockElements = editor.schema.getBlockElements();
151
if (editor.settings.forced_root_block) {
152
blockName = blockName || editor.settings.forced_root_block;
156
textBlock = dom.create(blockName);
158
if (textBlock.tagName === editor.settings.forced_root_block) {
159
dom.setAttribs(textBlock, editor.settings.forced_root_block_attrs);
162
fragment.appendChild(textBlock);
166
while ((node = contentNode.firstChild)) {
167
var nodeName = node.nodeName;
169
if (!hasContentNode && (nodeName != 'SPAN' || node.getAttribute('data-mce-type') != 'bookmark')) {
170
hasContentNode = true;
173
if (blockElements[nodeName]) {
174
fragment.appendChild(node);
179
textBlock = dom.create(blockName);
180
fragment.appendChild(textBlock);
183
textBlock.appendChild(node);
185
fragment.appendChild(node);
191
if (!editor.settings.forced_root_block) {
192
fragment.appendChild(dom.create('br'));
194
// BR is needed in empty blocks on non IE browsers
195
if (!hasContentNode && (!tinymce.Env.ie || tinymce.Env.ie > 10)) {
196
textBlock.appendChild(dom.create('br', {'data-mce-bogus': '1'}));
203
function getSelectedListItems() {
204
return tinymce.grep(selection.getSelectedBlocks(), function(block) {
205
return /^(LI|DT|DD)$/.test(block.nodeName);
209
function splitList(ul, li, newBlock) {
210
var tmpRng, fragment;
212
var bookmarks = dom.select('span[data-mce-type="bookmark"]', ul);
214
newBlock = newBlock || createNewTextBlock(li);
215
tmpRng = dom.createRng();
216
tmpRng.setStartAfter(li);
217
tmpRng.setEndAfter(ul);
218
fragment = tmpRng.extractContents();
220
if (!dom.isEmpty(fragment)) {
221
dom.insertAfter(fragment, ul);
224
dom.insertAfter(newBlock, ul);
226
if (dom.isEmpty(li.parentNode)) {
227
tinymce.each(bookmarks, function(node) {
228
li.parentNode.parentNode.insertBefore(node, li.parentNode);
231
dom.remove(li.parentNode);
237
function mergeWithAdjacentLists(listBlock) {
240
sibling = listBlock.nextSibling;
241
if (sibling && isListNode(sibling) && sibling.nodeName == listBlock.nodeName) {
242
while ((node = sibling.firstChild)) {
243
listBlock.appendChild(node);
249
sibling = listBlock.previousSibling;
250
if (sibling && isListNode(sibling) && sibling.nodeName == listBlock.nodeName) {
251
while ((node = sibling.firstChild)) {
252
listBlock.insertBefore(node, listBlock.firstChild);
260
* Normalizes the all lists in the specified element.
262
function normalizeList(element) {
263
tinymce.each(tinymce.grep(dom.select('ol,ul', element)), function(ul) {
264
var sibling, parentNode = ul.parentNode;
266
// Move UL/OL to previous LI if it's the only child of a LI
267
if (parentNode.nodeName == 'LI' && parentNode.firstChild == ul) {
268
sibling = parentNode.previousSibling;
269
if (sibling && sibling.nodeName == 'LI') {
270
sibling.appendChild(ul);
272
if (dom.isEmpty(parentNode)) {
273
dom.remove(parentNode);
278
// Append OL/UL to previous LI if it's in a parent OL/UL i.e. old HTML4
279
if (isListNode(parentNode)) {
280
sibling = parentNode.previousSibling;
281
if (sibling && sibling.nodeName == 'LI') {
282
sibling.appendChild(ul);
288
function outdent(li) {
289
var ul = li.parentNode, ulParent = ul.parentNode, newBlock;
291
function removeEmptyLi(li) {
292
if (dom.isEmpty(li)) {
297
if (li.nodeName == 'DD') {
298
dom.rename(li, 'DT');
302
if (isFirstChild(li) && isLastChild(li)) {
303
if (ulParent.nodeName == "LI") {
304
dom.insertAfter(li, ulParent);
305
removeEmptyLi(ulParent);
307
} else if (isListNode(ulParent)) {
308
dom.remove(ul, true);
310
ulParent.insertBefore(createNewTextBlock(li), ul);
315
} else if (isFirstChild(li)) {
316
if (ulParent.nodeName == "LI") {
317
dom.insertAfter(li, ulParent);
319
removeEmptyLi(ulParent);
320
} else if (isListNode(ulParent)) {
321
ulParent.insertBefore(li, ul);
323
ulParent.insertBefore(createNewTextBlock(li), ul);
328
} else if (isLastChild(li)) {
329
if (ulParent.nodeName == "LI") {
330
dom.insertAfter(li, ulParent);
331
} else if (isListNode(ulParent)) {
332
dom.insertAfter(li, ul);
334
dom.insertAfter(createNewTextBlock(li), ul);
340
if (ulParent.nodeName == 'LI') {
342
newBlock = createNewTextBlock(li, 'LI');
343
} else if (isListNode(ulParent)) {
344
newBlock = createNewTextBlock(li, 'LI');
346
newBlock = createNewTextBlock(li);
349
splitList(ul, li, newBlock);
350
normalizeList(ul.parentNode);
358
function indent(li) {
359
var sibling, newList;
361
function mergeLists(from, to) {
364
if (isListNode(from)) {
365
while ((node = li.lastChild.firstChild)) {
366
to.appendChild(node);
373
if (li.nodeName == 'DT') {
374
dom.rename(li, 'DD');
378
sibling = li.previousSibling;
380
if (sibling && isListNode(sibling)) {
381
sibling.appendChild(li);
385
if (sibling && sibling.nodeName == 'LI' && isListNode(sibling.lastChild)) {
386
sibling.lastChild.appendChild(li);
387
mergeLists(li.lastChild, sibling.lastChild);
391
sibling = li.nextSibling;
393
if (sibling && isListNode(sibling)) {
394
sibling.insertBefore(li, sibling.firstChild);
398
if (sibling && sibling.nodeName == 'LI' && isListNode(li.lastChild)) {
402
sibling = li.previousSibling;
403
if (sibling && sibling.nodeName == 'LI') {
404
newList = dom.create(li.parentNode.nodeName);
405
sibling.appendChild(newList);
406
newList.appendChild(li);
407
mergeLists(li.lastChild, newList);
414
function indentSelection() {
415
var listElements = getSelectedListItems();
417
if (listElements.length) {
418
var bookmark = createBookmark(selection.getRng(true));
420
for (var i = 0; i < listElements.length; i++) {
421
if (!indent(listElements[i]) && i === 0) {
426
moveToBookmark(bookmark);
427
editor.nodeChanged();
433
function outdentSelection() {
434
var listElements = getSelectedListItems();
436
if (listElements.length) {
437
var bookmark = createBookmark(selection.getRng(true));
438
var i, y, root = editor.getBody();
440
i = listElements.length;
442
var node = listElements[i].parentNode;
444
while (node && node != root) {
445
y = listElements.length;
447
if (listElements[y] === node) {
448
listElements.splice(i, 1);
453
node = node.parentNode;
457
for (i = 0; i < listElements.length; i++) {
458
if (!outdent(listElements[i]) && i === 0) {
463
moveToBookmark(bookmark);
464
editor.nodeChanged();
470
function applyList(listName) {
471
var rng = selection.getRng(true), bookmark = createBookmark(rng), listItemName = 'LI';
473
listName = listName.toUpperCase();
475
if (listName == 'DL') {
479
function getSelectedTextBlocks() {
480
var textBlocks = [], root = editor.getBody();
482
function getEndPointNode(start) {
483
var container, offset;
485
container = rng[start ? 'startContainer' : 'endContainer'];
486
offset = rng[start ? 'startOffset' : 'endOffset'];
488
// Resolve node index
489
if (container.nodeType == 1) {
490
container = container.childNodes[Math.min(offset, container.childNodes.length - 1)] || container;
493
while (container.parentNode != root) {
494
if (isTextBlock(container)) {
498
if (/^(TD|TH)$/.test(container.parentNode.nodeName)) {
502
container = container.parentNode;
508
var startNode = getEndPointNode(true);
509
var endNode = getEndPointNode();
510
var block, siblings = [];
512
for (var node = startNode; node; node = node.nextSibling) {
515
if (node == endNode) {
520
tinymce.each(siblings, function(node) {
521
if (isTextBlock(node)) {
522
textBlocks.push(node);
527
if (dom.isBlock(node) || node.nodeName == 'BR') {
528
if (node.nodeName == 'BR') {
536
var nextSibling = node.nextSibling;
537
if (tinymce.dom.BookmarkManager.isBookmarkNode(node)) {
538
if (isTextBlock(nextSibling) || (!nextSibling && node.parentNode == root)) {
545
block = dom.create('p');
546
node.parentNode.insertBefore(block, node);
547
textBlocks.push(block);
550
block.appendChild(node);
556
tinymce.each(getSelectedTextBlocks(), function(block) {
557
var listBlock, sibling;
559
sibling = block.previousSibling;
560
if (sibling && isListNode(sibling) && sibling.nodeName == listName) {
562
block = dom.rename(block, listItemName);
563
sibling.appendChild(block);
565
listBlock = dom.create(listName);
566
block.parentNode.insertBefore(listBlock, block);
567
listBlock.appendChild(block);
568
block = dom.rename(block, listItemName);
571
mergeWithAdjacentLists(listBlock);
574
moveToBookmark(bookmark);
577
function removeList() {
578
var bookmark = createBookmark(selection.getRng(true)), root = editor.getBody();
580
tinymce.each(getSelectedListItems(), function(li) {
583
if (dom.isEmpty(li)) {
588
for (node = li; node && node != root; node = node.parentNode) {
589
if (isListNode(node)) {
594
splitList(rootList, li);
597
moveToBookmark(bookmark);
600
function toggleList(listName) {
601
var parentList = dom.getParent(selection.getStart(), 'OL,UL,DL');
604
if (parentList.nodeName == listName) {
605
removeList(listName);
607
var bookmark = createBookmark(selection.getRng(true));
608
mergeWithAdjacentLists(dom.rename(parentList, listName));
609
moveToBookmark(bookmark);
616
function queryListCommandState(listName) {
618
var parentList = dom.getParent(editor.selection.getStart(), 'UL,OL,DL');
620
return parentList && parentList.nodeName == listName;
624
self.backspaceDelete = function(isForward) {
625
function findNextCaretContainer(rng, isForward) {
626
var node = rng.startContainer, offset = rng.startOffset;
627
var nonEmptyBlocks, walker;
629
if (node.nodeType == 3 && (isForward ? offset < node.data.length : offset > 0)) {
633
nonEmptyBlocks = editor.schema.getNonEmptyElements();
634
walker = new tinymce.dom.TreeWalker(rng.startContainer);
636
while ((node = walker[isForward ? 'next' : 'prev']())) {
637
if (node.nodeName == 'LI' && !node.hasChildNodes()) {
641
if (nonEmptyBlocks[node.nodeName]) {
645
if (node.nodeType == 3 && node.data.length > 0) {
651
function mergeLiElements(fromElm, toElm) {
652
var node, listNode, ul = fromElm.parentNode;
654
if (isListNode(toElm.lastChild)) {
655
listNode = toElm.lastChild;
658
node = toElm.lastChild;
659
if (node && node.nodeName == 'BR' && fromElm.hasChildNodes()) {
663
if (dom.isEmpty(toElm)) {
664
dom.$(toElm).empty();
667
if (!dom.isEmpty(fromElm)) {
668
while ((node = fromElm.firstChild)) {
669
toElm.appendChild(node);
674
toElm.appendChild(listNode);
679
if (dom.isEmpty(ul)) {
684
if (selection.isCollapsed()) {
685
var li = dom.getParent(selection.getStart(), 'LI');
688
var rng = selection.getRng(true);
689
var otherLi = dom.getParent(findNextCaretContainer(rng, isForward), 'LI');
691
if (otherLi && otherLi != li) {
692
var bookmark = createBookmark(rng);
695
mergeLiElements(otherLi, li);
697
mergeLiElements(li, otherLi);
700
moveToBookmark(bookmark);
703
} else if (!otherLi) {
704
if (!isForward && removeList(li.parentNode.nodeName)) {
712
editor.addCommand('Indent', function() {
713
if (!indentSelection()) {
718
editor.addCommand('Outdent', function() {
719
if (!outdentSelection()) {
724
editor.addCommand('InsertUnorderedList', function() {
728
editor.addCommand('InsertOrderedList', function() {
732
editor.addCommand('InsertDefinitionList', function() {
736
editor.addQueryStateHandler('InsertUnorderedList', queryListCommandState('UL'));
737
editor.addQueryStateHandler('InsertOrderedList', queryListCommandState('OL'));
738
editor.addQueryStateHandler('InsertDefinitionList', queryListCommandState('DL'));
740
editor.on('keydown', function(e) {
741
if (e.keyCode == 9 && editor.dom.getParent(editor.selection.getStart(), 'LI,DT,DD')) {
753
editor.addButton('indent', {
755
title: 'Increase indent',
757
onPostRender: function() {
760
editor.on('nodechange', function() {
761
var blocks = editor.selection.getSelectedBlocks();
764
for (var i = 0, l = blocks.length; !disable && i < l; i++) {
765
var tag = blocks[i].nodeName;
767
disable = (tag == 'LI' && isFirstChild(blocks[i]) || tag == 'UL' || tag == 'OL' || tag == 'DD');
770
ctrl.disabled(disable);
775
editor.on('keydown', function(e) {
776
if (e.keyCode == tinymce.util.VK.BACKSPACE) {
777
if (self.backspaceDelete()) {
780
} else if (e.keyCode == tinymce.util.VK.DELETE) {
781
if (self.backspaceDelete(true)) {