From a08a94304fa599a90115cea8a1acf20b3e7548fb Mon Sep 17 00:00:00 2001
From: Baoshuo <i@baoshuo.ren>
Date: Tue, 28 Feb 2023 17:32:22 +0800
Subject: [PATCH] refactor(blog-editor): ui improvements

---
 web/app/models/UOJBlogEditor.php  |  1 +
 web/css/blog-editor.css           | 13 --------
 web/js/blog-editor/blog-editor.js | 49 ++++++++++++++++++++++++-------
 web/js/uoj.js                     | 20 +------------
 4 files changed, 41 insertions(+), 42 deletions(-)

diff --git a/web/app/models/UOJBlogEditor.php b/web/app/models/UOJBlogEditor.php
index 7b6f366..c0c1741 100644
--- a/web/app/models/UOJBlogEditor.php
+++ b/web/app/models/UOJBlogEditor.php
@@ -189,6 +189,7 @@ class UOJBlogEditor {
 				echoUOJPageHeader('博客预览', [
 					'ShowPageHeader' => false,
 					'REQUIRE_LIB' => $req_lib,
+					'PageBodyClass' => 'py-3',
 				]);
 
 				echo '<article class="markdown-body">';
diff --git a/web/css/blog-editor.css b/web/css/blog-editor.css
index 7c89a39..3661017 100644
--- a/web/css/blog-editor.css
+++ b/web/css/blog-editor.css
@@ -1,16 +1,3 @@
-.blog-content-md-editor {
-	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
-}
-
-.blog-content-md-editor-toolbar {
-	background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%);
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1)));
-	background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
-	background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
-	background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
-	background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
-	padding: 5px 5px 5px 5px;
-}
 .blog-content-md-editor-in {
 	width: 100%;
 	height: 500px;
diff --git a/web/js/blog-editor/blog-editor.js b/web/js/blog-editor/blog-editor.js
index e490ccb..7376cdb 100644
--- a/web/js/blog-editor/blog-editor.js
+++ b/web/js/blog-editor/blog-editor.js
@@ -22,13 +22,17 @@ function blog_editor_init(name, editor_config) {
 	var preview_btn = $('<button type="button" class="btn btn-secondary btn-sm"><i class="bi bi-eye"></i></button>');
 	var bold_btn = $('<button type="button" class="btn btn-secondary btn-sm ml-2"><i class="bi bi-type-bold"></i></button>');
 	var italic_btn = $('<button type="button" class="btn btn-secondary btn-sm"><i class="bi bi-type-italic"></i></button>');
-	
+	var strike_btn = $('<button type="button" class="btn btn-secondary btn-sm"><i class="bi bi-type-strikethrough"></i></button>');
+	var divider_btn = $('<button type="button" class="btn btn-secondary btn-sm"><i class="bi bi-dash"></i></button>');
+
 	bootstrap.Tooltip.jQueryInterface.call(save_btn, { container: 'body', title: '保存 (Ctrl-S)' });
 	bootstrap.Tooltip.jQueryInterface.call(preview_btn, { container: 'body', title: '预览 (Ctrl-D)'	});
 	bootstrap.Tooltip.jQueryInterface.call(bold_btn, { container: 'body', title: '粗体 (Ctrl-B)' });
 	bootstrap.Tooltip.jQueryInterface.call(italic_btn, { container: 'body', title: '斜体 (Ctrl-I)' });
+	bootstrap.Tooltip.jQueryInterface.call(strike_btn, { container: 'body', title: '删除线 (Alt-S)' });
+	bootstrap.Tooltip.jQueryInterface.call(divider_btn, { container: 'body', title: '分割线 (Alt-D)' });
 
-	var all_btn = [save_btn, preview_btn, bold_btn, italic_btn];
+	var all_btn = [save_btn, preview_btn, bold_btn, italic_btn, strike_btn, divider_btn];
 	
 	// init toolbar
 	var toolbar = $('<div class="btn-toolbar"></div>');
@@ -39,6 +43,8 @@ function blog_editor_init(name, editor_config) {
 	toolbar.append($('<div class="btn-group"></div>')
 		.append(bold_btn)
 		.append(italic_btn)
+		.append(strike_btn)
+		.append(divider_btn)
 	);
 	
 	function set_saved(val) {
@@ -81,11 +87,11 @@ function blog_editor_init(name, editor_config) {
 	// init editor
 	if (input_content_md[0]) {
 		div_container_editor.empty();
-		div_container_editor.wrap('<div class="blog-content-md-editor"></div>');
+		div_container_editor.wrap('<div class="blog-content-md-editor border rounded" />');
 		var blog_contend_md_editor = div_container_editor.parent();
-		blog_contend_md_editor.prepend($('<div class="blog-content-md-editor-toolbar"></div>').append(toolbar));
-		div_container_editor.wrap('<div class="blog-content-md-editor-in border"></div>');
-		div_container_editor.append($('<div class="border d-flex justify-content-center align-items-center" style="width: 100%; height: 500px;" />').append('<div class="spinner-border text-muted" style="width: 3rem; height: 3rem;" />'));
+		blog_contend_md_editor.prepend($('<div class="blog-content-md-editor-toolbar bg-secondary-subtle px-2 py-1 border-bottom rounded-top" />').append(toolbar));
+		div_container_editor.wrap('<div class="blog-content-md-editor-in rounded-bottom overflow-hidden" />');
+		div_container_editor.append($('<div class="d-flex justify-content-center align-items-center" style="width: 100%; height: 500px;" />').append('<div class="spinner-border text-muted" style="width: 3rem; height: 3rem;" />'));
 
 		require_monaco({
 			markdown: true,
@@ -122,6 +128,16 @@ function blog_editor_init(name, editor_config) {
 				monaco_editor_instance.focus();
 			});
 
+			strike_btn.click(function() {
+				monaco_editor_instance.trigger('', 'markdown.extension.editing.toggleStrikethrough');
+				monaco_editor_instance.focus();
+			});
+
+			divider_btn.click(function() {
+				monaco_editor_instance.trigger('keyboard', 'type', { text: "\n---\n" });
+				monaco_editor_instance.focus();
+			});
+
 			monaco_editor_instance.addAction({
 				id: 'save',
 				label: 'Save',
@@ -136,15 +152,28 @@ function blog_editor_init(name, editor_config) {
 			});
 
 			monaco_editor_instance.addAction({
-				id: 'italic',
-				label: 'Italic',
+				id: 'preview',
+				label: 'Preview',
 				keybindings: [
-					monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyI,
+					monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyD,
 				],
 				precondition: null,
 				keybindingContext: null,
 				run: function(ed) {
-					italic_btn.click();
+					preview_btn.click();
+				},
+			});
+
+			monaco_editor_instance.addAction({
+				id: 'divider',
+				label: 'Divider',
+				keybindings: [
+					monaco.KeyMod.Alt | monaco.KeyCode.KeyD,
+				],
+				precondition: null,
+				keybindingContext: null,
+				run: function(ed) {
+					divider_btn.click();
 				},
 			});
 
diff --git a/web/js/uoj.js b/web/js/uoj.js
index 4684bb5..ced468a 100644
--- a/web/js/uoj.js
+++ b/web/js/uoj.js
@@ -667,24 +667,6 @@ function get_monaco_mode(lang) {
 }
 
 // auto save
-function autosave_locally(interval, name, target) {
-	if (typeof(Storage) === "undefined") {
-		console.log('autosave_locally: Sorry! No Web Storage support..');
-		return;
-	}
-	var url = window.location.href;
-	var hp = url.indexOf('#');
-	var uri = hp == -1 ? url : url.substr(0, hp);
-	var full_name = name + '@' + uri;
-
-	target.val(localStorage.getItem(full_name));
-	var save = function() {
-		localStorage.setItem(full_name, target.val());
-		setTimeout(save, interval);
-	};
-	setTimeout(save, interval);
-}
-
 function autosave_locally_monaco(interval, name, monaco_instance) {
 	if (typeof(Storage) === "undefined") {
 		console.log('autosave_locally_monaco: Sorry! No Web Storage support..');
@@ -762,7 +744,7 @@ $.fn.source_code_form_group = function(name, text, langs_options_html) {
 				monaco_editor_instance = monaco.editor.create(div_editor[0], {
 					language: mode,
 					automaticLayout: true,
-					fontSize: "14px",
+					fontSize: "16px",
 				});
 
 				$('#' + spinner_id).css('display', 'none !important');