InternalCreates new selection instance.
Note: The selection constructor is available as a factory method:
View#createSelection(),UpcastWriter#createSelection().// Creates empty selection without ranges.
const selection = writer.createSelection();
// Creates selection at the given range.
const range = writer.createRange( start, end );
const selection = writer.createSelection( range );
// Creates selection at the given ranges
const ranges = [ writer.createRange( start1, end2 ), writer.createRange( star2, end2 ) ];
const selection = writer.createSelection( ranges );
// Creates selection from the other selection.
const otherSelection = writer.createSelection();
const selection = writer.createSelection( otherSelection );
// Creates selection from the document selection.
const selection = writer.createSelection( editor.editing.view.document.selection );
// Creates selection at the given position.
const position = writer.createPositionFromPath( root, path );
const selection = writer.createSelection( position );
// Creates collapsed selection at the position of given item and offset.
const paragraph = writer.createContainerElement( 'paragraph' );
const selection = writer.createSelection( paragraph, offset );
// Creates a range inside an {@link module:engine/view/element~ViewElement element} which starts before the
// first child of that element and ends after the last child of that element.
const selection = writer.createSelection( paragraph, 'in' );
// Creates a range on an {@link module:engine/view/item~ViewItem item} which starts before the item and ends
// just after the item.
const selection = writer.createSelection( paragraph, 'on' );
Selection's constructor allow passing additional options (backward, fake and label) as the last argument.
// Creates backward selection.
const selection = writer.createSelection( range, { backward: true } );
Fake selection does not render as browser native selection over selected elements and is hidden to the user. This way, no native selection UI artifacts are displayed to the user and selection over elements can be represented in other way, for example by applying proper CSS class.
Additionally fake's selection label can be provided. It will be used to describe fake selection in DOM (and be properly handled by screen readers).
// Creates fake selection with label.
const selection = writer.createSelection( range, { fake: true, label: 'foo' } );
Selection anchor. Anchor may be described as a position where the selection starts. Together with #focus focus they define the direction of selection, which is important when expanding/shrinking selection. Anchor is always the start or end of the most recent added range. It may be a bit unintuitive when there are multiple ranges in selection.
module:engine/view/editableelement~ViewEditableElement ViewEditableElement instance that contains this selection, or null
if the selection is not inside an editable element.
Specifies whether the #focus precedes #anchor.
Returns whether the selection is collapsed. Selection is collapsed when there is exactly one range which is collapsed.
Returns number of ranges in selection.
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 copy of the first position in the selection. First position is the position that
module:engine/view/position~ViewPosition#isBefore is before any other position in the selection ranges.
Returns null if no ranges are added to selection.
Returns copy of the first range in the selection. First range is the one which
module:engine/view/range~ViewRange#start start position
module:engine/view/position~ViewPosition#isBefore is before start
position of all other ranges (not to confuse with the first range added to the selection).
Returns null if no ranges are added to selection.
Returns copy of the last position in the selection. Last position is the position that
module:engine/view/position~ViewPosition#isAfter is after any other position in the selection ranges.
Returns null if no ranges are added to selection.
Returns copy of the last range in the selection. Last range is the one which module:engine/view/range~ViewRange#end end
position module:engine/view/position~ViewPosition#isAfter is after end position of all other ranges (not to confuse
with the last range added to the selection). Returns null if no ranges are added to selection.
Returns an iterable that contains copies of all ranges added to the selection.
Returns the selected element. module:engine/view/element~ViewElement Element is considered as selected if there is only
one range in the selection, and that range contains exactly one element.
Returns null if there is no selected element.
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.
Checks whether, this selection is equal to given selection. Selections are equal if they have same directions, same number of ranges and all ranges from one selection equal to a range from other selection.
Selection to compare with.
true if selections are equal, false otherwise.
Checks whether this selection is similar to given selection. Selections are similar if they have same directions, same number of ranges, and all module:engine/view/range~ViewRange#getTrimmed trimmed ranges from one selection are equal to any trimmed range from other selection.
Selection to compare with.
true if selections are similar, false otherwise.
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.
Moves #focus to the specified location.
The location can be specified in the same form as module:engine/view/view~EditingView#createPositionAt view.createPositionAt() parameters.
Optionaloffset: ViewPositionOffsetOffset or one of the flags. Used only when first parameter is a module:engine/view/item~ViewItem view item.
Sets this selection's ranges and direction to the specified location based on the given module:engine/view/selection~ViewSelectable selectable.
// Sets selection to the given range.
const range = writer.createRange( start, end );
selection.setTo( range );
// Sets selection to given ranges.
const ranges = [ writer.createRange( start1, end2 ), writer.createRange( star2, end2 ) ];
selection.setTo( range );
// Sets selection to the other selection.
const otherSelection = writer.createSelection();
selection.setTo( otherSelection );
// Sets selection to contents of ViewDocumentSelection.
selection.setTo( editor.editing.view.document.selection );
// Sets collapsed selection at the given position.
const position = writer.createPositionAt( root, path );
selection.setTo( position );
// Sets collapsed selection at the position of given item and offset.
selection.setTo( paragraph, offset );
Creates a range inside an module:engine/view/element~ViewElement element which starts before the first child of that element and ends after the last child of that element.
selection.setTo( paragraph, 'in' );
Creates a range on an module:engine/view/item~ViewItem item which starts before the item and ends just after the item.
selection.setTo( paragraph, 'on' );
// Clears selection. Removes all ranges.
selection.setTo( null );
Selection#setTo() method allow passing additional options (backward, fake and label) as the last argument.
// Sets selection as backward.
selection.setTo( range, { backward: true } );
Fake selection does not render as browser native selection over selected elements and is hidden to the user. This way, no native selection UI artifacts are displayed to the user and selection over elements can be represented in other way, for example by applying proper CSS class.
Additionally fake's selection label can be provided. It will be used to describe fake selection in DOM (and be properly handled by screen readers).
// Creates fake selection with label.
selection.setTo( range, { fake: true, label: 'foo' } );
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 ViewSelection instance to plain object and returns it.
ViewSelection instance converted to plain object.
Class representing an arbirtary selection in the view. See also module:engine/view/documentselection~ViewDocumentSelection.
New selection instances can be created via the constructor or one these methods:
View#createSelection(),UpcastWriter#createSelection().A selection can consist of module:engine/view/range~ViewRange ranges that can be set by using the module:engine/view/selection~ViewSelection#setTo
Selection#setTo()method.