From d7cc620a0a48390d1de53d18b865175d5bbe7953 Mon Sep 17 00:00:00 2001
From: cuom1999 <lephuocdinh99@gmail.com>
Date: Thu, 6 Jun 2024 21:17:11 -0500
Subject: [PATCH] Add markdown utils

- External links open in a new tab
- Clicking on image open an image modal
---
 dmoj/settings.py                       |  1 +
 judge/markdown.py                      | 47 +++++++++++++++++++++-----
 resources/base.scss                    |  5 +++
 resources/common.js                    |  6 +++-
 templates/base.html                    |  1 +
 templates/comments/media-js.html       |  1 -
 templates/contest/list.html            |  1 -
 templates/contest/ranking-css.html     |  1 -
 templates/problem/data.html            |  1 -
 templates/problem/submission-diff.html |  1 -
 templates/ticket/ticket.html           |  1 -
 templates/timezone/media-js.html       |  1 -
 12 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/dmoj/settings.py b/dmoj/settings.py
index d41ff8a..e379e3e 100644
--- a/dmoj/settings.py
+++ b/dmoj/settings.py
@@ -33,6 +33,7 @@ SITE_ID = 1
 SITE_NAME = "LQDOJ"
 SITE_LONG_NAME = "LQDOJ: Le Quy Don Online Judge"
 SITE_ADMIN_EMAIL = False
+SITE_DOMAIN = "lqdoj.edu.vn"
 
 DMOJ_REQUIRE_STAFF_2FA = True
 
diff --git a/judge/markdown.py b/judge/markdown.py
index f5295ed..80eb21a 100644
--- a/judge/markdown.py
+++ b/judge/markdown.py
@@ -3,6 +3,8 @@ import bleach
 from django.utils.html import escape
 from bs4 import BeautifulSoup
 from pymdownx import superfences
+from django.conf import settings
+from urllib.parse import urlparse
 
 from judge.markdown_extensions import YouTubeExtension, EmoticonExtension
 
@@ -96,6 +98,35 @@ ALLOWED_ATTRS = [
 ]
 
 
+def _wrap_img_iframe_with_lazy_load(soup):
+    for img in soup.findAll("img"):
+        if img.get("src"):
+            img["loading"] = "lazy"
+    for img in soup.findAll("iframe"):
+        if img.get("src"):
+            img["loading"] = "lazy"
+    return soup
+
+
+def _wrap_images_with_featherlight(soup):
+    for img in soup.findAll("img"):
+        if img.get("src"):
+            link = soup.new_tag("a", href=img["src"], **{"data-featherlight": "image"})
+            img.wrap(link)
+    return soup
+
+
+def _open_external_links_in_new_tab(soup):
+    domain = settings.SITE_DOMAIN.lower()
+    for a in soup.findAll("a", href=True):
+        href = a["href"]
+        if href.startswith("http://") or href.startswith("https://"):
+            link_domain = urlparse(href).netloc.lower()
+            if link_domain != domain:
+                a["target"] = "_blank"
+    return soup
+
+
 def markdown(value, lazy_load=False):
     extensions = EXTENSIONS
     html = _markdown.markdown(
@@ -106,13 +137,13 @@ def markdown(value, lazy_load=False):
 
     if not html:
         html = escape(value)
+
+    soup = BeautifulSoup(html, features="html.parser")
     if lazy_load:
-        soup = BeautifulSoup(html, features="html.parser")
-        for img in soup.findAll("img"):
-            if img.get("src"):
-                img["loading"] = "lazy"
-        for img in soup.findAll("iframe"):
-            if img.get("src"):
-                img["loading"] = "lazy"
-        html = str(soup)
+        soup = _wrap_img_iframe_with_lazy_load(soup)
+
+    soup = _wrap_images_with_featherlight(soup)
+    soup = _open_external_links_in_new_tab(soup)
+    html = str(soup)
+
     return '<div class="md-typeset content-description">%s</div>' % html
diff --git a/resources/base.scss b/resources/base.scss
index 50e7c0e..7dc8152 100644
--- a/resources/base.scss
+++ b/resources/base.scss
@@ -923,4 +923,9 @@ input::placeholder{
         font-size: 22.5px;
         margin-right: 0.1em;
     }
+}
+
+.featherlight-content {
+    max-height: 80% !important;
+    border-radius: 10px;
 }
\ No newline at end of file
diff --git a/resources/common.js b/resources/common.js
index 8bff4e3..386c244 100644
--- a/resources/common.js
+++ b/resources/common.js
@@ -475,7 +475,11 @@ function onWindowReady() {
     
     $('a').click(function() {
         var href = $(this).attr('href');
-        if (!href || href === '#' || href.startsWith("javascript")) {
+        var target = $(this).attr('target');
+        if (!href || href === '#' || href.startsWith("javascript") || 
+            $(this).attr("data-featherlight") ||
+            target === "_blank"
+        ) {
             return;
         }
 
diff --git a/templates/base.html b/templates/base.html
index 9abaa1e..3067a87 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -297,6 +297,7 @@
         {% include "extra_js.html" %}
         <script src="{{ static('common.js') }}"></script>
         <script src="{{ static('libs/clipboard/tooltip.js') }}"></script>
+        <script type="text/javascript" src="{{ static('libs/featherlight/featherlight.min.js') }}"></script>
         <script>
           moment.locale('{{ LANGUAGE_CODE }}');
           $(function () {
diff --git a/templates/comments/media-js.html b/templates/comments/media-js.html
index 44338f7..5baa8a8 100644
--- a/templates/comments/media-js.html
+++ b/templates/comments/media-js.html
@@ -1,4 +1,3 @@
-<script src="{{ static('libs/featherlight/featherlight.min.js') }}" type="text/javascript"></script>
 {% compress js %}
   {{ comment_form.media.js }}
   <script type="text/javascript">
diff --git a/templates/contest/list.html b/templates/contest/list.html
index 10e12b5..ab7db0b 100644
--- a/templates/contest/list.html
+++ b/templates/contest/list.html
@@ -32,7 +32,6 @@
 {% endblock %}
 
 {% block three_col_js %}
-  <script src="{{ static('libs/featherlight/featherlight.min.js') }}" type="text/javascript"></script>
   <script type="text/javascript">
     function changeTabParameter(newTab) {
       const url = new URL(window.location);
diff --git a/templates/contest/ranking-css.html b/templates/contest/ranking-css.html
index 0c7bb46..fc65294 100644
--- a/templates/contest/ranking-css.html
+++ b/templates/contest/ranking-css.html
@@ -42,7 +42,6 @@
   }
 
   .featherlight-content {
-    border-radius: 10px;
     height: 80%;
     width:  60%;
     overflow: auto;
diff --git a/templates/problem/data.html b/templates/problem/data.html
index fb24cb0..0462e88 100644
--- a/templates/problem/data.html
+++ b/templates/problem/data.html
@@ -6,7 +6,6 @@
     window.big_input = (window.valid_files.length > 100);
   </script>
   <script type="text/javascript" src="{{ static('jquery-ui.min.js') }}"></script>
-  <script type="text/javascript" src="{{ static('libs/featherlight/featherlight.min.js') }}"></script>
   <script type="text/javascript" src="{{ static('fine-uploader/jquery.fine-uploader.js') }}"></script>
   <script type="text/javascript">
     $(function () {
diff --git a/templates/problem/submission-diff.html b/templates/problem/submission-diff.html
index f541762..0a6515e 100644
--- a/templates/problem/submission-diff.html
+++ b/templates/problem/submission-diff.html
@@ -12,7 +12,6 @@
       });
     });
   </script>
-  <script type="text/javascript" src="{{ static('libs/featherlight/featherlight.min.js') }}"></script>
   <script type="text/javascript">
   </script>
 {% endblock %}
diff --git a/templates/ticket/ticket.html b/templates/ticket/ticket.html
index 2693455..dad7b97 100644
--- a/templates/ticket/ticket.html
+++ b/templates/ticket/ticket.html
@@ -5,7 +5,6 @@
 
 {% block js_media %}
   {{ form.media.js }}
-  <script src="{{ static('libs/featherlight/featherlight.min.js') }}" type="text/javascript"></script>
   <script type="text/javascript" src="{{ static('event.js') }}"></script>
   <script type="text/javascript">
     $(function () {
diff --git a/templates/timezone/media-js.html b/templates/timezone/media-js.html
index e8f6cf0..30300e0 100644
--- a/templates/timezone/media-js.html
+++ b/templates/timezone/media-js.html
@@ -1,5 +1,4 @@
 {% compress js %}
-  <script src="{{ static('libs/featherlight/featherlight.min.js') }}" type="text/javascript"></script>
   <script type="text/javascript" src="{{ static('libs/timezone-map/timezone-picker.js') }}"></script>
   <script type="text/javascript">
     $(function () {