feat: v0.2.2 — plugin refactor, i18n, outline tracking, formatTable, code title, fr locale
## Added
- French (fr) locale with 60+ translations
- Outline panel scroll tracking with active heading highlight
- exec('formatTable') for auto-aligning Markdown table columns
- Code block title rendering via ```js title=hello.js```
- Escaped pipe \| support in table cells
- Custom block token fallback rendering as <div>
- Gutter incremental DOM update (no more full innerHTML)
- 694 tests (+10)
## Changed
- All 6 preset plugins refactored to closure-based state (no this pollution)
- shortcutHelp plugin now i18n-aware (shortcut labels follow locale)
- Context menu labels (Cut/Copy/Paste/Select All) i18n-translated
- Warm theme now has progressBg + closeHoverBg fields
This commit is contained in:
+220
-160
@@ -207,148 +207,177 @@ dl{margin:.8em 0}dt{font-weight:650;margin:.6em 0 .2em}dd{margin:0 0 .3em 1.6em;
|
||||
};
|
||||
|
||||
const searchReplacePlugin: Plugin = {
|
||||
name: 'searchReplace', version: '0.1.0', description: 'Search & Replace (Ctrl+F/H)', priority: 80,
|
||||
name: 'searchReplace', version: '0.2.0', description: 'Search & Replace (Ctrl+F/H)', priority: 80,
|
||||
install(editor) {
|
||||
if (!editor || !editor.textarea || typeof document === 'undefined') return;
|
||||
this._injectStyle!();
|
||||
(this as any)._onKeydown = (e: KeyboardEvent) => {
|
||||
// Inject style once globally
|
||||
if (!document.getElementById('me-search-style')) {
|
||||
const style = document.createElement('style'); style.id = 'me-search-style';
|
||||
style.textContent = `.me-search{position:absolute;top:8px;right:12px;z-index:20;display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--md-toolbar-bg,#f8f9fa);border:1px solid var(--md-border,rgba(0,0,0,0.1));border-radius:8px;box-shadow:0 8px 24px -8px rgba(0,0,0,0.2);font-size:13px;min-width:280px}.me-search-row{display:flex;gap:4px;align-items:center}.me-search input{flex:1;min-width:0;padding:4px 8px;border:1px solid var(--md-border,rgba(0,0,0,0.15));border-radius:4px;background:var(--md-textarea-bg,#fff);color:var(--md-text,#1f2937);font-size:13px}.me-search input:focus{outline:none;border-color:var(--md-accent,#3b82f6)}.me-search button{padding:4px 8px;border:1px solid var(--md-border,rgba(0,0,0,0.15));background:var(--md-bg,#fff);color:var(--md-text,#1f2937);border-radius:4px;cursor:pointer;font-size:12px;line-height:1}.me-search button:hover{background:var(--md-accent,#3b82f6);color:#fff;border-color:var(--md-accent,#3b82f6)}.me-search .me-search-count{color:var(--md-muted,#6b7280);font-size:12px;min-width:60px;text-align:center}.me-search .me-search-close{padding:2px 6px}`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
const state = {
|
||||
_panel: null as HTMLElement | null,
|
||||
_regexMode: false,
|
||||
_cleanup: null as (() => void) | null,
|
||||
};
|
||||
|
||||
const _updateReplaceVisible = () => {
|
||||
if (!state._panel) return;
|
||||
const show = state._panel.dataset.replace === '1';
|
||||
const row = state._panel.querySelector('.me-search-replace-row') as HTMLElement;
|
||||
if (row) row.style.display = show ? 'flex' : 'none';
|
||||
};
|
||||
|
||||
const _close = () => {
|
||||
if (state._cleanup) { state._cleanup(); state._cleanup = null; }
|
||||
state._panel = null;
|
||||
if (editor && editor.textarea) editor.textarea.focus();
|
||||
};
|
||||
|
||||
const _open = (showReplace?: boolean) => {
|
||||
if (state._panel) {
|
||||
state._panel.dataset.replace = showReplace ? '1' : '0';
|
||||
_updateReplaceVisible();
|
||||
const inp = state._panel.querySelector('.me-search-find') as HTMLInputElement;
|
||||
if (inp) { inp.focus(); inp.select(); }
|
||||
return;
|
||||
}
|
||||
const selected = editor.textarea.value.substring(editor.textarea.selectionStart, editor.textarea.selectionEnd);
|
||||
const panel = document.createElement('div'); panel.className = 'me-search';
|
||||
panel.dataset.replace = showReplace ? '1' : '0';
|
||||
panel.innerHTML = `<div class="me-search-row"><input type="text" class="me-search-find" placeholder="${t('searchPlaceholder')||'Find'}" value="${escapeAttr(selected)}"/><button class="me-search-prev">↑</button><button class="me-search-next">↓</button><span class="me-search-count"></span><button class="me-search-regex" title="Regex">.*</button><button class="me-search-close">×</button></div><div class="me-search-row me-search-replace-row"><input type="text" class="me-search-replace" placeholder="${t('replacePlaceholder')||'Replace'}"/><button class="me-search-replace-one">${t('replace')||'Replace'}</button><button class="me-search-replace-all">${t('replaceAll')||'All'}</button></div>`;
|
||||
editor.el.appendChild(panel); state._panel = panel;
|
||||
_updateReplaceVisible();
|
||||
state._regexMode = false;
|
||||
const fi = panel.querySelector('.me-search-find') as HTMLInputElement;
|
||||
const ri = panel.querySelector('.me-search-replace') as HTMLInputElement;
|
||||
const ce = panel.querySelector('.me-search-count') as HTMLElement;
|
||||
const regexBtn = panel.querySelector('.me-search-regex') as HTMLButtonElement;
|
||||
regexBtn.addEventListener('click', () => {
|
||||
state._regexMode = !state._regexMode;
|
||||
regexBtn.classList.toggle('me-active', state._regexMode);
|
||||
lastIdxs = findAll();
|
||||
});
|
||||
const findAll = () => {
|
||||
const q = fi.value; if (!q) { ce.textContent = ''; return []; }
|
||||
const idxs: number[] = []; let from = 0;
|
||||
if (state._regexMode) {
|
||||
try {
|
||||
const re = new RegExp(q, 'g'); let m: RegExpExecArray | null;
|
||||
while ((m = re.exec(editor.textarea.value)) !== null) {
|
||||
idxs.push(m.index);
|
||||
if (m[0].length === 0) re.lastIndex++;
|
||||
}
|
||||
} catch (_) { ce.textContent = 'err'; return []; }
|
||||
} else {
|
||||
while (true) { const idx = editor.textarea.value.indexOf(q, from); if (idx === -1) break; idxs.push(idx); from = idx + q.length; }
|
||||
}
|
||||
ce.textContent = idxs.length ? `${idxs.length}` : '0';
|
||||
return idxs;
|
||||
};
|
||||
let lastIdxs: number[] = [];
|
||||
const selectAt = (idx: number, len?: number) => {
|
||||
editor.textarea.focus();
|
||||
editor.textarea.setSelectionRange(idx, idx + (len || fi.value.length));
|
||||
};
|
||||
const findNext = () => {
|
||||
lastIdxs = findAll(); if (!lastIdxs.length) return;
|
||||
const cur = editor.textarea.selectionEnd;
|
||||
const qlen = state._regexMode ? (() => { try { const m = new RegExp(fi.value).exec(editor.textarea.value.substring(cur)); return m ? m[0].length : fi.value.length; } catch (_) { return fi.value.length; } })() : fi.value.length;
|
||||
let next = lastIdxs.find((i: number) => i >= cur);
|
||||
if (next == null) next = lastIdxs[0];
|
||||
selectAt(next, qlen);
|
||||
};
|
||||
const findPrev = () => {
|
||||
lastIdxs = findAll(); if (!lastIdxs.length) return;
|
||||
const cur = editor.textarea.selectionStart;
|
||||
const qlen = state._regexMode ? (() => { try { const m = new RegExp(fi.value).exec(editor.textarea.value.substring(Math.max(0, cur - 100), cur + 100)); return m ? m[0].length : fi.value.length; } catch (_) { return fi.value.length; } })() : fi.value.length;
|
||||
let prev = -1;
|
||||
for (let i = lastIdxs.length-1; i>=0; i--) { if (lastIdxs[i] < cur) { prev = lastIdxs[i]; break; } }
|
||||
if (prev === -1) prev = lastIdxs[lastIdxs.length-1];
|
||||
selectAt(prev, qlen);
|
||||
};
|
||||
const replaceOne = () => {
|
||||
const q = fi.value, r = ri.value; if (!q) return;
|
||||
const ta = editor.textarea; const s = ta.selectionStart, e = ta.selectionEnd;
|
||||
const matchText = ta.value.substring(s, e);
|
||||
if (state._regexMode) {
|
||||
try { if (new RegExp(q).test(matchText)) { ta.value = ta.value.substring(0, s) + r + ta.value.substring(e); ta.setSelectionRange(s, s + r.length); } } catch (_) {}
|
||||
} else if (matchText === q) {
|
||||
ta.value = ta.value.substring(0, s) + r + ta.value.substring(e);
|
||||
ta.setSelectionRange(s, s + r.length);
|
||||
}
|
||||
editor._value = ta.value; if (typeof editor._pushHistory === 'function') editor._pushHistory();
|
||||
if (typeof editor._render === 'function') editor._render();
|
||||
if (typeof editor._emit === 'function') editor._emit('change', editor._value);
|
||||
findNext();
|
||||
};
|
||||
const replaceAll = () => {
|
||||
const q = fi.value, r = ri.value; if (!q) return;
|
||||
const ta = editor.textarea;
|
||||
if (state._regexMode) {
|
||||
try { ta.value = ta.value.replace(new RegExp(q, 'g'), r); } catch (_) { return; }
|
||||
} else {
|
||||
ta.value = ta.value.split(q).join(r);
|
||||
}
|
||||
ta.setSelectionRange(0,0); editor._value = ta.value;
|
||||
if (typeof editor._pushHistory === 'function') editor._pushHistory();
|
||||
if (typeof editor._render === 'function') editor._render();
|
||||
if (typeof editor._emit === 'function') editor._emit('change', editor._value);
|
||||
findAll();
|
||||
};
|
||||
fi.addEventListener('input', () => { lastIdxs = findAll(); });
|
||||
fi.addEventListener('keydown', (e: KeyboardEvent) => { if (e.key === 'Enter') { e.preventDefault(); e.shiftKey ? findPrev() : findNext(); } if (e.key === 'Escape') { e.preventDefault(); _close(); } });
|
||||
ri.addEventListener('keydown', (e: KeyboardEvent) => { if (e.key === 'Enter') { e.preventDefault(); replaceOne(); } if (e.key === 'Escape') { e.preventDefault(); _close(); } });
|
||||
panel.querySelector('.me-search-next')!.addEventListener('click', findNext);
|
||||
panel.querySelector('.me-search-prev')!.addEventListener('click', findPrev);
|
||||
panel.querySelector('.me-search-close')!.addEventListener('click', () => _close());
|
||||
panel.querySelector('.me-search-replace-one')!.addEventListener('click', replaceOne);
|
||||
panel.querySelector('.me-search-replace-all')!.addEventListener('click', replaceAll);
|
||||
fi.focus(); fi.select();
|
||||
state._cleanup = () => { if (panel.parentNode) panel.parentNode.removeChild(panel); };
|
||||
};
|
||||
|
||||
const _onKeydown = (e: KeyboardEvent) => {
|
||||
const mod = e.ctrlKey || e.metaKey;
|
||||
if (!mod) return;
|
||||
const k = e.key.toLowerCase();
|
||||
if (k === 'f') { e.preventDefault(); this._open!(editor); }
|
||||
else if (k === 'h') { e.preventDefault(); this._open!(editor, true); }
|
||||
else if (k === 'escape' && (this as any)._panel) { this._close!(editor); }
|
||||
if (k === 'f') { e.preventDefault(); _open(false); }
|
||||
else if (k === 'h') { e.preventDefault(); _open(true); }
|
||||
else if (k === 'escape' && state._panel) { _close(); }
|
||||
};
|
||||
editor.textarea.addEventListener('keydown', (this as any)._onKeydown);
|
||||
editor.textarea.addEventListener('keydown', _onKeydown);
|
||||
|
||||
// Expose for tests
|
||||
(editor as any).__srState = state;
|
||||
(editor as any).__srOpen = _open;
|
||||
(editor as any).__srClose = _close;
|
||||
(editor as any).__srKeydown = _onKeydown;
|
||||
},
|
||||
_injectStyle() {
|
||||
if (document.getElementById('me-search-style')) return;
|
||||
const style = document.createElement('style'); style.id = 'me-search-style';
|
||||
style.textContent = `.me-search{position:absolute;top:8px;right:12px;z-index:20;display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--md-toolbar-bg,#f8f9fa);border:1px solid var(--md-border,rgba(0,0,0,0.1));border-radius:8px;box-shadow:0 8px 24px -8px rgba(0,0,0,0.2);font-size:13px;min-width:280px}.me-search-row{display:flex;gap:4px;align-items:center}.me-search input{flex:1;min-width:0;padding:4px 8px;border:1px solid var(--md-border,rgba(0,0,0,0.15));border-radius:4px;background:var(--md-textarea-bg,#fff);color:var(--md-text,#1f2937);font-size:13px}.me-search input:focus{outline:none;border-color:var(--md-accent,#3b82f6)}.me-search button{padding:4px 8px;border:1px solid var(--md-border,rgba(0,0,0,0.15));background:var(--md-bg,#fff);color:var(--md-text,#1f2937);border-radius:4px;cursor:pointer;font-size:12px;line-height:1}.me-search button:hover{background:var(--md-accent,#3b82f6);color:#fff;border-color:var(--md-accent,#3b82f6)}.me-search .me-search-count{color:var(--md-muted,#6b7280);font-size:12px;min-width:60px;text-align:center}.me-search .me-search-close{padding:2px 6px}`;
|
||||
document.head.appendChild(style);
|
||||
},
|
||||
_open(editor: any, showReplace?: boolean) {
|
||||
const self = this as any;
|
||||
if (self._panel) {
|
||||
self._panel.dataset.replace = showReplace ? '1' : '0';
|
||||
self._updateReplaceVisible();
|
||||
const inp = self._panel.querySelector('.me-search-find') as HTMLInputElement;
|
||||
if (inp) { inp.focus(); inp.select(); }
|
||||
return;
|
||||
destroy(editor: any) {
|
||||
const state = (editor as any).__srState;
|
||||
if (state) {
|
||||
if (state._cleanup) { state._cleanup(); state._cleanup = null; }
|
||||
state._panel = null;
|
||||
}
|
||||
const selected = editor.textarea.value.substring(editor.textarea.selectionStart, editor.textarea.selectionEnd);
|
||||
const panel = document.createElement('div'); panel.className = 'me-search';
|
||||
panel.dataset.replace = showReplace ? '1' : '0';
|
||||
panel.innerHTML = `<div class="me-search-row"><input type="text" class="me-search-find" placeholder="${t('searchPlaceholder')||'Find'}" value="${escapeAttr(selected)}"/><button class="me-search-prev">↑</button><button class="me-search-next">↓</button><span class="me-search-count"></span><button class="me-search-regex" title="Regex">.*</button><button class="me-search-close">×</button></div><div class="me-search-row me-search-replace-row"><input type="text" class="me-search-replace" placeholder="${t('replacePlaceholder')||'Replace'}"/><button class="me-search-replace-one">${t('replace')||'Replace'}</button><button class="me-search-replace-all">${t('replaceAll')||'All'}</button></div>`;
|
||||
editor.el.appendChild(panel); self._panel = panel;
|
||||
self._updateReplaceVisible();
|
||||
self._regexMode = false;
|
||||
const fi = panel.querySelector('.me-search-find') as HTMLInputElement;
|
||||
const ri = panel.querySelector('.me-search-replace') as HTMLInputElement;
|
||||
const ce = panel.querySelector('.me-search-count') as HTMLElement;
|
||||
const regexBtn = panel.querySelector('.me-search-regex') as HTMLButtonElement;
|
||||
const toggleRegex = () => {
|
||||
self._regexMode = !self._regexMode;
|
||||
regexBtn.classList.toggle('me-active', self._regexMode);
|
||||
lastIdxs = findAll();
|
||||
};
|
||||
regexBtn.addEventListener('click', toggleRegex);
|
||||
const findAll = () => {
|
||||
const q = fi.value; if (!q) { ce.textContent = ''; return []; }
|
||||
const idxs: number[] = []; let from = 0;
|
||||
if (self._regexMode) {
|
||||
try {
|
||||
const re = new RegExp(q, 'g'); let m: RegExpExecArray | null;
|
||||
while ((m = re.exec(editor.textarea.value)) !== null) {
|
||||
idxs.push(m.index);
|
||||
if (m[0].length === 0) re.lastIndex++;
|
||||
}
|
||||
} catch (_) { ce.textContent = 'err'; return []; }
|
||||
} else {
|
||||
const lower = editor.textarea.value;
|
||||
while (true) { const idx = lower.indexOf(q, from); if (idx === -1) break; idxs.push(idx); from = idx + q.length; }
|
||||
}
|
||||
ce.textContent = idxs.length ? `${idxs.length}` : '0';
|
||||
return idxs;
|
||||
};
|
||||
let lastIdxs: number[] = [];
|
||||
const findNext = () => {
|
||||
lastIdxs = findAll(); if (!lastIdxs.length) return;
|
||||
const cur = editor.textarea.selectionEnd;
|
||||
const qlen = self._regexMode ? (() => { try { const m = new RegExp(fi.value).exec(editor.textarea.value.substring(cur)); return m ? m[0].length : fi.value.length; } catch (_) { return fi.value.length; } })() : fi.value.length;
|
||||
let next = lastIdxs.find((i: number) => i >= cur);
|
||||
if (next == null) next = lastIdxs[0];
|
||||
selectAt(next, qlen);
|
||||
};
|
||||
const findPrev = () => {
|
||||
lastIdxs = findAll(); if (!lastIdxs.length) return;
|
||||
const cur = editor.textarea.selectionStart;
|
||||
const qlen = self._regexMode ? (() => { try { const m = new RegExp(fi.value).exec(editor.textarea.value.substring(Math.max(0, cur - 100), cur + 100)); return m ? m[0].length : fi.value.length; } catch (_) { return fi.value.length; } })() : fi.value.length;
|
||||
let prev = -1;
|
||||
for (let i = lastIdxs.length-1; i>=0; i--) { if (lastIdxs[i] < cur) { prev = lastIdxs[i]; break; } }
|
||||
if (prev === -1) prev = lastIdxs[lastIdxs.length-1];
|
||||
selectAt(prev, qlen);
|
||||
};
|
||||
const selectAt = (idx: number, len?: number) => {
|
||||
editor.textarea.focus();
|
||||
editor.textarea.setSelectionRange(idx, idx + (len || fi.value.length));
|
||||
};
|
||||
const replaceOne = () => {
|
||||
const q = fi.value, r = ri.value; if (!q) return;
|
||||
const ta = editor.textarea; const s = ta.selectionStart, e = ta.selectionEnd;
|
||||
const matchText = ta.value.substring(s, e);
|
||||
if (self._regexMode) {
|
||||
try { if (new RegExp(q).test(matchText)) { ta.value = ta.value.substring(0, s) + r + ta.value.substring(e); ta.setSelectionRange(s, s + r.length); } } catch (_) {}
|
||||
} else if (matchText === q) {
|
||||
ta.value = ta.value.substring(0, s) + r + ta.value.substring(e);
|
||||
ta.setSelectionRange(s, s + r.length);
|
||||
}
|
||||
editor._value = ta.value; if (typeof editor._pushHistory === 'function') editor._pushHistory();
|
||||
if (typeof editor._render === 'function') editor._render();
|
||||
if (typeof editor._emit === 'function') editor._emit('change', editor._value);
|
||||
findNext();
|
||||
};
|
||||
const replaceAll = () => {
|
||||
const q = fi.value, r = ri.value; if (!q) return;
|
||||
const ta = editor.textarea;
|
||||
if (self._regexMode) {
|
||||
try { ta.value = ta.value.replace(new RegExp(q, 'g'), r); } catch (_) { return; }
|
||||
} else {
|
||||
ta.value = ta.value.split(q).join(r);
|
||||
}
|
||||
ta.setSelectionRange(0,0); editor._value = ta.value;
|
||||
if (typeof editor._pushHistory === 'function') editor._pushHistory();
|
||||
if (typeof editor._render === 'function') editor._render();
|
||||
if (typeof editor._emit === 'function') editor._emit('change', editor._value);
|
||||
findAll();
|
||||
};
|
||||
fi.addEventListener('input', () => { lastIdxs = findAll(); });
|
||||
fi.addEventListener('keydown', (e: KeyboardEvent) => { if (e.key === 'Enter') { e.preventDefault(); e.shiftKey ? findPrev() : findNext(); } if (e.key === 'Escape') { e.preventDefault(); this._close!(editor); } });
|
||||
ri.addEventListener('keydown', (e: KeyboardEvent) => { if (e.key === 'Enter') { e.preventDefault(); replaceOne(); } if (e.key === 'Escape') { e.preventDefault(); this._close!(editor); } });
|
||||
panel.querySelector('.me-search-next')!.addEventListener('click', findNext);
|
||||
panel.querySelector('.me-search-prev')!.addEventListener('click', findPrev);
|
||||
panel.querySelector('.me-search-close')!.addEventListener('click', () => this._close!(editor));
|
||||
panel.querySelector('.me-search-replace-one')!.addEventListener('click', replaceOne);
|
||||
panel.querySelector('.me-search-replace-all')!.addEventListener('click', replaceAll);
|
||||
fi.focus(); fi.select();
|
||||
(this as any)._cleanup = () => { if (panel.parentNode) panel.parentNode.removeChild(panel); };
|
||||
const _onKeydown = (editor as any).__srKeydown;
|
||||
if (_onKeydown && editor && editor.textarea) {
|
||||
editor.textarea.removeEventListener('keydown', _onKeydown);
|
||||
}
|
||||
delete (editor as any).__srState;
|
||||
delete (editor as any).__srOpen;
|
||||
delete (editor as any).__srClose;
|
||||
delete (editor as any).__srKeydown;
|
||||
},
|
||||
_updateReplaceVisible() {
|
||||
const self = this as any;
|
||||
if (!self._panel) return;
|
||||
const show = self._panel.dataset.replace === '1';
|
||||
const row = self._panel.querySelector('.me-search-replace-row') as HTMLElement;
|
||||
if (row) row.style.display = show ? 'flex' : 'none';
|
||||
},
|
||||
_close(editor: any) { if ((this as any)._cleanup) { (this as any)._cleanup(); (this as any)._cleanup = null; } (this as any)._panel = null; if (editor && editor.textarea) editor.textarea.focus(); },
|
||||
destroy(editor: any) { this._close!(editor); if ((this as any)._onKeydown && editor && editor.textarea) editor.textarea.removeEventListener('keydown', (this as any)._onKeydown); (this as any)._onKeydown = null; },
|
||||
};
|
||||
|
||||
const imagePastePlugin: Plugin = {
|
||||
name: 'imagePaste', version: '0.1.0', description: 'Paste image as base64', priority: 60,
|
||||
name: 'imagePaste', version: '0.2.0', description: 'Paste image as base64', priority: 60,
|
||||
install(editor) {
|
||||
if (!editor || !editor.textarea || typeof document === 'undefined') return;
|
||||
(this as any)._onPaste = (e: ClipboardEvent) => {
|
||||
const _onPaste = (e: ClipboardEvent) => {
|
||||
const items = e.clipboardData?.items; if (!items) return;
|
||||
for (const item of items) {
|
||||
if (item.type?.startsWith('image/')) { e.preventDefault();
|
||||
@@ -357,69 +386,100 @@ const imagePastePlugin: Plugin = {
|
||||
}
|
||||
}
|
||||
};
|
||||
editor.textarea.addEventListener('paste', (this as any)._onPaste);
|
||||
editor.textarea.addEventListener('paste', _onPaste);
|
||||
(editor as any).__ipOnPaste = _onPaste;
|
||||
},
|
||||
destroy(editor: any) {
|
||||
const _onPaste = (editor as any).__ipOnPaste;
|
||||
if (_onPaste && editor?.textarea) editor.textarea.removeEventListener('paste', _onPaste);
|
||||
delete (editor as any).__ipOnPaste;
|
||||
},
|
||||
destroy(editor) { if ((this as any)._onPaste && editor?.textarea) editor.textarea.removeEventListener('paste', (this as any)._onPaste); (this as any)._onPaste = null; },
|
||||
};
|
||||
|
||||
const shortcutHelpPlugin: Plugin = {
|
||||
name: 'shortcutHelp', version: '0.1.0', description: 'Press ? to show shortcuts', priority: 200,
|
||||
name: 'shortcutHelp', version: '0.2.0', description: 'Press ? to show shortcuts', priority: 200,
|
||||
install(editor) {
|
||||
if (!editor || !editor.textarea || typeof document === 'undefined') return;
|
||||
this._injectStyle!();
|
||||
(this as any)._onKeydown = (e: KeyboardEvent) => {
|
||||
if (e.key === '?' && !e.ctrlKey && !e.metaKey && !e.altKey) { e.preventDefault(); this._open!(editor); }
|
||||
if (e.key === 'Escape' && (this as any)._panel) this._close!();
|
||||
if (!document.getElementById('me-shortcut-style')) {
|
||||
const s = document.createElement('style'); s.id = 'me-shortcut-style';
|
||||
s.textContent = `.me-shortcut-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:50;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center}.me-shortcut-panel{background:var(--md-bg,#fff);border-radius:12px;padding:24px;max-width:560px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,0.3)}.me-shortcut-panel h3{font-size:16px;margin:0 0 16px;color:var(--md-text)}.me-shortcut-panel table{width:100%;border-collapse:collapse;font-size:13px}.me-shortcut-panel td{padding:6px 10px;border-bottom:1px solid var(--md-border)}.me-shortcut-panel td:first-child{font-family:var(--md-mono);font-size:12px;color:var(--md-accent);white-space:nowrap;width:40%}.me-shortcut-panel .me-shortcut-close{position:absolute;top:16px;right:20px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--md-muted)}`;
|
||||
document.head.appendChild(s);
|
||||
}
|
||||
|
||||
let _panel: HTMLElement | null = null;
|
||||
|
||||
const _close = () => { if (_panel) { _panel.remove(); _panel = null; } };
|
||||
|
||||
const _open = () => {
|
||||
if (_panel) { _close(); return; }
|
||||
// i18n-aware shortcut labels
|
||||
const builtin: [string, string][] = [
|
||||
['Ctrl+B', t('bold') || 'Bold'], ['Ctrl+I', t('italic') || 'Italic'],
|
||||
['Ctrl+U', t('underline') || 'Underline'], ['Ctrl+K', t('link') || 'Link'],
|
||||
['Ctrl+E', t('code') || 'Code'], ['Ctrl+1/2/3', t('h1') || 'Heading'],
|
||||
['Ctrl+Q', t('quote') || 'Quote'], ['Ctrl+Z', t('undo') || 'Undo'],
|
||||
['Ctrl+Y', t('redo') || 'Redo'], ['Ctrl+S', t('save') || 'Save'],
|
||||
['Ctrl+F', t('search') || 'Search'], ['Ctrl+H', t('replace') || 'Replace'],
|
||||
['Tab', t('indent') || 'Indent'], ['Shift+Tab', t('outdent') || 'Outdent'],
|
||||
['?', t('close') || 'Shortcuts'],
|
||||
];
|
||||
let rows = ''; builtin.forEach(([c, d]) => { rows += `<tr><td>${c}</td><td>${d}</td></tr>`; });
|
||||
const overlay = document.createElement('div'); overlay.className = 'me-shortcut-overlay';
|
||||
overlay.innerHTML = `<div class="me-shortcut-panel"><h3>⌨️ ${t('close') || 'Shortcuts'}</h3><button class="me-shortcut-close">×</button><table>${rows}</table></div>`;
|
||||
overlay.addEventListener('click', (e) => { if (e.target === overlay || (e.target as HTMLElement).classList.contains('me-shortcut-close')) _close(); });
|
||||
document.body.appendChild(overlay); _panel = overlay;
|
||||
};
|
||||
editor.textarea.addEventListener('keydown', (this as any)._onKeydown);
|
||||
|
||||
const _onKeydown = (e: KeyboardEvent) => {
|
||||
if (e.key === '?' && !e.ctrlKey && !e.metaKey && !e.altKey) { e.preventDefault(); _open(); }
|
||||
if (e.key === 'Escape' && _panel) _close();
|
||||
};
|
||||
editor.textarea.addEventListener('keydown', _onKeydown);
|
||||
|
||||
(editor as any).__shState = { _panel, _open, _close, _onKeydown };
|
||||
},
|
||||
_injectStyle() {
|
||||
if (document.getElementById('me-shortcut-style')) return;
|
||||
const s = document.createElement('style'); s.id = 'me-shortcut-style';
|
||||
s.textContent = `.me-shortcut-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:50;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center}.me-shortcut-panel{background:var(--md-bg,#fff);border-radius:12px;padding:24px;max-width:560px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,0.3)}.me-shortcut-panel h3{font-size:16px;margin:0 0 16px;color:var(--md-text)}.me-shortcut-panel table{width:100%;border-collapse:collapse;font-size:13px}.me-shortcut-panel td{padding:6px 10px;border-bottom:1px solid var(--md-border)}.me-shortcut-panel td:first-child{font-family:var(--md-mono);font-size:12px;color:var(--md-accent);white-space:nowrap;width:40%}.me-shortcut-panel .me-shortcut-close{position:absolute;top:16px;right:20px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--md-muted)}`;
|
||||
document.head.appendChild(s);
|
||||
destroy(editor: any) {
|
||||
const state = (editor as any).__shState;
|
||||
if (state) { if (state._panel) { state._panel.remove(); } }
|
||||
const _onKeydown = (editor as any).__shState?._onKeydown;
|
||||
if (_onKeydown && editor?.textarea) editor.textarea.removeEventListener('keydown', _onKeydown);
|
||||
delete (editor as any).__shState;
|
||||
},
|
||||
_open(editor: any) {
|
||||
if ((this as any)._panel) { this._close!(); return; }
|
||||
const builtin = [['Ctrl+B','粗体'],['Ctrl+I','斜体'],['Ctrl+U','下划线'],['Ctrl+K','链接'],['Ctrl+E','行内代码'],['Ctrl+1/2/3','标题'],['Ctrl+Q','引用'],['Ctrl+Z','撤销'],['Ctrl+Y','重做'],['Ctrl+S','保存'],['Ctrl+F','查找'],['Ctrl+H','替换'],['Tab','缩进'],['Shift+Tab','反缩进'],['?','快捷键帮助']];
|
||||
let rows = ''; builtin.forEach(([c,d]) => { rows += `<tr><td>${c}</td><td>${d}</td></tr>`; });
|
||||
const overlay = document.createElement('div'); overlay.className = 'me-shortcut-overlay';
|
||||
overlay.innerHTML = `<div class="me-shortcut-panel"><h3>⌨️ 快捷键</h3><button class="me-shortcut-close">×</button><table>${rows}</table></div>`;
|
||||
overlay.addEventListener('click', (e) => { if (e.target === overlay || (e.target as HTMLElement).classList.contains('me-shortcut-close')) this._close!(); });
|
||||
document.body.appendChild(overlay); (this as any)._panel = overlay;
|
||||
},
|
||||
_close() { if ((this as any)._panel) { (this as any)._panel.remove(); (this as any)._panel = null; } },
|
||||
destroy(editor) { this._close!(); if ((this as any)._onKeydown && editor?.textarea) editor.textarea.removeEventListener('keydown', (this as any)._onKeydown); (this as any)._onKeydown = null; },
|
||||
};
|
||||
|
||||
const fileSystemPlugin: Plugin = {
|
||||
name: 'fileSystem', version: '0.1.0', description: 'File System Access API', priority: 90,
|
||||
name: 'fileSystem', version: '0.2.0', description: 'File System Access API', priority: 90,
|
||||
install(editor) {
|
||||
if (!editor || typeof editor.getValue !== 'function') return;
|
||||
const hasAPI = typeof window !== 'undefined' && typeof (window as any).showOpenFilePicker === 'function';
|
||||
(this as any)._fileHandle = null;
|
||||
let _fileHandle: any = null;
|
||||
|
||||
editor.openFile = async (opts: any = {}) => {
|
||||
if (!hasAPI) { editor.toast?.('File System Access API not supported', { type: 'warning' }); return null; }
|
||||
try {
|
||||
const [handle] = await (window as any).showOpenFilePicker({ types: [{ accept: { 'text/markdown': ['.md','.txt','.markdown'] } }], ...opts });
|
||||
(this as any)._fileHandle = handle; const file = await handle.getFile(); const content = await file.text();
|
||||
_fileHandle = handle; const file = await handle.getFile(); const content = await file.text();
|
||||
editor.setValue(content); editor._emit?.('fileOpened', { name: file.name, handle }); return { name: file.name, content, handle };
|
||||
} catch (e: any) { if (e.name !== 'AbortError') console.error('Open file error:', e); return null; }
|
||||
};
|
||||
editor.saveFile = async (opts: any = {}) => {
|
||||
let handle = (this as any)._fileHandle;
|
||||
let handle = _fileHandle;
|
||||
if (!handle || opts.saveAs) {
|
||||
if (!hasAPI) { editor.toast?.('File System Access API not supported', { type: 'warning' }); return false; }
|
||||
try { handle = await (window as any).showSaveFilePicker({ types: [{ accept: { 'text/markdown': ['.md'] } }], suggestedName: opts.name || 'document.md' }); (this as any)._fileHandle = handle; }
|
||||
try { handle = await (window as any).showSaveFilePicker({ types: [{ accept: { 'text/markdown': ['.md'] } }], suggestedName: opts.name || 'document.md' }); _fileHandle = handle; }
|
||||
catch (e: any) { if (e.name !== 'AbortError') console.error('Save error:', e); return false; }
|
||||
}
|
||||
try { const w = await handle.createWritable(); await w.write(editor.getValue()); await w.close(); editor._emit?.('fileSaved', { handle }); return true; }
|
||||
catch (e) { (this as any)._fileHandle = null; if (!opts.saveAs) return editor.saveFile({ ...opts, saveAs: true }); console.error('Write error:', e); return false; }
|
||||
catch (e) { _fileHandle = null; if (!opts.saveAs) return editor.saveFile({ ...opts, saveAs: true }); console.error('Write error:', e); return false; }
|
||||
};
|
||||
editor.saveFileAs = (name?: string) => editor.saveFile({ saveAs: true, name });
|
||||
editor.getFileHandle = () => (this as any)._fileHandle;
|
||||
editor.getFileHandle = () => _fileHandle;
|
||||
(editor as any).__fsCleanup = { getHandle: () => _fileHandle };
|
||||
},
|
||||
destroy(editor: any) {
|
||||
if (editor) { delete editor.openFile; delete editor.saveFile; delete editor.saveFileAs; delete editor.getFileHandle; }
|
||||
delete (editor as any).__fsCleanup;
|
||||
},
|
||||
destroy(editor) { (this as any)._fileHandle = null; if (editor) { delete editor.openFile; delete editor.saveFile; delete editor.saveFileAs; delete editor.getFileHandle; } },
|
||||
};
|
||||
|
||||
// ============ Preset plugins table ============
|
||||
|
||||
Reference in New Issue
Block a user