feat: Markdown Editor for UOJForm (#46)

web/app/controllers/group_manage.php

@@ -64,10 +64,9 @@ if ($cur_tab == 'profile') {
 		'option_div_class' => 'form-check d-inline-block ms-2',
 		'default_value' => UOJGroup::info('is_hidden'),
 	]);
-	$update_profile_form->addTextArea('announcement', [
+	$update_profile_form->addMarkdownEditor('announcement', [
 		'div_class' => 'mt-3',
 		'label' => '公告',
-		'input_class' => 'form-control font-monospace',
 		'default_value' => UOJGroup::info('announcement'),
 		'help' => '公告支持 Markdown 语法。',
 		'validator_php' => function ($announcement, &$vdata) {
@@ -287,11 +286,11 @@ if ($cur_tab == 'profile') {
 			<div class="card mt-3 mt-md-0">
 				<div class="card-body">
 					<div id="result-alert" class="alert" role="alert" style="display: none"></div>
-					<div class="row row-cols-1 row-cols-md-2">
-						<div class="col">
-							<?= $update_profile_form->printHTML() ?>
+					<div class="row">
+						<div class="col-md-8">
+							<?php $update_profile_form->printHTML() ?>
 						</div>
-						<div class="col">
+						<div class="col-md-4">
 							<h5>注意事项</h5>
 							<ul class="mb-0">
 								<li>隐藏的小组无法被普通用户查看，即使该用户属于本小组。</li>

web/app/controllers/list_manage.php

@@ -25,6 +25,7 @@ if (!isset($tabs_info[$cur_tab])) {
 if ($cur_tab == 'profile') {
 	$update_profile_form = new UOJForm('update_profile');
 	$update_profile_form->addInput('name', [
+		'div_class' => 'mb-3',
 		'label' => '标题',
 		'default_value' => HTML::unescape(UOJList::info('title')),
 		'validator_php' => function ($title, &$vdata) {
@@ -47,7 +48,7 @@ if ($cur_tab == 'profile') {
 		},
 	]);
 	$update_profile_form->addCheckboxes('is_hidden', [
-		'div_class' => 'mt-3',
+		'div_class' => 'mb-3',
 		'label' => '可见性',
 		'label_class' => 'me-3',
 		'select_class' => 'd-inline-block',
@@ -59,6 +60,7 @@ if ($cur_tab == 'profile') {
 		],
 	]);
 	$update_profile_form->addInput('tags', [
+		'div_class' => 'mb-3',
 		'label' => '标签',
 		'default_value' => implode(', ', UOJList::cur()->queryTags()),
 		'validator_php' => function ($tags_str, &$vdata) {
@@ -93,7 +95,7 @@ if ($cur_tab == 'profile') {
 		},
 		'help' => '多个标签请使用逗号隔开。'
 	]);
-	$update_profile_form->addTextArea('content_md', [
+	$update_profile_form->addMarkdownEditor('content_md', [
 		'label' => '描述',
 		'default_value' => UOJList::cur()->queryContent()['content_md'],
 		'validator_php' => function ($content_md, &$vdata) {
@@ -237,11 +239,11 @@ if ($cur_tab == 'profile') {
 			<div class="card mt-3 mt-md-0">
 				<div class="card-body">
 					<div id="result-alert" class="alert" role="alert" style="display: none"></div>
-					<div class="row row-cols-1 row-cols-md-2">
-						<div class="col">
+					<div class="row">
+						<div class="col-md-8">
 							<?= $update_profile_form->printHTML() ?>
 						</div>
-						<div class="col mt-3 mt-md-0">
+						<div class="col-md-4">
 							<h5>注意事项</h5>
 							<ul class="mb-0">
 								<li>隐藏的题单无法被普通用户查看。</li>

web/app/controllers/subdomain/api/markdown.php

@@ -0,0 +1,24 @@
+<?php
+
+Auth::check() || redirectToLogin();
+
+$parsedown_type = UOJRequest::post('parsedown_type', 'is_string', 'default');
+$purifier_type = UOJRequest::post('purifier_type', 'is_string', 'default');
+
+$markdown = UOJRequest::post('markdown', 'is_string', '');
+
+$parsedown = HTML::parsedown();
+
+if ($purifier_type == 'inline') {
+	$purifier = HTML::purifier_inline();
+} else {
+	$purifier = HTML::purifier();
+}
+
+if ($parsedown_type == 'inline') {
+	$html = $purifier->purify($parsedown->line(UOJRequest::post('markdown', 'is_string')));
+} else {
+	$html = $purifier->purify($parsedown->text(UOJRequest::post('markdown', 'is_string')));
+}
+
+die($html);

web/app/controllers/subdomain/api/route.php

@@ -6,9 +6,14 @@ call_user_func(function () { // to prevent variable scope leak
 			'domain' => UOJConfig::$data['web']['main']['host'],
 		],
 		function () {
+			// Remote Judge
 			Route::post("/api/remote_judge/custom_account_validator", '/subdomain/api/remote_judge/custom_account_validator.php');
 
+			// Submission
 			Route::any('/api/submission/submission_status_details', '/subdomain/api/submission/submission_status_details.php');
+
+			// Misc
+			Route::post('/api/markdown', '/subdomain/api/markdown.php');
 		}
 	);
 });

web/app/controllers/subdomain/blog/blog.php

@@ -46,9 +46,9 @@ function getCommentContentToDisplay($comment) {
 }
 
 $comment_form = new UOJForm('comment');
-$comment_form->addTextArea('comment', [
+$comment_form->addMarkdownEditor('comment', [
 	'label' => '内容',
-	'help' => '评论支持 Markdown 语法。可以用 <code>@mike</code> 来提到 <code>mike</code> 这个用户，<code>mike</code> 会被高亮显示。如果你真的想打 <code>@</code> 这个字符，请用 <code>@@</code>。',
+	'help' => '评论支持 Markdown 语法。可以用 <code>@mike</code> 来提到 <code>mike</code> 这个用户，<code>mike</code> 会被高亮显示。',
 	'validator_php' => function ($comment) {
 		if (!Auth::check()) {
 			return '请先登录';
@@ -62,6 +62,7 @@ $comment_form->addTextArea('comment', [
 		return '';
 	},
 ]);
+$comment_form->config['ctrl_enter_submit'] = true;
 $comment_form->handle = function () {
 	global $blog, $comment_form;
 	$comment = $_POST['comment'];
@@ -122,7 +123,7 @@ $reply_form->addHidden(
 	},
 	null
 );
-$reply_form->addTextArea('reply_comment', [
+$reply_form->addMarkdownEditor('reply_comment', [
 	'label' => '内容',
 	'validator_php' => function ($comment) {
 		if (!Auth::check()) {

web/app/models/UOJForm.php

@@ -507,6 +507,50 @@ class UOJForm {
 		$this->config['has_file'] = true;
 	}
 
+	public function addMarkdownEditor($name, $config = []) {
+		$config += [
+			'div_class' => '',
+			'default_value' => '',
+			'label' => '',
+			'label_class' => 'form-label',
+			'placeholder' => '',
+			'help' => '',
+			'help_class' => 'form-text',
+			'validator_php' => function ($str, &$vdata) {
+				return '';
+			},
+			'validator_js' => null,
+		];
+
+		$html = '';
+		$html .= HTML::tag_begin('div', ['class' => $config['div_class'], 'id' => "div-$name"]);
+
+		$default_value = json_encode($config['default_value']);
+
+		if ($config['label']) {
+			$html .= HTML::tag('label', [
+				'class' => $config['label_class'],
+				'for' => "input-$name",
+				'id' => "label-$name"
+			], $config['label']);
+		}
+
+		$html .= <<<EOD
+			<div id="{$name}-markdown-input-container"></div>
+			<script>
+				$('#{$name}-markdown-input-container').markdown_input_editor("{$name}", "default", {$default_value});
+			</script>
+		EOD;
+
+		if ($config['help']) {
+			$html .= HTML::tag('div', ['class' => $config['help_class']], $config['help']);
+		}
+
+		$html .= HTML::tag_end('div');
+
+		$this->add($name, $html, $config['validator_php'], $config['validator_js']);
+	}
+
 	public function printHTML() {
 		echo HTML::tag_begin('form', [
 			'action' => UOJContext::requestURI(),

web/js/uoj.js

@@ -42,8 +42,16 @@ uojLocaleData = {
 	},
 	"editor::upload from local": {
 		"en": "Local file",
-		"zh-cn": "本地文件"
-	}
+		"zh-cn": "本地文件",
+	},
+	"editor::edit": {
+		"en": "Edit",
+		"zh-cn": "编辑",
+	},
+	"editor::preview": {
+		"en": "Preview",
+		"zh-cn": "预览",
+	},
 };
 
 function uojLocale(name) {
@@ -873,7 +881,7 @@ $.fn.text_file_form_group = function(name, text) {
 				monaco_editor_instance = monaco.editor.create(div_editor[0], {
 					language: 'text',
 					automaticLayout: true,
-					fontSize: "14px",
+					fontSize: "16px",
 				});
 
 				$('#' + spinner_id).css('display', 'none !important');
@@ -1645,6 +1653,148 @@ function custom_test_onsubmit(response_text, div_result, url) {
 	setTimeout(update, 500);
 }
 
+// markdown input editor
+$.fn.markdown_input_editor = function(name, type, text) {
+	return this.each(function() {
+		var input_editor_name = name;
+		var input_editor_id = 'input-' + name + '_editor';
+		var spinner_id = 'spinner-' + name + '_editor';
+		var div_editor_id = 'div-' + name + '_editor';
+		var div_preview_id = 'div-' + name + '_preview';
+
+		var btn_editor = $('<button class="nav-link" type="button" />').attr('data-bs-target', '#' + div_editor_id + '_edit').attr('data-bs-toggle', 'tab').text(uojLocale('editor::edit')).addClass('active');
+		var btn_preview = $('<button class="nav-link" type="button" />').attr('data-bs-target', '#' + div_editor_id + '_preview').attr('data-bs-toggle', 'tab').text(uojLocale('editor::preview'));
+
+		var div_editor = $('<div id="' + div_editor_id + '" style="height: 350px" />')
+			.append(
+				$('<div id="' + spinner_id + '" class="d-flex justify-content-center align-items-center" style="width: 100%; height: 350px;" />')
+					.append('<div class="spinner-border text-muted" style="width: 3rem; height: 3rem;" />')
+				);
+		var div_preview = $('<div id="' + div_preview_id + '" style="min-height: 350px" />');
+
+		var monaco_editor_instance = null;
+		var monaco_editor_init = function() {
+			require_monaco({ markdown: true }, function() {
+				if (monaco_editor_instance != null) {
+					return;
+				}
+
+				$(div_editor).empty();
+
+				monaco_editor_instance = monaco.editor.create(div_editor[0], {
+					language: 'markdown-math',
+					automaticLayout: true,
+					fontSize: "16px",
+					minimap: {
+						enabled: false,
+					},
+					wordWrap: 'on',
+					unicodeHighlight: {
+						ambiguousCharacters: false,
+					},
+				});
+
+				$('#' + spinner_id).css('display', 'none !important');
+				$(div_editor).addClass('overflow-hidden rounded-bottom').show();
+
+				monaco_editor_instance.getModel().setValue(text);
+				monaco_editor_instance.onDidChangeModelContent(function () {
+					$('#' + input_editor_id).val(monaco_editor_instance.getModel().getValue());
+				});
+
+				require(['MonacoMarkdown'], function(MonacoMarkdown) {
+					var extension = new MonacoMarkdown.MonacoMarkdownExtension();
+					extension.activate(monaco_editor_instance);
+				});
+			});
+		}
+
+		$(this)
+			.append(
+				$('<div class="card" />')
+					.append(
+						$('<div class="card-header" />').append(
+							$('<ul class="nav nav-tabs card-header-tabs">')
+								.append($('<li class="nav-item" />').append(btn_editor))
+								.append($('<li class="nav-item" />').append(btn_preview))
+						)
+					)
+					.append(
+						$('<div class="card-body tab-content p-0" />')
+							.append(
+								$('<div class="tab-pane active" />')
+									.attr('id', div_editor_id + '_edit')
+									.append(div_editor)
+							)
+							.append(
+								$('<div class="tab-pane" />')
+									.attr('id', div_editor_id + '_preview')
+									.append(div_preview)
+							)
+					)
+			)
+			.append($('<input type="hidden" name="' + input_editor_name + '" id="' + input_editor_id + '"/>').val(text));
+
+		bootstrap.Tab.jQueryInterface.call(btn_editor);
+		bootstrap.Tab.jQueryInterface.call(btn_preview).on('shown.bs.tab', function () {
+			$(div_preview)
+				.empty()
+				.append(
+					$('<div class="d-flex justify-content-center align-items-center" style="width: 100%; height: 350px;" />')
+						.append('<div class="spinner-border text-muted" style="width: 3rem; height: 3rem;" />')
+				);
+			
+			var render = function () {
+				$.ajax({
+					url: '/api/markdown',
+					type: 'POST',
+					dataType: 'text',
+					data: {
+						markdown: $('#' + input_editor_id).val(),
+						purifier_type: type,
+						parsedown_type: type,
+					},
+					success: function (html) {
+						$(div_preview).empty().append($('<div class="markdown-body p-3" />').html(html)).uoj_highlight();
+						if (window.MathJax) window.MathJax.typeset();
+					},
+					error: function () {
+						var btn_retry = $('<button type="button" class="btn btn-link p-0 alert-link" />').text('retry').click(function() {
+							$(div_preview)
+								.empty()
+								.append(
+									$('<div class="d-flex justify-content-center align-items-center" style="width: 100%; height: 350px;" />')
+										.append('<div class="spinner-border text-muted" style="width: 3rem; height: 3rem;" />')
+								);
+							
+							render();
+						});
+	
+						$(div_preview).empty().append(
+							$('<div class="m-3 alert alert-danger" />')
+								.append('<span>Render failed, </span>')
+								.append('<span>please </span>')
+								.append(btn_retry)
+						);
+					},
+				});
+			}
+
+			render();
+		});
+
+		var check_monaco_editor_init = function() {
+			if (div_editor.is(':visible')) {
+				monaco_editor_init();
+			} else {
+				setTimeout(check_monaco_editor_init, 1);
+			}
+		}
+
+		check_monaco_editor_init();
+	});
+}
+
 // hide comment
 function toggleModalHideComment(id, content) {
 	$('#input-comment_hide_id').val(id);