更新

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

@@ -397,6 +397,36 @@ body.fullscreen {
 					position: relative;
 					text-decoration: none;
 				}
+				.task {
+					-webkit-appearance: none;
+					position: relative;
+					border-radius: 2px;
+					width: 15px;
+					height: 15px;
+					border: 2px solid #409eff;
+					vertical-align: -3px;
+                    box-sizing: border-box;
+                    margin: 0;
+					&:disabled {
+						cursor: not-allowed;
+					}
+					&:checked {
+						border: none;
+						background: #409eff;
+						&::after {
+							content: '';
+							width: 3px;
+							height: 7px;
+							position: absolute;
+							top: 2px;
+							left: 5px;
+							border: 2px solid #fff;
+							border-top: 0;
+							border-left: 0;
+							transform: rotate(45deg);
+						}
+					}
+				}
 			}
 		}
 	}
@@ -509,7 +539,7 @@ body.fullscreen {
 				border-left: 1px solid #e4e7ed;
 				border-top: 1px solid #e4e7ed;
 				font-family: 'Meiryo UI', 'Microsoft YaHei', 'Malgun Gothic', 'Segoe UI', 'Trebuchet MS', Helvetica, 'Monaco', monospace, Tahoma, STXihei, '华文细黑', STHeiti, 'Helvetica Neue', 'Droid Sans', 'wenquanyi micro hei', FreeSans, Arimo, Arial, SimSun, '宋体', Heiti, '黑体', sans-serif;
-                max-height: 380px;
+				max-height: 350px;
 				overflow-y: auto;
 				overscroll-behavior: none;
 				&::-webkit-scrollbar-track {

typecho/write/js/_actions.js

@@ -368,4 +368,9 @@ export default class JoeAction {
             `
 		});
 	}
+	handleTask(cm, type) {
+		const str = type ? '{x}' : '{ }';
+		this._replaceSelection(cm, ` ${str} `);
+		cm.focus();
+	}
 }

typecho/write/js/_create.js

@@ -0,0 +1,10 @@
+const parser = new HyperDown();
+export default function createPreviewHtml(str) {
+	str = parser.makeHtml(str);
+
+    str = str.replace(/{x}/g, '<input type="checkbox" class="task" checked disabled></input>')
+    str = str.replace(/{ }/g, '<input type="checkbox" class="task" disabled></input>')
+
+	$('.cm-preview-content').html(str);
+	$('.cm-preview-content pre code').each((i, el) => Prism.highlightElement(el));
+}

typecho/write/js/_tools.js

@@ -84,6 +84,16 @@ export default [
         title: '符号表情',
         innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="19" height="19"><path d="M512 56.889A455.111 455.111 0 0 0 56.889 512 455.111 455.111 0 0 0 512 967.111 455.111 455.111 0 0 0 967.111 512 455.111 455.111 0 0 0 512 56.889zm111.047 270.336A69.086 69.086 0 0 1 671.29 307.2c17.863 0 35.67 7.396 48.242 20.025 12.629 12.572 20.025 30.379 20.025 48.242 0 17.863-7.396 35.669-20.025 48.241-12.8 12.744-30.151 19.912-48.242 20.025a68.95 68.95 0 0 1-48.242-20.025 68.95 68.95 0 0 1-20.025-48.241c0-17.863 7.396-35.67 20.025-48.242zm-318.578 0a69.086 69.086 0 0 1 48.242-20.025c17.863 0 35.67 7.396 48.242 20.025 12.63 12.572 20.025 30.379 20.025 48.242 0 17.863-7.396 35.669-20.025 48.241-12.8 12.744-30.151 19.912-48.242 20.025a68.95 68.95 0 0 1-48.242-20.025 68.95 68.95 0 0 1-20.025-48.241c0-17.863 7.396-35.67 20.025-48.242zM786.375 566.67c-10.24 132.893-118.556 236.544-270.563 235.975-156.331 1.707-264.704-107.178-270.507-235.975a23.324 23.324 0 0 1-2.446-10.41c0-13.597 11.605-24.633 26.282-24.52h493.796c14.336 0 26.055 11.037 26.055 24.52a24.292 24.292 0 0 1-2.617 10.41z"/></svg>'
     },
+    {
+        type: 'task-no',
+        title: '任务 - 未完成',
+        innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M831.55 128.531c38.35 0 63.911 25.568 63.911 63.91v639.104c0 38.355-25.561 63.916-63.91 63.916H192.44c-38.34 0-63.908-25.56-63.908-63.916V192.442c0-38.343 25.567-63.91 63.908-63.91h639.11m0-63.91H192.44c-70.3 0-127.816 57.518-127.816 127.82v639.103c0 70.308 57.515 127.833 127.816 127.833h639.11c70.294 0 127.822-57.525 127.822-127.833V192.442c0-70.302-57.527-127.82-127.823-127.82zm0 0"/></svg>'
+    },
+    {
+        type: 'task-yes',
+        title: '任务 - 已完成',
+        innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M831.551 64.623h-639.11c-70.3 0-127.816 57.517-127.816 127.819v639.103c0 70.308 57.515 127.833 127.816 127.833h639.11c70.294 0 127.822-57.525 127.822-127.833V192.442c0-70.302-57.527-127.82-127.822-127.82zM646.217 486.44c-108.652 159.779-204.52 345.115-204.52 345.115L192.443 550.351l63.916-70.303 153.385 146.994s76.695-127.822 178.95-236.469c102.261-108.652 223.689-198.127 223.689-198.127l19.17 63.916c0-.001-102.255 108.646-185.337 230.078z"/></svg>'
+    },
     {
         type: 'code-block',
         title: '代码块',

typecho/write/js/joe.write.js

@@ -7,14 +7,13 @@ import { history, historyKeymap } from '@codemirror/history';
 import { classHighlightStyle } from '@codemirror/highlight';
 import tools from './_tools';
 import JoeAction from './_actions';
+import createPreviewHtml from './_create';
 
 class Joe extends JoeAction {
 	constructor() {
 		super();
 		this.plugins = [history(), classHighlightStyle, bracketMatching(), closeBrackets()];
-        this.parser = new HyperDown();
 		this._isPasting = false;
-
 		this.init_ViewPort();
 		this.init_Editor();
 		this.init_Preview();
@@ -22,12 +21,6 @@ class Joe extends JoeAction {
 		this.init_Insert();
 	}
 
-    _createPreviewHtml(str) {
-        str = this.parser.makeHtml(str);
-        $('.cm-preview-content').html(str);
-        $('.cm-preview-content pre code').each((i, el) => Prism.highlightElement(el));
-    }
-
 	/* 已测 √ */
 	init_ViewPort() {
 		if ($('meta[name="viewport"]').length > 0) $('meta[name="viewport"]').attr('content', 'width=device-width, user-scalable=no, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover');
@@ -47,7 +40,7 @@ class Joe extends JoeAction {
                 <div class="cm-progress-right"></div>
             </div>
         `);
-        this._createPreviewHtml($('#text').val());
+		createPreviewHtml($('#text').val());
 		const cm = new EditorView({
 			state: EditorState.create({
 				doc: $('#text').val(),
@@ -56,7 +49,7 @@ class Joe extends JoeAction {
 					keymap.of([defaultTabBinding, ...defaultKeymap, ...historyKeymap, ...closeBracketsKeymap]),
 					EditorView.updateListener.of(update => {
 						if (!update.docChanged) return;
-                        this._createPreviewHtml(update.state.doc.toString());
+						createPreviewHtml(update.state.doc.toString());
 					}),
 					EditorView.domEventHandlers({
 						paste: e => {
@@ -251,6 +244,12 @@ class Joe extends JoeAction {
 						case 'emoji':
 							super._createTableLists(this.cm, JoeConfig.emojiAPI, '表情', '符号表情（需数据库支持）');
 							break;
+						case 'task-no':
+							super.handleTask(this.cm, false);
+							break;
+						case 'task-yes':
+							super.handleTask(this.cm, true);
+							break;
 					}
 				});
 				$('.cm-tools').append(el);