django-visual-editor 0.1.1__tar.gz

django_visual_editor-0.1.1/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Vladislav Khoboko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

django_visual_editor-0.1.1/MANIFEST.in

@@ -0,0 +1,16 @@
+# Include documentation
+include README.md
+include LICENSE
+include QUICKSTART.md
+
+# Include static files
+recursive-include django_visual_editor/static *
+recursive-include django_visual_editor/templates *
+
+# Include migrations
+recursive-include django_visual_editor/migrations *.py
+
+# Exclude Python cache files
+global-exclude __pycache__
+global-exclude *.py[co]
+global-exclude .DS_Store

django_visual_editor-0.1.1/PKG-INFO

@@ -0,0 +1,314 @@
+Metadata-Version: 2.4
+Name: django-visual-editor
+Version: 0.1.1
+Summary: Visual text editor for Django with image upload, formatting and HTML compression
+Author-email: Vladislav Khoboko <vladislah@gmail.com>
+License: MIT
+Project-URL: Homepage, https://github.com/hvlads/django-visual-editor
+Project-URL: Repository, https://github.com/hvlads/django-visual-editor
+Project-URL: Issues, https://github.com/hvlads/django-visual-editor/issues
+Keywords: django,editor,wysiwyg,visual-editor,rich-text,html-editor
+Classifier: Development Status :: 4 - Beta
+Classifier: Environment :: Web Environment
+Classifier: Framework :: Django
+Classifier: Framework :: Django :: 5.2
+Classifier: Intended Audience :: Developers
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Operating System :: OS Independent
+Classifier: Programming Language :: Python
+Classifier: Programming Language :: Python :: 3
+Classifier: Programming Language :: Python :: 3.9
+Classifier: Programming Language :: Python :: 3.10
+Classifier: Programming Language :: Python :: 3.11
+Classifier: Programming Language :: Python :: 3.12
+Classifier: Topic :: Internet :: WWW/HTTP
+Classifier: Topic :: Internet :: WWW/HTTP :: Dynamic Content
+Classifier: Topic :: Software Development :: Libraries :: Python Modules
+Requires-Python: >=3.9
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: django>=4.2
+Requires-Dist: pillow>=10.0.0
+Dynamic: license-file
+
+# Django Visual Editor
+
+A visual text editor for Django with image upload support, text formatting, and HTML compression.
+
+## Features
+
+- **Visual Editing**: Intuitive WYSIWYG editor
+- **Text Formatting**:
+  - Bold, Italic, Underline, Strikethrough
+  - Font family selection (Arial, Times New Roman, Georgia, Courier New, etc.)
+  - Font size selection (10px - 24px)
+  - Clear formatting
+- **Headings**: H1, H2, H3
+- **Lists**: Numbered and bulleted lists
+- **Code**:
+  - Inline code (`<code>` tag) with toggle support
+  - Code blocks (pre+code) for multi-line code
+- **Images**: Upload via drag-and-drop, paste, or file picker
+  - Resize images by dragging or using preset sizes (S, M, L, XL)
+  - Align images (left, center, right)
+  - Delete images
+- **Links**: Create hyperlinks
+- **Undo/Redo**: Full history support (Ctrl+Z, Ctrl+Y)
+- **HTML Source Mode**: Toggle between visual and HTML code editing
+- **HTML Compression**: Automatic conversion to compact HTML with inline styles
+- **Keyboard Shortcuts**: Ctrl+B (Bold), Ctrl+I (Italic), Ctrl+U (Underline), Ctrl+Z (Undo), Ctrl+Y (Redo)
+- **Auto Cleanup**: Command to remove unused images
+
+## Installation
+
+### 1. Install Dependencies
+
+```bash
+# Install Python dependencies
+pip install django Pillow
+
+# Install Node.js dependencies for frontend build
+cd frontend
+npm install
+```
+
+### 2. Build Frontend
+
+```bash
+cd frontend
+npm run build
+```
+
+For development with automatic rebuild:
+
+```bash
+npm run dev
+```
+
+### 3. Configure Django
+
+Add to `settings.py`:
+
+```python
+INSTALLED_APPS = [
+    ...
+    'django_visual_editor',
+    ...
+]
+
+# Media files settings
+MEDIA_URL = 'media/'
+MEDIA_ROOT = BASE_DIR / 'media'
+```
+
+Add URL to `urls.py`:
+
+```python
+from django.conf import settings
+from django.conf.urls.static import static
+
+urlpatterns = [
+    ...
+    path('editor/', include('django_visual_editor.urls')),
+    ...
+]
+
+if settings.DEBUG:
+    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
+```
+
+### 4. Run Migrations
+
+```bash
+python manage.py migrate
+```
+
+## Usage
+
+### Option 1: Using VisualEditorField (Recommended)
+
+The simplest way - just use the field in your model:
+
+```python
+from django.db import models
+from django_visual_editor import VisualEditorField
+
+class BlogPost(models.Model):
+    title = models.CharField(max_length=200)
+    content = VisualEditorField(
+        config={
+            'min_height': 400,
+            'max_height': 800,
+            'placeholder': 'Start typing...',
+        }
+    )
+```
+
+Then use it in forms and admin - no additional configuration needed:
+
+```python
+# forms.py
+from django import forms
+from .models import BlogPost
+
+class BlogPostForm(forms.ModelForm):
+    class Meta:
+        model = BlogPost
+        fields = ['title', 'content']
+        # Widget is automatically set from the field!
+
+# admin.py
+from django.contrib import admin
+from .models import BlogPost
+
+@admin.register(BlogPost)
+class BlogPostAdmin(admin.ModelAdmin):
+    pass  # Widget is automatically set from the field!
+```
+
+### Option 2: Using VisualEditorWidget Manually
+
+If you prefer to use a regular TextField and configure the widget in forms:
+
+```python
+# models.py
+from django.db import models
+
+class BlogPost(models.Model):
+    title = models.CharField(max_length=200)
+    content = models.TextField()  # Regular TextField
+
+# forms.py
+from django import forms
+from django_visual_editor import VisualEditorWidget
+from .models import BlogPost
+
+class BlogPostForm(forms.ModelForm):
+    class Meta:
+        model = BlogPost
+        fields = ['title', 'content']
+        widgets = {
+            'content': VisualEditorWidget(
+                config={
+                    'min_height': 400,
+                    'max_height': 800,
+                    'placeholder': 'Start typing...',
+                }
+            ),
+        }
+
+# admin.py
+from django.contrib import admin
+from django_visual_editor import VisualEditorWidget
+from .models import BlogPost
+from django import forms
+
+class BlogPostAdminForm(forms.ModelForm):
+    class Meta:
+        model = BlogPost
+        fields = '__all__'
+        widgets = {
+            'content': VisualEditorWidget(),
+        }
+
+@admin.register(BlogPost)
+class BlogPostAdmin(admin.ModelAdmin):
+    form = BlogPostAdminForm
+```
+
+### In Templates
+
+```django
+<!-- Display content -->
+<div class="blog-content">
+    {{ post.content|safe }}
+</div>
+
+<!-- Form -->
+<form method="post">
+    {% csrf_token %}
+    {{ form.as_p }}
+    {{ form.media }}  <!-- Important! Loads CSS and JS -->
+    <button type="submit">Save</button>
+</form>
+```
+
+## Configuration
+
+Available configuration parameters for `VisualEditorWidget`:
+
+```python
+VisualEditorWidget(
+    config={
+        'min_height': 300,        # Minimum editor height (px)
+        'max_height': 600,        # Maximum editor height (px)
+        'placeholder': 'Text...', # Placeholder text
+    }
+)
+```
+
+## Cleanup Unused Images
+
+Run the management command to remove unused images:
+
+```bash
+# Show what will be deleted (dry run)
+python manage.py cleanup_editor_images --dry-run
+
+# Delete unused images
+python manage.py cleanup_editor_images
+```
+
+It's recommended to set up this command in cron for periodic cleanup.
+
+## Example Project
+
+Run the example blog:
+
+```bash
+cd example_project
+python manage.py migrate
+python manage.py createsuperuser
+python manage.py runserver
+```
+
+Then open:
+- http://localhost:8000/ - Post list
+- http://localhost:8000/post/new/ - Create new post
+- http://localhost:8000/admin/ - Django Admin
+
+## Project Structure
+
+```
+django-visual-editor/
+├── django_visual_editor/       # Django application
+│   ├── models.py              # Model for uploaded images
+│   ├── widgets.py             # Django widget
+│   ├── views.py               # View for image upload
+│   ├── urls.py                # URL configuration
+│   ├── management/            # Management commands
+│   ├── static/                # Static files (compiled)
+│   └── templates/             # Templates
+├── frontend/                  # TypeScript sources
+│   ├── src/
+│   │   ├── editor/           # Main editor
+│   │   ├── utils/            # Utils (upload, compression)
+│   │   ├── types/            # TypeScript types
+│   │   └── styles/           # CSS styles
+│   ├── package.json
+│   ├── tsconfig.json
+│   └── webpack.config.js
+└── example_project/           # Usage example
+    └── blog/                 # Demo blog application
+```
+
+## Technologies
+
+- **Backend**: Django 5.2+
+- **Frontend**: TypeScript, Webpack
+- **Editor**: Custom implementation using ContentEditable API
+- **Styles**: Vanilla CSS
+
+## License
+
+MIT

django_visual_editor-0.1.1/QUICKSTART.md

@@ -0,0 +1,140 @@
+# Quick Start
+
+Quick start guide for Django Visual Editor.
+
+## 1. Install Dependencies
+
+```bash
+# Install Python dependencies
+uv sync
+
+# Go to frontend directory
+cd frontend
+
+# Install Node.js dependencies
+npm install
+```
+
+## 2. Build Frontend
+
+```bash
+# From the frontend directory
+npm run build
+```
+
+After building, files will appear in `django_visual_editor/static/django_visual_editor/js/`
+
+## 3. Run Example Project
+
+```bash
+# Go back to project root
+cd ..
+
+# Go to example_project
+cd example_project
+
+# Run migrations
+python manage.py migrate
+
+# Create superuser
+python manage.py createsuperuser
+
+# Run server
+python manage.py runserver
+```
+
+## 4. Open in Browser
+
+- **Blog homepage**: http://localhost:8000/
+- **Create post**: http://localhost:8000/post/new/ (login required)
+- **Django Admin**: http://localhost:8000/admin/
+
+## 5. Test the Editor
+
+1. Login through the admin panel
+2. Create a new post at http://localhost:8000/post/new/
+3. Try:
+   - Font selection (dropdown in toolbar)
+   - Font size selection (dropdown in toolbar)
+   - Text formatting (Bold, Italic, Underline, Strikethrough)
+   - Creating headings (H1, H2, H3)
+   - Lists (bulleted and numbered)
+   - Code:
+     - Inline code (click `<code>` button) - toggle on/off
+     - Code blocks (click `{ }` button) for multi-line code
+   - Image upload (drag-and-drop or button)
+     - Click on uploaded images to resize and align them
+     - Use preset sizes: S (25%), M (50%), L (75%), XL (100%)
+     - Align images: left, center, or right
+     - Drag the resize handle to custom size
+   - Creating links
+   - Clear formatting (✕ button)
+   - Undo/Redo (↶ ↷ buttons)
+   - HTML Source mode (click </> button)
+   - Keyboard shortcuts: Ctrl+B, Ctrl+I, Ctrl+U, Ctrl+Z, Ctrl+Y
+
+## Frontend Development
+
+For development with automatic rebuild:
+
+```bash
+cd frontend
+npm run dev
+```
+
+Webpack will watch for changes and automatically rebuild files.
+
+## Cleanup Unused Images
+
+```bash
+cd example_project
+
+# Show what will be deleted
+python manage.py cleanup_editor_images --dry-run
+
+# Delete unused images
+python manage.py cleanup_editor_images
+```
+
+## File Structure
+
+```
+django-visual-editor/
+├── django_visual_editor/       # Main Django application
+│   ├── models.py              # EditorImage model
+│   ├── widgets.py             # VisualEditorWidget
+│   ├── views.py               # View for uploads
+│   └── static/                # Compiled JS/CSS
+├── frontend/                  # TypeScript sources
+│   ├── src/
+│   │   ├── editor/           # Editor and toolbar
+│   │   ├── utils/            # Upload and HTML compression
+│   │   └── styles/           # CSS
+│   └── package.json
+└── example_project/           # Usage example
+    └── blog/                 # Blog with VisualEditor
+```
+
+## Troubleshooting
+
+### Error uploading images
+
+Check:
+1. Is Pillow installed: `pip install Pillow`
+2. Are MEDIA_ROOT and MEDIA_URL configured in settings.py
+3. Are media URLs added to urls.py for DEBUG mode
+
+### Editor not displaying
+
+Check:
+1. Is frontend built: `cd frontend && npm run build`
+2. Does file `django_visual_editor/static/django_visual_editor/js/editor.bundle.js` exist
+3. Is `{{ form.media }}` added to the template
+
+### TypeScript errors during build
+
+```bash
+cd frontend
+npm install
+npm run type-check
+```