Un desarrollador construye su propio editor de texto con HTML y JavaScript

David Bushell estaba harto. Un artículo sobre cómo ya no hacen editores de texto como Sublime Text le resonó, y pensó: "yo también sé hacer basura, ¿por qué no la mía propia?". Así que se puso a construir un editor de texto en el navegador, y documentó el proceso en su blog.

Su primer intento fue dibujar todo en un elemento <canvas>. Funcionaba, pero era un desastre: sin selección de texto, sin deshacer, sin scroll nativo. Además, el canvas es completamente inaccesible para lectores de pantalla. Así que lo descartó.

La segunda idea fue usar contenteditable con el valor plaintext-only, que permite editar texto plano sin formato. Eso le daba gratis la selección nativa, el historial de deshacer y mucha accesibilidad. Pero encontró problemas de rendimiento con textos largos, sobre todo en Chromium.

Al final, probó con un simple <textarea>, que resultó ser mucho más eficiente. Para el resaltado de sintaxis, añadió una capa extra con <div> y una librería llamada MicroLighter. También menciona APIs nuevas como OpaqueRange (para resaltar en textarea) y EditContext (para mejorar el input en canvas).

Bushell reconoce que su prototipo es "el 90% de un editor de texto con el 1% de las funciones". Le falta de todo: indentación con tabulador (por ahora inserta dos espacios), virtualización del scroll, y un manejo correcto de caracteres Unicode. De hecho, termina su artículo con un ejemplo de cómo JavaScript cuenta los caracteres: "🍋‍🟩".length devuelve 5, pero con Intl.Segmenter se puede contar correctamente 1.

El proyecto queda archivado "para un día lluvioso". Pero demuestra que, con un poco de ingenio, se puede montar un editor decente sin necesidad de un framework enorme. La pregunta es si alguien llevará esta idea a un producto completo.