Ship the messages using an independent JSON blob

Author: matthiask

django_prose_editor/static/django_prose_editor/editor.js

@@ -2,8 +2,52 @@
 
 from django import forms
 from django.conf import settings
+from django.forms.utils import flatatt
+from django.templatetags.static import static
+from django.utils.html import format_html, json_script, mark_safe
 from django.utils.translation import gettext
-from js_asset.js import JS
+
+
+class JS:
+    def __init__(self, src, attrs):
+        self.src = src
+        self.attrs = attrs
+
+    def __html__(self):
+        return format_html(
+            '<script src="{}"{}></script>',
+            self.src
+            if self.src.startswith(("http://", "https://", "/"))
+            else static(self.src),
+            mark_safe(flatatt(self.attrs)),
+        )
+
+    def __eq__(self, other):
+        return (
+            isinstance(other, JS)
+            and self.src == other.src
+            and self.attrs == other.attrs
+        )
+
+    def __hash__(self):
+        return hash(self.__str__())
+
+
+class JSON:
+    def __init__(self, id, data):
+        self.id = id
+        self.data = data
+
+    def __html__(self):
+        return json_script(self.data, self.id)
+
+    def __eq__(self, other):
+        return (
+            isinstance(other, JSON) and self.id == other.id and self.data == other.data
+        )
+
+    def __hash__(self):
+        return hash(self.__str__())
 
 
 def _get_presets():
@@ -35,22 +79,21 @@ def media(self):
                     "django_prose_editor/editor.js",
                     {"defer": True},
                 ),
+                JSON(
+                    "django-prose-editor-settings",
+                    {
+                        "messages": {
+                            "url": gettext("URL"),
+                            "title": gettext("Title"),
+                            "update": gettext("Update"),
+                            "cancel": gettext("Cancel"),
+                        },
+                    },
+                ),
                 *(
                     JS(
                         preset["script"],
-                        {
-                            "defer": True,
-                            "data-config": json.dumps(
-                                {
-                                    "messages": {
-                                        "url": gettext("URL"),
-                                        "title": gettext("Title"),
-                                        "update": gettext("Update"),
-                                        "cancel": gettext("Cancel"),
-                                    },
-                                }
-                            ),
-                        },
+                        {"defer": True},
                     )
                     for key, preset in _get_presets().items()
                 ),

django_prose_editor/static/django_prose_editor/init.js

@@ -36,7 +36,6 @@ dynamic = [
 ]
 dependencies = [
   "django>=4.2",
-  "django-js-asset",
 ]
 
 optional-dependencies.sanitize = [

django_prose_editor/widgets.py

@@ -1,8 +1,13 @@
 import { getMarkRange } from "./extendMarkRange.js"
-import { getHTML, parseHTML, trimmedRangeFromSelection } from "./utils.js"
+import {
+  getHTML,
+  parseHTML,
+  settings,
+  trimmedRangeFromSelection,
+} from "./utils.js"
 
 const linkDialog = (attrs) => {
-  const { messages } = window.__proseEditor
+  const { messages } = settings()
   return new Promise((resolve) => {
     const div = document.createElement("div")
     div.innerHTML = `
@@ -87,7 +92,7 @@ export const removeLink = (state, dispatch) => {
 }
 
 const htmlDialog = (html) => {
-  const { messages } = window.__proseEditor
+  const { messages } = settings()
   return new Promise((resolve) => {
     const div = document.createElement("div")
     div.innerHTML = `

pyproject.toml

@@ -1,5 +1,3 @@
-window.__proseEditor = JSON.parse(document.currentScript.dataset.config)
-
 const marker = "data-django-prose-editor-default"
 
 function createEditor(textarea) {

src/commands.js

@@ -46,3 +46,8 @@ export function markActive(state, type) {
   if (empty) return type.isInSet(state.storedMarks || $from.marks())
   return state.doc.rangeHasMark(from, to, type)
 }
+
+export function settings() {
+  const el = document.querySelector("#django-prose-editor-settings")
+  return el ? JSON.parse(el.textContent) : {}
+}