renderer.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module engine/view/renderer
  7. */
  8. import ViewText from './text';
  9. import ViewPosition from './position';
  10. import { INLINE_FILLER, INLINE_FILLER_LENGTH, startsWithFiller, isInlineFiller, isBlockFiller } from './filler';
  11. import mix from '@ckeditor/ckeditor5-utils/src/mix';
  12. import diff from '@ckeditor/ckeditor5-utils/src/diff';
  13. import insertAt from '@ckeditor/ckeditor5-utils/src/dom/insertat';
  14. import remove from '@ckeditor/ckeditor5-utils/src/dom/remove';
  15. import log from '@ckeditor/ckeditor5-utils/src/log';
  16. import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
  17. import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
  18. /**
  19. * Renderer updates DOM structure and selection, to make them a reflection of the view structure and selection.
  20. *
  21. * View nodes which may need to be rendered needs to be {@link module:engine/view/renderer~Renderer#markToSync marked}.
  22. * Then, on {@link module:engine/view/renderer~Renderer#render render}, renderer compares view nodes with DOM nodes
  23. * in order to check which ones really need to be refreshed. Finally, it creates DOM nodes from these view nodes,
  24. * {@link module:engine/view/domconverter~DomConverter#bindElements binds} them and inserts into the DOM tree.
  25. *
  26. * Every time {@link module:engine/view/renderer~Renderer#render render} is called, renderer additionally checks if
  27. * {@link module:engine/view/renderer~Renderer#selection selection} needs update and updates it if so.
  28. *
  29. * Renderer uses {@link module:engine/view/domconverter~DomConverter} to transform and bind nodes.
  30. */
  31. export default class Renderer {
  32. /**
  33. * Creates a renderer instance.
  34. *
  35. * @param {module:engine/view/domconverter~DomConverter} domConverter Converter instance.
  36. * @param {module:engine/view/selection~Selection} selection View selection.
  37. */
  38. constructor( domConverter, selection ) {
  39. /**
  40. * Set of DOM Documents instances.
  41. *
  42. * @member {Set.<Document>}
  43. */
  44. this.domDocuments = new Set();
  45. /**
  46. * Converter instance.
  47. *
  48. * @readonly
  49. * @member {module:engine/view/domconverter~DomConverter}
  50. */
  51. this.domConverter = domConverter;
  52. /**
  53. * Set of nodes which attributes changed and may need to be rendered.
  54. *
  55. * @readonly
  56. * @member {Set.<module:engine/view/node~Node>}
  57. */
  58. this.markedAttributes = new Set();
  59. /**
  60. * Set of elements which child lists changed and may need to be rendered.
  61. *
  62. * @readonly
  63. * @member {Set.<module:engine/view/node~Node>}
  64. */
  65. this.markedChildren = new Set();
  66. /**
  67. * Set of text nodes which text data changed and may need to be rendered.
  68. *
  69. * @readonly
  70. * @member {Set.<module:engine/view/node~Node>}
  71. */
  72. this.markedTexts = new Set();
  73. /**
  74. * View selection. Renderer updates DOM selection based on the view selection.
  75. *
  76. * @readonly
  77. * @member {module:engine/view/selection~Selection}
  78. */
  79. this.selection = selection;
  80. /**
  81. * The text node in which the inline filler was rendered.
  82. *
  83. * @private
  84. * @member {Text}
  85. */
  86. this._inlineFiller = null;
  87. /**
  88. * Indicates if the view document is focused and selection can be rendered. Selection will not be rendered if
  89. * this is set to `false`.
  90. *
  91. * @member {Boolean}
  92. */
  93. this.isFocused = false;
  94. /**
  95. * DOM element containing fake selection.
  96. *
  97. * @private
  98. * @type {null|HTMLElement}
  99. */
  100. this._fakeSelectionContainer = null;
  101. }
  102. /**
  103. * Mark node to be synchronized.
  104. *
  105. * Note that only view nodes which parents have corresponding DOM elements need to be marked to be synchronized.
  106. *
  107. * @see #markedAttributes
  108. * @see #markedChildren
  109. * @see #markedTexts
  110. *
  111. * @param {module:engine/view/document~ChangeType} type Type of the change.
  112. * @param {module:engine/view/node~Node} node Node to be marked.
  113. */
  114. markToSync( type, node ) {
  115. if ( type === 'text' ) {
  116. if ( this.domConverter.mapViewToDom( node.parent ) ) {
  117. this.markedTexts.add( node );
  118. }
  119. } else {
  120. // If the node has no DOM element it is not rendered yet,
  121. // its children/attributes do not need to be marked to be sync.
  122. if ( !this.domConverter.mapViewToDom( node ) ) {
  123. return;
  124. }
  125. if ( type === 'attributes' ) {
  126. this.markedAttributes.add( node );
  127. } else if ( type === 'children' ) {
  128. this.markedChildren.add( node );
  129. } else {
  130. /**
  131. * Unknown type passed to Renderer.markToSync.
  132. *
  133. * @error renderer-unknown-type
  134. */
  135. throw new CKEditorError( 'view-renderer-unknown-type: Unknown type passed to Renderer.markToSync.' );
  136. }
  137. }
  138. }
  139. /**
  140. * Render method checks {@link #markedAttributes},
  141. * {@link #markedChildren} and {@link #markedTexts} and updates all
  142. * nodes which need to be updated. Then it clears all three sets. Also, every time render is called it compares and
  143. * if needed updates the selection.
  144. *
  145. * Renderer tries not to break text composition (e.g. IME) and x-index of the selection,
  146. * so it does as little as it is needed to update the DOM.
  147. *
  148. * For attributes it adds new attributes to DOM elements, updates values and removes
  149. * attributes which do not exist in the view element.
  150. *
  151. * For text nodes it updates the text string if it is different. Note that if parent element is marked as an element
  152. * which changed child list, text node update will not be done, because it may not be possible to
  153. * {@link module:engine/view/domconverter~DomConverter#findCorrespondingDomText find a corresponding DOM text}.
  154. * The change will be handled in the parent element.
  155. *
  156. * For elements, which child lists have changed, it calculates a {@link module:utils/diff~diff} and adds or removes children which have
  157. * changed.
  158. *
  159. * Rendering also handles {@link module:engine/view/filler fillers}. Especially, it checks if the inline filler is needed
  160. * at selection position and adds or removes it. To prevent breaking text composition inline filler will not be
  161. * removed as long selection is in the text node which needed it at first.
  162. */
  163. render() {
  164. let inlineFillerPosition;
  165. // There was inline filler rendered in the DOM but it's not
  166. // at the selection position any more, so we can remove it
  167. // (cause even if it's needed, it must be placed in another location).
  168. if ( this._inlineFiller && !this._isSelectionInInlineFiller() ) {
  169. this._removeInlineFiller();
  170. }
  171. // If we've got the filler, let's try to guess its position in the view.
  172. if ( this._inlineFiller ) {
  173. inlineFillerPosition = this._getInlineFillerPosition();
  174. }
  175. // Otherwise, if it's needed, create it at the selection position.
  176. else if ( this._needsInlineFillerAtSelection() ) {
  177. inlineFillerPosition = this.selection.getFirstPosition();
  178. // Do not use `markToSync` so it will be added even if the parent is already added.
  179. this.markedChildren.add( inlineFillerPosition.parent );
  180. }
  181. for ( const node of this.markedTexts ) {
  182. if ( !this.markedChildren.has( node.parent ) && this.domConverter.mapViewToDom( node.parent ) ) {
  183. this._updateText( node, { inlineFillerPosition } );
  184. }
  185. }
  186. for ( const element of this.markedAttributes ) {
  187. this._updateAttrs( element );
  188. }
  189. for ( const element of this.markedChildren ) {
  190. this._updateChildren( element, { inlineFillerPosition } );
  191. }
  192. // Check whether the inline filler is required and where it really is in the DOM.
  193. // At this point in most cases it will be in the DOM, but there are exceptions.
  194. // For example, if the inline filler was deep in the created DOM structure, it will not be created.
  195. // Similarly, if it was removed at the beginning of this function and then neither text nor children were updated,
  196. // it will not be present.
  197. // Fix those and similar scenarios.
  198. if ( inlineFillerPosition ) {
  199. const fillerDomPosition = this.domConverter.viewPositionToDom( inlineFillerPosition );
  200. const domDocument = fillerDomPosition.parent.ownerDocument;
  201. if ( !startsWithFiller( fillerDomPosition.parent ) ) {
  202. // Filler has not been created at filler position. Create it now.
  203. this._inlineFiller = this._addInlineFiller( domDocument, fillerDomPosition.parent, fillerDomPosition.offset );
  204. } else {
  205. // Filler has been found, save it.
  206. this._inlineFiller = fillerDomPosition.parent;
  207. }
  208. } else {
  209. // There is no filler needed.
  210. this._inlineFiller = null;
  211. }
  212. this._updateSelection();
  213. this._updateFocus();
  214. this.markedTexts.clear();
  215. this.markedAttributes.clear();
  216. this.markedChildren.clear();
  217. }
  218. /**
  219. * Adds inline filler at given position.
  220. *
  221. * The position can be given as an array of DOM nodes and an offset in that array,
  222. * or a DOM parent element and offset in that element.
  223. *
  224. * @private
  225. * @param {Document} domDocument
  226. * @param {Element|Array.<Node>} domParentOrArray
  227. * @param {Number} offset
  228. * @returns {Text} The DOM text node that contains inline filler.
  229. */
  230. _addInlineFiller( domDocument, domParentOrArray, offset ) {
  231. const childNodes = domParentOrArray instanceof Array ? domParentOrArray : domParentOrArray.childNodes;
  232. const nodeAfterFiller = childNodes[ offset ];
  233. if ( this.domConverter.isText( nodeAfterFiller ) ) {
  234. nodeAfterFiller.data = INLINE_FILLER + nodeAfterFiller.data;
  235. return nodeAfterFiller;
  236. } else {
  237. const fillerNode = domDocument.createTextNode( INLINE_FILLER );
  238. if ( Array.isArray( domParentOrArray ) ) {
  239. childNodes.splice( offset, 0, fillerNode );
  240. } else {
  241. insertAt( domParentOrArray, offset, fillerNode );
  242. }
  243. return fillerNode;
  244. }
  245. }
  246. /**
  247. * Gets the position of the inline filler based on the current selection.
  248. * Here, we assume that we know that the filler is needed and
  249. * {@link #_isSelectionInInlineFiller is at the selection position}, and, since it's needed,
  250. * it's somewhere at the selection postion.
  251. *
  252. * Note: we cannot restore the filler position based on the filler's DOM text node, because
  253. * when this method is called (before rendering) the bindings will often be broken. View to DOM
  254. * bindings are only dependable after rendering.
  255. *
  256. * @private
  257. * @returns {module:engine/view/position~Position}
  258. */
  259. _getInlineFillerPosition() {
  260. const firstPos = this.selection.getFirstPosition();
  261. if ( firstPos.parent.is( 'text' ) ) {
  262. return ViewPosition.createBefore( this.selection.getFirstPosition().parent );
  263. } else {
  264. return firstPos;
  265. }
  266. }
  267. /**
  268. * Returns `true` if the selection hasn't left the inline filler's text node.
  269. * If it is `true` it means that the filler had been added for a reason and the selection does not
  270. * left the filler's text node. E.g. the user can be in the middle of a composition so it should not be touched.
  271. *
  272. * @private
  273. * @returns {Boolean} True if the inline filler and selection are in the same place.
  274. */
  275. _isSelectionInInlineFiller() {
  276. if ( this.selection.rangeCount != 1 || !this.selection.isCollapsed ) {
  277. return false;
  278. }
  279. // Note, we can't check if selection's position equals position of the
  280. // this._inlineFiller node, because of #663. We may not be able to calculate
  281. // the filler's position in the view at this stage.
  282. // Instead, we check it the other way – whether selection is anchored in
  283. // that text node or next to it.
  284. // Possible options are:
  285. // "FILLER{}"
  286. // "FILLERadded-text{}"
  287. const selectionPosition = this.selection.getFirstPosition();
  288. const position = this.domConverter.viewPositionToDom( selectionPosition );
  289. if ( position && this.domConverter.isText( position.parent ) && startsWithFiller( position.parent ) ) {
  290. return true;
  291. }
  292. return false;
  293. }
  294. /**
  295. * Removes the inline filler.
  296. *
  297. * @private
  298. */
  299. _removeInlineFiller() {
  300. const domFillerNode = this._inlineFiller;
  301. // Something weird happened and the stored node doesn't contain the filler's text.
  302. if ( !startsWithFiller( domFillerNode ) ) {
  303. /**
  304. * The inline filler node was lost. Most likely, something overwrote the filler text node
  305. * in the DOM.
  306. *
  307. * @error view-renderer-filler-was-lost
  308. */
  309. throw new CKEditorError( 'view-renderer-filler-was-lost: The inline filler node was lost.' );
  310. }
  311. if ( isInlineFiller( domFillerNode ) ) {
  312. domFillerNode.parentNode.removeChild( domFillerNode );
  313. } else {
  314. domFillerNode.data = domFillerNode.data.substr( INLINE_FILLER_LENGTH );
  315. }
  316. this._inlineFiller = null;
  317. }
  318. /**
  319. * Checks if the inline {@link module:engine/view/filler filler} should be added.
  320. *
  321. * @private
  322. * @returns {Boolean} True if the inline fillers should be added.
  323. */
  324. _needsInlineFillerAtSelection() {
  325. if ( this.selection.rangeCount != 1 || !this.selection.isCollapsed ) {
  326. return false;
  327. }
  328. const selectionPosition = this.selection.getFirstPosition();
  329. const selectionParent = selectionPosition.parent;
  330. const selectionOffset = selectionPosition.offset;
  331. // If there is no DOM root we do not care about fillers.
  332. if ( !this.domConverter.mapViewToDom( selectionParent.root ) ) {
  333. return false;
  334. }
  335. if ( !( selectionParent.is( 'element' ) ) ) {
  336. return false;
  337. }
  338. // We have block filler, we do not need inline one.
  339. if ( selectionOffset === selectionParent.getFillerOffset() ) {
  340. return false;
  341. }
  342. const nodeBefore = selectionPosition.nodeBefore;
  343. const nodeAfter = selectionPosition.nodeAfter;
  344. if ( nodeBefore instanceof ViewText || nodeAfter instanceof ViewText ) {
  345. return false;
  346. }
  347. return true;
  348. }
  349. /**
  350. * Checks if text needs to be updated and possibly updates it.
  351. *
  352. * @private
  353. * @param {module:engine/view/text~Text} viewText View text to update.
  354. * @param {Object} options
  355. * @param {module:engine/view/position~Position} options.inlineFillerPosition The position on which the inline
  356. * filler should be rendered.
  357. */
  358. _updateText( viewText, options ) {
  359. const domText = this.domConverter.findCorrespondingDomText( viewText );
  360. const newDomText = this.domConverter.viewToDom( viewText, domText.ownerDocument );
  361. const actualText = domText.data;
  362. let expectedText = newDomText.data;
  363. const filler = options.inlineFillerPosition;
  364. if ( filler && filler.parent == viewText.parent && filler.offset == viewText.index ) {
  365. expectedText = INLINE_FILLER + expectedText;
  366. }
  367. if ( actualText != expectedText ) {
  368. domText.data = expectedText;
  369. }
  370. }
  371. /**
  372. * Checks if attributes list needs to be updated and possibly updates it.
  373. *
  374. * @private
  375. * @param {module:engine/view/element~Element} viewElement View element to update.
  376. */
  377. _updateAttrs( viewElement ) {
  378. const domElement = this.domConverter.mapViewToDom( viewElement );
  379. const domAttrKeys = Array.from( domElement.attributes ).map( attr => attr.name );
  380. const viewAttrKeys = viewElement.getAttributeKeys();
  381. // Add or overwrite attributes.
  382. for ( const key of viewAttrKeys ) {
  383. domElement.setAttribute( key, viewElement.getAttribute( key ) );
  384. }
  385. // Remove from DOM attributes which do not exists in the view.
  386. for ( const key of domAttrKeys ) {
  387. if ( !viewElement.hasAttribute( key ) ) {
  388. domElement.removeAttribute( key );
  389. }
  390. }
  391. }
  392. /**
  393. * Checks if elements child list needs to be updated and possibly updates it.
  394. *
  395. * @private
  396. * @param {module:engine/view/element~Element} viewElement View element to update.
  397. * @param {Object} options
  398. * @param {module:engine/view/position~Position} options.inlineFillerPosition The position on which the inline
  399. * filler should be rendered.
  400. */
  401. _updateChildren( viewElement, options ) {
  402. const domConverter = this.domConverter;
  403. const domElement = domConverter.mapViewToDom( viewElement );
  404. if ( !domElement ) {
  405. // If there is no `domElement` it means that it was already removed from DOM.
  406. // There is no need to update it. It will be updated when re-inserted.
  407. return;
  408. }
  409. const domDocument = domElement.ownerDocument;
  410. const filler = options.inlineFillerPosition;
  411. const actualDomChildren = domElement.childNodes;
  412. const expectedDomChildren = Array.from( domConverter.viewChildrenToDom( viewElement, domDocument, { bind: true } ) );
  413. // Inline filler element has to be created during children update because we need it to diff actual dom
  414. // elements with expected dom elements. We need inline filler in expected dom elements so we won't re-render
  415. // text node if it is not necessary.
  416. if ( filler && filler.parent == viewElement ) {
  417. this._addInlineFiller( domDocument, expectedDomChildren, filler.offset );
  418. }
  419. const actions = diff( actualDomChildren, expectedDomChildren, sameNodes );
  420. let i = 0;
  421. const nodesToUnbind = new Set();
  422. for ( const action of actions ) {
  423. if ( action === 'insert' ) {
  424. insertAt( domElement, i, expectedDomChildren[ i ] );
  425. i++;
  426. } else if ( action === 'delete' ) {
  427. nodesToUnbind.add( actualDomChildren[ i ] );
  428. remove( actualDomChildren[ i ] );
  429. } else { // 'equal'
  430. i++;
  431. }
  432. }
  433. // Unbind removed nodes. When node does not have a parent it means that it was removed from DOM tree during
  434. // comparision with the expected DOM. We don't need to check child nodes, because if child node was reinserted,
  435. // it was moved to DOM tree out of the removed node.
  436. for ( const node of nodesToUnbind ) {
  437. if ( !node.parentNode ) {
  438. this.domConverter.unbindDomElement( node );
  439. }
  440. }
  441. function sameNodes( actualDomChild, expectedDomChild ) {
  442. // Elements.
  443. if ( actualDomChild === expectedDomChild ) {
  444. return true;
  445. }
  446. // Texts.
  447. else if ( domConverter.isText( actualDomChild ) && domConverter.isText( expectedDomChild ) ) {
  448. return actualDomChild.data === expectedDomChild.data;
  449. }
  450. // Block fillers.
  451. else if ( isBlockFiller( actualDomChild, domConverter.blockFiller ) &&
  452. isBlockFiller( expectedDomChild, domConverter.blockFiller ) ) {
  453. return true;
  454. }
  455. // Not matching types.
  456. return false;
  457. }
  458. }
  459. /**
  460. * Checks if selection needs to be updated and possibly updates it.
  461. *
  462. * @private
  463. */
  464. _updateSelection() {
  465. // If there is no selection - remove DOM and fake selections.
  466. if ( this.selection.rangeCount === 0 ) {
  467. this._removeDomSelection();
  468. this._removeFakeSelection();
  469. return;
  470. }
  471. const domRoot = this.domConverter.mapViewToDom( this.selection.editableElement );
  472. // Do nothing if there is no focus, or there is no DOM element corresponding to selection's editable element.
  473. if ( !this.isFocused || !domRoot ) {
  474. return;
  475. }
  476. // Render selection.
  477. if ( this.selection.isFake ) {
  478. this._updateFakeSelection( domRoot );
  479. } else {
  480. this._removeFakeSelection();
  481. this._updateDomSelection( domRoot );
  482. }
  483. }
  484. /**
  485. * Updates fake selection.
  486. *
  487. * @private
  488. * @param {HTMLElement} domRoot Valid DOM root where fake selection container should be added.
  489. */
  490. _updateFakeSelection( domRoot ) {
  491. const domDocument = domRoot.ownerDocument;
  492. // Create fake selection container if one does not exist.
  493. if ( !this._fakeSelectionContainer ) {
  494. this._fakeSelectionContainer = domDocument.createElement( 'div' );
  495. this._fakeSelectionContainer.style.position = 'fixed';
  496. this._fakeSelectionContainer.style.top = 0;
  497. this._fakeSelectionContainer.style.left = '-9999px';
  498. this._fakeSelectionContainer.appendChild( domDocument.createTextNode( '\u00A0' ) );
  499. }
  500. // Add fake container if not already added.
  501. if ( !this._fakeSelectionContainer.parentElement ) {
  502. domRoot.appendChild( this._fakeSelectionContainer );
  503. }
  504. // Update contents.
  505. const content = this.selection.fakeSelectionLabel || '\u00A0';
  506. this._fakeSelectionContainer.firstChild.data = content;
  507. // Update selection.
  508. const domSelection = domDocument.getSelection();
  509. domSelection.removeAllRanges();
  510. const domRange = domDocument.createRange();
  511. domRange.selectNodeContents( this._fakeSelectionContainer );
  512. domSelection.addRange( domRange );
  513. // Bind fake selection container with current selection.
  514. this.domConverter.bindFakeSelection( this._fakeSelectionContainer, this.selection );
  515. }
  516. /**
  517. * Updates DOM selection.
  518. *
  519. * @private
  520. * @param {HTMLElement} domRoot Valid DOM root where DOM selection should be rendered.
  521. */
  522. _updateDomSelection( domRoot ) {
  523. const domSelection = domRoot.ownerDocument.defaultView.getSelection();
  524. // Let's check whether DOM selection needs updating at all.
  525. if ( !this._domSelectionNeedsUpdate( domSelection ) ) {
  526. return;
  527. }
  528. // Multi-range selection is not available in most browsers, and, at least in Chrome, trying to
  529. // set such selection, that is not continuous, throws an error. Because of that, we will just use anchor
  530. // and focus of view selection.
  531. // Since we are not supporting multi-range selection, we also do not need to check if proper editable is
  532. // selected. If there is any editable selected, it is okay (editable is taken from selection anchor).
  533. const anchor = this.domConverter.viewPositionToDom( this.selection.anchor );
  534. const focus = this.domConverter.viewPositionToDom( this.selection.focus );
  535. domSelection.collapse( anchor.parent, anchor.offset );
  536. domSelection.extend( focus.parent, focus.offset );
  537. }
  538. /**
  539. * Checks whether given DOM selection needs to be updated.
  540. *
  541. * @private
  542. * @param {Selection} domSelection DOM selection to check.
  543. * @returns {Boolean}
  544. */
  545. _domSelectionNeedsUpdate( domSelection ) {
  546. if ( !this.domConverter.isDomSelectionCorrect( domSelection ) ) {
  547. // Current DOM selection is in incorrect position. We need to update it.
  548. return true;
  549. }
  550. const oldViewSelection = domSelection && this.domConverter.domSelectionToView( domSelection );
  551. if ( oldViewSelection && this.selection.isEqual( oldViewSelection ) ) {
  552. return false;
  553. }
  554. // If selection is not collapsed, it does not need to be updated if it is similar.
  555. if ( !this.selection.isCollapsed && this.selection.isSimilar( oldViewSelection ) ) {
  556. const data = {
  557. oldSelection: oldViewSelection,
  558. currentSelection: this.selection
  559. };
  560. log.warn(
  561. 'renderer-skipped-selection-rendering: The selection was not rendered due to its similarity to the current one.',
  562. data
  563. );
  564. // Selection did not changed and is correct, do not update.
  565. return false;
  566. }
  567. // Selections are not similar.
  568. return true;
  569. }
  570. /**
  571. * Removes DOM selection.
  572. *
  573. * @private
  574. */
  575. _removeDomSelection() {
  576. for ( const doc of this.domDocuments ) {
  577. const domSelection = doc.getSelection();
  578. if ( domSelection.rangeCount ) {
  579. const activeDomElement = doc.activeElement;
  580. const viewElement = this.domConverter.mapDomToView( activeDomElement );
  581. if ( activeDomElement && viewElement ) {
  582. doc.getSelection().removeAllRanges();
  583. }
  584. }
  585. }
  586. }
  587. /**
  588. * Removes fake selection.
  589. *
  590. * @private
  591. */
  592. _removeFakeSelection() {
  593. const container = this._fakeSelectionContainer;
  594. if ( container ) {
  595. container.remove();
  596. }
  597. }
  598. /**
  599. * Checks if focus needs to be updated and possibly updates it.
  600. *
  601. * @private
  602. */
  603. _updateFocus() {
  604. if ( this.isFocused ) {
  605. const editable = this.selection.editableElement;
  606. if ( editable ) {
  607. this.domConverter.focus( editable );
  608. }
  609. }
  610. }
  611. }
  612. mix( Renderer, ObservableMixin );