plugin.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. /**
  2. * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or http://ckeditor.com/license
  4. */
  5. /**
  6. * @fileOverview Handles the indentation of lists.
  7. */
  8. ( function() {
  9. 'use strict';
  10. var isNotWhitespaces = CKEDITOR.dom.walker.whitespaces( true ),
  11. isNotBookmark = CKEDITOR.dom.walker.bookmark( false, true ),
  12. TRISTATE_DISABLED = CKEDITOR.TRISTATE_DISABLED,
  13. TRISTATE_OFF = CKEDITOR.TRISTATE_OFF;
  14. CKEDITOR.plugins.add( 'indentlist', {
  15. requires: 'indent',
  16. init: function( editor ) {
  17. var globalHelpers = CKEDITOR.plugins.indent;
  18. // Register commands.
  19. globalHelpers.registerCommands( editor, {
  20. indentlist: new commandDefinition( editor, 'indentlist', true ),
  21. outdentlist: new commandDefinition( editor, 'outdentlist' )
  22. } );
  23. function commandDefinition( editor ) {
  24. globalHelpers.specificDefinition.apply( this, arguments );
  25. // Require ul OR ol list.
  26. this.requiredContent = [ 'ul', 'ol' ];
  27. // Indent and outdent lists with TAB/SHIFT+TAB key. Indenting can
  28. // be done for any list item that isn't the first child of the parent.
  29. editor.on( 'key', function( evt ) {
  30. if ( editor.mode != 'wysiwyg' )
  31. return;
  32. if ( evt.data.keyCode == this.indentKey ) {
  33. var list = this.getContext( editor.elementPath() );
  34. if ( list ) {
  35. // Don't indent if in first list item of the parent.
  36. // Outdent, however, can always be done to collapse
  37. // the list into a paragraph (div).
  38. if ( this.isIndent && CKEDITOR.plugins.indentList.firstItemInPath( this.context, editor.elementPath(), list ) )
  39. return;
  40. // Exec related global indentation command. Global
  41. // commands take care of bookmarks and selection,
  42. // so it's much easier to use them instead of
  43. // content-specific commands.
  44. editor.execCommand( this.relatedGlobal );
  45. // Cancel the key event so editor doesn't lose focus.
  46. evt.cancel();
  47. }
  48. }
  49. }, this );
  50. // There are two different jobs for this plugin:
  51. //
  52. // * Indent job (priority=10), before indentblock.
  53. //
  54. // This job is before indentblock because, if this plugin is
  55. // loaded it has higher priority over indentblock. It means that,
  56. // if possible, nesting is performed, and then block manipulation,
  57. // if necessary.
  58. //
  59. // * Outdent job (priority=30), after outdentblock.
  60. //
  61. // This job got to be after outdentblock because in some cases
  62. // (margin, config#indentClass on list) outdent must be done on
  63. // block-level.
  64. this.jobs[ this.isIndent ? 10 : 30 ] = {
  65. refresh: this.isIndent ?
  66. function( editor, path ) {
  67. var list = this.getContext( path ),
  68. inFirstListItem = CKEDITOR.plugins.indentList.firstItemInPath( this.context, path, list );
  69. if ( !list || !this.isIndent || inFirstListItem )
  70. return TRISTATE_DISABLED;
  71. return TRISTATE_OFF;
  72. } : function( editor, path ) {
  73. var list = this.getContext( path );
  74. if ( !list || this.isIndent )
  75. return TRISTATE_DISABLED;
  76. return TRISTATE_OFF;
  77. },
  78. exec: CKEDITOR.tools.bind( indentList, this )
  79. };
  80. }
  81. CKEDITOR.tools.extend( commandDefinition.prototype, globalHelpers.specificDefinition.prototype, {
  82. // Elements that, if in an elementpath, will be handled by this
  83. // command. They restrict the scope of the plugin.
  84. context: { ol: 1, ul: 1 }
  85. } );
  86. }
  87. } );
  88. function indentList( editor ) {
  89. var that = this,
  90. database = this.database,
  91. context = this.context;
  92. function indent( listNode ) {
  93. // Our starting and ending points of the range might be inside some blocks under a list item...
  94. // So before playing with the iterator, we need to expand the block to include the list items.
  95. var startContainer = range.startContainer,
  96. endContainer = range.endContainer;
  97. while ( startContainer && !startContainer.getParent().equals( listNode ) )
  98. startContainer = startContainer.getParent();
  99. while ( endContainer && !endContainer.getParent().equals( listNode ) )
  100. endContainer = endContainer.getParent();
  101. if ( !startContainer || !endContainer )
  102. return false;
  103. // Now we can iterate over the individual items on the same tree depth.
  104. var block = startContainer,
  105. itemsToMove = [],
  106. stopFlag = false;
  107. while ( !stopFlag ) {
  108. if ( block.equals( endContainer ) )
  109. stopFlag = true;
  110. itemsToMove.push( block );
  111. block = block.getNext();
  112. }
  113. if ( itemsToMove.length < 1 )
  114. return false;
  115. // Do indent or outdent operations on the array model of the list, not the
  116. // list's DOM tree itself. The array model demands that it knows as much as
  117. // possible about the surrounding lists, we need to feed it the further
  118. // ancestor node that is still a list.
  119. var listParents = listNode.getParents( true );
  120. for ( var i = 0; i < listParents.length; i++ ) {
  121. if ( listParents[ i ].getName && context[ listParents[ i ].getName() ] ) {
  122. listNode = listParents[ i ];
  123. break;
  124. }
  125. }
  126. var indentOffset = that.isIndent ? 1 : -1,
  127. startItem = itemsToMove[ 0 ],
  128. lastItem = itemsToMove[ itemsToMove.length - 1 ],
  129. // Convert the list DOM tree into a one dimensional array.
  130. listArray = CKEDITOR.plugins.list.listToArray( listNode, database ),
  131. // Apply indenting or outdenting on the array.
  132. baseIndent = listArray[ lastItem.getCustomData( 'listarray_index' ) ].indent;
  133. for ( i = startItem.getCustomData( 'listarray_index' ); i <= lastItem.getCustomData( 'listarray_index' ); i++ ) {
  134. listArray[ i ].indent += indentOffset;
  135. // Make sure the newly created sublist get a brand-new element of the same type. (#5372)
  136. if ( indentOffset > 0 ) {
  137. var listRoot = listArray[ i ].parent;
  138. listArray[ i ].parent = new CKEDITOR.dom.element( listRoot.getName(), listRoot.getDocument() );
  139. }
  140. }
  141. for ( i = lastItem.getCustomData( 'listarray_index' ) + 1; i < listArray.length && listArray[ i ].indent > baseIndent; i++ )
  142. listArray[ i ].indent += indentOffset;
  143. // Convert the array back to a DOM forest (yes we might have a few subtrees now).
  144. // And replace the old list with the new forest.
  145. var newList = CKEDITOR.plugins.list.arrayToList( listArray, database, null, editor.config.enterMode, listNode.getDirection() );
  146. // Avoid nested <li> after outdent even they're visually same,
  147. // recording them for later refactoring.(#3982)
  148. if ( !that.isIndent ) {
  149. var parentLiElement;
  150. if ( ( parentLiElement = listNode.getParent() ) && parentLiElement.is( 'li' ) ) {
  151. var children = newList.listNode.getChildren(),
  152. pendingLis = [],
  153. count = children.count(),
  154. child;
  155. for ( i = count - 1; i >= 0; i-- ) {
  156. if ( ( child = children.getItem( i ) ) && child.is && child.is( 'li' ) )
  157. pendingLis.push( child );
  158. }
  159. }
  160. }
  161. if ( newList )
  162. newList.listNode.replace( listNode );
  163. // Move the nested <li> to be appeared after the parent.
  164. if ( pendingLis && pendingLis.length ) {
  165. for ( i = 0; i < pendingLis.length; i++ ) {
  166. var li = pendingLis[ i ],
  167. followingList = li;
  168. // Nest preceding <ul>/<ol> inside current <li> if any.
  169. while ( ( followingList = followingList.getNext() ) && followingList.is && followingList.getName() in context ) {
  170. // IE requires a filler NBSP for nested list inside empty list item,
  171. // otherwise the list item will be inaccessiable. (#4476)
  172. if ( CKEDITOR.env.needsNbspFiller && !li.getFirst( neitherWhitespacesNorBookmark ) )
  173. li.append( range.document.createText( '\u00a0' ) );
  174. li.append( followingList );
  175. }
  176. li.insertAfter( parentLiElement );
  177. }
  178. }
  179. if ( newList )
  180. editor.fire( 'contentDomInvalidated' );
  181. return true;
  182. }
  183. var selection = editor.getSelection(),
  184. ranges = selection && selection.getRanges(),
  185. iterator = ranges.createIterator(),
  186. range;
  187. while ( ( range = iterator.getNextRange() ) ) {
  188. var nearestListBlock = range.getCommonAncestor();
  189. while ( nearestListBlock && !( nearestListBlock.type == CKEDITOR.NODE_ELEMENT && context[ nearestListBlock.getName() ] ) ) {
  190. // Avoid having plugin propagate to parent of editor in inline mode by canceling the indentation. (#12796)
  191. if ( editor.editable().equals( nearestListBlock ) ) {
  192. nearestListBlock = false;
  193. break;
  194. }
  195. nearestListBlock = nearestListBlock.getParent();
  196. }
  197. // Avoid having selection boundaries out of the list.
  198. // <ul><li>[...</li></ul><p>...]</p> => <ul><li>[...]</li></ul><p>...</p>
  199. if ( !nearestListBlock ) {
  200. if ( ( nearestListBlock = range.startPath().contains( context ) ) )
  201. range.setEndAt( nearestListBlock, CKEDITOR.POSITION_BEFORE_END );
  202. }
  203. // Avoid having selection enclose the entire list. (#6138)
  204. // [<ul><li>...</li></ul>] =><ul><li>[...]</li></ul>
  205. if ( !nearestListBlock ) {
  206. var selectedNode = range.getEnclosedNode();
  207. if ( selectedNode && selectedNode.type == CKEDITOR.NODE_ELEMENT && selectedNode.getName() in context ) {
  208. range.setStartAt( selectedNode, CKEDITOR.POSITION_AFTER_START );
  209. range.setEndAt( selectedNode, CKEDITOR.POSITION_BEFORE_END );
  210. nearestListBlock = selectedNode;
  211. }
  212. }
  213. // Avoid selection anchors under list root.
  214. // <ul>[<li>...</li>]</ul> => <ul><li>[...]</li></ul>
  215. if ( nearestListBlock && range.startContainer.type == CKEDITOR.NODE_ELEMENT && range.startContainer.getName() in context ) {
  216. var walker = new CKEDITOR.dom.walker( range );
  217. walker.evaluator = listItem;
  218. range.startContainer = walker.next();
  219. }
  220. if ( nearestListBlock && range.endContainer.type == CKEDITOR.NODE_ELEMENT && range.endContainer.getName() in context ) {
  221. walker = new CKEDITOR.dom.walker( range );
  222. walker.evaluator = listItem;
  223. range.endContainer = walker.previous();
  224. }
  225. if ( nearestListBlock )
  226. return indent( nearestListBlock );
  227. }
  228. return 0;
  229. }
  230. // Determines whether a node is a list <li> element.
  231. function listItem( node ) {
  232. return node.type == CKEDITOR.NODE_ELEMENT && node.is( 'li' );
  233. }
  234. function neitherWhitespacesNorBookmark( node ) {
  235. return isNotWhitespaces( node ) && isNotBookmark( node );
  236. }
  237. /**
  238. * Global namespace for methods exposed by the Indent List plugin.
  239. *
  240. * @singleton
  241. * @class
  242. */
  243. CKEDITOR.plugins.indentList = {};
  244. /**
  245. * Checks whether the first child of the list is in the path.
  246. * The list can be extracted from the path or given explicitly
  247. * e.g. for better performance if cached.
  248. *
  249. * @since 4.4.6
  250. * @param {Object} query See the {@link CKEDITOR.dom.elementPath#contains} method arguments.
  251. * @param {CKEDITOR.dom.elementPath} path
  252. * @param {CKEDITOR.dom.element} [list]
  253. * @returns {Boolean}
  254. * @member CKEDITOR.plugins.indentList
  255. */
  256. CKEDITOR.plugins.indentList.firstItemInPath = function( query, path, list ) {
  257. var firstListItemInPath = path.contains( listItem );
  258. if ( !list )
  259. list = path.contains( query );
  260. return list && firstListItemInPath && firstListItemInPath.equals( list.getFirst( listItem ) );
  261. };
  262. } )();