CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Class

TwoStepCaretMovement (typing)

@ckeditor/ckeditor5-typing/src/twostepcaretmovement

class
See source

This plugin enables the two-step caret (phantom) movement behavior for registered attributes on arrow right (→) and left (←) key press.

Thanks to this (phantom) caret movement the user is able to type before/after as well as at the beginning/end of an attribute.

Note: This plugin support right–to–left (Arabic, Hebrew, etc.) content by mirroring its behavior but for the sake of simplicity examples showcase only left–to–right use–cases.

Forward movement

"Entering" an attribute:

When this plugin is enabled and registered for the a attribute and the selection is right before it (at the attribute boundary), pressing the right arrow key will not move the selection but update its attributes accordingly:

  • When enabled:

    foo{}<$text a="true">bar</$text>

    →

    foo<$text a="true">{}bar</$text>

  • When disabled:

    foo{}<$text a="true">bar</$text>

    →

    foo<$text a="true">b{}ar</$text>
"Leaving" an attribute:

  • When enabled:

    <$text a="true">bar{}</$text>baz

    →

    <$text a="true">bar</$text>{}baz

  • When disabled:

    <$text a="true">bar{}</$text>baz

    →

    <$text a="true">bar</$text>b{}az

Backward movement

  • When enabled:

    <$text a="true">bar</$text>{}baz

    ←

    <$text a="true">bar{}</$text>baz

  • When disabled:

    <$text a="true">bar</$text>{}baz

    ←

    <$text a="true">ba{}r</$text>b{}az

Multiple attributes

  • When enabled and many attributes starts or ends at the same position:

    <$text a="true" b="true">bar</$text>{}baz

    ←

    <$text a="true" b="true">bar{}</$text>baz

  • When enabled and one procedes another:

    <$text a="true">bar</$text><$text b="true">{}bar</$text>

    ←

    <$text a="true">bar{}</$text><$text b="true">bar</$text>

Filtering

Properties

Methods

  • constructor()

  • registerAttribute( attribute )

    Registers a given attribute for the two-step caret movement.

    See source

    Parameters

    attribute : String

    Name of the attribute to handle.

  • _handleBackwardMovement( data ) → Boolean

    private

    Updates the document selection and the view according to the two–step caret movement state when moving backwards. Executed upon keypress in the View.

    See source

    Parameters

    data : DomEventData

    Data of the key press.

    Returns

    Boolean

    true when the handler prevented caret movement

  • _handleForwardMovement( data ) → Boolean

    private

    Updates the document selection and the view according to the two–step caret movement state when moving forwards. Executed upon keypress in the View.

    See source

    Parameters

    data : DomEventData

    Data of the key press.

    Returns

    Boolean

    true when the handler prevented caret movement

  • _overrideGravity()

    private

    Overrides the gravity using the model writer and stores the information about this fact in the _overrideUid.

    See source

    A shorthand for overrideSelectionGravity.

  • _restoreGravity()

    private

    Restores the gravity using the model writer.

    See source

    A shorthand for restoreSelectionGravity.