Removed django-prettyjson in favour of plain formatter/error highlighter (#2835)

Author: f213

mypy.ini

@@ -72,9 +72,6 @@ ignore_missing_imports = on
 [mypy-mixer.*]
 ignore_missing_imports = on
 
-[mypy-prettyjson.*]
-ignore_missing_imports = on
-
 [mypy-shortuuid.*]
 ignore_missing_imports = on
 

pyproject.toml

@@ -21,7 +21,6 @@ dependencies = [
     "django-filter>=25.2,<25.3",
     "django-healthchecks>=1.5.0,<2.0.0",
     "django-ipware>=7.0.0,<8.0.0",
-    "django-prettyjson>=0.4.1,<1.0.0",
     "django-silk>=5.3.2,<6.0.0",
     "django-split-settings>=1.2.0,<2.0.0",
     "django-storages>=1.14,<2.0",

src/core/admin/mixin.py

@@ -11,9 +11,8 @@
 from django.template.defaultfilters import capfirst, time
 from django.utils import timezone
 from django.utils.html import format_html
-from prettyjson import PrettyJSONWidget
 
-from core.admin.widgets import AppNumberInput
+from core.admin.widgets import AppJSONEditor, AppNumberInput
 from core.pricing import format_price
 
 if TYPE_CHECKING:
@@ -38,7 +37,7 @@ class AppAdminMixin:
     formfield_overrides: Mapping[Type[Field], Mapping[str, Any]] = {
         models.DecimalField: {"widget": AppNumberInput},
         models.IntegerField: {"widget": AppNumberInput},
-        models.JSONField: {"widget": PrettyJSONWidget(attrs={"initial": "parsed"})},
+        models.JSONField: {"widget": AppJSONEditor},
     }
     foreignkey_queryset_overrides: Mapping[str, Callable[["Apps"], QuerySet]] = {}
     global_exclude = (
@@ -48,7 +47,7 @@ class AppAdminMixin:
 
     class Media:
         css = {
-            "all": ["admin.css", "prettyjson.css"],
+            "all": ["admin/admin.css"],
         }
 
     def formfield_for_foreignkey(self, db_field: "ForeignKey", request: "HttpRequest", **kwargs: Any) -> "ModelChoiceField":

src/core/admin/widgets.py

@@ -1,4 +1,4 @@
-from django.forms.widgets import NumberInput
+from django.forms.widgets import NumberInput, Textarea
 
 
 class AppNumberInput(NumberInput):
@@ -13,3 +13,17 @@ def __init__(self, attrs: dict | None = None) -> None:
         attrs["class"] = f"{classes} app-number-input"
 
         super().__init__(attrs)
+
+
+class AppJSONEditor(Textarea):
+    class Media:
+        js = [
+            "admin/json_editor.js",
+        ]
+
+        css = {
+            "all": ["admin/json_editor.css"],
+        }
+
+    def __init__(self, attrs: dict | None = None) -> None:
+        super().__init__(attrs={"class": "app-json-editor", "cols": "40"})

src/core/conf/installed_apps.py

@@ -15,7 +15,6 @@
     "django_filters",
     "drf_spectacular",
     "drf_spectacular_sidecar",
-    "prettyjson",
     "rest_framework",
     "rest_framework.authtoken",
     # "silk",

src/core/static/admin.css renamed to src/core/static/admin/admin.css

@@ -0,0 +1,4 @@
+.app-json-editor--error {
+  border-color: var(--error-fg);
+  color: var(--error-fg);
+}

src/core/static/admin/json_editor.css

@@ -0,0 +1,32 @@
+(function() {
+    function validateJSON(widget) {
+        try {
+            JSON.parse(widget.value);
+            widget.classList.remove('app-json-editor--error');
+            return true;
+        } catch (error) {
+            widget.classList.add('app-json-editor--error');
+            return false;
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const widgets = document.querySelectorAll('.app-json-editor');
+        widgets.forEach((widget) => {
+            // Format initial JSON
+            try {
+                const parsed = JSON.parse(widget.value);
+                const formatted = JSON.stringify(parsed, null, 4);
+                widget.value = formatted;
+                widget.classList.remove('errornote');
+            } catch (error) {
+                widget.classList.add('errornote');
+            }
+
+            // Validate on every keypress
+            widget.addEventListener('input', function() {
+                validateJSON(widget);
+            });
+        });
+    });
+})();