Merge pull request #107 from unb-mds/feature/syntax-highlighting

[feature request] Adicionar suporte a syntax highlighting no formulário de submissão

.pre-commit-config.yaml

@@ -3,7 +3,7 @@
 
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v4.4.0
+    rev: v4.5.0
     hooks:
       - id: trailing-whitespace
       - id: end-of-file-fixer
@@ -15,13 +15,13 @@ repos:
       - id: detect-private-key
       - id: end-of-file-fixer
   - repo: https://github.com/commitizen-tools/commitizen
-    rev: 3.9.0
+    rev: v3.13.0
     hooks:
       - id: commitizen
       - id: commitizen-branch
         stages: [push]
   - repo: https://github.com/psf/black
-    rev: 23.9.1
+    rev: 23.11.0
     hooks:
       - id: black
   - repo: https://github.com/pycqa/isort
@@ -33,7 +33,7 @@ repos:
     hooks:
       - id: flake8
   - repo: https://github.com/pre-commit/mirrors-mypy
-    rev: v1.6.1
+    rev: v1.7.1
     hooks:
       - id: mypy
         additional_dependencies:

apps/submissions/forms.py

@@ -1,10 +1,11 @@
-from django.forms import CharField, Form, Textarea
+from django.forms import Form
+from djangocodemirror.fields import CodeMirrorField
 
 
 class SubmissionForm(Form):
-    code = CharField(
-        label="Source Code",
-        required=True,
+    code = CodeMirrorField(
         min_length=15,
-        widget=Textarea(attrs={"rows": 12, "style": "width: 100%;"}),
+        label="Code",
+        required=True,
+        config_name="python",
     )

apps/tasks/tests.py

@@ -501,6 +501,15 @@ def test_form_success_url(self) -> None:
         url = reverse("submissions:list")
         self.assertEqual(self.view.get_success_url(), url)
 
+    def test_invalid_form_submission(self) -> None:
+        self.client.force_login(self.user)
+
+        response = self.client.post(self.url, data={"code": ""})
+
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "tasks/detail.html")
+        self.assertFalse(response.context["form"].is_valid())
+
 
 class BackgroundJobTaskTest(TestCase):
     def setUp(self) -> None:

docker-compose.yml

@@ -24,6 +24,8 @@ services:
       - config/.env
     depends_on:
       - postgres
+      - rabbitmq
+      - celery
     command: python -Wd manage.py runserver 0.0.0.0:8000
 
   celery:

pyproject.toml

@@ -18,6 +18,7 @@ crispy-bootstrap5 = "^2023.10"
 gunicorn = "^21.2.0"
 whitenoise = "^6.6.0"
 celery = {extras = ["librabbitmq"], version = "^5.3.6"}
+djangocodemirror = "^2.1.0"
 
 [tool.poetry.group.dev.dependencies]
 pre-commit = "^3.5.0"

server/settings/base.py

@@ -1,6 +1,8 @@
 from os.path import join
 from typing import List
 
+from djangocodemirror.settings import *
+
 from server.settings import BASE_DIR, env
 
 ######################
@@ -78,6 +80,7 @@
     "bootstrap5",
     "crispy_forms",
     "crispy_bootstrap5",
+    "djangocodemirror",
 ]
 
 LOCAL_APPS = [

templates/tasks/detail.html

@@ -1,10 +1,27 @@
 {% extends "base.html" %}
 
 {% load crispy_forms_tags %}
+{% load djangocodemirror_tags %}
 
 {% block title %}{{ task.title }}{% endblock title %}
 
 {% block content %}
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/theme/dracula.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/theme/monokai.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/theme/3024-day.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/theme/3024-night.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/theme/cobalt.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/theme/eclipse.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/theme/rubyblue.min.css">
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/mode/python/python.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/addon/edit/closebrackets.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/addon/edit/matchbrackets.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/addon/edit/matchtags.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/addon/edit/closetag.min.js"></script>
+
 <h1>
   <a href="{% url 'tasks:detail' task.id %}">
     {{ task.title }}
@@ -54,17 +71,38 @@ <h4>Constraints</h4>
 <form method="post">
   {% csrf_token %}
 
-  <div class="row justify-content-center">
-    <br>
-    <h4>Submit</h4>
-    {{ form|crispy }}
-    <input
-      type="submit"
-      class="btn btn-primary"
-      style="width: 40%; margin-top: 25px;"
-      value="Submit"
-    >
+  <h4>Submit</h4>
+
+  <div style="display: flex; flex-direction: column; gap: 20px; justify-content: center;">
+    <div style="display: flex; flex-direction: column; gap: 25px; font-size: 0.8rem;">
+      <textarea
+        id="id_code"
+        name="code"
+        class="form-control"
+      ></textarea>
+    </div>
+
+      <input
+        type="submit"
+        class="btn btn-primary"
+        style="width: 100px;"
+        value="Submit"
+      >
+    </div>
   </div>
 </form>
 
+<script>
+  var codemirror = CodeMirror.fromTextArea(
+    document.getElementById("id_code"),
+    {
+      mode: "python",
+      theme: "dracula",
+      lineNumbers: true,
+      autoCloseBrackets: true,
+      matchBrackets: true,
+    }
+  );
+</script>
+
 {% endblock content %}