🐛 fix(rich-text): Fix missing alt attribute and use TipTap over Quill #191
Conversation
… react package to version 2.11.4
Updated frontend package.json with new dependencies: - added "@ant-design/icons": "^5.6.0" - added "@tiptap/extension-heading": "^2.11.4" - added "@tiptap/extension-highlight": "^2.11.4" - added "diff": "^7.0.0" - added "katex": "^0.16.21" - added "reactjs-tiptap-editor": "^0.1.14"
…x, Color, and Font options, and improved image handling through drag-and-drop functionality.
…customization, code block formatting, and text selection enhancements.
…m" and "lodash" dependencies
- Introduced CustomImage component for handling images. - Updated imagesUrl to use import.meta.env.VITE_API_URL dynamically instead of hardcoding it.
…uploads including base64 conversion and API posting.
…sistency and maintainability
…urn statement in image upload configuration
caverav
requested review from
Icksir,
Sealra,
iTzGooDLife,
jllanosg and
massi-ponce
|
Warning Rate limit exceeded@caverav has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 11 minutes and 51 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughSe han realizado modificaciones tanto en el backend como en el frontend. En el backend, se ajusta la expresión regular y se mejora el manejo de datos en la función de generación de reportes. En el frontend, se actualiza el archivo de dependencias, se elimina el editor ReactQuill reemplazándolo por RcTiptapEditor en el componente RichText, se ajustan los estilos asociados y se incorpora una URL dinámica en el hook de autenticación. Además, se eliminan archivos CSS relacionados con Quill. Changes
Sequence Diagram(s)sequenceDiagram
participant U as Usuario
participant E as RcTiptapEditor
participant D as Función Debounce
participant C as Callback onChange
U->>E: Introduce contenido
E->>D: Emite evento de cambio
D->>C: Llama al callback tras intervalo de debounce
C-->>U: Actualiza el contenido almacenado
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (4)
frontend/src/components/text/RichText.tsx (1)
4-5: Remover código comentado o reactivarlo.
Estos imports comentados parecen residuales de una implementación anterior conLabelyPlaceholder. Si no se volverán a usar, convendría eliminarlos para mantener el código limpio.frontend/src/services/image.ts (1)
11-27: createImage con POST JSON.
La función envía datos en formato JSON, lo cual es adecuado. Recomendable manejar errores de validación (4xx) desde el servidor para feedback más detallado.frontend/src/hooks/useAuth.tsx (1)
109-109: Llamada a la ruta dinámica de registro.
fetch(initUrl, ...)permite una fácil reconfiguración de la URL sin cambios en el código. Igualmente, revisa si el servidor requiere cabeceras o tokens adicionales para la creación del usuario.frontend/src/components/text/css/RichText.css (1)
67-70: Las imágenes no son completamente accesibles.No se han definido estilos para estados de hover o focus, lo que afecta la accesibilidad.
Agregar estilos para mejorar la accesibilidad:
img { max-width: 100%; border-radius: 3px; + cursor: pointer; + transition: transform 0.2s ease; + } + + img:hover { + transform: scale(1.02); + } + + img:focus { + outline: 2px solid var(--q-color-primary); + outline-offset: 2px; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
backend/src/lib/report-generator.js(2 hunks)frontend/package.json(5 hunks)frontend/src/components/text/ImageHandler.tsx(1 hunks)frontend/src/components/text/RichText.tsx(1 hunks)frontend/src/components/text/css/RichText.css(1 hunks)frontend/src/hooks/useAuth.tsx(2 hunks)frontend/src/services/image.ts(1 hunks)frontend/src/services/utils.ts(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
frontend/src/components/text/ImageHandler.tsx
[error] 26-26: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 75-75: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/services/utils.ts
[error] 120-161: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 131-131: A character class cannot match a character and a combining character.
A character and a combining character forms a new character. Replace the character class with an alternation.
(lint/suspicious/noMisleadingCharacterClass)
[error] 139-139: A character class cannot match a character and a combining character.
A character and a combining character forms a new character. Replace the character class with an alternation.
(lint/suspicious/noMisleadingCharacterClass)
[error] 166-167: A character class cannot match a character and a combining character.
A character and a combining character forms a new character. Replace the character class with an alternation.
(lint/suspicious/noMisleadingCharacterClass)
🔇 Additional comments (18)
frontend/src/components/text/RichText.tsx (7)
1-2: Validación de imports relacionados con tipografías y fórmulas.
Estos imports lucen adecuados para brindar soporte a KaTeX y al estilo del editor TipTap. Asegúrate de que realmente se utilicen funciones de LaTeX en este componente, pues de lo contrario podrías evitar dependencias innecesarias.
6-42: Verificar uso de extensiones.
Se importan múltiples extensiones dereactjs-tiptap-editor. Confirma que todas sean necesarias en este componente para evitar aumentar innecesariamente el tamaño del bundle.
44-45: Ruta de subida de imágenes configurada correctamente.
La URL de imágenes se construye a partir deimport.meta.env.VITE_API_URL. Asegúrate de que el entorno contenga la variable y que se use en todas las rutas relacionadas con imágenes para mantener la consistencia.
46-124: Revisar límite de 50,000 caracteres.
Dentro deextensions, se configura un límite de 50,000 caracteres. Confirma si es apropiado para el caso de uso en producción, ya que podría ser demasiado laxo o quedarte corto según el contexto. Del mismo modo, considera manejar validaciones más robustas si se espera un uso intensivo.
126-133: Buena práctica con debounce.
La implementación dedebouncecon 300 ms resulta adecuada para evitar llamadas excesivas. Solo verifica en pruebas que no cause retrasos molestos para el usuario al escribir.
135-140: Definición clara de los tipos de props.
El tipoRichTextPropses conciso y describe bien las propiedades requeridas. Esto facilita el mantenimiento y la legibilidad del componente.
142-173: Componente RichText con TipTap.
La transición aRcTiptapEditorse ve completa y bien organizada. Se utiliza la proponChangeContentcorrectamente y se administra el estado interno. Asegúrate de probar escenarios dondevaluesea nulo o indefinido para garantizar manejo seguro.frontend/src/services/image.ts (4)
1-2: Revisa la base de la URL.
API_BASE_URLconcatena'/api/'tras la variable de entorno. Asegúrate de que sea coherente con la configuración del servidor y no existan duplicaciones de rutas en otras partes del proyecto.
3-9: Función getImage correctamente estructurada.
La función maneja la respuesta y arroja error si la respuesta no es exitosa. Esto es bueno para evitar continuar con datos inválidos.
29-37: deleteImage elimina recurso con DELETE.
La lógica es clara y coherente. Si el backend requiere autenticación especial, confirma que las credenciales estén correctamente configuradas.
39-43: Exportación por defecto de las funciones.
Agrupar funciones en un objeto evita contaminación del espacio global de nombres. Esto facilita su importación y mantiene la coherencia modular.frontend/src/hooks/useAuth.tsx (1)
7-7: Reemplazo dinámico de la URL de inicialización.
AsignarinitUrlusando la variable de entornoVITE_API_URLhace que el proceso de registro sea más flexible. Verifica queVITE_API_URLcontenga una ruta adecuada en todos los entornos.frontend/package.json (6)
15-15: Verificación de la dependencia '@ant-design/icons'
La inclusión de este paquete es correcta y respalda la integración de TipTap en la aplicación. Asegúrate de consultar su documentación para confirmar la compatibilidad con el resto del stack.
30-41: Evaluación de dependencias TipTap
Se han agregado múltiples dependencias de TipTap que permiten utilizar extensiones avanzadas (menús flotantes, encabezados, resaltado, imágenes, etc.) en el editor. Es importante revisar periódicamente la compatibilidad de estas versiones y mantenerlas actualizadas según las necesidades del proyecto.
53-53: Confirmación de la inclusión de 'diff'
La adición del paquete "diff" es acertada si se requiere funcionalidades para comparar textos o estados. Verifica que la versión especificada se alinee correctamente con las utilidades que se pretendan implementar.
58-59: Validación de 'katex' y 'lodash'
La incorporación de "katex" es útil para el renderizado de expresiones matemáticas, mientras que "lodash" sirve para optimizar operaciones utilitarias. Ambas dependencias se añaden de forma coherente; revisa que sus versiones interactúen sin conflictos con el resto del código.
68-68: Revisión de 'reactjs-tiptap-editor'
Este paquete respalda la migración de ReactQuill a TipTap y mejora el manejo de imágenes y ediciones ricas en el componente correspondiente. Es fundamental probar su integración para garantizar una experiencia de usuario fluida y sin contratiempos.
88-88: Fijación de versión en 'eslint-plugin-prefer-arrow-functions'
El ajuste de la versión de "^3.4.1" a "3.4.1" asegura consistencia y evita actualizaciones inesperadas que puedan alterar el comportamiento del linter. Este cambio es adecuado siempre que se verifique que no afecta negativamente otras configuraciones del proyecto.
caverav
changed the title
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
frontend/src/components/text/RichText.tsx (1)
1-174: La migración a TipTap es positiva pero requiere mejoras críticas.Aunque el cambio a TipTap es una buena decisión, hay varios aspectos que necesitan atención inmediata:
- Organización del código
- Seguridad en el manejo de archivos
- Manejo de errores
- Estados de carga
Sugiero dividir este componente en varios archivos:
RichText.tsx: Solo el componenteconfig/editor.ts: Configuración del editorconfig/api.ts: URLs de la APIutils/file.ts: Validación de archivosutils/debounce.ts: Función de debounceEsto mejorará significativamente la mantenibilidad y testabilidad del código.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
frontend/src/components/text/RichText.tsx(1 hunks)frontend/src/components/text/css/quill-styles.css(0 hunks)frontend/src/components/text/css/quill.snow.css(0 hunks)
💤 Files with no reviewable changes (2)
- frontend/src/components/text/css/quill-styles.css
- frontend/src/components/text/css/quill.snow.css
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyze (javascript-typescript)
…arity and maintainability by extracting image attribute processing into separate functions
|
Descripción
Backend:
splitHTMLParagraphsenreport-generator.jspara gestionar correctamente imágenes vacías y asegurar que las propiedadesalttengan un valor predeterminado en caso de ausencia.Frontend:
RichTextpara reemplazar ReactQuill por el editor basado en TipTap, utilizando el paquetereactjs-tiptap-editory sus extensiones. Se agregan múltiples extensiones (como Bold, Italic, Heading, Image, Table, etc.) para ofrecer mayor funcionalidad y compatibilidad.useAuth.tsxpara utilizar la URL de inicialización (initUrl) definida en las variables de entorno.Motivación y Contexto
Un usuario notificó no poder subir imágenes en la sección de pruebas.
¿Cómo ha sido probado?
Se realizaron pruebas manuales en entornos de desarrollo, verificando que el editor:
Tipos de cambios
Lista de verificación
Summary by CodeRabbit
Nuevas Características
Estilos
Mantenimiento y Optimización