feat: 优化更新编辑器

typecho/write/js/_theme.js

@@ -1,156 +0,0 @@
-import { HighlightStyle, tags } from '@codemirror/highlight';
-
-export default () => {
-	return HighlightStyle.define([
-		/* -----------------以下为代码高亮部分-------------------- */
-		/* 应该是括号类的样式 */
-		{
-			tag: tags.punctuation,
-			color: '#808080'
-		},
-		/* 应该是标签名的样式 */
-		{
-			tag: tags.name,
-			color: '#d19a66'
-		},
-		/* 应该是属性名的样式 */
-		{
-			tag: tags.propertyName,
-			color: '#96c0d8'
-		},
-		/* 应该是属性值的样式 */
-		{
-			tag: tags.string,
-			color: '#98c379'
-		},
-		/* 应该是关键词的样式 */
-		{
-			tag: tags.keyword,
-			color: '#c678dd'
-		},
-		/* 应该是特殊符号的样式 */
-		{
-			tag: tags.operator,
-			color: '#96c0d8'
-		},
-		/* 应该是变量名的样式 */
-		{
-			tag: tags.variableName,
-			color: '#e06c75'
-		},
-		/* 应该是数字的样式 */
-		{
-			tag: tags.number,
-			color: '#d19a66'
-		},
-		/* 注释的样式 */
-		{
-			tag: tags.comment,
-			color: '#5C6370'
-		},
-		/* 未知 */
-		{
-			tag: tags.processingInstruction,
-			color: '#abb2bf'
-		},
-		/* 未知 */
-		{
-			tag: tags.labelName,
-			color: '#abb2bf'
-		},
-		/* 未知 */
-		{
-			tag: tags.definition(tags.propertyName),
-			color: '#e06c75'
-		},
-		/* 未知 */
-		{
-			tag: tags.definition(tags.variableName),
-			color: '#e5c07b'
-		},
-		/* 未知 */
-		{
-			tag: tags.local(tags.variableName),
-			color: '#d19a66'
-		},
-		/* 未知 */
-		{
-			tag: tags.atom,
-			color: '#d19a66'
-		},
-		/* 未知 */
-		{
-			tag: tags.meta,
-			color: '#abb2bf'
-		},
-
-		/* -----------------以下为Markdown高亮部分-------------------- */
-
-		/* 加粗 **Text** */
-		{
-			tag: tags.strong,
-			color: '#61afef',
-			fontWeight: '500'
-		},
-		/* 倾斜文字 *Text* */
-		{
-			tag: tags.emphasis,
-			color: '#b294bb',
-			fontStyle: 'italic',
-			fontFamily: 'Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Arial, sans-serif'
-		},
-		/* 删除线 ~~Text~~ */
-		{
-			tag: tags.strikethrough,
-			color: '#ed6a43',
-			textDecoration: 'line-through'
-		},
-		/* 链接 [Test] */
-		{
-			tag: tags.link,
-			color: '#e26666'
-		},
-		/* 地址 (http://) */
-		{
-			tag: tags.url,
-			color: '#5fa76f'
-		},
-		/* 标题样式 # */
-		{
-			tag: tags.heading1,
-			color: '#e06c75',
-			fontSize: '18px',
-			fontWeight: '700'
-		},
-		{
-			tag: tags.heading2,
-			color: '#e06c75',
-			fontSize: '18px',
-			fontWeight: '700'
-		},
-		{
-			tag: tags.heading3,
-			color: '#e06c75',
-			fontSize: '18px',
-			fontWeight: '700'
-		},
-		{
-			tag: tags.heading4,
-			color: '#e06c75',
-			fontSize: '18px',
-			fontWeight: '700'
-		},
-		{
-			tag: tags.heading5,
-			color: '#e06c75',
-			fontSize: '18px',
-			fontWeight: '700'
-		},
-		{
-			tag: tags.heading6,
-			color: '#e06c75',
-			fontSize: '18px',
-			fontWeight: '700'
-		},
-	]);
-};

typecho/write/js/index.js

@@ -1,4 +1,4 @@
-import { EditorView, keymap, highlightActiveLine } from '@codemirror/view';
+import { EditorView, keymap, drawSelection, highlightActiveLine } from '@codemirror/view';
 import { EditorState } from '@codemirror/state';
 import { bracketMatching } from '@codemirror/matchbrackets';
 import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets';
@@ -6,7 +6,10 @@ import { defaultKeymap, indentLess, indentMore } from '@codemirror/commands';
 import { history, historyKeymap } from '@codemirror/history';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { languages } from '@codemirror/language-data';
-import theme from './_theme';
+import { lineNumbers, highlightActiveLineGutter } from "@codemirror/gutter";
+import { highlightSelectionMatches } from "@codemirror/search";
+import { commentKeymap } from "@codemirror/comment";
+import { classHighlightStyle } from '@codemirror/highlight';
 import tools from './_tools';
 import JoeAction from './_actions';
 import createPreviewHtml from './_create';
@@ -14,7 +17,7 @@ import createPreviewHtml from './_create';
 class Joe extends JoeAction {
 	constructor() {
 		super();
-		this.plugins = [theme(), history(), bracketMatching(), closeBrackets(), highlightActiveLine()];
+		this.plugins = [classHighlightStyle, history(), bracketMatching(), closeBrackets(), drawSelection(), highlightActiveLine(), lineNumbers(), highlightActiveLineGutter(), highlightSelectionMatches()];
 		this.keymaps = [
 			{
 				key: 'Tab',
@@ -44,17 +47,17 @@ class Joe extends JoeAction {
 	/* 已测 √ */
 	init_Editor() {
 		$('#text').before(`
-            <div class="cm-container">
+				<div class="cm-container">
-                <div class="cm-tools"></div>
+						<div class="cm-tools"></div>
-                <div class="cm-mainer">
+						<div class="cm-mainer">
-                    <div class="cm-resize"></div>
+								<div class="cm-resize"></div>
-                    <div class="cm-preview"><div class="cm-preview-content"></div></div>
+								<div class="cm-preview"><div class="cm-preview-content"></div></div>
-					<div class="cm-autosave"></div>
+			<div class="cm-autosave"></div>
-                </div>
+						</div>
-                <div class="cm-progress-left"></div>
+						<div class="cm-progress-left"></div>
-                <div class="cm-progress-right"></div>
+						<div class="cm-progress-right"></div>
-            </div>
+				</div>
-        `);
+		`);
 		createPreviewHtml(null);
 		let _temp = null;
 		let _debounce = null;
@@ -67,7 +70,7 @@ class Joe extends JoeAction {
 						base: markdownLanguage,
 						codeLanguages: languages
 					}),
-					keymap.of([...this.keymaps, ...closeBracketsKeymap, ...defaultKeymap, ...historyKeymap]),
+					keymap.of([...this.keymaps, ...defaultKeymap, ...commentKeymap, ...historyKeymap, ...closeBracketsKeymap,]),
 					EditorView.updateListener.of(update => {
 						if (!update.docChanged) return;
 						if (_temp !== update.state.doc.toString()) {

typecho/write/package.json

@@ -4,18 +4,21 @@
   },
   "dependencies": {
     "@codemirror/closebrackets": "^0.19.0",
-    "@codemirror/commands": "^0.19.2",
+    "@codemirror/commands": "^0.19.5",
-    "@codemirror/highlight": "^0.19.2",
+    "@codemirror/comment": "^0.19.0",
+    "@codemirror/gutter": "^0.19.2",
+    "@codemirror/highlight": "^0.19.6",
     "@codemirror/history": "^0.19.0",
     "@codemirror/lang-markdown": "^0.19.1",
     "@codemirror/language-data": "^0.19.0",
-    "@codemirror/matchbrackets": "^0.19.1",
+    "@codemirror/matchbrackets": "^0.19.2",
-    "@codemirror/state": "^0.19.1",
+    "@codemirror/search": "^0.19.2",
-    "@codemirror/view": "^0.19.3"
+    "@codemirror/state": "^0.19.2",
+    "@codemirror/view": "^0.19.7"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@rollup/plugin-node-resolve": "^13.0.5",
-    "rollup": "^2.56.3",
+    "rollup": "^2.57.0",
     "rollup-plugin-terser": "^7.0.2"
   }
 }