fix(core): disable toolbar action buttons in preview mode

- _updateModeButtons now disables edit-action buttons in preview mode
- Mode-switch buttons (edit/split/preview/fullscreen) and undo/redo remain active
- CSS: .me-btn:disabled with opacity 0.35, cursor not-allowed, pointer-events none
- Constructor calls _updateModeButtons on init for correct initial state
This commit is contained in:
2026-07-24 10:46:45 +08:00
parent a7a66e113f
commit f4921c9447
2 changed files with 27 additions and 2 deletions
+26 -2
View File
@@ -137,6 +137,7 @@ class MarkdownEditor {
setThemeVariables(resolvedThemeConfig, this.el);
this._buildToolbar();
this._updateModeButtons(); // 初始化按钮状态
this._bindEvents();
// 初始内容
@@ -1060,8 +1061,31 @@ class MarkdownEditor {
getMode() { return this._mode; }
_updateModeButtons() {
this.toolbarEl.querySelectorAll('.me-btn[data-mode]').forEach((b) => {
b.classList.toggle('me-active', b.dataset.mode === this._mode);
const isPreview = this._mode === 'preview';
const isEdit = this._mode === 'edit';
this.toolbarEl.querySelectorAll('.me-btn').forEach((b) => {
const mode = b.dataset.mode;
const action = b.dataset.action;
// 模式切换按钮始终可用,高亮当前模式
if (mode) {
b.classList.toggle('me-active', mode === this._mode);
b.disabled = false;
return;
}
// preview 模式:禁用编辑操作按钮
if (isPreview) {
// undo/redo 在 preview 下也可用
if (action === 'undo' || action === 'redo' || action === 'fullscreen') {
b.disabled = false;
} else {
b.disabled = true;
}
} else {
b.disabled = false;
}
});
}