Implement markdown emoji, youtube, clipboard

judge/markdown.py

@@ -4,6 +4,8 @@ from django.utils.html import escape
 from bs4 import BeautifulSoup
 from pymdownx import superfences
 
+from judge.markdown_extensions import YouTubeExtension, EmoticonExtension
+
 
 EXTENSIONS = [
     "pymdownx.arithmatex",
@@ -22,6 +24,8 @@ EXTENSIONS = [
     "markdown.extensions.admonition",
     "nl2br",
     "mdx_breakless_lists",
+    YouTubeExtension(),
+    EmoticonExtension(),
 ]
 
 EXTENSION_CONFIGS = {

judge/markdown_extensions/__init__.py

@@ -0,0 +1,2 @@
+from .youtube import YouTubeExtension
+from .emoticon import EmoticonExtension

judge/markdown_extensions/emoticon.py

@@ -0,0 +1,111 @@
+import markdown
+from markdown.extensions import Extension
+from markdown.inlinepatterns import InlineProcessor
+import xml.etree.ElementTree as etree
+import re
+
+EMOTICON_EMOJI_MAP = {
+    ":D": "\U0001F603",  # Smiling Face with Open Mouth
+    ":)": "\U0001F642",  # Slightly Smiling Face
+    ":-)": "\U0001F642",  # Slightly Smiling Face with Nose
+    ":(": "\U0001F641",  # Slightly Frowning Face
+    ":-(": "\U0001F641",  # Slightly Frowning Face with Nose
+    ";)": "\U0001F609",  # Winking Face
+    ";-)": "\U0001F609",  # Winking Face with Nose
+    ":P": "\U0001F61B",  # Face with Tongue
+    ":-P": "\U0001F61B",  # Face with Tongue and Nose
+    ":p": "\U0001F61B",  # Face with Tongue
+    ":-p": "\U0001F61B",  # Face with Tongue and Nose
+    ";P": "\U0001F61C",  # Winking Face with Tongue
+    ";-P": "\U0001F61C",  # Winking Face with Tongue and Nose
+    ";p": "\U0001F61C",  # Winking Face with Tongue
+    ";-p": "\U0001F61C",  # Winking Face with Tongue and Nose
+    ":'(": "\U0001F622",  # Crying Face
+    ":o": "\U0001F62E",  # Face with Open Mouth
+    ":-o": "\U0001F62E",  # Face with Open Mouth and Nose
+    ":O": "\U0001F62E",  # Face with Open Mouth
+    ":-O": "\U0001F62E",  # Face with Open Mouth and Nose
+    ":-0": "\U0001F62E",  # Face with Open Mouth and Nose
+    ">:(": "\U0001F620",  # Angry Face
+    ">:-(": "\U0001F620",  # Angry Face with Nose
+    ">:)": "\U0001F608",  # Smiling Face with Horns
+    ">:-)": "\U0001F608",  # Smiling Face with Horns and Nose
+    "XD": "\U0001F606",  # Grinning Squinting Face
+    "xD": "\U0001F606",  # Grinning Squinting Face
+    "B)": "\U0001F60E",  # Smiling Face with Sunglasses
+    "B-)": "\U0001F60E",  # Smiling Face with Sunglasses and Nose
+    "O:)": "\U0001F607",  # Smiling Face with Halo
+    "O:-)": "\U0001F607",  # Smiling Face with Halo and Nose
+    "0:)": "\U0001F607",  # Smiling Face with Halo
+    "0:-)": "\U0001F607",  # Smiling Face with Halo and Nose
+    ">:P": "\U0001F92A",  # Zany Face (sticking out tongue and winking)
+    ">:-P": "\U0001F92A",  # Zany Face with Nose
+    ">:p": "\U0001F92A",  # Zany Face (sticking out tongue and winking)
+    ">:-p": "\U0001F92A",  # Zany Face with Nose
+    ":/": "\U0001F615",  # Confused Face
+    ":-/": "\U0001F615",  # Confused Face with Nose
+    ":\\": "\U0001F615",  # Confused Face
+    ":-\\": "\U0001F615",  # Confused Face with Nose
+    "3:)": "\U0001F608",  # Smiling Face with Horns
+    "3:-)": "\U0001F608",  # Smiling Face with Horns and Nose
+    "<3": "\u2764\uFE0F",  # Red Heart
+    "</3": "\U0001F494",  # Broken Heart
+    ":*": "\U0001F618",  # Face Blowing a Kiss
+    ":-*": "\U0001F618",  # Face Blowing a Kiss with Nose
+    ";P": "\U0001F61C",  # Winking Face with Tongue
+    ";-P": "\U0001F61C",
+    ">:P": "\U0001F61D",  # Face with Stuck-Out Tongue and Tightly-Closed Eyes
+    ":-/": "\U0001F615",  # Confused Face
+    ":/": "\U0001F615",
+    ":\\": "\U0001F615",
+    ":-\\": "\U0001F615",
+    ":|": "\U0001F610",  # Neutral Face
+    ":-|": "\U0001F610",
+    "8)": "\U0001F60E",  # Smiling Face with Sunglasses
+    "8-)": "\U0001F60E",
+    "O:)": "\U0001F607",  # Smiling Face with Halo
+    "O:-)": "\U0001F607",
+    ":3": "\U0001F60A",  # Smiling Face with Smiling Eyes
+    "^.^": "\U0001F60A",
+    "-_-": "\U0001F611",  # Expressionless Face
+    "T_T": "\U0001F62D",  # Loudly Crying Face
+    "T.T": "\U0001F62D",
+    ">.<": "\U0001F623",  # Persevering Face
+    "x_x": "\U0001F635",  # Dizzy Face
+    "X_X": "\U0001F635",
+    ":]": "\U0001F600",  # Grinning Face
+    ":[": "\U0001F641",  # Slightly Frowning Face
+    "=]": "\U0001F600",
+    "=[": "\U0001F641",
+    "D:<": "\U0001F621",  # Pouting Face
+    "D:": "\U0001F629",  # Weary Face
+    "D=": "\U0001F6AB",  # No Entry Sign (sometimes used to denote dismay or frustration)
+    ":'D": "\U0001F602",  # Face with Tears of Joy
+    "D':": "\U0001F625",  # Disappointed but Relieved Face
+    "D8": "\U0001F631",  # Face Screaming in Fear
+    "-.-": "\U0001F644",  # Face with Rolling Eyes
+    "-_-;": "\U0001F612",  # Unamused
+}
+
+
+class EmoticonEmojiInlineProcessor(InlineProcessor):
+    def handleMatch(self, m, data):
+        emoticon = m.group(1)
+        emoji = EMOTICON_EMOJI_MAP.get(emoticon, "")
+        if emoji:
+            el = etree.Element("span")
+            el.text = markdown.util.AtomicString(emoji)
+            el.set("class", "big-emoji")
+            return el, m.start(0), m.end(0)
+        else:
+            return None, m.start(0), m.end(0)
+
+
+class EmoticonExtension(Extension):
+    def extendMarkdown(self, md):
+        # Create the regex pattern to match any emoticon in the map
+        emoticon_pattern = (
+            r"(" + "|".join(map(re.escape, EMOTICON_EMOJI_MAP.keys())) + r")"
+        )
+        emoticon_processor = EmoticonEmojiInlineProcessor(emoticon_pattern, md)
+        md.inlinePatterns.register(emoticon_processor, "emoticon_to_emoji", 1)

judge/markdown_extensions/youtube.py

@@ -0,0 +1,36 @@
+import markdown
+from markdown.inlinepatterns import InlineProcessor
+from markdown.extensions import Extension
+import xml.etree.ElementTree as etree
+
+YOUTUBE_REGEX = (
+    r"(https?://)?(www\.)?" "(youtube\.com/watch\?v=|youtu\.be/)" "([\w-]+)(&[\w=]*)?"
+)
+
+
+class YouTubeEmbedProcessor(InlineProcessor):
+    def handleMatch(self, m, data):
+        youtube_id = m.group(4)
+        if not youtube_id:
+            return None, None, None
+
+        # Create an iframe element with the YouTube embed URL
+        iframe = etree.Element("iframe")
+        iframe.set("width", "100%")
+        iframe.set("height", "360")
+        iframe.set("src", f"https://www.youtube.com/embed/{youtube_id}")
+        iframe.set("frameborder", "0")
+        iframe.set("allowfullscreen", "true")
+        center = etree.Element("center")
+        center.append(iframe)
+
+        # Return the iframe as the element to replace the match, along with the start and end indices
+        return center, m.start(0), m.end(0)
+
+
+class YouTubeExtension(Extension):
+    def extendMarkdown(self, md):
+        # Create the YouTube link pattern
+        YOUTUBE_PATTERN = YouTubeEmbedProcessor(YOUTUBE_REGEX, md)
+        # Register the pattern to apply the YouTubeEmbedProcessor
+        md.inlinePatterns.register(YOUTUBE_PATTERN, "youtube", 175)

resources/base.scss

@@ -726,7 +726,7 @@ noscript #noscript {
 }
 
 .featherlight {
-    z-index: 1000 !important;
+    z-index: 1001 !important;
 }
 
 // @media (max-width: 500px) {

resources/chatbox.scss

@@ -27,7 +27,7 @@
     margin-top: 1em;
 }
 .big-emoji {
-    font-size: 16px;
+    font-size: 1.2em;
 }
 #chat-online {
     border-right: 1px solid #ccc;

resources/common.js

@@ -311,17 +311,49 @@ function populateCopyButton() {
     });
 }
 
-function register_markdown_editors() {
+function register_copy_clipboard($elements, callback) {
-    if (!("Markdown" in window)) {
+    $elements.on('paste', function(event) {
-        return;
+        const items = (event.clipboardData || event.originalEvent.clipboardData).items;
+        for (const index in items) {
+            const item = items[index];
+            if (item.kind === 'file' && item.type.indexOf('image') !== -1) {
+                const blob = item.getAsFile();
+                const formData = new FormData();
+                formData.append('image', blob);
+
+                $(this).prop('disabled', true);
+
+                $.ajax({
+                    url: '/pagedown/image-upload/',
+                    type: 'POST',
+                    data: formData,
+                    processData: false,
+                    contentType: false,
+                    success: function(data) {
+                        // Assuming the server returns the URL of the image
+                        const imageUrl = data.url;
+                        const editor = $(event.target); // Get the textarea where the event was triggered
+                        let currentMarkdown = editor.val();
+                        const markdownImageText = '![](' + imageUrl + ')'; // Markdown for an image
+                        
+                        if (currentMarkdown) currentMarkdown += "\n";
+                        currentMarkdown += markdownImageText;
+
+                        editor.val(currentMarkdown);
+                        callback?.();
+                    },
+                    error: function() {
+                        alert('There was an error uploading the image.');
+                    },
+                    complete: () => {
+                        // Re-enable the editor
+                        $(this).prop('disabled', false);
+                    }
+                });
+                
+                // We only handle the first image in the clipboard data
+                break;
             }
-    $('textarea.wmd-input').each(function() {
-        let id = this.id.substr(9); // remove prefix "wmd-input"
-        var $buttonBar = $(this).prevAll('div[id^="wmd-button-bar"]').first();
-        if (!$buttonBar.length || !$buttonBar.html().trim()) {
-            let converter = new Markdown.Converter();
-            let editor = new Markdown.Editor(converter, id);
-            editor.run();
         }
     });
 }
@@ -399,9 +431,7 @@ function onWindowReady() {
         }
     });
 
-    setTimeout(() => {
+    register_copy_clipboard($('textarea.wmd-input'));
-        register_markdown_editors();
-    }, 100);
 
     $('form').submit(function (evt) {
         // Prevent multiple submissions of forms, see #565

resources/markdown.css

@@ -4129,17 +4129,20 @@ html .md-typeset .footnote-ref{
 .md-typeset :-webkit-any(.emojione,.twemoji,.gemoji){
     display:inline-flex;
     height:1.125em;
-    vertical-align:text-top
+    vertical-align:text-top;
+    font-size: 1.2em;
 }
 .md-typeset :-moz-any(.emojione,.twemoji,.gemoji){
     display:inline-flex;
     height:1.125em;
-    vertical-align:text-top
+    vertical-align:text-top;
+    font-size: 1.2em;
 }
 .md-typeset :is(.emojione,.twemoji,.gemoji){
     display:inline-flex;
     height:1.125em;
-    vertical-align:text-top
+    vertical-align:text-top;
+    font-size: 1.2em;
 }
 .md-typeset :-webkit-any(.emojione,.twemoji,.gemoji) svg{
     fill:currentcolor;
@@ -4149,12 +4152,14 @@ html .md-typeset .footnote-ref{
 .md-typeset :-moz-any(.emojione,.twemoji,.gemoji) svg{
     fill:currentcolor;
     max-height:100%;
-    width:1.125em
+    width:1.125em;
+    font-size: 1.2em;
 }
 .md-typeset :is(.emojione,.twemoji,.gemoji) svg{
     fill:currentcolor;
     max-height:100%;
-    width:1.125em
+    width:1.125em;
+    font-size: 1.2em;
 }
 .highlight :-webkit-any(.o,.ow){
     color:var(--md-code-hl-operator-color)

resources/pagedown_init.js

@@ -0,0 +1,158 @@
+var DjangoPagedown = DjangoPagedown | {};
+
+DjangoPagedown = (function() {
+  var converter = Markdown.getSanitizingConverter();
+  var editors = {};
+  var elements;
+
+  Markdown.Extra.init(converter, {
+    extensions: "all"
+  });
+
+  var createEditor = function(element) {
+    var input = element.getElementsByClassName("wmd-input")[0];
+    if (input === undefined) {
+      return
+    }
+    var id = input.id.substr(9);
+    if (!editors.hasOwnProperty(id)) {
+      var editor = new Markdown.Editor(converter, id, {});
+
+      // Handle image upload
+      if (element.classList.contains("image-upload-enabled")) {
+        var upload = element.getElementsByClassName("pagedown-image-upload")[0];
+        var url = upload.getElementsByClassName("url-input")[0];
+        var file = upload.getElementsByClassName("file-input")[0];
+        var cancel = upload.getElementsByClassName("deletelink")[0];
+        var submit = upload.getElementsByClassName("submit-input")[0];
+        var loading = upload.getElementsByClassName("submit-loading")[0];
+
+        var close = function(value, callback = undefined) {
+          upload.classList.remove("show");
+          url.value = "";
+          file.value = "";
+          document.removeEventListener('click', outsideClickListener);
+          if (callback) callback(value);
+        };
+
+        var outsideClickListener = function(event) {
+          if (!upload.contains(event.target) && upload.classList.contains("show")) {
+            cancel.click();
+          }
+        };
+
+        editor.hooks.set("insertImageDialog", function(callback) {
+          upload.classList.add("show");
+
+          setTimeout(function() {
+            document.addEventListener('click', outsideClickListener);
+          }, 0);
+
+          cancel.addEventListener(
+            "click",
+            function(event) {
+              close(null, callback);
+              event.preventDefault();
+            },
+            { once: true }
+          );
+
+          submit.addEventListener(
+            "click",
+            function() {
+              // Regular URL
+              if (url.value.length > 0) {
+                close(url.value, callback);
+              }
+              // File upload
+              else if (file.files.length > 0) {
+                loading.classList.add("show");
+                submit.classList.remove("show");
+
+                var data = new FormData();
+                var xhr = new XMLHttpRequest();
+                data.append("image", file.files[0]);
+                xhr.open("POST", file.dataset.action, true);
+                xhr.addEventListener(
+                  "load",
+                  function() {
+                    loading.classList.remove("show");
+                    submit.classList.add("show");
+
+                    if (xhr.status !== 200) {
+                      alert(xhr.statusText);
+                    } else {
+                      var response = JSON.parse(xhr.response);
+                      if (response.success) {
+                        close(response.url, callback);
+                      } else {
+                        if (response.error) {
+                          var error = "";
+                          for (var key in response.error) {
+                            if (response.error.hasOwnProperty(key)) {
+                              error += key + ":" + response.error[key];
+                            }
+                          }
+                          alert(error);
+                        }
+                        close(null, callback);
+                      }
+                    }
+                  },
+                  {
+                    once: true
+                  }
+                );
+                xhr.send(data);
+              } else {
+                // Nothing
+                close(null, callback);
+              }
+              event.preventDefault();
+            },
+            { once: true }
+          );
+          
+          return true;
+        });
+      }
+
+      editor.run();
+      editors[id] = editor;
+    }
+  };
+
+  var destroyEditor = function(element) {
+    var input = element.getElementsByClassName("wmd-input")[0];
+    if (input === undefined) {
+      return
+    }
+    var id = input.id.substr(9);
+    if (editors.hasOwnProperty(id)) {
+      delete editors[id];
+      return true;
+    }
+    return false;
+  };
+
+  var init = function() {
+    elements = document.getElementsByClassName("wmd-wrapper");
+    for (var i = 0; i < elements.length; ++i) {
+      createEditor(elements[i]);
+    }
+  };
+
+  return {
+    init: function() {
+      return init();
+    },
+    createEditor: function(element) {
+      return createEditor(element);
+    },
+    destroyEditor: function(element) {
+      return destroyEditor(element);
+    }
+  };
+})();
+
+window.onload = DjangoPagedown.init;

templates/chat/chat_js.html

@@ -585,5 +585,8 @@
     });
 
     $('#submit-button').on('click', submit_chat);
+    register_copy_clipboard($("#chat-input"), () => {
+      $('#chat-input').trigger('input');
+    });
   });
 </script>

templates/comments/media-js.html

@@ -211,16 +211,17 @@
       $comments.find('a.edit-link').featherlight({
         afterOpen: function () {
           register_dmmd_preview($('#id-edit-comment-body-preview'));
-          register_markdown_editors();
           if ('DjangoPagedown' in window) {
+            DjangoPagedown.createEditor(
+              $('#wmd-input-id-edit-comment-body').closest('.wmd-wrapper')[0]
+            );
+            register_copy_clipboard($('#wmd-input-id-edit-comment-body'));
             var $wmd = $('.featherlight .wmd-wrapper');
             if ($wmd.length) {
-              if ('MathJax' in window) {
               var preview = $('.featherlight div.wmd-preview')[0];
               renderKatex(preview);
             }
           }
-          }
           $('#comment-edit').submit(function (event) {
             event.preventDefault();
             var id = $('#comment-edit').find('.comment-id').text();
@@ -242,6 +243,11 @@
             });
           });
         },
+        beforeClose: function() {
+          DjangoPagedown.destroyEditor(
+            $('#wmd-input-id-edit-comment-body').closest('.wmd-wrapper')[0]
+          );
+        },
         variant: 'featherlight-edit'
       });
 

templates/markdown_editor/markdown_editor.html

@@ -64,7 +64,6 @@
           populateCopyButton();
         },
         error: function(error) {
-          alert(error);
           console.log(error.message);
         }
       })