Textarea Caret Position

const getCaretCoordinates = require('textarea-caret');

import getCaretCoordinates from 'textarea-caret';

<script src="path/to/textarea-caret/index.js"></script>
<script>
  // Function available as window.getCaretCoordinates
</script>

const getCaretCoordinates = require('textarea-caret');

// Get caret coordinates for a textarea
const textarea = document.querySelector('textarea');
textarea.addEventListener('input', function() {
  const caret = getCaretCoordinates(this, this.selectionEnd);
  console.log(`Caret at (${caret.left}, ${caret.top}) with height ${caret.height}px`);
});

// Get caret coordinates for an input
const input = document.querySelector('input[type="text"]');
const position = input.selectionStart;
const coordinates = getCaretCoordinates(input, position);

// Position a dropdown at the caret
const dropdown = document.getElementById('autocomplete');
dropdown.style.position = 'absolute';
dropdown.style.left = coordinates.left + 'px';
dropdown.style.top = (coordinates.top + coordinates.height) + 'px';

/**
 * Calculate pixel coordinates of text caret position in textarea/input elements
 * @param element - HTML element (must be textarea or input type="text")
 * @param position - Integer caret position (typically selectionStart or selectionEnd)
 * @param options - Optional configuration object
 * @returns Object with top, left, and height properties in pixels
 */
function getCaretCoordinates(element, position, options);

interface CaretCoordinates {
  /** Offset in pixels from element's top edge (including border) */
  top: number;
  /** Offset in pixels from element's left edge (including border) */
  left: number;
  /** Height of the caret in pixels (typically the line height) */
  height: number;
}

// Basic autocomplete positioning
function showAutocomplete(textarea) {
  const position = textarea.selectionStart;
  const coords = getCaretCoordinates(textarea, position);
  
  const dropdown = document.getElementById('autocomplete');
  dropdown.style.left = coords.left + 'px';
  dropdown.style.top = (coords.top + coords.height + 2) + 'px';
  dropdown.style.display = 'block';
}

// Mention system (@username)
function handleAtMention(textarea) {
  const text = textarea.value;
  const cursorPos = textarea.selectionStart;
  
  // Find @ symbol before cursor
  const atIndex = text.lastIndexOf('@', cursorPos - 1);
  if (atIndex !== -1) {
    const coords = getCaretCoordinates(textarea, cursorPos);
    showMentionDropdown(coords.left, coords.top + coords.height);
  }
}

// Debug mode to visualize the mirror div
function debugCaretPosition(element, position) {
  const coords = getCaretCoordinates(element, position, { debug: true });
  console.log('Caret coordinates:', coords);
  // Mirror div remains visible with highlighted caret position
}

// Input field with floating label
function updateFloatingLabel(input) {
  const coords = getCaretCoordinates(input, input.selectionStart);
  const label = document.getElementById('floating-label');
  
  if (input.value.length > 0) {
    label.style.left = coords.left + 'px';
    label.style.top = (coords.top - 20) + 'px';
  }
}

// Throws: 'textarea-caret-position#getCaretCoordinates should only be called in a browser'
try {
  const coords = getCaretCoordinates(element, position);
} catch (error) {
  console.error('Must be called in browser environment:', error.message);
}