Merge pull request #18 from octue/widget-settings

Widget settings

Author: thclark

.devcontainer/devcontainer.json

@@ -72,7 +72,8 @@
         "trond-snekvik.simple-rst",
         "ms-azuretools.vscode-docker",
         "ryanluker.vscode-coverage-gutters",
-        "ms-python.black-formatter"
+        "ms-python.black-formatter",
+        "GitHub.copilot"
       ]
     }
   },

.github/workflows/ci.yml

@@ -13,14 +13,17 @@ on:
 
 jobs:
   check-semantic-version:
-    uses: octue/.github/.github/workflows/reusable-check-semantic-version.yml@main
+    uses: octue/workflows/.github/workflows/check-semantic-version.yml@main
+    with:
+      path: pyproject.toml
+      breaking_change_indicated_by: minor
 
   run-tests:
     if: "!contains(github.event.head_commit.message, 'skipci')"
     strategy:
       fail-fast: true
       matrix:
-        python: ['3.9', '3.10', '3.11']
+        python: ['3.10', '3.11', '3.12']
         os: [ubuntu-latest] # [ubuntu-latest, windows-latest, macos-latest] for full coverage but this gets expensive quickly
     runs-on: ${{ matrix.os }}
 

.github/workflows/update-pull-request.yml

@@ -6,7 +6,10 @@ on:
       - main
 
 jobs:
-  update-pull-request:
-    uses: octue/.github/.github/workflows/reusable-update-pull-request.yml@main
+  generate-pull-request-description:
+    uses: octue/workflows/.github/workflows/generate-pull-request-description.yml@main
     secrets:
       token: ${{ secrets.GITHUB_TOKEN }}
+    permissions:
+      contents: read
+      pull-requests: write

README.md

@@ -58,6 +58,88 @@ class MyJSONEditorForm(forms.Form):
     json = forms.JSONField(widgets=SvelteJSONEditorWidget())
 ```
 
+### Global settings
+
+The application allows modifying some properties of svelte-jsoneditor inside the settings.py configuration file in Django. Official documentation is available on [svelte-jsoneditor](https://github.com/josdejong/svelte-jsoneditor#properties) GitHub page. **Note:** Not all options are configurable which are provided by svelte-jsoneditor.
+
+```python
+# settings.py
+
+SVELTE_JSONEDITOR = {
+    "mode": "tree",
+    "mainMenuBar": True,
+    "navigationBar": True,
+    "statusBar": True,
+    "askToFormat": True,
+    "readOnly": False,
+    "indentations": 4,
+    "tabSize": 4,
+    "escapeControlCharacters": False,
+    "flattenColumns": True,
+}
+```
+
+#### Available properties
+
+| Property                | Type                        | Default |
+| ----------------------- | --------------------------- | ------- |
+| mode                    | 'tree' or 'text' or 'table' | 'tree'  |
+| mainMenuBar             | boolean                     | True    |
+| navigationBar           | boolean                     | True    |
+| statusBar               | boolean                     | True    |
+| askToFormat             | boolean                     | True    |
+| readOnly                | boolean                     | False   |
+| indentations            | number or string            | 4       |
+| tabSize                 | number                      | 4       |
+| escapeControlCharacters | boolean                     | False   |
+| flattenColumns          | boolean                     | True    |
+
+### Widget properties
+
+`SvelteJSONEditorWidget` has additional argument called `props` which allows to override `SVELTE_JSONEDITOR` settings from settings.py.
+
+```python
+# forms.py
+
+from django import forms
+
+
+class SvelteJsonEditorForm(forms.Form):
+    my_json = forms.JSONField(widget=SvelteJSONEditorWidget(props={
+        "readOnly": True
+    }))
+```
+
+#### Custom widget properties in admin form
+
+```python
+# admin.py
+
+from django import forms
+from django.contrib import admin
+
+from .models import ExampleModel
+
+class CustomForm(forms.ModelForm):
+    class Meta:
+        model = ExampleModel
+        fields = "__all__"
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.fields["some_json_field"].widget = SvelteJSONEditorWidget(props={"readOnly": True})
+
+
+@admin.register(ExampleModel, ExampleModelAdmin)
+class ExampleModelAdmin(admin.ModelAdmin):
+    form = CustomForm
+    formfield_overrides = {
+        models.JSONField: {
+            "widget": SvelteJSONEditorWidget,
+        }
+    }
+```
+
 ## About Svelte
 
 **You don't need to know or care.** It's the JavaScript framework used to develop the widget - but the widget JS is all pre-built so there are no extra requirements.

django_svelte_jsoneditor/settings.py

@@ -0,0 +1,26 @@
+from django.conf import settings
+
+
+CONFIG_DEFAULTS = {
+    "PROPS": {
+        "mode": "tree",
+        "mainMenuBar": True,
+        "navigationBar": True,
+        "statusBar": True,
+        "askToFormat": True,
+        "readOnly": False,
+        "indentations": 4,
+        "tabSize": 4,
+        "escapeControlCharacters": False,
+        "flattenColumns": True,
+    }
+}
+
+
+def get_config():
+    return {
+        "PROPS": {
+            **CONFIG_DEFAULTS["PROPS"],
+            **getattr(settings, "SVELTE_JSONEDITOR", {}).get("PROPS", {}),
+        }
+    }

django_svelte_jsoneditor/templates/django_svelte_jsoneditor/widgets/svelte_jsoneditor.html

@@ -8,15 +8,18 @@
   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: {
+    props: {         
         content: {
-            json: json || undefined,
+            json: json || undefined,            
         },        
         onChange: (updatedContent, previousContent, { contentErrors, patchResult }) => {
             document.getElementById('{{ widget.attrs.id }}').value = JSON.stringify(updatedContent.json)        
         }
     }
   })
+
+  editor.updateProps({{ widget.props|safe }})
 </script>

django_svelte_jsoneditor/widgets.py

@@ -1,16 +1,25 @@
+import json
 from django.forms import Textarea
 
+from .settings import get_config
+
 
 class SvelteJSONEditorWidget(Textarea):
     template_name = "django_svelte_jsoneditor/widgets/svelte_jsoneditor.html"
 
-    def __init__(self, attrs=None):
+    def __init__(self, props=None, attrs=None):
         if attrs is None:
             attrs = {}
 
+        self.props = {} if props is None else props.copy()
         attrs.update({"class": "hidden"})
 
         super().__init__(attrs)
 
+    def get_context(self, name, value, attrs):
+        context = super().get_context(name, value, attrs)
+        context["widget"].update({"props": json.dumps({**get_config()["PROPS"], **self.props})})
+        return context
+
     class Media:
         css = {"all": ("django_svelte_jsoneditor/css/svelte_jsoneditor.css",)}

docs/source/conf.py

@@ -166,4 +166,4 @@
 html_show_copyright = True
 
 # Output file base name for HTML help builder.
-htmlhelp_basename = "django_gcp_doc"
+htmlhelp_basename = "django_svelte_jsoneditor_doc"