Add index indicators for pretty lists

Author: fsbraun

djangocms_rest/plugin_rendering.py

@@ -88,6 +88,20 @@ def escapestr(s: str) -> str:
     return escape(json.dumps(s)[1:-1])  # Remove quotes added by json.dumps
 
 
+def numbered_join(
+    items: Iterable[str],
+    separator: str = ", ",
+    start: int = 0,
+) -> str:
+    """
+    Join items with a separator, numbering them starting from `start`.
+    """
+    return separator.join(
+        f'{item}<span data-i="{i + start}" class="list-item"></span>'
+        for i, item in enumerate(items)
+    )
+
+
 def highlight_data(json_data: Any, drop_frame: bool = False) -> str:
     """
     Highlight single JSON data element.
@@ -127,7 +141,7 @@ def highlight_list(json_data: list) -> dict[str, str]:
     return {
         "open": "[",
         "close": "]",
-        "value": ",<br>".join(items),
+        "value": numbered_join(items, ",<br>"),
     }
 
 
@@ -171,7 +185,7 @@ def highlight_json(
         items.append(
             DETAILS_TEMPLATE.format(
                 key=escape(field),
-                value=",".join(children) + marker,
+                value=numbered_join(children, ",") + marker,
                 open="[",
                 close="]",
             )

djangocms_rest/static/djangocms_rest/highlight.css

@@ -63,3 +63,12 @@
         cursor: pointer;
     }
 }
+
+span.list-item:before {
+    content: "[" attr(data-i) "]";
+    color: var(--dca-gray-light, #999);
+    font-weight: bold;
+    font-size: 70%;
+    display: inline-block;
+    margin-inline-start: 0.5em;
+}