avo-hq · adrianthedev · Feb 21, 2025
diff --git a/app/frontend/entrypoints/application.css b/app/frontend/entrypoints/application.css
@@ -11,17 +11,15 @@
 @source "./../../views/";
 @source "./../../helpers/";
 @source "./../../../lib/";
+@source "./../../../test/dummy/app/views/";
 
-.marksmith,
-.marksmith * {
-  box-sizing: border-box;
+.marksmith-editor,
+.marksmith-editor * {
+  @apply ms:box-border;
 }
 
 .ms\:button-spinner {
-  width: 24px;
-  height: 24px;
-
-  position: relative;
+  @apply ms:relative ms:size-6;
 }
 
 .ms\:button-spinner > .double-bounce1,

diff --git a/app/views/marksmith/shared/_editor.html.erb b/app/views/marksmith/shared/_editor.html.erb
@@ -40,7 +40,7 @@
   gallery_turbo_frame = local_assigns.dig(:gallery, :turbo_frame) || nil
 %>
 <%= content_tag :div,
-  class: "marksmith ms:block ms:flex-col ms:w-full ms:border ms:border-neutral-300 ms:rounded ms:@container ms:focus-within:border-neutral-400",
+  class: "marksmith-editor ms:block ms:flex-col ms:w-full ms:border ms:border-neutral-300 ms:rounded ms:@container ms:focus-within:border-neutral-400",
   data: {
     controller: "marksmith list-continuation",
     action: "

diff --git a/test/dummy/app/views/layouts/application.html.erb b/test/dummy/app/views/layouts/application.html.erb
@@ -39,6 +39,8 @@
   </head>
 
   <body>
-    <%= yield %>
+    <div class="ms:mx-auto ms:max-w-7xl ms:sm:px-6 ms:lg:px-8">
+      <%= yield %>
+    </div>
   </body>
 </html>
diff --git a/test/dummy/app/views/posts/_form.html.erb b/test/dummy/app/views/posts/_form.html.erb
@@ -18,7 +18,7 @@
 
   <div class="w-full">
     <%= form.label :body, style: "display: block" %>
-    <div style="width: 650px; resize: both; overflow: auto; padding: 10px;">
+    <div style="width: 650px; resize: both; overflow: auto;">
       <%#= form.marksmith :body, disabled: false, style: "border: 1px solid red;", placeholder: "Enter your markdown body here" %>
       <%= form.marksmith :body, enable_file_uploads: true, upload_url: nil %>
     </div>

diff --git a/test/dummy/app/views/posts/index.html.erb b/test/dummy/app/views/posts/index.html.erb
@@ -1,16 +1,21 @@
 <p style="color: green"><%= notice %></p>
 
-<% content_for :title, "Posts" %>
+<div class="ms:bg-white">
+  <div class="ms:mx-auto ms:max-w-7xl ms:px-6 ms:lg:px-8">
+    <div class="ms:mx-auto ms:max-w-2xl">
+      <h2 class="ms:text-pretty ms:text-4xl ms:font-semibold ms:tracking-tight ms:text-gray-900 ms:sm:text-5xl">Dummy blog</h2>
+      <p class="mt-2 ms:text-lg ms:leading-8 ms:text-gray-600">Edit or <%= link_to "create a new post", new_post_path %>.</p>
+      <div class="mt-10 ms:space-y-16 ms:border-t ms:border-gray-200 ms:pt-10 ms:sm:mt-16 ms:sm:pt-16">
+        <% @posts.each do |post| %>
+          <%= render post %>
 
-<h1>Posts</h1>
-
-<div id="posts">
-  <% @posts.each do |post| %>
-    <%= render post %>
-    <p>
-      <%= link_to "Show this post", post %>
-    </p>
-  <% end %>
+          <p>
+            <%= link_to "Show this post", post %>
+            <br>
+            <%= link_to "Edit this post", edit_post_path(post) %>
+          </p>
+        <% end %>
+      </div>
+    </div>
+  </div>
 </div>
-
-<%= link_to "New post", new_post_path %>
diff --git a/test/dummy/config/routes.rb b/test/dummy/config/routes.rb
@@ -1,5 +1,5 @@
 Rails.application.routes.draw do
   resources :posts
 
-  root "posts#index"
+  root to: redirect("/posts")
 end
diff --git a/test/dummy/db/seeds.rb b/test/dummy/db/seeds.rb
@@ -0,0 +1,74 @@
+Post.destroy_all
+
+[
+  {
+    title: "Lorem ipsum markdown post",
+    body: <<~MARKDOWN
+Lorem ipsum dolor sit amet, *consectetur* adipisicing elit, sed do eiusmod
+tempor incididunt ut **labore et dolore magna aliqua**. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. ***Duis aute irure dolor*** in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. ~~Excepteur sint occaecat~~ cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+## H2
+
+Lorem ipsum dolor sit amet, *consectetur* adipisicing elit, sed do eiusmod
+tempor incididunt ut **labore et dolore magna aliqua**. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat.
+
+---
+
+***Duis aute irure dolor*** in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. ~~Excepteur sint occaecat~~ cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+### H3
+
+unordered list:
+
+* item-1
+  * sub-item-1
+  * sub-item-2
+- item-2
+  - sub-item-3
+  - sub-item-4
++ item-3
+  + sub-item-5
+  + sub-item-6
+
+
+ordered list:
+
+1. item-1
+   1. sub-item-1
+   2. sub-item-2
+2. item-2
+   1. sub-item-3
+   2. sub-item-4
+3. item-3
+
+#### Header4
+
+Table Header-1 | Table Header-2 | Table Header-3
+:--- | :---: | ---:
+Table Data-1 | Table Data-2 | Table Data-3
+TD-4 | Td-5 | TD-6
+Table Data-7 | Table Data-8 | Table Data-9
+
+##### Header5
+
+You may also want some images right in here like ![GitHub Logo](https://cloud.githubusercontent.com/assets/5456665/13322882/e74f6626-dc00-11e5-921d-f6d024a01eaa.png "GitHub") - you can do that but I would recommend you to use the component "image" and simply split your text.
+
+###### Header6
+
+Let us do some links - this for example: https://github.com/MinhasKamal/github-markdown-syntax is **NOT** a link but this: is [GitHub](https://github.com/MinhasKamal/github-markdown-syntax)
+
+<img src="#" onerror="alert(1);">
+MARKDOWN
+}
+].map do |post|
+  Post.create!(post)
+end
+