Componente Comparison - Comparación interactiva de contenido#46
Draft
mfagundez-4geeks wants to merge 21 commits into
Draft
Componente Comparison - Comparación interactiva de contenido#46mfagundez-4geeks wants to merge 21 commits into
mfagundez-4geeks wants to merge 21 commits into
Conversation
… with a draggable slider
- Extract types to separate types.ts file for better organization - Refactor component from CodeComparison to Comparison - Implement flexible content type system (html, text, code, custom) - Add sync modes functionality (default: true) - Replace beforeHtml/afterHtml props with before/after objects
- Add automatic layout detection (slider for visual content, side-by-side for text/code) - Implement side-by-side layout with responsive behavior - Add max-height constraints for mobile (90vh container, 50% per panel) - Ensure scroll behavior in both desktop and mobile views - Update types to include ComparisonLayout enum
- Support mermaid diagrams with code/render toggle - Support markdown with GFM and math rendering - Reuse existing MermaidRenderer component
- Support image comparisons with slider layout - Add customRender prop for fully customizable content rendering
…m component - Add ComparisonRenderer component to parse comparison markdown syntax - Support syntax: type="..." with ---SEPARATOR--- divider - Integrate with Markdowner CustomCodeBlock for language="comparison" - Add CreatorWrapper support for creator mode - Document component in explanatory_components.yml with examples - Support all content types: html, code, text, mermaid, markdown, image - Auto-detect layout (slider for visual, side-by-side for text/code)
…al states Allow specifying initial display mode (raw/rendered) per panel via leftDefaultMode and rightDefaultMode metadata attributes. Enables showing code vs rendered output side-by-side with independent mode toggling. - Add defaultMode to ComparisonItem interface - Implement getInitialMode() helper function - Update ComparisonRenderer to parse leftDefaultMode/rightDefaultMode - Update documentation and examples
- Replace mode toggle buttons with SwitchComponent and add i18n support. - Reorder after panel elements to show switch before label.
Apply clipPath to After panel to hide label and switch when slider position reaches 100%, ensuring symmetric behavior.
Apply sticky positioning with white background to SliderComparison controls when in raw mode, consistent with SideBySideComparison layout.
Rename props and variables to better reflect component's broader use cases beyond temporal comparisons. Update all related files.
- Replace generic comparison component with code_comparison, html_comparison, and code_vs_rendered - Each component now lists only relevant metadata props for its use case
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implementación completa del componente
Comparisonque permite comparar dos bloques de contenido de forma interactiva.Funcionalidades principales
Tipos de contenido soportados:
language)Dos layouts disponibles:
Modos de visualización:
rendered(resultado final) yraw(código fuente)Implementación técnica
code_comparison,html_comparison,code_vs_rendered) con props relevantes por caso de uso