fix(dynamic-form): change example from textarea to code-editor

[paulinewahle]

fix: https://github.com/Lundalogik/lime-elements/issues/1859

Review:

• [ ] Commits are atomic
• [ ] Commits have the correct type for the changes made
• [ ] Commits with breaking changes are marked as such

Browsers tested:

(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)

Windows:

• [ ] Chrome
• [ ] Edge
• [ ] Firefox

Linux:

• [ ] Chrome
• [ ] Firefox

macOS:

• [ ] Chrome
• [ ] Firefox
• [ ] Safari

Mobile:

• [ ] Chrome on Android
• [ ] iOS

Summary by CodeRabbit

• New Features
  • Replaced the standard text input with a custom code editor for JSON editing, offering advanced features such as syntax highlighting, line numbering, linting, and code folding.
• Style
  • Adjusted styling by removing fixed height constraints to allow the new editor to render more dynamically.

[github-actions[bot]]

Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-3199/

[adrianschmidt]

@coderabbitai full review

[coderabbitai[bot]]

:white_check_mark: Actions performed

Full review triggered.

[coderabbitai[bot]]

[!NOTE]

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

[!IMPORTANT]

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

📝 Walkthrough

Walkthrough

Replaces a textarea with a limel-code-editor in the dynamic form example and updates accompanying CSS to target the new element and set a max height via a CSS custom property.

Changes

Cohort / File(s)	Change Summary
Example stylesheet src/components/form/examples/dynamic-form.scss	Selector changed from textarea → limel-code-editor; added --code-editor-max-height: 20rem; removed min-height: 300px; kept width: 100%.
Example component src/components/form/examples/dynamic-form.tsx	Replaced <textarea> with <limel-code-editor language="json" lineNumbers={true} lint={true} fold={true}>; updated onChange handler to read event.detail for value assignment; render value bound to this.text.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant DynamicForm
    participant CodeEditor as limel-code-editor

    User ->> CodeEditor: Edit JSON
    CodeEditor -->> DynamicForm: onChange (event.detail)
    DynamicForm ->> CodeEditor: Update value (this.text)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Assessment against linked issues

Objective (issue)	Addressed	Explanation
Use limel-code-editor instead of textarea in form example [#1859]	✅

Out-of-scope changes

(No out-of-scope changes detected.)

Suggested labels

maintenance

Suggested reviewers

• jgroth
• LucyChyzhova

✨ Finishing Touches

🧪 Generate unit tests

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment
• [ ] Commit unit tests in branch dynamic-schema-code-editor

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

‼️ IMPORTANT Auto-reply has been disabled for this repository in the CodeRabbit settings. The CodeRabbit bot will not respond to your replies unless it is explicitly tagged.

• 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.
• 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 the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

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.

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• 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.

[lime-opensource]

:tada: This PR is included in version 38.21.3 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: