deletecommand.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module typing/deletecommand
  7. */
  8. import Command from '@ckeditor/ckeditor5-core/src/command';
  9. import Selection from '@ckeditor/ckeditor5-engine/src/model/selection';
  10. import Element from '@ckeditor/ckeditor5-engine/src/model/element';
  11. import Position from '@ckeditor/ckeditor5-engine/src/model/position';
  12. import Range from '@ckeditor/ckeditor5-engine/src/model/range';
  13. import ChangeBuffer from './changebuffer';
  14. import count from '@ckeditor/ckeditor5-utils/src/count';
  15. /**
  16. * The delete command. Used by the {@link module:typing/delete~Delete delete feature} to handle the <kbd>Delete</kbd> and
  17. * <kbd>Backspace</kbd> keys.
  18. *
  19. * @extends module:core/command~Command
  20. */
  21. export default class DeleteCommand extends Command {
  22. /**
  23. * Creates an instance of the command.
  24. *
  25. * @param {module:core/editor/editor~Editor} editor
  26. * @param {'forward'|'backward'} direction The directionality of the delete describing in what direction it
  27. * should consume the content when the selection is collapsed.
  28. */
  29. constructor( editor, direction ) {
  30. super( editor );
  31. /**
  32. * The directionality of the delete describing in what direction it should
  33. * consume the content when the selection is collapsed.
  34. *
  35. * @readonly
  36. * @member {'forward'|'backward'} #direction
  37. */
  38. this.direction = direction;
  39. /**
  40. * Delete's change buffer used to group subsequent changes into batches.
  41. *
  42. * @readonly
  43. * @private
  44. * @member {typing.ChangeBuffer} #buffer
  45. */
  46. this._buffer = new ChangeBuffer( editor.document, editor.config.get( 'typing.undoStep' ) );
  47. }
  48. /**
  49. * Executes the delete command. Depending on whether the selection is collapsed or not, deletes its content
  50. * or a piece of content in the {@link #direction defined direction}.
  51. *
  52. * @fires execute
  53. * @param {Object} [options] The command options.
  54. * @param {'character'} [options.unit='character'] See {@link module:engine/controller/modifyselection~modifySelection}'s options.
  55. * @param {Number} [options.sequence=1] See the {@link module:engine/view/document~Document#event:delete} event data.
  56. */
  57. execute( options = {} ) {
  58. const doc = this.editor.document;
  59. const dataController = this.editor.data;
  60. doc.enqueueChanges( () => {
  61. this._buffer.lock();
  62. const selection = Selection.createFromSelection( doc.selection );
  63. // Do not replace the whole selected content if selection was collapsed.
  64. // This prevents such situation:
  65. //
  66. // <h1></h1><p>[]</p> --> <h1>[</h1><p>]</p> --> <p></p>
  67. // starting content --> after `modifySelection` --> after `deleteContent`.
  68. const doNotResetEntireContent = selection.isCollapsed;
  69. // Try to extend the selection in the specified direction.
  70. if ( selection.isCollapsed ) {
  71. dataController.modifySelection( selection, { direction: this.direction, unit: options.unit } );
  72. }
  73. // If selection is still collapsed, then there's nothing to delete.
  74. if ( selection.isCollapsed ) {
  75. const sequence = options.sequence || 1;
  76. if ( this._shouldEntireContentBeReplacedWithParagraph( sequence ) ) {
  77. this._replaceEntireContentWithParagraph();
  78. }
  79. return;
  80. }
  81. let changeCount = 0;
  82. selection.getFirstRange().getMinimalFlatRanges().forEach( range => {
  83. changeCount += count(
  84. range.getWalker( { singleCharacters: true, ignoreElementEnd: true, shallow: true } )
  85. );
  86. } );
  87. dataController.deleteContent( selection, this._buffer.batch, { doNotResetEntireContent } );
  88. this._buffer.input( changeCount );
  89. doc.selection.setRanges( selection.getRanges(), selection.isBackward );
  90. this._buffer.unlock();
  91. } );
  92. }
  93. /**
  94. * If the user keeps <kbd>Backspace</kbd> or <kbd>Delete</kbd> key, we do nothing because the user can clear
  95. * the whole element without removing them.
  96. *
  97. * But, if the user pressed and released the key, we want to replace the entire content with a paragraph if:
  98. *
  99. * * the entire content is selected,
  100. * * the paragraph is allowed in the common ancestor,
  101. * * other paragraph does not occur in the editor.
  102. *
  103. * @private
  104. * @param {Number} sequence A number describing which subsequent delete event it is without the key being released.
  105. * @returns {Boolean}
  106. */
  107. _shouldEntireContentBeReplacedWithParagraph( sequence ) {
  108. // Does nothing if user pressed and held the "Backspace" or "Delete" key.
  109. if ( sequence > 1 ) {
  110. return false;
  111. }
  112. const document = this.editor.document;
  113. const selection = document.selection;
  114. const limitElement = document.schema.getLimitElement( selection );
  115. if ( !selection.isEntireContentSelected( limitElement ) ) {
  116. return false;
  117. }
  118. if ( !document.schema.check( { name: 'paragraph', inside: limitElement.name } ) ) {
  119. return false;
  120. }
  121. // Does nothing if editor already contains an empty paragraph.
  122. if ( selection.getFirstRange().getCommonAncestor().name === 'paragraph' ) {
  123. return false;
  124. }
  125. return true;
  126. }
  127. /**
  128. * The entire content is replaced with the paragraph. Selection is moved inside the paragraph.
  129. *
  130. * @private
  131. */
  132. _replaceEntireContentWithParagraph() {
  133. const document = this.editor.document;
  134. const selection = document.selection;
  135. const limitElement = document.schema.getLimitElement( selection );
  136. const paragraph = new Element( 'paragraph' );
  137. this._buffer.batch.remove( Range.createIn( limitElement ) );
  138. this._buffer.batch.insert( Position.createAt( limitElement ), paragraph );
  139. selection.collapse( paragraph );
  140. }
  141. }