# Terminal
rails g scaffold products name description:text
rails active_storage:install
bundle add marksmith commonmarker

# For esbuild
yarn add @avo-hq/marksmith

# For importmaps
bin/importmap pin @avo-hq/marksmith

# app/javascript/controllers/index.js
import { MarksmithController } from "@avo-hq/marksmith"
application.register("marksmith", MarksmithController)

// NOTE: For esbuild applications, do not edit the index.js directly. Instead, put it in the application.js or elsewhere.

# app/views/layouts/application.html.erb
<%= stylesheet_link_tag :marksmith, "data-turbo-track": "reload" %>

# app/views/products/_form.html.erb
<%= marksmith_tag %>
<div class="my-5">
  <%= form.label :description %>
  <%= form.marksmith :description, rows: 4, class: ["block shadow-sm rounded-md border px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": product.errors[:description].none?, "border-red-400 focus:outline-red-600": product.errors[:description].any?}] %>
</div>

# app/views/products/_product.html.erb
<div class="ms:prose ms:prose-slate">
  <%= sanitize(
    marksmithed(product.description),
    attributes: %w(style src class lang),
    tags: %w(table th tr td span) +
    ActionView::Helpers::SanitizeHelper.sanitizer_vendor.safe_list_sanitizer.allowed_tags.to_a) %>
</div>