add markdown parsing to settings descriptions

CHANGELOG.md

@@ -1,5 +1,6 @@
 Added:
 - `Report Bugs` and `Changelog` buttons to `Settings > About`
+- Markdown parsing for settings descriptions
 
 Fixed:
 - Fonts looking blurry

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"

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>
                     `
                     : ""

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}
+            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}
+            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"}
+            Spicetify: \`${Spicetify.version != null ? `v${Spicetify.version}` : "<= v2.7.2"}\`
-            Dribbblish: v${process.env.DRIBBBLISH_VERSION}-${process.env.COMMIT_HASH}
+            Dribbblish: \`v${process.env.DRIBBBLISH_VERSION}-${process.env.COMMIT_HASH}\`
         `,
         data: "Copy",
-        onChange: () => {
+        onChange: function () {
-            copyToClipboard(DribbblishShared.config.getOptions("aboutDribbblishInfo").description);
+            copyToClipboard(this.description.replace(/\`/g, ""));
             Spicetify.showNotification("Copied Versions");
         }
     });

src/styles/Markdown.scss

@@ -0,0 +1,3 @@
+*[markdown] {
+    // This would be where we change any styles associated with markdown
+}

src/styles/main.scss

@@ -9,6 +9,7 @@
 @import "ConfigMenu";
 @import "ContextMenu.scss";
 @import "NoAds";
+@import "Markdown";
 
 :root {
     --bar-height: 70px;