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 %> +
+ <%= helpers.markdown_to_html @editable_content.content %> +
<% 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)