Personalmente, de los que he probado, me pareció el más cómodo y el más fácil de extender.
Muchas de las incomodidades que sentí al crear un editor con Slate realmente se resolvieron aquí.
¿Podrías compartir qué incomodidades tuviste cuando usaste el editor Slate?
Yo solo he usado Tiptap, pero escuché que Slate está bastante bien, así que me empezó a interesar!!
Es mucho más cómodo crear componentes externos. Sobre todo, cuando usas su propio DOM, como en React, necesitas renderizar como componente y no como HTML, y Tiptap, que fue hecho pensando en la modularización desde el inicio, resulta más fácil de modificar.
En general, sentí que la documentación de Slate era difícil, y al ser demasiado raw, me pareció que había muchas más cosas que aprender para implementar las funciones que yo quería.
Es un recuerdo de hace como 2 años, así que puede que sea un poco distinto, pero tuve estos problemas.
Problema de entrada de texto en coreano en entorno móvil: fue muy difícil encontrar dónde ocurría esto; pasó mientras hacía personalizaciones, así que no lo recuerdo con exactitud.
Dificultad con los controles relacionados con select: fue bastante complicado agregar una función para manejar atributos en los caracteres seleccionados. (el objeto en sí es complejo)
Dificultad para desarrollar plugins: intenté desarrollar directamente plugins como uno de mapas, pero Tiptap está estructurado de una forma que hace cómodo agregar y desarrollar plugins adicionales.
En lo personal, creo que la documentación está bastante bien hecha, aunque en medio hay elementos que requieren suscripción de pago.
No llega al punto de hacer incómoda la lectura de la documentación, pero también logra antojarte cosas que ni necesitas, así que es impresionante y fastidioso a la vez... una sensación compleja.
Me cuesta estar de acuerdo con que la documentación esté razonablemente bien hecha. Desde mi perspectiva, la brecha entre la guía de inicio y la documentación de la API es demasiado grande, así que la curva de aprendizaje es alta. En el proyecto de React que estamos llevando, consideramos que el estilo de documentación de Prosemirror y react-prosemirror es más amigable para el usuario y está mejor logrado, así que elegimos react-prosemirror y no tiptap.
Mientras revisábamos los ejemplos de React para crear código de muestra tipo PoC para nuestros requerimientos, nos encontramos con los siguientes problemas.
¿Qué elementos se pueden usar cuando se agrega StarterKit? Hay que buscar documentación aparte por el nombre del paquete. Eso te saca del estado de concentración mientras pruebas los ejemplos de tiptap.
ListItem está incluido en StarterKit, entonces ¿por qué en el ejemplo vuelven a incluir ListItem en el proyecto? Para configurar opciones de la extensión.
¿Por qué hay que usar una sintaxis como editor().chain().focus()? No hay explicación ni principios de diseño sobre el method chaining.
Bubble menu y Floating menu no están en los ejemplos de React. Como funcionan distinto de lo que vi en la página Try it live (https://templates.tiptap.dev/pjrwkQtNpq), uno tiene que revisar la documentación para entender por qué falta esa funcionalidad.
No hay funcionalidad de tablas, así que en la página de Extensions buscas la palabra clave table. En los resultados aparecen Table, TableCell, TableHeader y TableRow. ¿Hay que agregar todo eso?
Después de alguna manera agregar Table y varias extensiones, para comprobar si la funcionalidad realmente funciona primero hay que insertar una tabla. ¿Cómo se escriben los comandos de la toolbar? ¿En qué parte de la toolbar del editor se agregarían las funciones para esos comandos? No hay ninguna pista.
Tenemos un requisito de que no se deben poder anidar otras tablas dentro de una tabla. ¿Cómo se implementaría la lógica para determinar si el cursor está dentro de una tabla? No hay ninguna pista.
Recordé que Color venía empaquetado como una extensión y me dio curiosidad, así que abrí el código fuente. Al ver que en el directorio src solo hay dos archivos, no pude evitar soltar un suspiro. No entiendo la intención de haber hecho módulos tan pequeños. Si hasta una función así de mínima se convierte en paquete, ¿no termina siendo más una carga para la gestión de versiones de dependencias que una mejora en la reutilización?
Me cuesta estar de acuerdo con 1-3, 4-6 y 8, porque no sentí ninguna duda ni incomodidad en absoluto.
1-2
StarterKit es, tal como su nombre lo dice, un kit para empezar, así que no parece tener mucho sentido en uso real.
En el caso de ListItem, es tal como mencionaste. Es un elemento para la configuración de la extensión Color. Del mismo modo, creo que basta con no usar StarterKit.
3 chain().something().run() es básicamente una especie de azúcar sintáctica, pero creo que ofrece una función acorde con el concepto de una librería con baterías incluidas.
Lo estoy usando de forma muy útil en entornos móviles, donde acciones como poner en negritas y luego enfocar son prácticamente indispensables.
4
No lo sé bien porque no uso esa función.
(Creo que, en el sentido de que no hace falta ver información sobre funciones que no voy a usar, esto es una ventaja que viene como contraparte de la desventaja que mencionaste en el punto 1 sobre salir del estado de concentración).
5-6
Está bien explicado en la documentación de cada extensión y, en general, no es en absoluto diferente de implementar un editor normalmente.
Sinceramente, en la parte que mencionaste en el punto 6, ni siquiera estoy seguro de haber entendido bien lo que quiso decir savvykang... No dejo de pensar: “¿Por qué esto sería una duda...? ¿Qué clase de pista haría falta...?” jaja...
7
“Como con los otros nodos”, puedes verificar el foco con editor.isActive('table').
Aun así, no creo que sea algo que se resuelva simplemente identificando el nodo enfocado. Parece un requerimiento que exige considerar muchas cosas, como el filtrado al pegar o la inserción a través de las herramientas de desarrollador.
8
Estoy de acuerdo en que manejar las versiones de las dependencias puede ser una carga, pero también creo que tiene la ventaja de no tener que cargar con código de funciones que no necesitas.
Justamente en nuestro caso era una situación en la que no íbamos a usar la extensión Color que mencionaste. Creo que cada enfoque tiene sus pros y sus contras.
.
Creo que react-prosemirror y tiptap que mencionaste tienen conceptos completamente distintos.
uno es algo que te permite usar prosemirror de una manera más al estilo React
vs
el otro no se trata de si está basado en prosemirror o no; lo importante es que reúne todo lo necesario para implementar un editor que encaje con mi servicio
Como ya era bastante popular del lado de Vue, dudé si valía la pena escribir sobre esto,
pero esta vez lo probé aplicándolo en SvelteKit y quedé bastante satisfecho, así que lo comparto.
En el ecosistema de Svelte no había un editor WYSIWYG que me dejara pensando “este es”, así que era algo que me tenía dándole vueltas,
y si hay más personas con la misma inquietud, creo que vale la pena probarlo al menos una vez.
9 comentarios
Personalmente, de los que he probado, me pareció el más cómodo y el más fácil de extender.
Muchas de las incomodidades que sentí al crear un editor con Slate realmente se resolvieron aquí.
¿Podrías compartir qué incomodidades tuviste cuando usaste el editor Slate?
Yo solo he usado Tiptap, pero escuché que Slate está bastante bien, así que me empezó a interesar!!
Es mucho más cómodo crear componentes externos. Sobre todo, cuando usas su propio DOM, como en React, necesitas renderizar como componente y no como HTML, y Tiptap, que fue hecho pensando en la modularización desde el inicio, resulta más fácil de modificar.
En general, sentí que la documentación de Slate era difícil, y al ser demasiado raw, me pareció que había muchas más cosas que aprender para implementar las funciones que yo quería.
Es un recuerdo de hace como 2 años, así que puede que sea un poco distinto, pero tuve estos problemas.
select: fue bastante complicado agregar una función para manejar atributos en los caracteres seleccionados. (el objeto en sí es complejo)Oh... ¡gracias~!
Puedes ver un ejemplo de editor funcional en https://tiptap.dev/docs/editor/installation/react#7-the-complete-setup.
En lo personal, creo que la documentación está bastante bien hecha, aunque en medio hay elementos que requieren suscripción de pago.
No llega al punto de hacer incómoda la lectura de la documentación, pero también logra antojarte cosas que ni necesitas, así que es impresionante y fastidioso a la vez... una sensación compleja.
Me cuesta estar de acuerdo con que la documentación esté razonablemente bien hecha. Desde mi perspectiva, la brecha entre la guía de inicio y la documentación de la API es demasiado grande, así que la curva de aprendizaje es alta. En el proyecto de React que estamos llevando, consideramos que el estilo de documentación de Prosemirror y react-prosemirror es más amigable para el usuario y está mejor logrado, así que elegimos react-prosemirror y no tiptap.
Mientras revisábamos los ejemplos de React para crear código de muestra tipo PoC para nuestros requerimientos, nos encontramos con los siguientes problemas.
editor().chain().focus()? No hay explicación ni principios de diseño sobre el method chaining.srcsolo hay dos archivos, no pude evitar soltar un suspiro. No entiendo la intención de haber hecho módulos tan pequeños. Si hasta una función así de mínima se convierte en paquete, ¿no termina siendo más una carga para la gestión de versiones de dependencias que una mejora en la reutilización?Me cuesta estar de acuerdo con 1-3, 4-6 y 8, porque no sentí ninguna duda ni incomodidad en absoluto.
1-2
StarterKit es, tal como su nombre lo dice, un kit para empezar, así que no parece tener mucho sentido en uso real.
En el caso de ListItem, es tal como mencionaste. Es un elemento para la configuración de la extensión Color. Del mismo modo, creo que basta con no usar StarterKit.
3
chain().something().run()es básicamente una especie de azúcar sintáctica, pero creo que ofrece una función acorde con el concepto de una librería con baterías incluidas.Lo estoy usando de forma muy útil en entornos móviles, donde acciones como poner en negritas y luego enfocar son prácticamente indispensables.
4
No lo sé bien porque no uso esa función.
(Creo que, en el sentido de que no hace falta ver información sobre funciones que no voy a usar, esto es una ventaja que viene como contraparte de la desventaja que mencionaste en el punto 1 sobre salir del estado de concentración).
5-6
Está bien explicado en la documentación de cada extensión y, en general, no es en absoluto diferente de implementar un editor normalmente.
Sinceramente, en la parte que mencionaste en el punto 6, ni siquiera estoy seguro de haber entendido bien lo que quiso decir savvykang... No dejo de pensar: “¿Por qué esto sería una duda...? ¿Qué clase de pista haría falta...?” jaja...
7
“Como con los otros nodos”, puedes verificar el foco con
editor.isActive('table').Aun así, no creo que sea algo que se resuelva simplemente identificando el nodo enfocado. Parece un requerimiento que exige considerar muchas cosas, como el filtrado al pegar o la inserción a través de las herramientas de desarrollador.
8
Estoy de acuerdo en que manejar las versiones de las dependencias puede ser una carga, pero también creo que tiene la ventaja de no tener que cargar con código de funciones que no necesitas.
Justamente en nuestro caso era una situación en la que no íbamos a usar la extensión Color que mencionaste. Creo que cada enfoque tiene sus pros y sus contras.
.
Creo que
react-prosemirrorytiptapque mencionaste tienen conceptos completamente distintos.uno es algo que te permite usar
prosemirrorde una manera más al estilo Reactvs
el otro no se trata de si está basado en
prosemirroro no; lo importante es que reúne todo lo necesario para implementar un editor que encaje con mi servicioComo ya era bastante popular del lado de Vue, dudé si valía la pena escribir sobre esto,
pero esta vez lo probé aplicándolo en SvelteKit y quedé bastante satisfecho, así que lo comparto.
En el ecosistema de Svelte no había un editor WYSIWYG que me dejara pensando “este es”, así que era algo que me tenía dándole vueltas,
y si hay más personas con la misma inquietud, creo que vale la pena probarlo al menos una vez.