зеркало из
https://github.com/rs-pro/activeadmin-quill_editor.git
synced 2026-08-28 15:36:17 +03:00
docs: Clarify JS import usage and add complete example files
- Explicitly warn users NOT to copy the gem's JavaScript file - Clarify that activeadmin_quill_editor.js should be imported from the gem - Add complete working examples from dummy app: - Full app/javascript/active_admin.js with proper imports - Complete tailwind.config.js with all safelist classes - lib/tasks/active_admin.rake for Tailwind builds - Remove incorrect symlink from dummy app This prevents users from mistakenly copying the gem's JS file into their app instead of properly importing it from vendor/assets/javascripts/ 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
Этот коммит содержится в:
Gleb Tv
@@ -42,16 +42,37 @@ Or add to `package.json`:
|
||||
|
||||
### Step 3: Configure JavaScript (Rails 8 with esbuild)
|
||||
|
||||
**IMPORTANT**: Do NOT copy the gem's JavaScript file into your application. The gem provides `activeadmin_quill_editor.js` via its vendor/assets directory. You should import it, not duplicate it.
|
||||
|
||||
Create or update `app/javascript/active_admin.js`:
|
||||
```javascript
|
||||
// Import ActiveAdmin (if using AA4)
|
||||
// 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
|
||||
// Import Quill from NPM and make it globally available
|
||||
import Quill from 'quill';
|
||||
window.Quill = Quill;
|
||||
|
||||
// The gem's initialization will auto-load when included
|
||||
// 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 from the gem
|
||||
// This imports from vendor/assets/javascripts/activeadmin_quill_editor.js
|
||||
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();
|
||||
}
|
||||
```
|
||||
|
||||
### Step 4: Configure CSS
|
||||
@@ -114,6 +135,169 @@ if (process.argv.includes('--watch')) {
|
||||
}
|
||||
```
|
||||
|
||||
## Complete Example Files
|
||||
|
||||
These are complete working examples from our test suite that you can use as reference:
|
||||
|
||||
### tailwind.config.js
|
||||
```javascript
|
||||
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'
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
### lib/tasks/active_admin.rake
|
||||
```ruby
|
||||
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")
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
@@ -1 +0,0 @@
|
||||
../../../../../vendor/assets/javascripts/activeadmin_quill_editor.js
|
||||
@@ -1,191 +0,0 @@
|
||||
#!/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();
|
||||
}
|
||||
Ссылка в новой задаче
Block a user