Reduce block JS complexity

tests/test_blocks.py

@@ -7,6 +7,6 @@ def test_create_page(test_page):
     Tests creating a page with a Code Block.
     """
     assert (
-        '<code id="target-element-current">print([x for x in range(1, 5)])</code>'
+        '<code class="language-python">print([x for x in range(1, 5)])</code>'
         in test_page.body.render_as_block()
     )

wagtailcodeblock/templates/wagtailcodeblock/code_block.html

@@ -1,61 +1,7 @@
 {% load static wagtailcodeblock_tags %}
 {% spaceless %}
-    {% load_prism_css %}
-    {% for key, val in self.items %}
-        {% if key == "language" %}
-            <script>
-            /* This is ugly, but to ensure we only create this function once, and only call
-            each JS library once, we need to check here in case there are multiple Wagtail
-            blocks on this page. This will ensure we only load the minimum payload. */
-            if(typeof loadPrismLanguage != 'function') {
-                window.loadPrismLanguage = function(language) {
-                    var libraries = [
-                        {
-                            "id": "code-block-prismjs",
-                            "url": "//cdnjs.cloudflare.com/ajax/libs/prism/{% prism_version %}/prism.min.js"
-                        }
-                        /*Since there is no html.min.js this check makes sure we
-                        bypass the loading of the script when syntax is set to HTML */
-                        {% if val != "html" %}
-                            ,
-                            {
-                                "id": "code-block-prismjs-" + language,
-                                "url": "//cdnjs.cloudflare.com/ajax/libs/prism/{% prism_version %}/components/prism-" + language + ".min.js"
-                            }
-                        {% endif %}
-                        {% line_numbers_js %}
-                        {% toolbar_js %}
-                        {% copy_to_clipboard_js %}
-                    ];
-
-                    for(const library of libraries) {
-                        if(document.getElementById(library["id"]) == null) {
-                            var s = document.createElement("script");
-                            s.id = library["id"];
-                            s.type = "text/javascript";
-                            s.src = library["url"];
-                            s.async = false;
-                            document.body.appendChild(s);
-                        }
-                    }
-                };
-            }
-
-            loadPrismLanguage('{{ val }}');
-
-            language_class_name = 'language-{{ val }}';
-            </script>
-        {% endif %}
-        {% if key == "code" %}
-            <pre class="line-numbers">
-                <code id="target-element-current">{{ val }}</code>
-            </pre>
-            <script>
-                var block_num = (typeof block_num === 'undefined') ? 0 : block_num;
-                block_num++;
-                document.getElementById('target-element-current').className = language_class_name;
-                document.getElementById('target-element-current').id = 'target-element-' + block_num;
-            </script>
-        {% endif %}
-    {% endfor %}
+<pre class="line-numbers">
+    <code class="language-{{ self.language }}">{{ self.code }}</code>
+</pre>
 {% endspaceless %}
+

wagtailcodeblock/templatetags/wagtailcodeblock_tags.py

@@ -1,7 +1,7 @@
 from django.template import Library
 from django.utils.safestring import mark_safe
 
-from ..settings import get_theme, get_line_numbers, get_copy_to_clipboard,  PRISM_VERSION, PRISM_PREFIX
+from ..settings import get_theme, get_line_numbers, get_copy_to_clipboard, PRISM_VERSION, PRISM_PREFIX
 
 register = Library()
 
@@ -13,65 +13,16 @@ def prism_version():
     return PRISM_VERSION
 
 
-@register.simple_tag
-def line_numbers_js():
-    """Returns the JavaScript stanza to include the line numbers code."""
-
-    if get_line_numbers():
-        return mark_safe(f""",
-        {{
-            "id": "code-block-line-numbers",
-            "url": "//cdnjs.cloudflare.com/ajax/libs/prism/{PRISM_VERSION}/plugins/line-numbers/prism-line-numbers.min.js"
-        }}
-        """)
-    else:
-        return ""
-
-@register.simple_tag
-def copy_to_clipboard_js():
-    """Returns the JavaScript stanza to include the copy to clipboard code."""
-
-    if get_copy_to_clipboard():
-        return mark_safe(f""",
-        {{
-            "id": "code-block-copy-to-clipboard",
-            "url": "//cdnjs.cloudflare.com/ajax/libs/prism/{PRISM_VERSION}/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"
-        }}
-        """)
-    else:
-        return ""
-
-@register.simple_tag
-def toolbar_js():
-    """Returns the JavaScript stanza to include the copy to clipboard code."""
-
-    if get_copy_to_clipboard():
-        return mark_safe(f""",
-        {{
-            "id": "code-block-toolbar",
-            "url": "//cdnjs.cloudflare.com/ajax/libs/prism/{PRISM_VERSION}/plugins/toolbar/prism-toolbar.min.js"
-        }}
-        """)
-    else:
-        return ""
-
-
 @register.simple_tag
 def load_prism_css():
     """Loads the PrismJS theme."""
     theme = get_theme()
     toolbar = True
 
     if theme:
-        script = (
-            f"""<link href="{PRISM_PREFIX}{PRISM_VERSION}/themes/prism-{theme}"""
-            """.min.css" rel="stylesheet">"""
-        )
+        script = f"""<link href="{PRISM_PREFIX}{PRISM_VERSION}/themes/prism-{theme}""" """.min.css" rel="stylesheet">"""
     else:
-        script = (
-            f"""<link href="{PRISM_PREFIX}{PRISM_VERSION}/themes/prism.min.css" """
-            """rel="stylesheet">"""
-        )
+        script = f"""<link href="{PRISM_PREFIX}{PRISM_VERSION}/themes/prism.min.css" """ """rel="stylesheet">"""
 
     if get_line_numbers():
         script += (
@@ -86,3 +37,26 @@ def load_prism_css():
         )
 
     return mark_safe(script)
+
+
+@register.simple_tag
+def load_prism_js():
+    prism_scripts_to_load = [
+        f"{PRISM_PREFIX}{PRISM_VERSION}/components/prism-core.min.js",
+        f"{PRISM_PREFIX}{PRISM_VERSION}/plugins/autoloader/prism-autoloader.min.js",
+    ]
+
+    if get_line_numbers():
+        prism_scripts_to_load.append(f"{PRISM_PREFIX}{PRISM_VERSION}/plugins/line-numbers/prism-line-numbers.min.js")
+
+    if get_copy_to_clipboard():
+        prism_scripts_to_load.append(f"{PRISM_PREFIX}{PRISM_VERSION}/plugins/toolbar/prism-toolbar.min.js")
+        prism_scripts_to_load.append(
+            f"{PRISM_PREFIX}{PRISM_VERSION}/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"
+        )
+
+    script = ""
+    for src_url in prism_scripts_to_load:
+        script += f'<script type="text/javascript" src={src_url}></script>'
+
+    return mark_safe(script)