更新

core/factory.php

@@ -172,7 +172,7 @@ class Editor
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism-tomorrow.min.css">
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="<?php Helper::options()->themeUrl('typecho/write/css/joe.write.min.css?v=20210601') ?>">
+        <link rel="stylesheet" href="<?php Helper::options()->themeUrl('typecho/write/css/joe.write.min.css?v=20210602') ?>">
         <script>
             window.JoeConfig = {
                 uploadAPI: '<?php Helper::security()->index('/action/upload'); ?>',
@@ -188,7 +188,7 @@ class Editor
         <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/typecho-joe-next@6.2.4/plugin/prism/prism.min.js"></script>
         <script src="<?php Helper::options()->themeUrl('typecho/write/parse/parse.min.js') ?>"></script>
-        <script src="<?php Helper::options()->themeUrl('typecho/write/dist/index.js') ?>" type="module"></script>
+        <script src="<?php Helper::options()->themeUrl('typecho/write/dist/index.js?v=20210602') ?>" type="module"></script>
         <script src="<?php Helper::options()->themeUrl('assets/js/joe.short.min.js') ?>"></script>
 <?php
     }

core/function.php

@@ -2,7 +2,7 @@
 /* 获取主题当前版本号 */
 function _getVersion()
 {
-	return "7.1.9";
+	return "7.2.0";
 };
 
 /* 判断是否是手机 */

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "typecho-joe-next",
-	"version": "7.1.9",
+	"version": "7.2.0",
 	"description": "A Theme Of Typecho",
 	"main": "index.php",
 	"keywords": [

typecho/write/css/joe.write.min.scss

@@ -161,58 +161,12 @@ body.fullscreen {
 					border: 1px solid rgba(255, 255, 255, 0.25);
 					margin: -1px;
 				}
-				.cm-activeLine {
-					background-color: #292929;
-					border-radius: 2px;
-				}
-				.cmt-strong {
-					color: #61afef;
-					font-weight: 500;
-				}
 				.cm-nonmatchingBracket {
 					color: #ff5627;
 				}
-				.cmt-emphasis {
-					color: #b294bb;
-					font-style: italic;
-					font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 微软雅黑, Arial, sans-serif;
-				}
-				.cmt-deleted {
-					color: #ed6a43;
-					text-decoration: line-through;
-				}
-				.cmt-heading {
-					font-size: 18px;
-					color: #61afef;
-					font-weight: 700;
-				}
-				.cmt-link {
-					color: #e26666;
-				}
-				.cmt-url {
-					color: #5fa76f;
-				}
-				/* 代码高亮 */
-				.cmt-typeName {
-					color: #e2777a;
-				}
-				.cmt-string {
-					color: #7ec699;
-				}
-				.cmt-keyword {
-					color: #cc99cd;
-				}
-				.cmt-comment {
-					color: #5c6370;
-				}
-				.cmt-propertyName {
-					color: #d19a66;
-				}
-				.cmt-punctuation {
-					color: #808080;
-				}
-				.cmt-number {
-					color: #f08d49;
+				.cm-activeLine {
+					background-color: #292929;
+					border-radius: 2px;
 				}
 			}
 		}

typecho/write/js/_theme.js

@@ -0,0 +1,156 @@
+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: '#6a9955'
+		},
+		/* 未知 */
+		{
+			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

@@ -2,11 +2,11 @@ import { EditorView, keymap, highlightActiveLine } from '@codemirror/view';
 import { EditorState } from '@codemirror/state';
 import { bracketMatching } from '@codemirror/matchbrackets';
 import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets';
-import { defaultKeymap, defaultTabBinding } from '@codemirror/commands';
+import { defaultKeymap, indentLess, indentMore } from '@codemirror/commands';
 import { history, historyKeymap } from '@codemirror/history';
-import { classHighlightStyle } from '@codemirror/highlight';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { languages } from '@codemirror/language-data';
+import theme from './_theme';
 import tools from './_tools';
 import JoeAction from './_actions';
 import createPreviewHtml from './_create';
@@ -14,7 +14,18 @@ import createPreviewHtml from './_create';
 class Joe extends JoeAction {
 	constructor() {
 		super();
-		this.plugins = [classHighlightStyle, history(), bracketMatching(), closeBrackets(), highlightActiveLine()];
+		this.plugins = [theme(), history(), bracketMatching(), closeBrackets(), highlightActiveLine()];
+		this.keymaps = [
+			{
+				key: 'Tab',
+				run: ({ state, dispatch }) => {
+					if (state.selection.ranges.some(r => !r.empty)) return indentMore({ state, dispatch });
+					dispatch(state.update(state.replaceSelection('  '), { scrollIntoView: true }));
+					return true;
+				},
+				shift: indentLess
+			}
+		];
 		this._isPasting = false;
 		this.init_ViewPort();
 		this.init_Editor();
@@ -56,7 +67,7 @@ class Joe extends JoeAction {
 						base: markdownLanguage,
 						codeLanguages: languages
 					}),
-					keymap.of([defaultTabBinding, ...closeBracketsKeymap, ...defaultKeymap, ...historyKeymap]),
+					keymap.of([...this.keymaps, ...closeBracketsKeymap, ...defaultKeymap, ...historyKeymap]),
 					EditorView.updateListener.of(update => {
 						if (!update.docChanged) return;
 						if (_temp !== update.state.doc.toString()) {
@@ -134,8 +145,7 @@ class Joe extends JoeAction {
 							}
 						}
 					})
-				],
-				tabSize: 4
+				]
 			})
 		});
 		$('.cm-mainer').prepend(cm.dom);

typecho/write/package.json

@@ -11,7 +11,7 @@
     "@codemirror/language-data": "^0.18.0",
     "@codemirror/matchbrackets": "^0.18.0",
     "@codemirror/state": "^0.18.7",
-    "@codemirror/view": "^0.18.14",
+    "@codemirror/view": "^0.18.15",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "rollup-plugin-uglify": "^6.0.4"
   }