Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
webfanzc wants to merge 1 commit into
base: main
Choose a base branch
from
+23 −35
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 13 additions & 15 deletions packages/core/src/components/XMarkdownCore/components/CodeBlock/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import { useMarkdownContext } from '../MarkdownProvider';
import RunCode from '../RunCode/index.vue';
import {
controlEle,
controlHasRunCodeEle,
copyCode,
isDark,
languageEle,
Expand All @@ -43,7 +42,13 @@ const preStyle = ref<any | null>(null);
const preClass = ref<string | null>(null);
const themes = computed(() => context?.value?.themes ?? shikiThemeDefault);
const colorReplacements = computed(() => context?.value?.colorReplacements);
const nowViewBtnShow = computed(() => context?.value?.needViewCodeBtn ?? false);
// 当 needViewCodeBtn 为 true 或 enableCodePreview 为 true 时，启用 HTML 代码块的特殊处理
const nowViewBtnShow = computed(() => {
const needViewCodeBtn = context?.value?.needViewCodeBtn ?? false;
const enableCodePreview =
context?.value?.codeXProps?.enableCodePreview ?? false;
return needViewCodeBtn || enableCodePreview;
});
const viewCodeModalOptions = computed(
() => context?.value?.viewCodeModalOptions
);
Expand Down Expand Up @@ -175,19 +180,12 @@ const RunCodeComputed = computed(() => {
: undefined;
});
const codeControllerEleComputed = computed(() => {
if (nowCodeLanguage.value === 'html' && nowViewBtnShow.value) {
return controlHasRunCodeEle(
() => {
copyCode(renderLines.value);
},
() => {
viewCode(renderLines.value);
}
);
}
return controlEle(() => {
copyCode(renderLines.value);
});
const viewCallback =
nowCodeLanguage.value === 'html' && nowViewBtnShow.value
? () => viewCode(renderLines.value)
: undefined;

return controlEle(() => copyCode(renderLines.value), viewCallback);
});

watch(
Expand Down
30 changes: 10 additions & 20 deletions packages/core/src/components/XMarkdownCore/components/CodeBlock/shiki-header.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,12 @@ export function languageEle(language: string) {
* @export
* @param {() => void} copy
*/
export function controlEle(copy: () => void) {
export function controlEle(copy: () => void, view?: () => void) {
const context = useMarkdownContext();
const { codeXProps, needViewCodeBtn } = toValue(context) || {};
const shouldShowPreview =
view && (needViewCodeBtn || codeXProps?.enableCodePreview);

return h(
ElSpace,
{
Expand All @@ -228,8 +233,9 @@ export function controlEle(copy: () => void) {
},
{
default: () => [
shouldShowPreview ? h(RunCodeButton, { onView: view }) : null,
toggleThemeEle(),
h(CopyCodeButton, { onCopy: copy }) // ✅ 改为组件形式
h(CopyCodeButton, { onCopy: copy })
]
}
);
Expand All @@ -239,28 +245,12 @@ export function controlEle(copy: () => void) {
* @description 描述 语言头部操作按钮(带预览代码按钮)
* @date 2025-07-09 11:15:27
* @author tingfeng
* @deprecated 已废弃，请使用 controlEle 代替
* @param copy
* @param view
*/
export function controlHasRunCodeEle(copy: () => void, view: () => void) {
const context = useMarkdownContext();
const { codeXProps } = toValue(context) || {};
return h(
ElSpace,
{
class: `markdown-elxLanguage-header-space`,
direction: 'horizontal'
},
{
default: () => [
codeXProps?.enableCodePreview
? h(RunCodeButton, { onView: view })
: null,
codeXProps?.enableThemeToggle ? toggleThemeEle() : null,
codeXProps?.enableCodeCopy ? h(CopyCodeButton, { onCopy: copy }) : null // ✅ 改为组件形式
]
}
);
return controlEle(copy, view);
}

/**
Expand Down