liststyleediting.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602
  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, getSiblingNodes } from './utils';
  12. const DEFAULT_LIST_TYPE = 'default';
  13. /**
  14. * The list style engine feature.
  15. *
  16. * It sets the value for the `listItem` attribute of the {@link module:list/list~List `<listItem>`} element that
  17. * allows modifying the 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. // Handle merging two separated lists into the single one.
  58. this._mergeListStyleAttributeWhileMergingLists();
  59. }
  60. /**
  61. * @inheritDoc
  62. */
  63. afterInit() {
  64. const editor = this.editor;
  65. // Enable post-fixer that removes the `listStyle` attribute from to-do list items only if the "TodoList" plugin is on.
  66. // We need to registry the hook here since the `TodoList` plugin can be added after the `ListStyleEditing`.
  67. if ( editor.commands.get( 'todoList' ) ) {
  68. editor.model.document.registerPostFixer( removeListStyleAttributeFromTodoList( editor ) );
  69. }
  70. }
  71. /**
  72. * Starts listening to {@link module:engine/model/model~Model#deleteContent} checks whether two lists will be merged into a single one
  73. * after deleting the content.
  74. *
  75. * The purpose of this action is to adjust the `listStyle` value for the list that was merged.
  76. *
  77. * Consider the following model's content:
  78. *
  79. * <listItem listIndent="0" listType="bulleted" listStyle="square">UL List item 1</listItem>
  80. * <listItem listIndent="0" listType="bulleted" listStyle="square">UL List item 2</listItem>
  81. * <paragraph>[A paragraph.]</paragraph>
  82. * <listItem listIndent="0" listType="bulleted" listStyle="circle">UL List item 1</listItem>
  83. * <listItem listIndent="0" listType="bulleted" listStyle="circle">UL List item 2</listItem>
  84. *
  85. * After removing the paragraph element, the second list will be merged into the first one.
  86. * We want to inherit the `listStyle` attribute for the second list from the first one.
  87. *
  88. * <listItem listIndent="0" listType="bulleted" listStyle="square">UL List item 1</listItem>
  89. * <listItem listIndent="0" listType="bulleted" listStyle="square">UL List item 2</listItem>
  90. * <listItem listIndent="0" listType="bulleted" listStyle="square">UL List item 1</listItem>
  91. * <listItem listIndent="0" listType="bulleted" listStyle="square">UL List item 2</listItem>
  92. *
  93. * See https://github.com/ckeditor/ckeditor5/issues/7879.
  94. *
  95. * @private
  96. */
  97. _mergeListStyleAttributeWhileMergingLists() {
  98. const editor = this.editor;
  99. const model = editor.model;
  100. // First the most-outer `listItem` in the first list reference.
  101. // If found, lists should be merged and this `listItem` provides the `listStyle` attribute
  102. // and it' also a starting point when searching for items in the second list.
  103. let firstMostOuterItem;
  104. // Check whether the removed content is between two lists.
  105. this.listenTo( model, 'deleteContent', ( evt, [ selection ] ) => {
  106. const firstPosition = selection.getFirstPosition();
  107. const lastPosition = selection.getLastPosition();
  108. // Typing or removing content in a single item. Aborting.
  109. if ( firstPosition.parent === lastPosition.parent ) {
  110. return;
  111. }
  112. // An element before the content that will be removed is not a list.
  113. if ( !firstPosition.parent.is( 'element', 'listItem' ) ) {
  114. return;
  115. }
  116. const nextSibling = lastPosition.parent.nextSibling;
  117. // An element after the content that will be removed is not a list.
  118. if ( !nextSibling || !nextSibling.is( 'element', 'listItem' ) ) {
  119. return;
  120. }
  121. // Find the outermost list item based on the `listIndent` attribute. We can't assume that `listIndent=0`
  122. // because the selection can be hooked in nested lists.
  123. //
  124. // <listItem listIndent="0" listType="bulleted" listStyle="square">UL List item 1</listItem>
  125. // <listItem listIndent="1" listType="bulleted" listStyle="square">UL List [item 1.1</listItem>
  126. // <listItem listIndent="0" listType="bulleted" listStyle="circle">[]UL List item 1.</listItem>
  127. // <listItem listIndent="1" listType="bulleted" listStyle="circle">UL List ]item 1.1</listItem>
  128. //
  129. // After deleting the content, we would like to inherit the "square" attribute for the last element:
  130. //
  131. // <listItem listIndent="0" listType="bulleted" listStyle="square">UL List item 1</listItem>
  132. // <listItem listIndent="1" listType="bulleted" listStyle="square">UL List []item 1.1</listItem>
  133. const mostOuterItemList = getSiblingListItem( firstPosition.parent, {
  134. sameIndent: true,
  135. listIndent: nextSibling.getAttribute( 'listIndent' )
  136. } );
  137. // The outermost list item may not exist while removing elements between lists with different value
  138. // of the `listIndent` attribute. In such a case we don't want to update anything. See: #8073.
  139. if ( !mostOuterItemList ) {
  140. return;
  141. }
  142. if ( mostOuterItemList.getAttribute( 'listType' ) === nextSibling.getAttribute( 'listType' ) ) {
  143. firstMostOuterItem = mostOuterItemList;
  144. }
  145. }, { priority: 'high' } );
  146. // If so, update the `listStyle` attribute for the second list.
  147. this.listenTo( model, 'deleteContent', () => {
  148. if ( !firstMostOuterItem ) {
  149. return;
  150. }
  151. model.change( writer => {
  152. // Find the first most-outer item list in the merged list.
  153. // A case when the first list item in the second list was merged into the last item in the first list.
  154. //
  155. // <listItem listIndent="0" listType="bulleted" listStyle="square">UL List item 1</listItem>
  156. // <listItem listIndent="0" listType="bulleted" listStyle="square">UL List item 2</listItem>
  157. // <listItem listIndent="0" listType="bulleted" listStyle="circle">[]UL List item 1</listItem>
  158. // <listItem listIndent="0" listType="bulleted" listStyle="circle">UL List item 2</listItem>
  159. const secondListMostOuterItem = getSiblingListItem( firstMostOuterItem.nextSibling, {
  160. sameIndent: true,
  161. listIndent: firstMostOuterItem.getAttribute( 'listIndent' ),
  162. direction: 'forward'
  163. } );
  164. const items = [
  165. secondListMostOuterItem,
  166. ...getSiblingNodes( writer.createPositionAt( secondListMostOuterItem, 0 ), 'forward' )
  167. ];
  168. for ( const listItem of items ) {
  169. writer.setAttribute( 'listStyle', firstMostOuterItem.getAttribute( 'listStyle' ), listItem );
  170. }
  171. } );
  172. firstMostOuterItem = null;
  173. }, { priority: 'low' } );
  174. }
  175. }
  176. // Returns a converter that consumes the `style` attribute and searches for the `list-style-type` definition.
  177. // If not found, the `"default"` value will be used.
  178. //
  179. // @returns {Function}
  180. function upcastListItemStyle() {
  181. return dispatcher => {
  182. dispatcher.on( 'element:li', ( evt, data, conversionApi ) => {
  183. const listParent = data.viewItem.parent;
  184. const listStyle = listParent.getStyle( 'list-style-type' ) || DEFAULT_LIST_TYPE;
  185. const listItem = data.modelRange.start.nodeAfter || data.modelRange.end.nodeBefore;
  186. conversionApi.writer.setAttribute( 'listStyle', listStyle, listItem );
  187. }, { priority: 'low' } );
  188. };
  189. }
  190. // Returns a converter that adds the `list-style-type` definition as a value for the `style` attribute.
  191. // The `"default"` value is removed and not present in the view/data.
  192. //
  193. // @returns {Function}
  194. function downcastListStyleAttribute() {
  195. return dispatcher => {
  196. dispatcher.on( 'attribute:listStyle:listItem', ( evt, data, conversionApi ) => {
  197. const viewWriter = conversionApi.writer;
  198. const currentElement = data.item;
  199. const previousElement = getSiblingListItem( currentElement.previousSibling, {
  200. sameIndent: true,
  201. listIndent: currentElement.getAttribute( 'listIndent' ),
  202. direction: 'backward'
  203. } );
  204. const viewItem = conversionApi.mapper.toViewElement( currentElement );
  205. // A case when elements represent different lists. We need to separate their container.
  206. if ( !areRepresentingSameList( currentElement, previousElement ) ) {
  207. viewWriter.breakContainer( viewWriter.createPositionBefore( viewItem ) );
  208. }
  209. setListStyle( viewWriter, data.attributeNewValue, viewItem.parent );
  210. }, { priority: 'low' } );
  211. };
  212. // Checks whether specified list items belong to the same list.
  213. //
  214. // @param {module:engine/model/element~Element} listItem1 The first list item to check.
  215. // @param {module:engine/model/element~Element|null} listItem2 The second list item to check.
  216. // @returns {Boolean}
  217. function areRepresentingSameList( listItem1, listItem2 ) {
  218. return listItem2 &&
  219. listItem1.getAttribute( 'listType' ) === listItem2.getAttribute( 'listType' ) &&
  220. listItem1.getAttribute( 'listIndent' ) === listItem2.getAttribute( 'listIndent' ) &&
  221. listItem1.getAttribute( 'listStyle' ) === listItem2.getAttribute( 'listStyle' );
  222. }
  223. // Updates or removes the `list-style-type` from the `element`.
  224. //
  225. // @param {module:engine/view/downcastwriter~DowncastWriter} writer
  226. // @param {String} listStyle
  227. // @param {module:engine/view/element~Element} element
  228. function setListStyle( writer, listStyle, element ) {
  229. if ( listStyle && listStyle !== DEFAULT_LIST_TYPE ) {
  230. writer.setStyle( 'list-style-type', listStyle, element );
  231. } else {
  232. writer.removeStyle( 'list-style-type', element );
  233. }
  234. }
  235. }
  236. // When indenting list, nested list should clear its value for the `listStyle` attribute or inherit from nested lists.
  237. //
  238. // ■ List item 1.
  239. // ■ List item 2.[]
  240. // ■ List item 3.
  241. // editor.execute( 'indentList' );
  242. //
  243. // ■ List item 1.
  244. // ○ List item 2.[]
  245. // ■ List item 3.
  246. //
  247. // @param {module:core/editor/editor~Editor} editor
  248. // @returns {Function}
  249. function fixListAfterIndentListCommand( editor ) {
  250. return ( evt, changedItems ) => {
  251. let valueToSet;
  252. const root = changedItems[ 0 ];
  253. const rootIndent = root.getAttribute( 'listIndent' );
  254. const itemsToUpdate = changedItems.filter( item => item.getAttribute( 'listIndent' ) === rootIndent );
  255. // A case where a few list items are intended must be checked separately
  256. // since `getSiblingListItem()` returns the first changed element.
  257. // ■ List item 1.
  258. // ○ [List item 2.
  259. // ○ List item 3.]
  260. // ■ List item 4.
  261. //
  262. // List items: `2` and `3` should be adjusted.
  263. if ( root.previousSibling.getAttribute( 'listIndent' ) + 1 === rootIndent ) {
  264. // valueToSet = root.previousSibling.getAttribute( 'listStyle' ) || DEFAULT_LIST_TYPE;
  265. valueToSet = DEFAULT_LIST_TYPE;
  266. } else {
  267. const previousSibling = getSiblingListItem( root.previousSibling, {
  268. sameIndent: true, direction: 'backward', listIndent: rootIndent
  269. } );
  270. valueToSet = previousSibling.getAttribute( 'listStyle' );
  271. }
  272. editor.model.change( writer => {
  273. for ( const item of itemsToUpdate ) {
  274. writer.setAttribute( 'listStyle', valueToSet, item );
  275. }
  276. } );
  277. };
  278. }
  279. // When outdenting a list, a nested list should copy its value for the `listStyle` attribute
  280. // from the previous sibling list item including the same value for the `listIndent` value.
  281. //
  282. // ■ List item 1.
  283. // ○ List item 2.[]
  284. // ■ List item 3.
  285. //
  286. // editor.execute( 'outdentList' );
  287. //
  288. // ■ List item 1.
  289. // ■ List item 2.[]
  290. // ■ List item 3.
  291. //
  292. // @param {module:core/editor/editor~Editor} editor
  293. // @returns {Function}
  294. function fixListAfterOutdentListCommand( editor ) {
  295. return ( evt, changedItems ) => {
  296. changedItems = changedItems.reverse().filter( item => item.is( 'element', 'listItem' ) );
  297. if ( !changedItems.length ) {
  298. return;
  299. }
  300. const indent = changedItems[ 0 ].getAttribute( 'listIndent' );
  301. const listType = changedItems[ 0 ].getAttribute( 'listType' );
  302. let listItem = changedItems[ 0 ].previousSibling;
  303. // ■ List item 1.
  304. // ○ List item 2.
  305. // ○ List item 3.[]
  306. // ■ List item 4.
  307. //
  308. // After outdenting a list, `List item 3` should inherit the `listStyle` attribute from `List item 1`.
  309. //
  310. // ■ List item 1.
  311. // ○ List item 2.
  312. // ■ List item 3.[]
  313. // ■ List item 4.
  314. if ( listItem.is( 'element', 'listItem' ) ) {
  315. while ( listItem.getAttribute( 'listIndent' ) !== indent ) {
  316. listItem = listItem.previousSibling;
  317. }
  318. } else {
  319. listItem = null;
  320. }
  321. // Outdenting such a list should restore values based on `List item 4`.
  322. // ■ List item 1.[]
  323. // ○ List item 2.
  324. // ○ List item 3.
  325. // ■ List item 4.
  326. if ( !listItem ) {
  327. listItem = changedItems[ changedItems.length - 1 ].nextSibling;
  328. }
  329. // And such a list should not modify anything.
  330. // However, `listItem` can indicate a node below the list. Be sure that we have the `listItem` element.
  331. // ■ List item 1.[]
  332. // ○ List item 2.
  333. // ○ List item 3.
  334. // <paragraph>The later if check.</paragraph>
  335. if ( !listItem || !listItem.is( 'element', 'listItem' ) ) {
  336. return;
  337. }
  338. // Do not modify the list if found `listItem` represents other type of list than outdented list items.
  339. if ( listItem.getAttribute( 'listType' ) !== listType ) {
  340. return;
  341. }
  342. editor.model.change( writer => {
  343. const itemsToUpdate = changedItems.filter( item => item.getAttribute( 'listIndent' ) === indent );
  344. for ( const item of itemsToUpdate ) {
  345. writer.setAttribute( 'listStyle', listItem.getAttribute( 'listStyle' ), item );
  346. }
  347. } );
  348. };
  349. }
  350. // Each `listItem` element must have specified the `listStyle` attribute.
  351. // This post-fixer checks whether inserted elements `listItem` elements should inherit the `listStyle` value from
  352. // their sibling nodes or should use the default value.
  353. //
  354. // Paragraph[]
  355. // ■ List item 1. // [listStyle="square", listType="bulleted"]
  356. // ■ List item 2. // ...
  357. // ■ List item 3. // ...
  358. //
  359. // editor.execute( 'bulletedList' )
  360. //
  361. // ■ Paragraph[] // [listStyle="square", listType="bulleted"]
  362. // ■ List item 1. // [listStyle="square", listType="bulleted"]
  363. // ■ List item 2.
  364. // ■ List item 3.
  365. //
  366. // It also covers a such change:
  367. //
  368. // [Paragraph 1
  369. // Paragraph 2]
  370. // ■ List item 1. // [listStyle="square", listType="bulleted"]
  371. // ■ List item 2. // ...
  372. // ■ List item 3. // ...
  373. //
  374. // editor.execute( 'numberedList' )
  375. //
  376. // 1. [Paragraph 1 // [listStyle="default", listType="numbered"]
  377. // 2. Paragraph 2] // [listStyle="default", listType="numbered"]
  378. // ■ List item 1. // [listStyle="square", listType="bulleted"]
  379. // ■ List item 2. // ...
  380. // ■ List item 3. // ...
  381. //
  382. // @param {module:core/editor/editor~Editor} editor
  383. // @returns {Function}
  384. function fixListStyleAttributeOnListItemElements( editor ) {
  385. return writer => {
  386. let wasFixed = false;
  387. const insertedListItems = getChangedListItems( editor.model.document.differ.getChanges() )
  388. .filter( item => {
  389. // Don't touch todo lists. They are handled in another post-fixer.
  390. return item.getAttribute( 'listType' ) !== 'todo';
  391. } );
  392. if ( !insertedListItems.length ) {
  393. return wasFixed;
  394. }
  395. // Check whether the last inserted element is next to the `listItem` element.
  396. //
  397. // ■ Paragraph[] // <-- The inserted item.
  398. // ■ List item 1.
  399. let existingListItem = insertedListItems[ insertedListItems.length - 1 ].nextSibling;
  400. // If it doesn't, maybe the `listItem` was inserted at the end of the list.
  401. //
  402. // ■ List item 1.
  403. // ■ Paragraph[] // <-- The inserted item.
  404. if ( !existingListItem || !existingListItem.is( 'element', 'listItem' ) ) {
  405. existingListItem = insertedListItems[ insertedListItems.length - 1 ].previousSibling;
  406. if ( existingListItem ) {
  407. const indent = insertedListItems[ 0 ].getAttribute( 'listIndent' );
  408. // But we need to find a `listItem` with the `listIndent=0` attribute.
  409. // If doesn't, maybe the `listItem` was inserted at the end of the list.
  410. //
  411. // ■ List item 1.
  412. // ○ List item 2.
  413. // ■ Paragraph[] // <-- The inserted item.
  414. while ( existingListItem.is( 'element', 'listItem' ) && existingListItem.getAttribute( 'listIndent' ) !== indent ) {
  415. existingListItem = existingListItem.previousSibling;
  416. // If the item does not exist, most probably there is no other content in the editor. See: #8072.
  417. if ( !existingListItem ) {
  418. break;
  419. }
  420. }
  421. }
  422. }
  423. for ( const item of insertedListItems ) {
  424. if ( !item.hasAttribute( 'listStyle' ) ) {
  425. if ( shouldInheritListType( existingListItem, item ) ) {
  426. writer.setAttribute( 'listStyle', existingListItem.getAttribute( 'listStyle' ), item );
  427. } else {
  428. writer.setAttribute( 'listStyle', DEFAULT_LIST_TYPE, item );
  429. }
  430. wasFixed = true;
  431. }
  432. }
  433. return wasFixed;
  434. };
  435. // Checks whether the `listStyle` attribute should be copied from the `baseItem` element.
  436. //
  437. // The attribute should be copied if the inserted element does not have defined it and
  438. // the value for the element is other than default in the base element.
  439. //
  440. // @param {module:engine/model/element~Element|null} baseItem
  441. // @param {module:engine/model/element~Element} itemToChange
  442. // @returns {Boolean}
  443. function shouldInheritListType( baseItem, itemToChange ) {
  444. if ( !baseItem ) {
  445. return false;
  446. }
  447. const baseListStyle = baseItem.getAttribute( 'listStyle' );
  448. if ( !baseListStyle ) {
  449. return false;
  450. }
  451. if ( baseListStyle === DEFAULT_LIST_TYPE ) {
  452. return false;
  453. }
  454. if ( baseItem.getAttribute( 'listType' ) !== itemToChange.getAttribute( 'listType' ) ) {
  455. return false;
  456. }
  457. return true;
  458. }
  459. }
  460. // Removes the `listStyle` attribute from "todo" list items.
  461. //
  462. // @param {module:core/editor/editor~Editor} editor
  463. // @returns {Function}
  464. function removeListStyleAttributeFromTodoList( editor ) {
  465. return writer => {
  466. const todoListItems = getChangedListItems( editor.model.document.differ.getChanges() )
  467. .filter( item => {
  468. // Handle the todo lists only. The rest is handled in another post-fixer.
  469. return item.getAttribute( 'listType' ) === 'todo' && item.hasAttribute( 'listStyle' );
  470. } );
  471. if ( !todoListItems.length ) {
  472. return false;
  473. }
  474. for ( const item of todoListItems ) {
  475. writer.removeAttribute( 'listStyle', item );
  476. }
  477. return true;
  478. };
  479. }
  480. // Restores the `listStyle` attribute after changing the list type.
  481. //
  482. // @param {module:core/editor/editor~Editor} editor
  483. // @returns {Function}
  484. function restoreDefaultListStyle( editor ) {
  485. return ( evt, changedItems ) => {
  486. changedItems = changedItems.filter( item => item.is( 'element', 'listItem' ) );
  487. editor.model.change( writer => {
  488. for ( const item of changedItems ) {
  489. // Remove the attribute. Post-fixer will restore the proper value.
  490. writer.removeAttribute( 'listStyle', item );
  491. }
  492. } );
  493. };
  494. }
  495. // Returns `listItem` that were inserted or changed.
  496. //
  497. // @param {Array.<Object>} changes The changes list returned by the differ.
  498. // @returns {Array.<module:engine/model/element~Element>}
  499. function getChangedListItems( changes ) {
  500. const items = [];
  501. for ( const change of changes ) {
  502. const item = getItemFromChange( change );
  503. if ( item && item.is( 'element', 'listItem' ) ) {
  504. items.push( item );
  505. }
  506. }
  507. return items;
  508. }
  509. function getItemFromChange( change ) {
  510. if ( change.type === 'attribute' ) {
  511. return change.range.start.nodeAfter;
  512. }
  513. if ( change.type === 'insert' ) {
  514. return change.position.nodeAfter;
  515. }
  516. return null;
  517. }