Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

📝 Markdown Viewer added when opening a markdown file #5

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

📝 Markdown Viewer added when opening a markdown file #5

wants to merge 1 commit into from

Conversation

slimpotatoboy
Copy link

@slimpotatoboy slimpotatoboy commented May 19, 2023 •
edited by 5hirish
Loading

Fixes #4

lohanidamodar
lohanidamodar suggested changes May 19, 2023
View reviewed changes
Copy link
Contributor

@lohanidamodar lohanidamodar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @slimpotatoboy, Thank you for your contribution. There are few things we would like to discuss

  1. The markdown widget doesn't support HTML tags by default, however there seems to be a way as described in the use case of another package
    https://github.com/asjqkkkk/markdown_widget/blob/dev/example/lib/main.dart
    We don't want to switch to markdown_widget if possible, use the workaround suggested there with this package. I briefly looked at it and I think it's possible. Would you be willing to take a look at it?

lib/views/editor/code.dart
@@ -70,7 +71,34 @@ class CodeEditor extends HookConsumerWidget {
codeController.setCursor(sourceFile.extentOffset);
}

return getCodeEditor(ref, focusNode, codeController, codeStyle);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's use MultiSplitView instead so that editor and viewer is resizable.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes! Also, It will easy to extend and implement split view for open files (left, right) etc. We might have to maintain multiple providers for open files then. Eg. If we implement only horizontal split in the beginning then, two providers to maintain open files on split view left and split view right! LMK

@5hirish
Copy link
Owner

5hirish commented May 19, 2023

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
Copy link
Owner

5hirish commented May 19, 2023

Screenshot 2023-05-19 at 6 04 10 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@5hirish 5hirish 5hirish left review comments

@lohanidamodar lohanidamodar lohanidamodar requested changes

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
dependency flutter
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Markdown Preview When Opening a markdown file
3 participants
@slimpotatoboy @5hirish @lohanidamodar