AbstractProtectedconstructorCreates a tree view node.
The document instance to which this node belongs.
ReadonlydocumentThe document instance to which this node belongs.
ReadonlyparentParent element. Null by default. Set by module:engine/view/element~ViewElement#_insertChild.
Index of the node in the parent element or null if the node has no parent.
Accessing this property throws an error if this node's parent element does not contain it. This means that view tree got broken.
Node's next sibling, or null if it is the last child.
Node's previous sibling, or null if it is the first child.
Top-most ancestor of the node. If the node has no parent it is the root itself.
Abstract_InternalType of the change.
Changed node.
Optionaldata: { index: number }Additional data.
InternalRemoves node from parent.
Delegates selected events to another module:utils/emittermixin~Emitter. For instance:
emitterA.delegate( 'eventX' ).to( emitterB );
emitterA.delegate( 'eventX', 'eventY' ).to( emitterC );
then eventX is delegated (fired by) emitterB and emitterC along with data:
emitterA.fire( 'eventX', data );
and eventY is delegated (fired by) emitterC along with data:
emitterA.fire( 'eventY', data );
Event names that will be delegated to another emitter.
Fires an event, executing all callbacks registered for it.
The first parameter passed to callbacks is an module:utils/eventinfo~EventInfo object,
followed by the optional args provided in the fire() method call.
The type describing the event. See module:utils/emittermixin~BaseEvent.
The name of the event or EventInfo object if event is delegated.
Additional arguments to be passed to the callbacks.
By default the method returns undefined. However, the return value can be changed by listeners
through modification of the module:utils/eventinfo~EventInfo#return evt.return's property (the event info
is the first param of every callback).
Returns ancestors array of this node.
Optionaloptions: { includeSelf?: boolean; parentFirst?: boolean }Options object.
OptionalincludeSelf?: booleanWhen set to true this node will be also included in parent's array.
OptionalparentFirst?: booleanWhen set to true, array will be sorted from node's parent to root element,
otherwise root element will be the first item in the array.
Array with ancestors.
Returns a module:engine/view/element~ViewElement or module:engine/view/documentfragment~ViewDocumentFragment which is a common ancestor of both nodes.
The second node.
Optionaloptions: { includeSelf?: boolean }Options object.
OptionalincludeSelf?: booleanWhen set to true both nodes will be considered "ancestors" too.
Which means that if e.g. node A is inside B, then their common ancestor will be B.
Gets a path to the node. The path is an array containing indices of consecutive ancestors of this node, beginning from module:engine/view/node~ViewNode#root root, down to this node's index.
const abc = downcastWriter.createText( 'abc' );
const foo = downcastWriter.createText( 'foo' );
const h1 = downcastWriter.createElement( 'h1', null, downcastWriter.createText( 'header' ) );
const p = downcastWriter.createElement( 'p', null, [ abc, foo ] );
const div = downcastWriter.createElement( 'div', null, [ h1, p ] );
foo.getPath(); // Returns [ 1, 3 ]. `foo` is in `p` which is in `div`. `p` starts at offset 1, while `foo` at 3.
h1.getPath(); // Returns [ 0 ].
div.getPath(); // Returns [].
The path.
Checks whether this object is of type module:engine/view/node~ViewNode or its subclass.
This method is useful when processing view objects that are of unknown type. For example, a function may return a module:engine/view/documentfragment~ViewDocumentFragment or a module:engine/view/node~ViewNode that can be either a text node or an element. This method can be used to check what kind of object is returned.
someObject.is( 'element' ); // -> true if this is an element
someObject.is( 'node' ); // -> true if this is a node (a text node or an element)
someObject.is( 'documentFragment' ); // -> true if this is a document fragment
Since this method is also available on a range of model objects, you can prefix the type of the object with
model: or view: to check, for example, if this is the model's or view's element:
viewElement.is( 'view:element' ); // -> true
viewElement.is( 'model:element' ); // -> false
By using this method it is also possible to check a name of an element:
imgElement.is( 'element', 'img' ); // -> true
imgElement.is( 'view:element', 'img' ); // -> same as above, but more precise
Checks whether this object is of type module:engine/view/element~ViewElement or its subclass.
element.is( 'element' ); // -> true
element.is( 'node' ); // -> true
element.is( 'view:element' ); // -> true
element.is( 'view:node' ); // -> true
element.is( 'model:element' ); // -> false
element.is( 'documentSelection' ); // -> false
Assuming that the object being checked is an element, you can also check its module:engine/view/element~ViewElement#name name:
element.is( 'element', 'img' ); // -> true if this is an <img> element
text.is( 'element', 'img' ); -> false
Checks whether this object is of type module:engine/view/attributeelement~ViewAttributeElement.
attributeElement.is( 'attributeElement' ); // -> true
attributeElement.is( 'element' ); // -> true
attributeElement.is( 'node' ); // -> true
attributeElement.is( 'view:attributeElement' ); // -> true
attributeElement.is( 'view:element' ); // -> true
attributeElement.is( 'view:node' ); // -> true
attributeElement.is( 'model:element' ); // -> false
attributeElement.is( 'documentFragment' ); // -> false
Assuming that the object being checked is an attribute element, you can also check its module:engine/view/attributeelement~ViewAttributeElement#name name:
attributeElement.is( 'element', 'b' ); // -> true if this is a bold element
attributeElement.is( 'attributeElement', 'b' ); // -> same as above
text.is( 'element', 'b' ); -> false
Checks whether this object is of type module:engine/view/containerelement~ViewContainerElement or its subclass.
containerElement.is( 'containerElement' ); // -> true
containerElement.is( 'element' ); // -> true
containerElement.is( 'node' ); // -> true
containerElement.is( 'view:containerElement' ); // -> true
containerElement.is( 'view:element' ); // -> true
containerElement.is( 'view:node' ); // -> true
containerElement.is( 'model:element' ); // -> false
containerElement.is( 'documentFragment' ); // -> false
Assuming that the object being checked is a container element, you can also check its module:engine/view/containerelement~ViewContainerElement#name name:
containerElement.is( 'element', 'div' ); // -> true if this is a div container element
containerElement.is( 'contaienrElement', 'div' ); // -> same as above
text.is( 'element', 'div' ); -> false
Checks whether this object is of type module:engine/view/editableelement~ViewEditableElement or its subclass.
editableElement.is( 'editableElement' ); // -> true
editableElement.is( 'element' ); // -> true
editableElement.is( 'node' ); // -> true
editableElement.is( 'view:editableElement' ); // -> true
editableElement.is( 'view:element' ); // -> true
editableElement.is( 'view:node' ); // -> true
editableElement.is( 'model:element' ); // -> false
editableElement.is( 'documentFragment' ); // -> false
Assuming that the object being checked is an editbale element, you can also check its module:engine/view/editableelement~ViewEditableElement#name name:
editableElement.is( 'element', 'div' ); // -> true if this is a div element
editableElement.is( 'editableElement', 'div' ); // -> same as above
text.is( 'element', 'div' ); -> false
Checks whether this object is of type module:engine/view/emptyelement~ViewEmptyElement.
emptyElement.is( 'emptyElement' ); // -> true
emptyElement.is( 'element' ); // -> true
emptyElement.is( 'node' ); // -> true
emptyElement.is( 'view:emptyElement' ); // -> true
emptyElement.is( 'view:element' ); // -> true
emptyElement.is( 'view:node' ); // -> true
emptyElement.is( 'model:element' ); // -> false
emptyElement.is( 'documentFragment' ); // -> false
Assuming that the object being checked is an empty element, you can also check its module:engine/view/emptyelement~ViewEmptyElement#name name:
emptyElement.is( 'element', 'img' ); // -> true if this is a img element
emptyElement.is( 'emptyElement', 'img' ); // -> same as above
text.is( 'element', 'img' ); -> false
Checks whether this object is of type module:engine/view/rawelement~ViewRawElement.
rawElement.is( 'rawElement' ); // -> true
rawElement.is( 'element' ); // -> true
rawElement.is( 'node' ); // -> true
rawElement.is( 'view:rawElement' ); // -> true
rawElement.is( 'view:element' ); // -> true
rawElement.is( 'view:node' ); // -> true
rawElement.is( 'model:element' ); // -> false
rawElement.is( 'documentFragment' ); // -> false
Assuming that the object being checked is a raw element, you can also check its module:engine/view/rawelement~ViewRawElement#name name:
rawElement.is( 'img' ); // -> true if this is an img element
rawElement.is( 'rawElement', 'img' ); // -> same as above
text.is( 'img' ); -> false
Checks whether this object is of type module:engine/view/rooteditableelement~ViewRootEditableElement.
rootEditableElement.is( 'rootElement' ); // -> true
rootEditableElement.is( 'editableElement' ); // -> true
rootEditableElement.is( 'element' ); // -> true
rootEditableElement.is( 'node' ); // -> true
rootEditableElement.is( 'view:editableElement' ); // -> true
rootEditableElement.is( 'view:element' ); // -> true
rootEditableElement.is( 'view:node' ); // -> true
rootEditableElement.is( 'model:element' ); // -> false
rootEditableElement.is( 'documentFragment' ); // -> false
Assuming that the object being checked is a root editable element, you can also check its module:engine/view/rooteditableelement~ViewRootEditableElement#name name:
rootEditableElement.is( 'element', 'div' ); // -> true if this is a div root editable element
rootEditableElement.is( 'rootElement', 'div' ); // -> same as above
text.is( 'element', 'div' ); -> false
Checks whether this object is of type module:engine/view/uielement~ViewUIElement.
uiElement.is( 'uiElement' ); // -> true
uiElement.is( 'element' ); // -> true
uiElement.is( 'node' ); // -> true
uiElement.is( 'view:uiElement' ); // -> true
uiElement.is( 'view:element' ); // -> true
uiElement.is( 'view:node' ); // -> true
uiElement.is( 'model:element' ); // -> false
uiElement.is( 'documentFragment' ); // -> false
Assuming that the object being checked is an ui element, you can also check its module:engine/view/uielement~ViewUIElement#name name:
uiElement.is( 'element', 'span' ); // -> true if this is a span ui element
uiElement.is( 'uiElement', 'span' ); // -> same as above
text.is( 'element', 'span' ); -> false
Checks whether this object is of type module:engine/view/text~ViewText.
text.is( '$text' ); // -> true
text.is( 'node' ); // -> true
text.is( 'view:$text' ); // -> true
text.is( 'view:node' ); // -> true
text.is( 'model:$text' ); // -> false
text.is( 'element' ); // -> false
text.is( 'range' ); // -> false
hecks whether this object is of type module:engine/view/documentfragment~ViewDocumentFragment.
docFrag.is( 'documentFragment' ); // -> true
docFrag.is( 'view:documentFragment' ); // -> true
docFrag.is( 'model:documentFragment' ); // -> false
docFrag.is( 'element' ); // -> false
docFrag.is( 'node' ); // -> false
Checks whether this object is of type module:engine/view/textproxy~ViewTextProxy.
textProxy.is( '$textProxy' ); // -> true
textProxy.is( 'view:$textProxy' ); // -> true
textProxy.is( 'model:$textProxy' ); // -> false
textProxy.is( 'element' ); // -> false
textProxy.is( 'range' ); // -> false
Note: Until version 20.0.0 this method wasn't accepting '$textProxy' type. The legacy 'textProxy' type is still
accepted for backward compatibility.
Checks whether this object is of type module:engine/view/position~ViewPosition.
position.is( 'position' ); // -> true
position.is( 'view:position' ); // -> true
position.is( 'model:position' ); // -> false
position.is( 'element' ); // -> false
position.is( 'range' ); // -> false
Checks whether this object is of type module:engine/view/range~ViewRange.
range.is( 'range' ); // -> true
range.is( 'view:range' ); // -> true
range.is( 'model:range' ); // -> false
range.is( 'element' ); // -> false
range.is( 'selection' ); // -> false
Checks whether this object is of type module:engine/view/selection~ViewSelection or module:engine/view/documentselection~ViewDocumentSelection.
selection.is( 'selection' ); // -> true
selection.is( 'view:selection' ); // -> true
selection.is( 'model:selection' ); // -> false
selection.is( 'element' ); // -> false
selection.is( 'range' ); // -> false
Checks whether this object is of type module:engine/view/documentselection~ViewDocumentSelection.
`docSelection.is( 'selection' ); // -> true
docSelection.is( 'documentSelection' ); // -> true
docSelection.is( 'view:selection' ); // -> true
docSelection.is( 'view:documentSelection' ); // -> true
docSelection.is( 'model:documentSelection' ); // -> false
docSelection.is( 'element' ); // -> false
docSelection.is( 'node' ); // -> false
Checks whether the object is of type module:engine/view/element~ViewElement or its subclass and has the specified name.
Checks whether the object is of type module:engine/view/attributeelement~ViewAttributeElement and has the specified name.
Checks whether the object is of type module:engine/view/containerelement~ViewContainerElement
or its subclass and has the specified name.
Checks whether the object is of type module:engine/view/editableelement~ViewEditableElement
or its subclass and has the specified name.
Checks whether the object is of type module:engine/view/emptyelement~ViewEmptyElement has the specified name.
Checks whether the object is of type module:engine/view/rawelement~ViewRawElement and has the specified name.
Checks whether the object is of type module:engine/view/rooteditableelement~ViewRootEditableElement
and has the specified name.
Checks whether the object is of type module:engine/view/uielement~ViewUIElement and has the specified name.
Returns whether this node is after given node. false is returned if nodes are in different trees (for example,
in different module:engine/view/documentfragment~ViewDocumentFragments).
Node to compare with.
Returns true if the node is in a tree rooted in the document (is a descendant of one of its roots).
Returns whether this node is before given node. false is returned if nodes are in different trees (for example,
in different module:engine/view/documentfragment~ViewDocumentFragments).
Node to compare with.
AbstractisChecks if provided node is similar to this node.
True if nodes are similar.
Registers a callback function to be executed when an event is fired in a specific (emitter) object.
Events can be grouped in namespaces using :.
When namespaced event is fired, it additionally fires all callbacks for that namespace.
// myEmitter.on( ... ) is a shorthand for myEmitter.listenTo( myEmitter, ... ).
myEmitter.on( 'myGroup', genericCallback );
myEmitter.on( 'myGroup:myEvent', specificCallback );
// genericCallback is fired.
myEmitter.fire( 'myGroup' );
// both genericCallback and specificCallback are fired.
myEmitter.fire( 'myGroup:myEvent' );
// genericCallback is fired even though there are no callbacks for "foo".
myEmitter.fire( 'myGroup:foo' );
An event callback can module:utils/eventinfo~EventInfo#stop stop the event and set the module:utils/eventinfo~EventInfo#return return value of the #fire method.
The type describing the event. See module:utils/emittermixin~BaseEvent.
The object that fires the event.
The name of the event.
The function to be called on event.
Optionaloptions: GetCallbackOptions<TEvent>Additional options.
Stops executing the callback on the given event.
Shorthand for #stopListening this.stopListening( this, event, callback ).
The name of the event.
The function to stop being called.
Registers a callback function to be executed when an event is fired.
Shorthand for #listenTo this.listenTo( this, event, callback, options ) (it makes the emitter
listen on itself).
The type descibing the event. See module:utils/emittermixin~BaseEvent.
The name of the event.
The function to be called on event.
Optionaloptions: GetCallbackOptions<TEvent>Additional options.
Registers a callback function to be executed on the next time the event is fired only. This is similar to calling #on followed by #off in the callback.
The type descibing the event. See module:utils/emittermixin~BaseEvent.
The name of the event.
The function to be called on event.
Optionaloptions: GetCallbackOptions<TEvent>Additional options.
Stops delegating events. It can be used at different levels:
Optionalevent: stringThe name of the event to stop delegating. If omitted, stops it all delegations.
Optionalemitter: Emitter(requires event) The object to stop delegating a particular event to.
If omitted, stops delegation of event to all emitters.
Stops listening for events. It can be used at different levels:
Optionalemitter: EmitterThe object to stop listening to. If omitted, stops it for all objects.
Optionalevent: string(Requires the emitter) The name of the event to stop listening to. If omitted, stops it
for all events from emitter.
Optionalcallback: Function(Requires the event) The function to be removed from the call list for the given
event.
Converts ViewNode to plain object and returns it.
ViewNode converted to plain object.
Abstract view node class.
This is an abstract class. Its constructor should not be used directly. Use the module:engine/view/downcastwriter~ViewDowncastWriter or module:engine/view/upcastwriter~ViewUpcastWriter to create new instances of view nodes.