6.3.3

- CSS updates
- Fixed #98 - icon suggester now closes on mobile when an icon is chosen
- Fixed #100 - plugin now includes all free font awesome icons

manifest.json

@@ -1,7 +1,7 @@
 {
     "id": "obsidian-admonition",
     "name": "Admonition",
-    "version": "6.3.2",
+    "version": "6.3.3",
     "minAppVersion": "0.11.0",
     "description": "Admonition block-styled content for Obsidian.md",
     "author": "Jeremy Valentine",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "obsidian-admonition",
-    "version": "6.3.2",
+    "version": "6.3.3",
     "description": "Admonition block-styled content for Obsidian.md",
     "main": "main.js",
     "scripts": {
@@ -27,5 +27,8 @@
         "rollup-plugin-css-only": "^3.1.0",
         "tslib": "^2.0.3",
         "typescript": "^4.0.3"
+    },
+    "dependencies": {
+        "@fortawesome/free-brands-svg-icons": "^5.15.4"
     }
 }

src/assets/main.css

@@ -200,6 +200,33 @@ input.is-invalid {
     color: #dc3545;
 }
 
+.suggestion-content.admonition-icon {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-flow: row wrap;
+}
+
+.suggestion-content.admonition-icon > .suggestion-text.admonition-text {
+    width: fit-content;
+}
+
+.suggestion-content.admonition-icon
+    > .suggestion-flair.admonition-suggester-icon {
+    width: min-content;
+    position: relative;
+    top: unset;
+    left: unset;
+    right: unset;
+    bottom: unset;
+    display: flex;
+    align-items: center;
+}
+
+.suggestion-content.admonition-icon > .suggestion-note {
+    width: 100%;
+}
+
 .admonition-suggester-icon svg {
     width: 1em;
 }

src/modal/index.ts

@@ -5,6 +5,7 @@ import {
     FuzzySuggestModal,
     Modal,
     Notice,
+    Platform,
     Scope,
     Setting,
     SuggestModal,
@@ -68,7 +69,7 @@ class Suggester<T> {
             return false;
         });
     }
-    chooseSuggestion(evt: KeyboardEvent) {
+    chooseSuggestion(evt: KeyboardEvent | MouseEvent) {
         if (!this.items || !this.items.length) return;
         const currentValue = this.items[this.selectedItem];
         if (currentValue) {
@@ -111,6 +112,9 @@ class Suggester<T> {
         if (currentValue) {
             this.owner.selectSuggestion(currentValue, event);
         }
+        if (Platform.isMobile) {
+            this.chooseSuggestion(event);
+        }
     }
     wrap(value: number, size: number): number {
         return ((value % size) + size) % size;
@@ -280,8 +284,9 @@ export class IconSuggestionModal extends SuggestionModal<AdmonitionIconDefinitio
     ) {
         let { item, match: matches } = result || {};
         let content = el.createDiv({
-            cls: "suggestion-content icon"
+            cls: "suggestion-content admonition-icon"
         });
+        let text = content.createDiv("suggestion-text admonition-text");
         if (!item) {
             content.setText(this.emptyStateText);
             content.parentElement.addClass("is-selected");
@@ -295,24 +300,23 @@ export class IconSuggestionModal extends SuggestionModal<AdmonitionIconDefinitio
             let match = matches.matches.find((m) => m[0] === i);
             if (match) {
                 let element = matchElements[matches.matches.indexOf(match)];
-                content.appendChild(element);
+                text.appendChild(element);
                 element.appendText(item.name.substring(match[0], match[1]));
 
                 i += match[1] - match[0] - 1;
                 continue;
             }
 
-            content.appendText(item.name[i]);
+            text.appendText(item.name[i]);
         }
 
         const iconDiv = createDiv("suggestion-flair admonition-suggester-icon");
         iconDiv.appendChild(getIconNode(item));
+        content.appendChild(iconDiv);
         content.createDiv({
             cls: "suggestion-note",
             text: getIconModuleName(item)
         });
-
-        content.prepend(iconDiv);
     }
     getItems() {
         return this.icons;
@@ -554,7 +558,7 @@ ${this.editor.getDoc().getSelection()}
                     .onClick(() => this.close());
                 b.extraSettingsEl.setAttr("tabindex", 0);
                 b.extraSettingsEl.onkeydown = (evt) => {
-                    evt.key == "Enter" && this.close()
+                    evt.key == "Enter" && this.close();
                 };
             });
     }

src/settings.ts

@@ -397,22 +397,19 @@ class SettingsModal extends Modal {
             text: ")"
         });
 
-        const titleSetting = new Setting(settingDiv)
+        new Setting(settingDiv)
             .setName(t("Admonition Title"))
             .setDesc(
                 t("This will be the default title for this admonition type.")
             )
             .addText((text) => {
-                typeText = text;
-                typeText.setValue(this.title).onChange((v) => {
+                text.setValue(this.title).onChange((v) => {
                     if (!v.length) {
                         this.title = null;
                         this.updateTitle(admonitionPreview, this.type);
                         return;
                     }
 
-                    SettingsModal.removeValidationError(text);
-
                     this.title = v;
                     this.updateTitle(admonitionPreview, this.title);
                 });

src/util/icons.ts

@@ -1,5 +1,6 @@
-import { faCopy } from "@fortawesome/free-regular-svg-icons";
+import { faCopy, far } from "@fortawesome/free-regular-svg-icons";
 import { fas } from "@fortawesome/free-solid-svg-icons";
+import { fab } from "@fortawesome/free-brands-svg-icons";
 import {
     IconDefinition,
     IconName,
@@ -11,7 +12,7 @@ import {
 import { RPG } from "./rpgawesome";
 import { AdmonitionIconDefinition, RPGIconName } from "src/@types";
 
-library.add(fas, faCopy);
+library.add(fas, far, fab, faCopy);
 
 export const COPY_BUTTON_ICON = icon(
     findIconDefinition({
@@ -42,12 +43,14 @@ const RPGIconNames: Map<IconName | RPGIconName, AdmonitionIconDefinition> =
         })
     );
 const FontAwesomeIconNames: Map<IconName, AdmonitionIconDefinition> = new Map(
-    Object.values(fas).map((i: IconDefinition) => {
-        return [
-            i.iconName,
-            { name: i.iconName, type: "font-awesome" as "font-awesome" }
-        ];
-    })
+    [Object.values(fas), Object.values(far), Object.values(fab)]
+        .flat()
+        .map((i: IconDefinition) => {
+            return [
+                i.iconName,
+                { name: i.iconName, type: "font-awesome" as "font-awesome" }
+            ];
+        })
 );
 
 export const iconDefinitions = [
@@ -58,6 +61,10 @@ export const iconDefinitions = [
 export function getIconType(str: string): "rpg" | "font-awesome" {
     if (findIconDefinition({ iconName: str as IconName, prefix: "fas" }))
         return "font-awesome";
+    if (findIconDefinition({ iconName: str as IconName, prefix: "far" }))
+        return "font-awesome";
+    if (findIconDefinition({ iconName: str as IconName, prefix: "fab" }))
+        return "font-awesome";
     if (RPG[str as RPGIconName]) return "rpg";
 }
 
@@ -79,16 +86,39 @@ export function getIconNode(item: AdmonitionIconDefinition): Element {
         return el.children[0];
     }
     if (
-        !findIconDefinition({
+        findIconDefinition({
             iconName: item.name as IconName,
             prefix: "fas"
         })
     )
-        return null;
-    return icon(
+        return icon(
+            findIconDefinition({
+                iconName: item.name as IconName,
+                prefix: "fas"
+            })
+        ).node[0];
+    if (
         findIconDefinition({
             iconName: item.name as IconName,
-            prefix: "fas"
+            prefix: "far"
         })
-    ).node[0];
+    )
+        return icon(
+            findIconDefinition({
+                iconName: item.name as IconName,
+                prefix: "far"
+            })
+        ).node[0];
+    if (
+        findIconDefinition({
+            iconName: item.name as IconName,
+            prefix: "fab"
+        })
+    )
+        return icon(
+            findIconDefinition({
+                iconName: item.name as IconName,
+                prefix: "fab"
+            })
+        ).node[0];
 }

versions.json

@@ -12,5 +12,5 @@
     "4.4.2": "0.12.2",
     "5.0.3": "0.12.2",
     "6.2.10": "0.12.4",
-    "6.3.2": "0.12.10"
+    "6.3.3": "0.12.10"
 }