From 5fc18d31d653de1acc14d0fd2fee6fa9b2c3631d Mon Sep 17 00:00:00 2001
From: cuom1999 <lephuocdinh99@gmail.com>
Date: Thu, 27 Oct 2022 23:56:13 -0500
Subject: [PATCH] Change editor toolbar

---
 resources/pagedown/Markdown.Editor.js         | 224 +++++++++---------
 resources/pagedown/demo/browser/demo.css      | 217 ++++++++++-------
 resources/pagedown/resources/adnomination.svg |   1 +
 resources/pagedown/resources/blockquote.svg   |   1 +
 resources/pagedown/resources/bold.svg         |   3 +
 resources/pagedown/resources/code.svg         |   1 +
 resources/pagedown/resources/heading.svg      |   1 +
 resources/pagedown/resources/hr.svg           |   1 +
 resources/pagedown/resources/image.svg        |   1 +
 resources/pagedown/resources/italic.svg       |  49 ++++
 .../pagedown/resources/latex-display.svg      |   4 +
 resources/pagedown/resources/latex.svg        |   1 +
 resources/pagedown/resources/link.svg         |   1 +
 resources/pagedown/resources/olist.svg        |   1 +
 resources/pagedown/resources/redo.svg         |   1 +
 resources/pagedown/resources/spoiler.svg      |   1 +
 resources/pagedown/resources/ulist.svg        |   1 +
 resources/pagedown/resources/undo.svg         |   1 +
 resources/pagedown/resources/user.svg         |   1 +
 resources/pagedown_widget.css                 | 150 +++++++-----
 20 files changed, 406 insertions(+), 255 deletions(-)
 create mode 100644 resources/pagedown/resources/adnomination.svg
 create mode 100644 resources/pagedown/resources/blockquote.svg
 create mode 100644 resources/pagedown/resources/bold.svg
 create mode 100644 resources/pagedown/resources/code.svg
 create mode 100644 resources/pagedown/resources/heading.svg
 create mode 100644 resources/pagedown/resources/hr.svg
 create mode 100644 resources/pagedown/resources/image.svg
 create mode 100644 resources/pagedown/resources/italic.svg
 create mode 100644 resources/pagedown/resources/latex-display.svg
 create mode 100644 resources/pagedown/resources/latex.svg
 create mode 100644 resources/pagedown/resources/link.svg
 create mode 100644 resources/pagedown/resources/olist.svg
 create mode 100644 resources/pagedown/resources/redo.svg
 create mode 100644 resources/pagedown/resources/spoiler.svg
 create mode 100644 resources/pagedown/resources/ulist.svg
 create mode 100644 resources/pagedown/resources/undo.svg
 create mode 100644 resources/pagedown/resources/user.svg

diff --git a/resources/pagedown/Markdown.Editor.js b/resources/pagedown/Markdown.Editor.js
index 1679918..3e71a28 100644
--- a/resources/pagedown/Markdown.Editor.js
+++ b/resources/pagedown/Markdown.Editor.js
@@ -31,7 +31,7 @@
 
         link: "Hyperlink <a> Ctrl+L",
         linkdescription: "enter link description here",
-        linkdialog: "<p><b>Insert Hyperlink</b></p><p>https://dmoj.ca/ \"optional title\"</p>",
+        linkdialog: "<p><b>Insert Hyperlink</b></p><p>https://lqdoj.edu.vn/ \"optional title\"</p>",
 
         user: "User reference",
         userexample: "enter username here",
@@ -50,11 +50,16 @@
         ulist: "Bulleted List <ul> Ctrl+U",
         litem: "List item",
 
-        heading: "Heading <h1>/<h2> Ctrl+H",
+        heading: "Heading <h2>/<h2> Ctrl+H",
         headingexample: "Heading",
 
         hr: "Horizontal Rule <hr> Ctrl+R",
 
+        adnomination: "Adnomination",
+        spoiler: "Spoiler",
+        spoilerSummary: "summary",
+        spoilerDetail: "detail",
+
         undo: "Undo - Ctrl+Z",
         redo: "Redo - Ctrl+Y",
         redomac: "Redo - Ctrl+Shift+Z",
@@ -1262,6 +1267,7 @@
             if ((key.ctrlKey || key.metaKey) && !key.altKey && !key.shiftKey) {
                 var keyCode = key.charCode || key.keyCode;
                 var keyCodeStr = String.fromCharCode(keyCode).toLowerCase();
+                var hasKey = true;
 
                 switch (keyCodeStr) {
                     case "b":
@@ -1311,16 +1317,21 @@
                             doClick(buttons.undo);
                         }
                         break;
-                }
-                switch (keyCode) {
-                    case 221:
-                        doCommand("doIndent");
-                        break;
-                    case 219:
-                        doCommand("doReverseIndent");
-                        break;
                     default:
-                        return;
+                        hasKey = false;
+                        break;
+                }
+                if (!hasKey) {
+                    switch (keyCode) {
+                        case 221:
+                            doCommand("doIndent");
+                            break;
+                        case 219:
+                            doCommand("doReverseIndent");
+                            break;
+                        default:
+                            return;
+                    }
                 }
 
                 if (key.preventDefault) {
@@ -1425,35 +1436,16 @@
             }
         };
 
+        function bindCommand(method) {
+            if (typeof method === "string")
+                method = commandManager[method];
+            return function () { method.apply(commandManager, arguments); }
+        }
+
         function setupButton(button, isEnabled) {
-
-            var normalYShift = "0px";
-            var disabledYShift = "-20px";
-            var highlightYShift = "-40px";
-            var image = button.getElementsByTagName("span")[0];
             if (isEnabled) {
-                image.style.backgroundPosition = button.XShift + " " + normalYShift;
-                button.onmouseover = function () {
-                    image.style.backgroundPosition = this.XShift + " " + highlightYShift;
-                };
-
-                button.onmouseout = function () {
-                    image.style.backgroundPosition = this.XShift + " " + normalYShift;
-                };
-
-                // IE tries to select the background image "button" text (it's
-                // implemented in a list item) so we have to cache the selection
-                // on mousedown.
-                if (uaSniffed.isIE) {
-                    button.onmousedown = function () {
-                        if (doc.activeElement && doc.activeElement !== panels.input) { // we're not even in the input box, so there's no selection
-                            return;
-                        }
-                        panels.ieCachedRange = document.selection.createRange();
-                        panels.ieCachedScrollTop = panels.input.scrollTop;
-                    };
-                }
-
+                button.classList.add("wmd-button-active");
+                button.classList.remove("wmd-button-inactive");
                 if (!button.isHelp) {
                     button.onclick = function () {
                         if (this.onmouseout) {
@@ -1465,19 +1457,14 @@
                 }
             }
             else {
-                image.style.backgroundPosition = button.XShift + " " + disabledYShift;
-                button.onmouseover = button.onmouseout = button.onclick = function () { };
+                console.log(button);
+                button.classList.remove("wmd-button-active");
+                button.classList.add("wmd-button-inactive");
+                button.onclick = function () { };
             }
         }
 
-        function bindCommand(method) {
-            if (typeof method === "string")
-                method = commandManager[method];
-            return function () { method.apply(commandManager, arguments); }
-        }
-
         function makeSpritedButtonRow() {
-
             var buttonBar = panels.buttonBar;
 
             var normalYShift = "0px";
@@ -1488,17 +1475,12 @@
             buttonRow.id = "wmd-button-row" + postfix;
             buttonRow.className = 'wmd-button-row';
             buttonRow = buttonBar.appendChild(buttonRow);
-            var xPosition = 0;
-            var makeButton = function (id, title, XShift, textOp) {
+
+            var makeButton = function (id, title, textOp) {
                 var button = document.createElement("li");
-                button.className = "wmd-button";
-                button.style.left = xPosition + "px";
-                xPosition += 25;
-                var buttonImage = document.createElement("span");
+                button.className = "wmd-button " + id;
                 button.id = id + postfix;
-                button.appendChild(buttonImage);
                 button.title = title;
-                button.XShift = XShift;
                 if (textOp)
                     button.textOp = textOp;
                 setupButton(button, true);
@@ -1510,37 +1492,39 @@
                 spacer.className = "wmd-spacer wmd-spacer" + num;
                 spacer.id = "wmd-spacer" + num + postfix;
                 buttonRow.appendChild(spacer);
-                xPosition += 25;
             }
 
-            buttons.bold = makeButton("wmd-bold-button", getString("bold"), "0px", bindCommand("doBold"));
-            buttons.italic = makeButton("wmd-italic-button", getString("italic"), "-20px", bindCommand("doItalic"));
+            buttons.bold = makeButton("wmd-bold-button", getString("bold"), bindCommand("doBold"));
+            buttons.italic = makeButton("wmd-italic-button", getString("italic"), bindCommand("doItalic"));
             makeSpacer(1);
-            buttons.latex = makeButton("wmd-latex-button", getString("latex"), "-40px", bindCommand("doLatex"));
-            buttons.displaylatex = makeButton("wmd-latex-button-display", getString("latexdisplay"), "-60px", bindCommand("doLatexDisplay"));
+            buttons.latex = makeButton("wmd-latex-button", getString("latex"), bindCommand("doLatex"));
+            buttons.displaylatex = makeButton("wmd-latex-button-display", getString("latexdisplay"), bindCommand("doLatexDisplay"));
             makeSpacer(2);
-            buttons.link = makeButton("wmd-link-button", getString("link"), "-80px", bindCommand(function (chunk, postProcessing) {
+            buttons.link = makeButton("wmd-link-button", getString("link"), bindCommand(function (chunk, postProcessing) {
                 return this.doLinkOrImage(chunk, postProcessing, false);
             }));
 
-            buttons.user = makeButton("wmd-user-reference-button", getString("user"), "-100px", bindCommand("doUserReference"));
+            buttons.user = makeButton("wmd-user-reference-button", getString("user"), bindCommand("doUserReference"));
 
-            buttons.quote = makeButton("wmd-quote-button", getString("quote"), "-120px", bindCommand("doBlockquote"));
-            buttons.code = makeButton("wmd-code-button", getString("code"), "-140px", bindCommand("doCode"));
-            buttons.image = makeButton("wmd-image-button", getString("image"), "-160px", bindCommand(function (chunk, postProcessing) {
+            buttons.quote = makeButton("wmd-quote-button", getString("quote"), bindCommand("doBlockquote"));
+            buttons.code = makeButton("wmd-code-button", getString("code"), bindCommand("doCode"));
+            buttons.image = makeButton("wmd-image-button", getString("image"), bindCommand(function (chunk, postProcessing) {
                 return this.doLinkOrImage(chunk, postProcessing, true);
             }));
             makeSpacer(3);
-            buttons.olist = makeButton("wmd-olist-button", getString("olist"), "-180px", bindCommand(function (chunk, postProcessing) {
+            buttons.olist = makeButton("wmd-olist-button", getString("olist"), bindCommand(function (chunk, postProcessing) {
                 this.doList(chunk, postProcessing, true);
             }));
-            buttons.ulist = makeButton("wmd-ulist-button", getString("ulist"), "-200px", bindCommand(function (chunk, postProcessing) {
+            buttons.ulist = makeButton("wmd-ulist-button", getString("ulist"), bindCommand(function (chunk, postProcessing) {
                 this.doList(chunk, postProcessing, false);
             }));
-            buttons.heading = makeButton("wmd-heading-button", getString("heading"), "-220px", bindCommand("doHeading"));
-            buttons.hr = makeButton("wmd-hr-button", getString("hr"), "-240px", bindCommand("doHorizontalRule"));
+            buttons.heading = makeButton("wmd-heading-button", getString("heading"), bindCommand("doHeading"));
+            buttons.hr = makeButton("wmd-hr-button", getString("hr"), bindCommand("doHorizontalRule"));
             makeSpacer(3);
-            buttons.undo = makeButton("wmd-undo-button", getString("undo"), "-260px", null);
+            buttons.spoiler = makeButton("wmd-adnomination-button", getString("adnomination"), bindCommand("doAdnomination"));
+            buttons.spoiler = makeButton("wmd-spoiler-button", getString("spoiler"), bindCommand("doSpoiler"));
+            makeSpacer(4);
+            buttons.undo = makeButton("wmd-undo-button", getString("undo"), null);
             buttons.undo.execute = function (manager) { if (manager) manager.undo(); };
 
             var redoTitle = /win/.test(nav.platform.toLowerCase()) ?
@@ -1550,27 +1534,11 @@
             buttons.redo = makeButton("wmd-redo-button", redoTitle, "-280px", null);
             buttons.redo.execute = function (manager) { if (manager) manager.redo(); };
 
-            if (helpOptions) {
-                var helpButton = document.createElement("li");
-                var helpButtonImage = document.createElement("span");
-                helpButton.appendChild(helpButtonImage);
-                helpButton.className = "wmd-button wmd-help-button";
-                helpButton.id = "wmd-help-button" + postfix;
-                helpButton.XShift = "-300px";
-                helpButton.isHelp = true;
-                helpButton.style.right = "0px";
-                helpButton.title = getString("help");
-                helpButton.onclick = helpOptions.handler;
-
-                setupButton(helpButton, true);
-                buttonRow.appendChild(helpButton);
-                buttons.help = helpButton;
-            }
-
             setUndoRedoButtonStates();
         }
 
         function setUndoRedoButtonStates() {
+            console.log(undoManager.canUndo());
             if (undoManager) {
                 setupButton(buttons.undo, undoManager.canUndo());
                 setupButton(buttons.redo, undoManager.canRedo());
@@ -1954,6 +1922,42 @@
         chunk.before = chunk.before.replace(/(^|\n)([ ]{0,4})(.*)$/, "$1$3");
     }
 
+    commandProto.doReverseIndent = function(chunk, postProcessing) {
+        if (chunk.selection) {
+            var selectedLines = chunk.selection.split("\n");
+            for (var i = 1; i < selectedLines.length; i++) {
+                selectedLines[i] = selectedLines[i].replace(/^([ ]{0,4})(.*)$/, "$2");
+            }
+            chunk.selection = selectedLines.join("\n");
+        }
+        // Reindent the current line
+        chunk.before = chunk.before.replace(/(^|\n)([ ]{0,4})(.*)$/, "$1$3");
+    }
+
+    commandProto.doSpoiler = function(chunk, postProcessing) {
+        chunk.selection = "";
+        if (chunk.before && !/\s$/.test(chunk.before)) {
+            commandProto.doAutoindent(chunk, postProcessing);
+        }
+        chunk.before += "??? \"" + this.getString("spoilerSummary") + "\"";
+        commandProto.doAutoindent(chunk, postProcessing);
+        chunk.before += "    ";
+        chunk.selection = this.getString("spoilerDetail");
+        chunk.after = "\n" + chunk.after;
+    }
+
+    commandProto.doAdnomination = function(chunk, postProcessing) {
+        chunk.selection = "";
+        if (chunk.before && !/\s$/.test(chunk.before)) {
+            commandProto.doAutoindent(chunk, postProcessing);
+        }
+        chunk.before += "!!! note \"" + this.getString("spoilerSummary") + "\"";
+        commandProto.doAutoindent(chunk, postProcessing);
+        chunk.before += "    ";
+        chunk.selection = this.getString("spoilerDetail");
+        chunk.after = "\n" + chunk.after;
+    }
+
     // Hitting enter will put your cursor on the next line
     // at the current indent level.
     commandProto.doAutoindent = function (chunk, postProcessing) {
@@ -2157,38 +2161,30 @@
         // line or is multiline.
         if ((!hasTextAfter && !hasTextBefore) || /\n/.test(chunk.selection)) {
 
-            chunk.before = chunk.before.replace(/[ ]{4}$/,
-                function (totalMatch) {
-                    chunk.selection = totalMatch + chunk.selection;
-                    return "";
-                });
+            // Use backticks (`) to delimit the code block.
 
-            var nLinesBack = 1;
-            var nLinesForward = 1;
+            chunk.trimWhitespace();
+            chunk.findTags(/```/, /```/);
 
-            if (/(\n|^)(\t|[ ]{4,}).*\n$/.test(chunk.before)) {
-                nLinesBack = 0;
+            if (!chunk.startTag && !chunk.endTag) {
+                chunk.startTag = "```\n";
+                chunk.endTag = "\n```";
+                if (!chunk.selection) {
+                    chunk.selection = this.getString("codeexample");
+                }
             }
-            if (/^\n(\t|[ ]{4,})/.test(chunk.after)) {
-                nLinesForward = 0;
-            }
-
-            chunk.skipLines(nLinesBack, nLinesForward);
-
-            if (!chunk.selection) {
-                chunk.startTag = "    ";
-                chunk.selection = this.getString("codeexample");
+            else if (chunk.endTag && !chunk.startTag) {
+                chunk.before += chunk.endTag;
+                chunk.endTag = "";
             }
             else {
-                if (/^[ ]{0,3}\S/m.test(chunk.selection)) {
-                    if (/\n/.test(chunk.selection))
-                        chunk.selection = chunk.selection.replace(/^/gm, "    ");
-                    else // if it's not multiline, do not select the four added spaces; this is more consistent with the doList behavior
-                        chunk.before += "    ";
-                }
-                else {
-                    chunk.selection = chunk.selection.replace(/^[ ]{4}/gm, "");
-                }
+                chunk.startTag = chunk.endTag = "";
+            }
+            if (!/(^|\n)$/.test(chunk.before)) {
+                chunk.startTag = '\n' + chunk.startTag;
+            }
+            if (!/^(\n|$)/.test(chunk.after)) {
+                chunk.endTag += '\n';
             }
         }
         else {
diff --git a/resources/pagedown/demo/browser/demo.css b/resources/pagedown/demo/browser/demo.css
index 5860ba8..5f8b057 100644
--- a/resources/pagedown/demo/browser/demo.css
+++ b/resources/pagedown/demo/browser/demo.css
@@ -11,109 +11,162 @@ body
 	min-width: 500px;
 }
 
-.wmd-button-bar 
-{
-	width: 100%;
-	background-color: Silver; 
+.wmd-button-bar {
+    width: 100%;
+    background-color: white;
 }
 
-.wmd-input 
-{ 
-	height: 300px;
-	width: 100%;
-	background-color: Gainsboro;
-	border: 1px solid DarkGray;
+.wmd-input {
+    height: 300px;
+    width: 100%;
+    background: #fff;
+    border: 1px solid DarkGray;
+    font-family: Consolas, "Liberation Mono", Monaco, "Courier New", monospace !important;
 }
 
-.wmd-preview 
-{ 
-	background-color: #c0e0ff; 
+.wmd-preview {
+    background: none;
+    word-wrap: break-word;
 }
 
-.wmd-button-row 
-{
-	position: relative; 
-	margin-left: 5px;
-	margin-right: 5px;
-	margin-bottom: 5px;
-	margin-top: 10px;
-	padding: 0px;  
-	height: 20px;
+.wmd-button-row {
+    margin: 10px 5px 5px;
+    padding: 0;
+}
+
+.wmd-button {
+    display: inline-flex;
+    list-style: none;
+    width: 20px;
+    height: 20px;
+    background-repeat: no-repeat;
+    background-size: 14px 14px;
+    background-position: center;
+    border-radius: 3px;
+    cursor: pointer;
+    padding-left: 2px;
+    padding-right: 3px;
+}
+
+.wmd-bold-button {
+    background-image: url("pagedown/resources/bold.svg");
+}
+
+.wmd-italic-button {
+    background-image: url("pagedown/resources/italic.svg");
+}
+
+.wmd-latex-button {
+    background-image: url("pagedown/resources/latex.svg");
+}
+
+.wmd-latex-button-display {
+    background-image: url("pagedown/resources/latex-display.svg");
+}
+
+.wmd-link-button {
+    background-image: url("pagedown/resources/link.svg");
+}
+
+.wmd-user-reference-button {
+    background-image: url("pagedown/resources/user.svg");
+}
+
+.wmd-quote-button {
+    background-image: url("pagedown/resources/blockquote.svg");
+}
+
+.wmd-code-button {
+    background-image: url("pagedown/resources/code.svg");
+}
+
+.wmd-image-button {
+    background-image: url("pagedown/resources/image.svg");
+}
+
+.wmd-olist-button {
+    background-image: url("pagedown/resources/olist.svg");
+    background-size: 18px;
+}
+
+.wmd-ulist-button {
+    background-image: url("pagedown/resources/ulist.svg");
+    background-size: 18px;
+}
+
+.wmd-heading-button {
+    background-image: url("pagedown/resources/heading.svg");
+}
+
+.wmd-hr-button {
+    background-image: url("pagedown/resources/hr.svg");
+}
+
+.wmd-undo-button {
+    background-image: url("pagedown/resources/undo.svg");
+    background-size: 18px;
+}
+
+.wmd-redo-button {
+    background-image: url("pagedown/resources/redo.svg");
+    background-size: 18px;
+}
+
+.wmd-button-active:hover {
+    background-color: lightgray;
+}
+
+.wmd-button-inactive {
+    filter: invert(88%) sepia(1%) saturate(0%) hue-rotate(278deg) brightness(98%) contrast(91%);
 }
 
 .wmd-spacer
 {
-	width: 1px; 
-	height: 20px; 
-	margin-left: 14px;
-	
-	position: absolute;
-	background-color: Silver;
-	display: inline-block; 
-	list-style: none;
-}
-
-.wmd-button {
+    display: inline-flex;
     width: 20px;
-    height: 20px;
-    padding-left: 2px;
-    padding-right: 3px;
-    position: absolute;
-    display: inline-block;
-    list-style: none;
-    cursor: pointer;
 }
 
-.wmd-button > span {
-    background-image: url(../../wmd-buttons.png);
-    background-repeat: no-repeat;
-    background-position: 0px 0px;
-    width: 20px;
-    height: 20px;
-    display: inline-block;
+.wmd-prompt-background {
+    background-color: Black;
 }
 
-.wmd-spacer1
-{
-    left: 50px;
-}
-.wmd-spacer2
-{
-    left: 175px;
-}
-.wmd-spacer3
-{
-    left: 300px;
-}
-
-
-
-
-.wmd-prompt-background
-{
-	background-color: Black;
-}
-
-.wmd-prompt-dialog
-{
-	border: 1px solid #999999;
-	background-color: #F5F5F5;
+.wmd-prompt-dialog {
+    border: 1px solid #999999;
+    background-color: #F5F5F5;
 }
 
 .wmd-prompt-dialog > div {
-	font-size: 0.8em;
-	font-family: arial, helvetica, sans-serif;
+    font-size: 0.8em;
+    font-family: arial, helvetica, sans-serif;
 }
 
-
 .wmd-prompt-dialog > form > input[type="text"] {
-	border: 1px solid #999999;
-	color: black;
+    border: 1px solid #999999;
+    color: black;
 }
 
-.wmd-prompt-dialog > form > input[type="button"]{
-	border: 1px solid #888888;
-	font-family: trebuchet MS, helvetica, sans-serif;
-	font-size: 0.8em;
-	font-weight: bold;
+.wmd-prompt-dialog > form > input[type="button"] {
+    border: 1px solid #888888;
+    font-family: trebuchet MS, helvetica, sans-serif;
+    font-size: 0.8em;
+    font-weight: bold;
 }
+
+.wmd-wrapper {
+    padding-right: 0 !important;
+}
+
+.wmd-preview {
+    margin-top: 15px;
+    padding: 7px;
+    background: white;
+    line-height: 1.5em;
+    font-size: 1em;
+    border: 1px solid #a9a9a9;
+    border-radius: 5px;
+    box-sizing: border-box;
+}
+
+.wmd-preview:empty {
+    display: none;
+}
\ No newline at end of file
diff --git a/resources/pagedown/resources/adnomination.svg b/resources/pagedown/resources/adnomination.svg
new file mode 100644
index 0000000..f227a32
--- /dev/null
+++ b/resources/pagedown/resources/adnomination.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 512 512" id="Layer_1" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g><path d="M365,167.8H228.2c-5.7,0-10.4-4.7-10.4-10.4v-0.8c0-5.7,4.7-10.4,10.4-10.4H365c5.7,0,10.4,4.7,10.4,10.4    v0.8C375.5,163.1,370.8,167.8,365,167.8z" fill="#303A3F"/><path d="M365,228.8H153.9c-5.7,0-10.4-4.7-10.4-10.4v-0.8c0-5.7,4.7-10.4,10.4-10.4H365c5.7,0,10.4,4.7,10.4,10.4    v0.8C375.5,224.1,370.8,228.8,365,228.8z" fill="#303A3F"/><path d="M365,289.8H153.9c-5.7,0-10.4-4.7-10.4-10.4v-0.8c0-5.7,4.7-10.4,10.4-10.4H365c5.7,0,10.4,4.7,10.4,10.4    v0.8C375.5,285.1,370.8,289.8,365,289.8z" fill="#303A3F"/><path d="M365,350.9H153.9c-5.7,0-10.4-4.7-10.4-10.4v-0.8c0-5.7,4.7-10.4,10.4-10.4H365c5.7,0,10.4,4.7,10.4,10.4    v0.8C375.5,346.2,370.8,350.9,365,350.9z" fill="#303A3F"/><path d="M365,411.9H153.9c-5.7,0-10.4-4.7-10.4-10.4v-0.8c0-5.7,4.7-10.4,10.4-10.4H365c5.7,0,10.4,4.7,10.4,10.4    v0.8C375.5,407.2,370.8,411.9,365,411.9z" fill="#303A3F"/></g><path d="M392,43.5H179.2l38.6,51.4h144.7c27.2,0,49.5,22.3,49.5,49.5v269.3c0,27.2-22.3,49.5-49.5,49.5H154.4   c-27.2,0-49.5-22.3-49.5-49.5V150.9L65.3,98.4c-0.3,2.7-0.8,5.3-0.8,8v342.3c0,34.6,28.3,63,63,63H392c34.6,0,63-28.3,63-63V106.4   C454.9,71.8,426.6,43.5,392,43.5z" fill="#303A3F"/><g><path d="M125.5,149.8l68.3,25c3.6,1.3,6.5-0.7,6.3-4.6l-3.2-72.7c-0.1-1.5-0.5-2.9-1.3-4.3l0.1-0.1    c-0.1-0.2-0.3-0.4-0.4-0.6l-48.8-66.6l-16,11.7l44.1,60.2c1.8,2.4,1.2,5.8-1.2,7.6l-3.8,2.8c-2.4,1.8-5.8,1.2-7.6-1.2L118,46.9    l-15.8,11.6l44.4,60.7c1.6,2.2,1.1,5.2-1.1,6.8l-4.7,3.5c-2.2,1.6-5.2,1.1-6.8-1.1L89.6,67.6L72.6,80l47.2,64.4    C121,146.8,123,148.9,125.5,149.8z M138,141.9l47.6-34.9c2.9-2.1,7.6,1.3,7.8,5.8l1.1,39.7c-0.7,0.2-1.4,0.3-2,0.7l-14.2,10.4    c-0.1,0.1-0.3,0-0.3,0.1l-36.8-12.6C137,149.6,135.1,144,138,141.9z" fill="#303A3F"/><path d="M68.9,75.3l-5.7-7.7c-10.5-14.3-7.3-34.5,7-45l22-16.1c14.3-10.5,34.5-7.3,45,7l5.7,7.7L68.9,75.3z" fill="#303A3F"/></g></g></svg>
\ No newline at end of file
diff --git a/resources/pagedown/resources/blockquote.svg b/resources/pagedown/resources/blockquote.svg
new file mode 100644
index 0000000..d5d4ab8
--- /dev/null
+++ b/resources/pagedown/resources/blockquote.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 48 48" height="48px" id="Layer_3" version="1.1" viewBox="0 0 48 48" width="48px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M0,28.375h12.67c-0.062,3.31-1.338,6.313-3.403,8.6c-0.945,0.892-1.982,1.408-2.879,1.706   c-1.1,0.328-2.26,0.396-2.883,0.408H0v2.286h8.75v-0.003c7.205-0.032,13.043-5.816,13.177-12.997H22v-22H0V28.375z" fill="#241F20"/><path d="M26,6.375v22h12.74c0,2.991-1,5.742-2.674,7.956c-0.839,1.089-1.828,1.792-2.761,2.233   c-0.008,0.004-0.016,0.008-0.023,0.012c-0.139,0.065-0.274,0.122-0.409,0.176c-1.514,0.557-3.915,0.587-3.915,0.587H26v2.286h8.75   c7.317,0,13.25-5.933,13.25-13.25v-22H26z" fill="#241F20"/></g></svg>
\ No newline at end of file
diff --git a/resources/pagedown/resources/bold.svg b/resources/pagedown/resources/bold.svg
new file mode 100644
index 0000000..0f24e7b
--- /dev/null
+++ b/resources/pagedown/resources/bold.svg
@@ -0,0 +1,3 @@
+<svg width="8px" height="8px" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 0v1c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1v1h5.5c1.38 0 2.5-1.12 2.5-2.5 0-1-.59-1.85-1.44-2.25.27-.34.44-.78.44-1.25 0-1.1-.89-2-2-2h-5zm3 1h1c.55 0 1 .45 1 1s-.45 1-1 1h-1v-2zm0 3h1.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-1.5v-3z" />
+</svg>
\ No newline at end of file
diff --git a/resources/pagedown/resources/code.svg b/resources/pagedown/resources/code.svg
new file mode 100644
index 0000000..e93020f
--- /dev/null
+++ b/resources/pagedown/resources/code.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 31.94C416 21.75 408.1 0 384.1 0c-13.98 0-26.87 9.072-30.89 23.18l-128 448c-.8404 2.935-1.241 5.892-1.241 8.801C223.1 490.3 232 512 256 512c13.92 0 26.73-9.157 30.75-23.22l128-448C415.6 37.81 416 34.85 416 31.94zM176 143.1c0-18.28-14.95-32-32-32c-8.188 0-16.38 3.125-22.62 9.376l-112 112C3.125 239.6 0 247.8 0 255.1S3.125 272.4 9.375 278.6l112 112C127.6 396.9 135.8 399.1 144 399.1c17.05 0 32-13.73 32-32c0-8.188-3.125-16.38-9.375-22.63L77.25 255.1l89.38-89.38C172.9 160.3 176 152.2 176 143.1zM640 255.1c0-8.188-3.125-16.38-9.375-22.63l-112-112C512.4 115.1 504.2 111.1 496 111.1c-17.05 0-32 13.73-32 32c0 8.188 3.125 16.38 9.375 22.63l89.38 89.38l-89.38 89.38C467.1 351.6 464 359.8 464 367.1c0 18.28 14.95 32 32 32c8.188 0 16.38-3.125 22.62-9.376l112-112C636.9 272.4 640 264.2 640 255.1z"/></svg>
\ No newline at end of file
diff --git a/resources/pagedown/resources/heading.svg b/resources/pagedown/resources/heading.svg
new file mode 100644
index 0000000..0e5df3e
--- /dev/null
+++ b/resources/pagedown/resources/heading.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="1792" viewBox="0 0 1792 1792" width="1792" xmlns="http://www.w3.org/2000/svg"><path d="M1682 1664q-44 0-132.5-3.5t-133.5-3.5q-44 0-132 3.5t-132 3.5q-24 0-37-20.5t-13-45.5q0-31 17-46t39-17 51-7 45-15q33-21 33-140l-1-391q0-21-1-31-13-4-50-4h-675q-38 0-51 4-1 10-1 31l-1 371q0 142 37 164 16 10 48 13t57 3.5 45 15 20 45.5q0 26-12.5 48t-36.5 22q-47 0-139.5-3.5t-138.5-3.5q-43 0-128 3.5t-127 3.5q-23 0-35.5-21t-12.5-45q0-30 15.5-45t36-17.5 47.5-7.5 42-15q33-23 33-143l-1-57v-813q0-3 .5-26t0-36.5-1.5-38.5-3.5-42-6.5-36.5-11-31.5-16-18q-15-10-45-12t-53-2-41-14-18-45q0-26 12-48t36-22q46 0 138.5 3.5t138.5 3.5q42 0 126.5-3.5t126.5-3.5q25 0 37.5 22t12.5 48q0 30-17 43.5t-38.5 14.5-49.5 4-43 13q-35 21-35 160l1 320q0 21 1 32 13 3 39 3h699q25 0 38-3 1-11 1-32l1-320q0-139-35-160-18-11-58.5-12.5t-66-13-25.5-49.5q0-26 12.5-48t37.5-22q44 0 132 3.5t132 3.5q43 0 129-3.5t129-3.5q25 0 37.5 22t12.5 48q0 30-17.5 44t-40 14.5-51.5 3-44 12.5q-35 23-35 161l1 943q0 119 34 140 16 10 46 13.5t53.5 4.5 41.5 15.5 18 44.5q0 26-12 48t-36 22z"/></svg>
\ No newline at end of file
diff --git a/resources/pagedown/resources/hr.svg b/resources/pagedown/resources/hr.svg
new file mode 100644
index 0000000..8a49e34
--- /dev/null
+++ b/resources/pagedown/resources/hr.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M1 1h2v2H1V1zm0 4h2v2H1V5zm0 4h18v2H1V9zm0 4h2v2H1v-2zm0 4h2v2H1v-2zM5 1h2v2H5V1zm0 16h2v2H5v-2zM9 1h2v2H9V1zm0 4h2v2H9V5zm0 8h2v2H9v-2zm0 4h2v2H9v-2zm4-16h2v2h-2V1zm0 16h2v2h-2v-2zm4-16h2v2h-2V1zm0 4h2v2h-2V5zm0 8h2v2h-2v-2zm0 4h2v2h-2v-2z"/></svg>
\ No newline at end of file
diff --git a/resources/pagedown/resources/image.svg b/resources/pagedown/resources/image.svg
new file mode 100644
index 0000000..2deff04
--- /dev/null
+++ b/resources/pagedown/resources/image.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="18px" version="1.1" viewBox="0 0 18 18" width="18px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"><g fill="#000000" id="Core" transform="translate(-171.000000, -171.000000)"><g id="drive-image" transform="translate(171.000000, 171.000000)"><path d="M18,16 L18,2 C18,0.9 17.1,0 16,0 L2,0 C0.9,0 0,0.9 0,2 L0,16 C0,17.1 0.9,18 2,18 L16,18 C17.1,18 18,17.1 18,16 L18,16 Z M5.5,10.5 L8,13.5 L11.5,9 L16,15 L2,15 L5.5,10.5 L5.5,10.5 Z" id="Shape"/></g></g></g></svg>
\ No newline at end of file
diff --git a/resources/pagedown/resources/italic.svg b/resources/pagedown/resources/italic.svg
new file mode 100644
index 0000000..7bb8446
--- /dev/null
+++ b/resources/pagedown/resources/italic.svg
@@ -0,0 +1,49 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+   width="525.142px" height="525.142px" viewBox="0 0 525.142 525.142" style="enable-background:new 0 0 525.142 525.142;"
+   xml:space="preserve">
+<g>
+  <g>
+    <path d="M375.54,0.244c-13.336,1.689-26.83,2.87-40.496,3.556c-15.741,0.796-27.987,1.188-36.727,1.188
+      c-10.067,0-22.087-0.514-36.071-1.579c-12.228-0.918-25.282-2.05-39.162-3.378c-3.366-0.324-6.958,2.014-7.803,5.288
+      c-1.053,4.088-1.573,7.418-1.573,9.976c0,6.873,4.804,11.095,14.425,12.68c12.681,1.579,20.661,5.025,23.941,10.306
+      c3.28,5.282,4.039,12.675,2.295,22.191l-64.266,403.394c-1.756,10.043-5.478,17.576-11.157,22.589
+      c-5.686,5.024-14.21,8.599-25.575,10.697c-4.816,1.065-7.987,2.662-9.504,4.755c-1.542,2.118-2.295,5.282-2.295,9.518
+      c0,2.563,0.245,5.324,0.728,8.28c0.545,3.335,3.966,5.697,7.326,5.354c12.748-1.31,25.257-2.424,37.528-3.329
+      c14.198-1.065,25.673-1.579,34.425-1.579c10.055,0,22.957,0.514,38.697,1.579c13.764,0.924,27.681,2.05,41.781,3.384
+      c3.366,0.318,6.787-2.068,7.332-5.403c0.483-2.956,0.729-5.71,0.729-8.28c0-7.394-4.162-12.148-12.461-14.272
+      c-11.806-2.638-19.896-5.942-24.266-9.901c-4.376-3.96-5.686-11.225-3.935-21.794L332.418,62.05
+      c1.738-10.563,5.129-18.225,10.165-22.98c5.019-4.755,13.66-8.182,25.906-10.306c6.12-1.053,10.172-2.638,12.13-4.755
+      c1.971-2.105,2.95-5.275,2.95-9.511c0-2.693-0.264-5.71-0.802-9.051C382.241,2.111,378.894-0.184,375.54,0.244z"/>
+  </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/resources/pagedown/resources/latex-display.svg b/resources/pagedown/resources/latex-display.svg
new file mode 100644
index 0000000..5851f87
--- /dev/null
+++ b/resources/pagedown/resources/latex-display.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+<g><path d="M195.3,425.6l-0.6-87.8h129.8l8-58.1c6.6-65.4,28.7-125.8,66.4-181.2C436.5,43,499.1,13.5,586.7,10c40.2,1.9,69.9,8.3,89.2,19.1l-21,81.4c-19.5-8-42.2-12.2-68.2-12.6c-44.1,1.5-77.1,19-99,52.7c-21.8,33.7-35.2,74.6-40,122.8l-8,64.4h149.6v87.8H423.4l-31.1,273.9c-9,88.5-30.2,158.7-63.7,210.7c-33.5,52-87.4,78.6-161.8,79.8c-44.1-0.9-77.8-8.3-101.1-22.3l20.7-81.6c21.6,10.3,45.8,15.2,72.6,14.8c39.4-0.2,68.5-18.2,87.2-54c18.7-35.8,31.5-88,38.6-156.7l29.8-264.5H195.3z M681.1,718.6l-12.5-61.8l-13.3-55.3L644,567.9l-12.6-11.7l-6.7,1.8l-15,14.1l-21.3,31.4L544,586.2c16.9-27.4,33.2-47.9,48.8-61.5c15.6-13.5,34-20.3,73.3-20.3l38.8,11.6l23.7,40.8l9.9,40l5.6,33.7L825,527.1c9.2-8.3,18-14.2,26.4-17.6c8.4-3.4,19.6-5.1,33.7-5.1c3.1,0,41.2,1.5,49.3,4.6l-16.1,69.6H900h-10h-18.2c-1-6.5-3-11.1-6.2-13.8l-7.3,4l-17.2,16.4l-81.8,102.9l13.8,67.5l11.5,47.3l8.8,29.9l8.3,16.4l11.2,8.2c3.9-1.5,7.7-3.9,11.5-7.2c6.8-6,16.7-19.5,29.6-40.6l44.4,17.3c-18.7,30-35.7,51.1-50.9,63.4c-15.2,12.3-33.3,18.4-54.2,18.4c-3,0-39.6-2.1-47.7-6.3c-8-4.2-15-10.9-21-20.2c-5.9-9.2-11.2-23.6-15.7-43.1c-6.1-25.5-10.5-46.6-13.1-63.4L610,886c-9,8.5-17.7,14.4-26.2,17.8c-8.5,3.4-19.7,5.1-33.7,5.1c-3.1,0-41.1-1.5-49.2-4.6l16.1-69.6h46.5c0.9,6.5,3,11.1,6.1,13.8l1.7-0.4l17.9-15.1L681.1,718.6z"/></g>
+</svg>
\ No newline at end of file
diff --git a/resources/pagedown/resources/latex.svg b/resources/pagedown/resources/latex.svg
new file mode 100644
index 0000000..178238d
--- /dev/null
+++ b/resources/pagedown/resources/latex.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 64 64" height="64px" id="Layer_1" version="1.1" viewBox="0 0 64 64" width="64px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M45.73,64H34.752c-0.715,0-1.295-0.173-1.738-0.52s-0.794-0.758-1.056-1.234l-9.484-16.564  c-0.174,0.478-0.369,0.887-0.584,1.234l-8.835,15.33c-0.304,0.434-0.661,0.834-1.072,1.201C11.572,63.816,11.041,64,10.391,64H0.127  L15.36,39.641L0.712,16.675H11.69c0.714,0,1.24,0.093,1.576,0.276c0.335,0.185,0.634,0.493,0.893,0.926l9.42,15.948  c0.108-0.28,0.232-0.552,0.374-0.812c0.14-0.262,0.297-0.531,0.471-0.813l8.25-14.161c0.305-0.477,0.622-0.823,0.958-1.04  c0.336-0.217,0.752-0.325,1.251-0.325h10.524L30.562,39.186L45.73,64z"/><path d="M61.84,23.86c0.667,0,1.193,0.183,1.58,0.55c0.387,0.366,0.58,0.85,0.58,1.45v3.6H43.521v-2c0-0.387,0.079-0.8,0.239-1.24  c0.16-0.439,0.44-0.84,0.84-1.2l8.4-8.46c0.721-0.72,1.347-1.406,1.881-2.06c0.533-0.653,0.973-1.297,1.319-1.93  c0.347-0.634,0.606-1.267,0.78-1.9c0.173-0.633,0.26-1.304,0.26-2.01c0-1.16-0.277-2.05-0.83-2.67  c-0.553-0.62-1.396-0.93-2.529-0.93c-0.92,0-1.697,0.243-2.33,0.73c-0.634,0.487-1.07,1.09-1.311,1.81  c-0.279,0.733-0.646,1.22-1.1,1.46c-0.453,0.24-1.1,0.293-1.94,0.16l-3.28-0.58c0.213-1.453,0.623-2.72,1.23-3.8  c0.606-1.08,1.359-1.98,2.26-2.7c0.9-0.72,1.93-1.257,3.09-1.61C51.66,0.177,52.906,0,54.24,0c1.439,0,2.736,0.21,3.891,0.63  c1.152,0.42,2.137,1.003,2.949,1.75c0.813,0.747,1.438,1.637,1.87,2.67C63.383,6.083,63.6,7.22,63.6,8.46  c0,1.066-0.149,2.054-0.449,2.96c-0.301,0.907-0.71,1.771-1.23,2.59c-0.52,0.82-1.123,1.613-1.81,2.38  c-0.687,0.768-1.417,1.544-2.19,2.33l-5.699,5.84c0.732-0.227,1.459-0.399,2.18-0.52c0.72-0.12,1.387-0.18,2-0.18H61.84z"/></svg>
\ No newline at end of file
diff --git a/resources/pagedown/resources/link.svg b/resources/pagedown/resources/link.svg
new file mode 100644
index 0000000..c33aea7
--- /dev/null
+++ b/resources/pagedown/resources/link.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg id="Layer_2" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M21.03986,0.5033c-2.79645,0-5.42261,1.08527-7.3949,3.05811L12.1192,5.08759   c-0.36615,0.36615-0.56726,0.85254-0.56726,1.37006c0,0.51855,0.20154,1.00488,0.56775,1.37012   c0.73279,0.73236,2.00873,0.73236,2.7406,0l1.52527-1.52618c2.5661-2.56512,6.74207-2.56421,9.30817,0   c1.24518,1.24518,1.93066,2.89813,1.93066,4.6543c0,1.7561-0.68597,3.40912-1.93115,4.6543l-1.52576,1.52618   c-0.36615,0.36621-0.5672,0.85254-0.5672,1.37012c0,0.51849,0.20154,1.00482,0.56769,1.37006   c0.36621,0.36615,0.85254,0.56769,1.37012,0.56769c0.51752,0,1.00433-0.20154,1.37054-0.56769l1.52527-1.52618   C30.41095,16.3728,31.5,13.74713,31.5,10.95587s-1.08905-5.41693-3.0661-7.39447C26.46204,1.58856,23.83636,0.5033,21.03986,0.5033   z"/><path d="M10.9516,31.49664c2.79602,0,5.42212-1.08618,7.39496-3.05804l1.5257-1.52618   c0.36621-0.36621,0.56726-0.85254,0.56726-1.37012c0-0.51849-0.20154-1.00482-0.56769-1.37006   c-0.73285-0.73334-2.00879-0.73145-2.74066,0l-1.52527,1.52618c-2.56415,2.56604-6.74066,2.56702-9.30859,0   c-2.56604-2.56604-2.56604-6.74255,0-9.30859l1.52618-1.52625c0.75555-0.755,0.75555-1.98511,0-2.74011   c-0.75507-0.75507-1.98511-0.75507-2.74017,0l-1.52618,1.52618c-4.07617,4.07715-4.07617,10.71179,0,14.78894   C5.52899,30.41046,8.15515,31.49664,10.9516,31.49664z"/><path d="M9.41644,22.57977c0.36615,0.36621,0.85248,0.56775,1.37006,0.56775c0.51807,0,1.00482-0.20154,1.37006-0.56775   l10.41852-10.41943c0.36615-0.36615,0.56769-0.85248,0.56769-1.37006s-0.20154-1.00391-0.56769-1.37012   c-0.73187-0.73236-2.00922-0.73236-2.74017,0L9.41644,19.8396c-0.36621,0.36621-0.56775,0.85254-0.56775,1.37012   S9.05023,22.21362,9.41644,22.57977z"/></g></svg>
\ No newline at end of file
diff --git a/resources/pagedown/resources/olist.svg b/resources/pagedown/resources/olist.svg
new file mode 100644
index 0000000..7fa7cf6
--- /dev/null
+++ b/resources/pagedown/resources/olist.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M6.0001 2.75C6.0001 2.39577 5.75227 2.08984 5.40576 2.01633C5.06011 1.943 4.7103 2.12086 4.5658 2.44303L4.56426 2.44637C4.56226 2.45067 4.55842 2.45881 4.55275 2.47042C4.5414 2.49366 4.52282 2.53055 4.49704 2.57808C4.44527 2.67356 4.36584 2.80945 4.2594 2.96248C4.04176 3.27537 3.73538 3.62488 3.35275 3.86391C3.00144 4.08336 2.89456 4.54605 3.11401 4.89735C3.33346 5.24866 3.79615 5.35554 4.14746 5.13609C4.27205 5.05826 4.38956 4.97473 4.5001 4.88765V7.25C4.5001 7.66421 4.83589 8 5.2501 8C5.66431 8 6.0001 7.66421 6.0001 7.25V2.75Z" fill="#212121"/><path d="M19.4995 18H10.9995L10.8829 18.0067C10.3856 18.0645 9.99951 18.4872 9.99951 19C9.99951 19.5523 10.4472 20 10.9995 20H19.4995L19.6161 19.9933C20.1135 19.9355 20.4995 19.5128 20.4995 19C20.4995 18.4477 20.0518 18 19.4995 18Z" fill="#212121"/><path d="M19.4995 11.5H10.9995L10.8829 11.5067C10.3856 11.5645 9.99951 11.9872 9.99951 12.5C9.99951 13.0523 10.4472 13.5 10.9995 13.5H19.4995L19.6161 13.4933C20.1135 13.4355 20.4995 13.0128 20.4995 12.5C20.4995 11.9477 20.0518 11.5 19.4995 11.5Z" fill="#212121"/><path d="M19.4995 5H10.9995L10.8829 5.00673C10.3856 5.06449 9.99951 5.48716 9.99951 6C9.99951 6.55228 10.4472 7 10.9995 7H19.4995L19.6161 6.99327C20.1135 6.93551 20.4995 6.51284 20.4995 6C20.4995 5.44772 20.0518 5 19.4995 5Z" fill="#212121"/><path d="M5.15093 10.5199C4.84957 10.4667 4.47444 10.5863 4.28031 10.7804C3.98741 11.0733 3.51253 11.0733 3.21965 10.7804C2.92677 10.4874 2.92678 10.0126 3.21969 9.71969C3.77556 9.16385 4.65044 8.9084 5.41157 9.0427C5.809 9.11283 6.2173 9.2971 6.52722 9.64834C6.8426 10.0058 7 10.4727 7 11C7 11.6195 6.72895 12.08 6.39406 12.4205C6.1163 12.7029 5.76315 12.931 5.48826 13.1086L5.40874 13.1601C5.21348 13.287 5.05428 13.397 4.92686 13.5H6.25C6.66421 13.5 7 13.8358 7 14.25C7 14.6642 6.6642 15 6.24999 15H3.75C3.33579 15 3 14.6642 3 14.25C3 12.9364 3.98385 12.2971 4.57505 11.913L4.63522 11.8739C4.95259 11.6677 5.16843 11.5275 5.32469 11.3686C5.45855 11.2325 5.5 11.1306 5.5 11C5.5 10.7774 5.43865 10.6818 5.40247 10.6408C5.36083 10.5936 5.28475 10.5435 5.15093 10.5199Z" fill="#212121"/><path d="M2.96967 21.2803C2.96967 21.2803 3.06251 21.3641 2.97426 21.2849L2.97962 21.2901L2.9929 21.3028C3.00287 21.3121 3.01509 21.3233 3.02956 21.3359C3.05848 21.3612 3.09653 21.3927 3.14375 21.4281C3.2381 21.4989 3.36996 21.586 3.53959 21.6708C3.88131 21.8417 4.37043 22 5 22C5.63921 22 6.19596 21.8186 6.60132 21.4605C7.00922 21.1001 7.21163 20.6032 7.19553 20.101C7.18219 19.6846 7.02903 19.3053 6.76986 19C7.02903 18.6947 7.18219 18.3154 7.19553 17.899C7.21163 17.3968 7.00922 16.8999 6.60132 16.5395C6.19596 16.1814 5.63921 16 5 16C4.37043 16 3.88131 16.1583 3.53959 16.3292C3.36996 16.414 3.2381 16.5011 3.14375 16.5719C3.09653 16.6073 3.05848 16.6388 3.02956 16.6641C3.01509 16.6767 3.00287 16.6879 2.9929 16.6972L2.97962 16.7099L2.97423 16.7151L2.97189 16.7175L2.97091 16.7185L2.96967 16.7197C2.67678 17.0126 2.67678 17.4874 2.96967 17.7803C3.2586 18.0693 3.72462 18.0732 4.01834 17.7921C4.0217 17.7892 4.03018 17.782 4.04375 17.7719C4.0744 17.7489 4.13004 17.711 4.21041 17.6708C4.36869 17.5917 4.62957 17.5 5 17.5C5.36079 17.5 5.53601 17.5999 5.60812 17.6636C5.67768 17.7251 5.69823 17.7907 5.6963 17.851C5.69423 17.9155 5.66403 18.0027 5.57278 18.0818C5.4845 18.1584 5.30962 18.25 5 18.25C4.58579 18.25 4.25 18.5858 4.25 19C4.25 19.4142 4.58579 19.75 5 19.75C5.30962 19.75 5.4845 19.8416 5.57278 19.9182C5.66403 19.9973 5.69423 20.0845 5.6963 20.149C5.69823 20.2093 5.67768 20.2749 5.60812 20.3364C5.53601 20.4001 5.36079 20.5 5 20.5C4.62957 20.5 4.36869 20.4083 4.21041 20.3292C4.13004 20.289 4.0744 20.2511 4.04375 20.2281C4.03018 20.218 4.0217 20.2108 4.01834 20.2079C3.72462 19.9268 3.2586 19.9307 2.96967 20.2197C2.67678 20.5126 2.67678 20.9874 2.96967 21.2803ZM2.97189 16.7175L2.97091 16.7185C2.9776 16.7129 3.17182 16.5515 2.97189 16.7175Z" fill="#212121"/></svg>
\ No newline at end of file
diff --git a/resources/pagedown/resources/redo.svg b/resources/pagedown/resources/redo.svg
new file mode 100644
index 0000000..7175310
--- /dev/null
+++ b/resources/pagedown/resources/redo.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="48px" id="svg11300" width="48px" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs id="defs3"><linearGradient id="linearGradient2240"><stop id="stop2242" offset="0" style="stop-color:#99b00b;stop-opacity:1;"/><stop id="stop2244" offset="1" style="stop-color:#99b00b;stop-opacity:0;"/></linearGradient><linearGradient id="linearGradient2232"><stop id="stop2234" offset="0" style="stop-color:#788600;stop-opacity:1;"/><stop id="stop2236" offset="1" style="stop-color:#788600;stop-opacity:0;"/></linearGradient><linearGradient id="linearGradient4991"><stop id="stop4993" offset="0" style="stop-color:#ffffff;stop-opacity:1;"/><stop id="stop4995" offset="1" style="stop-color:#ffffff;stop-opacity:0;"/></linearGradient><linearGradient id="linearGradient8662"><stop id="stop8664" offset="0" style="stop-color:#000000;stop-opacity:1;"/><stop id="stop8666" offset="1" style="stop-color:#000000;stop-opacity:0;"/></linearGradient><radialGradient cx="24.837126" cy="36.421127" fx="24.837126" fy="36.421127" gradientTransform="matrix(1.000000,0.000000,0.000000,0.536723,-5.825329e-14,16.87306)" gradientUnits="userSpaceOnUse" id="radialGradient8668" r="15.644737" xlink:href="#linearGradient8662"/><linearGradient id="linearGradient2187"><stop id="stop2189" offset="0" style="stop-color:#ffffff;stop-opacity:1;"/><stop id="stop2191" offset="1" style="stop-color:#ffffff;stop-opacity:0;"/></linearGradient><linearGradient gradientTransform="matrix(1.813471e-16,-1.171926,1.171926,1.813471e-16,1.782801,54.10111)" gradientUnits="userSpaceOnUse" id="linearGradient1764" x1="17.060806" x2="12.624337" xlink:href="#linearGradient2187" y1="11.39502" y2="12.583769"/><radialGradient cx="16.563837" cy="11.132236" fx="16.563837" fy="11.132236" gradientTransform="matrix(-1.290127e-2,1.685197,1.713082,1.311475e-2,-1.041499,-10.11571)" gradientUnits="userSpaceOnUse" id="radialGradient4997" r="19.0625" xlink:href="#linearGradient4991"/><linearGradient gradientUnits="userSpaceOnUse" id="linearGradient2238" x1="33" x2="31.5" xlink:href="#linearGradient2232" y1="35.75" y2="42.5"/><linearGradient gradientUnits="userSpaceOnUse" id="linearGradient2246" x1="33" x2="31.5" xlink:href="#linearGradient2240" y1="35.75" y2="42.5"/></defs><g id="layer1"><path d="M 40.481863 36.421127 A 15.644737 8.3968935 0 1 1  9.1923885,36.421127 A 15.644737 8.3968935 0 1 1  40.481863 36.421127 z" id="path8660" style="opacity:0.14117647;color:#000000;fill:url(#radialGradient8668);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" transform="matrix(1.489736,0.000000,0.000000,-1.001252,-12.64716,75.31260)"/><path d="M 38.37476,45.034369 C -1.6510486,46.355509 4.6747954,12.29355 25.49479,12.49765 L 25.49479,3.1222396 L 42.143271,17.708819 L 25.49479,33.006349 C 25.49479,33.006349 25.49479,23.337969 25.49479,23.337969 C 11.43168,22.751999 7.3172614,44.770549 38.37476,45.034369 z " id="path1432" style="opacity:1;color:#000000;fill:url(#linearGradient2246);fill-opacity:1.0;fill-rule:nonzero;stroke:url(#linearGradient2238);stroke-width:1.00000012;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:block;overflow:visible"/><path d="M 16.92492,39.315519 C 5.2018204,33.235892 8.7371274,13.087489 26.5085,13.549959 L 26.5085,5.4508678 C 26.5085,5.4508678 40.556238,17.714589 40.556238,17.714589 L 26.5085,30.658617 C 26.5085,30.658617 26.5085,22.380979 26.5085,22.380979 C 11.66865,22.032709 12.34859,35.138579 16.92492,39.315519 z " id="path2177" style="opacity:0.69886361;color:#000000;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:url(#linearGradient1764);stroke-width:0.9999997;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:block;overflow:visible"/><path d="M 26.036989,4.5686095 L 36.723727,14.798241 C 29.786227,14.79824 32.036989,23.735424 25.911989,26.610424 L 25.974489,22.943609 C 10.786989,22.881109 11.661989,38.443609 22.724489,42.693609 C 3.6363414,37.811681 6.2869904,13.381109 25.911989,12.88111 L 26.036989,4.5686095 z " id="path4989" style="opacity:0.49431817;color:#000000;fill:url(#radialGradient4997);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.9999997;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"/></g></svg>
\ No newline at end of file
diff --git a/resources/pagedown/resources/spoiler.svg b/resources/pagedown/resources/spoiler.svg
new file mode 100644
index 0000000..af385bc
--- /dev/null
+++ b/resources/pagedown/resources/spoiler.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg data-name="Layer 1" id="Layer_1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title/><path d="M27.37,2H14.05a8.07,8.07,0,0,1,2.77,6.1,7.91,7.91,0,0,1-.63,3.12h7.48a.94.94,0,1,1,0,1.87H15.1c-.16.2-.34.4-.52.59a8.12,8.12,0,0,1-5.85,2.51,2.17,2.17,0,0,1-.36,0V28a2,2,0,0,0,2,2h17a2,2,0,0,0,2-2V4A2,2,0,0,0,27.37,2Zm-3.7,18.78h-9.6a.94.94,0,1,1,0-1.87h9.6a.94.94,0,1,1,0,1.87Zm0-3.85h-9.6a.93.93,0,1,1,0-1.86h9.6a.93.93,0,1,1,0,1.86Z"/><path d="M8.73,14.19a6.07,6.07,0,0,0,4.41-1.9A5.61,5.61,0,0,0,14,11.23a6,6,0,0,0,.87-3.13,6.1,6.1,0,0,0-5-6h0a6,6,0,0,0-1-.09,6.09,6.09,0,0,0-.36,12.17A2.17,2.17,0,0,0,8.73,14.19Zm-3-6.09a1,1,0,0,1,1-1h4a1,1,0,0,1,0,2h-4A1,1,0,0,1,5.73,8.1Z"/></svg>
\ No newline at end of file
diff --git a/resources/pagedown/resources/ulist.svg b/resources/pagedown/resources/ulist.svg
new file mode 100644
index 0000000..5b1b60a
--- /dev/null
+++ b/resources/pagedown/resources/ulist.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M3.25 7C3.94036 7 4.5 6.44036 4.5 5.75C4.5 5.05964 3.94036 4.5 3.25 4.5C2.55964 4.5 2 5.05964 2 5.75C2 6.44036 2.55964 7 3.25 7ZM7 5.75C7 5.33579 7.33579 5 7.75 5H17.25C17.6642 5 18 5.33579 18 5.75C18 6.16421 17.6642 6.5 17.25 6.5H7.75C7.33579 6.5 7 6.16421 7 5.75ZM7.75 10C7.33579 10 7 10.3358 7 10.75C7 11.1642 7.33579 11.5 7.75 11.5H17.25C17.6642 11.5 18 11.1642 18 10.75C18 10.3358 17.6642 10 17.25 10H7.75ZM7.75 15C7.33579 15 7 15.3358 7 15.75C7 16.1642 7.33579 16.5 7.75 16.5H17.25C17.6642 16.5 18 16.1642 18 15.75C18 15.3358 17.6642 15 17.25 15H7.75ZM4.5 10.75C4.5 11.4404 3.94036 12 3.25 12C2.55964 12 2 11.4404 2 10.75C2 10.0596 2.55964 9.5 3.25 9.5C3.94036 9.5 4.5 10.0596 4.5 10.75ZM3.25 17C3.94036 17 4.5 16.4404 4.5 15.75C4.5 15.0596 3.94036 14.5 3.25 14.5C2.55964 14.5 2 15.0596 2 15.75C2 16.4404 2.55964 17 3.25 17Z" fill="#212121"/></svg>
\ No newline at end of file
diff --git a/resources/pagedown/resources/undo.svg b/resources/pagedown/resources/undo.svg
new file mode 100644
index 0000000..957479e
--- /dev/null
+++ b/resources/pagedown/resources/undo.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="48px" id="svg11300" width="48px" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs id="defs3"><linearGradient id="linearGradient2326"><stop id="stop2328" offset="0" style="stop-color:#ffffff;stop-opacity:1;"/><stop id="stop2330" offset="1" style="stop-color:#ffffff;stop-opacity:0;"/></linearGradient><linearGradient id="linearGradient2316"><stop id="stop2318" offset="0" style="stop-color:#c4a000;stop-opacity:1;"/><stop id="stop2320" offset="1" style="stop-color:#c4a000;stop-opacity:0;"/></linearGradient><linearGradient id="linearGradient2308"><stop id="stop2310" offset="0" style="stop-color:#edd400;stop-opacity:1;"/><stop id="stop2312" offset="1" style="stop-color:#edd400;stop-opacity:0;"/></linearGradient><linearGradient id="linearGradient8662"><stop id="stop8664" offset="0" style="stop-color:#000000;stop-opacity:1;"/><stop id="stop8666" offset="1" style="stop-color:#000000;stop-opacity:0;"/></linearGradient><radialGradient cx="24.837126" cy="36.421127" fx="24.837126" fy="36.421127" gradientTransform="matrix(1.000000,0.000000,0.000000,0.536723,-6.227265e-14,16.87306)" gradientUnits="userSpaceOnUse" id="radialGradient8668" r="15.644737" xlink:href="#linearGradient8662"/><linearGradient id="linearGradient2187"><stop id="stop2189" offset="0" style="stop-color:#ffffff;stop-opacity:1;"/><stop id="stop2191" offset="1" style="stop-color:#ffffff;stop-opacity:0;"/></linearGradient><linearGradient gradientTransform="matrix(-1.813471e-16,-1.171926,-1.171926,1.813471e-16,46.17440,54.10111)" gradientUnits="userSpaceOnUse" id="linearGradient1764" x1="17.060806" x2="12.624337" xlink:href="#linearGradient2187" y1="11.39502" y2="12.583769"/><linearGradient gradientUnits="userSpaceOnUse" id="linearGradient2314" x1="26.5" x2="26.25" xlink:href="#linearGradient2308" y1="34.25" y2="43.571831"/><linearGradient gradientUnits="userSpaceOnUse" id="linearGradient2322" x1="26.5" x2="26.25" xlink:href="#linearGradient2316" y1="34.25" y2="43.571831"/><radialGradient cx="15.09403" cy="13.282721" fx="15.09403" fy="13.282721" gradientTransform="matrix(2.496031,-1.151905e-16,1.061756e-16,2.300689,-25.12402,-17.82636)" gradientUnits="userSpaceOnUse" id="radialGradient2332" r="10.16466" xlink:href="#linearGradient2326"/></defs><g id="layer1"><path d="M 40.481863 36.421127 A 15.644737 8.3968935 0 1 1  9.1923885,36.421127 A 15.644737 8.3968935 0 1 1  40.481863 36.421127 z" id="path8660" style="opacity:0.14117647;color:#000000;fill:url(#radialGradient8668);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" transform="matrix(-1.489736,0.000000,0.000000,-1.001252,60.60436,75.31260)"/><path d="M 9.582441,45.034369 C 49.608249,46.355509 43.282405,12.29355 22.462411,12.49765 L 22.462411,3.1222396 L 5.8139298,17.708819 L 22.462411,33.006349 C 22.462411,33.006349 22.462411,23.337969 22.462411,23.337969 C 36.525521,22.751999 40.639939,44.770549 9.582441,45.034369 z " id="path1432" style="opacity:1;color:#000000;fill:url(#linearGradient2314);fill-opacity:1.0;fill-rule:nonzero;stroke:url(#linearGradient2322);stroke-width:1.00000012;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:block;overflow:visible"/><path d="M 31.032281,39.315519 C 42.75538,33.235892 39.220073,13.087489 21.448701,13.549959 L 21.448701,5.4508678 C 21.448701,5.4508678 7.4009628,17.714589 7.4009628,17.714589 L 21.448701,30.658617 C 21.448701,30.658617 21.448701,22.380979 21.448701,22.380979 C 36.288551,22.032709 35.608611,35.138579 31.032281,39.315519 z " id="path2177" style="opacity:0.69886361;color:#000000;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:url(#linearGradient1764);stroke-width:0.9999997;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:block;overflow:visible"/><path d="M 6.6291261,17.682797 L 12.28598,23.074486 C 18.561553,22.897709 15.733126,16.710525 26.958446,13.616933 L 22.008699,12.998214 L 21.92031,4.3361562 L 6.6291261,17.682797 z " id="path2324" style="opacity:0.51136364;color:#000000;fill:url(#radialGradient2332);fill-opacity:1.0;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"/></g></svg>
\ No newline at end of file
diff --git a/resources/pagedown/resources/user.svg b/resources/pagedown/resources/user.svg
new file mode 100644
index 0000000..8474bbd
--- /dev/null
+++ b/resources/pagedown/resources/user.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg id="line" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#bfffc8;}.cls-2{fill:#00df8e;}</style></defs><title/><path class="cls-1" d="M16,13.18a6.09,6.09,0,1,1,6.09-6.09A6.09,6.09,0,0,1,16,13.18ZM16,3a4.09,4.09,0,1,0,4.09,4.09A4.09,4.09,0,0,0,16,3Z"/><path class="cls-2" d="M23,31H9a5.46,5.46,0,0,1-5.45-5.45A10.56,10.56,0,0,1,14.09,15h3.82A10.56,10.56,0,0,1,28.45,25.55,5.46,5.46,0,0,1,23,31ZM14.09,17a8.55,8.55,0,0,0-8.54,8.55A3.46,3.46,0,0,0,9,29H23a3.46,3.46,0,0,0,3.45-3.45A8.55,8.55,0,0,0,17.91,17Z"/></svg>
\ No newline at end of file
diff --git a/resources/pagedown_widget.css b/resources/pagedown_widget.css
index 0dff7ee..0fcb70b 100644
--- a/resources/pagedown_widget.css
+++ b/resources/pagedown_widget.css
@@ -23,53 +23,108 @@
 }
 
 .wmd-button-row {
-    position: relative;
     margin: 10px 5px 5px;
     padding: 0;
-    height: 20px;
-    overflow-x: none;
-}
-
-.wmd-spacer {
-    width: 1px;
-    height: 20px;
-    margin-left: 14px;
-    position: absolute;
-    display: inline-block;
-    list-style: none;
 }
 
 .wmd-button {
+    display: inline-flex;
+    list-style: none;
     width: 20px;
     height: 20px;
+    background-repeat: no-repeat;
+    background-size: 14px 14px;
+    background-position: center;
+    border-radius: 3px;
+    cursor: pointer;
     padding-left: 2px;
     padding-right: 3px;
-    position: absolute;
-    display: inline-block;
-    list-style: none;
-    cursor: pointer;
 }
 
-.wmd-button > span {
-    background: url(pagedown/wmd-buttons.png) no-repeat 0 0;
+.wmd-bold-button {
+    background-image: url("pagedown/resources/bold.svg");
+}
+
+.wmd-italic-button {
+    background-image: url("pagedown/resources/italic.svg");
+}
+
+.wmd-latex-button {
+    background-image: url("pagedown/resources/latex.svg");
+}
+
+.wmd-latex-button-display {
+    background-image: url("pagedown/resources/latex-display.svg");
+}
+
+.wmd-link-button {
+    background-image: url("pagedown/resources/link.svg");
+}
+
+.wmd-user-reference-button {
+    background-image: url("pagedown/resources/user.svg");
+}
+
+.wmd-quote-button {
+    background-image: url("pagedown/resources/blockquote.svg");
+}
+
+.wmd-code-button {
+    background-image: url("pagedown/resources/code.svg");
+}
+
+.wmd-image-button {
+    background-image: url("pagedown/resources/image.svg");
+}
+
+.wmd-olist-button {
+    background-image: url("pagedown/resources/olist.svg");
+    background-size: 18px;
+}
+
+.wmd-ulist-button {
+    background-image: url("pagedown/resources/ulist.svg");
+    background-size: 18px;
+}
+
+.wmd-heading-button {
+    background-image: url("pagedown/resources/heading.svg");
+}
+
+.wmd-hr-button {
+    background-image: url("pagedown/resources/hr.svg");
+}
+
+.wmd-undo-button {
+    background-image: url("pagedown/resources/undo.svg");
+    background-size: 18px;
+}
+
+.wmd-redo-button {
+    background-image: url("pagedown/resources/redo.svg");
+    background-size: 18px;
+}
+
+.wmd-adnomination-button {
+    background-image: url("pagedown/resources/adnomination.svg");
+}
+
+.wmd-spoiler-button {
+    background-image: url("pagedown/resources/spoiler.svg");
+}
+
+.wmd-button-active:hover {
+    background-color: lightgray;
+}
+
+.wmd-button-inactive {
+    filter: invert(88%) sepia(1%) saturate(0%) hue-rotate(278deg) brightness(98%) contrast(91%);
+}
+
+.wmd-spacer
+{
+    display: inline-flex;
     width: 20px;
-    height: 20px;
-    display: inline-block;
-}
-
-.wmd-spacer1 {
-    left: 50px;
-    display: None;
-}
-
-.wmd-spacer2 {
-    left: 175px;
-    display: None;
-}
-
-.wmd-spacer3 {
-    left: 300px;
-    display: None;
 }
 
 .wmd-prompt-background {
@@ -115,27 +170,4 @@
 
 .wmd-preview:empty {
     display: none;
-}
-
-.wmd-preview h1, .wmd-preview h2, .wmd-preview h3, .wmd-preview h4, .wmd-preview h5, .wmd-preview h6 {
-    font-weight: bold !important;
-    margin-left: 0 !important;
-}
-
-.wmd-preview:not(.dmmd-preview) h1 {
-    font-size: 1.6em !important;
-    margin: 0 !important;
-    padding: 0 !important;
-}
-
-.wmd-preview:not(.dmmd-preview) h2 {
-    font-size: 1.4em !important
-}
-
-.wmd-preview:not(.dmmd-preview) h3 {
-    font-size: 1em !important
-}
-
-.wmd-preview:not(.dmmd-preview) h4, .wmd-preview:not(.dmmd-preview) h5, .wmd-preview:not(.dmmd-preview) h6 {
-    font-size: .9em !important
-}
+}
\ No newline at end of file