4 * Released under LGPL License.
5 * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
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 function isEditorBody(elm) {
34 return elm === editor.getBody();
37 editor.on('init', function() {
38 var dom = editor.dom, selection = editor.selection;
40 function isEmpty(elm, keepBookmarks) {
41 var empty = dom.isEmpty(elm);
43 if (keepBookmarks && dom.select('span[data-mce-type=bookmark]').length > 0) {
51 * Returns a range bookmark. This will convert indexed bookmarks into temporary span elements with
52 * index 0 so that they can be restored properly after the DOM has been modified. Text bookmarks will not have spans
53 * added to them since they can be restored after a dom operation.
55 * So this: <p><b>|</b><b>|</b></p>
56 * becomes: <p><b><span data-mce-type="bookmark">|</span></b><b data-mce-type="bookmark">|</span></b></p>
58 * @param {DOMRange} rng DOM Range to get bookmark on.
59 * @return {Object} Bookmark object.
61 function createBookmark(rng) {
64 function setupEndPoint(start) {
65 var offsetNode, container, offset;
67 container = rng[start ? 'startContainer' : 'endContainer'];
68 offset = rng[start ? 'startOffset' : 'endOffset'];
70 if (container.nodeType == 1) {
71 offsetNode = dom.create('span', {'data-mce-type': 'bookmark'});
73 if (container.hasChildNodes()) {
74 offset = Math.min(offset, container.childNodes.length - 1);
77 container.insertBefore(offsetNode, container.childNodes[offset]);
79 dom.insertAfter(offsetNode, container.childNodes[offset]);
82 container.appendChild(offsetNode);
85 container = offsetNode;
89 bookmark[start ? 'startContainer' : 'endContainer'] = container;
90 bookmark[start ? 'startOffset' : 'endOffset'] = offset;
103 * Moves the selection to the current bookmark and removes any selection container wrappers.
105 * @param {Object} bookmark Bookmark object to move selection to.
107 function moveToBookmark(bookmark) {
108 function restoreEndPoint(start) {
109 var container, offset, node;
111 function nodeIndex(container) {
112 var node = container.parentNode.firstChild, idx = 0;
115 if (node == container) {
119 // Skip data-mce-type=bookmark nodes
120 if (node.nodeType != 1 || node.getAttribute('data-mce-type') != 'bookmark') {
124 node = node.nextSibling;
130 container = node = bookmark[start ? 'startContainer' : 'endContainer'];
131 offset = bookmark[start ? 'startOffset' : 'endOffset'];
137 if (container.nodeType == 1) {
138 offset = nodeIndex(container);
139 container = container.parentNode;
143 bookmark[start ? 'startContainer' : 'endContainer'] = container;
144 bookmark[start ? 'startOffset' : 'endOffset'] = offset;
147 restoreEndPoint(true);
150 var rng = dom.createRng();
152 rng.setStart(bookmark.startContainer, bookmark.startOffset);
154 if (bookmark.endContainer) {
155 rng.setEnd(bookmark.endContainer, bookmark.endOffset);
158 selection.setRng(rng);
161 function createNewTextBlock(contentNode, blockName) {
162 var node, textBlock, fragment = dom.createFragment(), hasContentNode;
163 var blockElements = editor.schema.getBlockElements();
165 if (editor.settings.forced_root_block) {
166 blockName = blockName || editor.settings.forced_root_block;
170 textBlock = dom.create(blockName);
172 if (textBlock.tagName === editor.settings.forced_root_block) {
173 dom.setAttribs(textBlock, editor.settings.forced_root_block_attrs);
176 fragment.appendChild(textBlock);
180 while ((node = contentNode.firstChild)) {
181 var nodeName = node.nodeName;
183 if (!hasContentNode && (nodeName != 'SPAN' || node.getAttribute('data-mce-type') != 'bookmark')) {
184 hasContentNode = true;
187 if (blockElements[nodeName]) {
188 fragment.appendChild(node);
193 textBlock = dom.create(blockName);
194 fragment.appendChild(textBlock);
197 textBlock.appendChild(node);
199 fragment.appendChild(node);
205 if (!editor.settings.forced_root_block) {
206 fragment.appendChild(dom.create('br'));
208 // BR is needed in empty blocks on non IE browsers
209 if (!hasContentNode && (!tinymce.Env.ie || tinymce.Env.ie > 10)) {
210 textBlock.appendChild(dom.create('br', {'data-mce-bogus': '1'}));
217 function getSelectedListItems() {
218 return tinymce.grep(selection.getSelectedBlocks(), function(block) {
219 return /^(LI|DT|DD)$/.test(block.nodeName);
223 function splitList(ul, li, newBlock) {
224 var tmpRng, fragment, bookmarks, node;
226 function removeAndKeepBookmarks(targetNode) {
227 tinymce.each(bookmarks, function(node) {
228 targetNode.parentNode.insertBefore(node, li.parentNode);
231 dom.remove(targetNode);
234 bookmarks = dom.select('span[data-mce-type="bookmark"]', ul);
235 newBlock = newBlock || createNewTextBlock(li);
236 tmpRng = dom.createRng();
237 tmpRng.setStartAfter(li);
238 tmpRng.setEndAfter(ul);
239 fragment = tmpRng.extractContents();
241 for (node = fragment.firstChild; node; node = node.firstChild) {
242 if (node.nodeName == 'LI' && dom.isEmpty(node)) {
248 if (!dom.isEmpty(fragment)) {
249 dom.insertAfter(fragment, ul);
252 dom.insertAfter(newBlock, ul);
254 if (isEmpty(li.parentNode)) {
255 removeAndKeepBookmarks(li.parentNode);
265 function mergeWithAdjacentLists(listBlock) {
268 sibling = listBlock.nextSibling;
269 if (sibling && isListNode(sibling) && sibling.nodeName == listBlock.nodeName) {
270 while ((node = sibling.firstChild)) {
271 listBlock.appendChild(node);
277 sibling = listBlock.previousSibling;
278 if (sibling && isListNode(sibling) && sibling.nodeName == listBlock.nodeName) {
279 while ((node = sibling.firstChild)) {
280 listBlock.insertBefore(node, listBlock.firstChild);
288 * Normalizes the all lists in the specified element.
290 function normalizeList(element) {
291 tinymce.each(tinymce.grep(dom.select('ol,ul', element)), function(ul) {
292 var sibling, parentNode = ul.parentNode;
294 // Move UL/OL to previous LI if it's the only child of a LI
295 if (parentNode.nodeName == 'LI' && parentNode.firstChild == ul) {
296 sibling = parentNode.previousSibling;
297 if (sibling && sibling.nodeName == 'LI') {
298 sibling.appendChild(ul);
300 if (isEmpty(parentNode)) {
301 dom.remove(parentNode);
306 // Append OL/UL to previous LI if it's in a parent OL/UL i.e. old HTML4
307 if (isListNode(parentNode)) {
308 sibling = parentNode.previousSibling;
309 if (sibling && sibling.nodeName == 'LI') {
310 sibling.appendChild(ul);
316 function outdent(li) {
317 var ul = li.parentNode, ulParent = ul.parentNode, newBlock;
319 function removeEmptyLi(li) {
325 if (isEditorBody(ul)) {
329 if (li.nodeName == 'DD') {
330 dom.rename(li, 'DT');
334 if (isFirstChild(li) && isLastChild(li)) {
335 if (ulParent.nodeName == "LI") {
336 dom.insertAfter(li, ulParent);
337 removeEmptyLi(ulParent);
339 } else if (isListNode(ulParent)) {
340 dom.remove(ul, true);
342 ulParent.insertBefore(createNewTextBlock(li), ul);
347 } else if (isFirstChild(li)) {
348 if (ulParent.nodeName == "LI") {
349 dom.insertAfter(li, ulParent);
351 removeEmptyLi(ulParent);
352 } else if (isListNode(ulParent)) {
353 ulParent.insertBefore(li, ul);
355 ulParent.insertBefore(createNewTextBlock(li), ul);
360 } else if (isLastChild(li)) {
361 if (ulParent.nodeName == "LI") {
362 dom.insertAfter(li, ulParent);
363 } else if (isListNode(ulParent)) {
364 dom.insertAfter(li, ul);
366 dom.insertAfter(createNewTextBlock(li), ul);
373 if (ulParent.nodeName == 'LI') {
375 newBlock = createNewTextBlock(li, 'LI');
376 } else if (isListNode(ulParent)) {
377 newBlock = createNewTextBlock(li, 'LI');
379 newBlock = createNewTextBlock(li);
382 splitList(ul, li, newBlock);
383 normalizeList(ul.parentNode);
388 function indent(li) {
389 var sibling, newList;
391 function mergeLists(from, to) {
394 if (isListNode(from)) {
395 while ((node = li.lastChild.firstChild)) {
396 to.appendChild(node);
403 if (li.nodeName == 'DT') {
404 dom.rename(li, 'DD');
408 sibling = li.previousSibling;
410 if (sibling && isListNode(sibling)) {
411 sibling.appendChild(li);
415 if (sibling && sibling.nodeName == 'LI' && isListNode(sibling.lastChild)) {
416 sibling.lastChild.appendChild(li);
417 mergeLists(li.lastChild, sibling.lastChild);
421 sibling = li.nextSibling;
423 if (sibling && isListNode(sibling)) {
424 sibling.insertBefore(li, sibling.firstChild);
428 if (sibling && sibling.nodeName == 'LI' && isListNode(li.lastChild)) {
432 sibling = li.previousSibling;
433 if (sibling && sibling.nodeName == 'LI') {
434 newList = dom.create(li.parentNode.nodeName);
435 sibling.appendChild(newList);
436 newList.appendChild(li);
437 mergeLists(li.lastChild, newList);
444 function indentSelection() {
445 var listElements = getSelectedListItems();
447 if (listElements.length) {
448 var bookmark = createBookmark(selection.getRng(true));
450 for (var i = 0; i < listElements.length; i++) {
451 if (!indent(listElements[i]) && i === 0) {
456 moveToBookmark(bookmark);
457 editor.nodeChanged();
463 function outdentSelection() {
464 var listElements = getSelectedListItems();
466 if (listElements.length) {
467 var bookmark = createBookmark(selection.getRng(true));
468 var i, y, root = editor.getBody();
470 i = listElements.length;
472 var node = listElements[i].parentNode;
474 while (node && node != root) {
475 y = listElements.length;
477 if (listElements[y] === node) {
478 listElements.splice(i, 1);
483 node = node.parentNode;
487 for (i = 0; i < listElements.length; i++) {
488 if (!outdent(listElements[i]) && i === 0) {
493 moveToBookmark(bookmark);
494 editor.nodeChanged();
500 function applyList(listName) {
501 var rng = selection.getRng(true), bookmark = createBookmark(rng), listItemName = 'LI';
503 listName = listName.toUpperCase();
505 if (listName == 'DL') {
509 function getSelectedTextBlocks() {
510 var textBlocks = [], root = editor.getBody();
512 function getEndPointNode(start) {
513 var container, offset;
515 container = rng[start ? 'startContainer' : 'endContainer'];
516 offset = rng[start ? 'startOffset' : 'endOffset'];
518 // Resolve node index
519 if (container.nodeType == 1) {
520 container = container.childNodes[Math.min(offset, container.childNodes.length - 1)] || container;
523 while (container.parentNode != root) {
524 if (isTextBlock(container)) {
528 if (/^(TD|TH)$/.test(container.parentNode.nodeName)) {
532 container = container.parentNode;
538 var startNode = getEndPointNode(true);
539 var endNode = getEndPointNode();
540 var block, siblings = [];
542 for (var node = startNode; node; node = node.nextSibling) {
545 if (node == endNode) {
550 tinymce.each(siblings, function(node) {
551 if (isTextBlock(node)) {
552 textBlocks.push(node);
557 if (dom.isBlock(node) || node.nodeName == 'BR') {
558 if (node.nodeName == 'BR') {
566 var nextSibling = node.nextSibling;
567 if (tinymce.dom.BookmarkManager.isBookmarkNode(node)) {
568 if (isTextBlock(nextSibling) || (!nextSibling && node.parentNode == root)) {
575 block = dom.create('p');
576 node.parentNode.insertBefore(block, node);
577 textBlocks.push(block);
580 block.appendChild(node);
586 tinymce.each(getSelectedTextBlocks(), function(block) {
587 var listBlock, sibling;
589 sibling = block.previousSibling;
590 if (sibling && isListNode(sibling) && sibling.nodeName == listName) {
592 block = dom.rename(block, listItemName);
593 sibling.appendChild(block);
595 listBlock = dom.create(listName);
596 block.parentNode.insertBefore(listBlock, block);
597 listBlock.appendChild(block);
598 block = dom.rename(block, listItemName);
601 mergeWithAdjacentLists(listBlock);
604 moveToBookmark(bookmark);
607 function removeList() {
608 var bookmark = createBookmark(selection.getRng(true)), root = editor.getBody();
610 tinymce.each(getSelectedListItems(), function(li) {
613 if (isEditorBody(li.parentNode)) {
622 for (node = li; node && node != root; node = node.parentNode) {
623 if (isListNode(node)) {
628 splitList(rootList, li);
631 moveToBookmark(bookmark);
634 function toggleList(listName) {
635 var parentList = dom.getParent(selection.getStart(), 'OL,UL,DL');
637 if (isEditorBody(parentList)) {
642 if (parentList.nodeName == listName) {
643 removeList(listName);
645 var bookmark = createBookmark(selection.getRng(true));
646 mergeWithAdjacentLists(dom.rename(parentList, listName));
647 moveToBookmark(bookmark);
654 function queryListCommandState(listName) {
656 var parentList = dom.getParent(editor.selection.getStart(), 'UL,OL,DL');
658 return parentList && parentList.nodeName == listName;
662 self.backspaceDelete = function(isForward) {
663 function findNextCaretContainer(rng, isForward) {
664 var node = rng.startContainer, offset = rng.startOffset;
665 var nonEmptyBlocks, walker;
667 if (node.nodeType == 3 && (isForward ? offset < node.data.length : offset > 0)) {
671 nonEmptyBlocks = editor.schema.getNonEmptyElements();
672 walker = new tinymce.dom.TreeWalker(rng.startContainer);
674 while ((node = walker[isForward ? 'next' : 'prev']())) {
675 if (node.nodeName == 'LI' && !node.hasChildNodes()) {
679 if (nonEmptyBlocks[node.nodeName]) {
683 if (node.nodeType == 3 && node.data.length > 0) {
689 function mergeLiElements(fromElm, toElm) {
690 var node, listNode, ul = fromElm.parentNode;
692 if (isListNode(toElm.lastChild)) {
693 listNode = toElm.lastChild;
696 node = toElm.lastChild;
697 if (node && node.nodeName == 'BR' && fromElm.hasChildNodes()) {
701 if (isEmpty(toElm, true)) {
702 dom.$(toElm).empty();
705 if (!isEmpty(fromElm, true)) {
706 while ((node = fromElm.firstChild)) {
707 toElm.appendChild(node);
712 toElm.appendChild(listNode);
717 if (isEmpty(ul) && !isEditorBody(ul)) {
722 if (selection.isCollapsed()) {
723 var li = dom.getParent(selection.getStart(), 'LI'), ul, rng, otherLi;
727 if (isEditorBody(ul) && dom.isEmpty(ul)) {
731 rng = selection.getRng(true);
732 otherLi = dom.getParent(findNextCaretContainer(rng, isForward), 'LI');
734 if (otherLi && otherLi != li) {
735 var bookmark = createBookmark(rng);
738 mergeLiElements(otherLi, li);
740 mergeLiElements(li, otherLi);
743 moveToBookmark(bookmark);
746 } else if (!otherLi) {
747 if (!isForward && removeList(ul.nodeName)) {
755 editor.on('BeforeExecCommand', function(e) {
756 var cmd = e.command.toLowerCase(), isHandled;
758 if (cmd == "indent") {
759 if (indentSelection()) {
762 } else if (cmd == "outdent") {
763 if (outdentSelection()) {
769 editor.fire('ExecCommand', {command: e.command});
775 editor.addCommand('InsertUnorderedList', function() {
779 editor.addCommand('InsertOrderedList', function() {
783 editor.addCommand('InsertDefinitionList', function() {
787 editor.addQueryStateHandler('InsertUnorderedList', queryListCommandState('UL'));
788 editor.addQueryStateHandler('InsertOrderedList', queryListCommandState('OL'));
789 editor.addQueryStateHandler('InsertDefinitionList', queryListCommandState('DL'));
791 editor.on('keydown', function(e) {
792 // Check for tab but not ctrl/cmd+tab since it switches browser tabs
793 if (e.keyCode != 9 || tinymce.util.VK.metaKeyPressed(e)) {
797 if (editor.dom.getParent(editor.selection.getStart(), 'LI,DT,DD')) {
809 editor.addButton('indent', {
811 title: 'Increase indent',
813 onPostRender: function() {
816 editor.on('nodechange', function() {
817 var blocks = editor.selection.getSelectedBlocks();
820 for (var i = 0, l = blocks.length; !disable && i < l; i++) {
821 var tag = blocks[i].nodeName;
823 disable = (tag == 'LI' && isFirstChild(blocks[i]) || tag == 'UL' || tag == 'OL' || tag == 'DD');
826 ctrl.disabled(disable);
831 editor.on('keydown', function(e) {
832 if (e.keyCode == tinymce.util.VK.BACKSPACE) {
833 if (self.backspaceDelete()) {
836 } else if (e.keyCode == tinymce.util.VK.DELETE) {
837 if (self.backspaceDelete(true)) {