domconverter.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563
  1. /**
  2. * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. 'use strict';
  6. import ViewText from './text.js';
  7. import ViewElement from './element.js';
  8. import ViewPosition from './position.js';
  9. import ViewRange from './range.js';
  10. import ViewSelection from './selection.js';
  11. import ViewDocumentFragment from './documentfragment.js';
  12. export const BR_FILLER = ( domDocument ) => {
  13. const fillerBr = domDocument.createElement( 'br' );
  14. fillerBr.dataset.filler = true;
  15. return fillerBr;
  16. };
  17. export const NBSP_FILLER = ( domDocument ) => domDocument.createTextNode( ' ' );
  18. export const INLINE_FILLER_SIZE = 7;
  19. export let INLINE_FILLER = '';
  20. for ( let i = 0; i < INLINE_FILLER_SIZE; i++ ) {
  21. INLINE_FILLER += '\u200b';
  22. }
  23. /**
  24. * DomConverter is a set of tools to do transformations between DOM nodes and view nodes. It also handles
  25. * {@link engine.treeView.DomConverter#bindElements binding} these nodes.
  26. *
  27. * DomConverter does not check which nodes should be rendered (use {@link engine.treeView.Renderer}), does not keep a
  28. * state of a tree nor keeps synchronization between tree view and DOM tree (use {@link engine.treeView.TreeView}).
  29. *
  30. * DomConverter keeps DOM elements to View element bindings, so when the converter will be destroyed, the binding will
  31. * be lost. Two converters will keep separate binding maps, so one tree view can be bound with two DOM trees.
  32. *
  33. * @memberOf engine.treeView
  34. */
  35. export default class DomConverter {
  36. /**
  37. * Creates DOM converter.
  38. */
  39. constructor( options = { blockFiller: BR_FILLER } ) {
  40. // Using WeakMap prevent memory leaks: when the converter will be destroyed all referenced between View and DOM
  41. // will be removed. Also because it is a *Weak*Map when both view and DOM elements will be removed referenced
  42. // will be also removed, isn't it brilliant?
  43. //
  44. // Yes, PJ. It is.
  45. //
  46. // You guys so smart.
  47. /**
  48. * DOM to View mapping.
  49. *
  50. * @private
  51. * @member {WeakMap} engine.treeView.DomConverter#_domToViewMapping
  52. */
  53. this._domToViewMapping = new WeakMap();
  54. /**
  55. * View to DOM mapping.
  56. *
  57. * @private
  58. * @member {WeakMap} engine.treeView.DomConverter#_viewToDomMapping
  59. */
  60. this._viewToDomMapping = new WeakMap();
  61. this.blockFillerCreator = options.blockFiller;
  62. this._templateBlockFiller = options.blockFiller( window.document );
  63. }
  64. /**
  65. * Binds DOM and View elements, so it will be possible to get corresponding elements using
  66. * {@link engine.treeView.DomConverter#getCorrespondingViewElement getCorrespondingViewElement} and
  67. * {@link engine.treeView.DomConverter#getCorrespondingDomElement getCorrespondingDomElement}.
  68. *
  69. * @param {HTMLElement} domElement DOM element to bind.
  70. * @param {engine.treeView.Element} viewElement View element to bind.
  71. */
  72. bindElements( domElement, viewElement ) {
  73. this._domToViewMapping.set( domElement, viewElement );
  74. this._viewToDomMapping.set( viewElement, domElement );
  75. }
  76. /**
  77. * Binds DOM and View document fragments, so it will be possible to get corresponding document fragments using
  78. * {@link engine.treeView.DomConverter#getCorrespondingViewDocumentFragment getCorrespondingViewDocumentFragment} and
  79. * {@link engine.treeView.DomConverter#getCorrespondingDomDocumentFragment getCorrespondingDomDocumentFragment}.
  80. *
  81. * @param {DocumentFragment} domFragment DOM document fragment to bind.
  82. * @param {engine.treeView.DocumentFragment} viewFragment View document fragment to bind.
  83. */
  84. bindDocumentFragments( domFragment, viewFragment ) {
  85. this._domToViewMapping.set( domFragment, viewFragment );
  86. this._viewToDomMapping.set( viewFragment, domFragment );
  87. }
  88. /**
  89. * Converts view to DOM. For all text nodes, not bound elements and document fragments new items will
  90. * be created. For bound elements and document fragments function will return corresponding items.
  91. *
  92. * @param {engine.treeView.Node|engine.treeView.DocumentFragment} viewNode View node or document fragment to transform.
  93. * @param {document} domDocument Document which will be used to create DOM nodes.
  94. * @param {Object} [options] Conversion options.
  95. * @param {Boolean} [options.bind=false] Determines whether new elements will be bound.
  96. * @param {Boolean} [options.withChildren=true] If true node's and document fragment's children will be converted too.
  97. * @returns {Node|DocumentFragment} Converted node or DocumentFragment.
  98. */
  99. viewToDom( viewNode, domDocument, options = {} ) {
  100. if ( viewNode instanceof ViewText ) {
  101. return domDocument.createTextNode( viewNode.data );
  102. } else {
  103. if ( this.getCorrespondingDom( viewNode ) ) {
  104. return this.getCorrespondingDom( viewNode );
  105. }
  106. let domElement;
  107. if ( viewNode instanceof ViewDocumentFragment ) {
  108. // Create DOM document fragment.
  109. domElement = domDocument.createDocumentFragment();
  110. if ( options.bind ) {
  111. this.bindDocumentFragments( domElement, viewNode );
  112. }
  113. } else {
  114. // Create DOM element.
  115. domElement = domDocument.createElement( viewNode.name );
  116. if ( options.bind ) {
  117. this.bindElements( domElement, viewNode );
  118. }
  119. // Copy element's attributes.
  120. for ( let key of viewNode.getAttributeKeys() ) {
  121. domElement.setAttribute( key, viewNode.getAttribute( key ) );
  122. }
  123. }
  124. if ( options.withChildren || options.withChildren === undefined ) {
  125. for ( let child of this.viewChildrenToDom( viewNode, domDocument, options ) ) {
  126. domElement.appendChild( child );
  127. }
  128. }
  129. return domElement;
  130. }
  131. }
  132. *viewChildrenToDom( viewElement, domDocument, options = {} ) {
  133. let fillerPositionOffset = viewElement.getBlockFillerOffset && viewElement.getBlockFillerOffset();
  134. let offset = 0;
  135. for ( let childView of viewElement.getChildren() ) {
  136. if ( fillerPositionOffset === offset ) {
  137. yield this.blockFillerCreator( domDocument );
  138. }
  139. yield this.viewToDom( childView, domDocument, options );
  140. offset++;
  141. }
  142. if ( fillerPositionOffset === offset ) {
  143. yield this.blockFillerCreator( domDocument );
  144. }
  145. }
  146. /**
  147. * Converts DOM to view. For all text nodes, not bound elements and document fragments new items will
  148. * be created. For bound elements and document fragments function will return corresponding items.
  149. *
  150. * @param {Node|DocumentFragment} domNode DOM node or document fragment to transform.
  151. * @param {Object} [options] Conversion options.
  152. * @param {Boolean} [options.bind=false] Determines whether new elements will be bound.
  153. * @param {Boolean} [options.withChildren=true] It true node's and document fragment's children will be converted too.
  154. * @returns {engine.treeView.Node|engine.treeView.DocumentFragment} Converted node or document fragment.
  155. */
  156. domToView( domNode, options = {} ) {
  157. if ( this.isBlockFiller( domNode ) ) {
  158. return null;
  159. }
  160. if ( domNode instanceof Text ) {
  161. if ( this.isInlineFiller( domNode ) ) {
  162. return null;
  163. } else {
  164. return new ViewText( this.getDataWithoutFiller( domNode ) );
  165. }
  166. } else {
  167. if ( this.getCorrespondingView( domNode ) ) {
  168. return this.getCorrespondingView( domNode );
  169. }
  170. let viewElement;
  171. if ( domNode instanceof DocumentFragment ) {
  172. // Create view document fragment.
  173. viewElement = new ViewDocumentFragment();
  174. if ( options.bind ) {
  175. this.bindDocumentFragments( domNode, viewElement );
  176. }
  177. } else {
  178. // Create view element.
  179. viewElement = new ViewElement( domNode.tagName.toLowerCase() );
  180. if ( options.bind ) {
  181. this.bindElements( domNode, viewElement );
  182. }
  183. // Copy element's attributes.
  184. const attrs = domNode.attributes;
  185. for ( let i = attrs.length - 1; i >= 0; i-- ) {
  186. viewElement.setAttribute( attrs[ i ].name, attrs[ i ].value );
  187. }
  188. }
  189. if ( options.withChildren || options.withChildren === undefined ) {
  190. for ( let child of this.domChildrenToView( domNode, options ) ) {
  191. viewElement.appendChildren( child );
  192. }
  193. }
  194. return viewElement;
  195. }
  196. }
  197. *domChildrenToView( domNode, options = {} ) {
  198. for ( let i = 0; i < domNode.childNodes.length; i++ ) {
  199. const domChild = domNode.childNodes[ i ];
  200. const viewChild = this.domToView( domChild, options );
  201. if ( viewChild !== null ) {
  202. yield viewChild;
  203. }
  204. }
  205. }
  206. /**
  207. * Gets corresponding view item. This function use
  208. * {@link engine.treeView.DomConverter#getCorrespondingViewElement getCorrespondingViewElement}
  209. * for elements, {@link engine.treeView.DomConverter#getCorrespondingViewText getCorrespondingViewText} for text
  210. * nodes and {@link engine.treeView.DomConverter#getCorrespondingViewDocumentFragment getCorrespondingViewDocumentFragment}
  211. * for document fragments.
  212. *
  213. * @param {Node|DocumentFragment} domNode DOM node or document fragment.
  214. * @returns {engine.treeView.Node|engine.treeView.DocumentFragment|null} Corresponding view item.
  215. */
  216. getCorrespondingView( domNode ) {
  217. if ( domNode instanceof HTMLElement ) {
  218. return this.getCorrespondingViewElement( domNode );
  219. } else if ( domNode instanceof DocumentFragment ) {
  220. return this.getCorrespondingViewDocumentFragment( domNode );
  221. } else if ( domNode instanceof Text ) {
  222. return this.getCorrespondingViewText( domNode );
  223. }
  224. return undefined;
  225. }
  226. /**
  227. * Gets corresponding view element. Returns element if an view element was
  228. * {@link engine.treeView.DomConverter#bindElements bound} to the given DOM element or null otherwise.
  229. *
  230. * @param {HTMLElement} domElement DOM element.
  231. * @returns {engine.treeView.Element|null} Corresponding element or null if no element was bound.
  232. */
  233. getCorrespondingViewElement( domElement ) {
  234. return this._domToViewMapping.get( domElement );
  235. }
  236. /**
  237. * Gets corresponding view document fragment. Returns document fragment if an view element was
  238. * {@link engine.treeView.DomConverter#bindDocumentFragments bound} to the given DOM fragment or null otherwise.
  239. *
  240. * @param {DocumentFragment} domFragment DOM element.
  241. * @returns {engine.treeView.DocumentFragment|null} Corresponding document fragment or null if none element was bound.
  242. */
  243. getCorrespondingViewDocumentFragment( domFragment ) {
  244. return this._domToViewMapping.get( domFragment );
  245. }
  246. /**
  247. * Gets corresponding text node. Text nodes are not {@link engine.treeView.DomConverter#bindElements bound},
  248. * corresponding text node is returned based on the sibling or parent.
  249. *
  250. * If the directly previous sibling is a {@link engine.treeView.DomConverter#bindElements bound} element, it is used
  251. * to find the corresponding text node.
  252. *
  253. * If this is a first child in the parent and the parent is a {@link engine.treeView.DomConverter#bindElements bound}
  254. * element, it is used to find the corresponding text node.
  255. *
  256. * Otherwise `null` is returned.
  257. *
  258. * @param {Text} domText DOM text node.
  259. * @returns {engine.treeView.Text|null} Corresponding view text node or null, if it was not possible to find a
  260. * corresponding node.
  261. */
  262. getCorrespondingViewText( domText ) {
  263. if ( this.isInlineFiller( domText ) ) {
  264. return null;
  265. }
  266. const previousSibling = domText.previousSibling;
  267. // Try to use previous sibling to find the corresponding text node.
  268. if ( previousSibling ) {
  269. if ( !( previousSibling instanceof HTMLElement ) ) {
  270. // The previous is text or comment.
  271. return null;
  272. }
  273. const viewElement = this.getCorrespondingViewElement( previousSibling );
  274. if ( viewElement ) {
  275. const nextSibling = viewElement.getNextSibling();
  276. if ( nextSibling instanceof ViewText ) {
  277. return viewElement.getNextSibling();
  278. } else {
  279. return null;
  280. }
  281. }
  282. }
  283. // Try to use parent to find the corresponding text node.
  284. else {
  285. const viewElement = this.getCorrespondingViewElement( domText.parentNode );
  286. if ( viewElement ) {
  287. const firstChild = viewElement.getChild( 0 );
  288. if ( firstChild instanceof ViewText ) {
  289. return firstChild;
  290. } else {
  291. return null;
  292. }
  293. }
  294. }
  295. return null;
  296. }
  297. /**
  298. * Gets corresponding DOM item. This function uses
  299. * {@link engine.treeView.DomConverter#getCorrespondingDomElement getCorrespondingDomElement} for
  300. * elements, {@link engine.treeView.DomConverter#getCorrespondingDomText getCorrespondingDomText} for text nodes
  301. * and {@link engine.treeView.DomConverter#getCorrespondingDomDocumentFragment getCorrespondingDomDocumentFragment}
  302. * for document fragments.
  303. *
  304. * @param {engine.treeView.Node|engine.treeView.DomFragment} viewNode View node or document fragment.
  305. * @returns {Node|DocumentFragment|null} Corresponding DOM node or document fragment.
  306. */
  307. getCorrespondingDom( viewNode ) {
  308. if ( viewNode instanceof ViewElement ) {
  309. return this.getCorrespondingDomElement( viewNode );
  310. } else if ( viewNode instanceof ViewDocumentFragment ) {
  311. return this.getCorrespondingDomDocumentFragment( viewNode );
  312. } else {
  313. return this.getCorrespondingDomText( viewNode );
  314. }
  315. }
  316. /**
  317. * Gets corresponding DOM element. Returns element if an DOM element was
  318. * {@link engine.treeView.DomConverter#bindElements bound} to the given view element or null otherwise.
  319. *
  320. * @param {engine.treeView.Element} viewElement View element.
  321. * @returns {HTMLElement|null} Corresponding element or null if none element was bound.
  322. */
  323. getCorrespondingDomElement( viewElement ) {
  324. return this._viewToDomMapping.get( viewElement );
  325. }
  326. /**
  327. * Gets corresponding DOM document fragment. Returns document fragment if an DOM element was
  328. * {@link engine.treeView.DomConverter#bindDocumentFragments bound} to the given view document fragment or null otherwise.
  329. *
  330. * @param {engine.treeView.DocumentFragment} viewDocumentFragment View document fragment.
  331. * @returns {DocumentFragment|null} Corresponding document fragment or null if no fragment was bound.
  332. */
  333. getCorrespondingDomDocumentFragment( viewDocumentFragment ) {
  334. return this._viewToDomMapping.get( viewDocumentFragment );
  335. }
  336. /**
  337. * Gets corresponding text node. Text nodes are not {@link engine.treeView.DomConverter#bindElements bound},
  338. * corresponding text node is returned based on the sibling or parent.
  339. *
  340. * If the directly previous sibling is a {@link engine.treeView.DomConverter#bindElements bound} element, it is used
  341. * to find the corresponding text node.
  342. *
  343. * If this is a first child in the parent and the parent is a {@link engine.treeView.DomConverter#bindElements bound}
  344. * element, it is used to find the corresponding text node.
  345. *
  346. * Otherwise null is returned.
  347. *
  348. * @param {engine.treeView.Text} viewText View text node.
  349. * @returns {Text|null} Corresponding DOM text node or null, if it was not possible to find a corresponding node.
  350. */
  351. getCorrespondingDomText( viewText ) {
  352. const previousSibling = viewText.getPreviousSibling();
  353. // Try to use previous sibling to find the corresponding text node.
  354. if ( previousSibling && this.getCorrespondingDom( previousSibling ) ) {
  355. return this.getCorrespondingDom( previousSibling ).nextSibling;
  356. }
  357. // Try to use parent to find the corresponding text node.
  358. if ( !previousSibling && this.getCorrespondingDom( viewText.parent ) ) {
  359. return this.getCorrespondingDom( viewText.parent ).childNodes[ 0 ];
  360. }
  361. return null;
  362. }
  363. viewPositionToDom( viewPosition ) {
  364. const viewParent = viewPosition.parent;
  365. if ( viewParent instanceof ViewText ) {
  366. const domParent = this.getCorrespondingDomText( viewParent );
  367. let offset = viewPosition.offset;
  368. if ( this.startsWithFiller( domParent ) ) {
  369. offset += INLINE_FILLER_SIZE;
  370. }
  371. return { parent: domParent, offset: offset };
  372. } else {
  373. let domParent, domBefore, domAfter;
  374. if ( viewPosition.offset === 0 ) {
  375. domParent = this.getCorrespondingDom( viewPosition.parent );
  376. domAfter = domParent.childNodes[ 0 ];
  377. } else {
  378. domBefore = this.getCorrespondingDom( viewPosition.nodeBefore );
  379. domParent = domBefore.parentNode;
  380. domAfter = domBefore.nextSibling;
  381. }
  382. if ( domAfter instanceof Text && this.startsWithFiller( domAfter ) ) {
  383. return { parent: domAfter, offset: INLINE_FILLER_SIZE };
  384. }
  385. const offset = domBefore ? indexOf( domBefore ) + 1 : 0;
  386. return { parent: domParent, offset: offset };
  387. }
  388. }
  389. domPositionToView( domParent, domOffset ) {
  390. if ( this.isBlockFiller( domParent ) ) {
  391. return this.domPositionToView( domParent.parentNode, indexOf( domParent ) );
  392. }
  393. if ( domParent instanceof Text ) {
  394. if ( this.isInlineFiller( domParent ) ) {
  395. return this.domPositionToView( domParent.parentNode, indexOf( domParent ) );
  396. }
  397. const viewParent = this.getCorrespondingViewText( domParent );
  398. let offset = domOffset;
  399. if ( this.startsWithFiller( domParent ) ) {
  400. offset -= INLINE_FILLER_SIZE;
  401. offset = offset < 0 ? 0 : offset;
  402. }
  403. return new ViewPosition( viewParent, offset );
  404. } else {
  405. if ( domOffset === 0 ) {
  406. const viewParent = this.getCorrespondingView( domParent );
  407. if ( viewParent ) {
  408. return new ViewPosition( viewParent, 0 );
  409. }
  410. } else {
  411. const viewBefore = this.getCorrespondingView( domParent.childNodes[ domOffset - 1 ] );
  412. if ( viewBefore ) {
  413. return new ViewPosition( viewBefore.parent, viewBefore.getIndex() + 1 );
  414. }
  415. }
  416. return undefined;
  417. }
  418. }
  419. viewRangeToDom( viewRange ) {
  420. const domStart = this.viewPositionToDom( viewRange.start );
  421. const domEnd = this.viewPositionToDom( viewRange.end );
  422. const domRange = new Range();
  423. domRange.setStart( domStart.parent, domStart.offset );
  424. domRange.setEnd( domEnd.parent, domEnd.offset );
  425. return domRange;
  426. }
  427. domRangeToView( domRange ) {
  428. const viewStart = this.domPositionToView( domRange.startContainer, domRange.startOffset );
  429. const viewEnd = this.domPositionToView( domRange.endContainer, domRange.endOffset );
  430. if ( viewStart && viewEnd ) {
  431. return new ViewRange( viewStart, viewEnd );
  432. }
  433. return undefined;
  434. }
  435. domSelectionToView( domSelection ) {
  436. const viewSelection = new ViewSelection();
  437. for ( let i = 0; i < domSelection.rangeCount; i++ ) {
  438. const domRange = domSelection.getRangeAt( i );
  439. const viewRange = this.domRangeToView( domRange );
  440. if ( viewRange ) {
  441. viewSelection.addRange( viewRange );
  442. }
  443. }
  444. return viewSelection;
  445. }
  446. startsWithFiller( domText ) {
  447. return ( domText.data.substr( 0, INLINE_FILLER_SIZE ) === INLINE_FILLER );
  448. }
  449. isInlineFiller( domText ) {
  450. return domText.data.length == INLINE_FILLER_SIZE && this.startsWithFiller( domText );
  451. }
  452. getDataWithoutFiller( domText ) {
  453. if ( this.startsWithFiller( domText ) ) {
  454. return domText.data.slice( INLINE_FILLER_SIZE );
  455. } else {
  456. return domText.data;
  457. }
  458. }
  459. isBlockFiller( domNode ) {
  460. return domNode.isEqualNode( this._templateBlockFiller );
  461. }
  462. }
  463. function indexOf( domNode ) {
  464. let index = 0;
  465. while ( domNode.previousSibling ) {
  466. domNode = domNode.previousSibling;
  467. index++;
  468. }
  469. return index;
  470. }