Fixes markdown and layout issues

src/data/changelog.js

@@ -9,6 +9,7 @@ export default {
                 "**Everything** is entirely rewritten, for better or worse.",
                 "**Emotes and CustomCSS** can be completely turned off for those not interested. It saves on memory too by not loading those components.",
                 "**Floating editors** for both custom css and plugins/themes are now available. (See video above)",
+                "**Ace**, the editor from the previous version, has been replaced with **Monaco** which is the editor used in VSCode.",
                 "**Settings panels** are completely new and sleek. They are also highly extensible for potential future features :eyes:",
                 "**Translations** are now integrated starting with only a couple languages, but feel free to contribute your own!",
                 "**Emote menu** now uses React Patching and properly integrates into the new Emoji Picker. (Thanks Strencher#1044!)",
@@ -23,7 +24,9 @@ export default {
                 "**Patcher API** was added to `BdApi` under `BdApi.Patcher`. The old `BdApi.monkeyPatch` was patched to use the Patcher as well. This allows plugins and patches to play nice with one another.",
                 "**jQuery** usage was totally eliminated and is now ___deprecated___ for plugins.",
                 "**General performance** improvements throughout the app, from startup to emotes to addons.",
-                "**Exporting** by plugins is now highly encouraged over trying to match your meta name and class name."
+                "**Exporting** by plugins is now highly encouraged over trying to match your meta name and class name.",
+                "**Plugins and Themes** pages have more options for sorting, views and more. The entire panel got a facelift!",
+                "**Blankslates** have been added all over for that added UX."
             ]
         },
         {

src/data/strings.js

@@ -231,7 +231,7 @@ export default {
         compileError: "Could not be compiled.",
         wasUnloaded: "{{name}} was unloaded.",
         blankSlateHeader: "You don't have any {{type}}!",
-        blankSlateMessage: "Grab some from [this website]({{link}}) and add them to your {{type}} folder."
+        blankSlateMessage: "Grab some from [this website] and add them to your {{type}} folder."
     },
     CustomCSS: {
         confirmationText: "You have unsaved changes to your Custom CSS. Closing this window will lose all those changes.",

src/structs/string.js

@@ -1,7 +1,18 @@
 import Utilities from "../modules/utilities";
 
+const LINK = /\[(.+?)]/;
+
 export default class FormattableString extends String {
     format(values) {
         return Utilities.formatString(this, values);
     }
+
+    replaceLink(callback) {
+        const match = this.match(LINK);
+        if (!match) return [this];
+        const array = this.split(match[0]);
+        const element = callback(match[1]);
+        array.splice(1, 0, element);
+        return array;
+    }
 }

src/ui/blankslates/emptyimage.jsx

@@ -1,7 +1,6 @@
 import {React, WebpackModules} from "modules";
 
 const EmptyImageClasses = WebpackModules.getByProps("emptyImage") || {};
-const MarkdownParser = WebpackModules.getByProps("markdownToReact");
 
 export default class EmptyImage extends React.Component {
     render() {
@@ -11,7 +10,7 @@ export default class EmptyImage extends React.Component {
                         {this.props.title || "You don't have anything!"}
                     </div>
                     <div className={`bd-empty-image-message`}>
-                        {MarkdownParser.markdownToReact(this.props.message || "You should probably get something.")}
+                        {this.props.message || "You should probably get something."}
                     </div>
                     {this.props.children}
                 </div>;

src/ui/settings/addoncard.jsx

@@ -22,7 +22,6 @@ const LinkIcons = {
 };
 
 const Tooltip = WebpackModules.getByDisplayName("Tooltip");
-const MarkdownParser = WebpackModules.getByProps("markdownToReact");
 
 export default class AddonCard extends React.Component {
 
@@ -142,7 +141,7 @@ export default class AddonCard extends React.Component {
                             <span className="bd-title">{this.buildTitle(name, version, author)}</span>
                             <Switch checked={this.props.enabled} onChange={this.onChange} />
                     </div>
-                    <div className="bd-description-wrap scroller-wrap fade"><div className="bd-description scroller">{MarkdownParser.markdownToReact(description)}</div></div>
+                    <div className="bd-description-wrap scroller-wrap fade"><div className="bd-description scroller">{description}</div></div>
                     {this.footer}
                 </div>;
     }

src/ui/settings/addonlist.jsx

@@ -12,6 +12,7 @@ import ListIcon from "../icons/list";
 import GridIcon from "../icons/grid";
 import NoResults from "../blankslates/noresults";
 import EmptyImage from "../blankslates/emptyimage";
+import FormattableString from "../../structs/string";
 
 const Tooltip = WebpackModules.getByDisplayName("Tooltip");
 
@@ -92,7 +93,9 @@ export default class AddonList extends React.Component {
     }
 
     get emptyImage() {
-        return <EmptyImage title={Strings.Addons.blankSlateHeader.format({type: this.props.title})} message={Strings.Addons.blankSlateMessage.format({link: "https://betterdiscordlibrary.com/themes", type: this.props.title}).toString()}>
+        let message = Strings.Addons.blankSlateMessage.format({type: this.props.title});
+        message = FormattableString.prototype.replaceLink.call(message, label => <a className="anchor-3Z-8Bb anchorUnderlineOnHover-2ESHQB cta" href="https://betterdiscordlibrary.com/themes" target="_blank" rel="noopener noreferrer">{label}</a>);
+        return <EmptyImage title={Strings.Addons.blankSlateHeader.format({type: this.props.title})} message={message}>
             <button className="bd-button" onClick={this.openFolder}>{Strings.Addons.openFolder.format({type: this.props.title})}</button>
         </EmptyImage>;
     }
@@ -127,6 +130,17 @@ export default class AddonList extends React.Component {
                 return true;
             });
         }
+
+        const renderedCards = sortedAddons.map(addon => {
+            const hasSettings = addon.instance && typeof(addon.instance.getSettingsPanel) === "function";
+            const getSettings = hasSettings && addon.instance.getSettingsPanel.bind(addon.instance);
+            return <ErrorBoundary><AddonCard editAddon={this.editAddon.bind(this, addon.id)} deleteAddon={this.deleteAddon.bind(this, addon.id)} showReloadIcon={showReloadIcon} key={addon.id} enabled={addonState[addon.id]} addon={addon} onChange={onChange} reload={reload} hasSettings={hasSettings} getSettingsPanel={getSettings} /></ErrorBoundary>;
+        });
+
+        const hasAddonsInstalled = this.props.addonList.length !== 0;
+        const isSearching = !!this.state.query;
+        const hasResults = sortedAddons.length !== 0;
+
         return [
             <SettingsTitle key="title" text={title} button={button} otherChildren={showReloadIcon && <ReloadIcon className="bd-reload" onClick={this.reload.bind(this)} />} />,
             <div className={"bd-controls bd-addon-controls"}>
@@ -148,15 +162,9 @@ export default class AddonList extends React.Component {
                     </div>
                 </div>
             </div>,
-            <div key="addonList" className={"bd-addon-list" + (this.state.view == "grid" ? " bd-grid-view" : "")}>
-            {sortedAddons.map(addon => {
-                const hasSettings = addon.instance && typeof(addon.instance.getSettingsPanel) === "function";
-                const getSettings = hasSettings && addon.instance.getSettingsPanel.bind(addon.instance);
-                return <ErrorBoundary><AddonCard editAddon={this.editAddon.bind(this, addon.id)} deleteAddon={this.deleteAddon.bind(this, addon.id)} showReloadIcon={showReloadIcon} key={addon.id} enabled={addonState[addon.id]} addon={addon} onChange={onChange} reload={reload} hasSettings={hasSettings} getSettingsPanel={getSettings} /></ErrorBoundary>;
-            })}
-            {this.props.addonList.length === 0 && this.emptyImage}
-            {this.state.query && sortedAddons.length == 0 && this.props.addonList.length !== 0 && <NoResults />}
-            </div>
+            !hasAddonsInstalled && this.emptyImage,
+            isSearching && !hasResults && hasAddonsInstalled && <NoResults />,
+            hasAddonsInstalled && <div key="addonList" className={"bd-addon-list" + (this.state.view == "grid" ? " bd-grid-view" : "")}>{renderedCards}</div>
         ];
     }