Lanzamiento de Wordgard 0.1

• Wordgard 0.1 es una nueva biblioteca de editor de texto enriquecido en JavaScript, creada a partir de 9 años de experiencia desde la estabilización de ProseMirror e influida por el diseño de CodeMirror 6
• En lugar de convertir el ProseMirror existente en 2.0 o añadirle cosas a 1.x, se rediseñó con una nueva API sin carga de compatibilidad y un nombre aparte
• El diseño central usa un modelo basado en secciones de cambio en lugar de steps, y combina tipos de nodos y marcas independientes con un sistema de extensiones tipo facet al estilo CodeMirror
• Reduce la dependencia del comportamiento de selección del navegador al manejar directamente la selección con puntero y teclado, pero mantiene la selección táctil implementada por el navegador debido a problemas con los menús contextuales nativos
• Se puede instalar desde npm como wordgard, y ya están disponibles la documentación y el manual de referencia, pero permanecerá un tiempo en versiones 0.x mientras se recopila feedback y se corrigen errores

---

Naturaleza y estado de distribución de Wordgard

• Wordgard es un nuevo intento de sistema de edición de texto enriquecido al estilo ProseMirror
• Incorpora lo aprendido durante los 9 años desde la estabilización de ProseMirror y está muy influido por el rediseño de la versión 6 de CodeMirror
• Es una biblioteca JavaScript que muestra la interfaz del editor mediante el DOM del navegador, y su licencia es MIT
• El código está publicado en un servidor Forgejo
• Se puede instalar desde el registro de npm como wordgard, y el sitio web explica cómo usarlo

Por qué se creó un sistema nuevo en lugar de cambiar ProseMirror

• ProseMirror seguirá recibiendo mantenimiento, pero algunas decisiones de diseño siguen siendo cosas que, vistas hoy, deberían haberse hecho de otra manera
• Si se lanzara un ProseMirror 2.0 con interfaces incompatibles, podría volverse ambiguo qué quiere decir la gente cuando habla de “ProseMirror”
• Si se añadieran ideas nuevas a ProseMirror 1.x manteniendo compatibilidad hacia atrás, la estructura podría terminar llena de compromisos
• Wordgard toma muchas ideas de ProseMirror, pero rediseña desde cero su interfaz de programación, sin tener en cuenta la compatibilidad

Representación de cambios: modelo basado en secciones en lugar de steps

• Los steps de ProseMirror dividen un cambio en varias operaciones atómicas, y cada step se aplica al documento producido por el step anterior
• Este enfoque funciona, pero ajustar posiciones entre varios steps y rastrear los rangos modificados es complejo y resulta incómodo de manejar
• Wordgard usa un modelo más simple basado en la representación de cambios de CodeMirror y en el formato “delta” de ShareJS
  • Si la longitud del documento es 10 e insertas L en la posición 4, se representa como [keep 4] [replace 0 with "L"] [keep 6]
  • Si eliminas los dos primeros caracteres, se representa como [replace 2 with ""] [keep 8]
• Para procesar texto enriquecido, agrega secciones de cambio, lo que permite añadir o quitar marcas como énfasis, estilo de enlace o texto alternativo de imágenes manteniendo la estructura
  • Si pones en negrita la palabra de la posición 3 a la 6, se representa como [keep 3] [update 3 +bold] [keep 4]
• Wordgard usa el mismo índice por conteo de tokens que ProseMirror para manejar las posiciones del documento como una secuencia plana de tokens de apertura y cierre de nodos, y tokens hoja
• Una transacción individual siempre tiene un solo cambio, lo que facilita componer cambios, analizarlos e inferir información sobre ellos
• Admite una transformación operacional limitada para fusionar varios cambios expresados desde el mismo documento inicial
  • Permite expresar de forma más cómoda transacciones con varios cambios
  • Puede usarse para edición colaborativa y para implementar un historial de undo que revierta solo algunos cambios

Cómo mantiene una estructura de documento válida

• Un documento de Wordgard no es una simple secuencia de tokens, sino que debe ser una estructura de árbol balanceada
• Por ejemplo, eliminar un token de cierre de nodo puede romper el balance de tokens y producir un cambio que no se puede aplicar
• El código que genera conjuntos de cambios debe verificar y ajustar los cambios para que el resultado sea una estructura de documento válida
• También en la transformación operacional, el cambio transformado no debe invalidar el documento
• El modelo de cambios de Wordgard deriva un fix-up change que corrige el resultado combinado durante la transformación
  • Usa las entradas con cuidado para producir la misma corrección tanto para A-over-B como para B-over-A
  • Sin corrección, ambos órdenes pueden producir el mismo documento, pero potencialmente inválido
  • Al componer la misma corrección, ambos órdenes convergen al mismo documento válido
• La mayoría de los cambios no necesitan corrección, pero el diseño mantiene la convergencia incluso cuando sí hace falta

Composición de esquemas y generalización de marcas

• El esquema de documentos de ProseMirror especifica directamente las relaciones entre nodos, por lo que normalmente hay que configurarlo a mano
• Los tipos de nodos y marcas de ProseMirror solo existen dentro de un esquema específico, y no hay identidad de nodo que pueda compartirse entre esquemas
• En Wordgard, los tipos de nodos y marcas son objetos independientes y pueden incluirse en varios esquemas de documentos
• Estos objetos actúan como handles que admiten tipado y autocompletado, lo que facilita crear esquemas combinando los elementos necesarios
• Un esquema puede sobrescribir las relaciones de los elementos existentes
  • Las definiciones de nodos o marcas especifican el contenido o los tipos de destino predeterminados
  • Si se quiere usar el mismo elemento de otra manera, el esquema puede cambiar esa relación
• Se puede ofrecer un conjunto más rico de nodos integrados por defecto, lo que facilita adjuntar directamente a esos nodos integraciones del sistema como extensiones de soporte de edición o botones de menú
• Funciones que antes estaban ligadas a propiedades específicas de nodos, como la alineación de texto o el texto alternativo, pueden agregarse de forma más modular mediante la generalización de marcas
• El tipo de nodo en sí no necesita saber qué marcas lo tienen como destino

Por qué se relajaron las restricciones de contenido

• Wordgard no admite la especificación de contenido permitido basada en expresiones regulares, una función representativa de ProseMirror
• La descripción del contenido de un nodo en Wordgard solo limita qué tipos hijos admite, no su orden
• Las restricciones basadas en expresiones regulares dificultan escribir código genérico para manipular documentos
  • El código que no está escrito para un esquema específico casi no puede asumir qué transformaciones serán válidas
  • Hay que contrastar cada operación con las restricciones de contenido, y ese proceso es sutil y pesado
• Las restricciones que bloquean fuertemente la forma del documento pueden impedir pasos intermedios de edición hacia la forma que el usuario busca, perjudicando la experiencia de uso
• Wordgard promueve un enfoque más flexible de la forma del documento
• Cuando se necesitan invariantes más allá de las reglas del esquema, ofrece la abstracción de correction
  • Corrige mediante programación formas de documento que no se quieren permitir
  • Permite correcciones más inteligentes y contextuales que imponer expresiones de contenido
  • También puede usarse para condiciones que ni siquiera podían expresarse con restricciones de ProseMirror, como garantizar tablas rectangulares

Sistema de extensiones: facet al estilo CodeMirror 6

• El sistema de extensiones de ProseMirror hace que los plugins asuman varias tareas, y el orden del arreglo afecta la prioridad
• Puede darse el caso de que un plugin necesite baja prioridad en un hook y alta prioridad en otro
• El sistema basado en facets de CodeMirror hace que las extensiones sean más granulares y permite que cada valor de extensión defina su propia categoría de prioridad
• Un Facet es un punto de extensión tipado, y puede definirlo tanto la propia biblioteca como cualquier otro código
• Wordgard toma casi sin cambios el sistema de CodeMirror en esta parte, incluyendo los mecanismos de actualización y reconfiguración de estado
• La configuración no es un arreglo de plugins, sino un árbol de extensiones
  • Definición de manejadores de eventos
  • Configuración de propiedades del editor
  • Adición de nuevos estados del editor
• La implementación de una función normalmente se compone de un conjunto de extensiones que trabajan juntas
• Los elementos primitivos están diseñados para que los paquetes de extensiones se combinen bien en la mayoría de los casos con solo agregarlos a la configuración

Menor dependencia del navegador y manejo de selección

• Muchos problemas de ProseMirror están relacionados con su dependencia del comportamiento de selección nativo del navegador
• El enfoque anterior dejaba que el navegador manejara el movimiento del cursor en texto bidireccional o contenido con estilos inusuales, y luego reflejaba el resultado en su propio modelo de selección
• En la práctica, los navegadores pueden no mover el cursor a través de cierto contenido, no dibujarlo, dibujarlo en posiciones incorrectas o comportarse de forma extraña al arrastrar con el mouse para seleccionar
• Wordgard maneja directamente casi toda la selección basada en puntero y teclado
  • Implementa el manejo de texto bidireccional
  • Crea un modelo de disposición del contenido
  • Dibuja el cursor directamente
• La selección táctil es una excepción y usa la implementación nativa
  • Reimplementarla parece romper el menú contextual nativo
  • En teléfonos y tablets, es difícil reemplazar el menú contextual
  • La selección táctil tiende a comportarse de forma menos extraña que la selección con teclado

Manejo de eventos de entrada y eliminación de la observación de cambios en el DOM

• En los últimos 9 años, el soporte de eventos de edición en los navegadores, especialmente beforeinput, se volvió más consistente
• Aunque hace falta probarlo en entornos reales de uso, Wordgard parece poder funcionar sin la observación de cambios del DOM ni los trucos de parseo de contenido modificado de los que dependía ProseMirror
• Wordgard maneja el evento beforeinput para todo excepto la entrada de texto por composición
• Este enfoque evita un conjunto de problemas que requerían varias implementaciones alternativas desprolijas

Estabilidad, plan de versiones y licencia

• Wordgard está un poco más avanzado que los proyectos anteriores en el momento de su anuncio
• Las interfaces centrales admiten casi todas las funciones deseadas, y ya se escribieron varias extensiones para verificar si el diseño es práctico
• La documentación todavía está algo verde, pero el manual de referencia está completo y se puede usar
• Es posible que muchos problemas no aparezcan hasta que la gente lo use en trabajos reales
• Hay funciones que se quieren agregar más adelante, y se espera que otras personas lo revisen después de su publicación
• Algunas interfaces públicas quizá deban replantearse a partir de nuevas observaciones
• La primera versión es 0.1, y permanecerá un tiempo en versiones 0.x para recopilar feedback, corregir errores y pulir partes ásperas
  • Se espera que ese periodo sea de al menos alrededor de 1 año
• La licencia es MIT, igual que en los proyectos anteriores
• También se consideró una licencia más restrictiva, pero se eligió una licencia permisiva porque hay más interés en que tenga un uso amplio

Modelos de IA, generación de código y política de pull requests

• No se usaron modelos de lenguaje para crear este software
• Dado que el código JavaScript está en la web y la documentación debe ser pública, se considera que no hay una forma confiable de impedir que el código y las ideas publicadas terminen en modelos de lenguaje grandes
• En Wordgard se hará el experimento de no aceptar pull requests, a diferencia de la práctica estándar del open source
• Revisar cambios grandes y ajustarlos para que cumplan las expectativas suele requerir más trabajo que implementarlos directamente
• Con la fuerte caída del costo de generar código, la estructura en la que otra persona envía código y el mantenedor debe revisarlo, mantenerlo o explicar por qué lo rechaza se vuelve menos atractiva

[GN⁺]

Opiniones en Lobste.rs

• Como autor, estaré revisando este hilo de vez en cuando por si hay preguntas o comentarios

  • Se ve bastante sorprendente. No lo vi en el FAQ, pero me pregunto cómo se puede usar o configurar para edición de Markdown
    Supongo que se podría generar HTML con un renderizador de Markdown y editarlo en Wordgard, pero después ¿cómo se podría extraer el Markdown desde el contenido del editor?
  • Me pregunto qué ruta de transición seguirán quienes usan ProseMirror
    ¿Al final se terminarán cambiando a Wordgard? Si alguien va a usar ProseMirror en un proyecto nuevo, ¿en qué momento debería elegir Wordgard?

• Contains 0% AI

  Not having PRs is an effective way to nip the problem of people submitting LLM-generated slop code in the bud.

  Y también tiene arte genial hecho por una artista real, humana
  Me gusta

• Muchas felicidades a Marijn por el proyecto y la presentación. Se ve genial, y también me gusta el arte de Kamila Stankiewicz

• La página principal del proyecto es https://wordgard.net/

• As a deviation from standard open-source practice, I'm doing an experiment where I don't take pull requests for Wordgard.

  Esta parte, especialmente todo el último párrafo, me parece realmente interesante
  Me pregunto si este tipo de enfoque se volverá más común por un tiempo, hasta que tengamos una mejor relación con la generación de código con IA, o hasta que terminemos yendo en la dirección de no tener ninguna relación en absoluto
  Por cierto, el código tiene licencia MIT