Merge pull request #12 from octue/feat/svelte-jsoneditor-widget

FEA: svelte editor widget

Author: thclark

README.md

@@ -9,9 +9,54 @@ A plug in widget for django's JSONField that allows manipulation and display of
 
 This app is a replacement for `django-jsoneditor` (which uses a deprecated version of the widget, `jsoneditor` - you can [see the differences here](https://github.com/josdejong/svelte-jsoneditor#differences-between-josdejongsvelte-jsoneditor-and-josdejongjsoneditor)). You can read about why we're not directly contributing to `django-jsoneditor` [here](https://github.com/nnseva/django-jsoneditor/issues/71), the two projects might merge in the future.
 
-## Documentation...
+## Documentation
 
-(working on it)
+### Installation
+
+To get an application installed in your project, you need to add `django_svelte_jsoneditor` into `INSTALLED_APPS` in `settings.py` file.
+
+```python
+# settings.py
+
+INSTALLED_APPS = [
+    # Other Django applications
+    "django_svelte_jsoneditor",
+]
+```
+
+### Usage
+
+The application contains new widget called `SvelteJSONEditorWidget` which adds editor capabilities to JSON fields in Django. Below you can see an example, of how to override the default widget for the JSON field (in this case textarea widget).
+
+```python
+# admin.py
+
+from django.contrib import admin
+from django_svelte_jsoneditor.widgets import SvelteJSONEditorWidget
+
+from .models import MyModel
+
+
+@admin.register(MyModel)
+class MyModelAdmin(admin.ModelAdmin):
+    formfield_overrides = {
+        models.JSONField: {
+            "widget": SvelteJSONEditorWidget,
+        }
+    }
+```
+
+Another example is how to create a new Django form integrating `SvelteJSONEditorWidget` replacing `Textarea` widget.
+
+```python
+# forms.py
+from django import forms
+from django_svelte_jsoneditor.widgets import SvelteJSONEditorWidget
+
+
+class MyJSONEditorForm(forms.Form):
+    json = forms.JSONField(widgets=SvelteJSONEditorWidget())
+```
 
 ## About Svelte
 

django_svelte_jsoneditor/static/django_svelte_jsoneditor/css/svelte_jsoneditor.css

@@ -0,0 +1,23 @@
+.svelte-jsoneditor-wrapper {
+    min-height: 480px;
+    width: 640px;
+}
+
+.jse-modal tr:nth-child(2n+1),
+.jse-modal tr:nth-child(2n) {
+    background-color: inherit;
+    border-bottom: inherit;
+}
+
+table.jse-transform-wizard tr:nth-child(2n) {
+    background-color: inherit;
+}
+
+.jse-modal td, 
+.jse-modal th {
+    background-color: inherit;
+    border-bottom: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    vertical-align: inherit;
+}

django_svelte_jsoneditor/static/django_svelte_jsoneditor/js/svelte_jsoneditor.js

@@ -0,0 +1,22 @@
+{% load static %}
+
+<div id="jsoneditor_{{ widget.attrs.id }}" class="svelte-jsoneditor-wrapper"></div>
+
+<textarea name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{% if widget.value %}{{ widget.value }}{% endif %}</textarea>
+
+<script type="module">    
+  import { JSONEditor } from '{% static "django_svelte_jsoneditor/js/svelte_jsoneditor.js" %}'
+  
+  const json = JSON.parse(document.getElementById('{{ widget.attrs.id }}').value)
+  const editor = new JSONEditor({
+    target: document.getElementById('jsoneditor_{{ widget.attrs.id }}'),
+    props: {
+        content: {
+            json: json || undefined,
+        },        
+        onChange: (updatedContent, previousContent, { contentErrors, patchResult }) => {
+            document.getElementById('{{ widget.attrs.id }}').value = JSON.stringify(updatedContent.json)        
+        }
+    }
+  })
+</script>

django_svelte_jsoneditor/templates/django_svelte_jsoneditor/widgets/svelte_jsoneditor.html

@@ -0,0 +1,16 @@
+from django.forms import Textarea
+
+
+class SvelteJSONEditorWidget(Textarea):
+    template_name = "django_svelte_jsoneditor/widgets/svelte_jsoneditor.html"
+
+    def __init__(self, attrs=None):
+        if attrs is None:
+            attrs = {}
+
+        attrs.update({"class": "hidden"})
+
+        super().__init__(attrs)
+
+    class Media:
+        css = {"all": ("django_svelte_jsoneditor/css/svelte_jsoneditor.css",)}

django_svelte_jsoneditor/widgets.py

@@ -1,8 +1,6 @@
 #!/usr/bin/env python
 """Management script for the project."""
 
-from __future__ import absolute_import, unicode_literals
-
 import sys
 
 

manage.py

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "django-svelte-jsoneditor"
-version = "0.1.2"
+version = "0.2.0"
 description = "A widget for django's JSONField using the latest-and-greatest Json Editor"
 authors = ["Tom Clark <[email protected]>"]
 license = "MIT"

pyproject.toml

@@ -1,24 +1,48 @@
 from django.contrib import admin
+from django.db import models
+from django_svelte_jsoneditor.widgets import SvelteJSONEditorWidget
 
 from tests.server.example.models import (
     ExampleBlankJsonFieldModel,
     ExampleJsonFieldModel,
     ExampleUneditableJsonFieldModel,
+    ExampleMultipleJsonFieldModel,
 )
 
 
 class ExampleJsonFieldModelAdmin(admin.ModelAdmin):
-    """A basic admin panel to demonstrate the direct upload storage behaviour"""
+    formfield_overrides = {
+        models.JSONField: {
+            "widget": SvelteJSONEditorWidget,
+        }
+    }
 
 
 class ExampleBlankJsonFieldModelAdmin(admin.ModelAdmin):
-    """A basic admin panel to demonstrate the direct upload storage behaviour where blank=True"""
+    formfield_overrides = {
+        models.JSONField: {
+            "widget": SvelteJSONEditorWidget,
+        }
+    }
 
 
 class ExampleUneditableJsonFieldModelAdmin(admin.ModelAdmin):
-    """A basic admin panel to demonstrate the direct upload storage behaviour where blank=True"""
+    formfield_overrides = {
+        models.JSONField: {
+            "widget": SvelteJSONEditorWidget,
+        }
+    }
+
+
+class ExampleMultipleJsonFieldModelAdmin(admin.ModelAdmin):
+    formfield_overrides = {
+        models.JSONField: {
+            "widget": SvelteJSONEditorWidget,
+        }
+    }
 
 
 admin.site.register(ExampleJsonFieldModel, ExampleJsonFieldModelAdmin)
 admin.site.register(ExampleBlankJsonFieldModel, ExampleBlankJsonFieldModelAdmin)
 admin.site.register(ExampleUneditableJsonFieldModel, ExampleUneditableJsonFieldModelAdmin)
+admin.site.register(ExampleMultipleJsonFieldModel, ExampleMultipleJsonFieldModelAdmin)

tests/server/example/admin.py

@@ -0,0 +1,27 @@
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("example", "0001_initial"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="ExampleMultipleJsonFieldModel",
+            fields=[
+                (
+                    "id",
+                    models.AutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                ("my_json1", models.JSONField()),
+                ("my_json2", models.JSONField()),
+                ("my_json3", models.JSONField()),
+            ],
+        ),
+    ]

tests/server/example/migrations/0002_examplemultiplejsonfieldmodel.py

@@ -43,3 +43,18 @@ class Meta:
         """Metaclass defining this model to reside in the example app"""
 
         app_label = "example"
+
+
+class ExampleMultipleJsonFieldModel(Model):
+    """
+    Multiple JSON fields in one model to test correct behaviour of JavaScript
+    """
+
+    my_json1 = JSONField()
+    my_json2 = JSONField()
+    my_json3 = JSONField()
+
+    class Meta:
+        """Metaclass defining this model to reside in the example app"""
+
+        app_label = "example"