Class

TwoStepCaretMovement (typing)

@ckeditor/ckeditor5-typing/src/twostepcaretmovement

class

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.

    Parameters

    attribute : String

    Name of the attribute to handle.

  • private

    _handleBackwardMovement( data ) → Boolean

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

    Parameters

    data : DomEventData

    Data of the key press.

    Returns

    Boolean

    true when the handler prevented caret movement

  • private

    _handleForwardMovement( data ) → Boolean

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

    Parameters

    data : DomEventData

    Data of the key press.

    Returns

    Boolean

    true when the handler prevented caret movement

  • private

    _overrideGravity()

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

    A shorthand for overrideSelectionGravity.

  • private

    _restoreGravity()

    Restores the gravity using the model writer.

    A shorthand for restoreSelectionGravity.