Function showAnnotationTextInput

packages/host/src/annotation.ts:487–544

(x: number, y: number)

// ─── Text Tool ────────────────────────────────────────────────

function showAnnotationTextInput(x: number, y: number): void {
  if (annotationTextInput) {
    annotationTextInput.remove();
    annotationTextInput = null;
  }
  if (!annotationOverlay || !annotationCanvas) return;

  const canvasRect = annotationCanvas.getBoundingClientRect();

  const input = document.createElement('input');
  input.type = 'text';
  input.placeholder = 'Type text...';
  input.style.cssText = `
    position: fixed;
    top: ${canvasRect.top + y}px;
    left: ${canvasRect.left + x}px;
    background: rgba(24, 24, 27, 0.9);
    border: 1px solid #3f3f46;
    border-radius: 4px;
    color: ${annotationColor};
    font-size: 16px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 4px 8px;
    outline: none;
    z-index: 1000000;
    min-width: 120px;
  `;

  const textColor = annotationColor;
  const textX = x;
  const textY = y;

  input.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      const text = input.value.trim();
      if (text && annotationCtx && annotationCanvas) {
        // Save undo snapshot
        const snapshot = annotationCtx.getImageData(0, 0, annotationCanvas.width, annotationCanvas.height);
        annotationSnapshots.push(snapshot);

        annotationCtx.fillStyle = textColor;
        annotationCtx.font = '600 16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
        annotationCtx.fillText(text, textX, textY + 16);
      }
      input.remove();
      annotationTextInput = null;
    }
    if (e.key === 'Escape') {
      input.remove();
      annotationTextInput = null;
    }
  });

  annotationOverlay.appendChild(input);
  annotationTextInput = input;
  input.focus();
}