8
0

widget.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
  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 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 WidgetTypeAround from './widgettypearound/widgettypearound';
  11. import { getLabel, isWidget, WIDGET_SELECTED_CLASS_NAME } from './utils';
  12. import {
  13. isArrowKeyCode,
  14. isForwardArrowKeyCode
  15. } from '@ckeditor/ckeditor5-utils/src/keyboard';
  16. import env from '@ckeditor/ckeditor5-utils/src/env';
  17. import '../theme/widget.css';
  18. /**
  19. * The widget plugin. It enables base support for widgets.
  20. *
  21. * See {@glink api/widget package page} for more details and documentation.
  22. *
  23. * This plugin enables multiple behaviors required by widgets:
  24. *
  25. * * The model to view selection converter for the editing pipeline (it handles widget custom selection rendering).
  26. * If a converted selection wraps around a widget element, that selection is marked as
  27. * {@link module:engine/view/selection~Selection#isFake fake}. Additionally, the `ck-widget_selected` CSS class
  28. * is added to indicate that widget has been selected.
  29. * * The mouse and keyboard events handling on and around widget elements.
  30. *
  31. * @extends module:core/plugin~Plugin
  32. */
  33. export default class Widget extends Plugin {
  34. /**
  35. * @inheritDoc
  36. */
  37. static get pluginName() {
  38. return 'Widget';
  39. }
  40. /**
  41. * @inheritDoc
  42. */
  43. static get requires() {
  44. return [ WidgetTypeAround ];
  45. }
  46. /**
  47. * @inheritDoc
  48. */
  49. init() {
  50. const view = this.editor.editing.view;
  51. const viewDocument = view.document;
  52. /**
  53. * Holds previously selected widgets.
  54. *
  55. * @private
  56. * @type {Set.<module:engine/view/element~Element>}
  57. */
  58. this._previouslySelected = new Set();
  59. // Model to view selection converter.
  60. // Converts selection placed over widget element to fake selection
  61. this.editor.editing.downcastDispatcher.on( 'selection', ( evt, data, conversionApi ) => {
  62. // Remove selected class from previously selected widgets.
  63. this._clearPreviouslySelectedWidgets( conversionApi.writer );
  64. const viewWriter = conversionApi.writer;
  65. const viewSelection = viewWriter.document.selection;
  66. const selectedElement = viewSelection.getSelectedElement();
  67. let lastMarked = null;
  68. for ( const range of viewSelection.getRanges() ) {
  69. for ( const value of range ) {
  70. const node = value.item;
  71. // Do not mark nested widgets in selected one. See: #57.
  72. if ( isWidget( node ) && !isChild( node, lastMarked ) ) {
  73. viewWriter.addClass( WIDGET_SELECTED_CLASS_NAME, node );
  74. this._previouslySelected.add( node );
  75. lastMarked = node;
  76. // Check if widget is a single element selected.
  77. if ( node == selectedElement ) {
  78. viewWriter.setSelection( viewSelection.getRanges(), { fake: true, label: getLabel( selectedElement ) } );
  79. }
  80. }
  81. }
  82. }
  83. }, { priority: 'low' } );
  84. // If mouse down is pressed on widget - create selection over whole widget.
  85. view.addObserver( MouseObserver );
  86. this.listenTo( viewDocument, 'mousedown', ( ...args ) => this._onMousedown( ...args ) );
  87. // Handle custom keydown behaviour.
  88. this.listenTo( viewDocument, 'keydown', ( ...args ) => this._onKeydown( ...args ), { priority: 'high' } );
  89. // Handle custom delete behaviour.
  90. this.listenTo( viewDocument, 'delete', ( evt, data ) => {
  91. if ( this._handleDelete( data.direction == 'forward' ) ) {
  92. data.preventDefault();
  93. evt.stop();
  94. }
  95. }, { priority: 'high' } );
  96. }
  97. /**
  98. * Handles {@link module:engine/view/document~Document#event:mousedown mousedown} events on widget elements.
  99. *
  100. * @private
  101. * @param {module:utils/eventinfo~EventInfo} eventInfo
  102. * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData
  103. */
  104. _onMousedown( eventInfo, domEventData ) {
  105. const editor = this.editor;
  106. const view = editor.editing.view;
  107. const viewDocument = view.document;
  108. let element = domEventData.target;
  109. // Do nothing for single or double click inside nested editable.
  110. if ( isInsideNestedEditable( element ) ) {
  111. // But at least triple click inside nested editable causes broken selection in Safari.
  112. // For such event, we select the entire nested editable element.
  113. // See: https://github.com/ckeditor/ckeditor5/issues/1463.
  114. if ( env.isSafari && domEventData.domEvent.detail >= 3 ) {
  115. const mapper = editor.editing.mapper;
  116. const modelElement = mapper.toModelElement( element );
  117. this.editor.model.change( writer => {
  118. domEventData.preventDefault();
  119. writer.setSelection( modelElement, 'in' );
  120. } );
  121. }
  122. return;
  123. }
  124. // If target is not a widget element - check if one of the ancestors is.
  125. if ( !isWidget( element ) ) {
  126. element = element.findAncestor( isWidget );
  127. if ( !element ) {
  128. return;
  129. }
  130. }
  131. domEventData.preventDefault();
  132. // Focus editor if is not focused already.
  133. if ( !viewDocument.isFocused ) {
  134. view.focus();
  135. }
  136. // Create model selection over widget.
  137. const modelElement = editor.editing.mapper.toModelElement( element );
  138. this._setSelectionOverElement( modelElement );
  139. }
  140. /**
  141. * Handles {@link module:engine/view/document~Document#event:keydown keydown} events.
  142. *
  143. * @private
  144. * @param {module:utils/eventinfo~EventInfo} eventInfo
  145. * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData
  146. */
  147. _onKeydown( eventInfo, domEventData ) {
  148. const keyCode = domEventData.keyCode;
  149. let wasHandled = false;
  150. // Checks if the keys were handled and then prevents the default event behaviour and stops
  151. // the propagation.
  152. if ( isArrowKeyCode( keyCode ) ) {
  153. const isForward = isForwardArrowKeyCode( keyCode, this.editor.locale.contentLanguageDirection );
  154. wasHandled = this._handleArrowKeys( isForward );
  155. }
  156. if ( wasHandled ) {
  157. domEventData.preventDefault();
  158. eventInfo.stop();
  159. }
  160. }
  161. /**
  162. * Handles delete keys: backspace and delete.
  163. *
  164. * @private
  165. * @param {Boolean} isForward Set to true if delete was performed in forward direction.
  166. * @returns {Boolean|undefined} Returns `true` if keys were handled correctly.
  167. */
  168. _handleDelete( isForward ) {
  169. // Do nothing when the read only mode is enabled.
  170. if ( this.editor.isReadOnly ) {
  171. return;
  172. }
  173. const modelDocument = this.editor.model.document;
  174. const modelSelection = modelDocument.selection;
  175. // Do nothing on non-collapsed selection.
  176. if ( !modelSelection.isCollapsed ) {
  177. return;
  178. }
  179. const objectElement = this._getObjectElementNextToSelection( isForward );
  180. if ( objectElement ) {
  181. this.editor.model.change( writer => {
  182. let previousNode = modelSelection.anchor.parent;
  183. // Remove previous element if empty.
  184. while ( previousNode.isEmpty ) {
  185. const nodeToRemove = previousNode;
  186. previousNode = nodeToRemove.parent;
  187. writer.remove( nodeToRemove );
  188. }
  189. this._setSelectionOverElement( objectElement );
  190. } );
  191. return true;
  192. }
  193. }
  194. /**
  195. * Handles arrow keys.
  196. *
  197. * @private
  198. * @param {Boolean} isForward Set to true if arrow key should be handled in forward direction.
  199. * @returns {Boolean|undefined} Returns `true` if keys were handled correctly.
  200. */
  201. _handleArrowKeys( isForward ) {
  202. const model = this.editor.model;
  203. const schema = model.schema;
  204. const modelDocument = model.document;
  205. const modelSelection = modelDocument.selection;
  206. const objectElement = modelSelection.getSelectedElement();
  207. // If object element is selected.
  208. if ( objectElement && schema.isObject( objectElement ) ) {
  209. const position = isForward ? modelSelection.getLastPosition() : modelSelection.getFirstPosition();
  210. const newRange = schema.getNearestSelectionRange( position, isForward ? 'forward' : 'backward' );
  211. if ( newRange ) {
  212. model.change( writer => {
  213. writer.setSelection( newRange );
  214. } );
  215. }
  216. return true;
  217. }
  218. // If selection is next to object element.
  219. // Return if not collapsed.
  220. if ( !modelSelection.isCollapsed ) {
  221. return;
  222. }
  223. const objectElement2 = this._getObjectElementNextToSelection( isForward );
  224. if ( !!objectElement2 && schema.isObject( objectElement2 ) ) {
  225. this._setSelectionOverElement( objectElement2 );
  226. return true;
  227. }
  228. }
  229. /**
  230. * Sets {@link module:engine/model/selection~Selection document's selection} over given element.
  231. *
  232. * @protected
  233. * @param {module:engine/model/element~Element} element
  234. */
  235. _setSelectionOverElement( element ) {
  236. this.editor.model.change( writer => {
  237. writer.setSelection( writer.createRangeOn( element ) );
  238. } );
  239. }
  240. /**
  241. * Checks if {@link module:engine/model/element~Element element} placed next to the current
  242. * {@link module:engine/model/selection~Selection model selection} exists and is marked in
  243. * {@link module:engine/model/schema~Schema schema} as `object`.
  244. *
  245. * @protected
  246. * @param {Boolean} forward Direction of checking.
  247. * @returns {module:engine/model/element~Element|null}
  248. */
  249. _getObjectElementNextToSelection( forward ) {
  250. const model = this.editor.model;
  251. const schema = model.schema;
  252. const modelSelection = model.document.selection;
  253. // Clone current selection to use it as a probe. We must leave default selection as it is so it can return
  254. // to its current state after undo.
  255. const probe = model.createSelection( modelSelection );
  256. model.modifySelection( probe, { direction: forward ? 'forward' : 'backward' } );
  257. const objectElement = forward ? probe.focus.nodeBefore : probe.focus.nodeAfter;
  258. if ( !!objectElement && schema.isObject( objectElement ) ) {
  259. return objectElement;
  260. }
  261. return null;
  262. }
  263. /**
  264. * Removes CSS class from previously selected widgets.
  265. *
  266. * @private
  267. * @param {module:engine/view/downcastwriter~DowncastWriter} writer
  268. */
  269. _clearPreviouslySelectedWidgets( writer ) {
  270. for ( const widget of this._previouslySelected ) {
  271. writer.removeClass( WIDGET_SELECTED_CLASS_NAME, widget );
  272. }
  273. this._previouslySelected.clear();
  274. }
  275. }
  276. // Returns `true` when element is a nested editable or is placed inside one.
  277. //
  278. // @param {module:engine/view/element~Element}
  279. // @returns {Boolean}
  280. function isInsideNestedEditable( element ) {
  281. while ( element ) {
  282. if ( element.is( 'editableElement' ) && !element.is( 'rootElement' ) ) {
  283. return true;
  284. }
  285. // Click on nested widget should select it.
  286. if ( isWidget( element ) ) {
  287. return false;
  288. }
  289. element = element.parent;
  290. }
  291. return false;
  292. }
  293. // Checks whether the specified `element` is a child of the `parent` element.
  294. //
  295. // @param {module:engine/view/element~Element} element An element to check.
  296. // @param {module:engine/view/element~Element|null} parent A parent for the element.
  297. // @returns {Boolean}
  298. function isChild( element, parent ) {
  299. if ( !parent ) {
  300. return false;
  301. }
  302. return Array.from( element.getAncestors() ).includes( parent );
  303. }