From b44b689caf8e9f2d8c6c2072ea833543cc7aa9af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Fri, 20 Jun 2025 16:03:48 +0400
Subject: [PATCH] Additional styles for rich text

Especially for editable content
---
 .../stylesheets/application.tailwind.css      |  1 +
 .../stylesheets/components/rich_text.css      | 30 +++++++++++++++++++
 .../editable_content_component.html.erb       |  4 ++-
 app/helpers/application_helper.rb             |  4 ++-
 4 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/stylesheets/components/rich_text.css

diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index bba2f9b..e6f4d78 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -9,4 +9,5 @@
 @import "components/forms";
 @import "components/notifications";
 @import "components/pagination";
+@import "components/rich_text";
 @import "components/tables";
diff --git a/app/assets/stylesheets/components/rich_text.css b/app/assets/stylesheets/components/rich_text.css
new file mode 100644
index 0000000..274a5e6
--- /dev/null
+++ b/app/assets/stylesheets/components/rich_text.css
@@ -0,0 +1,30 @@
+@layer base {
+  main {
+    .rich-text {
+      ul {
+        @apply list-disc list-inside;
+
+        li {
+          @apply my-2;
+        }
+      }
+
+      ol {
+        @apply list-decimal list-inside;
+
+        li {
+          @apply my-2;
+        }
+      }
+
+      li > ul,
+      li > ol {
+        @apply ps-6 my-1;
+      }
+
+      hr {
+        @apply my-8;
+      }
+    }
+  }
+}
diff --git a/app/components/editable_content_component.html.erb b/app/components/editable_content_component.html.erb
index a685f08..781ad93 100644
--- a/app/components/editable_content_component.html.erb
+++ b/app/components/editable_content_component.html.erb
@@ -1,6 +1,8 @@
 <% if @editable_content.has_content? %>
   <% if @editable_content.rich_text %>
-    <%= helpers.markdown_to_html @editable_content.content %>
+    <div class="rich-text">
+      <%= helpers.markdown_to_html @editable_content.content %>
+    </div>
   <% else %>
     <%= @editable_content.content %>
   <% end %>
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 47bf005..cce87be 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -16,7 +16,9 @@ module ApplicationHelper
   end
 
   def markdown_to_html(string)
-    raw Kramdown::Document.new(string, { input: "GFM" }).to_html
+    raw Kramdown::Document.new(string, {
+      input: "GFM"
+    }).to_html
   end
 
   def image_url_for(attachment)