feat(code-editor): make rendering the copy button a property

[paulinewahle]

fix: #3797

Summary by CodeRabbit

• New Features
  • The CodeEditor now includes a new setting to control the visibility of the copy-to-clipboard button. The button is enabled by default, but you can disable it when needed. This provides greater flexibility for customizing the editor interface while maintaining full backward compatibility with existing implementations.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

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

[coderabbitai]

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.

• 🔍 Trigger a full review

📝 Walkthrough

Walkthrough

The CodeEditor component gains a new public copyButton prop (default true) to control the visibility of the copy-to-clipboard button. The rendering logic is updated to respect this prop. A new example component demonstrates the feature with a toggle control.

Changes

Cohort / File(s)	Summary
CodeEditor Component Updates src/components/code-editor/code-editor.tsx	Added public copyButton prop with @Prop({ reflect: true }) decorator defaulting to true; updated renderCopyButton logic to gate button visibility on this prop in addition to existing conditions
Example Implementation src/components/code-editor/examples/code-editor-copy.tsx	New example component demonstrating copyButton prop functionality with internal state management, event handlers for content and copy button visibility changes, and UI toggle (switch) control

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• feat(code-editor): implement copy button for editor content #3768: Implements the copy button functionality, translations, and snackbar behavior that this PR makes configurable via the new copyButton prop.

Suggested reviewers

• Kiarokh

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the primary change: making the copy button rendering configurable via a property.
Linked Issues check	✅ Passed	The changes fully implement issue #3797: a copyButton property is added to CodeEditor (default true), allowing control of copy button rendering.
Out of Scope Changes check	✅ Passed	All changes are within scope; the new copyButton prop, updated rendering logic, and example component directly address the linked issue requirements.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch copy-button-prop

---

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

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

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@src/components/code-editor/code-editor.tsx`:
- Around line 137-141: The docstring for the copyButton prop is misleading;
update the comment above the `@Prop` public copyButton = true; declaration (in the
CodeEditor component) to explicitly state the intended behavior and default,
e.g., "Whether to show the copy button — set to false to hide (default: true)",
so readers understand true means visible and false hides the button.

In `@src/components/code-editor/examples/code-editor-copy.tsx`:
- Around line 1-37: The render method in the CodeExampleCopy component currently
returns an array (in render), which violates Stencil JSX guidelines and causes
key lint errors; update the import from '@stencil/core' to include Host and
change the render() return to wrap the two siblings inside a single <Host>
element (containing the limel-code-editor and limel-example-controls) instead of
returning an array; ensure any referenced handlers (handleChange,
toggleCopyButton) remain unchanged and the component still uses `@State`() json
and copyButton as before.