Inspiré par la frustration face à la qualité des logiciels modernes et par le sentiment 'They don't make 'em like Sublime Text anymore', l'auteur s'est lancé dans la création d'un éditeur de texte personnalisé. Le parcours explore trois approches de rendu : <canvas>, contenteditable et <textarea>.

L'expérience initiale avec <canvas> a atteint un rendu de 60–120 FPS mais manquait d'interactivité native. L'implémentation de fonctionnalités de base comme le positionnement du curseur, la frappe et la mise en surbrillance des lignes a révélé des éléments essentiels manquants : la sélection de texte, l'annulation/rétablissement et le défilement de débordement. Une solution hybride utilisant un <div> caché pour les calculs de défilement natifs a amélioré le défilement, mais <canvas> restait fondamentalement inaccessible.

Le passage à contenteditable="plaintext-only" a offert une sélection native, un historique d'annulation et une accessibilité gratuits. L'API de sélection a permis un rendu personnalisé du curseur, bien que les performances se soient dégradées de manière imprévisible avec des fichiers plus volumineux, notamment dans Chromium.

Enfin, l'approche <textarea> s'est révélée bien plus performante pour les textes longs. La mise en évidence de la syntaxe a été ajoutée via une troisième couche utilisant Micro Lighter, bien que la nouvelle API de plage opaque puisse permettre des mises en évidence natives. L'auteur souligne que Tree-sitter et le défilement virtualisé pourraient améliorer la robustesse, mais reconnaît que la démonstration actuelle représente « 90 % d'un éditeur de texte avec 1 % des fonctionnalités ».

Entités clés : Entreprises : Apple, Chromium, Web Kit, Firefox

FAQ : Pourquoi <textarea> est-il plus performant que contenteditable pour les fichiers texte volumineux ?

<textarea> est un contrôle de formulaire natif optimisé par les navigateurs pour la saisie de texte brut, évitant la surcharge complexe de mise en page et de rendu de contenteditable, qui doit gérer la mise en forme de texte riche, la vérification orthographique et les structures HTML arbitraires même en mode plaintext-only.