feat: Add ActiveAdmin 4 and Propshaft support

- Switch to ActiveAdmin 4 beta with Tailwind CSS - Replace Sprockets with Propshaft for Rails 8 - Migrate from jQuery to vanilla JavaScript - Implement proper module initialization without setTimeout hacks - Add esbuild for JavaScript bundling with clean import aliases - Configure Tailwind CSS build process with ActiveAdmin plugin - Update engine configuration for both Propshaft and Sprockets - Add comprehensive documentation for AA4 gem updates - Maintain backward compatibility with legacy AA versions 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
2026-08-28 15:36:17 +03:00 · 2025-09-23 21:14:49 +03:00
--- a/spec/dummy/app/assets/builds/active_admin.css
+++ b/spec/dummy/app/assets/builds/active_admin.css
--- a/spec/dummy/app/assets/builds/active_admin.css.map
+++ b/spec/dummy/app/assets/builds/active_admin.css.map
--- a/spec/dummy/app/assets/builds/active_admin.js
+++ b/spec/dummy/app/assets/builds/active_admin.js
--- a/spec/dummy/app/assets/builds/active_admin.js.map
+++ b/spec/dummy/app/assets/builds/active_admin.js.map
--- a/spec/dummy/app/assets/config/manifest.js
+++ b/spec/dummy/app/assets/config/manifest.js
@@ -1,3 +1,7 @@
 //= link_tree ../images
-//= link_directory ../stylesheets .css
+//= link_directory ../javascripts .js
+//= link active_admin.css
+//= link active_admin.js
+//= link activeadmin_quill_editor.js
+//= link application.css
 // OFF link active_storage_db_manifest.js
--- a/spec/dummy/app/assets/javascripts/active_admin_legacy.js.bak
+++ b/spec/dummy/app/assets/javascripts/active_admin_legacy.js.bak
--- a/spec/dummy/app/assets/javascripts/activeadmin_quill_editor.js
+++ b/spec/dummy/app/assets/javascripts/activeadmin_quill_editor.js
@@ -0,0 +1 @@
+../../../../../vendor/assets/javascripts/activeadmin_quill_editor.js
--- a/spec/dummy/app/assets/javascripts/application.js
+++ b/spec/dummy/app/assets/javascripts/application.js
@@ -0,0 +1,2 @@
+//= require_tree ../builds
+//= require activeadmin_quill_editor
--- a/spec/dummy/app/assets/stylesheets/active_admin.css
+++ b/spec/dummy/app/assets/stylesheets/active_admin.css
@@ -0,0 +1,73 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+/* Import Quill styles */
+@import "../../../node_modules/quill/dist/quill.snow.css";
+@import "../../../node_modules/quill/dist/quill.bubble.css";
+
+/* Custom Quill integration styles for ActiveAdmin */
+@layer components {
+  .quill-editor {
+    @apply border border-gray-300 rounded-md;
+  }
+
+  .ql-toolbar {
+    @apply border-b-0 rounded-t-md;
+  }
+
+  .ql-container {
+    @apply rounded-b-md;
+  }
+
+  .ql-editor {
+    @apply min-h-[200px];
+  }
+
+  /* Dark mode support */
+  .dark .quill-editor {
+    @apply border-gray-600;
+  }
+
+  .dark .ql-toolbar {
+    @apply bg-gray-800 border-gray-600;
+  }
+
+  .dark .ql-container {
+    @apply bg-gray-900 border-gray-600;
+  }
+
+  .dark .ql-editor {
+    @apply text-gray-100;
+  }
+
+  /* Fix toolbar button styles */
+  .ql-toolbar button:hover {
+    @apply bg-gray-100 dark:bg-gray-700;
+  }
+
+  /* Ensure icons are visible in dark mode */
+  .dark .ql-toolbar button svg {
+    @apply text-gray-300;
+  }
+
+  .dark .ql-toolbar button:hover svg {
+    @apply text-white;
+  }
+
+  .dark .ql-toolbar .ql-stroke {
+    stroke: #9ca3af !important;
+  }
+
+  .dark .ql-toolbar .ql-fill {
+    fill: #9ca3af !important;
+  }
+
+  .dark .ql-toolbar button:hover .ql-stroke {
+    stroke: white !important;
+  }
+
+  .dark .ql-toolbar button:hover .ql-fill {
+    fill: white !important;
+  }
+}
--- a/spec/dummy/app/assets/stylesheets/active_admin_legacy.scss.bak
+++ b/spec/dummy/app/assets/stylesheets/active_admin_legacy.scss.bak
--- a/spec/dummy/app/javascript/active_admin.js
+++ b/spec/dummy/app/javascript/active_admin.js
@@ -0,0 +1,26 @@
+// Import ActiveAdmin - this already includes all features and Rails UJS
+// DO NOT import Rails separately as it's already included and started in ActiveAdmin
+import '@activeadmin/activeadmin';
+
+// Import Quill from NPM and make it globally available
+import Quill from 'quill';
+window.Quill = Quill;
+
+// Import the image uploader plugin if available (optional)
+try {
+  const ImageUploader = require('quill-image-uploader');
+  window.ImageUploader = ImageUploader.default || ImageUploader;
+} catch(e) {
+  // Image uploader is optional (silent failure)
+}
+
+// Import the Quill Editor initialization module
+import QuillEditorModule from 'activeadmin_quill_editor';
+
+// Now that Quill is available, initialize the editors
+// This ensures proper initialization order without setTimeout hacks
+if (window.QuillEditor && window.QuillEditor.init) {
+  window.QuillEditor.init();
+} else if (QuillEditorModule && QuillEditorModule.init) {
+  QuillEditorModule.init();
+}
--- a/spec/dummy/app/views/layouts/application.html.erb
+++ b/spec/dummy/app/views/layouts/application.html.erb
@@ -6,6 +6,7 @@
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all' %>
+    <%= javascript_include_tag 'application', 'data-turbo-track': 'reload', defer: true %>
  </head>

  <body>
--- a/spec/dummy/build_activeadmin_css.js
+++ b/spec/dummy/build_activeadmin_css.js
@@ -0,0 +1,191 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+const { spawnSync } = require('child_process');
+
+const root = __dirname;
+const inputPath = path.join(root, 'app/css/active_admin_source.css');
+const vendorCssPath = path.join(root, 'node_modules/quill/dist/quill.snow.css');
+const vendorBubbleCssPath = path.join(root, 'node_modules/quill/dist/quill.bubble.css');
+const tmpPath = path.join(root, 'app/css/__aa_tmp.css');
+const outPath = path.join(root, 'app/assets/builds/active_admin.css');
+
+function build() {
+  // Read source file
+  let srcContent = '';
+  if (fs.existsSync(inputPath)) {
+    srcContent = fs.readFileSync(inputPath, 'utf8');
+  } else {
+    // Create default source if it doesn't exist
+    srcContent = `@tailwind base;
+@tailwind components;
+@tailwind utilities;`;
+  }
+
+  // Extract tailwind directives and body content
+  const lines = srcContent.split(/\r?\n/);
+  const tailwindLines = lines.filter(line => line.includes('@tailwind'));
+  const bodyLines = lines.filter(line =>
+    !line.includes('@tailwind') &&
+    !line.includes('quill/dist/quill')
+  );
+
+  const tailwindDirectives = tailwindLines.join('\n') || '@tailwind base;\n@tailwind components;\n@tailwind utilities;';
+
+  // Read Quill vendor CSS
+  let vendorCss = '';
+
+  if (fs.existsSync(vendorCssPath)) {
+    vendorCss += `\n/* Begin Quill Snow theme CSS */\n`;
+    vendorCss += fs.readFileSync(vendorCssPath, 'utf8');
+    vendorCss += `\n/* End Quill Snow theme CSS */\n`;
+  } else {
+    console.warn('Warning: Quill Snow CSS not found at', vendorCssPath);
+  }
+
+  if (fs.existsSync(vendorBubbleCssPath)) {
+    vendorCss += `\n/* Begin Quill Bubble theme CSS */\n`;
+    vendorCss += fs.readFileSync(vendorBubbleCssPath, 'utf8');
+    vendorCss += `\n/* End Quill Bubble theme CSS */\n`;
+  } else {
+    console.warn('Warning: Quill Bubble CSS not found at', vendorBubbleCssPath);
+  }
+
+  const body = bodyLines.join('\n');
+
+  // Add custom Quill styles for ActiveAdmin integration
+  const customStyles = `
+/* Custom Quill integration styles */
+.quill-editor {
+  @apply border border-gray-300 rounded-md;
+}
+
+.ql-toolbar {
+  @apply border-b-0 rounded-t-md;
+}
+
+.ql-container {
+  @apply rounded-b-md;
+}
+
+.ql-editor {
+  @apply min-h-[200px];
+}
+
+/* Dark mode support */
+.dark .quill-editor {
+  @apply border-gray-600;
+}
+
+.dark .ql-toolbar {
+  @apply bg-gray-800 border-gray-600;
+}
+
+.dark .ql-container {
+  @apply bg-gray-900 border-gray-600;
+}
+
+.dark .ql-editor {
+  @apply text-gray-100;
+}
+
+/* Fix toolbar button styles */
+.ql-toolbar button:hover {
+  @apply bg-gray-100 dark:bg-gray-700;
+}
+
+/* Ensure icons are visible in dark mode */
+.dark .ql-toolbar button svg {
+  @apply text-gray-300;
+}
+
+.dark .ql-toolbar button:hover svg {
+  @apply text-white;
+}
+
+.dark .ql-toolbar .ql-stroke {
+  stroke: #9ca3af !important;
+}
+
+.dark .ql-toolbar .ql-fill {
+  fill: #9ca3af !important;
+}
+
+.dark .ql-toolbar button:hover .ql-stroke {
+  stroke: white !important;
+}
+
+.dark .ql-toolbar button:hover .ql-fill {
+  fill: white !important;
+}`;
+
+  // Combine all CSS - Tailwind directives, vendor CSS, custom styles, then body
+  const tmpCss = `${tailwindDirectives}\n${vendorCss}\n${customStyles}\n${body}`;
+
+  // Create directories if they don't exist
+  const cssDir = path.dirname(tmpPath);
+  if (!fs.existsSync(cssDir)) {
+    fs.mkdirSync(cssDir, { recursive: true });
+  }
+
+  const buildDir = path.dirname(outPath);
+  if (!fs.existsSync(buildDir)) {
+    fs.mkdirSync(buildDir, { recursive: true });
+  }
+
+  fs.writeFileSync(tmpPath, tmpCss, 'utf8');
+
+  // Run tailwindcss build
+  const res = spawnSync('npx', [
+    'tailwindcss',
+    '-c', path.join(root, 'tailwind-active_admin.config.js'),
+    '-i', tmpPath,
+    '-o', outPath,
+    '--minify'
+  ], { stdio: 'inherit', cwd: root });
+
+  if (res.status !== 0) {
+    console.error('Tailwind build failed');
+    process.exit(res.status || 1);
+  }
+
+  // Clean up temp file
+  fs.unlinkSync(tmpPath);
+
+  console.log(`ActiveAdmin CSS built successfully: ${outPath}`);
+  const stats = fs.statSync(outPath);
+  console.log(`File size: ${(stats.size / 1024).toFixed(2)} KB`);
+}
+
+// Support watch mode
+if (process.argv.includes('--watch')) {
+  console.log('Watching for changes...');
+
+  // Initial build
+  build();
+
+  // Watch for changes
+  const watchPaths = [
+    inputPath,
+    path.join(root, 'tailwind-active_admin.config.js'),
+    path.join(root, 'app/admin'),
+    path.join(root, 'app/views')
+  ];
+
+  const chokidar = require('chokidar');
+  const watcher = chokidar.watch(watchPaths, {
+    ignored: /node_modules|\.git|__aa_tmp\.css/,
+    persistent: true
+  });
+
+  watcher.on('change', () => {
+    console.log('Changes detected, rebuilding...');
+    try {
+      build();
+    } catch (err) {
+      console.error('Build error:', err);
+    }
+  });
+} else {
+  build();
+}
--- a/spec/dummy/config/initializers/active_admin.rb
+++ b/spec/dummy/config/initializers/active_admin.rb
@@ -216,6 +216,9 @@ ActiveAdmin.setup do |config|
  # To load a javascript file:
  #   config.register_javascript 'my_javascript.js'

+  # ActiveAdmin 4 with Propshaft loads assets via the application layout
+  # and the manifest.js file, not via register_stylesheet/register_javascript
+
  # == CSV options
  #
  # Set the CSV builder separator
--- a/spec/dummy/esbuild.config.js
+++ b/spec/dummy/esbuild.config.js
@@ -0,0 +1,50 @@
+#!/usr/bin/env node
+const esbuild = require('esbuild');
+const path = require('path');
+const { execSync } = require('node:child_process');
+
+// For development, use the local gem path
+const gemPath = path.resolve(__dirname, '../..');
+
+// Configuration for esbuild with proper module resolution
+const config = {
+  entryPoints: ['app/javascript/active_admin.js'],
+  bundle: true,
+  sourcemap: true,
+  format: 'iife',
+  outdir: 'app/assets/builds',
+  publicPath: '/assets',
+  loader: {
+    '.js': 'js',
+  },
+  // Define global Quill for the initialization script
+  define: {
+    'global': 'window'
+  },
+  // Use alias for clean imports
+  alias: {
+    'activeadmin_quill_editor': path.join(gemPath, 'vendor/assets/javascripts/activeadmin_quill_editor.js')
+  }
+};
+
+// Check if we're in watch mode
+const watchMode = process.argv.includes('--watch');
+
+if (watchMode) {
+  // Start the build with watch mode
+  esbuild.context(config).then(ctx => {
+    ctx.watch();
+    console.log('Watching for changes...');
+  }).catch(error => {
+    console.error('Build failed:', error);
+    process.exit(1);
+  });
+} else {
+  // Single build
+  esbuild.build(config).then(() => {
+    console.log('Build completed');
+  }).catch(error => {
+    console.error('Build failed:', error);
+    process.exit(1);
+  });
+}
--- a/spec/dummy/lib/tasks/active_admin.rake
+++ b/spec/dummy/lib/tasks/active_admin.rake
@@ -0,0 +1,34 @@
+namespace :active_admin do
+  desc "Build Active Admin Tailwind stylesheets"
+  task build: :environment do
+    command = [
+      "npx", "tailwindcss",
+      "-i", Rails.root.join("app/assets/stylesheets/active_admin.css").to_s,
+      "-o", Rails.root.join("app/assets/builds/active_admin.css").to_s,
+      "-c", Rails.root.join("tailwind.config.js").to_s,
+      "-m"
+    ]
+
+    system(*command, exception: true)
+  end
+
+  desc "Watch Active Admin Tailwind stylesheets"
+  task watch: :environment do
+    command = [
+      "npx", "tailwindcss",
+      "--watch",
+      "-i", Rails.root.join("app/assets/stylesheets/active_admin.css").to_s,
+      "-o", Rails.root.join("app/assets/builds/active_admin.css").to_s,
+      "-c", Rails.root.join("tailwind.config.js").to_s,
+      "-m"
+    ]
+
+    system(*command)
+  end
+end
+
+Rake::Task["assets:precompile"].enhance(["active_admin:build"])
+
+Rake::Task["test:prepare"].enhance(["active_admin:build"]) if Rake::Task.task_defined?("test:prepare")
+Rake::Task["spec:prepare"].enhance(["active_admin:build"]) if Rake::Task.task_defined?("spec:prepare")
+Rake::Task["db:test:prepare"].enhance(["active_admin:build"]) if Rake::Task.task_defined?("db:test:prepare")
--- a/spec/dummy/package-lock.json
+++ b/spec/dummy/package-lock.json
--- a/spec/dummy/package.json
+++ b/spec/dummy/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "activeadmin-quill-editor-test-app",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build:js": "node esbuild.config.js",
+    "build:css": "bundle exec rake active_admin:build",
+    "build": "npm run build:js && npm run build:css",
+    "watch:js": "node esbuild.config.js --watch",
+    "watch:css": "bundle exec rake active_admin:watch"
+  },
+  "dependencies": {
+    "@activeadmin/activeadmin": "^4.0.0-beta16",
+    "@rails/ujs": "^7.1.3",
+    "quill": "^2.0.2"
+  },
+  "devDependencies": {
+    "esbuild": "^0.19.5",
+    "tailwindcss": "^3.4.1"
+  }
+}
--- a/spec/dummy/tailwind.config.js
+++ b/spec/dummy/tailwind.config.js
@@ -0,0 +1,117 @@
+const execSync = require('child_process').execSync;
+const activeAdminPath = execSync('bundle show activeadmin', { encoding: 'utf-8' }).trim();
+
+module.exports = {
+  content: [
+    `${activeAdminPath}/vendor/javascript/flowbite.js`,
+    `${activeAdminPath}/plugin.js`,
+    `${activeAdminPath}/app/views/**/*.{arb,erb,html,rb}`,
+    './app/admin/**/*.{arb,erb,html,rb}',
+    './app/views/active_admin/**/*.{arb,erb,html,rb}',
+    './app/views/admin/**/*.{arb,erb,html,rb}',
+    './app/javascript/**/*.js',
+    // Quill editor gem files
+    '../../lib/**/*.rb',
+    '../../app/**/*.rb'
+  ],
+  darkMode: "class",
+  plugins: [
+    require('@activeadmin/activeadmin/plugin')
+  ],
+  theme: {
+    extend: {
+      // Add any custom theme extensions here
+    }
+  },
+  // CRITICAL: Safelist for ActiveAdmin 4 dynamic classes
+  safelist: [
+    // Grid and layout
+    'grid', 'gap-4', 'gap-6', 'lg:grid-cols-3', 'md:grid-cols-2',
+    'col-span-2', 'col-span-3', 'lg:col-span-2', 'lg:col-span-1',
+    // Flexbox
+    'flex', 'inline-flex', 'flex-col', 'flex-row', 'flex-wrap', 'flex-nowrap',
+    'justify-start', 'justify-end', 'justify-center', 'justify-between', 'justify-around',
+    'items-start', 'items-end', 'items-center', 'items-baseline', 'items-stretch',
+    // Spacing
+    'space-x-4', 'space-y-4', 'space-x-2', 'space-y-2',
+    'p-0', 'p-1', 'p-2', 'p-3', 'p-4', 'p-5', 'p-6', 'p-8',
+    'px-0', 'px-1', 'px-2', 'px-3', 'px-4', 'px-5', 'px-6', 'px-8',
+    'py-0', 'py-1', 'py-2', 'py-3', 'py-4', 'py-5', 'py-6', 'py-8',
+    'm-0', 'm-1', 'm-2', 'm-3', 'm-4', 'm-5', 'm-6', 'm-8',
+    'mx-0', 'mx-1', 'mx-2', 'mx-3', 'mx-4', 'mx-5', 'mx-6', 'mx-8', 'mx-auto',
+    'my-0', 'my-1', 'my-2', 'my-3', 'my-4', 'my-5', 'my-6', 'my-8', 'my-auto',
+    'mt-0', 'mt-1', 'mt-2', 'mt-3', 'mt-4', 'mt-5', 'mt-6', 'mt-8',
+    'mb-0', 'mb-1', 'mb-2', 'mb-3', 'mb-4', 'mb-5', 'mb-6', 'mb-8',
+    'ml-0', 'ml-1', 'ml-2', 'ml-3', 'ml-4', 'ml-5', 'ml-6', 'ml-8', 'ml-auto',
+    'mr-0', 'mr-1', 'mr-2', 'mr-3', 'mr-4', 'mr-5', 'mr-6', 'mr-8', 'mr-auto',
+    // Display
+    'block', 'inline-block', 'inline', 'hidden', 'table', 'table-cell', 'table-row',
+    'lg:block', 'lg:inline-block', 'lg:hidden', 'lg:flex',
+    'md:block', 'md:inline-block', 'md:hidden', 'md:flex',
+    'sm:block', 'sm:inline-block', 'sm:hidden', 'sm:flex',
+    // Width/Height
+    'w-full', 'w-auto', 'w-1/2', 'w-1/3', 'w-2/3', 'w-1/4', 'w-3/4',
+    'w-12', 'w-16', 'w-20', 'w-24', 'w-32', 'w-48', 'w-64', 'w-96',
+    'h-full', 'h-screen', 'h-auto', 'h-12', 'h-16', 'h-32', 'h-64',
+    'min-h-screen', 'min-h-full', 'max-w-7xl', 'max-w-full',
+    // Typography
+    'text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl',
+    'font-thin', 'font-light', 'font-normal', 'font-medium', 'font-semibold', 'font-bold',
+    'text-left', 'text-center', 'text-right', 'text-justify',
+    'uppercase', 'lowercase', 'capitalize', 'normal-case',
+    'italic', 'not-italic',
+    'leading-none', 'leading-tight', 'leading-normal', 'leading-loose',
+    // Colors (for dynamic theme)
+    'text-gray-50', 'text-gray-100', 'text-gray-200', 'text-gray-300', 'text-gray-400',
+    'text-gray-500', 'text-gray-600', 'text-gray-700', 'text-gray-800', 'text-gray-900',
+    'bg-white', 'bg-gray-50', 'bg-gray-100', 'bg-gray-200', 'bg-gray-300',
+    'bg-gray-400', 'bg-gray-500', 'bg-gray-600', 'bg-gray-700', 'bg-gray-800', 'bg-gray-900',
+    'bg-transparent',
+    'border-gray-100', 'border-gray-200', 'border-gray-300', 'border-gray-400',
+    'border-gray-500', 'border-gray-600', 'border-gray-700', 'border-gray-800',
+    // Dark mode
+    'dark:bg-gray-700', 'dark:bg-gray-800', 'dark:bg-gray-900',
+    'dark:text-gray-50', 'dark:text-gray-100', 'dark:text-gray-200', 'dark:text-gray-300', 'dark:text-gray-400',
+    'dark:text-white',
+    'dark:border-gray-600', 'dark:border-gray-700', 'dark:border-gray-800',
+    // Borders and Rounding
+    'border', 'border-0', 'border-2', 'border-4', 'border-8',
+    'border-t', 'border-b', 'border-l', 'border-r',
+    'border-t-0', 'border-b-0', 'border-l-0', 'border-r-0',
+    'rounded', 'rounded-sm', 'rounded-md', 'rounded-lg', 'rounded-xl', 'rounded-2xl', 'rounded-full',
+    'rounded-t', 'rounded-b', 'rounded-l', 'rounded-r',
+    'rounded-t-md', 'rounded-b-md', 'rounded-l-md', 'rounded-r-md',
+    // Shadows
+    'shadow-none', 'shadow-sm', 'shadow', 'shadow-md', 'shadow-lg', 'shadow-xl', 'shadow-2xl',
+    // Overflow
+    'overflow-auto', 'overflow-hidden', 'overflow-visible', 'overflow-scroll',
+    'overflow-x-auto', 'overflow-x-hidden', 'overflow-x-visible', 'overflow-x-scroll',
+    'overflow-y-auto', 'overflow-y-hidden', 'overflow-y-visible', 'overflow-y-scroll',
+    // Position
+    'static', 'fixed', 'absolute', 'relative', 'sticky',
+    'top-0', 'right-0', 'bottom-0', 'left-0',
+    'inset-0', 'inset-x-0', 'inset-y-0',
+    // Z-index
+    'z-0', 'z-10', 'z-20', 'z-30', 'z-40', 'z-50', 'z-auto',
+    // Opacity
+    'opacity-0', 'opacity-25', 'opacity-50', 'opacity-75', 'opacity-100',
+    // Cursor
+    'cursor-auto', 'cursor-pointer', 'cursor-not-allowed', 'cursor-wait',
+    // Forms
+    'form-input', 'form-select', 'form-checkbox', 'form-radio',
+    // Tables
+    'table-auto', 'table-fixed', 'border-collapse', 'border-separate',
+    // Transitions
+    'transition', 'transition-all', 'transition-colors', 'transition-opacity',
+    'duration-75', 'duration-100', 'duration-150', 'duration-200', 'duration-300',
+    'ease-in', 'ease-out', 'ease-in-out', 'ease-linear',
+    // Transform
+    'transform', 'transform-none',
+    'scale-90', 'scale-95', 'scale-100', 'scale-105', 'scale-110',
+    // Visibility
+    'visible', 'invisible',
+    // Quill specific classes
+    'ql-toolbar', 'ql-container', 'ql-editor', 'quill-editor',
+    'ql-snow', 'ql-bubble'
+  ]
+};
--- a/spec/support/javascript_helper.rb
+++ b/spec/support/javascript_helper.rb
@@ -0,0 +1,118 @@
+# frozen_string_literal: true
+
+module JavaScriptHelper
+  def ensure_quill_loaded
+    # Wait for Quill to be available
+    Timeout.timeout(10) do
+      loop do
+        quill_loaded = page.evaluate_script('typeof Quill !== "undefined"')
+        break if quill_loaded
+        sleep 0.1
+      end
+    end
+
+    # Wait for initialization script to be loaded
+    Timeout.timeout(10) do
+      loop do
+        init_loaded = page.evaluate_script(<<~JS)
+          typeof getQuillEditors === 'function' &&
+          typeof getQuillEditorByIndex === 'function' &&
+          typeof getQuillEditorByElementId === 'function'
+        JS
+        break if init_loaded
+        sleep 0.1
+      end
+    end
+  rescue Timeout::Error
+    raise 'Quill editor failed to load within timeout'
+  end
+
+  def wait_for_quill_editor(selector = '[data-aa-quill-editor]')
+    expect(page).to have_css(selector, wait: 5)
+    ensure_quill_loaded
+
+    # Wait for the editor to be initialized
+    page.evaluate_script(<<~JS)
+      (function() {
+        const editor = document.querySelector('#{selector}');
+        if (!editor || !editor._quillEditor) return false;
+        return true;
+      })()
+    JS
+  end
+
+  def get_quill_content(index = 0)
+    page.evaluate_script("getQuillEditorByIndex(#{index})?.root.innerHTML")
+  end
+
+  def set_quill_content(content, index = 0)
+    page.evaluate_script(<<~JS)
+      (function() {
+        const editor = getQuillEditorByIndex(#{index});
+        if (editor) {
+          editor.root.innerHTML = '#{content.gsub("'", "\\\\'")}';
+          return true;
+        }
+        return false;
+      })()
+    JS
+  end
+
+  def format_quill_text(format, index = 0)
+    page.evaluate_script(<<~JS)
+      (function() {
+        const editor = getQuillEditorByIndex(#{index});
+        if (editor) {
+          editor.selectAll();
+          editor.format('#{format}', true);
+          return true;
+        }
+        return false;
+      })()
+    JS
+  end
+
+  def insert_quill_text(text, index = 0)
+    page.evaluate_script(<<~JS)
+      (function() {
+        const editor = getQuillEditorByIndex(#{index});
+        if (editor) {
+          const length = editor.getLength();
+          editor.insertText(length - 1, '#{text.gsub("'", "\\\\'")}');
+          return true;
+        }
+        return false;
+      })()
+    JS
+  end
+
+  def quill_editor_count
+    page.evaluate_script('getQuillEditors().length')
+  end
+
+  def quill_has_content?(text, index = 0)
+    content = get_quill_content(index)
+    return false unless content
+    content.include?(text)
+  end
+
+  def click_quill_toolbar_button(button_class, index = 0)
+    page.evaluate_script(<<~JS)
+      (function() {
+        const editors = document.querySelectorAll('[data-aa-quill-editor]');
+        if (editors[#{index}]) {
+          const button = editors[#{index}].querySelector('.ql-toolbar .#{button_class}');
+          if (button) {
+            button.click();
+            return true;
+          }
+        }
+        return false;
+      })()
+    JS
+  end
+end
+
+RSpec.configure do |config|
+  config.include JavaScriptHelper, type: :system
+end
--- a/spec/system/css_loading_spec.rb
+++ b/spec/system/css_loading_spec.rb
@@ -0,0 +1,161 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe 'CSS Loading', type: :system do
+  before do
+    # Create an admin user if authentication is enabled
+    if defined?(AdminUser)
+      AdminUser.create!(email: 'admin@example.com', password: 'password')
+    end
+  end
+
+  context 'when loading Quill editor CSS' do
+    it 'loads Quill CSS from local assets' do
+      visit '/admin'
+
+      # Check that Quill CSS is loaded from local assets (not CDN)
+      quill_stylesheets = page.evaluate_script(<<~JS)
+        Array.from(document.styleSheets).filter(sheet => {
+          try {
+            return sheet.href && (sheet.href.includes('quill') ||
+                   (sheet.cssRules && Array.from(sheet.cssRules).some(rule =>
+                     rule.cssText && rule.cssText.includes('.ql-'))))
+          } catch(e) {
+            return false;
+          }
+        }).map(sheet => sheet.href || 'inline')
+      JS
+
+      expect(quill_stylesheets).not_to be_empty
+
+      # Ensure no CDN URLs
+      quill_stylesheets.each do |href|
+        next if href == 'inline'
+        expect(href).not_to match(%r{https?://cdn})
+        expect(href).not_to match(%r{jsdelivr})
+        expect(href).not_to match(%r{unpkg})
+        expect(href).to match(%r{/assets/}) if href != 'inline'
+      end
+    end
+
+    it 'properly bundles Quill CSS with ActiveAdmin CSS' do
+      visit '/admin'
+
+      # Check for ActiveAdmin CSS
+      aa_styles_loaded = page.evaluate_script(<<~JS)
+        window.getComputedStyle(document.body).fontFamily !== ''
+      JS
+      expect(aa_styles_loaded).to be true
+
+      # Check for Quill-specific CSS classes
+      quill_css_loaded = page.evaluate_script(<<~JS)
+        Array.from(document.styleSheets).some(sheet => {
+          try {
+            return sheet.cssRules && Array.from(sheet.cssRules).some(rule =>
+              rule.selectorText && (
+                rule.selectorText.includes('.ql-container') ||
+                rule.selectorText.includes('.ql-editor') ||
+                rule.selectorText.includes('.ql-toolbar')
+              )
+            );
+          } catch(e) {
+            return false;
+          }
+        })
+      JS
+      expect(quill_css_loaded).to be true
+    end
+
+    it 'applies Quill styles correctly when editor is present' do
+      # Create a test model with Quill editor
+      post = Post.create!(title: 'Test Post', description: '<p>Test content</p>')
+      visit "/admin/posts/#{post.id}/edit"
+
+      # Wait for editor to load
+      expect(page).to have_css('[data-aa-quill-editor]', wait: 5)
+
+      # Check that Quill styles are applied
+      editor_styles = page.evaluate_script(<<~JS)
+        (function() {
+          const editor = document.querySelector('.ql-container');
+          if (!editor) return null;
+          const styles = window.getComputedStyle(editor);
+          return {
+            position: styles.position,
+            display: styles.display,
+            hasBackground: styles.backgroundColor !== '' && styles.backgroundColor !== 'rgba(0, 0, 0, 0)'
+          };
+        })()
+      JS
+
+      expect(editor_styles).not_to be_nil
+      expect(editor_styles['display']).not_to eq('none')
+      expect(editor_styles['hasBackground']).to be true
+
+      # Check toolbar styles
+      toolbar_visible = page.evaluate_script(<<~JS)
+        (function() {
+          const toolbar = document.querySelector('.ql-toolbar');
+          if (!toolbar) return false;
+          const styles = window.getComputedStyle(toolbar);
+          return styles.display !== 'none' && styles.visibility !== 'hidden';
+        })()
+      JS
+
+      expect(toolbar_visible).to be true
+    end
+
+    it 'includes both snow and bubble theme CSS' do
+      visit '/admin'
+
+      # Check for snow theme CSS
+      snow_theme_loaded = page.evaluate_script(<<~JS)
+        Array.from(document.styleSheets).some(sheet => {
+          try {
+            return sheet.cssRules && Array.from(sheet.cssRules).some(rule =>
+              rule.selectorText && rule.selectorText.includes('.ql-snow')
+            );
+          } catch(e) {
+            return false;
+          }
+        })
+      JS
+
+      # Check for bubble theme CSS (if included)
+      bubble_theme_loaded = page.evaluate_script(<<~JS)
+        Array.from(document.styleSheets).some(sheet => {
+          try {
+            return sheet.cssRules && Array.from(sheet.cssRules).some(rule =>
+              rule.selectorText && rule.selectorText.includes('.ql-bubble')
+            );
+          } catch(e) {
+            return false;
+          }
+        })
+      JS
+
+      expect(snow_theme_loaded).to be true
+      # Bubble theme is optional
+      # expect(bubble_theme_loaded).to be true
+    end
+
+    it 'does not load duplicate Quill CSS files' do
+      visit '/admin'
+
+      # Count Quill CSS references
+      quill_css_count = page.evaluate_script(<<~JS)
+        Array.from(document.styleSheets).filter(sheet => {
+          try {
+            return sheet.href && sheet.href.includes('quill');
+          } catch(e) {
+            return false;
+          }
+        }).length
+      JS
+
+      # Should have at most one bundled CSS file with Quill styles
+      expect(quill_css_count).to be <= 1
+    end
+  end
+end
				`@@ -0,0 +1 @@`
				`../../../../../vendor/assets/javascripts/activeadmin_quill_editor.js`