EmojiPopoverOptions

Interface defining configuration options for emoji picker popovers in the Stripo Email Editor Extensions SDK.

interface EmojiPopoverOptions

Description

The EmojiPopoverOptions interface configures emoji picker popovers that can be anchored to specific elements in the editor. It provides a user-friendly way to insert emojis into email content, supporting search functionality and emoji categories.

Import

import { EmojiPopoverOptions } from '@stripoinc/ui-editor-extensions';

Properties

targetElement

HTML element that the popover anchors to.

targetElement: HTMLElement

Type

HTMLElement

Usage Notes

• Required for computing popover placement
• Should be a visible element in the DOM
• Typically a button or the text input where emoji will be inserted
• Popover positioning is calculated relative to this element

Example

{
    targetElement: container.querySelector('.emoji-button') 
}

---

preferredSides

Ordered array of preferred placement sides for the popover.

preferredSides: PopoverSide[]

Type

PopoverSide[] - Array of placement preferences

PopoverSide Enum

enum PopoverSide {
    TOP = 'top',
    RIGHT = 'right',
    BOTTOM = 'bottom',
    LEFT = 'left'
}

Usage Notes

• Defines fallback positioning when space is constrained
• First available position in the array is used
• If no preferred sides fit, the popover auto-positions
• Order matters - earlier positions have higher priority

Example

{
    preferredSides: [PopoverSide.BOTTOM, PopoverSide.TOP]
}

---

onResult

Callback function invoked when an emoji is selected.

onResult: (response: string) => void

Type

(response: string) => void

Parameters

Parameter	Type	Description
response	string	The selected emoji character

Usage Notes

• Called when user selects an emoji from the picker
• Not called if user closes the popover without selection
• The response is the actual emoji character (e.g., "😀")
• Use this to insert the emoji into your content

Example

{
    onResult: (emoji: string) => {
        console.log('Selected emoji:', emoji);
        // Insert emoji into content
    }
}