Set popup in contenteditable near last symbol [ to the left of caret

Question

Right now my popup follows caret, how can I make the popup stay near the last character [ to the left of caret?

const prev = range.startContainer.textContent
  .slice(0, range.startOffset)
  .lastIndexOf(triggerSymbol, range.startOffset)

const distance = prev != -1 ? range.startOffset - prev : -1

const showPopup = (range: Range, distance: number, prev: number) => {
  if (textbox.value) {
    isVisible.value = true

    const rect = range.getBoundingClientRect()

    modalStyles.value.display = 'block'
    modalStyles.value.top = rect.bottom + 'px'
    modalStyles.value.left = rect.left - distance + 'px'

  }
}

I tried modalStyles.value.left = rect.left - distance + 'px', but distance is just count of symbols after [, not a pixel distance