Fix rendering issue on django 2.2

- Update bootstrap to v 4.5.x
- Add option to mark json editor fieldset independent or shared
- Add css to handle li marker
- Add spectre theme and set as default
- Updated Readme

Author: karangupta31

CONTRIBUTORS.txt

@@ -6,3 +6,4 @@ Contributors
 * mlevental (https://github.com/mlevental)
 * tapapax (https://github.com/tapapax)
 * Riccardo Magliocchetti (https://github.com/xrmx)
+* Karan Gupta (https://github.com/karangupta31)

README.md

@@ -82,3 +82,30 @@ class JSONModelAdmin(admin.ModelAdmin):
         return form
 ```
 
+
+## Fieldsets and Rendering Fix
+To fix django css issues, due to the fieldset "aligned" css class, we have added 2 options.
+
+JSONEditorWidget can be initialised with independent_fieldset (True/False). If you are putting the json editor in
+a seperate fieldset (preferred), you should pass independent_fieldset = True
+
+```python
+class JSONModelAdminForm(forms.ModelForm):
+    class Meta:
+        model = JSONModel
+        fields = '__all__'
+        widgets = {
+            'data': JSONEditorWidget(DATA_SCHEMA, collapsed=False, independent_fieldset=True),
+        }
+```
+Having an independent fieldset allows the relative position of the fields to be maintained as is.
+
+independent_fieldset=True removes the "aligned" class from the parent fieldset, which can break the rendering for other fields
+if the json editor is not put in an independent fieldset.
+
+In case you do not create independent fieldset and don't pass independent_fieldset=True, then the initialization of the
+editor would push the editor out of the default fieldset, which would break the default ordering of fields,
+and also push the editor at the end of the page.
+
+See example app.
+

django_admin_json_editor/admin.py

@@ -8,15 +8,15 @@
 class JSONEditorWidget(forms.Widget):
     template_name = 'django_admin_json_editor/editor.html'
 
-    def __init__(self, schema, collapsed=True, sceditor=False, editor_options=None):
+    def __init__(self, schema, collapsed=True, sceditor=False, editor_options=None, independent_fieldset=False):
         super(JSONEditorWidget, self).__init__()
         self._schema = schema
         self._collapsed = collapsed
         self._sceditor = sceditor
-
+        self._independent_fieldset = independent_fieldset
         self._editor_options = {
-            'theme': 'bootstrap4',
-            'iconlib': 'fontawesome4',
+            'theme': 'spectre',
+            'iconlib': 'spectre',
         }
         self._editor_options.update(editor_options or {})
 
@@ -36,22 +36,29 @@ def render(self, name, value, attrs=None, renderer=None):
             'name': name,
             'data': value,
             'editor_options': json.dumps(editor_options),
+            'independent_fieldset': self._independent_fieldset
         }
         return mark_safe(render_to_string(self.template_name, context))
 
     @property
     def media(self):
         css = {
             'all': [
-                'django_admin_json_editor/fontawesome/css/font-awesome.min.css',
                 'django_admin_json_editor/style.css',
             ]
         }
         js = [
             'django_admin_json_editor/jsoneditor/jsoneditor.min.js',
         ]
 
-        if self._editor_options['theme'] == 'bootstrap4':
+        if self._editor_options['iconlib'] == 'fontawesome':
+            css['all'].append('django_admin_json_editor/fontawesome/css/font-awesome.min.css')
+        elif self._editor_options['iconlib'] == 'spectre':
+            css['all'].append('django_admin_json_editor/spectre/spectre-icons.min.css')
+        if self._editor_options['theme'] == 'spectre':
+            css['all'].append('django_admin_json_editor/spectre/spectre.min.css')
+            css['all'].append('django_admin_json_editor/spectre/spectre-exp.min.css')
+        elif self._editor_options['theme'] == 'bootstrap4':
             css['all'].append('django_admin_json_editor/bootstrap/css/bootstrap.min.css')
             js.append('django_admin_json_editor/jquery/jquery-3.5.1.slim.min.js')
             js.append('django_admin_json_editor/bootstrap/js/bootstrap.bundle.min.js')

django_admin_json_editor/static/django_admin_json_editor/bootstrap/css/bootstrap.min.css

@@ -8,4 +8,9 @@ div.sceditor-container {
     float: left;
     width: 100% !important;
     margin-bottom: 10px;
-}
+}
+
+/*Remove django list styling*/
+ul li {
+    list-style-type: none;
+}

django_admin_json_editor/static/django_admin_json_editor/bootstrap/js/bootstrap.bundle.min.js

@@ -1,7 +1,17 @@
 <div id="{{ name }}_editor"></div>
 
 <script>
+    $ = django.jQuery
     var container = document.getElementById("{{ name }}_editor");
+    var parent_fieldset = $("#{{ name }}_editor").closest("fieldset");
+    {% if independent_fieldset %}  // Preferred way to keep relative positions of the fields
+         // Removes the aligned class from the parent fieldset to remove the affects of "aligned" class on the editor
+         parent_fieldset.removeClass("aligned")
+    {% else %}
+        // Moves json editor outside of django fieldset to remove the affect of "aligned" class (but changes the relative position of fields)
+        parent_fieldset.after($("#{{ name }}_editor").parent())
+    {% endif %}
+
     var options = {{ editor_options|safe }};
     var {{ name }}_editor = new JSONEditor(container, options);
     {{ name }}_editor.on('change', function () {

django_admin_json_editor/static/django_admin_json_editor/spectre/spectre-exp.min.css

@@ -64,14 +64,24 @@ class Meta:
         model = JSONModel
         fields = '__all__'
         widgets = {
-            'data': JSONEditorWidget(DATA_SCHEMA, collapsed=False),
+            'data': JSONEditorWidget(DATA_SCHEMA, collapsed=False, independent_fieldset=True),
         }
 
 
 @admin.register(JSONModel)
 class JSONModelAdmin(admin.ModelAdmin):
     form = JSONModelAdminForm
 
+    # Giving the JSON Editor independent field set
+    def get_fieldsets(self, *args, **kwargs):
+        fieldsets = super(JSONModelAdmin, self).get_fieldsets(*args, **kwargs)
+        default_field = fieldsets[0][1]['fields']
+        new_fields = ('data',)
+        # Removing used fields
+        [default_field.remove(field) for field in new_fields]
+        fieldsets.append((None, {'fields': new_fields}))
+        return fieldsets
+
 
 @admin.register(ArrayJSONModel)
 class ArrayJSONModelAdmin(admin.ModelAdmin):