fix: merge custom td-class over base classes in CodeBlock

[cossssmin]

Summary by CodeRabbit

Release Notes

• Refactor

  • Updated CSS class handling in the CodeBlock component to better separate base and custom styling, ensuring custom classes properly merge with and can override base utilities.

• Tests

  • Added test cases to verify CSS class merging behavior and confirm that custom styles can properly override conflicting base utilities.

[coderabbitai]

📝 Walkthrough

Walkthrough

CodeBlock.vue moves max-w-0 mso-padding-alt-4 from the tdClass prop default into the hardcoded twMerge call, making the prop an additive override with an empty string default. Two new tests verify that base utilities are preserved when a custom class is passed and that conflicting utilities are overridden via twMerge.

Changes

CodeBlock tdClass extra-classes refactor

Layer / File(s)	Summary
tdClass prop contract and class merge src/components/CodeBlock.vue, src/tests/components/CodeBlock.test.ts	tdClass default changes from 'max-w-0 mso-padding-alt-4' to '' and its doc comment marks it as extra classes. The twMerge call in the template now always includes max-w-0 mso-padding-alt-4 before merging props.tdClass. Two new tests assert base-class retention and twMerge conflict resolution (max-w-full overrides max-w-0).

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

🚥 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 main change: updating how custom td-class values are merged with base classes in the CodeBlock component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/codeblock-tdclass-merge

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/tests/components/CodeBlock.test.ts`:
- Around line 103-108: The test 'keeps base td-class defaults when a custom
td-class is passed' validates that base classes are retained but does not verify
that the passed custom-class is actually preserved in the rendered HTML output.
Add an assertion using expect(html).toMatch() to verify that 'custom-class'
appears in the td class attribute, ensuring the additive class merge behavior is
fully tested.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 5d29d8a8-6275-4643-bb84-24692c2135b3

📥 Commits

Reviewing files that changed from the base of the PR and between 055c012 and 2dfc067.

📒 Files selected for processing (2)

• src/components/CodeBlock.vue
• src/tests/components/CodeBlock.test.ts

[coderabbitai]

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Assert the custom class is preserved in the additive td-class test.

The test checks base class retention but not that the passed custom class survives merge (Line 104). Add an assertion for custom-class so the additive contract is fully covered.

Suggested test tweak

 it('keeps base td-class defaults when a custom td-class is passed', async () => {
   const html = await render({ code: '<div>test</div>', 'td-class': 'custom-class' })

+  expect(html).toMatch(/<td class="[^"]*\bcustom-class\b/)
   expect(html).toMatch(/<td class="[^"]*\bmax-w-0\b/)
   expect(html).toMatch(/<td class="[^"]*\bmso-padding-alt-4\b/)
 })

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	it('keeps base td-class defaults when a custom td-class is passed', async () => {
	const html = await render({ code: '<div>test</div>', 'td-class': 'custom-class' })
	expect(html).toMatch(/<td class="[^"]*\bmax-w-0\b/)
	expect(html).toMatch(/<td class="[^"]*\bmso-padding-alt-4\b/)
	})
	it('keeps base td-class defaults when a custom td-class is passed', async () => {
	const html = await render({ code: '<div>test</div>', 'td-class': 'custom-class' })
	expect(html).toMatch(/<td class="[^"]*\bcustom-class\b/)
	expect(html).toMatch(/<td class="[^"]*\bmax-w-0\b/)
	expect(html).toMatch(/<td class="[^"]*\bmso-padding-alt-4\b/)
	})

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/tests/components/CodeBlock.test.ts` around lines 103 - 108, The test
'keeps base td-class defaults when a custom td-class is passed' validates that
base classes are retained but does not verify that the passed custom-class is
actually preserved in the rendered HTML output. Add an assertion using
expect(html).toMatch() to verify that 'custom-class' appears in the td class
attribute, ensuring the additive class merge behavior is fully tested.