From d4b90c5e9d90573d851324c769c82541dad34374 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 31 Jan 2023 09:07:33 -0500
Subject: [PATCH] improve markdown css

---
 common/static/sass/_MdContent.sass     | 65 ++++++++++++++++++++++++++
 common/static/sass/boofilsic.sass      |  8 ++--
 journal/forms.py                       |  2 +-
 journal/templates/collection.html      |  5 +-
 journal/templates/collection_edit.html |  2 +-
 journal/templates/review.html          |  2 +-
 journal/templates/review_edit.html     | 12 ++---
 journal/views.py                       |  4 +-
 8 files changed, 81 insertions(+), 19 deletions(-)
 create mode 100644 common/static/sass/_MdContent.sass

diff --git a/common/static/sass/_MdContent.sass b/common/static/sass/_MdContent.sass
new file mode 100644
index 00000000..7b38b2ef
--- /dev/null
+++ b/common/static/sass/_MdContent.sass
@@ -0,0 +1,65 @@
+.markdown-content
+    & blockquote
+        background: #f9f9f9;
+        border-left: 10px solid #ccc;
+        margin: 1.5em 10px;
+        padding: 0.5em 10px;
+        quotes: "\201C""\201D""\2018""\2019";
+
+    & blockquote:before
+        color: #ccc;
+        content: open-quote;
+        font-size: 4em;
+        line-height: 0.1em;
+        margin-right: 0.25em;
+        vertical-align: -0.4em;
+
+    & table
+        border: 1px solid #ccc;
+        border-collapse: collapse;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        table-layout: fixed;
+
+    & table caption
+        font-size: 1.5em;
+        margin: .5em 0 .75em;
+
+    & table tr
+        background-color: #eee;
+        border: 1px solid #ccc;
+        padding: .35em;
+
+    & table th, table td
+        padding: .625em;
+        border: 1px solid #ccc;
+
+    & table th
+        font-size: .85em;
+        letter-spacing: .1em;
+
+    & code
+        background: #333;
+        color: #ddd;
+        font-family: monospace;
+
+    & pre
+        background: #333;
+        color: #ddd;
+        font-family: monospace;
+        width: 100%;
+        overflow: auto;
+        overflow-y: hidden;
+        font-size: 12px;
+        line-height: 20px;
+
+    & ol, ul
+        padding-left: 3rem;
+
+    & li
+        list-style: unset;
+
+    & mark
+        background: unset;
+        text-decoration: underline;
diff --git a/common/static/sass/boofilsic.sass b/common/static/sass/boofilsic.sass
index d314989f..56c3b8db 100644
--- a/common/static/sass/boofilsic.sass
+++ b/common/static/sass/boofilsic.sass
@@ -26,9 +26,11 @@
 @import Modal
 @import Label
 
-// boofilsic modules    
+// boofilsic modules
 @import MainSection
 @import AsideSection
 @import SingleSection
-     
-@import Vendor
\ No newline at end of file
+
+@import Vendor
+
+@import MdContent
diff --git a/journal/forms.py b/journal/forms.py
index 73ed22e2..b8d0ca59 100644
--- a/journal/forms.py
+++ b/journal/forms.py
@@ -41,7 +41,7 @@ COLLABORATIVE_CHOICES = [
 class CollectionForm(forms.ModelForm):
     # id = forms.IntegerField(required=False, widget=forms.HiddenInput())
     title = forms.CharField(label=_("标题"))
-    brief = MarkdownxFormField(label=_("介绍 (Markdown)"))
+    brief = MarkdownxFormField(label=_("介绍 (Markdown)"), strip=False)
     # share_to_mastodon = forms.BooleanField(label=_("分享到联邦网络"), initial=True, required=False)
     visibility = forms.TypedChoiceField(
         label=_("可见性"),
diff --git a/journal/templates/collection.html b/journal/templates/collection.html
index fe3aa094..be8fb570 100644
--- a/journal/templates/collection.html
+++ b/journal/templates/collection.html
@@ -64,8 +64,9 @@
                   </div>
                 </div>
                 <!-- <div class="dividing-line"></div> --> <!-- <div class="entity-card__img-wrapper" style="text-align: center;"> <img src="{{ collection.cover|thumb:'normal' }}" alt="" class="entity-card__img"> </div> -->
-                {{ collection.html | safe }}
-
+                <div class="markdown-content">
+                  {{ collection.html | safe }}
+                </div>
               </div>
               <div class="entity-list" hx-get="{% url 'journal:collection_retrieve_items' collection.uuid %}" hx-trigger="load">
               </div>
diff --git a/journal/templates/collection_edit.html b/journal/templates/collection_edit.html
index 8412cd30..33e9335f 100644
--- a/journal/templates/collection_edit.html
+++ b/journal/templates/collection_edit.html
@@ -24,7 +24,7 @@
       <section id="content" class="container">
         <div class="grid">
           <div class="single-section-wrapper" id="main">
-            <form class="entity-form" method="post" enctype="multipart/form-data">
+            <form class="entity-form markdown-content" method="post" enctype="multipart/form-data">
               {% csrf_token %}
               {{ form }}
               <input class="button" type="submit" value="{% trans '提交' %}">
diff --git a/journal/templates/review.html b/journal/templates/review.html
index 083869dc..3e05af4b 100644
--- a/journal/templates/review.html
+++ b/journal/templates/review.html
@@ -63,7 +63,7 @@
                   </div>
                 </div>
                 <!-- <div class="dividing-line"></div> -->
-                <div id="rawContent">
+                <div class="markdown-content">
                   {{ review.html_content | safe }}
                 </div>
               </div>
diff --git a/journal/templates/review_edit.html b/journal/templates/review_edit.html
index 31a5fddc..ea30a230 100644
--- a/journal/templates/review_edit.html
+++ b/journal/templates/review_edit.html
@@ -37,24 +37,18 @@
                   <span class="float-left">
                     {{ form.body.label }}
                   </span>
-                  <span class="float-right">
-                    <span class="review-form__preview-button">{% trans '预览' %}</span>
-                  </span>
                 </div>
-                <div id="rawContent">
+                <div class="markdown-content">
                   {{ form.body }}
                 </div>
+                <hr>
                 <div>
                 <label for="leading_space" style="display: inline;">
-                  <input type="checkbox" name="leading_space" value="1" id="leading_space" checked> 保留行首空格（替换为全角）
+                  <input type="checkbox" name="leading_space" value="1" id="leading_space" checked> 转换行首空格为全角
                 </label>
-                <span class="review-form__fyi">
-                  {% trans '不知道什么是Markdown？可以参考' %}<a target="_blank" href="https://www.markdownguide.org/">{% trans '这里' %}</a>
-                </span>
                 </div>
                 <div class="review-form__option">
                   <div class="review-form__visibility-radio">
-
                     {{ form.visibility.label }}{{ form.visibility }}
                   </div>
                   <div class="review-form__share-checkbox">
diff --git a/journal/views.py b/journal/views.py
index 9dd3733e..6f24ae52 100644
--- a/journal/views.py
+++ b/journal/views.py
@@ -438,8 +438,8 @@ def review_edit(request, item_uuid, review_uuid=None):
                 form.instance.created_time = mark_date
             if request.POST.get("leading_space"):
                 form.instance.body = re.sub(
-                    r"^(\u2003*)( +)",
-                    lambda s: "\u2003" * ((len(s[2]) + 1) // 2 + len(s[1])),
+                    r"^(\u2003*)(  +)",
+                    lambda s: "\u2003" * (len(s[2]) // 2 + len(s[1])),
                     form.instance.body,
                     flags=re.MULTILINE,
                 )