refactor(web): style code update style on blur

[airslice]

Overview

Update style has a JSON parse which will effect user's input, update style on blur is better.

What I've done

What I haven't done

How I tested

Which point I want you to review particularly

Memo

Summary by CodeRabbit

• New Features

  • Enhanced the CodeInput component with a configurable tab size for improved code formatting.
  • Added a new property to manage read-only messages effectively.

• Refactor

  • Streamlined the logic for updating style code in the StyleCode component, improving performance and usability.

These updates enhance the user experience by providing better control over code formatting and simplifying style updates.

[coderabbitai]

Walkthrough

The changes involve a refactoring of the StyleCode component to streamline how style code updates are handled, replacing the previous handler with a useRef hook. The CodeInput component has been updated to include new configuration options, enhancing usability. These modifications aim to improve the overall functionality of the Layer Style Panel in the editor interface.

Changes

File	Change Summary
web/src/beta/features/Editor/Map/LayerStylePanel/Editor/StyleCode/index.tsx	Refactored StyleCode component to use useRef for style code updates; removed handleStyleCodeChange and added updateStyle method.
web/src/beta/lib/reearth-ui/components/CodeInput/index.tsx	Updated CodeInput options to include tabSize property and modified readOnlyMessage to set supportHtml to false.

Possibly related PRs

• fix(web): tabs order #1139: The changes in the LayerStyleEditor component may relate to the StyleCode component as both are part of the Layer Style Panel, potentially affecting how styles are managed and displayed in the editor interface.

Suggested labels

web

Suggested reviewers

• mkumbobeaty
• m-abe-dev

Poem

In a world of code, where rabbits hop,
Changes made, we’ll never stop.
Styles refined with a gentle touch,
Code flows smoothly, oh so much!
With every tweak, our hearts do sing,
For in this editor, joy we bring! 🐇✨

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[netlify]

✅ Deploy Preview for reearth-web ready!

Name	Link
🔨 Latest commit	df48da1
🔍 Latest deploy log	https://app.netlify.com/sites/reearth-web/deploys/66fb54e6e186850008217d57
😎 Deploy Preview	https://deploy-preview-1159--reearth-web.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[coderabbitai]

Actionable comments posted: 2

🧹 Outside diff range and nitpick comments (2)

web/src/beta/lib/reearth-ui/components/CodeInput/index.tsx (2)

47-49: Approved changes with a minor suggestion

The changes to the options object look good:

1. Setting tabSize to 2 improves code readability and consistency.
2. Adding supportHtml: false to readOnlyMessage is a good security practice to prevent potential XSS attacks.

Consider adding a comment explaining the security implication of supportHtml: false for future maintainers:

 readOnlyMessage: {
+  // Prevent XSS attacks by disabling HTML support in read-only messages
   supportHtml: false
 },

---

Line range hint 1-138: Summary and next steps

The changes in this file are minor and focused on improving the Monaco Editor configuration:

1. Setting tabSize to 2 for better code formatting.
2. Adding supportHtml: false to readOnlyMessage for improved security.

These changes enhance the editor's usability and security. However, the main PR objective of "updating style on blur" seems to be already implemented in the existing code.

To improve this PR:

1. Update the PR description to accurately reflect the changes made, focusing on the editor configuration improvements.
2. If there are specific style updates intended for the blur event, implement them in the onDidBlurEditorText handler or clarify the intention in the PR description.
3. Consider adding unit tests for the CodeInput component to ensure the blur behavior and new configuration options work as expected.

Let me know if you need any assistance with implementing these suggestions or if you have any questions about the review.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 16722ac and df48da1.

📒 Files selected for processing (2)

• web/src/beta/features/Editor/Map/LayerStylePanel/Editor/StyleCode/index.tsx (2 hunks)
• web/src/beta/lib/reearth-ui/components/CodeInput/index.tsx (1 hunks)

🔇 Additional comments (2)

web/src/beta/lib/reearth-ui/components/CodeInput/index.tsx (1)

Line range hint 66-70: Clarification needed on PR objective

The PR description mentions updating style on blur as a new feature, but the code already contains an onDidBlurEditorText event handler that calls the onBlur callback. This existing implementation seems to align with the PR objective.

Could you clarify if there are any specific changes intended for the blur behavior that are not reflected in this file? If not, consider updating the PR description to accurately reflect the changes made.

To verify the existing blur behavior, you can run the following script:

web/src/beta/features/Editor/Map/LayerStylePanel/Editor/StyleCode/index.tsx (1)

42-43: Event handlers updated correctly to improve style updates

The onChange and onBlur handlers are appropriately updated to enhance the user experience by updating the style only when the input field loses focus.