어떤 텍스트 영역 팝 오버가 브라우저 API에 대해 가르쳐주었습니다

최근 Wysiwyg 편집자 및 팝 오버를 구축하는 데 대한 진보는 브라우저 API에 대한 흥미로운 통찰력을 얻었습니다. 출산 휴가는 마감일의 압력없이 기술적 인 도전에 깊은 다이빙을 할 수있는 완벽한 기회를 제공했습니다. 내 현재 초점은 녹음 백엔드와 전자 기반 채팅 인터페이스가있는 오픈 소스 AI 에이전트 인 "CodeName Goose"에 기여하고 있습니다. Wysiwyg 편집기를 통합하기위한 풀 요청을 제출하여 기존 패키지보다 맞춤 솔루션을 선택하여 번들 크기를 최소화했습니다. 그러나 관리자는 공간 문제를 해결하기 위해 팝버 도구 모음을 제안했습니다.

이 ​​떠 다니는 도구 모음을 만드는 것은 예기치 않게 도전적인 것으로 판명되었습니다. 내 목표는 간단했다 :

텍스트 선택시 팝 오버 도구 모음을 표시하십시오 선택 위에 정확하게 배치하십시오.

여러 줄에 걸쳐 단어 포장을 설명합니다 스크롤 중에 정확한 위치를 유지합니다

텍스트 영역은 독특한 복잡성을 나타 냈습니다. 컨텐츠 조작 및 정확한 포지셔닝을 쉽게 사용할 수있는 표준 HTML 요소와 달리 텍스트 영역은 원시 텍스트 및 기본 선택 API 만 노출시킵니다. 브라우저는 내부적으로 렌더링을 처리합니다 를 설명하려면이 비유를 고려하십시오

표준 HTML 요소 : 가구를 재 배열하고, 품목을 추가하고, 거리를 측정 할 수있는 집. . 텍스트 영역 :

입력 할 수없는 방으로의 창. 내용을보고 수정할 수 있지만 (텍스트 추가/제거) 직접 조작은 불가능합니다. 브라우저는 기본 OS 텍스트 편집을 통해 내부 작업을 관리합니다.

텍스트 영역 이외의 팝 오버 문제 팝 오버 api
• 최신 브라우저는 팝업 요소를 생성하기위한 내장 팝버 API를 제공합니다. 예는 다음과 같습니다.
• 제한 크로스 브라우저 호환성과 사용 편의성에도 불구하고 Popover API에는 다음 제한 사항이 있습니다.
• 속성 제한으로 인해 버튼 요소와 함께 기능합니다. 팝 오버 포지셔닝은 대상 요소에 비해 CSS에 의존합니다. 비판적으로 텍스트 영역과 호환되지 않습니다
Una Kravets의 컨퍼런스 토크를 통해 Popover API를 소개 한 Mark Techson에게 감사합니다. 선택 api
• 사용자 텍스트 선택을 기반으로 팝 오버를 배치하려면 필요합니다.
  선택한 텍스트의 위치. 선택 및 탈수를위한 이벤트 청취자
  • Colby Fayock의 블로그 게시물 인 "선택 API와 반응에서 선택한 텍스트를 공유하는 방법"은
  (를 통해 액세스 가능)를 소개했습니다. 이 API는 선택한 텍스트를 자세히 설명하는 a
  • 객체를 반환합니다.

  객체 내의 Selection API 메소드는 선택의 시작 및 종료 오프셋을 제공합니다. window.getSelection() : 선택의 시작 색인. Selection : 선택의 끝 인덱스 (마지막으로 선택된 문자 이후).

  예를 들어, "Hello, World! Welcome."에서 "World"를 선택하면 = 7 및 = 12를 선택하십시오. 참고 :

  getRangeAt(0) 첫 번째 선택에 액세스합니다. Firefox와 같은 브라우저는 여러 선택 (Ctrl-Click)을 허용하지만 단일 선택 브라우저에서 0 이외의 인덱스에 액세스하면 오류가 발생합니다.

  getRangeAt(0) 는 에 대한 액세스를 제공하며, 이는 선택한 텍스트의 상단, 오른쪽, 하단, 왼쪽 좌표, 너비 및 높이가있는 경계 상자를 반환합니다. 이것은 시연 된 바와 같이 선택보다 정확한 팝 오버 배치를 허용합니다. Selection 그러나이 접근법은 텍스트 영역 내에서 제한됩니다 미러 된 div

  Claude와의 토론을 통해 발견 된 "Mirrored Div"기술은 해결 방법을 제공합니다. 보이지 않는 div는 텍스트 영역을 오버레이하여 내용과 스타일링을 반영합니다. 사용자 상호 작용은이 div 내에서 발생하여 표준 텍스트 영역 모양을 유지하면서 전체 액세스를 제공합니다. Jhey Thompkins의 블로그 게시물 인 "How : 텍스트 커서는 어디에 있습니까?"및
  메소드 (요소의 계산 된 CSS 스타일을 반환 함)는 Overshay Div. 그러나이 미러링은 완벽하지 않습니다
  • 텍스트 포장은 div와 텍스트 영역마다 다를 수 있습니다. startOffset 브라우저 별 간격 및 글꼴 렌더링은 위치 불일치를 유발할 수 있습니다
  • 왜 NPM 패키지를 사용하지 않는가? 많은 패키지는 표준 DOM 요소와 잘 어울리지 만 동일한 기본 제한으로 인해 텍스트 영역으로 어려움을 겪습니다. 내부 렌더링 및 포지셔닝에 대한 액세스가 제한됩니다. endOffset 결론 풍부한 텍스트 상호 작용의 발전에도 불구하고 텍스트 영역으로 작업하는 것은 놀랍게도 복잡합니다. 이 브라우저 API를 탐색하는 것은 보람있는 경험이었습니다. 향후 API는 선택 기반 팝 오버와 같은 작업을 단순화 할 수 있습니다. 대체 솔루션을 만나면 그들에 대해 들었을 것입니다.

위 내용은 어떤 텍스트 영역 팝 오버가 브라우저 API에 대해 가르쳐주었습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!