From fc6ac2e35c7ae4a2627d3ea6e391ca246c43ce4a Mon Sep 17 00:00:00 2001
From: Send_Nukez <erikjulius2701@yahoo.de>
Date: Thu, 11 Nov 2021 00:31:09 +0100
Subject: [PATCH] add markdown parsing to settings descriptions

---
 CHANGELOG.md             |  1 +
 package.json             |  1 +
 src/js/ConfigMenu.js     |  9 ++++++++-
 src/js/main.js           | 18 +++++++++---------
 src/styles/Markdown.scss |  3 +++
 src/styles/main.scss     |  1 +
 6 files changed, 23 insertions(+), 10 deletions(-)
 create mode 100644 src/styles/Markdown.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index be3085c..89176e8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 Added:
 - `Report Bugs` and `Changelog` buttons to `Settings > About`
+- Markdown parsing for settings descriptions
 
 Fixed:
 - Fonts looking blurry
\ No newline at end of file
diff --git a/package.json b/package.json
index 598b8dc..ec830e3 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "dependencies": {
         "chroma-js": "^2.1.2",
         "jquery": "^3.6.0",
+        "markdown-it": "^12.2.0",
         "moment": "^2.29.1",
         "node-vibrant": "3.1.4",
         "raw-loader": "^4.0.2"
diff --git a/src/js/ConfigMenu.js b/src/js/ConfigMenu.js
index 4e8b6ca..8778d1b 100644
--- a/src/js/ConfigMenu.js
+++ b/src/js/ConfigMenu.js
@@ -1,3 +1,5 @@
+import MarkdownIt from "markdown-it";
+
 import svgUndo from "../svg/undo.svg";
 
 const IGNORED_TYPES = ["button"];
@@ -57,6 +59,11 @@ export default class ConfigMenu {
         this.#config = {};
         this.configButton = new Spicetify.Menu.Item("Dribbblish Settings", false, () => this.open());
         this.configButton.register();
+        this.md = MarkdownIt({
+            html: true,
+            breaks: true,
+            linkify: true
+        });
 
         const container = document.createElement("div");
         container.id = "dribbblish-config";
@@ -108,7 +115,7 @@ export default class ConfigMenu {
                                 ${options.name}
                                 ${IGNORED_TYPES.includes(options.type) ? "" : /* html */ `<button aria-label="Reset" class="dribbblish-config-item-reset main-trackCreditsModal-closeBtn">${svgUndo}</button>`}
                             </h2>
-                            <label class="main-type-mesto" empty="${options.description == null}">${options.description.replace(/\n/g, "<br>")}</label>
+                            <label class="main-type-mesto" empty="${options.description == null}" markdown>${this.md.render(options.description)}</label>
                         </div>
                     `
                     : ""
diff --git a/src/js/main.js b/src/js/main.js
index 799dd8e..80aa65a 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -47,7 +47,7 @@ DribbblishShared.config.register({
     type: "number",
     key: "sidebarGapLeft",
     name: "Left Sidebar Gap Size",
-    description: "Set gap size between sidebar icons (in pixels).",
+    description: "Set gap size between sidebar icons (in `pixels`).",
     defaultValue: 5,
     data: {
         min: 0
@@ -60,7 +60,7 @@ DribbblishShared.config.register({
     type: "number",
     key: "sidebarGapRight",
     name: "Right Sidebar Gap Size",
-    description: "Set gap size between sidebar icons (in pixels).",
+    description: "Set gap size between sidebar icons (in `pixels`).",
     defaultValue: 32,
     data: {
         min: 0
@@ -120,7 +120,7 @@ waitForElement(["#main"], () => {
         type: "checkbox",
         key: "hideAds",
         name: "Hide Ads",
-        description: `Hide ads / premium features (see: <a href="https://github.com/Daksh777/SpotifyNoPremium">SpotifyNoPremium</a>)`,
+        description: `Hide ads / premium features (see: [SpotifyNoPremium](https://github.com/Daksh777/SpotifyNoPremium))`,
         defaultValue: false,
         onChange: (val) => $("#main").attr("hide-ads", val)
     });
@@ -347,14 +347,14 @@ waitForElement(["#main"], () => {
         key: "aboutDribbblishInfo",
         name: "Info",
         description: `
-            OS: ${capitalizeFirstLetter(Spicetify.Platform.PlatformData.os_name)} v${Spicetify.Platform.PlatformData.os_version}
-            Spotify: v${Spicetify.Platform.PlatformData.event_sender_context_information?.client_version_string ?? Spicetify.Platform.PlatformData.client_version_triple}
-            Spicetify: ${Spicetify.version != null ? `v${Spicetify.version}` : "<= v2.7.2"}
-            Dribbblish: v${process.env.DRIBBBLISH_VERSION}-${process.env.COMMIT_HASH}
+            OS: \`${capitalizeFirstLetter(Spicetify.Platform.PlatformData.os_name)} v${Spicetify.Platform.PlatformData.os_version}\`
+            Spotify: \`v${Spicetify.Platform.PlatformData.event_sender_context_information?.client_version_string ?? Spicetify.Platform.PlatformData.client_version_triple}\`
+            Spicetify: \`${Spicetify.version != null ? `v${Spicetify.version}` : "<= v2.7.2"}\`
+            Dribbblish: \`v${process.env.DRIBBBLISH_VERSION}-${process.env.COMMIT_HASH}\`
         `,
         data: "Copy",
-        onChange: () => {
-            copyToClipboard(DribbblishShared.config.getOptions("aboutDribbblishInfo").description);
+        onChange: function () {
+            copyToClipboard(this.description.replace(/\`/g, ""));
             Spicetify.showNotification("Copied Versions");
         }
     });
diff --git a/src/styles/Markdown.scss b/src/styles/Markdown.scss
new file mode 100644
index 0000000..6df1fa6
--- /dev/null
+++ b/src/styles/Markdown.scss
@@ -0,0 +1,3 @@
+*[markdown] {
+    // This would be where we change any styles associated with markdown
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 41bfcaa..77bc9f2 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -9,6 +9,7 @@
 @import "ConfigMenu";
 @import "ContextMenu.scss";
 @import "NoAds";
+@import "Markdown";
 
 :root {
     --bar-height: 70px;