Skip to content

feat: add HTML to JSX converter tool#66

Open
GandrothuNagaSaiRishitha wants to merge 1 commit intobetterbugs:developfrom
GandrothuNagaSaiRishitha:feature/html-to-jsx-converter
Open

feat: add HTML to JSX converter tool#66
GandrothuNagaSaiRishitha wants to merge 1 commit intobetterbugs:developfrom
GandrothuNagaSaiRishitha:feature/html-to-jsx-converter

Conversation

@GandrothuNagaSaiRishitha

Description

Adds a new HTML to JSX Converter tool that allows React developers to convert
standard HTML snippets into valid JSX syntax instantly.

Changes made:

  • Added app/components/developmentToolsComponent/htmlToJsxConverter.tsx — the converter component
  • Registered the tool in app/libs/constants.tsx (import, PATHS, category, route)

Fixes #20

Dependencies

No new dependencies added. Uses existing packages already in the project:

  • @monaco-editor/react (already in package.json)
  • antd (already in package.json)
  • @phosphor-icons/react (already in package.json)

Future Improvements

  • Add syntax highlighting label for JSX output pane
  • Support for converting JSX back to HTML

Mentions

Resolves the issue assigned to @GandrothuNagaSaiRishitha

Developer's checklist

  • My PR follows the style guidelines of this project
  • I have performed a self-check on my work
  • I have followed the Coding Guidelines
  • My changes in code generate no new warnings
  • My changes are not breaking another fix/feature of the project
  • I have added test cases to show that my feature works
  • I have added relevant screenshots in my PR
  • There are no UI/UX issues

##Additional Information:
If feature found okay, please merge under apertre 3.0 label and appropriate difficulty labels

@SyedFahad7 SyedFahad7 self-requested a review March 3, 2026 22:59
@SyedFahad7
Copy link
Collaborator

Please rebase your PR branch onto the latest develop (do not merge develop into your feature branch).

Try:

git fetch upstream
git rebase upstream/develop

Resolve conflicts and run local checks (npm run lint, npm run build)
git push --force-with-lease origin <your-branch>

Notes:
No need to fix unrelated pre-existing warnings.
Do fix errors introduced by your PR (especially in touched files).
This rebases only your PR branch; it does not rewrite our develop branch.

Also raise the PR against develop branch and not main @GandrothuNagaSaiRishitha

@GandrothuNagaSaiRishitha
Copy link
Author

@SyedFahad7 ill do it, please excuse me for this inconvinence.

@GandrothuNagaSaiRishitha GandrothuNagaSaiRishitha force-pushed the feature/html-to-jsx-converter branch from 8623e49 to 21c8d53 Compare March 4, 2026 04:52
@GandrothuNagaSaiRishitha GandrothuNagaSaiRishitha changed the base branch from main to develop March 4, 2026 04:56
Copy link
Collaborator

@SyedFahad7 SyedFahad7 left a comment

Choose a reason for hiding this comment

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

Thanks for the contribution @GandrothuNagaSaiRishitha . The tool implementation is substantial and constants wiring is mostly done, and build/lint checks are generally fine on my side.

I am requesting changes for two blockers before merge:
1.Please add the tool entry in app/libs/developmentToolsConstant.tsx for slug html-to-jsx-converter. The slug page currently destructures metadata directly, so missing entry can break runtime rendering.
2. Event attributes like onclick currently convert to onClick as a quoted string value, which is not valid React handler usage in normal TSX flows. Please adjust conversion behavior for inline event handlers.

Non-blocking: please align formatting in constants sections for consistency with surrounding code.

Once these are fixed, I can re-review quickly.

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[feature]: Add HTML to JSX Converter for React developers

2 participants