Tags: xaya1001/flatnotes-git
Tags
feat(mermaid): Enhance Mermaid diagram integration
Refactor the Mermaid diagram component for improved interactivity, performance, and styling.
- **`InteractiveMermaid.vue`**:
- Implemented a more robust fullscreen mode with a backdrop and dedicated close button.
- Migrated controls to a data-driven structure for better extensibility.
- Unified SVG rendering and introduced loading/empty states for better user feedback.
- Refined panning and zooming mechanisms for smoother interaction.
- **`ToastEditor.vue`**: Optimized Mermaid rendering to occur only when the preview tab is actively selected, improving editor performance.
- **`ToastViewer.vue`**: Streamlined component lifecycle by removing unnecessary watchers and unmount hooks.
- **`mermaidRenderer.js`**: Simplified cleanup logic for Mermaid component instances.
- **`toastui-editor-overrides.scss`**: Updated styles to support the new fullscreen behavior, loading indicators, and overall visual consistency of Mermaid diagrams.
feat(mermaid): Revamp interactive Mermaid viewer Enhance the interactive Mermaid diagram viewer with panning, fullscreen mode, and a redesigned control grid; refactor rendering logic for stability; simplify integration in editor and viewer components; and update tests and styles accordingly New Features: - Enable panning (via Ctrl‐drag and control buttons) and fullscreen mode in the Mermaid viewer - Introduce a compact 3×3 control grid for zoom, pan, reset view, fullscreen toggle, and copy source Enhancements: - Refactor renderMermaidBlocks to perform an atomic cleanup‐and‐render operation to prevent stale state - Simplify Mermaid integration by replacing the useMermaidRenderer composable with direct renderMermaidBlocks calls in ToastEditor and ToastViewer - Improve error presentation with a dedicated error box and more robust rendering lifecycle - Update SCSS styling to support fullscreen layout, panning cursors, control grid appearance, and error box theming Tests: - Revise Vitest tests for InteractiveMermaid to use flushPromises, attach components to document.body, and validate new interactions including fullscreen toggle - Fix mermaid.render and clipboard mocking to ensure accurate async test results
feat: Implement interactive Mermaid diagram with theming and pan/zoom
feat: Implement interactive Mermaid diagram with theming and pan/zoom
feat: Implement interactive Mermaid diagram with theming and pan/zoom
feat: Implement interactive Mermaid diagram with theming and pan/zoom
PreviousNext