code editor: make it `invalid` when the value is invalid

[Kiarokh]

When the code inside the Code Editor is invalid (e.g. contains lint errors), the component renders a visual element <div class="CodeMirror-gutter-elt" inside <div class="CodeMirror-gutter-wrapper".

Now that the component has an invalid prop: #3763 we can use this internal validation mechanisms to set the component to invalid, when its value is invalid. For example, when the value contains lint errors.

The invalid prop in limel-code-editor has proper accessibility support, and is better wired for indicating the invalid state.

That alert of "Should be a valid JSON" doesn't need to be displayed like this anymore:

lime-elements/src/components/form/widgets/code-editor.ts

Line 49 in 1d52e26

props.onValidate('Should be a valid JSON document');

We need to revisit this form widget, and instead use helperText,

https://github.com/Lundalogik/lime-elements/blob/main/src/components/form/widgets/code-editor.ts

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

_{You can configure auto-planning by selecting labels in the issue_enrichment configuration.}

🔗 Similar Issues

Related Issues

• form: visualize collapsible sections that contain invalid info or errors #3528
• ☂ Form: better indicate which collapsible section contains invalid field(s) #3524
• collapsible section: add invalid prop #3527
• Text Editor: trailing * is added to label even if required=false #3390

🔗 Related PRs

#3199 - Use limel-code-editor in dynamic form example; update CSS max height [merged]

👤 Suggested Assignees

• Kiarokh
• TommyLindh2
• paulinewahle

---

🧪 Issue enrichment is currently in early access.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false