Was den Textbereich Popovers mir über Browser -APIs beigebracht hat

Mein jüngster Ausflug in den Aufbau von Wysiwyg -Redakteuren und Popovers ergab einige faszinierende Einblicke in die Browser -APIs. Der Mutterschaftsurlaub bot die perfekte Gelegenheit für tiefe Tauchgänge in technische Herausforderungen ohne den Druck der Fristen.

Mein aktueller Fokus liegt auf "Codename Goose", einem Open-Source-AI-Agenten mit einem Rost-Backend und einer elektronenbasierten Chat-Schnittstelle. Ich habe eine Pull -Anfrage zur Integration eines WYSIWYG -Editors eingereicht, der für eine benutzerdefinierte Lösung über vorhandene Pakete entschied, um die Bündelgröße zu minimieren. Die Betreuer schlugen jedoch eine Popover -Symbolleiste vor, um sich auf Platzbedenken auszuräumen.

Die Erstellung dieser schwimmenden Symbolleiste erwies sich als unerwartet herausfordernd. Meine Ziele waren unkompliziert:

• Zeigen Sie eine Popover -Symbolleiste bei Textauswahl an.
• genau positionieren Sie es über der Auswahl.
• Berücksichtigen
Eine genaue Positionierung während des Scrollens beibehalten.

Textbereiche zeigten einzigartige Komplexitäten. Im Gegensatz zu Standard -HTML -Elementen, bei denen Inhaltsmanipulation und präzise Positionierung leicht verfügbar sind, enthüllen Textbereiche nur Rohtext und grundlegende APIs aus der Auswahl. Der Browser behandelt das Rendering intern.

Um zu veranschaulichen, betrachten Sie diese Analogie:

• Standard -HTML -Elemente: Ein Haus, in dem Sie Möbel neu ordnen, Gegenstände hinzufügen und Entfernungen messen können.
• Textbereiche: Ein Fenster in einen Raum, den Sie nicht eingeben können. Sie können den Inhalt sehen und ändern (Text hinzufügen/entfernen), aber direkte Manipulation ist unmöglich. Der Browser verwaltet die internen Arbeiten über native Betriebssystemtextbearbeitung.

Popover -Herausforderungen jenseits der Textbereiche

Die Popover -API

moderne Browser bieten eine integrierte Popover-API für die Erstellung von Pop-up-Elementen. Hier ist ein Beispiel:

Einschränkungen

Trotz seiner Querbrowser-Kompatibilität und Benutzerfreundlichkeit hat die Popover-API Einschränkungen:

Es funktioniert nur mit Tastelelementen aufgrund der
• -Treiberbeschränkung. popovertarget
Popover -Positionierung basiert auf CSS relativ zum Zielelement.
kritisch, es ist unvereinbar mit Textbereichen.

Dank Mark Techson, der mich durch die Konferenzgespräch von UNA Kravets in die Popover -API vorstellte, "weniger Kreuz, mehr Strom: Nutzen Sie die Kraft der Webplattform."

Die Auswahl -API

Um den Popover basierend auf der Auswahl der Benutzertext zu positionieren, brauchte ich:

• Die Position des ausgewählten Textes.
• Ereignishörer zur Auswahl und Entwählung.

Colby Fayocks Blog -Beitrag "So teilen Sie ausgewählter Text in React mit der Auswahl -API", stellte mich in die Selection API vor (über window.getSelection() zugänglich). Diese API gibt ein Selection Objekt zurück, das den ausgewählten Text beschreibt.

getRangeAt(0)

Die Methode getRangeAt(0) im Objekt Selection liefert die Start- und End -Offsets der Auswahl:

• startOffset: Der Startindex der Auswahl.
• endOffset: Der Endindex der Auswahl (nach dem letzten ausgewählten Zeichen).

Zum Beispiel in "Hallo, Welt! Willkommen", wählt "welt" aus startOffset = 7 und endOffset = 12.

Hinweis: getRangeAt(0) Zugriff auf die erste Auswahl. Browser wie Firefox ermöglichen mehrere Auswahlen (Strg-Klick), die Zugriff auf Indizes über 0 in Browsern mit einer Auswahl führt jedoch zu Fehlern.

getBoundingClientRect()

getRangeAt(0) bietet Zugriff auf getBoundingClientRect(), das ein Begrenzungsfeld mit den oberen, rechten, unten, linken, linken Koordinaten des Textes und der Höhe des ausgewählten Textes zurückgibt. Dies ermöglicht eine präzise Popover -Platzierung über der Auswahl, wie gezeigt:

Dieser Ansatz ist jedoch in Textbereichen begrenzt.

Die gespiegelte div

Die "Spiegelgespiegelte Div" -Technik, die durch Diskussionen mit Claude entdeckt wurde, bietet eine Problemumgehung. Ein unsichtbarer Div überlagert den Textbereich und spiegelt seinen Inhalt und das Styling wider. Benutzerinteraktionen treten innerhalb dieses Divs auf und bieten einen vollständigen Zugriff bei der Beibehaltung eines Aussehens von Standardtexten. Selection API

jhey Thompkins Blog -Beitrag "Wie ist der Textcursor?", Und die

-Methode (die die berechneten CSS -Stile eines Elements zurückgibt) waren maßgeblich daran beteiligt, das Erscheinungsbild des Textbereichs im Overlay Div zu entsprechen. getComputedStyle()

Diese Spiegelung ist jedoch nicht perfekt:

Textverpackung kann zwischen Div und Textbereich unterscheiden.
Browserspezifischer Abstand und Schriftart der Schrift können Positionsdiskrepanzen verursachen.

Warum nicht ein NPM -Paket verwenden?

Viele Pakete funktionieren gut mit Standarddom -Elementen, kämpfen jedoch mit Textbereichen aufgrund der gleichen grundlegenden Einschränkungen: eingeschränkter Zugriff auf interne Rendering und Positionierung.

Schlussfolgerung

Trotz der Fortschritte bei der Interaktion mit reichhaltigen Text bleibt die Arbeit mit Textbereichen überraschend komplex. Die Erforschung dieser Browser -APIs war eine lohnende Erfahrung. Zukünftige APIs können Aufgaben wie ausgewählte Popovers vereinfachen. Wenn Sie auf alternative Lösungen gestoßen sind, würde ich mich freuen, von ihnen zu hören.

Das obige ist der detaillierte Inhalt vonWas den Textbereich Popovers mir über Browser -APIs beigebracht hat. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!