WP Monaco Editor

A powerful code editor plugin for WordPress that integrates Monaco Editor (the same editor that powers Visual Studio Code) directly into your WordPress admin panel.

Features

• 🎨 Modern Code Editor - Full Monaco Editor integration with syntax highlighting
• 📁 File Explorer - Browse and manage files with an intuitive tree view
• 🔒 Secure Access Control - Configurable folder whitelist and capability-based permissions
• 💾 Auto-Save - Automatic file saving with configurable delay
• 🎯 Multi-Tab Interface - Work on multiple files simultaneously
• 🌙 Theme Support - Light, dark, and high-contrast themes
• 🔍 IntelliSense - Code completion and suggestions
• ⌨️ Keyboard Shortcuts - Familiar shortcuts like Ctrl+S to save
• 🛡️ WordPress Integration - Uses WordPress REST API with nonce authentication

Installation

1. Download the plugin ZIP file or clone this repository
2. Upload to your WordPress plugins directory (wp-content/plugins/)
3. Activate the plugin through the 'Plugins' menu in WordPress
4. Navigate to Code Editor in the admin menu

Configuration

Folder Access Whitelist

By default, the plugin allows access to:

• wp-content/themes
• wp-content/plugins

To configure allowed folders:

1. Go to Code Editor > Settings
2. Under Folder Access Control, add or remove folders
3. Click Save Changes

Important: All paths are relative to your WordPress root directory and restricted to within the WordPress installation.

Security Settings

Configure who can access the editor:

• Required Capability: Choose which WordPress capability is required (default: manage_options)
• Allowed Operations: Enable/disable specific operations:
  • Read Files
  • Write/Edit Files
  • Delete Files/Folders
  • Rename Files/Folders
  • Create Folders

Editor Preferences

Customize the editor appearance:

• Theme: Light, Dark, or High Contrast
• Font Size: 10-24 pixels
• Auto-Save: Enable/disable with configurable delay

Usage

Opening Files

1. Navigate to Code Editor in the WordPress admin menu
2. Browse folders in the left sidebar
3. Click on a file to open it in the editor

Editing Files

1. Open a file from the file explorer
2. Make your changes in the editor
3. Save using Ctrl+S (Cmd+S on Mac) or wait for auto-save

Multiple Files

• Open multiple files by clicking on them
• Switch between files using the tabs at the top
• Close tabs by clicking the × icon
• Modified files show a dot (•) indicator

Keyboard Shortcuts

• Ctrl+S / Cmd+S: Save current file
• Ctrl+F / Cmd+F: Find in file
• Ctrl+H / Cmd+H: Find and replace
• Ctrl+Z / Cmd+Z: Undo
• Ctrl+Shift+Z / Cmd+Shift+Z: Redo

Security Best Practices

1. Limit Folder Access: Only whitelist folders that need to be edited
2. Restrict Capabilities: Use the most restrictive capability that meets your needs
3. Disable Dangerous Operations: Consider disabling delete operations if not needed
4. Regular Backups: Always maintain regular backups of your WordPress site
5. Use on Staging: Test changes on a staging site before applying to production
6. Monitor Access: Keep track of who has access to the editor

System Requirements

• WordPress 5.8 or higher
• PHP 7.4 or higher
• Modern web browser with JavaScript enabled

Browser Compatibility

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)

Troubleshooting

Editor Not Loading

1. Check browser console for JavaScript errors
2. Ensure your browser supports modern JavaScript
3. Try clearing browser cache
4. Disable other plugins that might conflict

Cannot Access Files

1. Verify the folder is in the allowed folders list
2. Check that you have the required capability
3. Ensure the folder exists and is readable
4. Check file permissions on the server

Auto-Save Not Working

1. Verify auto-save is enabled in settings
2. Check that write operations are allowed
3. Ensure you have write permissions on the file

Development

File Structure

wp-monaco-editor/
├── wp-monaco-editor.php          # Main plugin file
├── includes/
│   ├── class-admin-menu.php      # Admin menu integration
│   ├── class-admin-page.php      # Admin page renderer
│   ├── class-filesystem-api.php  # REST API endpoints
│   └── class-settings.php        # Settings page
├── assets/
│   ├── js/
│   │   ├── api-client.js         # REST API client
│   │   ├── file-explorer.js      # File tree component
│   │   └── monaco-editor.js      # Monaco Editor integration
│   └── css/
│       └── admin-page.css        # Styles
└── README.md

REST API Endpoints

All endpoints are under /wp-json/wp-monaco/v1/fs/:

• GET /list?path=<path> - List directory contents
• GET /read?path=<path> - Read file contents
• POST /write - Write file contents
• POST /delete - Delete file/folder
• POST /mkdir - Create directory
• POST /rename - Rename file/folder
• GET /stat?path=<path> - Get file stats

Changelog

1.0.0

• Initial release
• Monaco Editor integration
• File explorer with tree view
• Multi-tab interface
• Auto-save functionality
• Folder whitelist security
• Settings page
• WordPress REST API integration

License

GPL v2 or later

Support

For support, please open an issue on GitHub or contact the plugin author.

Credits

• Built with Monaco Editor
• Inspired by Visual Studio Code
• Developed for WordPress

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Disclaimer

Use at your own risk. This plugin provides direct file system access. Always:

• Backup your site before using
• Test on staging environments first
• Restrict access to trusted users only
• Monitor file changes carefully

Made with ❤️ for the WordPress community