feat: replace CodeMirror 6 with Milkdown 7.21 editor
- Remove 7 @codemirror/* packages, add 7 @milkdown/* packages - Rewrite useCodeMirror -> useMilkdown hook (ProseMirror-based) - Rewrite Editor.tsx with Milkdown lifecycle management - Update EditorToolbar to use Milkdown callCommand API - Replace CodeMirror CSS styles with Milkdown/ProseMirror styles - Support: CommonMark + GFM, dark mode, toolbar formatting - Bump version 0.2.0 -> 0.3.0
This commit is contained in:
thzxx
+105
-277
@@ -161,311 +161,139 @@ html, body {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
/* CodeMirror Wrapper */
|
||||
.codemirror-wrapper {
|
||||
/* Milkdown Wrapper */
|
||||
.milkdown-wrapper {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.codemirror-wrapper .cm-editor {
|
||||
.milkdown-wrapper .milkdown {
|
||||
height: 100%;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.codemirror-wrapper .cm-editor .cm-scroller {
|
||||
.milkdown-wrapper .milkdown .editor {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
padding: 12px 16px;
|
||||
outline: none;
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.codemirror-wrapper .cm-editor .cm-content {
|
||||
padding: 12px 0;
|
||||
.milkdown-wrapper .milkdown .editor p {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.codemirror-wrapper .cm-editor .cm-line {
|
||||
padding: 0 16px;
|
||||
.milkdown-wrapper .milkdown .editor h1,
|
||||
.milkdown-wrapper .milkdown .editor h2,
|
||||
.milkdown-wrapper .milkdown .editor h3,
|
||||
.milkdown-wrapper .milkdown .editor h4,
|
||||
.milkdown-wrapper .milkdown .editor h5,
|
||||
.milkdown-wrapper .milkdown .editor h6 {
|
||||
font-family: var(--font-ui);
|
||||
font-weight: 600;
|
||||
margin: 1em 0 0.5em;
|
||||
line-height: 1.3;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.codemirror-wrapper .cm-editor .cm-gutters {
|
||||
background: var(--bg-secondary);
|
||||
border-right: 1px solid var(--border-light);
|
||||
color: var(--text-tertiary);
|
||||
font-size: 12px;
|
||||
min-width: 40px;
|
||||
}
|
||||
.milkdown-wrapper .milkdown .editor h1 { font-size: 1.6em; }
|
||||
.milkdown-wrapper .milkdown .editor h2 { font-size: 1.4em; }
|
||||
.milkdown-wrapper .milkdown .editor h3 { font-size: 1.2em; }
|
||||
|
||||
.codemirror-wrapper .cm-editor .cm-activeLineGutter {
|
||||
background: var(--bg-tertiary);
|
||||
.milkdown-wrapper .milkdown .editor blockquote {
|
||||
border-left: 3px solid var(--primary);
|
||||
padding-left: 12px;
|
||||
margin: 0.5em 0;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.codemirror-wrapper .cm-editor .cm-activeLine {
|
||||
.milkdown-wrapper .milkdown .editor code {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg-tertiary);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.codemirror-wrapper .cm-editor.cm-focused {
|
||||
.milkdown-wrapper .milkdown .editor pre {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius);
|
||||
padding: 12px 16px;
|
||||
overflow-x: auto;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.milkdown-wrapper .milkdown .editor pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.milkdown-wrapper .milkdown .editor ul,
|
||||
.milkdown-wrapper .milkdown .editor ol {
|
||||
padding-left: 1.5em;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.milkdown-wrapper .milkdown .editor li {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
||||
.milkdown-wrapper .milkdown .editor hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border);
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
.milkdown-wrapper .milkdown .editor a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.milkdown-wrapper .milkdown .editor a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.milkdown-wrapper .milkdown .editor img {
|
||||
max-width: 100%;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
/* ProseMirror selection */
|
||||
.milkdown-wrapper .milkdown .editor .ProseMirror-selectednode {
|
||||
outline: 2px solid var(--primary);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.milkdown-wrapper .milkdown .editor ::selection {
|
||||
background: rgba(26, 115, 232, 0.3);
|
||||
}
|
||||
|
||||
:root.dark .milkdown-wrapper .milkdown .editor ::selection {
|
||||
background: rgba(100, 160, 255, 0.35);
|
||||
}
|
||||
|
||||
/* ProseMirror cursor */
|
||||
.milkdown-wrapper .milkdown .editor .ProseMirror-focused {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* ===== CodeMirror 搜索样式美化 ===== */
|
||||
|
||||
/* 搜索面板移到顶部 */
|
||||
.cm-panels {
|
||||
top: 0 !important;
|
||||
bottom: auto !important;
|
||||
/* Dark mode styles for Milkdown */
|
||||
.milkdown-wrapper.milkdown-dark .milkdown {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.cm-panels-bottom {
|
||||
top: 0 !important;
|
||||
bottom: auto !important;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
/* 搜索面板整体 */
|
||||
.cm-panel.cm-search {
|
||||
background: var(--bg) !important;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
padding: 8px 12px !important;
|
||||
font-family: var(--font-ui) !important;
|
||||
font-size: 13px !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* 搜索输入框 */
|
||||
.cm-panel .cm-textfield {
|
||||
background: var(--bg-secondary) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: 4px !important;
|
||||
padding: 4px 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-family: var(--font-ui) !important;
|
||||
color: var(--text) !important;
|
||||
outline: none !important;
|
||||
transition: border-color 0.15s ease !important;
|
||||
height: 28px !important;
|
||||
}
|
||||
|
||||
.cm-panel .cm-textfield:focus {
|
||||
border-color: var(--primary) !important;
|
||||
box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.15) !important;
|
||||
}
|
||||
|
||||
/* 搜索按钮 */
|
||||
.cm-panel .cm-button {
|
||||
background: var(--bg-secondary) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: 4px !important;
|
||||
color: var(--text-secondary) !important;
|
||||
font-size: 12px !important;
|
||||
font-family: var(--font-ui) !important;
|
||||
padding: 4px 10px !important;
|
||||
cursor: pointer !important;
|
||||
transition: all 0.15s ease !important;
|
||||
height: 28px !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.cm-panel .cm-button:hover {
|
||||
background: var(--bg-tertiary) !important;
|
||||
color: var(--text) !important;
|
||||
border-color: var(--text-tertiary) !important;
|
||||
}
|
||||
|
||||
.cm-panel .cm-button:active {
|
||||
background: var(--primary-light) !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
/* 搜索选项复选框（区分大小写、正则、全字匹配） */
|
||||
.cm-search label {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
gap: 5px !important;
|
||||
font-size: 13px !important;
|
||||
font-family: var(--font-ui) !important;
|
||||
color: var(--text-secondary) !important;
|
||||
cursor: pointer !important;
|
||||
user-select: none !important;
|
||||
vertical-align: middle !important;
|
||||
line-height: 1 !important;
|
||||
margin: 0 6px 0 0 !important;
|
||||
padding: 2px 0 !important;
|
||||
}
|
||||
|
||||
.cm-search input[type="checkbox"] {
|
||||
-webkit-appearance: none !important;
|
||||
appearance: none !important;
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
border: 1.5px solid var(--border) !important;
|
||||
border-radius: 4px !important;
|
||||
background: var(--bg) !important;
|
||||
cursor: pointer !important;
|
||||
position: relative !important;
|
||||
flex-shrink: 0 !important;
|
||||
vertical-align: middle !important;
|
||||
margin: 0 !important;
|
||||
transition: all 0.15s ease !important;
|
||||
}
|
||||
|
||||
.cm-search input[type="checkbox"]:hover {
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.cm-search input[type="checkbox"]:checked {
|
||||
background: var(--primary) !important;
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.cm-search input[type="checkbox"]:checked::after {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
left: 5px !important;
|
||||
top: 2px !important;
|
||||
width: 6px !important;
|
||||
height: 10px !important;
|
||||
border: solid white !important;
|
||||
border-width: 0 2px 2px 0 !important;
|
||||
transform: rotate(45deg) !important;
|
||||
}
|
||||
|
||||
/* 搜索结果计数 */
|
||||
.cm-panel .cm-search-info {
|
||||
color: var(--text-tertiary) !important;
|
||||
font-size: 11px !important;
|
||||
font-family: var(--font-ui) !important;
|
||||
padding: 0 8px !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
/* 关闭按钮 — 注意：CodeMirror 关闭按钮用的是 name="close"，没有 cm-close class */
|
||||
.cm-panel [name="close"] {
|
||||
position: absolute !important;
|
||||
top: 4px !important;
|
||||
right: 4px !important;
|
||||
color: var(--text-tertiary) !important;
|
||||
font-size: 22px !important;
|
||||
line-height: 1 !important;
|
||||
cursor: pointer !important;
|
||||
padding: 4px 6px !important;
|
||||
border-radius: 4px !important;
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
transition: all 0.15s ease !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
.cm-panel [name="close"]:hover {
|
||||
background: var(--bg-tertiary) !important;
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
/* 替换按钮组 */
|
||||
.cm-panel .cm-replace,
|
||||
.cm-panel .cm-replaceAll {
|
||||
background: var(--bg-secondary) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: 4px !important;
|
||||
color: var(--text-secondary) !important;
|
||||
font-size: 12px !important;
|
||||
padding: 4px 8px !important;
|
||||
cursor: pointer !important;
|
||||
transition: all 0.15s ease !important;
|
||||
}
|
||||
|
||||
.cm-panel .cm-replace:hover,
|
||||
.cm-panel .cm-replaceAll:hover {
|
||||
background: var(--bg-tertiary) !important;
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
/* 搜索高亮匹配 */
|
||||
.cm-searchMatch {
|
||||
background: rgba(255, 220, 0, 0.35) !important;
|
||||
border-radius: 2px !important;
|
||||
outline: 1px solid rgba(255, 220, 0, 0.5) !important;
|
||||
}
|
||||
|
||||
.cm-searchMatch.cm-searchMatch-selected {
|
||||
background: rgba(255, 150, 0, 0.55) !important;
|
||||
outline: 2px solid rgba(255, 150, 0, 0.8) !important;
|
||||
}
|
||||
|
||||
/* 暗色主题适配 */
|
||||
:root.dark .cm-searchMatch {
|
||||
background: rgba(255, 220, 0, 0.2) !important;
|
||||
outline-color: rgba(255, 220, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
:root.dark .cm-searchMatch.cm-searchMatch-selected {
|
||||
background: rgba(255, 150, 0, 0.35) !important;
|
||||
outline-color: rgba(255, 150, 0, 0.6) !important;
|
||||
}
|
||||
|
||||
:root.dark .cm-panel {
|
||||
background: var(--bg-secondary) !important;
|
||||
border-color: var(--border) !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
:root.dark .cm-panel .cm-textfield {
|
||||
background: var(--bg-tertiary) !important;
|
||||
border-color: var(--border) !important;
|
||||
}
|
||||
|
||||
:root.dark .cm-panel .cm-button,
|
||||
:root.dark .cm-panel .cm-replace,
|
||||
:root.dark .cm-panel .cm-replaceAll {
|
||||
background: var(--bg-tertiary) !important;
|
||||
border-color: var(--border) !important;
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
:root.dark .cm-panel .cm-button:hover,
|
||||
:root.dark .cm-panel .cm-replace:hover,
|
||||
:root.dark .cm-panel .cm-replaceAll:hover {
|
||||
background: var(--border) !important;
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
/* Fold gutter */
|
||||
.cm-foldGutter .cm-gutterElement {
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.cm-foldGutter .cm-gutterElement:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Selection — 必须匹配oneDark主题的选择器特异性才能覆盖 */
|
||||
.cm-selectionBackground {
|
||||
background: rgba(26, 115, 232, 0.25) !important;
|
||||
}
|
||||
|
||||
.cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground,
|
||||
.cm-editor.cm-focused .cm-selectionBackground,
|
||||
.cm-content ::selection {
|
||||
background: rgba(26, 115, 232, 0.3) !important;
|
||||
}
|
||||
|
||||
:root.dark .cm-selectionBackground {
|
||||
background: rgba(100, 160, 255, 0.25) !important;
|
||||
}
|
||||
|
||||
:root.dark .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground,
|
||||
:root.dark .cm-editor.cm-focused .cm-selectionBackground,
|
||||
:root.dark .cm-content ::selection {
|
||||
background: rgba(100, 160, 255, 0.35) !important;
|
||||
}
|
||||
|
||||
.cm-editor .cm-content {
|
||||
user-select: text !important;
|
||||
-webkit-user-select: text !important;
|
||||
}
|
||||
|
||||
.cm-editor .cm-cursor {
|
||||
border-left-color: var(--text);
|
||||
.milkdown-wrapper.milkdown-dark .milkdown .editor blockquote {
|
||||
border-left-color: var(--primary);
|
||||
}
|
||||
|
||||
/* Preview Panel */
|
||||
|
||||
Reference in New Issue
Block a user