Additional styles for rich text

Especially for editable content

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";

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;
+      }
+    }
+  }
+}

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 %>

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)