deletecommand.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. /**
  2. * @license Copyright (c) 2003-2018, 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 Range from '@ckeditor/ckeditor5-engine/src/model/range';
  12. import ChangeBuffer from './changebuffer';
  13. import count from '@ckeditor/ckeditor5-utils/src/count';
  14. /**
  15. * The delete command. Used by the {@link module:typing/delete~Delete delete feature} to handle the <kbd>Delete</kbd> and
  16. * <kbd>Backspace</kbd> keys.
  17. *
  18. * @extends module:core/command~Command
  19. */
  20. export default class DeleteCommand extends Command {
  21. /**
  22. * Creates an instance of the command.
  23. *
  24. * @param {module:core/editor/editor~Editor} editor
  25. * @param {'forward'|'backward'} direction The directionality of the delete describing in what direction it
  26. * should consume the content when the selection is collapsed.
  27. */
  28. constructor( editor, direction ) {
  29. super( editor );
  30. /**
  31. * The directionality of the delete describing in what direction it should
  32. * consume the content when the selection is collapsed.
  33. *
  34. * @readonly
  35. * @member {'forward'|'backward'} #direction
  36. */
  37. this.direction = direction;
  38. /**
  39. * Delete's change buffer used to group subsequent changes into batches.
  40. *
  41. * @readonly
  42. * @private
  43. * @member {typing.ChangeBuffer} #buffer
  44. */
  45. this._buffer = new ChangeBuffer( editor.model, editor.config.get( 'typing.undoStep' ) );
  46. }
  47. /**
  48. * Executes the delete command. Depending on whether the selection is collapsed or not, deletes its content
  49. * or a piece of content in the {@link #direction defined direction}.
  50. *
  51. * @fires execute
  52. * @param {Object} [options] The command options.
  53. * @param {'character'} [options.unit='character'] See {@link module:engine/model/utils/modifyselection~modifySelection}'s options.
  54. * @param {Number} [options.sequence=1] A number describing which subsequent delete event it is without the key being released.
  55. * See the {@link module:engine/view/document~Document#event:delete} event data.
  56. */
  57. execute( options = {} ) {
  58. const model = this.editor.model;
  59. const doc = model.document;
  60. model.enqueueChange( this._buffer.batch, writer => {
  61. this._buffer.lock();
  62. const selection = new Selection( 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. model.modifySelection( selection, { direction: this.direction, unit: options.unit } );
  72. }
  73. // Check if deleting in an empty editor. See #61.
  74. if ( this._shouldEntireContentBeReplacedWithParagraph( options.sequence || 1 ) ) {
  75. this._replaceEntireContentWithParagraph( writer );
  76. return;
  77. }
  78. // If selection is still collapsed, then there's nothing to delete.
  79. if ( selection.isCollapsed ) {
  80. return;
  81. }
  82. let changeCount = 0;
  83. selection.getFirstRange().getMinimalFlatRanges().forEach( range => {
  84. changeCount += count(
  85. range.getWalker( { singleCharacters: true, ignoreElementEnd: true, shallow: true } )
  86. );
  87. } );
  88. model.deleteContent( selection, { doNotResetEntireContent } );
  89. this._buffer.input( changeCount );
  90. writer.setSelection( selection );
  91. this._buffer.unlock();
  92. } );
  93. }
  94. /**
  95. * If the user keeps <kbd>Backspace</kbd> or <kbd>Delete</kbd> key pressed, the content of the current
  96. * editable will be cleared. However, this will not yet lead to resetting the remaining block to a paragraph
  97. * (which happens e.g. when the user does <kbd>Ctrl</kbd> + <kbd>A</kbd>, <kbd>Backspace</kbd>).
  98. *
  99. * But, if the user pressed the key in an empty editable for the first time,
  100. * we want to replace the entire content with a paragraph if:
  101. *
  102. * * the current limit element is empty,
  103. * * the paragraph is allowed in the limit element,
  104. * * the limit doesn't already have a paragraph inside.
  105. *
  106. * See https://github.com/ckeditor/ckeditor5-typing/issues/61.
  107. *
  108. * @private
  109. * @param {Number} sequence A number describing which subsequent delete event it is without the key being released.
  110. * @returns {Boolean}
  111. */
  112. _shouldEntireContentBeReplacedWithParagraph( sequence ) {
  113. // Does nothing if user pressed and held the "Backspace" or "Delete" key.
  114. if ( sequence > 1 ) {
  115. return false;
  116. }
  117. const model = this.editor.model;
  118. const doc = model.document;
  119. const selection = doc.selection;
  120. const limitElement = model.schema.getLimitElement( selection );
  121. // If a collapsed selection contains the whole content it means that the content is empty
  122. // (from the user perspective).
  123. const limitElementIsEmpty = selection.isCollapsed && selection.containsEntireContent( limitElement );
  124. if ( !limitElementIsEmpty ) {
  125. return false;
  126. }
  127. if ( !model.schema.checkChild( limitElement, 'paragraph' ) ) {
  128. return false;
  129. }
  130. const limitElementFirstChild = limitElement.getChild( 0 );
  131. // Does nothing if the limit element already contains only a paragraph.
  132. // We ignore the case when paragraph might have some inline elements (<p><inlineWidget>[]</inlineWidget></p>)
  133. // because we don't support such cases yet and it's unclear whether inlineWidget shouldn't be a limit itself.
  134. if ( limitElementFirstChild && limitElementFirstChild.name === 'paragraph' ) {
  135. return false;
  136. }
  137. return true;
  138. }
  139. /**
  140. * The entire content is replaced with the paragraph. Selection is moved inside the paragraph.
  141. *
  142. * @private
  143. */
  144. _replaceEntireContentWithParagraph( writer ) {
  145. const model = this.editor.model;
  146. const doc = model.document;
  147. const selection = doc.selection;
  148. const limitElement = model.schema.getLimitElement( selection );
  149. const paragraph = new Element( 'paragraph' );
  150. writer.remove( Range.createIn( limitElement ) );
  151. writer.insert( paragraph, limitElement );
  152. writer.setSelection( paragraph );
  153. }
  154. }