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:
+26
-2
@@ -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;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -93,6 +93,7 @@ const generateCSS = () => {
|
||||
.me-btn:hover { background: var(--md-code-bg); color: var(--md-accent); }
|
||||
.me-btn:active { transform: scale(0.92); }
|
||||
.me-btn.me-active { background: var(--md-accent); color: #fff; }
|
||||
.me-btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
|
||||
.me-btn:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 1px; }
|
||||
.me-btn svg { width: 17px; height: 17px; display: block; }
|
||||
.me-btn span { font-size: 12px; font-weight: 500; }
|
||||
|
||||
Reference in New Issue
Block a user