element.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module engine/view/element
  7. */
  8. import Node from './node';
  9. import Text from './text';
  10. import TextProxy from './textproxy';
  11. import objectToMap from '@ckeditor/ckeditor5-utils/src/objecttomap';
  12. import isIterable from '@ckeditor/ckeditor5-utils/src/isiterable';
  13. import isPlainObject from '@ckeditor/ckeditor5-utils/src/lib/lodash/isPlainObject';
  14. import Matcher from './matcher';
  15. /**
  16. * View element.
  17. *
  18. * Editing engine does not define fixed HTML DTD. This is why the type of the {@link module:engine/view/element~Element} need to
  19. * be defined by the feature developer. Creating an element you should use {@link module:engine/view/containerelement~ContainerElement}
  20. * class, {@link module:engine/view/attributeelement~AttributeElement} class or {@link module:engine/view/emptyelement~EmptyElement} class.
  21. *
  22. * Note that for view elements which are not created from model, like elements from mutations, paste or
  23. * {@link module:engine/controller/datacontroller~DataController#set data.set} it is not possible to define the type of the element, so
  24. * these will be instances of the {@link module:engine/view/element~Element}.
  25. *
  26. * @extends module:engine/view/node~Node
  27. */
  28. export default class Element extends Node {
  29. /**
  30. * Creates a view element.
  31. *
  32. * Attributes can be passed in various formats:
  33. *
  34. * new Element( 'div', { 'class': 'editor', 'contentEditable': 'true' } ); // object
  35. * new Element( 'div', [ [ 'class', 'editor' ], [ 'contentEditable', 'true' ] ] ); // map-like iterator
  36. * new Element( 'div', mapOfAttributes ); // map
  37. *
  38. * @param {String} name Node name.
  39. * @param {Object|Iterable} [attrs] Collection of attributes.
  40. * @param {module:engine/view/node~Node|Iterable.<module:engine/view/node~Node>} [children]
  41. * List of nodes to be inserted into created element.
  42. */
  43. constructor( name, attrs, children ) {
  44. super();
  45. /**
  46. * Name of the element.
  47. *
  48. * @readonly
  49. * @member {String}
  50. */
  51. this.name = name;
  52. /**
  53. * Map of attributes, where attributes names are keys and attributes values are values.
  54. *
  55. * @protected
  56. * @member {Map} #_attrs
  57. */
  58. if ( isPlainObject( attrs ) ) {
  59. this._attrs = objectToMap( attrs );
  60. } else {
  61. this._attrs = new Map( attrs );
  62. }
  63. /**
  64. * Array of child nodes.
  65. *
  66. * @protected
  67. * @member {Array.<module:engine/view/node~Node>}
  68. */
  69. this._children = [];
  70. if ( children ) {
  71. this.insertChildren( 0, children );
  72. }
  73. /**
  74. * Set of classes associated with element instance.
  75. *
  76. * @protected
  77. * @member {Set}
  78. */
  79. this._classes = new Set();
  80. if ( this._attrs.has( 'class' ) ) {
  81. // Remove class attribute and handle it by class set.
  82. const classString = this._attrs.get( 'class' );
  83. parseClasses( this._classes, classString );
  84. this._attrs.delete( 'class' );
  85. }
  86. /**
  87. * Map of styles.
  88. *
  89. * @protected
  90. * @member {Set} module:engine/view/element~Element#_styles
  91. */
  92. this._styles = new Map();
  93. if ( this._attrs.has( 'style' ) ) {
  94. // Remove style attribute and handle it by styles map.
  95. parseInlineStyles( this._styles, this._attrs.get( 'style' ) );
  96. this._attrs.delete( 'style' );
  97. }
  98. /**
  99. * Map of custom properties.
  100. * Custom properties can be added to element instance, will be cloned but not rendered into DOM.
  101. *
  102. * @protected
  103. * @memeber {Map}
  104. */
  105. this._customProperties = new Map();
  106. }
  107. /**
  108. * Number of element's children.
  109. *
  110. * @readonly
  111. * @type {Number}
  112. */
  113. get childCount() {
  114. return this._children.length;
  115. }
  116. /**
  117. * Is `true` if there are no nodes inside this element, `false` otherwise.
  118. *
  119. * @readonly
  120. * @type {Boolean}
  121. */
  122. get isEmpty() {
  123. return this._children.length === 0;
  124. }
  125. /**
  126. * Checks whether given view tree object is of given type.
  127. *
  128. * Read more in {@link module:engine/view/node~Node#is}.
  129. *
  130. * @param {String} type
  131. * @param {String} [name] Element name.
  132. * @returns {Boolean}
  133. */
  134. is( type, name = null ) {
  135. if ( !name ) {
  136. return type == 'element' || type == this.name;
  137. } else {
  138. return type == 'element' && name == this.name;
  139. }
  140. }
  141. /**
  142. * Clones provided element.
  143. *
  144. * @param {Boolean} [deep=false] If set to `true` clones element and all its children recursively. When set to `false`,
  145. * element will be cloned without any children.
  146. * @returns {module:engine/view/element~Element} Clone of this element.
  147. */
  148. clone( deep = false ) {
  149. const childrenClone = [];
  150. if ( deep ) {
  151. for ( const child of this.getChildren() ) {
  152. childrenClone.push( child.clone( deep ) );
  153. }
  154. }
  155. // ContainerElement and AttributeElement should be also cloned properly.
  156. const cloned = new this.constructor( this.name, this._attrs, childrenClone );
  157. // Classes and styles are cloned separately - this solution is faster than adding them back to attributes and
  158. // parse once again in constructor.
  159. cloned._classes = new Set( this._classes );
  160. cloned._styles = new Map( this._styles );
  161. // Clone custom properties.
  162. cloned._customProperties = new Map( this._customProperties );
  163. // Clone filler offset method.
  164. // We can't define this method in a prototype because it's behavior which
  165. // is changed by e.g. toWidget() function from ckeditor5-widget. Perhaps this should be one of custom props.
  166. cloned.getFillerOffset = this.getFillerOffset;
  167. return cloned;
  168. }
  169. /**
  170. * {@link module:engine/view/element~Element#insertChildren Insert} a child node or a list of child nodes at the end of this node
  171. * and sets the parent of these nodes to this element.
  172. *
  173. * @fires module:engine/view/node~Node#change
  174. * @param {module:engine/view/item~Item|Iterable.<module:engine/view/item~Item>} items Items to be inserted.
  175. * @returns {Number} Number of appended nodes.
  176. */
  177. appendChildren( items ) {
  178. return this.insertChildren( this.childCount, items );
  179. }
  180. /**
  181. * Gets child at the given index.
  182. *
  183. * @param {Number} index Index of child.
  184. * @returns {module:engine/view/node~Node} Child node.
  185. */
  186. getChild( index ) {
  187. return this._children[ index ];
  188. }
  189. /**
  190. * Gets index of the given child node. Returns `-1` if child node is not found.
  191. *
  192. * @param {module:engine/view/node~Node} node Child node.
  193. * @returns {Number} Index of the child node.
  194. */
  195. getChildIndex( node ) {
  196. return this._children.indexOf( node );
  197. }
  198. /**
  199. * Gets child nodes iterator.
  200. *
  201. * @returns {Iterable.<module:engine/view/node~Node>} Child nodes iterator.
  202. */
  203. getChildren() {
  204. return this._children[ Symbol.iterator ]();
  205. }
  206. /**
  207. * Returns an iterator that contains the keys for attributes. Order of inserting attributes is not preserved.
  208. *
  209. * @returns {Iterable.<String>} Keys for attributes.
  210. */
  211. * getAttributeKeys() {
  212. if ( this._classes.size > 0 ) {
  213. yield 'class';
  214. }
  215. if ( this._styles.size > 0 ) {
  216. yield 'style';
  217. }
  218. // This is not an optimal solution because of https://github.com/ckeditor/ckeditor5-engine/issues/454.
  219. // It can be simplified to `yield* this._attrs.keys();`.
  220. for ( const key of this._attrs.keys() ) {
  221. yield key;
  222. }
  223. }
  224. /**
  225. * Returns iterator that iterates over this element's attributes.
  226. *
  227. * Attributes are returned as arrays containing two items. First one is attribute key and second is attribute value.
  228. * This format is accepted by native `Map` object and also can be passed in `Node` constructor.
  229. *
  230. * @returns {Iterable.<*>}
  231. */
  232. * getAttributes() {
  233. yield* this._attrs.entries();
  234. if ( this._classes.size > 0 ) {
  235. yield [ 'class', this.getAttribute( 'class' ) ];
  236. }
  237. if ( this._styles.size > 0 ) {
  238. yield [ 'style', this.getAttribute( 'style' ) ];
  239. }
  240. }
  241. /**
  242. * Gets attribute by key. If attribute is not present - returns undefined.
  243. *
  244. * @param {String} key Attribute key.
  245. * @returns {String|undefined} Attribute value.
  246. */
  247. getAttribute( key ) {
  248. if ( key == 'class' ) {
  249. if ( this._classes.size > 0 ) {
  250. return [ ...this._classes ].join( ' ' );
  251. }
  252. return undefined;
  253. }
  254. if ( key == 'style' ) {
  255. if ( this._styles.size > 0 ) {
  256. let styleString = '';
  257. for ( const [ property, value ] of this._styles ) {
  258. styleString += `${ property }:${ value };`;
  259. }
  260. return styleString;
  261. }
  262. return undefined;
  263. }
  264. return this._attrs.get( key );
  265. }
  266. /**
  267. * Returns a boolean indicating whether an attribute with the specified key exists in the element.
  268. *
  269. * @param {String} key Attribute key.
  270. * @returns {Boolean} `true` if attribute with the specified key exists in the element, false otherwise.
  271. */
  272. hasAttribute( key ) {
  273. if ( key == 'class' ) {
  274. return this._classes.size > 0;
  275. }
  276. if ( key == 'style' ) {
  277. return this._styles.size > 0;
  278. }
  279. return this._attrs.has( key );
  280. }
  281. /**
  282. * Adds or overwrite attribute with a specified key and value.
  283. *
  284. * @param {String} key Attribute key.
  285. * @param {String} value Attribute value.
  286. * @fires module:engine/view/node~Node#change
  287. */
  288. setAttribute( key, value ) {
  289. value = String( value );
  290. this._fireChange( 'attributes', this );
  291. if ( key == 'class' ) {
  292. parseClasses( this._classes, value );
  293. } else if ( key == 'style' ) {
  294. parseInlineStyles( this._styles, value );
  295. } else {
  296. this._attrs.set( key, value );
  297. }
  298. }
  299. /**
  300. * Inserts a child node or a list of child nodes on the given index and sets the parent of these nodes to
  301. * this element.
  302. *
  303. * @param {Number} index Position where nodes should be inserted.
  304. * @param {module:engine/view/item~Item|Iterable.<module:engine/view/item~Item>} items Items to be inserted.
  305. * @fires module:engine/view/node~Node#change
  306. * @returns {Number} Number of inserted nodes.
  307. */
  308. insertChildren( index, items ) {
  309. this._fireChange( 'children', this );
  310. let count = 0;
  311. const nodes = normalize( items );
  312. for ( const node of nodes ) {
  313. // If node that is being added to this element is already inside another element, first remove it from the old parent.
  314. if ( node.parent !== null ) {
  315. node.remove();
  316. }
  317. node.parent = this;
  318. this._children.splice( index, 0, node );
  319. index++;
  320. count++;
  321. }
  322. return count;
  323. }
  324. /**
  325. * Removes attribute from the element.
  326. *
  327. * @param {String} key Attribute key.
  328. * @returns {Boolean} Returns true if an attribute existed and has been removed.
  329. * @fires module:engine/view/node~Node#change
  330. */
  331. removeAttribute( key ) {
  332. this._fireChange( 'attributes', this );
  333. // Remove class attribute.
  334. if ( key == 'class' ) {
  335. if ( this._classes.size > 0 ) {
  336. this._classes.clear();
  337. return true;
  338. }
  339. return false;
  340. }
  341. // Remove style attribute.
  342. if ( key == 'style' ) {
  343. if ( this._styles.size > 0 ) {
  344. this._styles.clear();
  345. return true;
  346. }
  347. return false;
  348. }
  349. // Remove other attributes.
  350. return this._attrs.delete( key );
  351. }
  352. /**
  353. * Removes number of child nodes starting at the given index and set the parent of these nodes to `null`.
  354. *
  355. * @param {Number} index Number of the first node to remove.
  356. * @param {Number} [howMany=1] Number of nodes to remove.
  357. * @returns {Array.<module:engine/view/node~Node>} The array of removed nodes.
  358. * @fires module:engine/view/node~Node#change
  359. */
  360. removeChildren( index, howMany = 1 ) {
  361. this._fireChange( 'children', this );
  362. for ( let i = index; i < index + howMany; i++ ) {
  363. this._children[ i ].parent = null;
  364. }
  365. return this._children.splice( index, howMany );
  366. }
  367. /**
  368. * Checks if this element is similar to other element.
  369. * Both elements should have the same name and attributes to be considered as similar. Two similar elements
  370. * can contain different set of children nodes.
  371. *
  372. * @param {module:engine/view/element~Element} otherElement
  373. * @returns {Boolean}
  374. */
  375. isSimilar( otherElement ) {
  376. if ( !( otherElement instanceof Element ) ) {
  377. return false;
  378. }
  379. // If exactly the same Element is provided - return true immediately.
  380. if ( this === otherElement ) {
  381. return true;
  382. }
  383. // Check element name.
  384. if ( this.name != otherElement.name ) {
  385. return false;
  386. }
  387. // Check number of attributes, classes and styles.
  388. if ( this._attrs.size !== otherElement._attrs.size || this._classes.size !== otherElement._classes.size ||
  389. this._styles.size !== otherElement._styles.size ) {
  390. return false;
  391. }
  392. // Check if attributes are the same.
  393. for ( const [ key, value ] of this._attrs ) {
  394. if ( !otherElement._attrs.has( key ) || otherElement._attrs.get( key ) !== value ) {
  395. return false;
  396. }
  397. }
  398. // Check if classes are the same.
  399. for ( const className of this._classes ) {
  400. if ( !otherElement._classes.has( className ) ) {
  401. return false;
  402. }
  403. }
  404. // Check if styles are the same.
  405. for ( const [ property, value ] of this._styles ) {
  406. if ( !otherElement._styles.has( property ) || otherElement._styles.get( property ) !== value ) {
  407. return false;
  408. }
  409. }
  410. return true;
  411. }
  412. /**
  413. * Adds specified class.
  414. *
  415. * element.addClass( 'foo' ); // Adds 'foo' class.
  416. * element.addClass( 'foo', 'bar' ); // Adds 'foo' and 'bar' classes.
  417. *
  418. * @param {...String} className
  419. * @fires module:engine/view/node~Node#change
  420. */
  421. addClass( ...className ) {
  422. this._fireChange( 'attributes', this );
  423. className.forEach( name => this._classes.add( name ) );
  424. }
  425. /**
  426. * Removes specified class.
  427. *
  428. * element.removeClass( 'foo' ); // Removes 'foo' class.
  429. * element.removeClass( 'foo', 'bar' ); // Removes both 'foo' and 'bar' classes.
  430. *
  431. * @param {...String} className
  432. * @fires module:engine/view/node~Node#change
  433. */
  434. removeClass( ...className ) {
  435. this._fireChange( 'attributes', this );
  436. className.forEach( name => this._classes.delete( name ) );
  437. }
  438. /**
  439. * Returns true if class is present.
  440. * If more then one class is provided - returns true only when all classes are present.
  441. *
  442. * element.hasClass( 'foo' ); // Returns true if 'foo' class is present.
  443. * element.hasClass( 'foo', 'bar' ); // Returns true if 'foo' and 'bar' classes are both present.
  444. *
  445. * @param {...String} className
  446. */
  447. hasClass( ...className ) {
  448. for ( const name of className ) {
  449. if ( !this._classes.has( name ) ) {
  450. return false;
  451. }
  452. }
  453. return true;
  454. }
  455. /**
  456. * Returns iterator that contains all class names.
  457. *
  458. * @returns {Iterable.<String>}
  459. */
  460. getClassNames() {
  461. return this._classes.keys();
  462. }
  463. /**
  464. * Adds style to the element.
  465. *
  466. * element.setStyle( 'color', 'red' );
  467. * element.setStyle( {
  468. * color: 'red',
  469. * position: 'fixed'
  470. * } );
  471. *
  472. * @param {String|Object} property Property name or object with key - value pairs.
  473. * @param {String} [value] Value to set. This parameter is ignored if object is provided as the first parameter.
  474. * @fires module:engine/view/node~Node#change
  475. */
  476. setStyle( property, value ) {
  477. this._fireChange( 'attributes', this );
  478. if ( isPlainObject( property ) ) {
  479. const keys = Object.keys( property );
  480. for ( const key of keys ) {
  481. this._styles.set( key, property[ key ] );
  482. }
  483. } else {
  484. this._styles.set( property, value );
  485. }
  486. }
  487. /**
  488. * Returns style value for given property.
  489. * Undefined is returned if style does not exist.
  490. *
  491. * @param {String} property
  492. * @returns {String|undefined}
  493. */
  494. getStyle( property ) {
  495. return this._styles.get( property );
  496. }
  497. /**
  498. * Returns iterator that contains all style names.
  499. *
  500. * @returns {Iterable.<String>}
  501. */
  502. getStyleNames() {
  503. return this._styles.keys();
  504. }
  505. /**
  506. * Returns true if style keys are present.
  507. * If more then one style property is provided - returns true only when all properties are present.
  508. *
  509. * element.hasStyle( 'color' ); // Returns true if 'border-top' style is present.
  510. * element.hasStyle( 'color', 'border-top' ); // Returns true if 'color' and 'border-top' styles are both present.
  511. *
  512. * @param {...String} property
  513. */
  514. hasStyle( ...property ) {
  515. for ( const name of property ) {
  516. if ( !this._styles.has( name ) ) {
  517. return false;
  518. }
  519. }
  520. return true;
  521. }
  522. /**
  523. * Removes specified style.
  524. *
  525. * element.removeStyle( 'color' ); // Removes 'color' style.
  526. * element.removeStyle( 'color', 'border-top' ); // Removes both 'color' and 'border-top' styles.
  527. *
  528. * @param {...String} property
  529. * @fires module:engine/view/node~Node#change
  530. */
  531. removeStyle( ...property ) {
  532. this._fireChange( 'attributes', this );
  533. property.forEach( name => this._styles.delete( name ) );
  534. }
  535. /**
  536. * Returns ancestor element that match specified pattern.
  537. * Provided patterns should be compatible with {@link module:engine/view/matcher~Matcher Matcher} as it is used internally.
  538. *
  539. * @see module:engine/view/matcher~Matcher
  540. * @param {Object|String|RegExp|Function} patterns Patterns used to match correct ancestor.
  541. * See {@link module:engine/view/matcher~Matcher}.
  542. * @returns {module:engine/view/element~Element|null} Found element or `null` if no matching ancestor was found.
  543. */
  544. findAncestor( ...patterns ) {
  545. const matcher = new Matcher( ...patterns );
  546. let parent = this.parent;
  547. while ( parent ) {
  548. if ( matcher.match( parent ) ) {
  549. return parent;
  550. }
  551. parent = parent.parent;
  552. }
  553. return null;
  554. }
  555. /**
  556. * Sets a custom property. Unlike attributes, custom properties are not rendered to the DOM,
  557. * so they can be used to add special data to elements.
  558. *
  559. * @param {String|Symbol} key
  560. * @param {*} value
  561. */
  562. setCustomProperty( key, value ) {
  563. this._customProperties.set( key, value );
  564. }
  565. /**
  566. * Returns the custom property value for the given key.
  567. *
  568. * @param {String|Symbol} key
  569. * @returns {*}
  570. */
  571. getCustomProperty( key ) {
  572. return this._customProperties.get( key );
  573. }
  574. /**
  575. * Removes the custom property stored under the given key.
  576. *
  577. * @param {String|Symbol} key
  578. * @returns {Boolean} Returns true if property was removed.
  579. */
  580. removeCustomProperty( key ) {
  581. return this._customProperties.delete( key );
  582. }
  583. /**
  584. * Returns an iterator which iterates over this element's custom properties.
  585. * Iterator provides `[ key, value ]` pairs for each stored property.
  586. *
  587. * @returns {Iterable.<*>}
  588. */
  589. * getCustomProperties() {
  590. yield* this._customProperties.entries();
  591. }
  592. /**
  593. * Returns identity string based on element's name, styles, classes and other attributes.
  594. * Two elements that {@link #isSimilar are similar} will have same identity string.
  595. * It has the following format:
  596. *
  597. * 'name class="class1,class2" style="style1:value1;style2:value2" attr1="val1" attr2="val2"'
  598. *
  599. * For example:
  600. *
  601. * const element = new ViewElement( 'foo' );
  602. * element.setAttribute( 'banana', '10' );
  603. * element.setAttribute( 'apple', '20' );
  604. * element.setStyle( 'color', 'red' );
  605. * element.setStyle( 'border-color', 'white' );
  606. * element.addClass( 'baz' );
  607. *
  608. * // returns 'foo class="baz" style="border-color:white;color:red" apple="20" banana="10"'
  609. * element.getIdentity();
  610. *
  611. * NOTE: Classes, styles and other attributes are sorted alphabetically.
  612. *
  613. * @returns {String}
  614. */
  615. getIdentity() {
  616. const classes = Array.from( this._classes ).sort().join( ',' );
  617. const styles = Array.from( this._styles ).map( i => `${ i[ 0 ] }:${ i[ 1 ] }` ).sort().join( ';' );
  618. const attributes = Array.from( this._attrs ).map( i => `${ i[ 0 ] }="${ i[ 1 ] }"` ).sort().join( ' ' );
  619. return this.name +
  620. ( classes == '' ? '' : ` class="${ classes }"` ) +
  621. ( styles == '' ? '' : ` style="${ styles }"` ) +
  622. ( attributes == '' ? '' : ` ${ attributes }` );
  623. }
  624. /**
  625. * Returns block {@link module:engine/view/filler filler} offset or `null` if block filler is not needed.
  626. *
  627. * @abstract
  628. * @method module:engine/view/element~Element#getFillerOffset
  629. */
  630. }
  631. // Parses inline styles and puts property - value pairs into styles map.
  632. // Styles map is cleared before insertion.
  633. //
  634. // @param {Map.<String, String>} stylesMap Map to insert parsed properties and values.
  635. // @param {String} stylesString Styles to parse.
  636. function parseInlineStyles( stylesMap, stylesString ) {
  637. // `null` if no quote was found in input string or last found quote was a closing quote. See below.
  638. let quoteType = null;
  639. let propertyNameStart = 0;
  640. let propertyValueStart = 0;
  641. let propertyName = null;
  642. stylesMap.clear();
  643. // Do not set anything if input string is empty.
  644. if ( stylesString === '' ) {
  645. return;
  646. }
  647. // Fix inline styles that do not end with `;` so they are compatible with algorithm below.
  648. if ( stylesString.charAt( stylesString.length - 1 ) != ';' ) {
  649. stylesString = stylesString + ';';
  650. }
  651. // Seek the whole string for "special characters".
  652. for ( let i = 0; i < stylesString.length; i++ ) {
  653. const char = stylesString.charAt( i );
  654. if ( quoteType === null ) {
  655. // No quote found yet or last found quote was a closing quote.
  656. switch ( char ) {
  657. case ':':
  658. // Most of time colon means that property name just ended.
  659. // Sometimes however `:` is found inside property value (for example in background image url).
  660. if ( !propertyName ) {
  661. // Treat this as end of property only if property name is not already saved.
  662. // Save property name.
  663. propertyName = stylesString.substr( propertyNameStart, i - propertyNameStart );
  664. // Save this point as the start of property value.
  665. propertyValueStart = i + 1;
  666. }
  667. break;
  668. case '"':
  669. case '\'':
  670. // Opening quote found (this is an opening quote, because `quoteType` is `null`).
  671. quoteType = char;
  672. break;
  673. // eslint-disable-next-line no-case-declarations
  674. case ';':
  675. // Property value just ended.
  676. // Use previously stored property value start to obtain property value.
  677. const propertyValue = stylesString.substr( propertyValueStart, i - propertyValueStart );
  678. if ( propertyName ) {
  679. // Save parsed part.
  680. stylesMap.set( propertyName.trim(), propertyValue.trim() );
  681. }
  682. propertyName = null;
  683. // Save this point as property name start. Property name starts immediately after previous property value ends.
  684. propertyNameStart = i + 1;
  685. break;
  686. }
  687. } else if ( char === quoteType ) {
  688. // If a quote char is found and it is a closing quote, mark this fact by `null`-ing `quoteType`.
  689. quoteType = null;
  690. }
  691. }
  692. }
  693. // Parses class attribute and puts all classes into classes set.
  694. // Classes set s cleared before insertion.
  695. //
  696. // @param {Set.<String>} classesSet Set to insert parsed classes.
  697. // @param {String} classesString String with classes to parse.
  698. function parseClasses( classesSet, classesString ) {
  699. const classArray = classesString.split( /\s+/ );
  700. classesSet.clear();
  701. classArray.forEach( name => classesSet.add( name ) );
  702. }
  703. // Converts strings to Text and non-iterables to arrays.
  704. //
  705. // @param {String|module:engine/view/item~Item|Iterable.<String|module:engine/view/item~Item>}
  706. // @return {Iterable.<module:engine/view/node~Node>}
  707. function normalize( nodes ) {
  708. // Separate condition because string is iterable.
  709. if ( typeof nodes == 'string' ) {
  710. return [ new Text( nodes ) ];
  711. }
  712. if ( !isIterable( nodes ) ) {
  713. nodes = [ nodes ];
  714. }
  715. // Array.from to enable .map() on non-arrays.
  716. return Array.from( nodes )
  717. .map( node => {
  718. if ( typeof node == 'string' ) {
  719. return new Text( node );
  720. }
  721. if ( node instanceof TextProxy ) {
  722. return new Text( node.data );
  723. }
  724. return node;
  725. } );
  726. }