Feature/2.2 text editor for tools export button functionality #230
Conversation
This file contains 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
- Develop converters for Quiz, Flashcards, Worksheet, and Syllabus tools - Update Firestore structure to store original JSON and converted Markdown - Initialize editorState.editHistory with initial version - Handle edge cases like empty responses and special character escaping - Ensure no back-conversion from Markdown to JSON - Integrate converters into the tool generation flow - Test Markdown generation for all tool types
…s-task2 feat(conversion): implement tool-specific JSON-to-Markdown converters
Partial Task 1 Merge
…s-autosave [Task 4] Autosave Logic
[feat] Task5: Added undo & redo for text editor output
[feat] Task1, added DocumentEditor for tool outputs --------- Co-authored-by: Liam OK <[email protected]>
liamohkay
deleted the
feature/2.2-text-editor-for-tools-export-button-functionality
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
Implementations of Task 6: Implement Export Functionality
Provide a concise summary of the changes in this PR. Include the motivation behind these changes and any relevant context.
Provide a concise summary of the changes in this PR. Include the motivation behind these changes and any relevant context.
Enabling user export document generated in the Quiz generation. An export button is created alongside an export SVG icon with a transparent background that matches the design seen on the Figma design template. The export button displays a dropdown with three buttons of export format. Each button is responsible for the export of the markdownContent (the quiz generated) in the respective format.
Related Issue
No related Issue
If this PR addresses an issue, link to it here.
Type of Change
It does not relate to any issue
Please select the type(s) of change that apply and delete those that do not.
Proposed Solution
##Describe your code changes in detail. Explain how you implemented your solution and any design decisions you made.
An ExportButton component was created in the tabButton folder of the component folder. The ExportButton was exported is rendered on the UI in the QuizResponse component. Two different packages were used for the implementation of the export functionality: "jsPDF" package is used for PDF export, and "file-saver" package is used for plain text and HTML export.
Both packages were installed using npm on the terminal.
The Export button alongside it's SVG icon is contained in a single div element. It toggles onClick, displaying a dropdown div element that contains three buttons for the implementation of the three export formats.
A handler function is created for each export format button which is called onClick of the respective button. The handler function handles the export of the markdownContent. The markdownContent is accessed from the redux store using the useSelector hook. The markdownContent is formatted to display properly on the UI. A cleanText function was also created which takes in the text as its parameter, which is used to remove some display issues seen while testing.
How to Test
Provide instructions on how to test these changes. Include details on test configurations, test cases, and expected outcomes.
Login into the Marvel AI platform with the test credential, follow the steps to the point of generating a quiz. The export button is placed at the top of the markdown window. Toggle the export button to display and close the dropdown. Click any of the buttons on the dropdown to export the generate quiz in the preferred format.
Provide instructions on how to test these changes. Include details on test configurations, test cases, and expected outcomes.
Unit Tests
List the unit tests added or modified to verify your changes.
Documentation Updates
Indicate whether documentation needs to be updated due to this PR.
If yes, describe what documentation updates are needed and link to the relevant documentation.
Checklist
Additional Information
Add any other information that might be useful for the reviewers.