quinine
quinine copied to clipboard
📝 Markdown Viewer added when opening a markdown file
Fixes #4
Hey guys please review the following and let me know your thoughts. Please feel free to discuss on the implementation aspect in detail. @lohanidamodar has already raised some concerns with me in the morning regarding embedded HTML specifically:-
-
Functionality Description: The markdown preview feature allows users to view their Markdown files (
.md
,.mkd
,.markdown
) in a beautifully rendered format within Tonic IDE. This feature aims to make writing and understanding the contents of markdown files easier and more interactive. -
User Interface: A new "Preview" translucent floating icon button (using Font Awesome
eye
icon) is introduced markdown file is opened at the top right-hand corner. Upon clicking this button, a split-screen view is enabled where the left-hand side allows editing of the markdown file, while the right-hand side instantly displays the rendered markdown content. -
Implementation Details: The feature uses a Dart Markdown
flutter_markdown
rendering library to convert markdown syntax into HTML. The converted HTML is then displayed in a WebView widget on the right side of the split-screen. This ensures a smooth and seamless experience between writing and previewing markdown files. (Feel free to expand on this) -
Testing: This feature is covered by widget tests to ensure the split-screen view works as expected when the "Preview" button is clicked. The tests also check that the Markdown-to-HTML conversion is accurately reflected in the preview. Verify image, gif rendering.
-
Performance Considerations: The markdown rendering is optimized to handle large markdown files efficiently. The rendering happens asynchronously to avoid blocking the UI thread and affecting the IDE's performance.
-
Screenshots/GIFs: Attach screenshots or GIFs demonstrating the markdown preview feature in action.
-
Known Issues: Currently, the preview only updates when the file is saved. This means any unsaved changes will not be reflected in the preview. We are planning to enhance this in future releases.
-
Future Improvements: We're planning to add support for custom markdown extensions and a real-time markdown preview that updates as you type. We also aim to implement synchronized scrolling between the editor and preview views.
I will share the design screenshot in few hours!