4 * Copyright 2011, Moxiecode Systems AB
5 * Released under LGPL License.
7 * License: http://tinymce.moxiecode.com/license
8 * Contributing: http://tinymce.moxiecode.com/contributing
12 var each = tinymce.each, Event = tinymce.dom.Event, bookmark;
14 // Skips text nodes that only contain whitespace since they aren't semantically important.
15 function skipWhitespaceNodes(e, next) {
16 while (e && (e.nodeType === 8 || (e.nodeType === 3 && /^[ \t\n\r]*$/.test(e.nodeValue)))) {
22 function skipWhitespaceNodesBackwards(e) {
23 return skipWhitespaceNodes(e, function(e) {
24 return e.previousSibling;
28 function skipWhitespaceNodesForwards(e) {
29 return skipWhitespaceNodes(e, function(e) {
34 function hasParentInList(ed, e, list) {
35 return ed.dom.getParent(e, function(p) {
36 return tinymce.inArray(list, p) !== -1;
41 return e && (e.tagName === 'OL' || e.tagName === 'UL');
44 function splitNestedLists(element, dom) {
45 var tmp, nested, wrapItem;
46 tmp = skipWhitespaceNodesBackwards(element.lastChild);
49 tmp = skipWhitespaceNodesBackwards(nested.previousSibling);
52 wrapItem = dom.create('li', { style: 'list-style-type: none;'});
53 dom.split(element, nested);
54 dom.insertAfter(wrapItem, nested);
55 wrapItem.appendChild(nested);
56 wrapItem.appendChild(nested);
57 element = wrapItem.previousSibling;
62 function attemptMergeWithAdjacent(e, allowDifferentListStyles, mergeParagraphs) {
63 e = attemptMergeWithPrevious(e, allowDifferentListStyles, mergeParagraphs);
64 return attemptMergeWithNext(e, allowDifferentListStyles, mergeParagraphs);
67 function attemptMergeWithPrevious(e, allowDifferentListStyles, mergeParagraphs) {
68 var prev = skipWhitespaceNodesBackwards(e.previousSibling);
70 return attemptMerge(prev, e, allowDifferentListStyles ? prev : false, mergeParagraphs);
76 function attemptMergeWithNext(e, allowDifferentListStyles, mergeParagraphs) {
77 var next = skipWhitespaceNodesForwards(e.nextSibling);
79 return attemptMerge(e, next, allowDifferentListStyles ? next : false, mergeParagraphs);
85 function attemptMerge(e1, e2, differentStylesMasterElement, mergeParagraphs) {
86 if (canMerge(e1, e2, !!differentStylesMasterElement, mergeParagraphs)) {
87 return merge(e1, e2, differentStylesMasterElement);
88 } else if (e1 && e1.tagName === 'LI' && isList(e2)) {
89 // Fix invalidly nested lists.
95 function canMerge(e1, e2, allowDifferentListStyles, mergeParagraphs) {
98 } else if (e1.tagName === 'LI' && e2.tagName === 'LI') {
99 return e2.style.listStyleType === 'none' || containsOnlyAList(e2);
100 } else if (isList(e1)) {
101 return (e1.tagName === e2.tagName && (allowDifferentListStyles || e1.style.listStyleType === e2.style.listStyleType)) || isListForIndent(e2);
102 } else if (mergeParagraphs && e1.tagName === 'P' && e2.tagName === 'P') {
109 function isListForIndent(e) {
110 var firstLI = skipWhitespaceNodesForwards(e.firstChild), lastLI = skipWhitespaceNodesBackwards(e.lastChild);
111 return firstLI && lastLI && isList(e) && firstLI === lastLI && (isList(firstLI) || firstLI.style.listStyleType === 'none' || containsOnlyAList(firstLI));
114 function containsOnlyAList(e) {
115 var firstChild = skipWhitespaceNodesForwards(e.firstChild), lastChild = skipWhitespaceNodesBackwards(e.lastChild);
116 return firstChild && lastChild && firstChild === lastChild && isList(firstChild);
119 function merge(e1, e2, masterElement) {
120 var lastOriginal = skipWhitespaceNodesBackwards(e1.lastChild), firstNew = skipWhitespaceNodesForwards(e2.firstChild);
121 if (e1.tagName === 'P') {
122 e1.appendChild(e1.ownerDocument.createElement('br'));
124 while (e2.firstChild) {
125 e1.appendChild(e2.firstChild);
128 e1.style.listStyleType = masterElement.style.listStyleType;
130 e2.parentNode.removeChild(e2);
131 attemptMerge(lastOriginal, firstNew, false);
135 function findItemToOperateOn(e, dom) {
137 if (!dom.is(e, 'li,ol,ul')) {
138 item = dom.getParent(e, 'li');
146 tinymce.create('tinymce.plugins.Lists', {
147 init: function(ed, url) {
148 var LIST_TABBING = 0;
149 var LIST_EMPTY_ITEM = 1;
151 var LIST_UNKNOWN = 3;
152 var state = LIST_UNKNOWN;
154 function isTabInList(e) {
155 return e.keyCode === 9 && (ed.queryCommandState('InsertUnorderedList') || ed.queryCommandState('InsertOrderedList'));
158 function isOnLastListItem() {
160 var grandParent = li.parentNode.parentNode;
161 var isLastItem = li.parentNode.lastChild === li;
162 return isLastItem && !isNestedList(grandParent) && isEmptyListItem(li);
165 function isNestedList(grandParent) {
166 if (isList(grandParent)) {
167 return grandParent.parentNode && grandParent.parentNode.tagName === 'LI';
169 return grandParent.tagName === 'LI';
173 function isInEmptyListItem() {
174 return ed.selection.isCollapsed() && isEmptyListItem(getLi());
178 var n = ed.selection.getStart();
179 // Get start will return BR if the LI only contains a BR or an empty element as we use these to fix caret position
180 return ((n.tagName == 'BR' || n.tagName == '') && n.parentNode.tagName == 'LI') ? n.parentNode : n;
183 function isEmptyListItem(li) {
184 var numChildren = li.childNodes.length;
185 if (li.tagName === 'LI') {
186 return numChildren == 0 ? true : numChildren == 1 && (li.firstChild.tagName == '' || isEmptyWebKitLi(li) || isEmptyIE9Li(li));
191 function isEmptyWebKitLi(li) {
192 // Check for empty LI or a LI with just a child that is a BR since Gecko and WebKit uses BR elements to place the caret
193 return tinymce.isWebKit && li.firstChild.nodeName == 'BR';
196 function isEmptyIE9Li(li) {
197 // only consider this to be last item if there is no list item content or that content is nbsp or space since IE9 creates these
198 var lis = tinymce.grep(li.parentNode.childNodes, function(n) {return n.nodeName == 'LI'});
199 var isLastLi = li == lis[lis.length - 1];
200 var child = li.firstChild;
201 return tinymce.isIE9 && isLastLi && (child.nodeValue == String.fromCharCode(160) || child.nodeValue == String.fromCharCode(32));
204 function isEnter(e) {
205 return e.keyCode === 13;
208 function getListKeyState(e) {
209 if (isTabInList(e)) {
211 } else if (isEnter(e) && isOnLastListItem()) {
213 } else if (isEnter(e) && isInEmptyListItem()) {
214 return LIST_EMPTY_ITEM;
220 function cancelEnterAndTab(_, e) {
221 if (state == LIST_TABBING || state == LIST_EMPTY_ITEM) {
222 return Event.cancel(e);
226 function imageJoiningListItem(ed, e) {
229 if (!tinymce.isGecko)
232 var n = ed.selection.getStart();
233 if (e.keyCode != 8 || n.tagName !== 'IMG')
236 function lastLI(node) {
237 var child = node.firstChild;
243 if (child.tagName === 'LI')
245 } while (child = child.nextSibling);
250 function addChildren(parentNode, destination) {
251 while (parentNode.childNodes.length > 0)
252 destination.appendChild(parentNode.childNodes[0]);
255 // Check if there is a previous sibling
256 prevSibling = n.parentNode.previousSibling;
261 if (prevSibling.tagName === 'UL' || prevSibling.tagName === 'OL')
263 else if (prevSibling.previousSibling && (prevSibling.previousSibling.tagName === 'UL' || prevSibling.previousSibling.tagName === 'OL'))
264 ul = prevSibling.previousSibling;
270 // move the caret to the end of the list item
271 var rng = ed.dom.createRng();
274 ed.selection.setRng(rng);
275 ed.selection.collapse(true);
277 // save a bookmark at the end of the list item
278 var bookmark = ed.selection.getBookmark();
280 // copy the image an its text to the list item
281 var clone = n.parentNode.cloneNode(true);
282 if (clone.tagName === 'P' || clone.tagName === 'DIV')
283 addChildren(clone, li);
285 li.appendChild(clone);
287 // remove the old copy of the image
288 n.parentNode.parentNode.removeChild(n.parentNode);
290 // move the caret where we saved the bookmark
291 ed.selection.moveToBookmark(bookmark);
294 // fix the cursor position to ensure it is correct in IE
295 function setCursorPositionToOriginalLi(li) {
296 var list = ed.dom.getParent(li, 'ol,ul');
298 var lastLi = list.lastChild;
299 lastLi.appendChild(ed.getDoc().createElement(''));
300 ed.selection.setCursorLocation(lastLi, 0);
305 ed.addCommand('Indent', this.indent, this);
306 ed.addCommand('Outdent', this.outdent, this);
307 ed.addCommand('InsertUnorderedList', function() {
308 this.applyList('UL', 'OL');
310 ed.addCommand('InsertOrderedList', function() {
311 this.applyList('OL', 'UL');
314 ed.onInit.add(function() {
315 ed.editorCommands.addCommands({
316 'outdent': function() {
317 var sel = ed.selection, dom = ed.dom;
319 function hasStyleIndent(n) {
320 n = dom.getParent(n, dom.isBlock);
321 return n && (parseInt(ed.dom.getStyle(n, 'margin-left') || 0, 10) + parseInt(ed.dom.getStyle(n, 'padding-left') || 0, 10)) > 0;
324 return hasStyleIndent(sel.getStart()) || hasStyleIndent(sel.getEnd()) || ed.queryCommandState('InsertOrderedList') || ed.queryCommandState('InsertUnorderedList');
329 ed.onKeyUp.add(function(ed, e) {
330 if (state == LIST_TABBING) {
331 ed.execCommand(e.shiftKey ? 'Outdent' : 'Indent', true, null);
332 state = LIST_UNKNOWN;
333 return Event.cancel(e);
334 } else if (state == LIST_EMPTY_ITEM) {
336 var shouldOutdent = ed.settings.list_outdent_on_enter === true || e.shiftKey;
337 ed.execCommand(shouldOutdent ? 'Outdent' : 'Indent', true, null);
339 setCursorPositionToOriginalLi(li);
341 return Event.cancel(e);
342 } else if (state == LIST_ESCAPE) {
344 // append a zero sized nbsp so that caret is positioned correctly in IE8 after escaping and applying formatting.
345 // if there is no text then applying formatting for e.g a H1 to the P tag immediately following list after
346 // escaping from it will cause the caret to be positioned on the last li instead of staying the in P tag.
347 var n = ed.getDoc().createTextNode('\uFEFF');
348 ed.selection.getNode().appendChild(n);
349 } else if (tinymce.isIE9) {
350 // IE9 does not escape the list so we use outdent to do this and cancel the default behaviour
351 ed.execCommand('Outdent');
352 return Event.cancel(e);
356 ed.onKeyDown.add(function(_, e) { state = getListKeyState(e); });
357 ed.onKeyDown.add(cancelEnterAndTab);
358 ed.onKeyDown.add(imageJoiningListItem);
359 ed.onKeyPress.add(cancelEnterAndTab);
362 applyList: function(targetListType, oppositeListType) {
363 var t = this, ed = t.ed, dom = ed.dom, applied = [], hasSameType = false, hasOppositeType = false, hasNonList = false, actions,
364 selectedBlocks = ed.selection.getSelectedBlocks();
366 function cleanupBr(e) {
367 if (e && e.tagName === 'BR') {
372 function makeList(element) {
373 var list = dom.create(targetListType), li;
375 function adjustIndentForNewList(element) {
376 // If there's a margin-left, outdent one level to account for the extra list margin.
377 if (element.style.marginLeft || element.style.paddingLeft) {
378 t.adjustPaddingFunction(false)(element);
382 if (element.tagName === 'LI') {
383 // No change required.
384 } else if (element.tagName === 'P' || element.tagName === 'DIV' || element.tagName === 'BODY') {
385 processBrs(element, function(startSection, br, previousBR) {
386 doWrapList(startSection, br, element.tagName === 'BODY' ? null : startSection.parentNode);
387 li = startSection.parentNode;
388 adjustIndentForNewList(li);
391 if (element.tagName === 'P' || selectedBlocks.length > 1) {
392 dom.split(li.parentNode.parentNode, li.parentNode);
394 attemptMergeWithAdjacent(li.parentNode, true);
397 // Put the list around the element.
398 li = dom.create('li');
399 dom.insertAfter(li, element);
400 li.appendChild(element);
401 adjustIndentForNewList(element);
404 dom.insertAfter(list, element);
405 list.appendChild(element);
406 attemptMergeWithAdjacent(list, true);
407 applied.push(element);
410 function doWrapList(start, end, template) {
411 var li, n = start, tmp, i;
412 while (!dom.isBlock(start.parentNode) && start.parentNode !== dom.getRoot()) {
413 start = dom.split(start.parentNode, start.previousSibling);
414 start = start.nextSibling;
418 li = template.cloneNode(true);
419 start.parentNode.insertBefore(li, start);
420 while (li.firstChild) dom.remove(li.firstChild);
421 li = dom.rename(li, 'li');
423 li = dom.create('li');
424 start.parentNode.insertBefore(li, start);
426 while (n && n != end) {
431 if (li.childNodes.length === 0) {
432 li.innerHTML = '<br _mce_bogus="1" />';
437 function processBrs(element, callback) {
438 var startSection, previousBR, END_TO_START = 3, START_TO_END = 1,
439 breakElements = 'br,ul,ol,p,div,h1,h2,h3,h4,h5,h6,table,blockquote,address,pre,form,center,dl';
441 function isAnyPartSelected(start, end) {
442 var r = dom.createRng(), sel;
443 bookmark.keep = true;
444 ed.selection.moveToBookmark(bookmark);
445 bookmark.keep = false;
446 sel = ed.selection.getRng(true);
448 end = start.parentNode.lastChild;
450 r.setStartBefore(start);
452 return !(r.compareBoundaryPoints(END_TO_START, sel) > 0 || r.compareBoundaryPoints(START_TO_END, sel) <= 0);
455 function nextLeaf(br) {
457 return br.nextSibling;
458 if (!dom.isBlock(br.parentNode) && br.parentNode !== dom.getRoot())
459 return nextLeaf(br.parentNode);
462 // Split on BRs within the range and process those.
463 startSection = element.firstChild;
464 // First mark the BRs that have any part of the previous section selected.
465 var trailingContentSelected = false;
466 each(dom.select(breakElements, element), function(br) {
468 if (br.hasAttribute && br.hasAttribute('_mce_bogus')) {
469 return true; // Skip the bogus Brs that are put in to appease Firefox and Safari.
471 if (isAnyPartSelected(startSection, br)) {
472 dom.addClass(br, '_mce_tagged_br');
473 startSection = nextLeaf(br);
476 trailingContentSelected = (startSection && isAnyPartSelected(startSection, undefined));
477 startSection = element.firstChild;
478 each(dom.select(breakElements, element), function(br) {
479 // Got a section from start to br.
480 var tmp = nextLeaf(br);
481 if (br.hasAttribute && br.hasAttribute('_mce_bogus')) {
482 return true; // Skip the bogus Brs that are put in to appease Firefox and Safari.
484 if (dom.hasClass(br, '_mce_tagged_br')) {
485 callback(startSection, br, previousBR);
492 if (trailingContentSelected) {
493 callback(startSection, undefined, previousBR);
497 function wrapList(element) {
498 processBrs(element, function(startSection, br, previousBR) {
499 // Need to indent this part
500 doWrapList(startSection, br);
502 cleanupBr(previousBR);
506 function changeList(element) {
507 if (tinymce.inArray(applied, element) !== -1) {
510 if (element.parentNode.tagName === oppositeListType) {
511 dom.split(element.parentNode, element);
513 attemptMergeWithNext(element.parentNode, false);
515 applied.push(element);
518 function convertListItemToParagraph(element) {
519 var child, nextChild, mergedElement, splitLast;
520 if (tinymce.inArray(applied, element) !== -1) {
523 element = splitNestedLists(element, dom);
524 while (dom.is(element.parentNode, 'ol,ul,li')) {
525 dom.split(element.parentNode, element);
527 // Push the original element we have from the selection, not the renamed one.
528 applied.push(element);
529 element = dom.rename(element, 'p');
530 mergedElement = attemptMergeWithAdjacent(element, false, ed.settings.force_br_newlines);
531 if (mergedElement === element) {
532 // Now split out any block elements that can't be contained within a P.
533 // Manually iterate to ensure we handle modifications correctly (doesn't work with tinymce.each)
534 child = element.firstChild;
536 if (dom.isBlock(child)) {
537 child = dom.split(child.parentNode, child);
539 nextChild = child.nextSibling && child.nextSibling.firstChild;
541 nextChild = child.nextSibling;
542 if (splitLast && child.tagName === 'BR') {
552 each(selectedBlocks, function(e) {
553 e = findItemToOperateOn(e, dom);
554 if (e.tagName === oppositeListType || (e.tagName === 'LI' && e.parentNode.tagName === oppositeListType)) {
555 hasOppositeType = true;
556 } else if (e.tagName === targetListType || (e.tagName === 'LI' && e.parentNode.tagName === targetListType)) {
563 if (hasNonList || hasOppositeType || selectedBlocks.length === 0) {
574 'DIV': selectedBlocks.length > 1 ? makeList : wrapList,
575 defaultAction: wrapList
579 defaultAction: convertListItemToParagraph
582 this.process(actions);
586 var ed = this.ed, dom = ed.dom, indented = [];
588 function createWrapItem(element) {
589 var wrapItem = dom.create('li', { style: 'list-style-type: none;'});
590 dom.insertAfter(wrapItem, element);
594 function createWrapList(element) {
595 var wrapItem = createWrapItem(element),
596 list = dom.getParent(element, 'ol,ul'),
597 listType = list.tagName,
598 listStyle = dom.getStyle(list, 'list-style-type'),
601 if (listStyle !== '') {
602 attrs.style = 'list-style-type: ' + listStyle + ';';
604 wrapList = dom.create(listType, attrs);
605 wrapItem.appendChild(wrapList);
609 function indentLI(element) {
610 if (!hasParentInList(ed, element, indented)) {
611 element = splitNestedLists(element, dom);
612 var wrapList = createWrapList(element);
613 wrapList.appendChild(element);
614 attemptMergeWithAdjacent(wrapList.parentNode, false);
615 attemptMergeWithAdjacent(wrapList, false);
616 indented.push(element);
622 defaultAction: this.adjustPaddingFunction(true)
627 outdent: function() {
628 var t = this, ed = t.ed, dom = ed.dom, outdented = [];
630 function outdentLI(element) {
631 var listElement, targetParent, align;
632 if (!hasParentInList(ed, element, outdented)) {
633 if (dom.getStyle(element, 'margin-left') !== '' || dom.getStyle(element, 'padding-left') !== '') {
634 return t.adjustPaddingFunction(false)(element);
636 align = dom.getStyle(element, 'text-align', true);
637 if (align === 'center' || align === 'right') {
638 dom.setStyle(element, 'text-align', 'left');
641 element = splitNestedLists(element, dom);
642 listElement = element.parentNode;
643 targetParent = element.parentNode.parentNode;
644 if (targetParent.tagName === 'P') {
645 dom.split(targetParent, element.parentNode);
647 dom.split(listElement, element);
648 if (targetParent.tagName === 'LI') {
649 // Nested list, need to split the LI and go back out to the OL/UL element.
650 dom.split(targetParent, element);
651 } else if (!dom.is(targetParent, 'ol,ul')) {
652 dom.rename(element, 'p');
655 outdented.push(element);
661 defaultAction: this.adjustPaddingFunction(false)
664 each(outdented, attemptMergeWithAdjacent);
667 process: function(actions) {
668 var t = this, sel = t.ed.selection, dom = t.ed.dom, selectedBlocks, r;
670 function processElement(element) {
671 dom.removeClass(element, '_mce_act_on');
672 if (!element || element.nodeType !== 1) {
675 element = findItemToOperateOn(element, dom);
676 var action = actions[element.tagName];
678 action = actions.defaultAction;
683 function recurse(element) {
684 t.splitSafeEach(element.childNodes, processElement);
687 function brAtEdgeOfSelection(container, offset) {
688 return offset >= 0 && container.hasChildNodes() && offset < container.childNodes.length &&
689 container.childNodes[offset].tagName === 'BR';
692 selectedBlocks = sel.getSelectedBlocks();
693 if (selectedBlocks.length === 0) {
694 selectedBlocks = [ dom.getRoot() ];
697 r = sel.getRng(true);
699 if (brAtEdgeOfSelection(r.endContainer, r.endOffset - 1)) {
700 r.setEnd(r.endContainer, r.endOffset - 1);
703 if (brAtEdgeOfSelection(r.startContainer, r.startOffset)) {
704 r.setStart(r.startContainer, r.startOffset + 1);
711 // append a zero sized nbsp so that caret is restored correctly using bookmark
712 var s = t.ed.selection.getNode();
713 if (s.tagName === 'LI' && !(s.parentNode.lastChild === s)) {
714 var i = t.ed.getDoc().createTextNode('\uFEFF');
719 bookmark = sel.getBookmark();
720 actions.OL = actions.UL = recurse;
721 t.splitSafeEach(selectedBlocks, processElement);
722 sel.moveToBookmark(bookmark);
724 // Avoids table or image handles being left behind in Firefox.
725 t.ed.execCommand('mceRepaint');
728 splitSafeEach: function(elements, f) {
729 if (tinymce.isGecko && (/Firefox\/[12]\.[0-9]/.test(navigator.userAgent) ||
730 /Firefox\/3\.[0-4]/.test(navigator.userAgent))) {
731 this.classBasedEach(elements, f);
737 classBasedEach: function(elements, f) {
738 var dom = this.ed.dom, nodes, element;
740 each(elements, function(element) {
741 dom.addClass(element, '_mce_act_on');
743 nodes = dom.select('._mce_act_on');
744 while (nodes.length > 0) {
745 element = nodes.shift();
746 dom.removeClass(element, '_mce_act_on');
748 nodes = dom.select('._mce_act_on');
752 adjustPaddingFunction: function(isIndent) {
753 var indentAmount, indentUnits, ed = this.ed;
754 indentAmount = ed.settings.indentation;
755 indentUnits = /[a-z%]+/i.exec(indentAmount);
756 indentAmount = parseInt(indentAmount, 10);
757 return function(element) {
758 var currentIndent, newIndentAmount;
759 currentIndent = parseInt(ed.dom.getStyle(element, 'margin-left') || 0, 10) + parseInt(ed.dom.getStyle(element, 'padding-left') || 0, 10);
761 newIndentAmount = currentIndent + indentAmount;
763 newIndentAmount = currentIndent - indentAmount;
765 ed.dom.setStyle(element, 'padding-left', '');
766 ed.dom.setStyle(element, 'margin-left', newIndentAmount > 0 ? newIndentAmount + indentUnits : '');
770 getInfo: function() {
773 author : 'Moxiecode Systems AB',
774 authorurl : 'http://tinymce.moxiecode.com',
775 infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/lists',
776 version : tinymce.majorVersion + "." + tinymce.minorVersion
780 tinymce.PluginManager.add("lists", tinymce.plugins.Lists);