liststyleediting.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module list/liststyleediting
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import ListEditing from './listediting';
  10. import ListStyleCommand from './liststylecommand';
  11. import { getSiblingListItem } from './utils';
  12. const DEFAULT_LIST_TYPE = 'default';
  13. /**
  14. * The list styles engine feature.
  15. *
  16. * It sets value for the `listItem` attribute for the {@link module:list/list~List `<listItem>`} element that
  17. * allows modifying list style type.
  18. *
  19. * It registers the `'listStyle'` command.
  20. *
  21. * @extends module:core/plugin~Plugin
  22. */
  23. export default class ListStyleEditing extends Plugin {
  24. /**
  25. * @inheritDoc
  26. */
  27. static get requires() {
  28. return [ ListEditing ];
  29. }
  30. /**
  31. * @inheritDoc
  32. */
  33. static get pluginName() {
  34. return 'ListStyleEditing';
  35. }
  36. /**
  37. * @inheritDoc
  38. */
  39. init() {
  40. const editor = this.editor;
  41. const model = editor.model;
  42. // Extend schema.
  43. model.schema.extend( 'listItem', {
  44. allowAttributes: [ 'listStyle' ]
  45. } );
  46. editor.commands.add( 'listStyle', new ListStyleCommand( editor, DEFAULT_LIST_TYPE ) );
  47. // Fix list attributes when modifying their nesting levels (the `listIndent` attribute).
  48. this.listenTo( editor.commands.get( 'indentList' ), '_executeCleanup', fixListAfterIndentListCommand( editor ) );
  49. this.listenTo( editor.commands.get( 'outdentList' ), '_executeCleanup', fixListAfterOutdentListCommand( editor ) );
  50. this.listenTo( editor.commands.get( 'bulletedList' ), '_executeCleanup', restoreDefaultListStyle( editor ) );
  51. this.listenTo( editor.commands.get( 'numberedList' ), '_executeCleanup', restoreDefaultListStyle( editor ) );
  52. // Register a post-fixer that ensures that the `listStyle` attribute is specified in each `listItem` element.
  53. model.document.registerPostFixer( fixListStyleAttributeOnListItemElements( editor ) );
  54. // Set up conversion.
  55. editor.conversion.for( 'upcast' ).add( upcastListItemStyle() );
  56. editor.conversion.for( 'downcast' ).add( downcastListStyleAttribute() );
  57. }
  58. /**
  59. * @inheritDoc
  60. */
  61. afterInit() {
  62. const editor = this.editor;
  63. // Enable post-fixer that removes the `listStyle` attribute from to-do list items only if the "TodoList" plugin is on.
  64. // We need to registry the hook here since the `TodoList` plugin can be added after the `ListStyleEditing`.
  65. if ( editor.commands.get( 'todoList' ) ) {
  66. editor.model.document.registerPostFixer( removeListStyleAttributeFromTodoList( editor ) );
  67. }
  68. }
  69. }
  70. // Returns a converter that consumes the `style` attribute and search for `list-style-type` definition.
  71. // If not found, the `"default"` value will be used.
  72. //
  73. // @private
  74. // @returns {Function}
  75. function upcastListItemStyle() {
  76. return dispatcher => {
  77. dispatcher.on( 'element:li', ( evt, data, conversionApi ) => {
  78. const listParent = data.viewItem.parent;
  79. const listStyle = listParent.getStyle( 'list-style-type' ) || DEFAULT_LIST_TYPE;
  80. const listItem = data.modelRange.start.nodeAfter;
  81. conversionApi.writer.setAttribute( 'listStyle', listStyle, listItem );
  82. }, { priority: 'low' } );
  83. };
  84. }
  85. // Returns a converter that adds the `list-style-type` definition as a value for the `style` attribute.
  86. // The `"default"` value is removed and not present in the view/data.
  87. //
  88. // @private
  89. // @returns {Function}
  90. function downcastListStyleAttribute() {
  91. return dispatcher => {
  92. dispatcher.on( 'attribute:listStyle:listItem', ( evt, data, conversionApi ) => {
  93. const viewWriter = conversionApi.writer;
  94. const currentElement = data.item;
  95. const listStyle = data.attributeNewValue;
  96. const previousElement = getSiblingListItem( currentElement.previousSibling, {
  97. sameIndent: true,
  98. listIndent: currentElement.getAttribute( 'listIndent' ),
  99. direction: 'backward'
  100. } );
  101. const viewItem = conversionApi.mapper.toViewElement( currentElement );
  102. // Single item list.
  103. if ( !previousElement ) {
  104. setListStyle( viewWriter, listStyle, viewItem.parent );
  105. } else if ( !areRepresentingSameList( previousElement, currentElement ) ) {
  106. viewWriter.breakContainer( viewWriter.createPositionBefore( viewItem ) );
  107. viewWriter.breakContainer( viewWriter.createPositionAfter( viewItem ) );
  108. setListStyle( viewWriter, listStyle, viewItem.parent );
  109. }
  110. }, { priority: 'low' } );
  111. };
  112. // Checks whether specified list items belong to the same list.
  113. //
  114. // @param {module:engine/model/element~Element} listItem1 The first list item to check.
  115. // @param {module:engine/model/element~Element} listItem2 The second list item to check.
  116. // @returns {Boolean}
  117. function areRepresentingSameList( listItem1, listItem2 ) {
  118. return listItem1.getAttribute( 'listType' ) === listItem2.getAttribute( 'listType' ) &&
  119. listItem1.getAttribute( 'listIndent' ) === listItem2.getAttribute( 'listIndent' ) &&
  120. listItem1.getAttribute( 'listStyle' ) === listItem2.getAttribute( 'listStyle' );
  121. }
  122. // Updates or removes the `list-style-type` from the `element`.
  123. //
  124. // @param {module:engine/view/downcastwriter~DowncastWriter} writer
  125. // @param {String} listStyle
  126. // @param {module:engine/view/element~Element} element
  127. function setListStyle( writer, listStyle, element ) {
  128. if ( listStyle && listStyle !== DEFAULT_LIST_TYPE ) {
  129. writer.setStyle( 'list-style-type', listStyle, element );
  130. } else {
  131. writer.removeStyle( 'list-style-type', element );
  132. }
  133. }
  134. }
  135. // When indenting list, nested list should clear its value for the `listStyle` attribute or inherit from nested lists.
  136. //
  137. // ■ List item 1.
  138. // ■ List item 2.[]
  139. // ■ List item 3.
  140. // editor.execute( 'indentList' );
  141. //
  142. // ■ List item 1.
  143. // ○ List item 2.[]
  144. // ■ List item 3.
  145. //
  146. // @private
  147. // @param {module:core/editor/editor~Editor} editor
  148. // @returns {Function}
  149. function fixListAfterIndentListCommand( editor ) {
  150. return ( evt, changedItems ) => {
  151. let valueToSet;
  152. const root = changedItems[ 0 ];
  153. const rootIndent = root.getAttribute( 'listIndent' );
  154. const itemsToUpdate = changedItems.filter( item => item.getAttribute( 'listIndent' ) === rootIndent );
  155. // A case where a few list items are intended must be checked separately
  156. // since `getSiblingListItem()` returns the first changed element.
  157. // ■ List item 1.
  158. // ○ [List item 2.
  159. // ○ List item 3.]
  160. // ■ List item 4.
  161. //
  162. // List items: `2` and `3` should be adjusted.
  163. if ( root.previousSibling.getAttribute( 'listIndent' ) + 1 === rootIndent ) {
  164. // valueToSet = root.previousSibling.getAttribute( 'listStyle' ) || DEFAULT_LIST_TYPE;
  165. valueToSet = DEFAULT_LIST_TYPE;
  166. } else {
  167. const previousSibling = getSiblingListItem( root.previousSibling, {
  168. sameIndent: true, direction: 'backward', listIndent: rootIndent
  169. } );
  170. valueToSet = previousSibling.getAttribute( 'listStyle' );
  171. }
  172. editor.model.change( writer => {
  173. for ( const item of itemsToUpdate ) {
  174. writer.setAttribute( 'listStyle', valueToSet, item );
  175. }
  176. } );
  177. };
  178. }
  179. // When outdenting a list, a nested list should copy its value for the `listStyle` attribute
  180. // from the previous sibling list item including the same value for the `listIndent` value.
  181. //
  182. // ■ List item 1.
  183. // ○ List item 2.[]
  184. // ■ List item 3.
  185. //
  186. // editor.execute( 'outdentList' );
  187. //
  188. // ■ List item 1.
  189. // ■ List item 2.[]
  190. // ■ List item 3.
  191. //
  192. // @private
  193. // @param {module:core/editor/editor~Editor} editor
  194. // @returns {Function}
  195. function fixListAfterOutdentListCommand( editor ) {
  196. return ( evt, changedItems ) => {
  197. changedItems = changedItems.reverse().filter( item => item.is( 'element', 'listItem' ) );
  198. if ( !changedItems.length ) {
  199. return;
  200. }
  201. const indent = changedItems[ 0 ].getAttribute( 'listIndent' );
  202. const listType = changedItems[ 0 ].getAttribute( 'listType' );
  203. let listItem = changedItems[ 0 ].previousSibling;
  204. // ■ List item 1.
  205. // ○ List item 2.
  206. // ○ List item 3.[]
  207. // ■ List item 4.
  208. //
  209. // After outdenting a list, `List item 3` should inherit the `listStyle` attribute from `List item 1`.
  210. //
  211. // ■ List item 1.
  212. // ○ List item 2.
  213. // ■ List item 3.[]
  214. // ■ List item 4.
  215. if ( listItem.is( 'element', 'listItem' ) ) {
  216. while ( listItem.getAttribute( 'listIndent' ) !== indent ) {
  217. listItem = listItem.previousSibling;
  218. }
  219. } else {
  220. listItem = null;
  221. }
  222. // Outdenting such a list should restore values based on `List item 4`.
  223. // ■ List item 1.[]
  224. // ○ List item 2.
  225. // ○ List item 3.
  226. // ■ List item 4.
  227. if ( !listItem ) {
  228. listItem = changedItems[ changedItems.length - 1 ].nextSibling;
  229. }
  230. // And such a list should not modify anything.
  231. // However, `listItem` can indicate a node below the list. Be sure that we have the `listItem` element.
  232. // ■ List item 1.[]
  233. // ○ List item 2.
  234. // ○ List item 3.
  235. // <paragraph>The later if check.</paragraph>
  236. if ( !listItem || !listItem.is( 'element', 'listItem' ) ) {
  237. return;
  238. }
  239. // Do not modify the list if found `listItem` represents other type of list than outdented list items.
  240. if ( listItem.getAttribute( 'listType' ) !== listType ) {
  241. return;
  242. }
  243. editor.model.change( writer => {
  244. const itemsToUpdate = changedItems.filter( item => item.getAttribute( 'listIndent' ) === indent );
  245. for ( const item of itemsToUpdate ) {
  246. writer.setAttribute( 'listStyle', listItem.getAttribute( 'listStyle' ), item );
  247. }
  248. } );
  249. };
  250. }
  251. // Each `listItem` element must have specified the `listStyle` attribute.
  252. // This post-fixer checks whether inserted elements `listItem` elements should inherit the `listStyle` value from
  253. // their sibling nodes or should use the default value.
  254. //
  255. // Paragraph[]
  256. // ■ List item 1. // [listStyle="square", listType="bulleted"]
  257. // ■ List item 2. // ...
  258. // ■ List item 3. // ...
  259. //
  260. // editor.execute( 'bulletedList' )
  261. //
  262. // ■ Paragraph[] // [listStyle="square", listType="bulleted"]
  263. // ■ List item 1. // [listStyle="square", listType="bulleted"]
  264. // ■ List item 2.
  265. // ■ List item 3.
  266. //
  267. // It also covers a such change:
  268. //
  269. // [Paragraph 1
  270. // Paragraph 2]
  271. // ■ List item 1. // [listStyle="square", listType="bulleted"]
  272. // ■ List item 2. // ...
  273. // ■ List item 3. // ...
  274. //
  275. // editor.execute( 'numberedList' )
  276. //
  277. // 1. [Paragraph 1 // [listStyle="default", listType="numbered"]
  278. // 2. Paragraph 2] // [listStyle="default", listType="numbered"]
  279. // ■ List item 1. // [listStyle="square", listType="bulleted"]
  280. // ■ List item 2. // ...
  281. // ■ List item 3. // ...
  282. //
  283. // @private
  284. // @param {module:core/editor/editor~Editor} editor
  285. // @returns {Function}
  286. function fixListStyleAttributeOnListItemElements( editor ) {
  287. return writer => {
  288. let wasFixed = false;
  289. let insertedListItems = [];
  290. for ( const change of editor.model.document.differ.getChanges() ) {
  291. if ( change.type == 'insert' && change.name == 'listItem' ) {
  292. insertedListItems.push( change.position.nodeAfter );
  293. }
  294. }
  295. // Don't touch todo lists.
  296. insertedListItems = insertedListItems.filter( item => item.getAttribute( 'listType' ) !== 'todo' );
  297. if ( !insertedListItems.length ) {
  298. return wasFixed;
  299. }
  300. // Check whether the last inserted element is next to the `listItem` element.
  301. //
  302. // ■ Paragraph[] // <-- The inserted item.
  303. // ■ List item 1.
  304. let existingListItem = insertedListItems[ insertedListItems.length - 1 ].nextSibling;
  305. // If it doesn't, maybe the `listItem` was inserted at the end of the list.
  306. //
  307. // ■ List item 1.
  308. // ■ Paragraph[] // <-- The inserted item.
  309. if ( !existingListItem || !existingListItem.is( 'element', 'listItem' ) ) {
  310. existingListItem = insertedListItems[ insertedListItems.length - 1 ].previousSibling;
  311. if ( existingListItem ) {
  312. const indent = insertedListItems[ 0 ].getAttribute( 'listIndent' );
  313. // But we need to find a `listItem` with the `listIndent=0` attribute.
  314. // If doesn't, maybe the `listItem` was inserted at the end of the list.
  315. //
  316. // ■ List item 1.
  317. // ○ List item 2.
  318. // ■ Paragraph[] // <-- The inserted item.
  319. while ( existingListItem.is( 'element', 'listItem' ) && existingListItem.getAttribute( 'listIndent' ) !== indent ) {
  320. existingListItem = existingListItem.previousSibling;
  321. }
  322. }
  323. }
  324. for ( const item of insertedListItems ) {
  325. if ( !item.hasAttribute( 'listStyle' ) ) {
  326. if ( shouldInheritListType( existingListItem ) ) {
  327. writer.setAttribute( 'listStyle', existingListItem.getAttribute( 'listStyle' ), item );
  328. } else {
  329. writer.setAttribute( 'listStyle', DEFAULT_LIST_TYPE, item );
  330. }
  331. wasFixed = true;
  332. }
  333. }
  334. return wasFixed;
  335. };
  336. // Checks whether the `listStyle` attribute should be copied from the `baseItem` element.
  337. //
  338. // The attribute should be copied if the inserted element does not have defined it and
  339. // the value for the element is other than default in the base element.
  340. //
  341. // @param {module:engine/model/element~Element|null} baseItem
  342. // @returns {Boolean}
  343. function shouldInheritListType( baseItem ) {
  344. if ( !baseItem ) {
  345. return false;
  346. }
  347. const baseListStyle = baseItem.getAttribute( 'listStyle' );
  348. if ( !baseListStyle ) {
  349. return false;
  350. }
  351. if ( baseListStyle === DEFAULT_LIST_TYPE ) {
  352. return false;
  353. }
  354. return true;
  355. }
  356. }
  357. // Removes the `listStyle` attribute from "todo" list items.
  358. //
  359. // @private
  360. // @param {module:core/editor/editor~Editor} editor
  361. // @returns {Function}
  362. function removeListStyleAttributeFromTodoList( editor ) {
  363. return writer => {
  364. let todoListItems = [];
  365. for ( const change of editor.model.document.differ.getChanges() ) {
  366. const item = getItemFromChange( change );
  367. if ( item && item.is( 'element', 'listItem' ) && item.getAttribute( 'listType' ) === 'todo' ) {
  368. todoListItems.push( item );
  369. }
  370. }
  371. todoListItems = todoListItems.filter( item => item.hasAttribute( 'listStyle' ) );
  372. if ( !todoListItems.length ) {
  373. return false;
  374. }
  375. for ( const item of todoListItems ) {
  376. writer.removeAttribute( 'listStyle', item );
  377. }
  378. return true;
  379. };
  380. function getItemFromChange( change ) {
  381. if ( change.type === 'attribute' ) {
  382. return change.range.start.nodeAfter;
  383. }
  384. if ( change.type === 'insert' ) {
  385. return change.position.nodeAfter;
  386. }
  387. return null;
  388. }
  389. }
  390. // Restores the `listStyle` attribute after changing the list type.
  391. //
  392. // @private
  393. // @param {module:core/editor/editor~Editor} editor
  394. // @returns {Function}
  395. function restoreDefaultListStyle( editor ) {
  396. return ( evt, changedItems ) => {
  397. changedItems = changedItems.filter( item => item.is( 'element', 'listItem' ) );
  398. editor.model.change( writer => {
  399. for ( const item of changedItems ) {
  400. // Remove the attribute. Post-fixer will restore the proper value.
  401. writer.removeAttribute( 'listStyle', item );
  402. }
  403. } );
  404. };
  405. }