fix(XMarkdown): 修复代码块控制按钮显示逻辑

[webfanzc]

重构控制按钮渲染函数，统一 controlEle 和 controlHasRunCodeEle 的逻辑， 修复 needViewCodeBtn 导致主题切换按钮异常隐藏的问题。

Closes #418

Summary by CodeRabbit

• New Features
  • Code blocks now feature improved preview button visibility and behavior with enhanced controls for HTML code examples.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR restores HTML code block preview button functionality by refactoring the control element composition. It modifies the CodeBlock component to pass an optional view callback to controlEle, enabling the preview button to display when needViewCodeBtn or enableCodePreview is true, addressing a regression from recent versions.

Changes

Cohort / File(s)	Summary
CodeBlock Component packages/core/src/components/XMarkdownCore/components/CodeBlock/index.vue	Removed controlHasRunCodeEle import; introduced nowViewBtnShow computed property combining needViewCodeBtn and enableCodePreview conditions; refactored codeControllerEleComputed to pass viewCallback (triggering viewCode) to controlEle invocation; preserved RunCodeComputed logic with added explanatory comment.
Header Utilities packages/core/src/components/XMarkdownCore/components/CodeBlock/shiki-header.ts	Extended controlEle signature to accept optional view?: () => void parameter; added conditional rendering of RunCodeButton when shouldShowPreview is truthy; deprecated controlHasRunCodeEle to delegate entirely to controlEle(copy, view) with deprecation note.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• feat: 给xMarkdown增加enableCodePreview、enableThemeToggle、enableCodeCopy #348: Parallel modifications to code-block header controls supporting optional view handlers and preview button behavior across related components.

Suggested reviewers

• yuguaa

Poem

🐰 A button hops back from the dark,
Preview sparkles with its mark,
The view callback finds its way,
HTML dances bright today! ✨

🚥 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 PR title directly addresses the main change: refactoring code block control button display logic to fix the preview button visibility issue mentioned in the linked issue.
Linked Issues check	✅ Passed	The changes align with issue #418 requirements: the PR refactors control button rendering logic and fixes the preview button display issue in HTML code blocks.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the code block control button display logic as outlined in the linked issue and PR objectives.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

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

✨ Finishing touches

• 📝 Generate docstrings

---

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

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/core/src/components/XMarkdownCore/components/CodeBlock/shiki-header.ts (1)

222-242: Critical: Missing toValue import.

Line 224 uses toValue but it's not imported. This will cause a runtime error when the function executes.

🐛 Proposed fix

Add toValue to the imports from vue:

-import { h, ref } from 'vue';
+import { h, ref, toValue } from 'vue';

🧹 Nitpick comments (2)

packages/core/src/components/XMarkdownCore/components/CodeBlock/shiki-header.ts (2)

223-226: LGTM: Unified preview button logic.

The consolidated logic correctly determines when to show the preview button by checking both needViewCodeBtn and enableCodePreview. This fixes the issue where the theme toggle button was incorrectly hidden.

Note: This logic is similar to nowViewBtnShow computed in index.vue (lines 46-51). Consider extracting this into a shared utility if it needs to be reused elsewhere to maintain consistency.

---

248-254: Consider adding version and removal timeline information to the deprecation notice.

The deprecation is properly implemented with correct delegation to controlEle. However, unlike most deprecations in the codebase, it lacks version context. For consistency and to help external consumers, consider enhancing the JSDoc:

* @deprecated 已废弃，请使用 controlEle 代替 (since v1.x.x, will be removed in v2.0.0)

Note: The function is not used internally, so it only affects external consumers.

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cdc83aa and cdd23eb.

📒 Files selected for processing (2)

• packages/core/src/components/XMarkdownCore/components/CodeBlock/index.vue
• packages/core/src/components/XMarkdownCore/components/CodeBlock/shiki-header.ts

🧰 Additional context used

🧬 Code graph analysis (1)

packages/core/src/components/XMarkdownCore/components/CodeBlock/index.vue (3)

packages/core/src/components/XMarkdownCore/components/RunCode/type.d.ts (4)

• ElxRunCodeContentProps (85-90)
• ElxRunCodeExposeProps (92-101)
• ElxRunCodeContentExposeProps (103-112)
• ElxRunCodeProps (28-73)

packages/core/src/components/XMarkdownCore/shared/constants.ts (1)

• enableCodePreview (66-71)

packages/core/src/components/XMarkdownCore/shared/types.d.ts (1)

• CodeXProps (37-42)

🔇 Additional comments (2)

packages/core/src/components/XMarkdownCore/components/CodeBlock/index.vue (2)

45-51: LGTM: Correctly implements dual-flag check.

The nowViewBtnShow computed property correctly enables HTML code block special handling when either needViewCodeBtn or enableCodePreview is true, addressing the issue described in #418.

---

183-189: LGTM: Clean refactoring to unified controlEle.

The refactored logic correctly creates a viewCallback only for HTML code blocks when view functionality is enabled, then passes it to the unified controlEle function. This simplifies the previous conditional path that selected between controlEle and controlHasRunCodeEle.