thzxx
de545d1da6
## 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
194 lines
14 KiB
TypeScript
194 lines
14 KiB
TypeScript
/**
|
|
* MetonaEditor Styles — CSS-in-JS injection
|
|
* @module styles
|
|
* @version 0.2.0
|
|
*/
|
|
|
|
let styleElement: HTMLStyleElement | null = null;
|
|
|
|
const generateCSS = (): string => {
|
|
return `:root{--md-bg:#ffffff;--md-text:#1f2937;--md-border:rgba(0,0,0,0.08);--md-shadow:0 10px 36px -10px rgba(0,0,0,0.18),0 4px 14px -4px rgba(0,0,0,0.08);--md-hover-shadow:0 14px 48px -10px rgba(0,0,0,0.22),0 6px 18px -4px rgba(0,0,0,0.10);--md-toolbar-bg:rgba(248,249,250,0.92);--md-textarea-bg:#ffffff;--md-preview-bg:#ffffff;--md-code-bg:rgba(243,244,246,1);--md-code-text:#1f2937;--md-accent:#3b82f6;--md-muted:#6b7280;--md-radius:10px;--md-font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;--md-mono:"SF Mono","Cascadia Code","Consolas","Liberation Mono","Courier New",monospace}
|
|
.me-wrapper{display:flex;flex-direction:column;box-sizing:border-box;border:1px solid var(--md-border);border-radius:var(--md-radius);overflow:hidden;background:var(--md-bg);color:var(--md-text);box-shadow:var(--md-shadow);font-family:var(--md-font);font-size:14px;line-height:1.6;position:relative;transition:box-shadow .25s,border-color .25s;width:100%}
|
|
.me-wrapper:hover{box-shadow:var(--md-hover-shadow)}
|
|
.me-wrapper.me-disabled{opacity:.6;pointer-events:none}
|
|
.me-wrapper *{box-sizing:border-box}
|
|
.me-wrapper.me-fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;z-index:9999;border-radius:0;border:0}
|
|
.me-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:2px;padding:6px 8px;background:var(--md-toolbar-bg);border-bottom:1px solid var(--md-border);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-height:40px}
|
|
.me-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--md-text);cursor:pointer;transition:background .15s,color .15s,transform .1s;flex-shrink:0}
|
|
.me-btn:hover{background:var(--md-code-bg);color:var(--md-accent)}
|
|
.me-btn:active{transform:scale(.92)}
|
|
.me-btn.me-active{background:var(--md-accent);color:#fff}
|
|
.me-btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
|
|
.me-btn:focus-visible{outline:2px solid var(--md-accent);outline-offset:2px}
|
|
.me-btn:focus:not(:focus-visible){outline:none}
|
|
.me-btn svg{width:17px;height:17px;display:block}
|
|
.me-btn span{font-size:12px;font-weight:500}
|
|
.me-toolbar-sep{display:inline-block;width:1px;height:20px;background:var(--md-border);margin:0 4px;flex-shrink:0}
|
|
.me-toolbar-group{display:inline-flex;gap:2px;margin-left:auto;padding-left:6px;border-left:1px solid var(--md-border)}
|
|
.me-toolbar-group .me-btn{width:auto;padding:0 8px}
|
|
.me-body{display:flex;flex:1;min-height:0;position:relative}
|
|
.me-editor-pane,.me-preview-pane{flex:1 1 50%;min-width:0;overflow:hidden;position:relative}
|
|
.me-editor-inner{display:flex;height:100%;overflow:hidden;position:relative}
|
|
.me-gutter{flex:0 0 auto;min-width:36px;padding:16px 8px 16px 6px;overflow:hidden;background:var(--md-code-bg);border-right:1px solid var(--md-border);color:var(--md-muted);font-family:var(--md-mono);font-size:13.5px;line-height:1.7;text-align:right;user-select:none;white-space:pre}
|
|
.me-gutter-line{padding-right:4px}
|
|
.me-gutter-active{color:var(--md-accent);font-weight:600;background:rgba(59,130,246,.08);border-radius:3px}
|
|
.me-divider{flex:0 0 1px;background:var(--md-border);cursor:col-resize;position:relative}
|
|
.me-divider::after{content:'';position:absolute;top:0;bottom:0;left:-3px;right:-3px}
|
|
.me-divider:hover{background:var(--md-accent)}
|
|
.me-textarea{width:100%;height:100%;padding:16px 18px;border:0;outline:0;resize:none;background:var(--md-textarea-bg);color:var(--md-text);font-family:var(--md-mono);font-size:13.5px;line-height:1.7;display:block;white-space:pre-wrap;word-wrap:break-word;position:relative;z-index:1}
|
|
.me-textarea::placeholder{color:var(--md-muted);opacity:.7}
|
|
.me-textarea:focus{outline:0}
|
|
.me-preview-pane{overflow:auto;background:var(--md-preview-bg)}
|
|
.me-preview{padding:18px 22px;max-width:100%;word-wrap:break-word;overflow-wrap:break-word}
|
|
.me-body.me-mode-edit .me-preview-pane,.me-body.me-mode-edit .me-divider{display:none}
|
|
.me-body.me-mode-edit .me-editor-pane{flex:1 1 100%}
|
|
.me-body.me-mode-preview .me-editor-pane,.me-body.me-mode-preview .me-divider{display:none}
|
|
.me-body.me-mode-preview .me-preview-pane{flex:1 1 100%}
|
|
.me-preview>:first-child{margin-top:0}
|
|
.me-preview>:last-child{margin-bottom:0}
|
|
.me-preview h1,.me-preview h2,.me-preview h3,.me-preview h4,.me-preview h5,.me-preview h6{margin:1.4em 0 .6em;font-weight:650;line-height:1.3}
|
|
.me-preview h1{font-size:1.9em;padding-bottom:.3em;border-bottom:1px solid var(--md-border)}
|
|
.me-preview h2{font-size:1.55em;padding-bottom:.3em;border-bottom:1px solid var(--md-border)}
|
|
.me-preview h3{font-size:1.3em}
|
|
.me-preview h4{font-size:1.12em}
|
|
.me-preview h5{font-size:1em}
|
|
.me-preview h6{font-size:.9em;color:var(--md-muted)}
|
|
.me-preview p{margin:.7em 0}
|
|
.me-preview a{color:var(--md-accent);text-decoration:none}
|
|
.me-preview a:hover{text-decoration:underline}
|
|
.me-preview strong{font-weight:650}
|
|
.me-preview em{font-style:italic}
|
|
.me-preview del{text-decoration:line-through;opacity:.75}
|
|
.me-preview ul,.me-preview ol{margin:.6em 0;padding-left:1.6em}
|
|
.me-preview li{margin:.25em 0}
|
|
.me-preview li.me-task-item{list-style:none;margin-left:-1.4em}
|
|
.me-preview li.me-task-item input{margin-right:.5em;vertical-align:middle}
|
|
.me-preview blockquote{margin:.8em 0;padding:.4em 1em;border-left:3px solid var(--md-accent);background:var(--md-code-bg);border-radius:0 6px 6px 0;color:var(--md-text)}
|
|
.me-preview blockquote>:first-child{margin-top:0}
|
|
.me-preview blockquote>:last-child{margin-bottom:0}
|
|
.me-preview hr{border:0;height:1px;background:var(--md-border);margin:1.6em 0}
|
|
.me-preview code{font-family:var(--md-mono);font-size:.88em;padding:.15em .4em;background:var(--md-code-bg);color:var(--md-code-text);border-radius:4px}
|
|
.me-preview pre{margin:.9em 0;padding:14px 16px;background:var(--md-code-bg);border-radius:8px;overflow-x:auto;border:1px solid var(--md-border)}
|
|
.me-code-title{font-family:var(--md-mono);font-size:.85em;padding:8px 14px;background:var(--md-border);border-radius:8px 8px 0 0;color:var(--md-text);margin:.9em 0 -0.9em;font-weight:600}
|
|
.me-code-title+pre{margin-top:0;border-radius:0 0 8px 8px;border-top:none}
|
|
.me-preview pre code{padding:0;background:transparent;color:var(--md-code-text);font-size:.9em;line-height:1.6;border-radius:0}
|
|
.me-preview img{max-width:100%;height:auto;border-radius:6px;vertical-align:middle}
|
|
.me-table-wrap{overflow-x:auto;margin:.9em 0}
|
|
.me-preview table{border-collapse:collapse;width:100%;font-size:.93em;display:block}
|
|
.me-preview th,.me-preview td{border:1px solid var(--md-border);padding:7px 12px;text-align:left}
|
|
.me-preview th{background:var(--md-code-bg);font-weight:600}
|
|
.me-preview tr:nth-child(even) td{background:var(--md-code-bg)}
|
|
.me-statusbar{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:4px 12px;border-top:1px solid var(--md-border);background:var(--md-toolbar-bg);color:var(--md-muted);font-size:12px;min-height:26px}
|
|
.me-statusbar:empty{display:none}
|
|
.me-wrapper:focus-within{border-color:var(--md-accent)}
|
|
.me-textarea:focus-visible{outline:0}
|
|
@media(prefers-reduced-motion:reduce){.me-wrapper,.me-btn,.me-textarea{transition:none!important}}
|
|
.me-wrapper.me-fullscreen .me-preview,.me-wrapper.me-fullscreen .me-textarea{font-size:15px}
|
|
.me-wrapper.me-readonly .me-textarea{background:var(--md-code-bg);cursor:default;opacity:.88}
|
|
.me-wrapper.me-readonly .me-toolbar{opacity:.75}
|
|
.me-wrapper.me-readonly .me-btn:disabled{opacity:.3;cursor:not-allowed;pointer-events:none}
|
|
.me-preview mark{background:rgba(250,204,21,.3);color:inherit;padding:.1em .2em;border-radius:3px}
|
|
.me-preview sup{font-size:.75em;vertical-align:super;line-height:1}
|
|
.me-preview sub{font-size:.75em;vertical-align:sub;line-height:1}
|
|
.me-preview .me-math-block{display:block;margin:1.2em 0;padding:12px 16px;background:var(--md-code-bg);border-radius:8px;overflow-x:auto;font-family:var(--md-mono);font-size:.95em;text-align:center}
|
|
.me-preview .me-math-inline{font-family:var(--md-mono);font-size:.95em;padding:.05em .2em}
|
|
.me-preview dl{margin:.8em 0}
|
|
.me-preview dt{font-weight:650;margin:.6em 0 .2em}
|
|
.me-preview dd{margin:0 0 .3em 1.6em;color:var(--md-text)}
|
|
.me-preview .me-footnote-ref a{font-size:.75em;vertical-align:super;text-decoration:none;color:var(--md-accent)}
|
|
.me-preview .me-footnotes{margin-top:2em;border-top:1px solid var(--md-border);padding-top:.8em;font-size:.9em;color:var(--md-muted)}
|
|
.me-preview .me-footnotes hr{display:none}
|
|
.me-preview .me-footnotes ol{padding-left:1.2em}
|
|
.me-preview .me-footnote-item{margin:.3em 0}
|
|
.me-preview .me-footnote-backref{text-decoration:none;color:var(--md-accent);margin-right:.4em}
|
|
.me-toast{position:absolute;bottom:16px;right:16px;z-index:30;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;font-size:13px;pointer-events:auto;cursor:pointer;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s;box-shadow:0 6px 20px rgba(0,0,0,.15);max-width:360px}
|
|
.me-toast.me-toast-enter{opacity:1;transform:translateY(0)}
|
|
.me-toast.me-toast-leave{opacity:0;transform:translateY(12px)}
|
|
.me-toast-success{background:#10b981;color:#fff}
|
|
.me-toast-error{background:#ef4444;color:#fff}
|
|
.me-toast-warning{background:#f59e0b;color:#fff}
|
|
.me-toast-info{background:var(--md-accent,#3b82f6);color:#fff}
|
|
.me-toast-icon{font-weight:700;font-size:16px;flex-shrink:0}
|
|
.me-toast-msg{line-height:1.4}
|
|
.me-context-menu{position:fixed;z-index:40;min-width:180px;padding:4px 0;background:var(--md-bg);border:1px solid var(--md-border);border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.18);font-size:13px}
|
|
.me-context-menu-item{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;cursor:pointer;color:var(--md-text);transition:background .1s}
|
|
.me-context-menu-item:hover{background:var(--md-code-bg);color:var(--md-accent)}
|
|
.me-context-menu-sep{height:1px;background:var(--md-border);margin:4px 0}
|
|
.me-context-menu-shortcut{color:var(--md-muted);font-size:11px;margin-left:24px}
|
|
.me-context-menu-item.me-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
|
|
.me-outline{position:absolute;top:0;right:0;width:220px;height:100%;overflow-y:auto;background:var(--md-preview-bg);border-left:1px solid var(--md-border);padding:12px 14px;font-size:13px;z-index:15}
|
|
.me-outline-title{font-weight:650;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--md-border);color:var(--md-text)}
|
|
.me-outline ul{list-style:none;padding:0;margin:0}
|
|
.me-outline li{margin:2px 0}
|
|
.me-outline a{color:var(--md-muted);text-decoration:none;display:block;padding:2px 6px;border-radius:4px;transition:background .1s,color .1s}
|
|
.me-outline a:hover{background:var(--md-code-bg);color:var(--md-accent)}
|
|
.me-outline a.me-outline-active{background:var(--md-accent);color:#fff;font-weight:600}
|
|
.me-outline-l1 a{font-weight:600;color:var(--md-text)}
|
|
.me-outline-l2 a{padding-left:12px}
|
|
.me-outline-l3 a{padding-left:20px;font-size:12px}
|
|
.me-outline-l4 a{padding-left:28px;font-size:12px}
|
|
.me-wrapper.me-zen .me-body{max-width:820px;margin:0 auto}
|
|
.me-wrapper.me-zen .me-textarea{font-size:15px;line-height:1.8}
|
|
.me-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
|
|
@media print{.me-wrapper{border:0!important;box-shadow:none!important}
|
|
.me-toolbar,.me-statusbar,.me-divider{display:none!important}
|
|
.me-body.me-mode-split .me-editor-pane{display:none}
|
|
.me-body.me-mode-split .me-preview-pane{flex:1 1 100%!important}
|
|
.me-preview{padding:0!important;font-size:11pt}
|
|
.me-wrapper.me-fullscreen{position:static!important;width:auto!important;height:auto!important}}
|
|
[dir=rtl] .me-gutter{border-right:none;border-left:1px solid var(--md-border);text-align:left}
|
|
[dir=rtl] .me-gutter-line{padding-right:0;padding-left:4px}
|
|
[dir=rtl] .me-toolbar-group{margin-left:0;margin-right:auto;padding-left:0;padding-right:6px;border-left:none;border-right:1px solid var(--md-border)}
|
|
[dir=rtl] .me-outline{right:auto;left:0;border-left:none;border-right:1px solid var(--md-border)}
|
|
[dir=rtl] .me-outline-l2 a{padding-left:0;padding-right:12px}
|
|
[dir=rtl] .me-outline-l3 a{padding-left:0;padding-right:20px}
|
|
[dir=rtl] .me-outline-l4 a{padding-left:0;padding-right:28px}
|
|
[dir=rtl] .me-preview blockquote{border-left:none;border-right:3px solid var(--md-accent);border-radius:6px 0 0 6px}
|
|
[dir=rtl] .me-preview ul,[dir=rtl] .me-preview ol{padding-left:0;padding-right:1.6em}
|
|
[dir=rtl] .me-preview li.me-task-item{margin-left:0;margin-right:-1.4em}
|
|
[dir=rtl] .me-preview dd{margin-left:0;margin-right:1.6em}
|
|
[dir=rtl] .me-preview .me-footnotes ol{padding-left:0;padding-right:1.2em}
|
|
[dir=rtl] .me-preview .me-footnote-backref{margin-right:0;margin-left:.4em}
|
|
[dir=rtl] .me-search{right:auto;left:12px}
|
|
[dir=rtl] .me-toast{right:auto;left:16px}
|
|
[dir=rtl] .me-context-menu-shortcut{margin-left:0;margin-right:24px}
|
|
[dir=rtl] .me-statusbar{justify-content:flex-start}`;
|
|
};
|
|
|
|
export const injectStyles = (): void => {
|
|
if (typeof document === 'undefined') return;
|
|
if (styleElement && document.getElementById('metona-editor-styles')) return;
|
|
const css = generateCSS();
|
|
styleElement = document.createElement('style');
|
|
styleElement.id = 'metona-editor-styles';
|
|
styleElement.textContent = css;
|
|
document.head.appendChild(styleElement);
|
|
};
|
|
|
|
export const updateStyles = (): void => {
|
|
if (!styleElement) { injectStyles(); return; }
|
|
styleElement.textContent = generateCSS();
|
|
};
|
|
|
|
export const removeStyles = (): void => {
|
|
if (styleElement && styleElement.parentNode) {
|
|
styleElement.parentNode.removeChild(styleElement);
|
|
}
|
|
styleElement = null;
|
|
};
|
|
|
|
export const getSystemTheme = (): 'light' | 'dark' => {
|
|
if (typeof window === 'undefined') return 'light';
|
|
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
};
|
|
|
|
export const watchSystemTheme = (callback: (theme: 'light' | 'dark') => void): () => void => {
|
|
if (typeof window === 'undefined' || !window.matchMedia) return () => {};
|
|
const mq = window.matchMedia('(prefers-color-scheme: dark)');
|
|
const handler = (e: MediaQueryListEvent) => callback(e.matches ? 'dark' : 'light');
|
|
mq.addEventListener('change', handler);
|
|
return () => mq.removeEventListener('change', handler);
|
|
};
|
|
|
|
export default { injectStyles, updateStyles, removeStyles, getSystemTheme, watchSystemTheme };
|