Configure Live Selection Styling

To configure the styling on Live Selection, pass a style object to the data-live-selection-config attribute.

Styling options:

  • position of presence bubbles
    • To position left: "horizontal":"left"
    • To position right: "horizontal":"left"
  • border highlighted
    • To turn on border highlighting: "border": true
    • To turn off border highlighting: "border": false

Make sure to pass the style object as a JSON String.

/**
 * live selection configuration:
 * position:
 * - horizontal: 'left'
 * border:
 * - border: false
 */
<p data-live-selection-enabled="true" 
   data-live-selection-config='{ "horizontal": "left", "border": false }' 
   contenteditable="true">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, consequatur.
</p>

Was this page helpful?

SetupOverview