8
0
Piotrek Koszuliński 10 лет назад
Родитель
Сommit
ccc187189f

+ 28 - 29
packages/ckeditor5-engine/src/treeview/converter.js

@@ -9,17 +9,14 @@ import ViewText from './text.js';
 import ViewElement from './element.js';
 
 /**
- * Converter is a set of tools to do transformations between DOM nodes and view nodes. It also handle
+ * Converter is a set of tools to do transformations between DOM nodes and view nodes. It also handles
  * {@link #bindElements binding} these nodes.
  *
  * Converter does not check which nodes should be rendered (use {@link treeView.Renderer}), does not keep a state of
- * a tree nor keep synchronization between tree view and DOM tree (use {@treeView.TreeView}).
+ * a tree nor keeps synchronization between tree view and DOM tree (use {@treeView.TreeView}).
  *
- * Converter keep DOM elements - View element binding, so when the converter will be destroyed, the binding will be
- * lost. Two converters will use separate bindings, so one tree view can be binded with two DOM trees.
- *
- * In the future converter may take a configuration in the constructor (e.g. what should be inserted into an empty
- * elements).
+ * Converter keeps DOM elements to View element bindings, so when the converter will be destroyed, the binding will be
+ * lost. Two converters will keep separate binding maps, so one tree view can be bound with two DOM trees.
  *
  * @class treeView.Converter
  */
@@ -33,6 +30,8 @@ export default class Converter {
 		// Using WeakMap prevent memory leaks: when the converter will be destroyed all referenced between View and DOM
 		// will be removed. Also because it is a *Weak*Map when both view and DOM elements will be removed referenced
 		// will be also removed, isn't it brilliant?
+		//
+		// Yes, PJ. It is.
 
 		/**
 		 * DOM to View mapping.
@@ -52,7 +51,7 @@ export default class Converter {
 	}
 
 	/**
-	 * Bind DOM and View elements, so it will be possible to get corresponding elements using
+	 * Binds DOM and View elements, so it will be possible to get corresponding elements using
 	 * {@link treeView.Converter#getCorrespondingViewElement} and {@link treeView.Converter#getCorespondingDOMElement}.
 	 *
 	 * @param {HTMLElement} domElement DOM element to bind.
@@ -64,7 +63,7 @@ export default class Converter {
 	}
 
 	/**
-	 * Compare DOM and View nodes. Elements are same when they are binded. Text nodes are same when they have the same
+	 * Compares DOM and View nodes. Elements are same when they are bound. Text nodes are same when they have the same
 	 * text data. Nodes need to have corresponding types. In all other cases nodes are different.
 	 *
 	 * @param {Node} domNode DOM node to compare.
@@ -86,13 +85,13 @@ export default class Converter {
 	}
 
 	/**
-	 * Convert view to DOM. For all text nodes and not binded elements new elements will be created. For binded
+	 * Converts view to DOM. For all text nodes and not bound elements new elements will be created. For bound
 	 * elements function will return corresponding elements.
 	 *
 	 * @param {treeView.Node} viewNode View node to transform.
 	 * @param {document} domDocument Document which will be used to create DOM nodes.
 	 * @param {Object} [options] Conversion options.
-	 * @param {Boolean} [options.bind=false] Determines whether new elements will be binded.
+	 * @param {Boolean} [options.bind=false] Determines whether new elements will be bound.
 	 * @param {Boolean} [options.withChildren=true] If true node's children will be converter too.
 	 * @returns {Node} Converted node.
 	 */
@@ -129,12 +128,12 @@ export default class Converter {
 	}
 
 	/**
-	 * Convert DOM to view. For all text nodes and not binded elements new elements will be created. For binded
+	 * Converts DOM to view. For all text nodes and not bound elements new elements will be created. For bound
 	 * elements function will return corresponding elements.
 	 *
 	 * @param {Node} domNode DOM node to transform.
 	 * @param {Object} [options] Conversion options.
-	 * @param {Boolean} [options.bind=false] Determines whether new elements will be binded.
+	 * @param {Boolean} [options.bind=false] Determines whether new elements will be bound.
 	 * @param {Boolean} [options.withChildren=true] It true node's children will be converter too.
 	 * @returns {treeView.Node} Converted node.
 	 */
@@ -179,7 +178,7 @@ export default class Converter {
 	 * {@link getCorrespondingViewText} for text nodes.
 	 *
 	 * @param {Node} domNode DOM node.
-	 * @returns {treeView.Node|Null} Corresponding node.
+	 * @returns {treeView.Node|null} Corresponding node.
 	 */
 	getCorrespondingView( domNode ) {
 		if ( domNode instanceof HTMLElement ) {
@@ -190,30 +189,30 @@ export default class Converter {
 	}
 
 	/**
-	 * Gets corresponding view element. Returns element if an view element was {@link #bindElements binded} to the given
+	 * Gets corresponding view element. Returns element if an view element was {@link #bindElements bound} to the given
 	 * DOM element or null otherwise.
 	 *
 	 * @param {HTMLElement} domElement DOM element.
-	 * @returns {treeView.Element|Null} Corresponding element or null if none element was binded.
+	 * @returns {treeView.Element|null} Corresponding element or null if none element was bound.
 	 */
 	getCorrespondingViewElement( domElement ) {
 		return this._domToViewMapping.get( domElement );
 	}
 
 	/**
-	 * Gets corresponding text node. Text nodes are not {@link #bindElements binded}, corresponding text node is
+	 * Gets corresponding text node. Text nodes are not {@link #bindElements bound}, corresponding text node is
 	 * returned based on the sibling or parent.
 	 *
-	 * If the directly previous sibling is a {@link #bindElements binded} element, it is used to find the corresponding
+	 * If the directly previous sibling is a {@link #bindElements bound} element, it is used to find the corresponding
 	 * text node.
 	 *
-	 * If this is a first child in the parent and the parent is a {@link #bindElements binded} element, it is used to
+	 * If this is a first child in the parent and the parent is a {@link #bindElements bound} element, it is used to
 	 * find the corresponding text node.
 	 *
-	 * Otherwise null is returned.
+	 * Otherwise `null` is returned.
 	 *
 	 * @param {Text} domText DOM text node.
-	 * @returns {treeView.Text|Null} Corresponding view text node or null, if it was not possible to find a
+	 * @returns {treeView.Text|null} Corresponding view text node or null, if it was not possible to find a
 	 * corresponding node.
 	 */
 	getCorrespondingViewText( domText ) {
@@ -249,7 +248,7 @@ export default class Converter {
 	 * {@link #getCorrespondingDomText} for text nodes.
 	 *
 	 * @param {treeView.Node} viewNode View node.
-	 * @returns {Node|Null} Corresponding DOM node.
+	 * @returns {Node|null} Corresponding DOM node.
 	 */
 	getCorrespondingDom( viewNode ) {
 		if ( viewNode instanceof ViewElement ) {
@@ -260,30 +259,30 @@ export default class Converter {
 	}
 
 	/**
-	 * Gets corresponding DOM element. Returns element if an DOM element was {@link #bindElements binded} to the given
+	 * Gets corresponding DOM element. Returns element if an DOM element was {@link #bindElements bound} to the given
 	 * view element or null otherwise.
 	 *
 	 * @param {treeView.Element} viewElement View element.
-	 * @returns {HTMLElement|Null} Corresponding element or null if none element was binded.
+	 * @returns {HTMLElement|null} Corresponding element or null if none element was bound.
 	 */
 	getCorrespondingDomElement( viewElement ) {
 		return this._viewToDomMapping.get( viewElement );
 	}
 
 	/**
-	 * Gets corresponding text node. Text nodes are not {@link #bindElements binded}, corresponding text node is
+	 * Gets corresponding text node. Text nodes are not {@link #bindElements bound}, corresponding text node is
 	 * returned based on the sibling or parent.
 	 *
-	 * If the directly previous sibling is a {@link #bindElements binded} element, it is used to find the corresponding
+	 * If the directly previous sibling is a {@link #bindElements bound} element, it is used to find the corresponding
 	 * text node.
 	 *
-	 * If this is a first child in the parent and the parent is a {@link #bindElements binded} element, it is used to
+	 * If this is a first child in the parent and the parent is a {@link #bindElements bound} element, it is used to
 	 * find the corresponding text node.
 	 *
 	 * Otherwise null is returned.
 	 *
 	 * @param {treeView.Text} viewText View text node.
-	 * @returns {Text|Null} Corresponding DOM text node or null, if it was not possible to find a corresponding node.
+	 * @returns {Text|null} Corresponding DOM text node or null, if it was not possible to find a corresponding node.
 	 */
 	getCorrespondingDomText( viewText ) {
 		const previousSibling = viewText.getPreviousSibling();
@@ -300,4 +299,4 @@ export default class Converter {
 
 		return null;
 	}
-}
+}

+ 8 - 8
packages/ckeditor5-engine/src/treeview/element.js

@@ -36,7 +36,7 @@ export default class Element extends Node {
 		 * Name of the element.
 		 *
 		 * @readonly
-		 * @type {String}
+		 * @property {String}
 		 */
 		this.name = name;
 
@@ -56,7 +56,7 @@ export default class Element extends Node {
 		 * Array of child nodes.
 		 *
 		 * @protected
-		 * @type {Array.<treeView.Node>}
+		 * @property {Array.<treeView.Node>}
 		 */
 		this._children = [];
 
@@ -69,7 +69,7 @@ export default class Element extends Node {
 	 * {@link treeView.Element#insert Insert} a child node or a list of child nodes at the end of this node and sets
 	 * the parent of these nodes to this element.
 	 *
-	 * Fire the {@link treeView.Node#change change event}.
+	 * Fires the {@link treeView.Node#change change event}.
 	 *
 	 * @param {treeView.Node|Iterable.<treeView.Node>} nodes Node or the list of nodes to be inserted.
 	 */
@@ -145,9 +145,9 @@ export default class Element extends Node {
 	}
 
 	/**
-	 * Add or overwrite attribute with a specified key and value.
+	 * Adds or overwrite attribute with a specified key and value.
 	 *
-	 * Fire the {@link treeView.Node#change change event}.
+	 * Fires the {@link treeView.Node#change change event}.
 	 *
 	 * @param {String} key Attribute key.
 	 * @param {String} value Attribute value.
@@ -162,7 +162,7 @@ export default class Element extends Node {
 	 * Inserts a child node or a list of child nodes on the given index and sets the parent of these nodes to
 	 * this element.
 	 *
-	 * Fire the {@link treeView.Node#change change event}.
+	 * Fires the {@link treeView.Node#change change event}.
 	 *
 	 * @param {Number} index Position where nodes should be inserted.
 	 * @param {treeView.Node|Iterable.<treeView.Node>} nodes Node or the list of nodes to be inserted.
@@ -185,7 +185,7 @@ export default class Element extends Node {
 	/**
 	 * Removes attribute from the element.
 	 *
-	 * Fire the {@link treeView.Node#change change event}.
+	 * Fires the {@link treeView.Node#change change event}.
 	 *
 	 * @param {String} key Attribute key.
 	 * @returns {Boolead} Returns true if an attribute existed and has been removed.
@@ -199,7 +199,7 @@ export default class Element extends Node {
 	/**
 	 * Removes number of child nodes starting at the given index and set the parent of these nodes to `null`.
 	 *
-	 * Fire the {@link treeView.Node#change change event}.
+	 * Fires the {@link treeView.Node#change change event}.
 	 *
 	 * @param {Number} index Number of the first node to remove.
 	 * @param {Number} number Number of nodes to remove.

+ 11 - 11
packages/ckeditor5-engine/src/treeview/node.js

@@ -7,7 +7,7 @@
 
 import CKEditorError from '../ckeditorerror.js';
 import EmitterMixin from '../emittermixin.js';
-import objectUtils from '../lib/lodash/object.js';
+import utils from '../utils.js';
 
 /**
  * Abstract tree view node class.
@@ -42,11 +42,11 @@ export default class Node {
 	}
 
 	/**
-	 * Index of the node in the parent element or null if the node has no parent.
+	 * Returns index of the node in the parent element or null if the node has no parent.
 	 *
 	 * Throws error if the parent element does not contain this node.
 	 *
-	 * @returns {Number|Null} Index of the node in the parent element or null if the node has not parent.
+	 * @returns {Number|null} Index of the node in the parent element or null if the node has not parent.
 	 */
 	getIndex() {
 		let pos;
@@ -95,7 +95,7 @@ export default class Node {
 	 * {@link treeView.Node#setTreeView} it will be returned. Otherwise {@link treeView.TreeView} of the parents node
 	 * will be returned. If node has no parent, `null` will be returned.
 	 *
-	 * @returns {treeView.TreeView|Null} Tree view of the node, tree view of the parent or null.
+	 * @returns {treeView.TreeView|null} Tree view of the node, tree view of the parent or null.
 	 */
 	getTreeView() {
 		if ( this._treeView ) {
@@ -108,7 +108,7 @@ export default class Node {
 	}
 
 	/**
-	 * Set the {@link treeView.TreeView} of the node. Note that not all of nodes need to have {@link treeView.TreeView}
+	 * Sets the {@link treeView.TreeView} of the node. Note that not all of nodes need to have {@link treeView.TreeView}
 	 * assigned, see {@link treeView.Node#getTreeView}.
 	 *
 	 * @param {treeView.TreeView} treeView Tree view.
@@ -118,7 +118,7 @@ export default class Node {
 	}
 
 	/**
-	 * Fire {@link treeView.Node#change change event}.
+	 * Fires the {@link treeView.Node#change change event}.
 	 *
 	 * @param {treeView.ChangeType} type Type of the change.
 	 * @param {treeView.Node} node Changed node.
@@ -132,17 +132,17 @@ export default class Node {
 	}
 
 	/**
-	 * Fired when node changes. In case of {@link treeView.Text text nodes} in will be change of the text. In case of
-	 * {@link treeView.Element elements} in will be change of child nodes or attributes.
+	 * Fired when a node changes.
+	 *
+	 * * In case of {@link treeView.Text text nodes} it will be a change of the text data.
+	 * * In case of {@link treeView.Element elements} it will be a change of child nodes or attributes.
 	 *
 	 * Change event is bubbling, it is fired on the ancestors chain.
 	 *
 	 * @event change
-	 *
 	 * @param {treeView.ChangeType} Type of the change.
 	 * @param {treeView.Node} Changed node.
 	 */
 }
 
-objectUtils.extend( Node.prototype, EmitterMixin );
-
+utils.mix( Node, EmitterMixin );

+ 10 - 10
packages/ckeditor5-engine/src/treeview/observer/mutationobserver.js

@@ -8,7 +8,7 @@
 import Observer from './observer.js';
 
 /**
- * Mutation observer class observe changes in the DOM, fire {@link treeView.TreeView#mutations} event, mark view elements
+ * Mutation observer class observes changes in the DOM, fires {@link treeView.TreeView#mutations} event, mark view elements
  * as changed and call {@link treeView.render}. Because all mutated nodes are marked as "to be rendered" and the
  * {@link treeView.render} is called, all changes will be reverted, unless the mutation will be handled by the
  * {@link treeView.TreeView#mutations} event listener. It means user will see only handled changes, and the editor will
@@ -34,7 +34,7 @@ export default class MutationObserver extends Observer {
 		 * Native mutation observer config.
 		 *
 		 * @private
-		 * @type {Object}
+		 * @property {Object}
 		 */
 		this._config = {
 			childList: true,
@@ -47,30 +47,30 @@ export default class MutationObserver extends Observer {
 	// Docs in the base class.
 	init( treeView ) {
 		/**
-		 * Referense to the {@link treeView.TreeView} object.
+		 * Reference to the {@link treeView.TreeView} object.
 		 *
-		 * @type {treeView.TreeView}
+		 * @property {treeView.TreeView}
 		 */
 		this.treeView = treeView;
 
 		/**
 		 * Reference to the {@link treeView.TreeView#domRoot}.
 		 *
-		 * @type {HTMLElement}
+		 * @property {HTMLElement}
 		 */
 		this.domRoot = treeView.domRoot;
 
 		/**
 		 * Reference to the {@link treeView.TreeView#converter}.
 		 *
-		 * @type {treeView.Converter}
+		 * @property {treeView.Converter}
 		 */
 		this.converter = treeView.converter;
 
 		/**
 		 * Reference to the {@link treeView.TreeView#renderer}.
 		 *
-		 * @type {treeView.Renderer}
+		 * @property {treeView.Renderer}
 		 */
 		this.renderer = treeView.renderer;
 
@@ -78,7 +78,7 @@ export default class MutationObserver extends Observer {
 		 * Native mutation observer.
 		 *
 		 * @private
-		 * @type {window.MutationObserver}
+		 * @property {window.MutationObserver}
 		 */
 		this._mutationObserver = new window.MutationObserver( this._onMutations.bind( this ) );
 	}
@@ -94,7 +94,7 @@ export default class MutationObserver extends Observer {
 	}
 
 	/**
-	 * Handle mutations. Deduplicate, mark view elements to sync, fire event and call render.
+	 * Handles mutations. Deduplicates, mark view elements to sync, fire event and call render.
 	 *
 	 * @protected
 	 * @param {Array.<Object>} domMutations Array of native mutations.
@@ -212,4 +212,4 @@ export default class MutationObserver extends Observer {
  * @property {treeView.Element} node Parent of the mutated children.
  * @property {Array.<treeView.Node>} oldChildren Old child nodes.
  * @property {Array.<treeView.Node>} newChildren New child nodes.
- */
+ */

+ 7 - 7
packages/ckeditor5-engine/src/treeview/observer/observer.js

@@ -6,15 +6,15 @@
 'use strict';
 
 /**
- * Abstract base observer class. Observers are classes which observe changes on DOM elements, do the primary processing
- * and fire events on the {@link treeView.TreeView} objects.
+ * Abstract base observer class. Observers are classes which observe changes on DOM elements, do the preliminary
+ * processing and fire events on the {@link treeView.TreeView} objects.
  *
  * @abstract
  * @class treeView.observer.Observer
  */
 export default class Observer {
 	/**
-	 * Init the observer class, cache all needed {@link treeView.TreeView} properties, create objects.
+	 * Inits the observer class, caches all needed {@link treeView.TreeView} properties, create objects.
 	 * This method do not {@link treeView.observer.Observer#attach attach} listeners to the DOM.
 	 *
 	 * @method init
@@ -22,8 +22,8 @@ export default class Observer {
 	 */
 
 	/**
-	 * Attach observers and linsters to DOM elements. This method is called when then observer is added to the
-	 * {@link treeView.TreeView} and after {@link treeView.TreeView#render rendering} to reattach observers and linsters.
+	 * Attaches observers and listeners to DOM elements. This method is called when then observer is added to the
+	 * {@link treeView.TreeView} and after {@link treeView.TreeView#render rendering} to reattach observers and listeners.
 	 *
 	 * @see treeView.observer.Observer#detach
 	 *
@@ -31,8 +31,8 @@ export default class Observer {
 	 */
 
 	/**
-	 * Detach observers and linsters from the DOM elements. This method is called before
-	 * {@link treeView.TreeView#render rendering} to prevent fireing events during rendering and when the editor is
+	 * Detaches observers and listeners from the DOM elements. This method is called before
+	 * {@link treeView.TreeView#render rendering} to prevent firing events during rendering and when the editor is
 	 * destroyed.
 	 *
 	 * @see treeView.observer.Observer#attach

+ 2 - 2
packages/ckeditor5-engine/src/treeview/position.js

@@ -22,14 +22,14 @@
 		/**
 		 * Position parent element.
 		 *
-		 * @type {treeView.Element}
+		 * @property {treeView.Element}
 		 */
 		this.parent = parent;
 
 		/**
 		 * Position offset.
 		 *
-		 * @type {Number}
+		 * @property {Number}
 		 */
 		this.offset = offset;
 	}

+ 4 - 4
packages/ckeditor5-engine/src/treeview/renderer.js

@@ -29,7 +29,7 @@ export default class Renderer {
 		 * Converter instance.
 		 *
 		 * @readonly
-		 * @type {treeView.Converter}
+		 * @property {treeView.Converter}
 		 */
 		this.converter = converter;
 
@@ -37,7 +37,7 @@ export default class Renderer {
 		 * Set of nodes which attributes changed and may need to be rendered.
 		 *
 		 * @readonly
-		 * @type {Set.<treeView.Node>}
+		 * @property {Set.<treeView.Node>}
 		 */
 		this.markedAttributes = new Set();
 
@@ -45,7 +45,7 @@ export default class Renderer {
 		 * Set of elements which child lists changed and may need to be rendered.
 		 *
 		 * @readonly
-		 * @type {Set.<treeView.Node>}
+		 * @property {Set.<treeView.Node>}
 		 */
 		this.markedChildren = new Set();
 
@@ -53,7 +53,7 @@ export default class Renderer {
 		 * Set of text nodes which text data changed and may need to be rendered.
 		 *
 		 * @readonly
-		 * @type {Set.<treeView.Node>}
+		 * @property {Set.<treeView.Node>}
 		 */
 		this.markedTexts = new Set();
 	}

+ 3 - 3
packages/ckeditor5-engine/src/treeview/text.js

@@ -8,7 +8,7 @@
 import Node from './node.js';
 
 /**
- * Tree view text.
+ * Tree view text node.
  *
  * @class treeView.Text
  */
@@ -25,7 +25,7 @@ export default class Text extends Node {
 		/**
 		 * Text data.
 		 *
-		 * @type {String}
+		 * @property {String}
 		 * @private
 		 */
 		this._text = text;
@@ -41,7 +41,7 @@ export default class Text extends Node {
 	}
 
 	/**
-	 * Set text data and fire {@link treeView.Node#change change event}.
+	 * Sets text data and fire {@link treeView.Node#change change event}.
 	 *
 	 * @param {String} text Text data.
 	 */

+ 25 - 20
packages/ckeditor5-engine/src/treeview/treeview.js

@@ -9,23 +9,26 @@ import EmitterMixin from '../emittermixin.js';
 import Renderer from './renderer.js';
 import Converter from './converter.js';
 
-import objectUtils from '../lib/lodash/object.js';
+import utils from '../utils.js';
 
 /**
  * TreeView class combines the actual tree of view elements, tree of DOM elements, {@link treeView.Converter converter},
  * {@link treeView.Renderer renderer} and all {@link treeView.Observer observers}. It creates an abstract layer over the
- * content editable area. If you want to simple transform the tree of view elements to the DOM elements you can use
- * {@link treeView.Converter}.
+ * content editable area.
  *
- * @mixins EmitterMixin
+ * If you want to only transform the tree of view elements to the DOM elements you can use the {@link treeView.Converter}.
  *
+ * @mixins EmitterMixin
  * @class treeView.TreeView
  */
 export default class TreeView {
 	/**
-	 * Creates a TreeView based on the HTMLElement. The constructor copy the element name and attributes to create the
-	 * root of the view, but does not copy children, what means the whole content of this root element will be removed
-	 * when you call {@link treeView.TreeView#render}.
+	 * Creates a TreeView based on the HTMLElement.
+	 *
+	 * The constructor copies the element name and attributes to create the
+	 * root of the view, but does not copy its children. This means that the while rendering, the whole content of this
+	 * root element will be removed when you call {@link treeView.TreeView#render} but the root name and attributes will
+	 * be preserved.
 	 *
 	 * @param {HTMLElement} domRoot DOM element in which the tree view should do change.
 	 * @constructor
@@ -34,14 +37,14 @@ export default class TreeView {
 		/**
 		 * Root of the DOM tree.
 		 *
-		 * @type {HTMLElement}
+		 * @property {HTMLElement}
 		 */
 		this.domRoot = domRoot;
 
 		/**
 		 * Set of {@link treeView.Observer observers}.
 		 *
-		 * @type {Set.<treeView.Observer>}
+		 * @property {Set.<treeView.Observer>}
 		 */
 		this.observers = new Set();
 
@@ -49,22 +52,22 @@ export default class TreeView {
 		 * Instance of the {@link treeView.Converter converter} use by {@link treeView.TreeView#renderer renderer} and
 		 * {@link treeView.TreeView#observers observers}.
 		 *
-		 * @type {treeView.Converter}
+		 * @property {treeView.Converter}
 		 */
 		this.converter = new Converter();
 
 		/**
 		 * Root of the view tree.
 		 *
-		 * @type {treeView.Element}
+		 * @property {treeView.Element}
 		 */
-		this.viewRoot = this.converter.domToView( domRoot , { bind: true, withChildren: false } );
+		this.viewRoot = this.converter.domToView( domRoot, { bind: true, withChildren: false } );
 		this.viewRoot.setTreeView( this );
 
 		/**
 		 * Instance of the {@link treeView.TreeView#renderer renderer}.
 		 *
-		 * @type {treeView.Renderer}
+		 * @property {treeView.Renderer}
 		 */
 		this.renderer = new Renderer( this.converter );
 		this.renderer.markToSync( 'CHILDREN', this.viewRoot );
@@ -76,8 +79,8 @@ export default class TreeView {
 	}
 
 	/**
-	 * Add an observer to the set of the observers. This method also {@link treeView.Observer#init initialize} and
-	 * {@link treeView.Observer#attach attach} the observer.
+	 * Adds an observer to the set of observers. This method also {@link treeView.Observer#init initializes} and
+	 * {@link treeView.Observer#attach attaches} the observer.
 	 *
 	 * @param {treeView.Observer} observer Observer to add.
 	 */
@@ -88,7 +91,8 @@ export default class TreeView {
 	}
 
 	/**
-	 * Detach all observers, render changes and reattach observers.
+	 * Renders all changes. In order to avoid triggering the observers (e.g. mutations) all observers all detached
+	 * before rendering and reattached after that.
 	 */
 	render() {
 		for ( let observer of this.observers ) {
@@ -103,15 +107,16 @@ export default class TreeView {
 	}
 }
 
-objectUtils.extend( TreeView.prototype, EmitterMixin );
+utils.mix( TreeView, EmitterMixin );
 
 /**
  * Enum representing type of the change.
+ *
  * Possible values:
  *
- *	* `CHILDREN` - for child list changes,
- *	* `ATTRIBUTES` - for element attributes changes,
- *	* `TEXT` - for text nodes changes.
+ * * `CHILDREN` - for child list changes,
+ * * `ATTRIBUTES` - for element attributes changes,
+ * * `TEXT` - for text nodes changes.
  *
  * @typedef {String} treeView.ChangeType
  */

+ 1 - 1
packages/ckeditor5-engine/tests/utils-diff.js

@@ -28,4 +28,4 @@ describe( 'diff', () => {
 		expect( diff( 'aBc', 'abc' ) ).to.deep.equals( [ 'EQUAL', 'INSERT', 'DELETE', 'EQUAL' ] );
 		expect( diff( 'aBc', 'abc', ( a, b ) => a.toLowerCase() == b.toLowerCase() ) ).to.deep.equals( [ 'EQUAL', 'EQUAL', 'EQUAL' ] );
 	} );
-} );
+} );