npm package: @peppersquare/strapi-content-editor
Description: Plug-and-play Strapi content editor for Next.js projects with interactive setup
Author: PSQ
Latest version: 1.0.4

# Strapi Content Editor

A plug-and-play content editor for Strapi-powered Next.js websites that allows real-time editing without modifying your existing UI code.

## 🚀 Quick Start

### 1. Install the Package

```bash
npm install @peppersquare/strapi-content-editor
```

### 2. Run Setup

```bash
npx strapi-editor setup
```

**If running from within your Next.js project** (recommended):
- The setup will automatically detect your UI project (current directory)
- You only need to provide the path to your Strapi CMS project

**If running from outside your projects**:
- You'll need to provide paths to both your UI and CMS projects

### 3. Start Editing

- **Keyboard**: Press `Ctrl+E` (Windows/Linux) or `Cmd+E` (Mac) on any page
- **URL**: Add `?edit=true` to any page URL
- **Button**: Click the floating "Edit" button (if enabled)

## 🎯 Features

- **Zero UI Code Changes**: Works by injecting a standalone script
- **Interactive Setup**: Guided configuration process
- **Auto-Detection**: Automatically detects common project structures
- **Dynamic API Mappings**: Reads your `constants/api.ts` file
- **Router Detection**: Automatically detects Pages Router vs App Router
- **Real-time Preview**: See changes instantly as you edit
- **Media Upload**: Built-in media upload with Strapi integration
- **Component Support**: Full support for Strapi components and repeatable fields

## 📦 What Gets Set Up

After running the setup, the plugin will:

- ✅ Generate API mappings from your `constants/api.ts`
- ✅ Create API routes for schema access (`/api/schema/*`)
- ✅ Build and inject the standalone editor script
- ✅ Detect your router type (Pages/App Router)
- ✅ Automatically inject script tag into `_app.tsx` or `layout.tsx`
- ✅ Set up environment variables in your UI project's `.env.local`
- ✅ Copy all necessary files to your UI project

## 🔧 Configuration

The plugin supports multiple configuration methods:

### 1. Interactive Setup (Recommended)
```bash
npx strapi-editor setup
```

### 2. Configuration File
Create `strapi-editor.config.js`:
```javascript
module.exports = {
  uiProject: {
    root: './PSQ UI'
  },
  cmsProject: {
    root: './psq_cms_2024'
  }
};
```

### 3. Environment Variables (Auto-Generated)

The setup process will automatically create/update your UI project's `.env.local` file with the required environment variables:

```env
NEXT_PUBLIC_STRAPI_URL=http://localhost:1337
STRAPI_CMS_DIR=/absolute/path/to/your/cms/project
```

**Note**: The `STRAPI_CMS_DIR` will be set to the absolute path of your CMS project as configured during setup.

### 4. Package.json Configuration
```json
{
  "strapiEditor": {
    "uiPath": "./PSQ UI",
    "cmsPath": "./psq_cms_2024"
  }
}
```

## 🎮 Usage

### Activate Edit Mode

- **Keyboard**: Press `Ctrl+E` (Windows/Linux) or `Cmd+E` (Mac)
- **URL**: Add `?edit=true` to any page URL
- **Button**: Click the floating "Edit" button (if enabled)

### Edit Content

1. **Select Content Type**: Choose from the dropdown in the right panel
2. **Edit Fields**: Modify text, upload media, add components
3. **Live Preview**: See changes instantly on the left
4. **Publish**: Click "Publish" to save to Strapi

## 📁 Generated Files

After setup, these files are created in your UI project:

```
PSQ UI/
├── public/
│   └── strapi-editor/
│       ├── api-mappings.json          # ✅ Generated from constants/api.ts
│       └── standalone-injector.js     # ✅ Main editor script
├── pages/
│   ├── _app.tsx                       # ✅ Modified (script tag added)
│   └── api/
│       └── schema/
│           ├── [contentType].ts       # ✅ Generated API route
│           └── components/
│               └── [folder]/
│                   └── [name].ts      # ✅ Generated API route
└── strapi-editor.config.js            # ✅ Configuration file
```

## 🎯 Supported Field Types

- **Text Fields**: String, Text, Rich Text
- **Media Fields**: Images, Videos, Files
- **Component Fields**: Single and repeatable components
- **Relation Fields**: Single and multiple relations
- **Date Fields**: Date and DateTime
- **Boolean Fields**: Checkboxes
- **Number Fields**: Integer, Float, Decimal

## 🚨 Requirements

- Next.js 14+ (Pages Router or App Router)
- Strapi 4+
- Node.js 18+

## 🔧 CLI Commands

- `npx strapi-editor setup` - Run interactive setup
- `npx strapi-editor help` - Show help information
- `npx strapi-editor version` - Show version information

## 🎉 Benefits

- **No Code Changes**: Your existing UI code remains untouched
- **Universal**: Works on any page with Strapi content
- **Dynamic**: Adapts to your API structure automatically
- **Real-time**: See changes instantly
- **Media Ready**: Built-in media upload and management
- **Component Support**: Full Strapi component editing

## 🔍 Troubleshooting

### Setup Issues
- Run `npx strapi-editor setup` to reconfigure
- Check that your UI and CMS project paths are correct
- Ensure both projects have valid `package.json` files

### Editor Not Loading
- Check browser console for errors
- Verify `standalone-injector.js` is accessible at `/strapi-editor/`
- Ensure environment variables are set correctly

### Configuration Issues
- Delete `strapi-editor.config.js` and run setup again
- Check that your project structure matches the expected format

## 📝 License

MIT

## 🤝 Support

For issues and questions, please visit our [GitHub repository](https://github.com/psq/strapi-content-editor).