ブラウザAPIについて教えてくれたテキスト領域のポップオーバー

Wysiwygの編集者とポップオーバーの構築に関する最近の進出は、ブラウザAPIに対する魅力的な洞察をもたらしました。 出産休暇は、締め切りの圧力なしに、深い潜らのための技術的な課題への絶好の機会を提供しました。 私の現在の焦点は、錆びたバックエンドと電子ベースのチャットインターフェイスを備えたオープンソースAIエージェントである「コードネームグース」に貢献しています。 WysiWygエディターを統合するためのプルリクエストを送信し、バンドルサイズを最小限に抑えるために既存のパッケージ上のカスタムソリューションを選択しました。 しかし、メンテナーは、スペースの懸念に対処するためのポップオーバーツールバーを提案しました。 このフローティングツールバーを作成することは、予想外に挑戦的であることが判明しました。私の目標は簡単でした：

テキストの選択時にポップオーバーツールバーを表示します。

は、選択の上に正確に配置します。

• 複数の行にわたって単語のラッピングを説明します。
• スクロール中に正確な位置決めを維持します
• テキスト領域は、ユニークな複雑さを提示しました。コンテンツの操作と正確な位置決めが容易に利用できる標準のHTML要素とは異なり、テキスト領域は生のテキストと基本選択APIのみを公開します。 ブラウザは、内部でレンダリングを処理します。
• 説明するには、この類推を考慮してください：

標準のHTML要素：

家具を再配置し、アイテムを追加し、距離を測定できる家。

テキスト領域：
• 入場できない部屋への窓。コンテンツを確認して変更することができます（テキストを追加/削除します）が、直接操作は不可能です。ブラウザは、ネイティブOSテキスト編集を介して内部ワーキングを管理します。 テキスト領域を超えてポップオーバーの課題
• ポップオーバーAPI 最新のブラウザは、ポップアップ要素を作成するためのビルトインポップオーバーAPIを提供します。 例を次に示します：

制限

クロスブラウザーの互換性と使いやすさにもかかわらず、ポップオーバーAPIには制限があります。

ポップオーバーポジショニングは、ターゲット要素に比べてCSSに依存しています。

批判的に、それはテキスト領域と互換性がありません。

Una Kravetsのカンファレンストークを通じてポップオーバーAPIを紹介してくれたMark Techsonに感謝します。
• 選択apipopovertarget
ユーザーテキストの選択に基づいてポップオーバーを配置するには、必要でした：
• • 選択されたテキストの位置。
  選択と解釈のためのイベントリスナー。
  Colby Fayockのブログ投稿、「選択されたテキストを選択して選択したAPIと共有する方法」は、（

  からアクセス可能）を紹介しました。 このAPIは、選択したテキストを詳述してSelection APIオブジェクトを返します。 window.getSelection() Selection

  オブジェクト内のgetRangeAt(0)メソッドは、選択の開始と終了のオフセットを提供します。

  getRangeAt(0)：選択の開始インデックス。Selection

  ：選択の終了インデックス（最後に選択された文字の後）。
  • startOffset たとえば、「hello、world！welcome」では、「world」を選択すると
  = 7および
  • = 12.endOffset
  メモ：

  startOffset最初の選択にアクセスします。 Firefoxのようなブラウザは複数の選択を許可します（Ctrl-Click）が許可されますが、単一選択ブラウザーで0を超えるインデックスにアクセスすると、エラーが発生します。 endOffset

  は、選択したテキストの上部、右、下、左座標、幅、および高さで境界ボックスを返します。 これにより、選択したように、選択の上に正確なポップオーバー配置が可能になります。 getRangeAt(0)

  ただし、このアプローチはテキスト領域内で制限されています

  ミラーリングdivgetBoundingClientRect() クロードとの議論を通じて発見された「ミラーリングされたdiv」テクニックは、回避策を提供します。 目に見えないdivがテキスト領域にオーバーレイし、そのコンテンツとスタイリングを反映しています。 ユーザーのインタラクションはこのDIV内で発生し、標準のテキストエリアの外観を維持しながら完全な

  アクセスを提供します。

  Jhey Thompkinsのブログ投稿、「方法：テキストカーソルはどこですか？」、getRangeAt(0)メソッド（要素の計算されたCSSスタイルを返す）は、オーバーレイdiv。getBoundingClientRect()

  ただし、このミラーリングは完璧ではありません：

  テキストラッピングは、divとテキスト領域の間で異なる場合があります。

  ブラウザ固有の間隔とフォントレンダリングは、位置の不一致を引き起こす可能性があります

  Selection API

  NPMパッケージを使用してみませんか？

  getComputedStyle()多くのパッケージは標準的なDOM要素でうまく機能しますが、同じ基本的な制限のためにテキスト領域と格闘しています。内部レンダリングと位置へのアクセスが制限されています。

  結論
  豊かなテキストの相互作用の進歩にもかかわらず、テキスト領域との連携は驚くほど複雑なままです。 これらのブラウザAPIを探索することはやりがいのある経験でした。 将来のAPIは、選択ベースのポップオーバーなどのタスクを簡素化する可能性があります。 代替ソリューションに遭遇した場合は、それらについて聞いてくれてありがとう。

以上がブラウザAPIについて教えてくれたテキスト領域のポップオーバーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。