Download the PHP package rafaelogic/writr without Composer

Writr - Laravel Notion-like Editor Package

A production-ready, comprehensive Notion-like editor for Laravel applications using Editor.js. Features a complete block-based editing experience with advanced tools, file handling, and seamless Laravel integration.

📖 Table of Contents

• 🌐 Live Demo
• ✨ Features
  • 📝 Core Editor Capabilities
  • 🚀 Advanced Features
  • 🔧 Laravel Integration
  • 🏗️ Architecture & Development
• 📦 Installation
  • Requirements
  • 1. Install via Composer
  • 2. Publish Assets (Optional)
  • 3. Setup Layout
• 🚀 Quick Start
  • Basic Usage
  • With Laravel Validation
  • Advanced Configuration
  • Component Architecture
• ⚙️ Configuration
  • 🎨 Settings UI (Recommended)
  • 📄 Configuration File
  • Editor Settings
  • Tools Configuration
  • Feature Configuration
• 📁 File Upload System
  • Upload Configuration
  • Custom Upload Handler
  • Upload Progress & Validation
• 🔄 Content Processing
  • Working with Content
  • Content Validation
  • Search Integration
• Advanced Features
  • Auto-save
  • Dark Mode
  • Custom Styling
• API Endpoints
• 🎨 Frontend Integration
  • Direct JavaScript Usage
  • Custom Tools
  • Event Handling
• 🏗️ Development & Building
  • Development Setup
  • Building Assets
  • Testing
  • Project Structure
• 🚀 Performance & Optimization
  • Performance Features
  • Optimization Tips
  • Memory Management
  • Bundle Analysis
• 🌍 Browser Compatibility
• 🤝 Contributing
  • Development Setup
  • Contribution Guidelines
  • Development Workflow
  • Areas for Contribution
• 📄 License
• 🆘 Support & Community
  • Documentation & Resources
  • Getting Help
  • Community
• 🙏 Credits & Acknowledgments

🌐 Live Demo

Try the Interactive Demo →

Experience all features of Writr Editor including:

• All block types and inline formatting tools
• Real-time content capture and form submission
• Content export in multiple formats (HTML, Markdown, JSON)
• Professional inline toolbar with modern design
• Mobile-responsive editing interface

✨ Features

📝 Core Editor Capabilities

• ✅ Complete Editor.js Integration: All standard tools (headers, paragraphs, lists, tables, images, code blocks, quotes, embeds)
• ✅ Drag & Drop Reordering: Intuitive block reorganization with visual feedback
• ✅ Undo/Redo System: Full undo stack with keyboard shortcuts (Ctrl+Z / Ctrl+Y)
• ✅ Live Preview Mode: Toggle between edit and rendered preview
• ✅ Dark/Light Themes: Built-in theme system with automatic system detection
• ✅ Mobile Responsive: Optimized touch interface for all device sizes
• ✅ Keyboard Shortcuts: Full keyboard navigation and editing support

🚀 Advanced Features

• ✅ Enhanced Inline Toolbar: Modern inline toolbar with bottom positioning for text formatting
• ✅ Content Capture System: Automatic content capture for seamless form submissions
• ✅ Settings UI: Professional settings interface for all configuration options
• ✅ Auto-save: Configurable automatic content saving with debouncing
• ✅ Table of Contents: Auto-generated navigation from document headers
• ✅ Word & Character Count: Real-time statistics display
• ✅ Content Export: HTML, Markdown, Plain Text, and JSON export formats
• ✅ Content Import: Import from HTML, Markdown, and plain text sources
• ✅ File Upload System: Drag-and-drop image and file uploads with validation
• ✅ Memory Management: Intelligent cleanup to prevent memory leaks
• ✅ Performance Monitoring: Built-in performance tracking and optimization

🔧 Laravel Integration

• ✅ Blade Component: Drop-in <x-writr-editor /> component with self-contained rendering
• ✅ Form Integration: Seamless Laravel form integration with validation rules
• ✅ Asset Management: Optimized asset bundling and cache-busting
• ✅ Service Provider: Auto-discovery with comprehensive configuration
• ✅ Middleware Support: Built-in CSRF protection and rate limiting
• ✅ Queue Integration: Background processing for heavy operations

🏗️ Architecture & Development

• ✅ Modern JavaScript: ES6+ modules with tree-shaking and optimization
• ✅ Build System: Laravel Mix + Webpack with development and production configurations
• ✅ Zero Global Dependencies: All dependencies bundled, no pollution of global scope
• ✅ TypeScript Support: Full type definitions and IntelliSense support
• ✅ Testing Suite: Comprehensive unit and integration tests (PHPUnit + Vitest)
• ✅ Security Hardened: Content sanitization, CSRF protection, and input validation

📦 Installation

Requirements

• PHP: 8.1 or higher
• Laravel: 10.x, 11.x, or 12.x
• Node.js: 16+ (for asset compilation)
• Modern Browser: Chrome 70+, Firefox 65+, Safari 12+, Edge 79+

1. Install via Composer

The package will auto-register via Laravel's package discovery.

2. Publish Assets (Optional)

Note: The Writr component is self-contained and renders directly from PHP for maximum compatibility. Publishing is typically only needed for configuration changes.

3. Setup Layout

Include required dependencies in your layout:

🚀 Quick Start

Basic Usage

The simplest way to get started:

With Laravel Validation

Advanced Configuration

Component Architecture

The Writr Blade component uses self-contained PHP rendering for maximum compatibility and reliability. Unlike traditional Blade templates, the component renders its HTML, CSS, and JavaScript directly from the PHP class to ensure:

• ✅ Zero dependency conflicts - No conflicts with your app's Blade directives or CSS frameworks
• ✅ Consistent rendering - Same output across all Laravel versions and configurations
• ✅ Automatic asset management - CSS and JS assets are loaded automatically without manual setup
• ✅ Framework agnostic - Works with any CSS framework (Tailwind, Bootstrap, etc.)

This approach ensures the editor works out-of-the-box without requiring publishing or customization for most use cases.

⚙️ Configuration

The configuration file provides extensive customization options. You can manage settings in two ways:

🎨 Settings UI (Recommended)

Access the visual settings interface at /writr/settings for an intuitive configuration experience:

• Professional Interface: Modern, responsive settings UI with dark mode support
• Live Validation: Real-time input validation with helpful error messages
• Import/Export: Backup and restore settings as JSON files
• Keyboard Shortcuts: Ctrl+S to save, Ctrl+Shift+R to reset
• Organized Sections: Editor, Tools, Features, Theme, Security, and Performance settings

📄 Configuration File

For programmatic or advanced configuration, publish the config file:

Editor Settings

Tools Configuration

Each tool can be enabled/disabled and configured:

Feature Configuration

📁 File Upload System

Upload Configuration

Custom Upload Handler

Create your own upload endpoint:

Upload Progress & Validation

🔄 Content Processing

Working with Content

Writr stores content as JSON. Use the included service for processing:

Content Validation

Search Integration

Advanced Features

Auto-save

Dark Mode

Custom Styling

API Endpoints

The package provides several API endpoints for editor functionality:

• POST /writr/upload-image - Upload images
• POST /writr/upload-file - Upload files
• POST /writr/fetch-url - Fetch URL metadata
• POST /writr/preview - Generate content preview
• POST /writr/export - Export content
• POST /writr/auto-save - Auto-save content

🎨 Frontend Integration

Direct JavaScript Usage

For advanced customization, use the JavaScript API directly:

Custom Tools

Create your own Editor.js tools:

Event Handling

🏗️ Development & Building

Development Setup

Building Assets

Testing

Project Structure

🚀 Performance & Optimization

Performance Features

• Lazy Loading: Tools and features load on-demand
• Code Splitting: Optimized bundle splitting for faster initial load
• Memory Management: Automatic cleanup prevents memory leaks
• Debounced Events: Auto-save and change events are intelligently debounced
• Asset Optimization: CSS/JS minification and compression
• Caching: Browser caching with versioning for static assets

Optimization Tips

Memory Management

Bundle Analysis

🌍 Browser Compatibility

Polyfills

For older browsers, include polyfills:

🤝 Contributing

We welcome contributions! Here's how to get started:

Development Setup

1. Fork and Clone

2. Install Dependencies

3. Set Up Testing Environment

4. Run Tests

Contribution Guidelines

• Code Style: Follow PSR-12 for PHP, ESLint rules for JavaScript
• Tests: Add tests for new features and bug fixes
• Documentation: Update README and relevant docs
• Commit Messages: Use conventional commit format
• Pull Requests: Target the develop branch

Development Workflow

1. Create a feature branch from develop
2. Make your changes with tests
3. Run the full test suite
4. Update documentation if needed
5. Submit a pull request

Areas for Contribution

• 🔧 New Tools: Create custom Editor.js tools
• 🎨 Themes: Design new editor themes
• 🌐 Translations: Add internationalization support
• 📚 Documentation: Improve guides and examples
• 🐛 Bug Fixes: Resolve issues and edge cases
• ⚡ Performance: Optimize loading and runtime performance

📄 License

This package is open-sourced software licensed under the MIT license.

Third-party Licenses

• Editor.js - Apache 2.0 License
• Laravel - MIT License
• Tailwind CSS - MIT License

🆘 Support & Community

Documentation & Resources

• 📖 Full Documentation - Comprehensive guides and API reference
• 🎯 Demo & Examples - Interactive demo with all features
• 📚 API Reference - Complete API documentation
• 🏗️ Integration Guide - Step-by-step Laravel integration

Getting Help

• 🐛 GitHub Issues - Bug reports and feature requests
• 💬 Discussions - Community support and Q&A
• 📧 Email Support: [email protected]

Community

• 🌟 Star the repository if you find it useful
• 🔄 Share with others who might benefit
• 🤝 Contribute improvements and new features
• 📝 Write tutorials and share your experience

🙏 Credits & Acknowledgments

Core Technologies

• Editor.js - The amazing block-style editor framework
• Laravel - The elegant PHP framework
• Tailwind CSS - The utility-first CSS framework

Special Thanks

• The Editor.js team for creating such a flexible and powerful editor
• The Laravel community for continuous inspiration and feedback
• All contributors who help make Writr better
• Early adopters and testers who provided valuable feedback