Wordgard: editor de texto enriquecido para navegador del creador de ProseMirror

 (wordgard.net)
1 puntos por GN⁺ 5 시간 전 | 1 comentarios | Compartir por WhatsApp
  • Wordgard es una biblioteca JavaScript de código abierto para crear editores de texto enriquecido en el navegador, basada en un nuevo framework de edición creado por el autor de ProseMirror
  • En lugar de enfocarse en un editor HTML de formato libre, pone el foco en el control de la estructura del documento, permitiendo que los desarrolladores definan con precisión qué tipos de contenido y qué estructura semántica se permiten
  • Ofrece un modelo basado en esquemas y una arquitectura centrada en extensiones para editores personalizados complejos, de modo que las funciones se pueden reemplazar o modificar según sea necesario
  • Aborda desde la base del editor requisitos como accesibilidad, internacionalización, documentos RTL y bidireccionales, contenido estructurado, estilo funcional y edición colaborativa
  • Es código abierto permisivo bajo licencia MIT, pero adopta una forma de operación en la que se agradecen los reportes de errores y no se aceptan pull requests

Un framework de edición para controlar la estructura del documento

  • Wordgard es una biblioteca JavaScript de código abierto para implementar editores de texto enriquecido dentro del navegador
  • No es un editor HTML de formato libre, sino un sistema de edición de texto enriquecido semántico en el que los desarrolladores controlan con precisión los tipos de contenido compatibles y la estructura del documento
  • Proporciona un enfoque basado en esquemas para definir con detalle la estructura del documento y crear elementos de documento personalizados
  • Su interfaz de programación fue diseñada con objetivos de generalidad y flexibilidad, por lo que puede servir como base para editores personalizados con requisitos exigentes

Extensibilidad, accesibilidad y colaboración

  • La mayoría de las funciones del editor están implementadas como extensiones (extensions), por lo que pueden reemplazarse o modificarse si no se ajustan a una necesidad concreta
  • Las funciones de accesibilidad consideran a usuarios de lectores de pantalla, usuarios que solo usan teclado y entornos móviles, y también admiten la internacionalización de la interfaz
  • Para entornos que escriben de derecha a izquierda, admite conciencia de dirección tanto en el contenido como en la interfaz, y puede manejar contenido bidireccional y documentos RTL
  • El árbol del documento puede incluir contenido estructurado como tablas, listas anidadas, figure con subtítulos y estructuras personalizadas
  • Gran parte del sistema está escrita con estilo funcional para favorecer la claridad y la facilidad de pruebas
  • Admite edición colaborativa, donde varios usuarios editan el mismo documento al mismo tiempo y se fusionan los cambios concurrentes

Licencia y operación del proyecto

Lecturas relacionadas

1 comentarios

 
GN⁺ 5 시간 전
Comentarios de Hacker News

  • Creo que la mayoría va a querer saber “¿por qué?”. Este documento, que trata las diferencias con ProseMirror, fue lo más cercano a una respuesta para esa pregunta: https://wordgard.net/docs/prosemirror/
    Algo importante a notar es que no hay una ruta de migración. Comparte muchos conceptos con ProseMirror, pero cambiarse parece requerir bastante trabajo. Obsidian probablemente no cambiará porque está basado en CodeMirror, pero sitios como tiptap.dev sí podrían verse afectados
    @marijn, me pregunto si podrías explicar por qué Wordgard vale lo suficiente como para justificar el costo de migración
    Edit: vi que en el blog personal de Marijn se cubren muchos de estos puntos, y envié https://marijnhaverbeke.nl/blog/wordgard-0.1.html a HN para dar mejor contexto

    • Sobre “¿vale Wordgard lo suficiente como para justificar el costo de migración?”, puede que no. Si estás satisfecho con ProseMirror, sigue usando ProseMirror, yo lo voy a seguir manteniendo
      Pero, como expliqué en la entrada del blog, fui acumulando bastantes nuevas ideas de diseño que evitan algunos problemas con los que me topé en ProseMirror, y por eso quise hacer una nueva iteración
      Voy a agregar un enlace a la entrada del blog en la sección de documentación del sitio web
      Y el nombre no es merijn, es marijn
    • En el blog dice: “Ya tampoco me gusta mucho el juego de palabras de ProseMirror. Es CodeMirror pero para prosa, ¿entienden?”. Así que parece que ya es hora de que alguien haga Codegard
    • Lo que de verdad quiero saber es “¿por qué vale la pena asumir el costo de migración?”. Más importante aún: por qué no simplemente hacerlo como ProseMirror v2
      La landing page parece necesitar más información sobre el “por qué” que sobre el “qué”

  • Más allá del editor, la artista a cargo del diseño es realmente impresionante. Se veía sumamente refinado y llamaba muchísimo la atención: https://kamilastankiewicz.com/

    • Pienso lo mismo. De verdad es hermoso, y me pregunto cuánto costaría meter una ilustración así en un sitio web normal
    • Los gráficos son sorprendentemente buenos y hasta tienen vibra de Ghibli. Es curioso decir eso en el contexto de un editor de texto enriquecido

  • Hace unos 25 años, poner a funcionar un editor WYSIWYG para levantar un sitio en PHP-Nuke para el periódico escolar era un gran obstáculo, y recuerdo que al final lo logramos
    Es absurdo que no exista una implementación de estándar web, ya resuelto desde hace 15 años, para una función así

    • Existe contenteditable, y Wordgard o ProseMirror también están construidos fundamentalmente encima de eso. El resto se parece más a la interfaz de usuario y a la interoperabilidad con sistemas que no quieren aceptar HTML arbitrario como entrada
    • Durante mucho tiempo, los fabricantes de navegadores ni siquiera pudieron ponerse de acuerdo en los detalles del comportamiento de una simple selección de texto

  • Esto se ve sorprendentemente bien
    Hace poco estaba buscando algo parecido y terminé haciéndolo yo mismo, con transformación operacional (OT) basada en bloques, sincronizada con un servidor local, y con sincronización basada en diferencias hacia el servidor remoto
    Mientras leo la guía del sistema, no dejo de asentir con la cabeza. Ver las similitudes y los contrastes hace que se sienta bastante validado

    • ProseMirror, y probablemente Wordgard también, acertó en muchísimas cosas

  • Hay un área muy básica en la que todos los editores han fallado. La pregunta es si puedes escribir una oración completa dentro del editor usando un iPhone
    Wordgard no pasó esa prueba. Las entradas provenientes de autocorrección o de las sugerencias del teclado se pierden, y palabras parcialmente escritas o mal deletreadas se borran

    • ProseMirror, y también Lexical como se menciona en el comentario hermano, deberían poder manejar bien esto
      Safari móvil y Chrome para Android, a diferencia de sus equivalentes de escritorio, tienen un montón de comportamientos raros y además tratan los estándares de forma bastante laxa. Así que para hacer que funcione bien, muchas veces terminas necesitando una larga cola de código de workaround
      Wordgard seguramente llegará a eso también, pero antes del primer lanzamiento el foco estuvo en la arquitectura
    • Hace unos años evalué editores web de texto enriquecido. En escritorio todos parecían estar bien, pero en móvil todo lo que probé era un desastre
      No se podía seleccionar, la autocorrección se rompía, tocar el texto no movía el cursor, la entrada se congelaba, y el teclado no desaparecía aunque el elemento perdiera el foco
      En las últimas décadas hubo varios intentos de agregar un elemento de texto enriquecido decente a la web, pero no sé por qué todos fracasaron. Supongo que es un trabajo grande, complejo y poco gratificante
      El soporte nativo adecuado para texto enriquecido es uno de los grandes puntos ciegos de la web. Las plataformas nativas resolvieron esto hace décadas

  • Hace unos 6 años sufrí bastante investigando e implementando autocompletado de recursos remotos estilo @, o sea, referencias a otros usuarios o documentos. La forma en que este editor se extiende parece una evolución de ProseMirror
    Sería muy bueno que esto fuera una función integrada básica y no algo que haya que construir uno mismo a partir del ejemplo de dinosaurios. Cada vez que uso una librería de editores de texto así, este es mi caso de uso número uno, y WYSIWYG viene después

    • Si el estilo de @ menciones viniera por defecto y solo expusiera una API, sería excelente
      El soporte móvil de primera clase también hace mucha falta

  • Lo que se me hizo difícil al usar ProseMirror con TipTap es que muy seguido tienes que manipular programáticamente la representación JSON del documento para extraer datos. Para eso necesitas, o al menos se vuelve muy deseable tener, una representación con tipos estáticos
    ProseMirror realmente no ofrece nada para eso, así que al final terminas haciendo una de dos cosas

    1. Definir el esquema dos veces: una en ProseMirror y otra con algo como Zod, y luego tener un montón de pruebas de equivalencia para verificar que ambos esquemas coincidan
    2. Crear una capa de definición de metaesquema que pueda emitir el esquema de ProseMirror, pero siguiendo la especificación estándar de esquemas https://standardschema.dev/. Este enfoque es más práctico cuando no usas algo como Tiptap
      Aún no he usado Wordgard, así que no sé si aborda este problema, pero lo menciono porque sería un punto de dolor muy bueno de resolver

  • El arte del sitio web es hermoso. Se siente como si ya se nos hubiera olvidado este tipo de forma de atraer la atención

    • Además tiene “0% AI incluida”. Esta artista es realmente genial
    • En medio de tanta basura de IA por todos lados, ver una ilustración hermosa hecha a mano se siente realmente refrescante

  • No me gusta WYSIWYG en la web. Formateas una publicación de foro larga y aburrida, cierras la pestaña y se pierde todo
    Prefiero usar un editor de texto local y pegarlo en el formulario web con Ctrl+V. Si es Markdown, se puede hacer así

    • He visto que algunas plataformas resuelven esto con localStorage. Van guardando automáticamente un “borrador” mientras escribes, y cuando vuelves a abrir la página lo restauran de forma natural
      La primera vez que me pasó esto después de cerrar una pestaña por accidente, fue una sorpresa muy agradable
    • Deberías revisar Linear. No tengo relación con ellos, pero justo ayer cerré un cuadro de diálogo por accidente, y cuando volví a crear el issue, ahí seguía intacto el texto largo que había escrito
      El punto es que esto no es un problema técnico, sino un problema de producto
    • Depende del caso. Mi blog tiene un editor web, pero en realidad solo usa Markdown con vista previa, así que se parece bastante al flujo de trabajo que describiste
      En una app de notas sí decidí usar WYSIWYG, porque no había espacio para una vista dividida y tampoco quería ver solo el Markdown crudo
      Mi mayor queja con WYSIWYG es que puede estorbar. Por ejemplo, a veces haces un bloque verbatim y luego no puedes salir de ese bloque. Lo digo por Teams. Quizá por eso me gustaba tanto LaTeX
    • Ya existen buenos backends para ProseMirror y otros editores. No son difíciles de configurar
    • Estoy de acuerdo, pero mucha gente prefiere WYSIWYG. En lo más simple, basta con poner una vista lado a lado como hacen varios editores HTML o Markdown

  • Me da muchísimo gusto ver arte de verdad otra vez. Se ve muy bien