feat: 优化更新编辑器
This commit is contained in:
WuHao
parent
c71a6f97cc
commit
7fce0d209a
2
typecho/write/css/joe.write.min.css
vendored
2
typecho/write/css/joe.write.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
typecho/write/dist/index.bundle.js
vendored
2
typecho/write/dist/index.bundle.js
vendored
File diff suppressed because one or more lines are too long
@ -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'
|
||||
},
|
||||
]);
|
||||
};
|
||||
@ -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-tools"></div>
|
||||
<div class="cm-mainer">
|
||||
<div class="cm-resize"></div>
|
||||
<div class="cm-preview"><div class="cm-preview-content"></div></div>
|
||||
<div class="cm-autosave"></div>
|
||||
</div>
|
||||
<div class="cm-progress-left"></div>
|
||||
<div class="cm-progress-right"></div>
|
||||
</div>
|
||||
`);
|
||||
<div class="cm-container">
|
||||
<div class="cm-tools"></div>
|
||||
<div class="cm-mainer">
|
||||
<div class="cm-resize"></div>
|
||||
<div class="cm-preview"><div class="cm-preview-content"></div></div>
|
||||
<div class="cm-autosave"></div>
|
||||
</div>
|
||||
<div class="cm-progress-left"></div>
|
||||
<div class="cm-progress-right"></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()) {
|
||||
|
||||
@ -4,18 +4,21 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@codemirror/closebrackets": "^0.19.0",
|
||||
"@codemirror/commands": "^0.19.2",
|
||||
"@codemirror/highlight": "^0.19.2",
|
||||
"@codemirror/commands": "^0.19.5",
|
||||
"@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/state": "^0.19.1",
|
||||
"@codemirror/view": "^0.19.3"
|
||||
"@codemirror/matchbrackets": "^0.19.2",
|
||||
"@codemirror/search": "^0.19.2",
|
||||
"@codemirror/state": "^0.19.2",
|
||||
"@codemirror/view": "^0.19.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-node-resolve": "^13.0.4",
|
||||
"rollup": "^2.56.3",
|
||||
"@rollup/plugin-node-resolve": "^13.0.5",
|
||||
"rollup": "^2.57.0",
|
||||
"rollup-plugin-terser": "^7.0.2"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user