search

5hirish / quinine

A Flutter IDE by developers for developers (In Development)
https://discord.gg/Yh5Nkrznaw
Apache License 2.0
107 stars 8 forks source link

📝 Markdown Viewer added when opening a markdown file #5

Open slimpotatoboy opened 1 year ago

slimpotatoboy commented 1 year ago

Fixes #4

5hirish commented 1 year ago

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:-

  1. 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.

  2. 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.

  3. 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)

  4. 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.

  5. 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.

  6. Screenshots/GIFs: Attach screenshots or GIFs demonstrating the markdown preview feature in action.

  7. 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.

  8. 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!

5hirish commented 1 year ago
Screenshot 2023-05-19 at 6 04 10 PM