Image sidebar is finally complete

3 files changed, 38 insertions, 6 deletions

diff --git a/pydis_site/static/css/wiki/style.css b/pydis_site/static/css/wiki/style.css
index b4f233f7..61ded7ce 100644
--- a/pydis_site/static/css/wiki/style.css
+++ b/pydis_site/static/css/wiki/style.css
@@ -1,3 +1,7 @@
 .breadcrumb-section {
     padding: 1rem;
 }
+
+div.control.is-fullwidth {
+    width: 100%;
+}
diff --git a/pydis_site/static/js/wiki/load_editor.js b/pydis_site/static/js/wiki/load_editor.js
index 6eddbe1e..0671daed 100644
--- a/pydis_site/static/js/wiki/load_editor.js
+++ b/pydis_site/static/js/wiki/load_editor.js
@@ -1,15 +1,12 @@
 (function() {
     window.editors = {};  // So that other scripts can get at 'em
 
-    const TOCText = "[TOC]";
-
     const headingAction = {
         name: "heading",
         action: SimpleMDE.toggleHeadingSmaller,
         className: "fa fa-heading",
         title: "Heading",
     };
-
     const imageAction = {
         name: "image",
         action: SimpleMDE.drawImage,
@@ -17,10 +14,37 @@
         title: "Insert image",
     };
 
+    const imageAlign = "align:{ALIGN} ";
+    const imageSize = "size:{SIZE}";
+
     let elements = document.getElementsByClassName("simple-mde");
 
+    function add_insert_image_wiki(editor) {
+        editor.insert_image_wiki = function(id, align, size, caption) {
+            let contents = "",
+                doc = editor.codemirror.getDoc(),
+                cursor = doc.getCursor();
+
+            if (typeof align !== "undefined" && align.length) {
+                contents = contents + imageAlign.replace("{ALIGN}", align);
+            }
+
+            if (typeof size !== "undefined" && size.length) {
+                contents = contents + imageSize.replace("{SIZE}", size);
+            }
+
+            contents = `\n[image:${id} ${contents}]`;
+
+            if (typeof caption !== "undefined" && caption.length) {
+                contents = contents + "\n" + `    ${caption}`
+            }
+
+            doc.replaceRange(contents, cursor);
+        }
+    }
+
     for (let element of elements) {
-        window.editors[element.id] = new SimpleMDE({
+        let editor = new SimpleMDE({
             "element": element,
 
             autoDownloadFontAwesome: false,  // We already have the pro one loaded
@@ -53,6 +77,9 @@
             ],
 
             status: false,
-        })
+        });
+
+        add_insert_image_wiki(editor);
+        window.editors[element.id] = editor;
     }
 })();
diff --git a/pydis_site/static/js/wiki/modal.js b/pydis_site/static/js/wiki/modal.js
index 01252575..1eb7b056 100644
--- a/pydis_site/static/js/wiki/modal.js
+++ b/pydis_site/static/js/wiki/modal.js
@@ -7,7 +7,8 @@ function open_modal(id) {
         $(element).removeClass("is-active");
     });
 
-    $(element).find("[aria-label=\"close\"]").click(function() {
+    $(element).find("[aria-label=\"close\"]").click(function(e) {
         $(element).removeClass("is-active");
+        e.preventDefault();
     });
 }