Use limel-code-editor in dynamic form example; update CSS max height #3199
Conversation
|
Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-3199/ |
|
|
||
| public render() { | ||
| return [ | ||
| <textarea onChange={this.handleTextChange}>{this.text}</textarea>, |
There was a problem hiding this comment.
in the previous version, one could typ inside the textarea and see the results live in the form below. We should make sure that the same thing happens when using the code-editor
There was a problem hiding this comment.
On testing it doesn't seem to update live in the form below.
There was a problem hiding this comment.
Screen.Recording.2025-08-11.at.13.45.29.mov
it seems that the form updates are 1 character behind the actual input of the code editor 🤔
There was a problem hiding this comment.
it's OK to just close the issue and PR too. This is only in the documentations and we don't have to spend time on fixing it. The equation of the efforts versus value added, is a bit questionable 😅
paulinewahle
force-pushed
the
dynamic-schema-code-editor
branch
3 times, most recently
from
33be529 to
1b6d8f8
Compare
adrianschmidt
force-pushed
the
main
branch
3 times, most recently
from
197298f to
a0e1088
Compare
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
|
Note Other AI code review bot(s) detectedCodeRabbit 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 skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 📝 WalkthroughWalkthroughReplaces 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
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
Out-of-scope changes(No out-of-scope changes detected.) Suggested labels
Suggested reviewers
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
adrianschmidt
force-pushed
the
dynamic-schema-code-editor
branch
from
1b6d8f8 to
b8ebf82
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/form/examples/dynamic-form.scss(1 hunks)src/components/form/examples/dynamic-form.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/form/examples/dynamic-form.scss
🧰 Additional context used
🪛 Biome (1.9.4)
src/components/form/examples/dynamic-form.tsx
[error] 48-55: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Docs / Publish Docs
- GitHub Check: Test
- GitHub Check: Build
🔇 Additional comments (2)
src/components/form/examples/dynamic-form.tsx (2)
48-55: Great improvement using limel-code-editor instead of textareaReplacing the textarea with a code editor provides a better user experience for editing JSON, with features like syntax highlighting, line numbers, linting, and code folding.
🧰 Tools
🪛 Biome (1.9.4)
[error] 48-55: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
72-82:Details
❓ Verification inconclusive
Verify handling of
event.target.valuewith limel-code-editorThe code editor component might emit events with a different structure than a standard textarea. Please verify that
event.target.valuestill correctly accesses the edited content.
🏁 Script executed:
#!/bin/bash # Search for other usages of limel-code-editor to see how the onChange event is typically handled rg --type ts "limel-code-editor.*onChange" # Also search for the implementation of limel-code-editor to understand its event structure fd -e ts -e tsx "code-editor" src/components/Length of output: 432
Action: Confirm correct event property for limel-code-editor events
At
src/components/form/examples/dynamic-form.tsx(lines 72–82), thehandleTextChangemethod currently accesses the edited content viaevent.target.value. Since thelimel-code-editorcomponent may emit a custom event structure—potentially using a property likeevent.detailinstead of the conventionaltarget.value—please verify that the current usage correctly retrieves the updated content. If the event structure deviates from that of a standard textarea, update the handler accordingly to ensure the proper value is captured.
| limel-code-editor { | ||
| width: 100%; | ||
| min-height: 300px; | ||
| } |
There was a problem hiding this comment.
| limel-code-editor { | |
| width: 100%; | |
| min-height: 300px; | |
| } | |
| limel-code-editor { | |
| --code-editor-max-height: 20rem; | |
| } |
Kiarokh
changed the title
There was a problem hiding this comment.
Pull Request Overview
This PR replaces a basic textarea with a custom code editor component for JSON editing in the dynamic form example. The change enhances the user experience by providing advanced features like syntax highlighting, line numbering, linting, and code folding for better JSON editing capabilities.
Key changes:
- Replaced
<textarea>with<limel-code-editor>component configured for JSON - Updated event handling to use the new component's event structure
- Modified styling to accommodate the new editor component
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/components/form/examples/dynamic-form.tsx | Replaces textarea with limel-code-editor and updates event handling |
| src/components/form/examples/dynamic-form.scss | Updates CSS selector and properties for the new code editor component |
| this.text = event.target.value; | ||
| this.text = event.detail; | ||
| try { | ||
| const json = JSON.parse(event.target.value); |
There was a problem hiding this comment.
The code is trying to parse event.target.value but the event handling was changed to use event.detail on line 73. This should be JSON.parse(this.text) or JSON.parse(event.detail) to be consistent with the new event structure.
| const json = JSON.parse(event.target.value); | |
| const json = JSON.parse(event.detail); |
coderabbitai
bot
changed the title
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/components/form/examples/dynamic-form.tsx (1)
72-76: Fix change handler: parse JSON from event.detail (root cause of “no live update”)limel-code-editor emits the new value in event.detail. Parsing event.target.value leaves schema unchanged, breaking live updates.
Apply this diff:
- private handleTextChange = (event) => { - this.text = event.detail; - try { - const json = JSON.parse(event.target.value); - if (json) { - this.schema = json; - } - } catch (e) { - console.log(e); - } - }; + private handleTextChange = (event: CustomEvent<string>) => { + const value = event.detail; + this.text = value; + try { + const parsed = JSON.parse(value); + if (parsed && typeof parsed === 'object') { + this.schema = parsed as FormSchema; + } + } catch (e) { + console.log(e); + } + };Please verify: typing valid JSON in the editor updates the form below in real time.
Also applies to: 72-82
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/components/form/examples/dynamic-form.scss(1 hunks)src/components/form/examples/dynamic-form.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
src/components/**/*.scss
📄 CodeRabbit Inference Engine (.cursor/rules/css-class-names-in-components-using-shadow-dom.mdc)
Do not use BEM-style class names in CSS for components, as components use shadow-DOM.
Files:
src/components/form/examples/dynamic-form.scss
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/wrap-multiple-jsx-elements-in-host-not-in-array.mdc)
When returning multiple JSX elements from the
rendermethod, never wrap them in an array literal. Instead, always wrap them in the special<Host>element. When there is already a single top-level element, it does not have to be wrapped in<Host>.
Files:
src/components/form/examples/dynamic-form.tsx
src/components/**/*.tsx
⚙️ CodeRabbit Configuration File
When contributors add new props to existing components in the lime-elements repository, they should always add documentation examples that demonstrate the new prop's usage and explain how it works. This helps with user adoption, feature discoverability, and maintains comprehensive documentation.
Files:
src/components/form/examples/dynamic-form.tsx
🧠 Learnings (2)
📚 Learning: 2025-04-25T13:32:56.396Z
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.tsx:30-38
Timestamp: 2025-04-25T13:32:56.396Z
Learning: For StencilJS components in lime-elements, prefer using the `<Host>` element to wrap child elements in the render method instead of returning an array of elements. This follows the standard pattern in the codebase and eliminates the need for key attributes.
Applied to files:
src/components/form/examples/dynamic-form.tsx
📚 Learning: 2025-04-25T13:32:56.396Z
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.tsx:30-38
Timestamp: 2025-04-25T13:32:56.396Z
Learning: For StencilJS components in lime-elements, prefer using the `<Host>` element to wrap child elements in the render method instead of returning an array of elements, which eliminates the need for key attributes and follows StencilJS best practices.
Applied to files:
src/components/form/examples/dynamic-form.tsx
🪛 Biome (2.1.2)
src/components/form/examples/dynamic-form.tsx
[error] 48-55: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Docs / Publish Docs
- GitHub Check: Build
- GitHub Check: Test
🔇 Additional comments (1)
src/components/form/examples/dynamic-form.scss (1)
1-4: LGTM: styles aligned with limel-code-editorUsing a CSS custom property for max height is appropriate and keeps styling encapsulated.
paulinewahle
force-pushed
the
dynamic-schema-code-editor
branch
2 times, most recently
from
03df1fa to
32ffb35
Compare
| <limel-code-editor | ||
| language="json" | ||
| lineNumbers={true} | ||
| lint={true} | ||
| fold={true} | ||
| onChange={this.handleTextChange} | ||
| value={this.text} | ||
| /> | ||
| , | ||
| <br />, | ||
| <limel-form | ||
| onChange={this.handleFormChange} | ||
| onValidate={this.handleValidate} | ||
| value={this.formData} | ||
| schema={this.schema} | ||
| /> | ||
| , | ||
| <limel-example-value value={this.formData} />, | ||
| <limel-example-value label="Errors" value={this.errors} />, |
There was a problem hiding this comment.
| <limel-code-editor | |
| language="json" | |
| lineNumbers={true} | |
| lint={true} | |
| fold={true} | |
| onChange={this.handleTextChange} | |
| value={this.text} | |
| /> | |
| , | |
| <br />, | |
| <limel-form | |
| onChange={this.handleFormChange} | |
| onValidate={this.handleValidate} | |
| value={this.formData} | |
| schema={this.schema} | |
| /> | |
| , | |
| <limel-example-value value={this.formData} />, | |
| <limel-example-value label="Errors" value={this.errors} />, | |
| <limel-code-editor | |
| language="json" | |
| lineNumbers={true} | |
| lint={true} | |
| fold={true} | |
| onChange={this.handleTextChange} | |
| value={this.text} | |
| /> | |
| <br /> | |
| <limel-form | |
| onChange={this.handleFormChange} | |
| onValidate={this.handleValidate} | |
| value={this.formData} | |
| schema={this.schema} | |
| /> | |
| <limel-example-value value={this.formData} /> | |
| <limel-example-value label="Errors" value={this.errors} /> |
The commas aren't needed anymore, and if kept, they'll render in the DOM as ,s
paulinewahle
force-pushed
the
dynamic-schema-code-editor
branch
from
318a861 to
d75083c
Compare
| this.text = event.detail; | ||
| try { | ||
| const json = JSON.parse(event.target.value); | ||
| const json = JSON.parse(event.detail); |
There was a problem hiding this comment.
@Kiarokh I redefined this to fix the lagging render issue in the last fixup
|
🎉 This PR is included in version 38.21.3 🎉 The release is available on: Your semantic-release bot 📦🚀 |
fix: #1859
Review:
Browsers tested:
(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)
Windows:
Linux:
macOS:
Mobile:
Summary by CodeRabbit
New Features
Style