widget.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module widget/widget
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import MouseObserver from '@ckeditor/ckeditor5-engine/src/view/observer/mouseobserver';
  10. import ModelRange from '@ckeditor/ckeditor5-engine/src/model/range';
  11. import ModelSelection from '@ckeditor/ckeditor5-engine/src/model/selection';
  12. import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
  13. import ViewEditableElement from '@ckeditor/ckeditor5-engine/src/view/editableelement';
  14. import RootEditableElement from '@ckeditor/ckeditor5-engine/src/view/rooteditableelement';
  15. import { isWidget, WIDGET_SELECTED_CLASS_NAME, getLabel } from './utils';
  16. import { keyCodes, getCode, parseKeystroke } from '@ckeditor/ckeditor5-utils/src/keyboard';
  17. import '../theme/widget.css';
  18. const selectAllKeystrokeCode = parseKeystroke( 'Ctrl+A' );
  19. /**
  20. * The widget plugin.
  21. * Registers model to view selection converter for editing pipeline. It is hooked after default selection conversion.
  22. * If converted selection is placed around widget element, selection is marked as fake. Additionally, proper CSS class
  23. * is added to indicate that widget has been selected.
  24. * Adds default {@link module:engine/view/document~Document#event:mousedown mousedown} handling on widget elements.
  25. *
  26. * @extends module:core/plugin~Plugin.
  27. */
  28. export default class Widget extends Plugin {
  29. /**
  30. * @inheritDoc
  31. */
  32. static get pluginName() {
  33. return 'Widget';
  34. }
  35. /**
  36. * @inheritDoc
  37. */
  38. init() {
  39. const viewDocument = this.editor.editing.view;
  40. /**
  41. * Holds previously selected widgets.
  42. *
  43. * @private
  44. * @type {Set.<module:engine/view/element~Element>}
  45. */
  46. this._previouslySelected = new Set();
  47. // Model to view selection converter.
  48. // Converts selection placed over widget element to fake selection
  49. this.editor.editing.modelToView.on( 'selection', ( evt, data, consumable, conversionApi ) => {
  50. // Remove selected class from previously selected widgets.
  51. this._clearPreviouslySelectedWidgets();
  52. const viewSelection = conversionApi.viewSelection;
  53. const selectedElement = viewSelection.getSelectedElement();
  54. for ( const range of viewSelection.getRanges() ) {
  55. for ( const value of range ) {
  56. const node = value.item;
  57. if ( node.is( 'element' ) && isWidget( node ) ) {
  58. node.addClass( WIDGET_SELECTED_CLASS_NAME );
  59. this._previouslySelected.add( node );
  60. // Check if widget is a single element selected.
  61. if ( node == selectedElement ) {
  62. viewSelection.setFake( true, { label: getLabel( selectedElement ) } );
  63. }
  64. }
  65. }
  66. }
  67. }, { priority: 'low' } );
  68. // If mouse down is pressed on widget - create selection over whole widget.
  69. viewDocument.addObserver( MouseObserver );
  70. this.listenTo( viewDocument, 'mousedown', ( ...args ) => this._onMousedown( ...args ) );
  71. // Handle custom keydown behaviour.
  72. this.listenTo( viewDocument, 'keydown', ( ...args ) => this._onKeydown( ...args ), { priority: 'high' } );
  73. }
  74. /**
  75. * Handles {@link module:engine/view/document~Document#event:mousedown mousedown} events on widget elements.
  76. *
  77. * @private
  78. * @param {module:utils/eventinfo~EventInfo} eventInfo
  79. * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData
  80. */
  81. _onMousedown( eventInfo, domEventData ) {
  82. const editor = this.editor;
  83. const viewDocument = editor.editing.view;
  84. let element = domEventData.target;
  85. // Do nothing if inside nested editable.
  86. if ( isInsideNestedEditable( element ) ) {
  87. return;
  88. }
  89. // If target is not a widget element - check if one of the ancestors is.
  90. if ( !isWidget( element ) ) {
  91. element = element.findAncestor( isWidget );
  92. if ( !element ) {
  93. return;
  94. }
  95. }
  96. domEventData.preventDefault();
  97. // Focus editor if is not focused already.
  98. if ( !viewDocument.isFocused ) {
  99. viewDocument.focus();
  100. }
  101. // Create model selection over widget.
  102. const modelElement = editor.editing.mapper.toModelElement( element );
  103. editor.document.enqueueChanges( ( ) => {
  104. this._setSelectionOverElement( modelElement );
  105. } );
  106. }
  107. /**
  108. * Handles {@link module:engine/view/document~Document#event:keydown keydown} events.
  109. *
  110. * @private
  111. * @param {module:utils/eventinfo~EventInfo} eventInfo
  112. * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData
  113. */
  114. _onKeydown( eventInfo, domEventData ) {
  115. const keyCode = domEventData.keyCode;
  116. const isForward = keyCode == keyCodes.delete || keyCode == keyCodes.arrowdown || keyCode == keyCodes.arrowright;
  117. let wasHandled = false;
  118. // Checks if the keys were handled and then prevents the default event behaviour and stops
  119. // the propagation.
  120. if ( isDeleteKeyCode( keyCode ) ) {
  121. wasHandled = this._handleDelete( isForward );
  122. } else if ( isArrowKeyCode( keyCode ) ) {
  123. wasHandled = this._handleArrowKeys( isForward );
  124. } else if ( isSelectAllKeyCode( domEventData ) ) {
  125. wasHandled = this._selectAllNestedEditableContent() || this._selectAllContent();
  126. }
  127. if ( wasHandled ) {
  128. domEventData.preventDefault();
  129. eventInfo.stop();
  130. }
  131. }
  132. /**
  133. * Handles delete keys: backspace and delete.
  134. *
  135. * @private
  136. * @param {Boolean} isForward Set to true if delete was performed in forward direction.
  137. * @returns {Boolean|undefined} Returns `true` if keys were handled correctly.
  138. */
  139. _handleDelete( isForward ) {
  140. // Do nothing when the read only mode is enabled.
  141. if ( this.editor.isReadOnly ) {
  142. return;
  143. }
  144. const modelDocument = this.editor.document;
  145. const modelSelection = modelDocument.selection;
  146. // Do nothing on non-collapsed selection.
  147. if ( !modelSelection.isCollapsed ) {
  148. return;
  149. }
  150. const objectElement = this._getObjectElementNextToSelection( isForward );
  151. if ( objectElement ) {
  152. modelDocument.enqueueChanges( () => {
  153. const batch = modelDocument.batch();
  154. let previousNode = modelSelection.anchor.parent;
  155. // Remove previous element if empty.
  156. while ( previousNode.isEmpty ) {
  157. const nodeToRemove = previousNode;
  158. previousNode = nodeToRemove.parent;
  159. batch.remove( nodeToRemove );
  160. }
  161. this._setSelectionOverElement( objectElement );
  162. } );
  163. return true;
  164. }
  165. }
  166. /**
  167. * Handles arrow keys.
  168. *
  169. * @param {Boolean} isForward Set to true if arrow key should be handled in forward direction.
  170. * @returns {Boolean|undefined} Returns `true` if keys were handled correctly.
  171. */
  172. _handleArrowKeys( isForward ) {
  173. const modelDocument = this.editor.document;
  174. const schema = modelDocument.schema;
  175. const modelSelection = modelDocument.selection;
  176. const objectElement = modelSelection.getSelectedElement();
  177. // if object element is selected.
  178. if ( objectElement && schema.objects.has( objectElement.name ) ) {
  179. const position = isForward ? modelSelection.getLastPosition() : modelSelection.getFirstPosition();
  180. const newRange = modelDocument.getNearestSelectionRange( position, isForward ? 'forward' : 'backward' );
  181. if ( newRange ) {
  182. modelDocument.enqueueChanges( () => {
  183. modelSelection.setRanges( [ newRange ] );
  184. } );
  185. }
  186. return true;
  187. }
  188. // If selection is next to object element.
  189. // Return if not collapsed.
  190. if ( !modelSelection.isCollapsed ) {
  191. return;
  192. }
  193. const objectElement2 = this._getObjectElementNextToSelection( isForward );
  194. if ( objectElement2 instanceof ModelElement && modelDocument.schema.objects.has( objectElement2.name ) ) {
  195. modelDocument.enqueueChanges( () => {
  196. this._setSelectionOverElement( objectElement2 );
  197. } );
  198. return true;
  199. }
  200. }
  201. /**
  202. * Extends the {@link module:engine/model/selection~Selection document's selection} to span the entire
  203. * content of the nested editable if already anchored in one.
  204. *
  205. * See: {@link module:engine/model/schema~Schema#getLimitElement}.
  206. *
  207. * @private
  208. */
  209. _selectAllNestedEditableContent() {
  210. const modelDocument = this.editor.document;
  211. const modelSelection = modelDocument.selection;
  212. const schema = modelDocument.schema;
  213. const limitElement = schema.getLimitElement( modelSelection );
  214. if ( modelSelection.getFirstRange().root == limitElement ) {
  215. return false;
  216. }
  217. modelDocument.enqueueChanges( () => {
  218. modelSelection.setIn( limitElement );
  219. } );
  220. return true;
  221. }
  222. /**
  223. * Handles <kbd>CTRL + A</kbd> when widget is selected.
  224. *
  225. * @private
  226. * @returns {Boolean} Returns true if widget was selected and selecting all was handled by this method.
  227. */
  228. _selectAllContent() {
  229. const modelDocument = this.editor.document;
  230. const modelSelection = modelDocument.selection;
  231. const editing = this.editor.editing;
  232. const viewDocument = editing.view;
  233. const viewSelection = viewDocument.selection;
  234. const selectedElement = viewSelection.getSelectedElement();
  235. // Only widget is selected.
  236. // https://github.com/ckeditor/ckeditor5-widget/issues/23
  237. if ( selectedElement && isWidget( selectedElement ) ) {
  238. const widgetParent = editing.mapper.toModelElement( selectedElement.parent );
  239. modelDocument.enqueueChanges( () => {
  240. modelSelection.setRanges( [ ModelRange.createIn( widgetParent ) ] );
  241. } );
  242. return true;
  243. }
  244. return false;
  245. }
  246. /**
  247. * Sets {@link module:engine/model/selection~Selection document's selection} over given element.
  248. *
  249. * @private
  250. * @param {module:engine/model/element~Element} element
  251. */
  252. _setSelectionOverElement( element ) {
  253. this.editor.document.selection.setRanges( [ ModelRange.createOn( element ) ] );
  254. }
  255. /**
  256. * Checks if {@link module:engine/model/element~Element element} placed next to the current
  257. * {@link module:engine/model/selection~Selection model selection} exists and is marked in
  258. * {@link module:engine/model/schema~Schema schema} as `object`.
  259. *
  260. * @private
  261. * @param {Boolean} forward Direction of checking.
  262. * @returns {module:engine/model/element~Element|null}
  263. */
  264. _getObjectElementNextToSelection( forward ) {
  265. const modelDocument = this.editor.document;
  266. const schema = modelDocument.schema;
  267. const modelSelection = modelDocument.selection;
  268. const dataController = this.editor.data;
  269. // Clone current selection to use it as a probe. We must leave default selection as it is so it can return
  270. // to its current state after undo.
  271. const probe = ModelSelection.createFromSelection( modelSelection );
  272. dataController.modifySelection( probe, { direction: forward ? 'forward' : 'backward' } );
  273. const objectElement = forward ? probe.focus.nodeBefore : probe.focus.nodeAfter;
  274. if ( objectElement instanceof ModelElement && schema.objects.has( objectElement.name ) ) {
  275. return objectElement;
  276. }
  277. return null;
  278. }
  279. /**
  280. * Removes CSS class from previously selected widgets.
  281. * @private
  282. */
  283. _clearPreviouslySelectedWidgets() {
  284. for ( const widget of this._previouslySelected ) {
  285. widget.removeClass( WIDGET_SELECTED_CLASS_NAME );
  286. }
  287. this._previouslySelected.clear();
  288. }
  289. }
  290. // Returns 'true' if provided key code represents one of the arrow keys.
  291. //
  292. // @param {Number} keyCode
  293. // @returns {Boolean}
  294. function isArrowKeyCode( keyCode ) {
  295. return keyCode == keyCodes.arrowright ||
  296. keyCode == keyCodes.arrowleft ||
  297. keyCode == keyCodes.arrowup ||
  298. keyCode == keyCodes.arrowdown;
  299. }
  300. // Returns 'true' if provided key code represents one of the delete keys: delete or backspace.
  301. //
  302. // @param {Number} keyCode
  303. // @returns {Boolean}
  304. function isDeleteKeyCode( keyCode ) {
  305. return keyCode == keyCodes.delete || keyCode == keyCodes.backspace;
  306. }
  307. // Returns 'true' if provided (DOM) key event data corresponds with the Ctrl+A keystroke.
  308. //
  309. // @param {module:engine/view/observer/keyobserver~KeyEventData} domEventData
  310. // @returns {Boolean}
  311. function isSelectAllKeyCode( domEventData ) {
  312. return getCode( domEventData ) == selectAllKeystrokeCode;
  313. }
  314. // Returns `true` when element is a nested editable or is placed inside one.
  315. //
  316. // @param {module:engine/view/element~Element}
  317. // @returns {Boolean}
  318. function isInsideNestedEditable( element ) {
  319. while ( element ) {
  320. if ( element instanceof ViewEditableElement && !( element instanceof RootEditableElement ) ) {
  321. return true;
  322. }
  323. element = element.parent;
  324. }
  325. return false;
  326. }