Quelle zone de texte les popovers m'ont appris sur les API du navigateur

Mon incursion récente dans la construction de rédacteurs et de popovers Wysiwyg a donné des informations fascinantes sur les API du navigateur. Le congé de maternité a fourni l'occasion idéale pour les plongées profondes dans les défis techniques sans la pression des délais.

Mon objectif actuel consiste à «Codename Goose», un agent d'IA open source avec un backend rouille et une interface de chat à base d'électrons. J'ai soumis une demande de traction pour intégrer un éditeur WYSIWYG, optant pour une solution personnalisée sur les packages existants pour minimiser la taille du bundle. Cependant, les mainteneurs ont suggéré une barre d'outils à popover pour répondre aux préoccupations de l'espace.

La création de cette barre d'outils flottante s'est avérée difficile de façon inattendue. Mes objectifs étaient simples:

• Afficher une barre d'outils à popover lors de la sélection de texte.
• Positionnez-le avec précision au-dessus de la sélection.
• compte pour l'enveloppe des mots sur plusieurs lignes.
• Maintenir un positionnement précis pendant le défilement.

Les zones de texte présentaient des complexités uniques. Contrairement aux éléments HTML standard, où la manipulation du contenu et le positionnement précis sont facilement disponibles, les zones de texte exposent uniquement le texte brut et les API de sélection de base. Le navigateur gère le rendu en interne.

pour illustrer, considérez cette analogie:

• Éléments HTML standard: Une maison où vous pouvez réorganiser les meubles, ajouter des articles et mesurer les distances.
• Zones de texte: Une fenêtre dans une pièce que vous ne pouvez pas entrer. Vous pouvez voir et modifier le contenu (ajouter / supprimer du texte), mais la manipulation directe est impossible. Le navigateur gère le fonctionnement interne via l'édition de texte du système d'exploitation natif.

Les défis de la popover au-delà des zones de texte

L'API Popover

Les navigateurs modernes offrent une API popover intégrée pour créer des éléments pop-up. Voici un exemple:

limitations

Malgré sa compatibilité et sa facilité d'utilisation de son arrosage, l'API Popover a des limites:

• Il fonctionne uniquement avec des éléments de bouton en raison de la restriction d'attribut popovertarget.
• Le positionnement de la popover repose sur CSS par rapport à l'élément cible.
• De manière critique, elle est incompatible avec les zones de texte.

Merci à Mark Techson, qui m'a présenté l'API Popover via la conférence de l'UNA Kravets, "moins Cruft, plus de puissance: tirer parti de la puissance de la plate-forme Web."

L'API de sélection

Pour positionner le popover en fonction de la sélection du texte de l'utilisateur, j'avais besoin:

• la position du texte sélectionné.
• Écouteurs d'événements pour la sélection et la désélection.

Article de blog de Colby Fayock, "Comment partager le texte sélectionné dans React with the Sélection API", m'a présenté le Selection API (accessible via window.getSelection()). Cette API renvoie un objet Selection détaillant le texte sélectionné.

getRangeAt(0)

La méthode getRangeAt(0) dans l'objet Selection fournit les décalages de démarrage et de fin de la sélection:

• startOffset: L'indice débutant de la sélection.
• endOffset: l'indice de fin de la sélection (après le dernier caractère sélectionné).

Par exemple, dans "Hello, World! Bienvenue.", La sélection "Monde" donne startOffset = 7 et endOffset = 12.

Remarque: getRangeAt(0) accède à la première sélection. Les navigateurs comme Firefox permettent plusieurs sélections (CTRL-CLICK), mais l'accès aux index au-delà de 0 dans les navigateurs à sélection unique entraîne des erreurs.

getBoundingClientRect()

getRangeAt(0) donne accès à getBoundingClientRect(), qui renvoie une boîte de délimitation avec les coordonnées, la largeur et la hauteur du haut sélectionné, de la droite, du bas, de la largeur gauche. Cela permet un placement de popover précis au-dessus de la sélection, comme démontré:

Cependant, cette approche est limitée dans les zones de texte.

la div miroir

La technique "DIV miroir", découverte à travers des discussions avec Claude, propose une solution de contournement. Une div invisible superpose la zone de texte, reflétant son contenu et son style. Les interactions utilisateur se produisent dans cette div, offrant un accès complet Selection API tout en maintenant une apparence de zone de texte standard.

Article de blog de Jhey Thompkins, "Comment: Où est le curseur de texte?", Et la méthode getComputedStyle() (qui renvoie les styles CSS calculés d'un élément) a contribué à correspondre précisément à l'apparition de la zone de texte dans la superposition Div.

Cependant, cette miroir n'est pas parfaite:

• L'emballage de texte peut différer entre la div et la zone de texte.
• Espacement et rendu de police spécifiques au navigateur peuvent provoquer des écarts de position.

Pourquoi ne pas utiliser un package NPM?

De nombreux packages fonctionnent bien avec les éléments DOM standard, mais luttent avec les zones de texte en raison des mêmes limitations fondamentales: accès restreint au rendu interne et au positionnement.

Conclusion

Malgré les progrès de l'interaction riche en texte, travailler avec des zones de texte reste étonnamment complexe. Explorer ces API de navigateur a été une expérience enrichissante. Les futurs API peuvent simplifier les tâches comme les popovers basées sur la sélection. Si vous avez rencontré des solutions alternatives, j'apprécierais d'en entendre parler.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!