HeadlinesBriefing favicon HeadlinesBriefing.com

Construyendo un Editor de Texto Personalizado desde Cero

Hacker News •
×

Inspirado por la frustración con la calidad del software moderno y el sentimiento 'They don't make 'em like Sublime Text anymore', el autor emprendió la construcción de un editor de texto personalizado. El viaje explora tres enfoques de renderizado: <canvas>, contenteditable y <textarea>.

El experimento inicial con <canvas> logró un renderizado de 60–120 FPS pero carecía de interactividad nativa. Implementar características básicas como el posicionamiento del cursor, la escritura y el resaltado de líneas reveló elementos esenciales faltantes: selección de texto, deshacer/rehacer y desplazamiento de desbordamiento. Una solución híbrida usando un <div> oculto para cálculos de desplazamiento nativos mejoró el desplazamiento, pero <canvas> permaneció fundamentalmente inaccesible.

Cambiar a contenteditable="plaintext-only" proporcionó selección nativa, historial de deshacer y accesibilidad de forma gratuita. La API de Selección permitió el renderizado personalizado del cursor, aunque el rendimiento se degradó de manera impredecible con archivos más grandes, especialmente en Chromium.

Finalmente, el enfoque de <textarea> resultó mucho más performante para textos largos. El resaltado de sintaxis se agregó mediante una tercera capa usando Micro Lighter, aunque la nueva API de Rango Opaco podría permitir resaltados nativos. El autor señala que Tree-sitter y el desplazamiento virtualizado podrían mejorar la robustez, pero reconoce que la demostración actual representa 'el 90% de un editor de texto con el 1% de las características'.

Entidades Clave: Empresas: Apple, Chromium, Web Kit, Firefox